// variables
var canvas,ctx,posX,posY,c1,c2,i,reste;					// globales
var images, tuiles, paires;						// tableaux
 
// paramètres
var C = 	6;
var T = 	80;
var W = 	480;
var H = 	480;
var nbImg = 	20;
var dos = 	19;
var vide = 	20;
 
window.onload = function() {						// préparation du jeu
    canvas = 		document.getElementById('canvas');
    ctx = 			canvas.getContext('2d');
	posX = 			canvas.offsetLeft;
	posY = 			canvas.offsetTop;
	canvas.width = 	W;
	canvas.height = H
	loadImages();
}
 
function loadImages(){							// chargement des images
	images = [];
	for(var i=1; i<nbImg+1; i++){
		var b = new Image();
		b.src = "assets/img"+i+".jpg";
		b.onload = function() {
			images.push(this);
			if(--nbImg==0) init();
		};
	}
}
 
function init() {							// initialisation de la partie
	tuiles = 	[];
	paires = 	[];
	total = 	C*C;
	for (i=0; i<total*.5; i++){
		paires.push(i,i);
	}
	for (i=0; i<total; i++){
		var c = {};
		c.x = parseInt(i%C)*T;
		c.y = parseInt(i/C)*T;
		var r = parseInt(Math.random()*paires.length);
		c.ref = paires[r]+1;
		paires.splice(r,1);
		c.frame = dos;
		tuiles.push(c);
	}
	render();
	canvas.addEventListener("click", choisir, false);
}
 
function choisir(e){												// cliquer sur une case
 
	var c = tuiles[parseInt((e.clientX-posX)/T)+parseInt((e.clientY-posY)/T)*C];				// trouve la case sur laquelle on a cliqué
 
	if(c.frame != vide) {											// si ce n'est pas une case vide
		c.frame = c.ref;										// enregistre l'image à afficher
		if (!c1){											// si aucune carte n'a été retournée
			c1 = c;											// la carte choisie est la première 
		} else if (c1 == c){										// sinon si la carte choisie est déjà retournée
			c1.frame = dos;										// masque la carte
			c1 = null;										// la première carte n'est plus sélectionnée
		} else if (!c2) {										// sinon si la deuxième carte n'est pas choisie
			c2 = c;											// la carte choisie est la deuxième carte
			if (c1.ref == c2.ref) {									// si les références des deux cartes est identique
				c1.frame = c2.frame = vide;							// supprime les deux cartes de l'affichage
				c1 = c2 = null;									// déselectionne les deux cartes
				total -=  2;									// décrémente le total des cartes
				if (total == 0)	finPartie();							// si il n'y a plus de carte à découvrir la partie est terminée
			} 
		} else {											// sinon la paire n'est pas bonne
			c1.frame = c2.frame = dos;								// masque les deux cartes
			c2 = null;										// déslectionne la deuxième carte
			c1 = c;											// enregistre la première carte
		}
	}
	render();												// mise à jour de l'affichage
}
 
function finPartie(){												// fin de partie
	alert("Fin de partie, cliquez pour rejouer.");
	init();
}
 
function render() {												// Dessine le jeu
	for(var i=0; i<tuiles.length; i++){
		ctx.drawImage(images[tuiles[i].frame-1], tuiles[i].x, tuiles[i].y);
	}
}