function startGame() {
	size = 60;
	px = 3;
	py = 3;
	pieces = new Array();
	var r = Math.floor(Math.random()*787);
	thePuzzleSpace = document.getElementById("puzzleSpace");
	puzpic = new Image();
	puzpic.onload = function () { startPuzzle(); };
	puzpic.src = "pictures/"+r+".jpg";
}

function addPuzzlePiece(x,y,img) {
	var canv = document.createElement("canvas");
	thePuzzleSpace.appendChild(canv);
    canv.setAttribute('width',size);
    canv.setAttribute('height',size);
	canv.setAttribute("id","Piece"+x+""+y);
	canv.setAttribute("style","position:absolute; left:"+(x*(size+1))+"px; top:"+(y*(size+1))+"px; margin:0; padding: 0; z-index:0");
	canv.onClick = "clickCanvas(event); return false;";
	canv.setAttribute("onclick","clickCanvas(event); return false;");
	c2 = canv.getContext("2d");
	var s = img.width/4;
	c2.drawImage(img, x*s,y*s,s,s, 0,0,size,size);
	pieces.push(canv);
}

function startPuzzle() {
    for(var x=0;x<4;x++) {
    	for(var y=0;y<4;y++) {
    		if ((x == 3) && (y == 3)) continue;
    		addPuzzlePiece(x,y,puzpic);
    	}
    }
    scramble();
}

function clickCanvas(e) {
	clickPiece(e.target);
	if (checkWin()) {
		showDialog();
	}
}

function clickPiece(p) {
	var x = Math.floor(parseInt(p.style.left)/(size));
	var y = Math.floor(parseInt(p.style.top)/(size));
	if (x == px) {
		if (y == py-1) {
			move(p,0,1);
		} else if (y == py+1) {
			move(p,0,-1);
		}
	}
	if (y == py) {
		if (x == px-1) {
			move(p,1,0);
		} else if (x == px+1) {
			move(p,-1,0);
		}
	}
}

function move(p,dx,dy) {
	p.style.top = parseInt(p.style.top) + dy*(size+1);
	p.style.left = parseInt(p.style.left) + dx*(size+1);
	px -= dx;
	py -= dy;
}

function scramble() {
	for(var i=0;i<1000;i++) {
		var r = Math.floor(Math.random()*pieces.length);
		clickPiece(pieces[r]);
	}
}

function checkWin() {
	for(var i=0;i<pieces.length;i++) {
		p = pieces[i];
		var x = Math.floor(parseInt(p.style.left)/(size));
		if (x != parseInt(p.id.substr(5,1))) return false;
		var y = Math.floor(parseInt(p.style.top)/(size));
		if (y != parseInt(p.id.substr(6,1))) return false;
	}
	return true;
}

function drawLine(x1,y1,x2,y2,c,w) {
	canvas2.beginPath();
	canvas2.strokeStyle = c;
	canvas2.lineWidth = w;
	canvas2.moveTo(x1,y1);
	canvas2.lineTo(x2,y2);
	canvas2.stroke();
	canvas2.closePath();
}

function showStart() {
	document.getElementById("dialog").style.top = "116";
	document.getElementById("dialog").innerHTML = "<A HREF='#' onClick='clickDialog();return false'>START GAME</A>";
	document.getElementById("dialog").style.visibility = "visible";
}

function showDialog() {
	document.getElementById("dialog").style.top = "216";
	document.getElementById("dialog").innerHTML = "SOLVED!    <A HREF='#' onClick='window.location.reload();return false'>PLAY AGAIN</A>";
	document.getElementById("dialog").style.visibility = "visible";
}

function clickDialog() {
	startGame();
	document.getElementById("dialog").style.visibility = "hidden";
	return false;
}

document.write("<DIV ID='game' STYLE='position: relative; top: 0; left: 0; width: 320px; height: 250px; margin: 0; padding: 0;'>");

document.write("<DIV ID='puzzleSpace' STYLE='position: relative; top: 1; left: 38; width: 320px; height: 250px; margin: 0; padding: 0;'></div>");


document.write("<DIV ID='dialog' STYLE='position: absolute; top: 216; left: 55; width: 200px; height: 16px; padding: 4px; text-align: center; font-family: Helvetica; color: white; font-size: 14px; font-weight: bold; background-color: #333; border: 1px solid black; visibility: hidden;'></DIV>");

document.write("<br clear=all></div>");
//puzzleNum = Math.floor(Math.random()*787);

//document.write("<img id=pic src='pictures/"+puzzleNum+".jpg' width=1 height=1>");


//showStart();
startGame();