(function($){
   $(document).ready(function(){
		
	$bgColor 		= "#FC0"			// background color for parent li
	$hoverBgColor 	= "#fff"			// background color for parent li
	$subBgColor 	= "#4ea1c3"			// background color for sub nav li
	
	$("nav ul li").hover(function() {
		var thisWidth = $(this).width(); 																								// get the width of li
		$("nav ul ul, nav ul ul li, nav ul ul ul.sub").css({ width : thisWidth, backgroundColor : $subBgColor});						// position of sub nav
		$(this).stop().animate({ backgroundColor: $bgColor }, 400);																		// animate background color of parent li
		$(this).children('nav ul ul').not('nav ul ul ul.sub').stop().animate({ top: 38 }, 300, function(){
			$(this).children('nav ul ul li').css({ overflow : "visible"})																					
		});																															// show the sub nav from top
	},function() {	
		$(this).stop().animate({ backgroundColor: $hoverBgColor }, 800);																// return the background color for li
		$(this).children('nav ul ul').not('nav ul ul ul.sub').stop().animate({ top: -500}, 300, function(){
			$(this).children('nav ul ul li').css({ overflow : "hidden"})		
		});				
	});
	
	$("nav ul ul li").hover(function() {
		$(this).stop().animate({ backgroundColor: $bgColor }, 200);																		// sub nav background color for hover
		$(this).children('nav ul ul ul.sub').fadeIn(400);
		},function() {
		$(this).stop().animate({ backgroundColor: $subBgColor }, 200);																	// return the background color for sub nav
		$(this).children('nav ul ul ul.sub').fadeOut(100);
		});
	
	$('header').append('<div class="mask"></div>');
		
});
})(jQuery);