var left = ['170px', '275px', '405px', '402px'];
var top = ['180px', '245px', '339px', '410px'];
var width = ['460px', '100px', '25px', '40px'];
var height = ['440px', '90px', '24px', '39px'];

var current_carte = 0;


$(document).ready(function() {
	
    $("#carte0").click(function(){
	show_carte();
    });
    $("#carte1").click(function(){
	show_carte();
    });
    $("#carte2").click(function(){
	show_carte();
    });

    $("#carte3").click(function(){
	$("#carte3").animate({ 
		left: left[3],
		top: top[3],
		width: width[3],
		height: height[3],
		opacity: 0
		}, 500, "linear", function(){
			$("#carte2").animate({ 
			left: left[2],
			top: top[2],
			width: width[2],
			height: height[2],
			opacity: 0
			}, 500, "linear", function(){
				$("#carte1").animate({ 
				left: left[1],
				top: top[1],
				width: width[1],
				height: height[1],
				opacity: 0
				}, 500);
				$("#carte1").hide();
				$("#carte2").hide();
				$("#carte3").hide();
				current_carte = 0;
				})});


	});

	$("#carte1").hide();
	$("#carte2").hide();
	$("#carte3").hide();
	

});


function show_carte(){
	if (current_carte < 4) {
		current_carte++;
		
		$("#carte"+current_carte).fadeTo(10, 0.1);
		$("#carte"+current_carte).css("left",left[current_carte]);
		$("#carte"+current_carte).css("top",top[current_carte]);
		$("#carte"+current_carte).css("width",width[current_carte]);
		$("#carte"+current_carte).css("height",height[current_carte]);

		$("#carte"+current_carte).animate({
			left: left[0],
			top: top[0],
			width: width[0],
			height: height[0],
			opacity: 1
		}, 500 );
	}
}