//this array generates the image sources to be used in the game.
var pics = new Array();
//there are 19 images total, each labeled "image(number).gif"
for (i = 0; i <= 18; i++) {
pics[i] = new Image();
pics[i].src = 'image' + i + '.gif';
}
//this array generates the map of the puzzle. there are 18 items to choose, so there will need to be 36 spaces (18x2)
var map=new Array(1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 7, 8, 8, 9, 9, 10, 10, 11, 11, 12, 12, 13, 13, 14, 14, 15, 15, 16, 16, 17, 17, 18, 18);
//this array is used later in the returnToOld fuction to help organize if statements and values
var user = new Array();
//this array is a placeholder for values passing in during the scramble function
var tempArray = new Array();
//this array is made for the images that have not been flipped
var clickArray = new Array(0, 0);

var timer, sec, min, ctr, id, okToClick, finished;

//this function resets the game. 
function init() {
	clearTimeout(id);
	for (i = 0; i <= 35 ;i++) {
	user[i] = 0;
}

//these values (timer, min, sec) deal with clock built in to the 
timer = 0;
min = 0;
sec = 0;
ctr = 0;
okToClick = true;
finished = 0;
document.form.button.value = "";
//this function scrambles the tiles and is defined below
scrambleTiles();
//this begins the clock timer, also defined below
runTimer();

//this for loop places the blank image as the source for all the images in the form "form" on the page.
for (i = 0; i <= 35; i++) {
document.form[('img'+i)].src = "image0.gif";
   }
}
//here is the timer function. the seconds tick until it hits 60, in which it becomes divisible by the min variable. seconds are made by subtracting the incrementing timer.
function runTimer() {
	min = Math.floor(timer/60);
	sec = (timer-(min*60))+'';
	//this ensures that at least 1 second is there before it adds to the sec number. 
	if(sec.length == 1) {
		sec = "0"+sec
		}
	timer++;
	//this writes out the values in the button named "button" at the bottom of the page.
	document.form.button.value = min+":"+sec;
	//this timeout is set for 1,000 milliseconds, or 1 second, which means it will run this function every 1 second.
	id = setTimeout('runTimer()', 1000);
}
//here is the function that scrambles the images. 
function scrambleTiles() {
	/*this function is one of the most important ones and it confused me at first. After looking at it, I realized it's setting numbers to
	a temporary array, which is then placed into the map array, which is currently defined with double numbers. 
	I was confused, as it is runs the loop a large number of times. I'm sure this is to ensure that the images are scrambled well*/
	for (z = 0; z < 5; z++) {
		for (x = 0; x <= 35; x++) {
		//the tempArray is a placeholder for the randomly generated values, which ensure the puzzle is different every time. W
		tempArray[0] = Math.floor(Math.random()*36);
		tempArray[1] = map[tempArray[0]];
		tempArray[2] = map[x];
		map[x] = tempArray[1];
		map[tempArray[0]] = tempArray[2];
		/*this is basically a big shuffle of the array values. let's say tempArray[0] = 26. tempArray[1] becomes equal to map[26], and tempArray[2] becomes equal to map[0]. map[0] then is 		
		made equal to map[26], and map[26] is turned into that same value.  so map[0] and map [26] would be the first two pairs. ( i think? my brain exploded trying to explain that. ) */
		}
	}
}
	//this function references the link defined in the .html script (<a href="javascript:showImage('+((6*r)+c)+')" onClick="document.form.button.focus()">)
	//its used to set the clicked images to values that will later be used in returnToOld.
function showImage(item) {
	if (okToClick) {
		//okToClick is made false to ensure multiple images aren't clicked and shown.
		okToClick = false; 
		
		document.form[('img'+item)].src = 'image'+map[item]+'.gif';
			if (ctr == 0) {
			ctr++;
			//this sets the first clickArray position to the first item value you clicked on.
			clickArray[0] = item;
			//this makes another image clickable. unfortunately, if you double click on the same image it will reset.
			okToClick = true;
			} else {
			//since ctr was incremented, this statement runs after you've clicked on one.
			//this sets the second clickArray position to the second item you clicked on.
			clickArray[1] = item;
			//now that you've selected two items, ctr is set back to 0
			ctr = 0;
			//this will run the returnToOld function after .5 seconds. If the
			setTimeout('returnToOld()', 500);
			}
		}	
}
/*this function is very convoluted and the longest function I've ever worked with.
This function basically performs a lot of checks to ensure that the two items clicked are the same. */
function returnToOld() {
	//this first if statement checks if the two click Array values are the same value. If so, it will change the image back to image0.gif
	if ((clickArray[0] == clickArray[1]) && (!user[clickArray[0]])) {
		document.form[('img'+clickArray[0])].src = "image0.gif";
		okToClick = true;
	} else {
		//this checks to see if the clicked arrays match with the map array values. 
		if (map[clickArray[0]] != map[clickArray[1]]) {
			//this changes the first image back to the blank image
			if (user[clickArray[0]] == 0) {
			document.form[('img'+clickArray[0])].src = "image0.gif";
			}
			//this does the same for the second image.
			if (user[clickArray[1]] == 0) {
			document.form[('img'+clickArray[1])].src = "image0.gif";
	   		}
		}
		//if the values of the images are the same, they are never switched back or cleared, and the finished variable is incremeneted.
		if (map[clickArray[0]] == map[clickArray[1]]) {
				
				if (user[clickArray[0]] == 0 && user[clickArray[1]] == 0) { 
				finished++; 
				}
		user[clickArray[0]] = 1;
		user[clickArray[1]] = 1;
		}
		//when finished, it will right out the time next to the button.
		if (finished >= 18) {
			document.getElementById("finishedDiv").style.visibility="visible";
			document.getElementById("finishedDiv").innerHTML = 'Finished in  '+document.form.button.value +'. Click the button to start again';
	} else {
		okToClick = true;
    }
  }
}