$(document).ready(function(){
	
	// adjust the width of sub navigation 
	var w = 0;
	$("#main-nav li .navHide").each(function(i){
		w = ($(this).children().children().length * 200)+20;
		var liW = $(this).parent().width();
		
		$(this).width(w);
		
		// this is for upper left corner of sub navigation	
		$(this).append('<span class="topCorner" style="width: '+ (parseInt(liW)-30) +'px"></span>');		
		
		// this is for lower part of sub navigation
		$(this).append('<div class="navBottom" style="width: '+ w +'px"><div class="navBottomInner" style="width: '+ (parseInt(w)-14) +'px"></div></div>');	
		
		// set margin on first ul
		$(this).children().children().eq(0).css('margin-left', '20px');	
		
	});
	

	// hide sub navigation
	// $("#main-nav li div.navHide").css('opacity',0).removeClass('navHide');
	
	
	
	// mouse hover toggle
	$("#main-nav li.lined, #main-nav li.last").hover(
		function(){						
			$(this).addClass('active');			
			$(this).children().eq(1).stop().show().animate({
					opacity: 1 }, 500);			
		},
		function(){
			$(this).removeClass('active');
			$(this).children().eq(1).stop().hide().animate({
					opacity: 0 }, 500);			
		}
	);
	
	//Fixes the hover problem for IE8
	$("#main-nav li li a").hover(
		function(){						
			$(this).addClass('hovered');	
		},
		function(){
			$(this).removeClass('hovered');		
		}
	);
});