function startGame(lev) {
	if (lev == 1) {
		size = 34;
		numpieces = 25;
	} else {
		size = 25;
		numpieces = 49;
	}
	puzwidth = Math.sqrt(numpieces);
	sel = null;
	var r = Math.floor(Math.random()*787);
	//r = 1;
	puzpic = new Image();
	puzpic.onload = function () { startPuzzle(); };
	puzpic.src = "pictures/"+r+".jpg";
	//var loader = new ImagePreloader(["pictures/"+r+".jpg"], onPreload);
}

function ImagePreloader(images, callbackfunction) {
   // store the callbackfunction
   this.callbackfunction = callbackfunction;
 
   // initialize internal state.
   this.nLoaded = 0;
   this.nProcessed = 0;
   this.aImages = new Array;
 
   // record the number of images.
   this.nImages = images.length;
 
   // for each image, call preload()
   for ( var i = 0; i < images.length; i++ )
      this.preload(images[i]);
	}
ImagePreloader.prototype.preload = function(image)
{
   // create new Image object and add to array
   var oImage = new Image;
   this.aImages.push(oImage);
  
   // set up event handlers for the Image object
   oImage.onload = ImagePreloader.prototype.onload;
   oImage.onerror = ImagePreloader.prototype.onerror;
   oImage.onabort = ImagePreloader.prototype.onabort;
  
   // assign pointer back to this.
   oImage.oImagePreloader = this;
   oImage.bLoaded = false;
  
   // assign the .src property of the Image object
   oImage.src = image;
}
ImagePreloader.prototype.onComplete = function()
{
   this.nProcessed++;
   	document.write("*complete"+this.nProcessed+" "+this.nImages);
   if ( this.nProcessed == this.nImages )
   {
      this.callbackfunction(this.aImages, this.nLoaded);
   }
}
ImagePreloader.prototype.onload = function()
{
   this.bLoaded = true;
   this.oImagePreloader.nLoaded++;
   this.oImagePreloader.onComplete();
}
ImagePreloader.prototype.onerror = function()
{
   this.bError = true;
   this.oImagePreloader.onComplete();
}
ImagePreloader.prototype.onabort = function()
{
   this.bAbort = true;
   this.oImagePreloader.onComplete();
}



function onPreload(loadedImages) {
	puzpic = loadedImages[0];
	startPuzzle();
}

function getPositions() {
	poss = new Array();
	grid = new Array();
	
	if (size == 25) {
    	for(var y=0;y<7;y++) {
    		for(var x=0;x<7;x++) {
    			poss.push({x:x*26+66, y:y*26+53});
    		}
   	 	}
    
		for(var y=0;y<11;y++) {
			for(var x=0;x<11;x++) {
				if (((y > 0) && (y < 9)) && ((x > 0) && x < 10)) continue;
				poss.push({x:x*26+14, y:y*26+14});
			}
		}
		document.getElementById("puzzle").style.background = "url(JigsawPuzzle/jigsawboard49.jpg)";
		
	} else if (size == 34) {

    	for(var y=0;y<5;y++) {
    		for(var x=0;x<5;x++) {
    			poss.push({x:x*35+70, y:y*35+66});
    		}
   	 	}
    
		for(var y=0;y<8;y++) {
			for(var x=0;x<8;x++) {
				if (((y > 0) && (y < 7)) && ((x > 0) && x < 7)) continue;
				poss.push({x:x*35+17, y:y*35+14});
			}
		}

		document.getElementById("puzzle").style.background = "url(JigsawPuzzle/jigsawboard25.jpg)";
	}
	
	
    for(var i=0;i<poss.length;i++) {
    	addCanvas(i,poss[i].x, poss[i].y);
    	clearCanvas(i);
    }
}

function addCanvas(n,sx,sy) {
	var canv = document.createElement("canvas");
	document.getElementById("puzzle").appendChild(canv);
    canv.setAttribute('width',size);
    canv.setAttribute('height',size);
	canv.setAttribute("id","Canvas"+n);
	canv.setAttribute("style","position:absolute; left:"+sx+"px; top:"+sy+"px; margin:0; padding: 0; z-index:0");
	//canv.onClick = "clickCanvas(event); return false;";
	canv.setAttribute("onclick","clickCanvas(event); return false;");
}

function setCanvas(n,px,py) {
	var canv = document.getElementById("Canvas"+n);
	c2 = canv.getContext("2d");
	var s = puzpic.width/puzwidth;
	c2.drawImage(puzpic, px*s,py*s,s,s, 0,0,size,size);
	grid[n] = {x:px, y:py};
}

function clearCanvas(n) {
	var canv = document.getElementById("Canvas"+n);
	c2 = canv.getContext("2d");
	c2.fillStyle = "#694B2E";
	c2.fillRect(0,0,size,size);
	grid[n] = 0;
}

function borderCanvas(n) {
	var canv = document.getElementById("Canvas"+n);
	canv.style.width = (size-2);
	canv.style.height = (size-2);
	canv.style.border = "1px solid yellow";
}

function removeBorderCanvas(n) {
	var canv = document.getElementById("Canvas"+n);
	canv.style.width = (size);
	canv.style.height = (size);
	canv.style.border = "none";
}

function startPuzzle() {
	getPositions();
	var n = numpieces;
	var i = 0;
	rand = randList();
    for(var y=0;y<puzwidth;y++) {
		for(var x=0;x<puzwidth;x++) {
    		setCanvas(numpieces+rand[i],x,y);
    		n++;
    		i++;
    	}
    }
}

function randList() {
	var temp = new Array();
	for(var i=0;i<numpieces;i++) {
		temp.push(i);
	}
	var rand = new Array();
	while (temp.length > 0) {
		var r = Math.floor(Math.random()*temp.length);
		rand.push(temp[r]);
		temp.splice(r,1);
	}
	return rand;
}

function clickCanvas(e) {
	var n = parseInt(e.target.id.substr(6));
	if (sel == null) {
		if (grid[n] != 0) {
			sel = n;
			borderCanvas(n);
		}
	} else {
		if (grid[n] != 0) {
			replace = grid[n];
		} else {
			replace = 0;
		}
		grid[n] = grid[sel];
		setCanvas(n,grid[n].x,grid[n].y);
		if (replace != 0) {
			grid[sel] = replace;
			setCanvas(sel,grid[sel].x,grid[sel].y);
		} else {
			clearCanvas(sel);
		}
		removeBorderCanvas(sel);
		sel = null;
		
	}
	if (checkWin()) {
		showDialog("Solved!");
	}
}

function checkWin() {
	var y=0;
	var x=0;
	for(var i=0;i<numpieces;i++) {
		if (grid[i] == 0) return false;
		if ((grid[i].x != x) || (grid[i].y != y)) return false;
		x++;
		if (x >= puzwidth) {
			x = 0;
			y++;
		}
	}
	return true;
}

function solveIt() {
	if (sel != null) removeBorderCanvas(sel);
	for(var i=0;i<grid.length;i++) {
		clearCanvas(i);
	}
	var y=0;
	var x=0;
	for(var i=0;i<numpieces;i++) {
		grid[i] = {x:x,y:0};
		setCanvas(i,x,y);
		x++;
		if (x >= puzwidth) {
			x = 0;
			y++;
		}
	}
}

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 showDialog(text) {
	document.getElementById("dialog").innerHTML = text+"<BR><BR><A HREF='#' onClick='clickDialog();return false'>NEW GAME</A>";
	document.getElementById("dialog").style.visibility = "visible";
}

function showStart() {
	document.getElementById("dialog").innerHTML = "Choose Difficulty Level:<BR><BR><A HREF='#' onClick='clickDialog(1);return false'>EASY</A><BR><BR><A HREF='#' onClick='clickDialog(2);return false'>HARD</A>";
	document.getElementById("dialog").style.visibility = "visible";
}

function clickDialog(n) {
	if (n == 1) {
		startGame(1);
	} else if (n == 2) {
		startGame(2);
	} else {
		window.location.reload();
	}
	document.getElementById("dialog").style.visibility = "hidden";
}

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

document.write("<DIV ID=puzzle STYLE='position: relative; top: 1; left: 3; width: 313px; height: 311px; margin: 0; padding: 0; '></div>");

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

document.write("<br clear=all></div><br>");

document.write("<DIV STYLE='width: 320px; text-align: center; font-family: Arial; font-size: 1em; font-weight: bold; '><A STYLE='color: white;' HREF='#' onClick='solveIt();return false;'>SOLVE</A>   ---   <A STYLE='color: white;' HREF='#' onClick='window.location.reload();'>NEW GAME</A></DIV>");

showStart();