// jQuery Document
$(function(){
	var $allTopNavs = $('#nav li a:not(#nav li ul li a)');
	var $fistTab = $('#nav li:eq(1) a:not(#nav li ul li a)');
	var $notFistTab = $('#nav li:gt(1) a:not(#nav li ul li a)');
	var $subNav = $('#nav #servicesSubMenu');
	var fadeTime = 250;
	
	$allTopNavs.css('height', '75px'); //disable css hover
	
	$('#header #logo').hover(
		function(){
			$subNav.fadeOut(fadeTime);
			SetOnState($fistTab, false);
			SetTabHeight($fistTab, '75px');
			SetTabHeight($notFistTab, '75px');
		}, 
		function(){}
	);
	
	//all top level tabs
	$allTopNavs.hover(
		function(e){
			e.preventDefault();
			$(this).stop()
			if(!$(this).data('onState') == true){
				SetTabHeight(this, '85px');
			}
		},
		function(e){ 
			e.preventDefault();
			var index = $($fistTab).index(this);
			if (!index == 0){ //do not reset first tab to start position on mouse out
				SetTabHeight(this, '75px');
			}
		}
	);	
	
	//fist tab only
	$fistTab.hover(
		function(e){
			e.preventDefault();
			if(!$(this).data('onState') == true){
				$subNav.stop(true, true).fadeIn(fadeTime);
				SetTabHeight($notFistTab, '70px');
				SetOnState($fistTab, true);
			}
		},
		function(e){
			e.preventDefault();//this wont work as the mouse transition from the tab to submenu will cause the sub menu to fade out
		}
	);
	
	//fade the sub menu on-mouse-out (not fist tab )
	$notFistTab.hover(
		function(e){
			e.preventDefault();
			$subNav.fadeOut(fadeTime);
			SetOnState($fistTab, false);
			SetTabHeight($fistTab, '75px');
		},
		function(e){}
	);
  
	$subNav.css({'display': 'none', 'left': 'auto'});
	
	//sub nav hover
	$subNav.hover(function(){}, 
		function(){
			$(this).fadeOut(fadeTime);
			SetOnState($fistTab, false);
			SetTabHeight($fistTab, '75px');
			SetTabHeight($notFistTab, '75px');
		}
	);
	$subNav.click(function(e){
		//e.preventDefault();
		$(this).fadeOut(fadeTime);
		SetOnState($fistTab, false);
	});	
	
	//helper functions
	function SetTabHeight($tab, sheight){
		$($tab).stop().animate({height: sheight}, 250, 'easeOutBack');
	}
	function SetOnState(oElement, bOn){
		$(oElement).data('onState', bOn);
	}
	
}); //End jQuery