Javascript Tile Puzzle

WARNING: When run, this code may cause siezures

<title>Javascript Tile Puzzle</title>
<script>
function makeEm(){
document.getElementById("spanPlace").innerHTML = ""
window.tileArr = new Array()
document.gameForm.action[0].checked ? mouseAct = "onMouseOver" : mouseAct = "onClick"
for (x=0; x<dLevel*dLevel; x++){
if (x==0){
newSpans = "<span class=tile id=t0></span>"
}
else{
newSpans += "<span class=tile id=t" + x + " " + mouseAct + "='moveEm(this)'>" + x + "</span>"
tileArr.push(x)
}
}
document.getElementById("spanPlace").innerHTML = newSpans
tileArr.push(0) //because I put the blank tile at then end...
}

function mixEm(){

window.zeroTile = document.getElementById("t0")
window.zeroXpos = parseInt(zeroTile.style.left)
window.zeroYpos = parseInt(zeroTile.style.top)
window.allMixed = false

moveArr = new Array()
if (zeroXpos > 50) moveArr.push("left") //can move left
if (zeroYpos < 50 * dLevel) moveArr.push("down") //can move down
if (zeroXpos < 50 * dLevel) moveArr.push("right") //can move right
if (zeroYpos > 50) moveArr.push("up") //can move up
ranNum = Math.floor(Math.random() * moveArr.length)
switch (moveArr[ranNum]){
case "left":
moveTiles(zeroXpos - 50, zeroYpos)
break;
case "right":
moveTiles(zeroXpos + 50, zeroYpos)
break;
case "up":
moveTiles(zeroXpos, zeroYpos - 50)
break;
case "down":
moveTiles(zeroXpos, zeroYpos + 50)
break;
}

loopsDone ++
if ( loopsDone % 5 == 0){
//window.status = "Preparing Puzzle - " + Math.round(loopsDone/mixNum*100) + "% Complete (" + loopsDone + " / " + mixNum + ")"
document.getElementById("progressBar").style.width = 204
document.getElementById("progressBar").style.border = "solid blue 2px"
document.getElementById("progress").style.width = Math.round(loopsDone/mixNum*100)*2
document.getElementById("progress").style.backgroundColor = "blue"
document.getElementById("progressScore").innerHTML = "<b>" + Math.round(loopsDone/mixNum*100) + "% Complete</b> (" + loopsDone + " / " + mixNum + ")"
}
if (loopsDone > mixNum){
window.clearTimeout(mixing)
document.getElementById("progressBar").style.width = 0
document.getElementById("progressBar").style.border = "none"
document.getElementById("progress").style.width = 0
document.getElementById("progress").style.backgroundColor = "white"
document.getElementById("progressScore").innerHTML = ""
window.allMixed = true
checkEm()
}
else{
mixing = setTimeout("mixEm()",1)
}
}



function moveTiles(inX, inY){
for (x=dLevel*dLevel-1; x>=0; x--){
thisNode = document.getElementById("t" + x)
thisXpos = parseInt(thisNode.style.left)
thisYpos = parseInt(thisNode.style.top)
if(thisXpos == inX && thisYpos == inY){
zeroTile.style.top = inY
thisNode.style.top = zeroYpos
zeroTile.style.left = inX
thisNode.style.left = zeroXpos
return;
}
}
}

function showEm(){
window.solved = false
mixedUp = false
allInputs = document.getElementsByTagName("input")
for (x=0; x<allInputs.length; x++){
if (allInputs[x].checked){
window.dLevel = parseInt(allInputs[x].value)
document.getElementById("formDiv").style.left = parseInt(dLevel) * 50 + 100
break;
}
}

makeEm()

window.numClicks = 0
curRow = 0
curCol = 0
for (x=0; x<tileArr.length; x++){
if ( x % dLevel == 0 ){
curRow = 1
curCol ++
}
thisTile = document.getElementById("t" + tileArr[x])
thisTile.style.top = curCol * 50
thisTile.style.left = curRow * 50
curRow ++
if (tileArr[x] > 0){
tileArr[x] % 2 == 0 ? color = "yellow" : color = "green"
thisTile.style.backgroundColor = color
}
}
window.loopsDone = 0
window.mixNum = (tileArr.length * tileArr.length)
mixEm()
}

function moveEm(inObj){
if (!solved){
zeroTile = document.getElementById("t0")
zeroXpos = parseInt(zeroTile.style.left)
zeroYpos = parseInt(zeroTile.style.top)
inXpos = parseInt(inObj.style.left)
inYpos = parseInt(inObj.style.top)
if (zeroXpos == inXpos){
if (Math.abs(zeroYpos - inYpos) == 50){
zeroTile.style.top = inYpos
inObj.style.top = zeroYpos
numClicks ++
}
}
else if (zeroYpos == inYpos){
if (Math.abs(zeroXpos - inXpos) == 50){
zeroTile.style.left = inXpos
inObj.style.left = zeroXpos
numClicks ++
}
}
checkEm()
}
}

function checkEm(){
if (allMixed){
curRow = 0
curCol = 0
numWrong = 0
for (x=1; x<tileArr.length; x++){
if ((x-1) % dLevel == 0 ){
curRow = 1
curCol ++
}
thisTile = document.getElementById("t" + x)
if (parseInt(thisTile.style.top) == curCol * 50 && parseInt(thisTile.style.left) == curRow * 50){
thisTile.style.color = "black"
}
else{
thisTile.style.color = "red"
numWrong ++
}

curRow ++
}
window.status = numWrong + " wrong -- " + numClicks + " moves."
if (numWrong == 0){
window.flashTimes = 0
flashEm()
alert("Solved in " + numClicks + " clicks")
window.solved = true
}
}
}

function flashEm(){
flashTimes ++
if (flashTimes > 20){
window.clearTimeout(doFlash)
}
else{
for (x=1; x<tileArr.length; x++){
thisTile = document.getElementById("t" + x)
thisTile.style.backgroundColor == "yellow" ? thisTile.style.backgroundColor = "green" : thisTile.style.backgroundColor = "yellow"
}
doFlash = setTimeout("flashEm()",200)
}
}

</script>
<style>
body {font-family: arial;}
span {text-align:center;}
.tile {font-size: 26pt; border: solid blue 3px; width: 50px; height: 50px; position:absolute; }
#progressScore {width: 300;}
#formDiv{position: absolute; top: 50; left:400;}
</style>

<body onLoad="showEm()" id="bodyNode">
<div id="spanPlace">
<span class=tile id=t0></span>
</div>
<div id="formDiv">
<form name="gameForm">
<table border=1 cellspacing=0>
<tr>
<td><input type=radio name="levelPicker" value=3 onClick="showEm()"> Easy (3x3) </td>
<td><input type=radio name="levelPicker" value=4 onClick="showEm()" Checked> Not Bad (4x4)</td>
</tr>
<tr>
<td><input type=radio name="levelPicker" value=5 onClick="showEm()"> Medium (5x5)</td>
<td><input type=radio name="levelPicker" value=6 onClick="showEm()"> Hard (6x6)</td>
</tr>
<tr>
<td><input type=radio name="levelPicker" value=7 onClick="showEm()"> Harder (7x7)</td>
<td><input type=radio name="levelPicker" value=8 onClick="showEm()"> Impossible (8x8)</td>
<tr>
<td><input type=radio name="levelPicker" value=9 onClick="showEm()"> Impossibler (9x9)</td>
<td><input type=radio name="levelPicker" value=10 onClick="showEm()"> OMG!!!! (10x10)</td>
</tr>
<tr>
<th colspan=2> <input type=button onClick="showEm()" value="Start Over" style="width: 104;"></th>
</tr>
<td colspan=2 style="text-align:center">Move Tile On Mouse Over <input type=radio value="over" checked name="action" onClick="showEm()"></td>
</tr>
</tr>
<td colspan=2 style="text-align:center">Move Tile On Click<input type=radio value="over" name="action" onClick="showEm()" ></td>
</tr>

</table>
<br>
<br>

<br><br>
<span id="progressBar" style="text-align: left;"><span id="progress"></span></span>
<br><span id="progressScore" style="text-align: left;"></span>
</form>
</div>
</body>