var prevBoxObj; 

 jQuery(document).ready(function() {
    
	   jQuery("#ServicesGov").bind("mouseenter",function() {
	     
	      
           pushUpBox(jQuery("#ServicesGovHighlight"));
	   }).bind("mouseleave",function(){});
	   	     
	   jQuery("#ServicesIVV").bind("mouseenter",function() {
	   
	     
		    pushUpBox(jQuery("#ServicesIVVHighlight"));
	   }).bind("mouseleave",function(){});
	   	  
	   jQuery("#ServicesMan").bind("mouseenter",function() {
	       
	       pushUpBox(jQuery("#ServicesManHighlight"));
	   }).bind("mouseleave",function(){}); 
	  
	   jQuery("#ServicesMS").bind("mouseenter",function() {
	  
		pushUpBox(jQuery("#ServicesMSHighlight"));
	   }).bind("mouseleave",function(){});   
	   

	
 });
 

 
 function pushUpBox(boxToMove)
 {
    
     	
     
 	if (prevBoxObj && prevBoxObj.attr("id") !=  boxToMove.attr("id"))
	{
	 jQuery("#BoxServiceImageContainer").stop();
	 returnToBottom(prevBoxObj);	
	}
 	
	if (!prevBoxObj || prevBoxObj.attr("id") !=  boxToMove.attr("id"))
	{ 
	    
		boxToMove.animate({top:20,opacity:1,easing:"easeInOutQuad"},100,function(){
		
		});
		
	
		
		changeBackground(boxToMove);
		
		prevBoxObj = boxToMove;
	}
	
 }
 
 function returnToBottom(boxToMove)
 { 	
 	boxToMove.animate({top:40,opacity:0.9,easing:"easeInOutQuad"},100);	
 }
 

function changeBackground(boxToMove)
{
	var boxToShow;
    var boxId = boxToMove.attr("id")
	
	if (boxId == "ServicesGovHighlight")
	{
	    boxToShow = "#BoxServiceImage2";
	}
	
	if (boxId == "ServicesIVVHighlight")
	{
		boxToShow = "#BoxServiceImage3";
	}
	
	if (boxId == "ServicesManHighlight")
	{
	    boxToShow = "#BoxServiceImage4";
	}
	
	if (boxId == "ServicesMSHighlight")
	{
		boxToShow = "#BoxServiceImage5";
	}
	

	
		jQuery("#BoxServiceImageContainer").animate({opacity:0},function(){
		
		
		    jQuery(".ServiceImage:visible").hide();
		    
	        jQuery(boxToShow).show();
			
			
			jQuery("#BoxServiceImageContainer").animate({opacity:1},1000);
		
			
			
		});
		
}