var left;
var top;
var width;
var height;

var current_carte = 0;


$(document).ready(function() {


left = ['170', '275', '405', '402'];
top = ['180', '245', '339', '410'];
width = ['460', '100', '25', '40'];
height = ['440', '90', '24', '39'];
	
    $("#carte0").click(function(){
	show_carte();
    });
    $("#carte1").click(function(){
	show_carte();
    });
    $("#carte2").click(function(){
	show_carte();
    });

    $("#carte3").click(function(){
	$("#carte3").animate({ 
		top: '410',
		left: '402',
		width: '40',
		height: '39',
		opacity: 0
		}, 500, "linear", function(){
			$("#carte2").animate({ 
			top: '339',
			left: '405',
			width: '25',
			height: '24',
			opacity: 0
			}, 500, "linear", function(){
				$("#carte1").animate({ 
				top: '245',
				left: '275',
				width: '100',
				height: '90',
				opacity: 0
				}, 500, "linear", function(){
				  $("#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).fadeTo(0, 0.5);
    
		$("#carte"+current_carte).animate({
			top: '180',
			left: '170',
			height: '440',
			width: '460',
			opacity: 1
		}, 500 );
	}
}