// track over status for each menu.
var over = new Array();
var collapsed = new Array();
var menuList = new Array();

	function initElements() {
		divEl = document.getElementById("nav");
		doc = divEl.getElementsByTagName("li");
		//alert(doc.length);
		count = 0;
		for (var i = 0; i < doc.length; i++){
			//alert("class " + doc[i].className + " on tag " + doc[i].tagName);
			if (doc[i].className == "submenu") {
				//alert("found class " + doc[i].className + " and i = " + i + " and doc[" + i + "].name = " + doc[i].id);
				subNum = "sub" + doc[i].id;
				menuList[count] = subNum;
				collapsed[subNum] = "true";
				over[subNum] = "false";			
				obj=document.getElementById(subNum);
				obj.style.display = "block";
				var myFx = new Fx.Style(obj, 'opacity').set(0);
				//alert("menuList[" + count + "] = " + menuList[count] + " doc[" + i + "] = " + doc[i].name);
				count++;
			}
		}
	}

	//debug function. call getinfo(event) in the onmouseover body event
	function getinfo(event){
		errObj=document.getElementById("id1");
		errObj.innerHTML = "X " + event.clientX + " Y " +  event.clientY + " <br>\n";
		errObj.innerHTML = errObj.innerHTML + "over[sub2] = " + over["sub2"] + "<br>\n collpased[sub2] = " + collapsed["sub2"] + "<br>\n";
		errObj.innerHTML = errObj.innerHTML + "over[sub3] = " + over["sub3"] + "<br>\n collpased[sub3] = " + collapsed["sub3"] + "<br>\n";
		errObj.innerHTML = errObj.innerHTML + "over[sub4] = " + over["sub4"] + "<br>\n collpased[sub4] = " + collapsed["sub4"] + "<br>\n";
	}

	//do this when the mouse is over a menu object
	function mouseIn(a, event) {
		//alert(a);
		//if we were never over the menu, let's display it.
		if (over[a] == "false" && collapsed[a] == "true"){
			//keep track of the fact that mouse is over our menu
			over[a] = "true";
			//get our menu object
			obj=document.getElementById(a);
			//make sure it starts out transparent
			
			//since in CSS it is set to display: none, let's set it to display: block
			//while it is still transparent
			// obj.style.display = "block";			
			//var fx = new Fx.Styles(obj, {duration:200, wait:false});
			var myFx = new Fx.Style(obj, 'opacity', {duration:200}).start(0,1);
			/*
			var widthChange = new Fx.Style(obj, 'width', {duration:500});
			widthChange.start(180);
			*/
		}
		//if the menu was already openned let's not display it, but let's make sure
		//we are still set as being over the menu just in case the mouse slipped
		//outside the boundary and just came back in.
		over[a] = "true";
		collapsed[a] = "false";
	}
	
	function collapse(c)
	{
		// now the timeout elapsed, let's double check to see
		// if the mouse is still outside of the menu or if it 
		// moved back in.  If the mouse moved back in, over[] should be
		// set to "true" since that would be reset in the mouseIn() function
		
		if (over[c] == "false" && collapsed != "true") {
			// mouse is definitely out, change the style to hide the menu we moved out of.
			obj=document.getElementById(c);
			var myFx = new Fx.Style(obj, 'opacity', {duration:250}).start(1,0);
			/*
			var widthChange = new Fx.Style(obj, 'width', {duration:200});
			widthChange.start(0);
			*/
			for (var i = 0; i < menuList.length; i++)
			{
				if (c == menuList[i])
				{
					collapsed[c] = "true";
					over[c] = "false";
				}
			//end for (var i = 0; i < menuList.length; i++)
			}		
		//end if (over[c] == "false" && collapsed != "true") {
		}

	//end function collapse(c)
	}	
	
	//do this when the mouse leaves the menu
	function mouseOut(b, event) {
		//first let's track the fact that the mouse moved
		//away from the menu.
		over[b] = "false";				
		// start timer, we will delay the collapse of the menu
		// to allow the mouse to move back over it if it just 
		// slipped out for a moment.
		setTimeout("collapse('" + b + "')",100);
		//use this function below for debugging.
		//collapse(b);
	}