$(document).ready(function(){
	var cnt = 1;
	var off = 0;
	
	
	window.onload = function(){ 
			jc(cnt);
			$("#new_arrivals").animate({opacity: "1"}, 3000, go2)

	}
	
	function go1(){
			if (off == 0){
		   	$("#slidearea").animate({marginLeft: "0px", marginTop: "0px"}, 1500);  
				$("#s1").css("opacity", 1); 
				$("#s2").animate({opacity: "0.3"}, 1000);
				cnt = 1;
				$("#new_arrivals").animate({opacity: "1"}, 3000, go2)
			}
	}	

	function go2(){
			if (off == 0){
		    $("#slidearea").animate({marginLeft: "0px", marginTop: "0px"}, 1500); 
				$("#s2").css("opacity", 1); 
				$("#s1").animate({opacity: "0.3"}, 1000);
				cnt = 2;
				$("#new_arrivals").animate({opacity: "1"}, 3000, go3)
			}
	}

	function go3(){
			if (off == 0){
		    $("#slidearea").animate({marginLeft: "-476px", marginTop: "0px"}, 1500); 
				$("#s3").css("opacity", 1); 
			 	$("#s4").animate({opacity: "0.3"}, 1000);
				cnt = 3;
				$("#new_arrivals").animate({opacity: "1"}, 3000, go4)
			}
	}	
	
	function go4(){
			if (off == 0){
		    $("#slidearea").animate({marginLeft: "-476px", marginTop: "0px"}, 1500); 
				$("#s4").css("opacity", 1); 
			 	$("#s3").animate({opacity: "0.3"}, 1000); 
		  	cnt = 4;
		  	$("#new_arrivals").animate({opacity: "1"}, 3000, go5)
			}
	}		
	
	function go5(){
			if (off == 0){
	    	$("#slidearea").animate({marginLeft: "-952px", marginTop: "0px"}, 1500);  
	  		cnt = 5;
		  	$("#new_arrivals").animate({opacity: "1"}, 3000, go1)
			}
	}		
	
	
	$("#mi_uno").click(function(){
   	$("#slidearea").animate({marginLeft: "0px", marginTop: "0px"}, 1500);  
		$("#s1").css("opacity", 1); 
		$("#s2").animate({opacity: "0.3"}, 1000);
		cnt = 1;
		off = 1;
  });	
	$("#mi_dos").click(function(){
    $("#slidearea").animate({marginLeft: "0px", marginTop: "0px"}, 1500); 
		$("#s2").css("opacity", 1); 
		$("#s1").animate({opacity: "0.3"}, 1000);
		cnt = 2;
		off = 1;
  });	
	$("#mi_tres").click(function(){
    $("#slidearea").animate({marginLeft: "-476px", marginTop: "0px"}, 1500); 
		$("#s3").css("opacity", 1); 
	 	$("#s4").animate({opacity: "0.3"}, 1000);
		cnt = 3;
		off = 1;
  });		
	$("#mi_cuatro").click(function(){
    $("#slidearea").animate({marginLeft: "-476px", marginTop: "0px"}, 1500); 
		$("#s4").css("opacity", 1); 
	 	$("#s3").animate({opacity: "0.3"}, 1000); 
  	cnt = 4;
  	off = 1;
  });		
	$("#mi_cinco").click(function(){
    	$("#slidearea").animate({marginLeft: "-952px", marginTop: "0px"}, 1500);  
  		cnt = 5;
  		off = 1;
  });		
	
	
	
	
	function jc(cnt){
		//alert("ok" + cnt);
		if (cnt == 1){
			$("#slidearea").animate({marginLeft: "0px", marginTop: "0px"}, 1500); 
			$("#s1").css("opacity", 1); 
		 	$("#s2").animate({opacity: "0.3"}, 1000);
		}
		if (cnt == 2){
			$("#slidearea").animate({marginLeft: "0px", marginTop: "0px"}, 1500); 
			$("#s2").css("opacity", 1); 
		 	$("#s1").animate({opacity: "0.3"}, 1000);
		}
		if (cnt == 3){
			$("#slidearea").animate({marginLeft: "-476px", marginTop: "0px"}, 1500); 
			$("#s3").css("opacity", 1); 
		 	$("#s4").animate({opacity: "0.3"}, 1000);
		}
		if (cnt == 4){
			$("#slidearea").animate({marginLeft: "-476px", marginTop: "0px"}, 1500); 
			$("#s4").css("opacity", 1); 
		 	$("#s3").animate({opacity: "0.3"}, 1000);
		}
		if (cnt == 5){
			$("#slidearea").animate({marginLeft: "-952px", marginTop: "0px"}, 1500); 
		}		
	}

	
	$("#slide_forward").click(function(){
		off = 1;
		if (cnt > 4){
			cnt = 1;
		}
		else {
			cnt = cnt + 1;
		}
		jc(cnt);

   });	
	
	$("#slide_back").click(function(){
		off = 1;
		if (cnt < 2){
			cnt = 5;
		}
		else {
			cnt = cnt - 1;
		}
		jc(cnt);
  });
	
	

});