var mainMatrix; //matrice principale, contiene i riferimenti numerici
var vinto; //Variabile booleana settata a true se il giocatore vince, inizializzata a false quando si comincia
var display=false; //Booleana settata a false finche' la matrice non e' da mostrare.
var imgVec; //vettore di immagini, in ogni cella si trova l'immagine associata al numero nel vettore.
var mosse; //conteggio del movimento.
var tempo; //tempo iniziale

function giveImgs(vec)
	{
	/*
	 *  creo un vettore di "immagini". sara' utilizzato quando dovro' effettuare il display della scacchiera:
	 *  ad ogni numero corrisponde un'immagine, questa corrispondenza e' stabilita nel vettore: la cella x contiene
	 *  l'immagine corrispondente al numero x. Quando devo disegnare la mattrice di immagini, invece del numero,
	 *  nella pagina, verra' rappresentata l'immagine corrispondente
	 */
	
	imgVec=new Array("zero.jpg","uno.jpg","due.jpg","tre.jpg","quattro.jpg","cinque.jpg","sei.jpg","sette.jpg","otto.jpg","nove.jpg","dieci.jpg","undici.jpg","dodici.jpg","tredici.jpg","quattordici.jpg","quindici.jpg");
	}

function randomize(array,length)
	{
	/*riempie il vettore passato di numeri casuali tutti differenti, compresi tra 0 e la lunghezza del vettore*/
	var cell,i;
	for(i=0;i<length;i++)
		array[i]=-1;
	for(i=0;i<length;i++)
		{
		/*scelgo una cella a caso (un numero tra 0 e la lunghezza passata)*/
		cell=(Math.random()*(length-1));
		
		/*possibilmente un numero intero*/
		cell-=(cell%1);
		
		/*se array[cell]non e' vuoto passiamo alla cella successiva, se cell e' fuori dai limiti si ricomincia da 0*/
		while(array[cell]!=(-1))
			if(++cell>(length-1))
				cell=0;
		/*finalmente imposto il contenuto della cella. Lo imposto =i in modo che sia differente per ogni cella,
		in quanto la posizione e' scelta a caso, ma e' scelta solo una volta per ogni loop del ciclo, cosi' ogni volta
		i e' differente e tutte e celle contengono un numero distinto.*/
		array[cell]=i;
		
		}
	}

function loadMatrix()
	{
	/*All'inizio di ogni nuovo gioco viene creata una matrice, viene azzerato il timer, viene creato il vettore
	di immagini e viene inizializzato a caso il vettore shaked, per riempire la matice per la nuova partita.
	Tutte queste operazioni vengono effettuate quando viene iniziata una partita, mediante il click sul pulsante
	"Inizializza", nella pagina iniziale.*/
	
	var i;
	passing=new Date();
	vinto=false;
	display=true;
	mosse=0;
	tempo=passing.getTime();
	tempo=tempo/1000 - (tempo/1000)%1;
	mainMatrix=new Array();
	giveImgs(imgVec);
	for(i=0;i<4;i++)
		mainMatrix[i]=new Array();
	
	var shaked=new Array();
	randomize(shaked,16);
	
	/*dato il vettore di numeri "shaked", che rappresentano i differenti numeri della tabella, viene riempita
	la matrice principale, cella per cella */
	for(i=0;i<16;i++)
		mainMatrix[i%4][(i/4)-(i/4)%1]=shaked[i];
	
	
	displayMatrix();
	}

function displayMatrix()
	{
	var i,j;
	
	/*
	ciclo attraverso ogni immagine nella matrice del documento; per ognuna di queste immagini controllo
	la cella corrispondente in mainMatrix. Questa cella contiene un numero, che indica l'elemento simbolico
	nella posizione [i][j]. Questo numero e' associato ad un immagine contenuta nel vettore imgVec (in realta'
	l'associazione e' fatta col link ad un'immagine). le immagini nel documento sono organizzate in forma tabulare,
	ognuna di esse ha un nome composto da "par"+valore delle ascisse+","+valore delle ordinate, per esempio, la prima
	immagine si chiamera' "par0,0" , la successiva sara' "par1,0" e cosi' via. In questo modo, sfruttando la funzione
	getElementById, posso riferirmi all'immagine sfruttandone le coordinate nel ciclo for (i e j), e associare 
	ad essa l'immagine contenuta nel vettore imgVec corrispondente al numero contenuto in mainMatrix nella posizione 
	i,j.
	
	Esempio:
	
	premesse
	A)	imgVec in posizione [1] contiene l'immagine "uno.jpg" che rappresenta un grosso uno.
	B)	mainMatrix contiene in posizione [3][3] il numero 1.
	C)	l'ultima immagine nel documento (quella in basso a destra) si chiama "par3,3"
	D)	entro nel ciclo for, arrivo a i==3, j==3.
	
	prendo l'elemento (tag img) col nome di "par3,3" e mi accingo a modificarne l'attributo src.
	ricavo il valore contenuto in mainMatrix relativo alla cella [i][j], quindi alla cella [3][3] (D)
	il valore contenuto e' 1 (A). Prendo nel vettore imgVec il nome dell'immagine associata all'elemento 1.
	Il nome in questione e' "uno.jpg" e si trova appunto nella posizione 1 del vettore.
	Ricavato il nome, vado a settare l'attributo src di "par3,3" ponendolo uguale a "pro/"
	(che e' il nome della cartella) + "uno.jpg". In questo modo, nell'immagine in basso a destra del vettore sara'
	rappresentata l'immagine "uno.jpg"
	*/
	if(display&&!vinto)
		{
		for(i=0;i<4;i++)
			for(j=0;j<4;j++)
				document.getElementById("par"+i+"e"+j).src="pro\/"+imgVec[mainMatrix[i][j]];

		document.getElementById("mosse").innerHTML="Mosse: "+mosse;
		var passing=new Date();
		document.getElementById("tempo").innerHTML="Tempo: "+((passing.getTime()/1000-(passing.getTime()/1000)%1)-tempo);
		}
	}

function winning()
	{
	/*funzione che controlla se il giocatore ha vinto:
	il controllo viene effettuato in base al numero contenuto nella cella e posto in relazione alla posizione
	della cella nella matrice: in posizione 0,0 ci dev'essere 1; in posizione 1,0 ci dev'essere 2 e cosi' via
	fino alla fine della riga, quindi la condizione di vittoria (per la prima riga) e' che tutti i numeri contenuti
	nelle celle siano uguali all'indice delle colonne incrementato di uno. Per la riga successiva, per esempio la
	cella 0,1 , il valore contenuto dev'essere 5, quindi il valore della cella superiore incrementato di 4. Lo stesso
	vale per le celle successive, sia per le righe che per le colonne: da una cella alla successiva,
	sempre nella stessa riga, l'incremento e' di un unita', scendendo di una colonna invece l'incremento e' pari
	al numero di colonne (4) della matrice. Il check dei numeri regolari arriva fino a 15, lo 0 non e' contemplato.
	Se tutti i numeri da 1 a 15 sono nelle posizioni corrette, lo 0 dovra' essere per forza nella cella in basso
	a destra, per cui anche la posizione dello 0 e' prestabilita (anche se non dalla condizione suddetta).
	Se il giocatore verifica cella per cella la condizione ha vinto; le celle non sono piu' modificabili e il tempo
	smette di scorrere.*/
	
	for(i=0;i<4;i++)
		for(j=0;j<4;j++)
			if(
				mainMatrix[i][j]==(i+j*4)+1
				||
				mainMatrix[i][j]==0
				);
			else return;
	vinto=true;
	var passing=new Date();
	var tmptime=0;
	/*il tempo in secondi e non in millesimi*/
	tmptime=(passing.getTime()/1000-(passing.getTime()/1000)%1)-tempo;

	/*la media arrotondata a due cifre dopo la virgola*/
	var media=((mosse/tmptime)-((((mosse/tmptime)*100)%1)/100));

	alert("Complimenti, hai vinto!\nHai fatto "+mosse+" mosse in "+tmptime+" secondi.\nUna media di "+media+" al secondo!");
	}

function movePiece(a,b)
	{
	/*se il gioco e' finito le caselle non si possono piu' muovere*/
	if(vinto)
		return;
	
	/*Se non ho ancora creato la matrice non posso accedervi*/
	if(!display)
		return;

	/*Il gioco consiste nell'ordinare i numeri scambiando una cella contenente un numero con la cella vuota (0);
	e' possibile effettuare questi scambi solo in orizzontale o in verticale, come se effettivamente i numeri
	fossero quindici tasselli quadrati in una griglia quadrata, con un tassello vuoto che rende possibili gli
	spostamenti.Il tassello vuoto e' la cella contenente il valore 0, l'unica su cui e' possibile "mettere"
	le altre celle.
	Ogni immagine nel documento html si riferisce ad una particolare posizione, quando il gestore di evento
	onMouseDown viene attivato, e' chiamata la funzione movePiece che ha come parametri le coordinate del pezzo mosso.
	Per esempio, se l'immagine e' la prima, in alto a sinistra, chiamera' movePiece con parametri (0,0). Questa
	funzione effetttua il controllo sulla cella 0,0 di mainMatrix, a cui l'immagine e' associata (infatti il tag
	src dell'immagine e' settato in base al contenuto della cella corrispondente in mainMatrix). movePiece effettua
	un controllo per ciascuna posizione in cui il numero contenuto in mainMatrix potrebbe spostarsi. Per prima cosa
	controlla se il tassello puo' andare a destra: se la posizione dell'immagine non e' sull'estremo bordo destro
	(cosa che creerebbe problemi, in quanto a destra di quella posizione non c'e' niente) controlla se il tassello
	a destra di quello "cliccato" contiene lo 0. Se si fa lo swap, se no lascia inalterata la tabella. Questa operazione
	e' ripetuta quattro volte, una per ogni direzione in cui si puo' spostare il tassello. Alla fine dei controlli,
	sia che sia stato spostato un tassello, sia che non ne sia stato spostato alcuno, viene aggiornata la vista della
	tabella nel file html (displayMatrix()), e viene effettuato il controllo per vedere se il giocatore ha vinto
	(winning()).
	*/
	
	if(a<3)
		if(mainMatrix[a+1][b]==0)
			{
			mainMatrix[a+1][b]=mainMatrix[a][b];
			mainMatrix[a][b]=0;
			mosse++;
			}
	if(a>0)
		if(mainMatrix[a-1][b]==0)
			{
			mainMatrix[a-1][b]=mainMatrix[a][b];
			mainMatrix[a][b]=0;
			mosse++;
			}
	if(b<3)
		if(mainMatrix[a][b+1]==0)
			{
			mainMatrix[a][b+1]=mainMatrix[a][b];
			mainMatrix[a][b]=0;
			mosse++;
			}
	if(b>0)
		if(mainMatrix[a][b-1]==0)
			{
			mainMatrix[a][b-1]=mainMatrix[a][b];
			mainMatrix[a][b]=0;
			mosse++;
			}
	displayMatrix();
	winning();
	}