// JavaScript Document

$(document).ready(function(){
   

   
 $("#service1").hover(
      function () {
		  
		stopAnimation1();
		  
        $(".service-copy").hide();
		$("#warehousing-short").show();
		
		$("#service2").animate({opacity: 0.33}, 400);
		$("#service3").animate({opacity: 0.33}, 400);
		$("#service4").animate({opacity: 0.33}, 400);

      }, 
      function () {

		stopAnimation1();

		$("#service2").animate({opacity: 1}, 400);
		$("#service3").animate({opacity: 1}, 400);
		$("#service4").animate({opacity: 1}, 400);
		
	  }
    );

 $("#service2").hover(
      function () {
	
		stopAnimation2();
	
        $(".service-copy").hide();
		$("#distribution-short").show();
		
		$("#service1").animate({opacity: 0.33}, 400);
		$("#service3").animate({opacity: 0.33}, 400);
		$("#service4").animate({opacity: 0.33}, 400);
		
      }, 
      function () {
		  
		  stopAnimation2();
		  
			$("#service1").animate({opacity: 1}, 400);
			$("#service3").animate({opacity: 1}, 400);
			$("#service4").animate({opacity: 1}, 400);

		}
    );
 
  $("#service3").hover(
      function () {
		  
		stopAnimation3();
		  
        $(".service-copy").hide();
		$("#fulfillment-short").show();
		
		$("#service1").animate({opacity: 0.33}, 400);
		$("#service2").animate({opacity: 0.33}, 400);
		$("#service4").animate({opacity: 0.33}, 400);
		
      }, 
      function () {
		  
		  stopAnimation3();
		  
		  	$("#service1").animate({opacity: 1}, 400);
			$("#service2").animate({opacity: 1}, 400);
			$("#service4").animate({opacity: 1}, 400);
		  
		  }
    );
  
   $("#service4").hover(
      function () {
		  
		  stopAnimation4();
		  
        $(".service-copy").hide();
		$("#procurement-short").show();
		
		$("#service1").animate({opacity: 0.33}, 400);
		$("#service2").animate({opacity: 0.33}, 400);
		$("#service3").animate({opacity: 0.33}, 400);
		
      }, 
      function () {
		  
		  stopAnimation4();
		  
		   $("#service1").animate({opacity: 1}, 400);
			$("#service2").animate({opacity: 1}, 400);
			$("#service3").animate({opacity: 1}, 400);
		  
		  }
    );
   
   function stopAnimation1() {
	   
		$("#service2").stop();
		$("#service3").stop();
		$("#service4").stop();   
	   
   }
   
   function stopAnimation2() {
	   
		$("#service1").stop();
		$("#service3").stop();
		$("#service4").stop();   
	   
   }
   
   function stopAnimation3() {
	   
		$("#service1").stop();
		$("#service2").stop();
		$("#service4").stop();   
	   
   }
   
   function stopAnimation4() {
	   
		$("#service1").stop();
		$("#service2").stop();
		$("#service3").stop();   
	   
   }

});