$(document).ready(function(){

	$("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*)

	$("ul.topnav li span").click(function() { //When trigger is clicked...

		//Following events are applied to the subnav itself (moving subnav up and down)
		$(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click

		$(this).parent().hover(function() {
		}, function(){
			$(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
		});

		//Following events are applied to the trigger (Hover events for the trigger)
		}).hover(function() {
			$(this).addClass("subhover"); //On hover over, add class "subhover"
		}, function(){	//On Hover Out
			$(this).removeClass("subhover"); //On hover out, remove class "subhover"
	});

});

/*
$(document).ready(function(){

	//alert("test");

	$("#mainNav ul li a").hover(function() { //When first level is hovered...

		$("#mainNavFlyout1").css('visibility','visible');
		$("#mainNavFlyout1").slideDown('fast').show(); //Drop down the subnav on click

		$("#mainNav").hover(function() {	
										
		}, function(){
			$("#mainNavFlyout1").hide(); //When the mouse hovers out of the subnav, move it back up
		});

	//Following events are applied to the trigger (Hover events for the trigger)
	}).hover(function() {
			$(this).addClass("navHover"); //On hover over, add class "subhover"
		}, function(){	//On Hover Out
			$(this).removeClass("navHover"); //On hover out, remove class "subhover"
	});

});
*/


$(document).ready(function(){

	var $navMenuLinks = $('#mainNav ul li a');
	var $navFlyouts = $('div.mainNavFlyout');
	
	// If mouse leaves #mainNav, turn all flyouts & 1st level hover styles OFF  =  reset().

		function navReset() {
			//alert('reset');
			$navFlyouts.hide(); //close all other open menus
			$navMenuLinks.removeClass("navHover");
			/*
			jQuery("#mainNavFlyout1").hide(); 
			jQuery("#mainNavFlyout2").hide(); 
			jQuery("#mainNavFlyout3").hide(); 
			jQuery("#mainNavFlyout4").hide(); 
			jQuery("#mainNavFlyout5").hide(); 
			jQuery("#mainNavFlyout6").hide();
			*/
		};
		
		$("#mainNav").mouseleave(function() { //When first level is hovered...
			navReset();
		});	


	// If mouse hovers over a first level
	// 		1) turn all flyouts & 1st level hover styles OFF  =  reset().
	// 		2) turn THIS 1st level style to hover, show Flyout

		$("#mainNav ul li a").hover(function() { //When first level is hovered...
	
			//alert('test');
			
			navReset();
			
			// How to find 'each' flyout??????
			var $currentLinkID = this.id;
			//alert($currentLinkID);
			if ( $currentLinkID == "mainNavLink1" ) {
				$("#mainNavFlyout1").css('visibility','visible');
				$("#mainNavFlyout1").show(); //Drop down the subnav on click
			} else if ( $currentLinkID == "mainNavLink2" ) {
				$("#mainNavFlyout2").css('visibility','visible');
				$("#mainNavFlyout2").show(); //Drop down the subnav on click	
			} else if ( $currentLinkID == "mainNavLink3" ) {
				$("#mainNavFlyout3").css('visibility','visible');
				$("#mainNavFlyout3").show(); //Drop down the subnav on click	
			} else if ( $currentLinkID == "mainNavLink4" ) {
				$("#mainNavFlyout4").css('visibility','visible');
				$("#mainNavFlyout4").show(); //Drop down the subnav on click	
			} else if ( $currentLinkID == "mainNavLink5" ) {
				$("#mainNavFlyout5").css('visibility','visible');
				$("#mainNavFlyout5").show(); //Drop down the subnav on click	
			} else if ( $currentLinkID == "mainNavLink6" ) {
				$("#mainNavFlyout6").css('visibility','visible');
				$("#mainNavFlyout6").show(); //Drop down the subnav on click	
			}
			
			
			$(this).addClass("navHover"); 
			
		//Following events are applied to the trigger (Hover events for the trigger)
		});

	// That's it.


});