// Moo Menus & Page Effects

window.addEvent('domready', function() {

	var topMenuItems = $$('#navigation ul li');
	var subMenus = $$('#subnavigation ul');
	var subMenuItems = $$('#subnavigation ul li');

	// Hide the sub menus 
	function hideSubMenus() {
		subMenus.each(function(el) {
			el.style.display = 'none';
			el.style.height = '0';
		});
		subMenuItems.each(function(sel) {
			sel.style.display = 'none';
//			sel.style.opacity = '0';
		});		
	}
	
	// Call this as soon as the page loads, to hide the sub menus
	hideSubMenus();

	// Slide out sub menus
	// Could be made more efficient by checking if a sub-menu is displayed first
	function slideOutSubMenus() {
		subMenuItems.each(function(sel) {
			sel.style.display = 'none';
		});
		subMenus.each(function(el) {
		var childMenuSlide = new Fx.Styles(el, {duration: 500, transition: Fx.Transitions.Quad.easeInOut});
				childMenuSlide.start({
						'height': 0
				}).chain(function() {
					el.style.display = 'none';
				});
		});
	}

	// Add mouseover event to all top level menu items
	topMenuItems.each(function(el) {
		el.addEvent('mouseenter', function(e) {
			e = new Event(e)
			var childMenu = $('sub_' + this.id);
			if (childMenu) {
				hideSubMenus();
				childMenu.style.display = 'block';
				var childMenuSlide = new Fx.Styles(childMenu, {duration: 500, transition: Fx.Transitions.Quad.easeInOut});
				childMenuSlide.start({
						'height': 20	
				}).chain(function() {
					subMenuItems.each(function(subMenuItem) {
//						var subMenuFade = new Fx.Styles(subMenuItem, {duration: 250, transition: Fx.Transitions.Quad.easeInOut});
//						subMenuFade.start({
//							'opacity': 1
//						});
						subMenuItem.style.display = 'inline';
					});
				});
			} else {
				slideOutSubMenus();
			}
			e.stop();
		});
	});
	
		// Add mouseover event to all top level menu items
	topMenuItems.each(function(el) {
		el.addEvent('mouseleave', function(e) {
			e = new Event(e)
			var childMenu = $('sub_' + this.id);
			if (childMenu) {
				hideSubMenus();

			} else {
				slideOutSubMenus();
			}
			e.stop();
		});
	});
	

});