// Slicing steps hover

$(function(){

	$("#steps .st").mouseenter(function(){
		
		$("#steps .st_active").animate({ height : "0px" }, 600);
		$("#steps .st_active p.active a.naruci_sad").animate({ bottom: "-70px" }, 500)
		$("#steps .st_active p.active a.info_btn").animate({ bottom: "-70px" }, 400)
		
		//each div box has two classes. the first. "century" and the other st_imekoraka. 

		var  klasa = $(this).attr("class");
		
		//remove cells from the class and stays just the right steps in the variable "class" 
		
		klasa =  klasa.replace(/st st_background /, "");
		
		//only for the definition of value for the detection of error, it is never allowed to appear on page 

		var height_active="10px";
		
		//each box has a different height, the "height_active" variable value is saved 

		if(( klasa=="st_idea") || ( klasa=="st_deployment")){ height_active="281px"; }
		if(( klasa=="st_design") || ( klasa=="st_coding")){ height_active="311px"; }
		if ( klasa=="st_slicing"){ height_active = "341px" }
		
		//box a opening where the mouse 

		$("." + klasa + ':not(.st_background)').animate({ height:height_active }, 600); //
		
		
		//removing class st_active with windows which can be closed 
		$("#steps .st_active").removeClass("st_active");
		
		//setting class st_active the box that is open 

		$("." + klasa + ':not(.st_background)').addClass("st_active");
		
		//animation Order now and info button 

		setTimeout('$(".st_active p.active a.naruci_sad").animate({ bottom: "9px" }, 400);',500);
		setTimeout('$(".st_active p.active a.info_btn").animate({ bottom: "9px" }, 350);',400);		
	
	})//end mouse enter .st

})