// DOM Ready
// TRY THIS.....
//http://stackoverflow.com/questions/3256835/jquery-drop-down-remain-down-while-hover-over-drop-down

$(function() {

    var $el, topPos, newHeight;
        $mainNav2 = $("#example-two");  
	var $headerStartContent = $("#headerContentBox");
	var $MotorMenu = $("#headerMenuMotor");  
    
    /*
        EXAMPLE TWO
    */
    
    $mainNav2.append("<li id='magic-line-two'></li>");
    
    var $magicLineTwo = $("#magic-line-two");
    
    $magicLineTwo
        .height($magicLineTwo.height())
		
        //.css("top", $mainNav2.position().top)
        .data("origTop", $(".current_page_item_two a").position().top)
        .data("origHeight", $magicLineTwo.height())
        
           var $firstLoad = 0; //Use this variable as a switch to fix a bug with the background being wrong height at page load  
		   var $firstLoad2 = 0; 
    $("#example-two a").mouseenter(function() {
        $el = $(this);
		
		if ($firstLoad == 0){
		newHeight = $magicLineTwo.data("origHeight");
		$firstLoad = 1;	
		}
		else{
		newHeight = $el.parent().height();
		$magicLineTwo
		.css("margin-top", 0);
		topPos = $el.position().top;
		
		/*$headerStartContent
		.addClass("inactive");		
		$MotorMenu	
		.removeClass("inactive");*/
		}
        
		
        $magicLineTwo.stop().animate({
            top: topPos,
            height: newHeight,
           		
			
        })
    });
	$("#example-two a").mouseleave(function() {
		
				
		var $nextTop = $magicLineTwo.data("origTop") -25; //combines with .css("margin-top", 0) above to ensure positioning is correct
		
		
				
        $magicLineTwo.stop().animate({
            top: $nextTop,
            height: $magicLineTwo.data("origHeight"),
            
			
        }); 
		
		
    });
	
    
    /* Kick IE into gear */
    $(".current_page_item_two a").mouseenter();
    
});