// Slide Animation

$(document).ready(function(){  
    // Declare the Speed of the Slide Animation
	var $speed = 150;
	// When mouse hovers off the element they all return to default size
   $(".refractory,.fire,.hvac,.insulation").mouseout(function(){
      $(".refractory,.fire,.hvac,.insulation").animate({width:"163px"},{queue:false,duration:$speed});});
	// When mouse hovers over element, element increases in size, other elements decrease in size
   $(".refractory").mouseover(function(){
	  $(".hvac,.insulation,.fire").animate({width:"139px"},{queue:false, duration:$speed })
      $(".refractory").animate({width:"235px"},{queue:false,duration:$speed });});
   $(".fire").mouseover(function(){
      $(".refractory,.hvac,.insulation").animate({width:"139px"},{queue:false,duration:$speed })
	  $(".fire").animate({width:"235px"},{queue:false,duration:$speed } );});
	$(".hvac").mouseover(function(){	
	  $(".fire,.refractory,.insulation").animate({width:"139px"}, {queue:false,duration:$speed })
	  $(".hvac").animate({width:"235px" },{queue:false,duration:$speed});});
	$(".insulation").mouseover(function(){	
	  $(".hvac,.fire,.refractory").animate({width:"139px"},{queue:false,duration:$speed })
	  $(".insulation").animate({width:"235px"},{queue:false,duration:$speed});});
});

