// Generate menu.
window.addEvent('domready', function() {
	
	
//  var currentPage   = "overview";
//	var curVehicle = "wrangler";
//	var subNav = "vehicleList";
	
	//initiate flyouts if the class is include
	if(window.Flyouts) {
		Flyouts.init();
	}
	
	// each menu has a parent class of 'menu_item'. loop through each menu item and add the slide effect
	$$(".menu_item").each(
		function(menu_item, i) {
			//set active items if they are in this menu type
			if(menu_item.getElement('#'+currentPage)) {
				if(subNav == '') {
					$E('a.brand_menu_link', menu_item).addClass('menu_on');
				}
				else if(subNav != "vehicleList") {
					$E('a.brand_menu_link', menu_item).addClass('menu_on');
					menu_item.getElement('#'+currentPage).addClass('vehicle_menu_on');
				}
			}
			//each menu has a container with the class 'menu' that the slide effect is applied to.
			//local variable so that each menu item has its own mySlide variable
			//**important: must have 'wait:false' or the menu will break if you hover in and out too quickly
			//add hide(); at the end to close each container initially
			if(menu_item.getElement(".menu")) {
				//alert("Link: " + $E('a.brand_menu_link', menu_item).getCoordinates().width);
				//alert("Menu Container: " + $E('.menu', menu_item).getCoordinates().width);
				
				
				var mySlide = new Fx.Slide(menu_item.getElement(".menu"), {wait:false, duration: 300, fps:100, transition: Fx.Transitions.Quad.easeInOut}).hide();
				
				menu_item.getElements("ul").setStyle('visibility','visible');
				
				if(i == 0 && window.Flyouts) {
					//get the width of the menu item
					$$(".flyout").each(
						function(flyout) {
							flyout.setStyle('left', menu_item.getCoordinates().width + 10 );
						}
					);
				}
				
				//create the events using the custom mootools mouseenter and mouseleave events
				//*mouseenter fires if any of the children get entered
				menu_item.addEvent("mouseenter", function(e) {
										
					//if flyouts exist
					if(window.Flyouts) {
						//if mouse doesn't enter from a flyout
						if(Flyouts.activeMenu() != null && Flyouts.activeMenu() != menu_item) {
							//if mouseenters from a flyout
							//hide the old flyout
							Flyouts.hideFlyout();
						}
						//set active menu
						Flyouts.activeMenu(menu_item);
					}
					mySlide.slideIn();
					$E('a.brand_menu_link', menu_item).addClass('brand_menu_link_hovered');
					if($E('span', $E('a.brand_menu_link', menu_item)))
						$E('span', $E('a.brand_menu_link', menu_item)).addClass('arrow');
					
				});
				menu_item.addEvent("onFlyout", function() {
					mySlide.slideIn();
					$E('a.brand_menu_link', menu_item).addClass('brand_menu_link_hovered');
					if($E('span', $E('a.brand_menu_link', menu_item)))
						$E('span', $E('a.brand_menu_link', menu_item)).addClass('arrow');
				});
				menu_item.addEvent("offFlyout", function() {
					mySlide.slideOut();
					$E('a.brand_menu_link', menu_item).removeClass('brand_menu_link_hovered');
					if($E('span', $E('a.brand_menu_link', menu_item)))
						$E('span', $E('a.brand_menu_link', menu_item)).removeClass('arrow');
				});
				//*mouseleaves wont fire until all children are left
				menu_item.addEvent("mouseleave", function(e) {					
					if(window.Flyouts) { //if flyouts exist
						//if you're not leaving into a flyout
						if(Flyouts.activeMenu() == null || !Flyouts.shade_enabled) {
							//perform your basic slideout
							mySlide.slideOut();
							$E('a.brand_menu_link', menu_item).removeClass('brand_menu_link_hovered');
							if($E('span', $E('a.brand_menu_link', menu_item)))
								$E('span', $E('a.brand_menu_link', menu_item)).removeClass('arrow');
						}
						//if you are leaving into a flyout, don't close the menu
					}
					else { //if there aren't flyouts, perform the close
						mySlide.slideOut();
						$E('a.brand_menu_link', menu_item).removeClass('brand_menu_link_hovered');
						if($E('span', $E('a.brand_menu_link', menu_item)))
							$E('span', $E('a.brand_menu_link', menu_item)).removeClass('arrow');
					}
				});
			}
		}
	);
		
});