function Taquin() {

	// ********************* définit les images du jeu *********************

	var pieces = new Image();
	var repereImg = new Image();

	var test_form = document.forms["test"];
	var test_form_select = test_form.elements["Image"];
	var test_form_select_value = test_form_select.value;

	pieces.src = "Assets/"+test_form_select_value+".jpg";
	repereImg.src = "Assets/repere.png";
	document.getElementById("Canvas_div").style.display = "block";

	// ********************* récupère le canva et son contexte *********************

    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
	var audio = document.getElementById("audio");

	//  ********************* reglage de la dificulter du jeux *********************

	var test_form = document.forms["test"];
	var test_form_select = test_form.elements["Dificulty"];
	var test_form_select_value = test_form_select.value;

	if (test_form_select_value == 1) {

		var W = 360;							// Largeur de la zone de jeux
		var H = 360;							// hauteur de la zone de jeux
	} else if (test_form_select_value == 2) {

		var W = 480;							// Largeur de la zone de jeux
		var H = 480;							// hauteur de la zone de jeux
	} else if (test_form_select_value == 3) {

		var W = 480;							// Largeur de la zone de jeux
		var H = 600;							// hauteur de la zone de jeux
	}


	// ********************* variables *********************

	var T = 120;								// Taille des pièces
	var L = H/T; 								// Lignes
	var C = W/T;								// Colonnes

	var stockPieces;							// tableau de stockage des pièces
	var nombre_coup = 0;						// Nombre de mouvement effectuer

	var repere;
	var timer;
	var posX = canvas.offsetLeft;
	var posY = canvas.offsetTop;

	canvas.setAttribute('tabindex','1');
	canvas.focus();
	init();


	/* ********************* fonction compteut_coup *********************
	*
	*	ajoute un coup au compteur ou le remet a
	*	zero au besoin
	*
	*	x = choix de l'action ( 1 = ajout / 0 = reset )
	*/

	function compteur_coup(x) {

		if (x == 1) {

			nombre_coup++;
		} else {

			nombre_coup = 0;
		}

		document.getElementById("coup").innerHTML = nombre_coup;
	}

	/* ********************* initialisation du jeu *********************
	*
	*
	*/

	function init() {

		canvas.width = W;
		canvas.height = H;
		stockPieces = [];
		compteur_coup(0);

		// boucle sur le nombre de pièces
		for (var i=0; i<L*C;i++){

			var piece = {x:i%C*T, y:parseInt(i/C)*T, width:T, height:T, place:i, depart:false, alpha:1};
			stockPieces.push(piece); 					// ajout du conteneur au stock

			if(!i) {									// si la pièce est la première

				piece.alpha=0;							// elle est transparente
				piece.depart=true;						// elle est déjà mélangée
			}
		}

		repere = {x:0,y:0};
		timer = setInterval(melange,10);
		render();
		canvas.addEventListener("click", choisir, false);
		canvas.addEventListener("mousemove", reperePos, false);
	}

	/* ********************* mélanger les pièces *********************
	*
	*
	*/
	function melange(e){

		var P;
		var X;
		var Y;
		var E = 0;
		var i;
		var S = false;

		for (var i=0; i<stockPieces.length; i++) {

			if(stockPieces[i].alpha==0) {

				P = stockPieces[i];
				E = i;
				X = parseInt(i%C);
				Y = parseInt(i/L);

				break;
			}
		}

		for (var i=0; i<stockPieces.length; i++) {

			if(stockPieces[i]!=P && stockPieces[i].depart==false) {

				var D = parseInt(Math.random()*4)+1;// choisi une direction

				if (D==1 && X-1>=0 && E-1>0) deplace(stockPieces[E-1]);
				if (D==2 && X+1<=C && E+1<stockPieces.length) deplace(stockPieces[E+1]);
				if (D==3 && Y+1<=C && E+C<stockPieces.length) deplace(stockPieces[E+C]);
				if (D==4 && Y-1>=0 && E-C>0) deplace(stockPieces[E-C]);
			}

			compteur_coup(0);
		}

		repere.x = P.x;
		repere.y = P.y;
		render();

		for (var i=0; i<stockPieces.length; i++) {

			if(!stockPieces[i].depart) return;
		}

		clearInterval(timer);
	}

	/* ********************* déplacement de la pièce *********************
	*
	*	regarde ou est la case "vide" par rapport a "P"
	*	puis verifi si il est possible de deplacer "P" et
	*	efectue le deplacement
	*
	*	P = la piece qui va etre deplacer
	*
	*/

	function deplace(P){

		// recherche le clip invisible

		var I = 0;
		var V;

		for (var i=0; i<stockPieces.length; i++) {

			if(stockPieces[i].alpha==0) {

				I = i;
				V = stockPieces[i];
			}
		}

		// vérifie si la tuile est à coté et inverse les index

		var D = stockPieces.indexOf(P);

		if((parseInt(V.x/T)==C-1 && D==I+1)) return;
		if((parseInt(V.x/T)==0 && D==I-1)) return;
		if(D==I+1 || D==I+C || D==I-C || D==I-1){

			stockPieces[D] = stockPieces[I];
			stockPieces[I] = P;

			if (stockPieces[I].depart==false) stockPieces[I].depart=true;
		}

		audio.play();
		gagne();
	}

	/* ********************* cliquer sur une case *********************
	*
	*
	*/

	function choisir(e){

		var id = parseInt((e.clientX-posX)/T)+parseInt((e.clientY-posY)/T)*C;
		var P = stockPieces[id];

		// recherche le clip invisible

		var I = 0;
		var V;

		for (var i=0; i<stockPieces.length;i++) {

			if(stockPieces[i].alpha==0) {

				I = i;
				V = stockPieces[i];
			}
		}

		// vérifie si la tuile est à coté et inverse les index

		var D = stockPieces.indexOf(P);

		if((parseInt(I%C)==C-1 && D==I+1)) return;
		if((parseInt(I%C)==0 && D==I-1)) return;
		if(D==I+1 || D==I+C || D==I-C || D==I-1){

			stockPieces[D] = stockPieces[I];
			stockPieces[I] = P;
			compteur_coup(1);

			if (!stockPieces[I].depart) stockPieces[I].depart=true;
		}
		audio.play();
		render();
	}

	/* ********************* vérifie si le joueur a gagné *********************
	*
	*	Defini quelle sont les codition de victoire
	*	et lance le fonction "finPartie"
	*
	*/
	function gagne(){

		for (var i=0; i<stockPieces.length; i++) {

			if(i!=stockPieces[i].place) return;
		}

		repere.x = 0;
		repere.y = 0;
		finPartie();
	}

	/* ********************* position du repère *********************
	*
	*
	*/
	function reperePos(e){

		repere.x = parseInt((e.clientX-posX)/T)*T;
		repere.y = parseInt((e.clientY-posY)/T)*T;
		render();
	}

	/* ********************* fin de partie *********************
	*
	*	declenche les evenement de fin de partie
	*
	*/
	function finPartie(){

		render();
		alert("Fin de partie, cliquez pour rejouer.");
		init();
	}

	/* ********************* Dessine le jeu *********************
	*
	*
	*/
	function render() {

		ctx.fillStyle = "rgb(256,256,256)";
		ctx.fillRect(0, 0, W, H);

		for(var i=0; i<stockPieces.length; i++){

			var p = stockPieces[i];

			if(p.alpha!=0){

				ctx.drawImage(pieces,  p.x, p.y,p.width,p.height, parseInt(i%C)*T,parseInt(i/C)*T,p.width,p.height);
			}
		}

		ctx.drawImage(repereImg, repere.x,repere.y);
	}

}