function startGame() {
  	mazeH = 15;
  	mazeV = 12;
	size = Math.floor(300/mazeH);
	xoff = 10;
	yoff = 10;
	createMaze();
	drawMaze();
	px = 0;
	py = 0;
	updatePlayer(0,0);
	drawArrows(0,0);
	gameover = false;
}

function clickCanvas(e) {
	var x = e.x-document.getElementById("gameframe").offsetLeft;
	var y = e.y-document.getElementById("gameframe").offsetTop;
	var xx = (xoff+px*size+size/2);
	var yy = (yoff+py*size+size/2);
	var dx = x-xx;
	var dy = y-yy;
	if (Math.abs(dx) > Math.abs(dy)) {
		if (dx > size/2) {
			movePlayer(1,0);
		} else if (dx < -size/2) {
			movePlayer(-1,0);
		}
	} else {
		if (dy > size/2) {
			movePlayer(0,1);
		} else if (dy < -size/2) {
			movePlayer(0,-1);
		}
	}
}

function movePlayer(dx,dy) {
	var ok = false;
	if ((dy == -1) && (grid[px][py][0] == 1)) ok = true;
	if ((dy == 1) && (grid[px][py][1] == 1)) ok = true;
	if ((dx == 1) && (grid[px][py][2] == 1)) ok = true;
	if ((dx == -1) && (grid[px][py][3] == 1)) ok = true;
	
	if (ok) {
		canvasover2.clearRect(0,0,320,260);
		updatePlayer(dx,dy);
		drawArrows(px,py);
	}
	if ((px == mazeH-1) && (py == mazeV-1)) {
		document.getElementById("MyCanvasOver").style.visibility = "hidden";
		gameover = true;
		showDialog();
	}
}

function drawMaze() {
	for(var i=0;i<maze.length;i++) {
		var x = maze[i][0];
		var y = maze[i][1];
		var walls = maze[i][2];
		if (walls[0] == 0) {
			drawLine(xoff+x*size,yoff+y*size,xoff+x*size+size,yoff+y*size,"#FFF",2);
		}
		if (walls[3] == 0) {
			drawLine(xoff+x*size,yoff+y*size,xoff+x*size,yoff+y*size+size,"#FFF",2);
		}
		if ((x == mazeH-1) && (y < mazeV-1)) {
			drawLine(xoff+x*size+size,yoff+y*size,xoff+x*size+size,yoff+y*size+size,"#FFF",2);
		}
		if (y == mazeV-1) {
			drawLine(xoff+x*size,yoff+y*size+size,xoff+x*size+size,yoff+y*size+size,"#FFF",2);
		}
	}
}

function createMaze() {
  h = mazeH;
  v = mazeV;
  initMaze();
  lastcount = 0;
  while (true) {
  	setNum = Math.floor(Math.random()*maze.length);
  	cellNum = Math.floor(Math.random()*maze[setNum].length);
    wall = Math.floor(Math.random()*4);
    
    if (maze[setNum][cellNum][2][wall] != 0) continue;
    
    var x = maze[setNum][cellNum][0];
    var y = maze[setNum][cellNum][1];

	if ((wall == 0) && (y == 0)) continue;    
	if ((wall == 1) && (y == v-1)) continue;    
	if ((wall == 2) && (x == h-1)) continue;    
	if ((wall == 3) && (x == 0)) continue;    

	if (wall == 0) other = findCell(x,y-1);
	if (wall == 1) other = findCell(x,y+1);
	if (wall == 2) other = findCell(x+1,y);
	if (wall == 3) other = findCell(x-1,y);
    
    if (other[0] == setNum) continue;
    
    if (wall == 0) oppositeWall = 1;
    if (wall == 1) oppositeWall = 0;
    if (wall == 2) oppositeWall = 3;
    if (wall == 3) oppositeWall = 2;
    
    maze[setNum][cellNum][2][wall] = 1;
    maze[other[0]][other[1]][2][oppositeWall] = 1;
    
    unionSets(setNum,other[0])
    
    if ((maze.length/10) != lastcount) {
      lastcount = (maze.length/10);
    }
    if (maze.length == 1) break;
  }
  
  maze = maze[0];
  indexMaze();
}

function indexMaze() {
	grid = new Array();
	for(var x=0;x<mazeH;x++) {
		grid[x] = new Array();
		for(var y=0;y<mazeH;y++) {
			grid[x][y] = [0,0,0,0];
		}
	}
	for(var i=0;i<maze.length;i++) {
		grid[maze[i][0]][maze[i][1]] = maze[i][2];
	}
}



function initMaze() {
  maze = new Array();
  for(var x=0;x<mazeH;x++) {
  	for(var y=0;y<mazeV;y++) {
  		maze.push([ [x, y, [0,0,0,0]] ]);
    }
  }
}

function findCell(x, y) {
  for(var i=0;i<maze.length;i++) {
    for(var j=0;j<maze[i].length;j++) {
      if (maze[i][j][0] == x) {
        if (maze[i][j][1] == y) {
          return [i,j];
        }
      }
    }
  }
}

function unionSets(s1, s2) {
  for(var i=0;i<maze[s2].length;i++) {
    maze[s1].push(maze[s2][i]);
  }
  maze.splice(s2,1);
}

function updatePlayer(dx,dy) {
	//canvasover2.clearRect(xoff+px*size+1,yoff+py*size+1,size-2,size-2);
	px += dx;
	py += dy;
	canvasover2.beginPath();
	canvasover2.fillStyle = "#00FF00";
	canvasover2.arc(xoff+px*size+size/2, yoff+py*size+size/2, size*.3, 0, .01, 1);
	canvasover2.fill();
	canvasover2.closePath();
}

function drawArrows(x,y) {
	if (grid[x][y][2] == 1) drawArrow(x,y, 3,0, 2,-1, 2,1);
	if (grid[x][y][3] == 1) drawArrow(x,y, -3,0, -2,-1, -2,1);
	if (grid[x][y][0] == 1) drawArrow(x,y, 0,-3, -1,-2, 1,-2);
	if (grid[x][y][1] == 1) drawArrow(x,y, 0,3, -1,2, 1,2);
}

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 drawArrow(x,y, x1,y1, x2,y2, x3,y3) {
	var bx = xoff+x*size+size/2;
	var by = yoff+y*size+size/2;
	var r = size/3;
	canvasover2.beginPath();
	canvasover2.fillStyle = "#060";
	canvasover2.lineWidth = 1;
	canvasover2.moveTo(bx+x1*r, by+y1*r);
	canvasover2.lineTo(bx+x2*r, by+y2*r);
	canvasover2.lineTo(bx+x3*r, by+y3*r);
	canvasover2.lineTo(bx+x1*r, by+y1*r);
	canvasover2.fill();
	canvasover2.closePath();
}

function drawCircle(x,y,r,c) {
	canvas2.beginPath();
	canvas2.fillStyle = c;
	canvas2.arc(x, y, r, 0, .01, 1);
	canvas2.fill();
	canvas2.closePath();
}		

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

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


document.write("<canvas id=MyCanvas width='320' height='260'  style='position:absolute; left:0px; top:0px; margin:0; padding: 0; z-index:0' /></canvas>");

document.write("<canvas id=MyCanvasOver width='320' height='260'  style='position:absolute; left:0px; top:0px; margin:0; padding: 0; z-index:1' onClick='clickCanvas(event);return false;'/></canvas>");

document.write("<DIV ID=dialog STYLE='position: absolute; top: 50; left: 40; width: 220px; height: 100px; padding: 10px; 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>");

canvas = document.getElementById("MyCanvas");
canvas2 = canvas.getContext("2d");
canvasover = document.getElementById("MyCanvasOver");
canvasover2 = canvasover.getContext("2d");


startGame();