//global variable to hold variables for the menu
var menuState = [];

//mouseover a main menu element
function mainMenuOver(ref, sub){
	$(ref).setStyle('backgroundColor', '#36699f');
	if(sub){//show submenu if present
		$('menu_' + sub).setStyle('display', 'block');
		if(menuState[1] && menuState[1] != sub){//hide previous submenu if it was open
			$('menu_' + menuState[1]).setStyle('display', 'none');
		} else if(menuState[4] && menuState[4].timer){
			menuState[4].stop();//stop fade effect and unfade
			menuState[4].set(1);
		} else{
			$clear(menuState[0]);//clear timer
		}
	}
	menuState[1] = sub;
}

function mainMenuOut(ref, sub){//mouseout a main menu item
	$(ref).setStyle('backgroundColor', '#777777');
	if(sub){//if main menu item has a submenu than start a timer to hide it
		var id = 'menu_' + sub;
		menuState[3] = sub;
		menuState[0] = hideSubMenu.delay(300, $('menu_' + menuState[3]), sub);//200 millisecond delay on hide
	}
}


function hideSubMenu(sub){//fade out submenu
	menuState[4] = new Fx.Style(this, 'opacity', {duration: 200, onComplete: function(){this.setStyles({display: 'none', opacity: 1});}.bind(this)}).start(0);
}

function subMenuOver(ref){//mouseover a submenu row
	$(ref).setStyle('backgroundColor', '#cdd9e7');
}

function subMenuOut(ref){//mouseout a submenu row
	$(ref).setStyle('backgroundColor', '#d3d3d3');
}