var gIntRunner = null;	// interval for timber wolf menu chaser guy
var gNumMenu = null;

// Set the mouseover & mouse out on all menu options
// And collapse all the menus
window.onload = function()
{
	menuCtl();
	menuSize();
	menuJS();
}

// ensure menu options are resized when window is resized
window.onresize = menuSize;

// function to perform some action on menu options
// action = ref to function
// recurse = true/set if want to do this for all descendents
//           false/null if only immediate children
// p = parent node (don't send if want main menu)
function menuDo(action, recurse, p)
{
	if (!p)
		p = document.getElementById('ulMenu');
	
	if (! p.childNodes)
		return;

	for (var i = 0; i < p.childNodes.length; i++)
	{
		var c = p.childNodes[i];
		if (c.nodeName == 'LI')
			action(c);
		if (recurse)
			menuDo(action,recurse, c);
	}
}

// Count the number of menu options, then set the width such that
// they always take up the entire width of the screen
function menuSize()
{
	// first, count the number of menu options
	gNumMenu = 0;
	var action = function() {gNumMenu++;};
	menuDo(action);

	// get width of window and divide by number of menu options.
	// subtract 1 so rounding errors never push menus into 2 rows
	var width = document.getElementById('divHeader').offsetWidth / gNumMenu -.5 + 'px';
	action = function(node) { node.style.width = width;};
	menuDo(action,1);
}
	
// Add javascript event code to menu options here
// So no need to clutter up the html
function menuJS()
{
	var action =
		function(node)
		{
			node.onmouseover = function() {menuCtl(this);};
			node.onmouseout = function() {menuCtl();};
		};
	menuDo(action);
}

// pass in a menu id to collapse all but that one
// or blank to collapse all
// just sets the css class to "inactive" unless it's
// the node of interest
function menuCtl(id)
{
	var action =
		function(node)
		{
			node.className = (node == id ? '' : 'clsInactive');
		};
	menuDo(action);

	// send runner to active menu option
	if (id)
		sendRunner(id);
}


// Stop runner wherever he currently is, and send to new destination
// if running to the right, make right side line up
// if running to the left, make left side line up
function sendRunner(id)
{
	clearInterval(gIntRunner);
	var x0 = id.offsetLeft;
	var xf = x0 + id.offsetWidth;
	var r = document.getElementById('divRunner');
	var cur0 = r.offsetLeft;
	var curf = cur0 + r.offsetWidth;

	var dest;	// destination x coord

	// send him running the proper direction

	// if already there, do nothing
	if (cur0 == x0 || curf == xf)
		return;
	// run to the right
	else if ((cur0+curf) < (x0+xf))
	{
		r.style.backgroundImage = 'url(img/runner_right.gif)';
		dest = xf - r.offsetWidth;
	}
	//run to the left
	else
	{
		r.style.backgroundImage = 'url(img/runner_left.gif)';
		dest = x0;
	}

	var func = function() {run2Menu(dest);};
	gIntRunner = setInterval(func,50);
}

// start the timber wolf runner toward his goal
function run2Menu(dest)
{
	var r = document.getElementById('divRunner');
	var cur = r.offsetLeft;	//current pos of runner
	var step = 10;	// minimum step is 10 pixels

	// Opera 9 doesn't redraw things properly:(
	// resetting header div's css class to anything forces redraw
	//var hdr = document.getElementById('divHeader');
	//hdr.className = (hdr.className == 'flip' ? 'flop' : 'flip');

	// if close enough, move to destination & clear interval
	if (Math.abs(cur-dest) < step)
	{
		r.style.left = dest + 'px';
		clearInterval(gIntRunner);
		gIntRunner = null;
	}
	else
	{
		cur += (dest-cur)/Math.abs(dest-cur) * Math.max(step,Math.abs(dest-cur)*.2);
		r.style.left = cur + 'px';
	}
}