Event.observe(window,'load',init,false);

/*** Initializes the page ***/
function init(){
	var topmenu = $('topmenu');
	var Child, grandChild, gGrandChild;
	var foundMenu = false;
	Event.observe(document,'click',closeMenu,false);
	
	for(var x = 0; x< topmenu.childNodes.length; x++){
		var child = topmenu.childNodes[x]
		foundMenu = false;
		if(child.hasChildNodes){
			for(var y = 0; y < child.childNodes.length; y++){
				grandChild = child.childNodes[y];
				if(grandChild.className == "submenu"){
					child.menuId = grandChild.id;
					child.onmouseover = function(){showMenu(this.menuId);}
					child.onmouseout = function(){menuMouseOut(this.menuId)}
					grandChild.onmouseover = function(){menuMouseOver(this.id)}
					grandChild.onmouseout = function(){menuMouseOut(this.id)}
					foundMenu = true;
				};
			};
			if(!foundMenu){
				//get the a tag from the li
				child.onmouseover = function(){ buttonMouseOver(this);}
				child.onmouseout = function(){ buttonMouseOut(this);}
			};
		};
	};
};

var activeMenu = null;		//the menu which is actively open
var menuTimeoutId = null;   //the id from the setTimeout function


/*** changed the class of the buttons on mouse over ***/
function buttonMouseOver(button){
	button.firstChild.className = "on";
	closeMenu();
};


/*** resets the class of the buttons on mouse out ***/
function buttonMouseOut(button){
	button.firstChild.className = "";
};


/*** Makes the selected Menu appear or disappear ***/
function showMenu(menuId){
	var menu = $(menuId);
	menuMouseOver();
	if(menu != activeMenu){
		//clear old menu if defined
		closeMenu();
		activeMenu = menu;
		//display new menu
		menu.style.display = "";
		//new Effect.toggle(menu, "blind", {duration: .1});
		menu.parentNode.firstChild.className = "on";
	};
};


/*** Closes productMenu ***/
function closeMenu(){
	var thisMenu = activeMenu;
	if(thisMenu != null){
		thisMenu.parentNode.firstChild.className = "";
		thisMenu.style.display = "none";
		//new Effect.toggle(activeMenu, "blind", {duration: .5});
		activeMenu = null;
	};
	//var menus = document.getElementsByClassName("submenu","topMenu")
	//for(var x = 0; x < menus.length; x++){
	//	menus[x].style.display = "none";
	//};
};



/*** When the user rolls out of the productMenu ***/
function menuMouseOut(){
	//ther should only be one timeout active so if there is already one clear it
	if(menuTimeoutId) clearTimeout(menuTimeoutId);
	menuTimeoutId = setTimeout("closeMenu()",2000);
};


/*** When the user rolls over the productMenu ***/
function menuMouseOver(){
    clearTimeout(menuTimeoutId);
    menuTimeoutId = 0;
};
