var GridSize = 4;

var Grid = new Array();
var blankx = 1;
var blanky = 1;
var State = 0;
var iMoves = 0;

function StartGame()
{
	if (State == 0)
	{
		GridSize = parseInt(document.getElementById("GridSize").value);
		if (GridSize > 10)
		{
			GridSize = 10;
		}
		if (GridSize < 3)
		{
			GridSize = 3;
		}
		if (isNaN(GridSize))
		{
			GridSize = 4;
		}
		document.getElementById("GridSize").value = GridSize;

		var HTML = "<table border=0 cellpadding=0 cellspacing=0 >";
		var Cell = "";	

		for (x = 0 ; x <= GridSize + 1 ; x++)
		{
			Grid[x] = new Array();
			for (y = 0 ; y <= GridSize + 1 ; y++)
			{
				Grid[x][y] = new Array();
				Grid[x][y][1] = x;
				Grid[x][y][2] = y;
				if (x >= 1 && x <= GridSize && y >= 1 && y <= GridSize)
				{
					if (x != GridSize || y != GridSize)
					{
						Val = GridSize * (y-1) + x;
						Grid[x][y][3] = "<table width = 40px height = 40px border = 0 cellspacing = 0 ><tr valign = center><td align = center background=\"tile0000.jpg\">" + Val.toString() + "</td></tr></table>";
					}
					else
					{
						blankx = x;
						blanky = y;
						Grid[x][y][3] = "<table width = 40px height = 40px border = 0 cellspacing = 0 ><tr valign = center><td align = center bgcolor=\"black\"> </td></tr></table>";
					}
				}
			}
		}

	
		for (y = 0 ; y <= GridSize + 1 ; y++)
		{
			HTML += "<tr>";
			for (x = 0 ; x <= GridSize + 1 ; x++)
			{
				if (y == 0 && x == 0)
				{
					Cell = "<td><img src=\"Topleft.jpg\"></td>";
				}
				else if (x == GridSize + 1 && y == GridSize + 1)
				{
					Cell = "<td><img src=\"Bottomright.jpg\"></td>";
				}	
				else if (y == 0  && x == GridSize + 1)
				{
					Cell = "<td><img src=\"Topright.jpg\"></td>";
				}
				else if (y == GridSize + 1 && x == 0)
				{
					Cell = "<td><img src=\"Bottomleft.jpg\"></td>";
				}
				else if (y == 0)
				{
					Cell = "<td><img src=\"Top.jpg\"></td>";
				}
				else if (y == GridSize + 1)
				{
					Cell = "<td><img src=\"Bottom.jpg\"></td>";
				}
				else if (x == 0)
				{
					Cell = "<td><img src=\"Left.jpg\"></td>";
				}
				else if (x == GridSize + 1)
				{
					Cell = "<td><img src=\"Right.jpg\"></td>";
				}
				else
				{
					Cell = "<td align = center onclick=\"GridClick(" + x.toString() +","+ y.toString() +")\" ><span id=\"Grid" + x.toString() + y.toString() +"\">X</span></td>";
				}
				HTML += Cell;
			}
			HTML += "</tr>";
		}

		Shuffle();
	
		document.getElementById("DivGrid").innerHTML=HTML;

		for (x = 1 ; x <= GridSize ; x++)
		{
			for (y = 1 ; y <= GridSize ; y++)
			{
				DrawTile(x,y);
			}
		}

		iMoves = 0;
		document.getElementById("DivDebug").innerHTML="<h1>Moves so far "+ iMoves.toString() + "</h1>";
		State = 1;
	}
	else
	{
		document.getElementById("DivDebug").innerHTML="<h1>Oi! Finish this one first!</h1>";
	}
}

function DrawTile(x,y)
{
	Element = "Grid" + x.toString() + y.toString();
	Cell = document.getElementById(Element);
	Cell.innerHTML=Grid[x][y][3];
}

function GridClick(x,y)
{
	if (State == 1)
	{
		// first find the empty tile.
		if ((x == blankx || y == blanky) && (x != blankx || y != blanky))
		{
			// WE MUST HAVE ONE THE SAME AND ONE DIFFERENT		
			if (x < blankx)
			{
				for (movex = blankx ; movex > x ; movex --)
				{
					MoveTile(movex,y,movex - 1,y);
				}
			}		
			else if (x > blankx)
			{
				for (movex = blankx ; movex < x ; movex ++)
				{
					MoveTile(movex,y,movex + 1,y);
				}
			}		
			else if (y < blanky)
			{
				for (movey = blanky ; movey > y ; movey --)
				{
					MoveTile(x,movey,x,movey-1);
				}
			}		
			else if (y > blanky)
			{
				for (movey = blanky ; movey < y ; movey ++)
				{
					MoveTile(x,movey,x,movey+1);
				}
			}	

			document.getElementById("DivDebug").innerHTML="<h1>Click "+x.toString()+y.toString()+blankx.toString()+blanky.toString()+"</h1>";
	
			blankx = x;
			blanky = y;
			DrawTile(x,y);
			CheckWin();
		}
	}
}

function MoveTile(dx,dy,sx,sy)
{
	tx = Grid[dx][dy][1];
	ty = Grid[dx][dy][2];
	tv = Grid[dx][dy][3];
	
	Grid[dx][dy][1] = Grid[sx][sy][1];
	Grid[dx][dy][2] = Grid[sx][sy][2];
	Grid[dx][dy][3] = Grid[sx][sy][3];

	Grid[sx][sy][1] = tx;
	Grid[sx][sy][2] = ty;
	Grid[sx][sy][3] = tv;
	DrawTile(dx,dy);
}

function CheckWin()
{
	if (State == 1)
	{
		ok = 1;
		for (x = 1 ; x <= GridSize ; x++)
		{
			for (y = 1 ; y <= GridSize ; y++)
			{
				if (Grid[x][y][1] != x || Grid[x][y][2] != y)
				{
					ok= 0;
				}
			}
		}
		if (ok == 1)
		{
			iMoves ++;
			document.getElementById("DivDebug").innerHTML="<h1>Finished!<br>In "+ iMoves.toString() + " moves.</h1>";
			State = 0;
		}
		else
		{
		
			iMoves ++;
			document.getElementById("DivDebug").innerHTML="<h1>Moves so far "+ iMoves.toString() + "</h1>";
		}
	}
}

function Shuffle()
{
	for (i = 0 ; i < GridSize * GridSize * 10 ; i++)
	{
		r=Math.random();
		if (r < 0.25)
		{
			dx = 1;
			dy = 0;
		}
		else if (r < 0.5)
		{
			dx = -1;
			dy = 0;
		}
		else if (r < 0.75)
		{
			dx = 0;
			dy = 1;
		}
		else
		{
			dx = 0;
			dy = -1;
		}
			
		if (blankx + dx > 0 && blankx + dx <= GridSize && blanky + dy > 0 && blanky + dy <= GridSize)
		{
			tx = Grid[blankx + dx][blanky + dy][1];
			ty = Grid[blankx + dx][blanky + dy][2];
			tv = Grid[blankx + dx][blanky + dy][3];
	
			Grid[blankx + dx][blanky + dy][1] = Grid[blankx][blanky][1];
			Grid[blankx + dx][blanky + dy][2] = Grid[blankx][blanky][2];
			Grid[blankx + dx][blanky + dy][3] = Grid[blankx][blanky][3];

			Grid[blankx][blanky][1] = tx;
			Grid[blankx][blanky][2] = ty;
			Grid[blankx][blanky][3] = tv;
			blankx += dx;
			blanky += dy;
		}
	}
	document.getElementById("DivDebug").innerHTML="<h1>Why am I here?</h1>";
}