$(document).ready(function(){  

	// hover out of the sub menu area
	$("div#menu ul li .subMenuMiddleLeftBg").mouseleave(function(){
		//console.log("i am leaving man");
		timerId = setTimeout(function(){
			$("div#menu ul.selected li.selected a").removeClass("hoverBg");
			$(this).parentsUntil("div#menu").removeClass("selected");
			
			$("div#menu #menuLeft ul").removeClass("selected");
			$("div#menu #menuLeft ul li").removeClass("selected");
			$("div#menu #menuRight ul").removeClass("selected");
			$("div#menu #menuRight ul li").removeClass("selected");

			//console.log("i got ride of all selected classes");
		}, 10)
	});


	$("div#menu ul li a").hover(function() { //When trigger is clicked...  
		
		//console.log("mouse enter the main link");
		
		//Following events are applied to the subnav itself (moving subnav up and down)  
		$(this).parent().find("div.subMenuMiddleLeftBg").show(); //Drop down the subnav on click 
	
		$(this).parent().find("span.shadowMenuLeft").show();
		$(this).parent().find("span.shadowMenuRight").show();
/*
		if(typeof timerId !== 'undefined'){
			console.log("clear the time out");
			clearTimeout(timerId);
			timerId = undefined;
		}
*/

		$(this).parent().mouseenter(function() {
			$(this).parentsUntil("div#menu div#menuLeft").addClass("selected");
			$("div#menu ul.selected li.selected a").addClass("hoverBg");

		}).mouseleave(function(){ 
			// hides the menu and the 2 drop shadows on the menu link
			$(this).parent().find("div.subMenuMiddleLeftBg").hide(); 
			$(this).parent().find("span.shadowMenuLeft").hide();
			$(this).parent().find("span.shadowMenuRight").hide();
		});  
		
	}, function(){  //On Hover Out  
			$(this).removeClass("hoverBg"); //On hover out, remove class "subhover"  

	});  
	
	$("#menuLeft ul#topmenuleft>li:last>span.shadowContent").addClass("noBorder");
	$("#menuRight ul#topmenuright>li:last>span.shadowContent").addClass("noBorder");

});