$(document).ready(function() {

	$(function() {
	
		var dim=0;
		var etatLeft = 0; var etatRight=1;
		
		$(".categorie-cadre a").each(function() {
			dim += $(this).width();
		});
		
		$("<div>").attr("id","container-img").width(dim).height(425).appendTo(".categorie-cadre");
		$("div#container-img").css("top",0);
		$("div#container-img").css("left",0);
		$("div#container-img").css("margin-left",0);
		
		$(".categorie-cadre a").each(function() {
			$(this).appendTo("div#container-img");
		});
		
		var margin = parseInt($("div#container").css("margin-left"));
		var marginLimit = parseInt($(".categorie-cadre").width()) - parseInt($("div#container-img").width());
		
		function updateEtat(marge) {
			if (marge >= 0) {
				etatLeft = 0;
				etatRight = 1;
				$(".left").css("display","none");
			}
			else if (marge == marginLimit) {
				etatLeft = 1;
				etatRight = 0;
				$(".right").css("display","none");
			}
			else {
				etatLeft = 1;
				etatRight = 1;
				$(".left").css("display","block");
				$(".right").css("display","block");
			}
		}
				
		var animation = function(bouton, marge, etat) {
	
			if(etat == 1)
			{
				if(bouton == "left") {
					marge += $(".categorie-cadre").width();
				}
				else if (bouton == "right") {
					marge -= $(".categorie-cadre").width();
				}
				
				$("div#container-img").animate({marginLeft : marge+"px"}, 1500, "linear", function() { $(this).stop(); updateEtat(marge); } );
			}
			
		}
		updateEtat(0);
		$(".left").click(function() {
			animation("left", parseInt($("div#container-img").css("margin-left")), etatLeft);		
		});
		
		$(".right").click(function() {
			animation("right", parseInt($("div#container-img").css("margin-left")), etatRight);	
		});
		
	});
});