/*
  +'      <!-- This script and many more are available free online at --> '
  +'      <!-- The JavaScript Source!! http://javascript.internet.com --> '
  +'      <!-- Original:  Arun Narayanan (jusgames@lycos.com) --> '
  +'      <!-- Web Site:  http://jusgames.tripod.com --> '

  code modified to support Mozilla FireFox 
  please report any errors to thomas2003*esqsoft^om (antibot: *=@, and ^=.c)
*/

var gsize, ghrow, ghcol, gtime, gmoves, gintervalid=-1, gshuffling; 
function toggleHelp() 
{

  if (butHelp.value == "Hide Help") 
  {

    help.style.display = "none"; 
    butHelp.value = "Show Help"; 
  }

  else

  {

    help.style.display = ""; 
    butHelp.value = "Hide Help"; 
  }  

}



//random number between low and hi 
function r(low,hi) 
{
  return Math.floor((hi-low)*Math.random()+low); 
}


//random number between 1 and hi 
function r1(hi) 
{
  return Math.floor((hi-1)*Math.random()+1); 
}



//random number between 0 and hi 
function r0(hi) 
{
  return Math.floor((hi)*Math.random()); 
}



function startGame() 
{

  shuffle(); 
  gtime = 0; 
  gmoves = 0; 
  tickTime(); 
  gintervalid = setInterval("tickTime()",1000); 
}



function stopGame() 
{

  if (gintervalid==-1) return; 
  clearInterval(gintervalid); 
  f = document.getElementById('fldStatus')
  f.innerHTML = ""; 
  gintervalid=-1; 
}



function tickTime() 
{

  showStatus(); 
  gtime++; 
}



function checkWin() 
{

  var i, j, s; 
  

  if (gintervalid==-1) return; //game not started! 
  

  if (!isHole(gsize-1,gsize-1)) return; 
  

  for (i=0;i<gsize;i++) 
    for (j=0;j<gsize;j++) 
    {

      if (!(i==gsize-1 && j==gsize-1)) //ignore last block (ideally a hole) 
      {

       if (getValue(i,j)!=(i*gsize+j+1).toString()) return; 
      }

    }

  stopGame(); 


  s = "<table cellpadding=4>"; 
  s += "<tr><td align=center class=capt3>!! CONGRATS !!</td></tr>"; 
  s += "<tr class=capt4><td align=center>You have done it in " + gtime + " secs "; 
  s += "with " + gmoves + " moves!</td></tr>"; 
  s += "<tr><td align=center class=capt4>Your speed is " + Math.round(1000*gmoves/gtime)/1000 + " moves/sec</td></tr>"; 
  s += "</table>"; 
  f = document.getElementById('fldStatus')
  f.innerHTML = s; 
//  shuffle(); 
}



function showStatus() 
{
  f = document.getElementById('fldStatus')
  f.innerHTML = "Time: " + gtime + " secs   Moves: " + gmoves 
}



function showTable() 
{

  var i, j, s; 
  

  stopGame(); 
  s = "<table border=0 cellpadding=0 cellspacing=0 bgcolor='#666655'><tr><td class=bigcell>"; 
  s = s + "<table border=0 cellpadding=0 cellspacing=0>"; 
  for (i=0; i<gsize; i++) 
  {

    s = s + "<tr>";    
    for (j=0; j<gsize; j++) 
    {

      s = s + "<td id=a_" + i + "_" + j + " onclick='move(this)' class=cell>" + (i*gsize+j+1) + "</td>"; 
    }

    s = s + "</tr>";        
  }

  s = s + "</table>"; 
  s = s + "</td></tr></table>";      
  return s; 
}



function getCell(row, col) 
{
  var obj = document.getElementById('a_'+row+'_'+col)
  return obj
}



function setValue(row,col,val) 
{

  var v = getCell(row, col); 
  v.innerHTML = val; 
  v.className = "cell"; 
}



function getValue(row,col) 
{
  var v = getCell(row, col); 
  return v.innerHTML; 
}



function setHole(row,col) 
{ 

  var v = getCell(row, col); 
  v.innerHTML = ""; 
  v.className = "hole"; 
  ghrow = row; 
  ghcol = col; 
}



function getRow(obj) 
{

  var a = obj.id.split("_"); 
  return a[1]; 
}



function getCol(obj) 
{

  var a = obj.id.split("_"); 
  return a[2]; 
}



function isHole(row, col) 
{

  return (row==ghrow && col==ghcol) ? true : false; 
}



function getHoleInRow(row) 
{

  var i; 
  

  return (row==ghrow) ? ghcol : -1; 
}



function getHoleInCol(col) 
{

  var i; 


  return (col==ghcol) ? ghrow : -1; 
}



function shiftHoleRow(src,dest,row) 
{

  var i; 


  //conversion to integer needed in some cases! 
  src = parseInt(src); 
  dest = parseInt(dest); 


  if (src < dest) 
  {

    for (i=src;i<dest;i++) 
    {

      setValue(row,i,getValue(row,i+1)); 
      setHole(row,i+1); 
    }

  }

  if (dest < src) 
  {

    for (i=src;i>dest;i--) 
    {

      setValue(row,i,getValue(row,i-1)); 
      setHole(row,i-1); 
    }

  }

}



function shiftHoleCol(src,dest,col){
  var i; 
  

  //conversion to integer needed in some cases! 
  src = parseInt(src); 
  dest = parseInt(dest); 
    

  if (src < dest){
    for (i=src;i<dest;i++){
      setValue(i,col,getValue(i+1,col)); 
      setHole(i+1,col); 
    }

  }

  if (dest < src) 
  {

    for (i=src;i>dest;i--) 
    {

      setValue(i,col,getValue(i-1,col)); 
      setHole(i-1,col); 
    }

  }

}



function move(obj) 
{

  var r, c, hr, hc; 


  if (gintervalid==-1 && !gshuffling) 
  { startGame();
  }

  r = getRow(obj); 
  c = getCol(obj); 
  if (isHole(r,c)) return; 
  

  hc = getHoleInRow(r); 
  if (hc != -1) 
  {

    shiftHoleRow(hc,c,r); 
    gmoves++; 
    checkWin(); 
    return; 
  }

  

  hr = getHoleInCol(c); 


  if (hr != -1) 
  {

    shiftHoleCol(hr,r,c); 
    gmoves++; 
    checkWin(); 
    return; 
  }

}



function shuffle() 
{

  var t,i,j,s,frac; 


  gshuffling =  true; 
  frac = 100.0/(gsize*(gsize+10)); 
  s = "% "; 
  for (i=0;i<gsize;i++) 
  {

    s += "|"; 
    for (j=0;j<gsize+10;j++) 
    {  

      window.status = "Loading " + Math.round((i*(gsize+10) + j)*frac) + s  
      if (j%2==0) 
      {

        t = r0(gsize); 
        while (t == ghrow) t = r0(gsize); //skip holes 
        getCell(t,ghcol).onclick(); 
      } 
      else 
      {

        t = r0(gsize); 
        while (t == ghcol) t = r0(gsize); //skip holes 
        getCell(ghrow,t).onclick(); 
      }

    }

  }

  window.status = ""; 
  gshuffling = false; 
}



function loadBoard(size) 
{

  gsize = size; 
  var board=document.getElementById('board')
  board.innerHTML = showTable(gsize); 
  setHole(gsize-1,gsize-1); 
  //shuffle(); 
}
      

function header(){
  var html = ''
  +'      <h2>Magic Square</h2>'
        
  +'      <!-- THREE STEPS TO INSTALL ARRANGE: '
  +'        1.  Copy the coding into the HEAD of your HTML document '
  +'        2.  Add the onLoad event handler into the BODY tag '
  +'        3.  Put the last coding into the BODY of your HTML document  --> '
  +'      <!-- STEP ONE: Paste this code into the HEAD of your HTML document  --> '
        
  +'      <!-- This script and many more are available free online at --> '
  +'      <!-- The JavaScript Source!! http://javascript.internet.com --> '
  +'      <!-- Original:  Arun Narayanan (jusgames@lycos.com) --> '
  +'      <!-- Web Site:  http://jusgames.tripod.com --> '
        
  +'      <style>'
        
  +'      .bigcell { background-color:#211; '
  +'        border:2px solid #000; '
  +'        text-align:center; '
  +'      }'
        
  +'      .cell { width:30px; height:30px; '
  +'        font-family:Georgia, Verdana, Arial; font-size:9pt; font-weight:bold; '
  +'        background-color:#f00; color:#fff; '
  +'        border: 1px solid #000; text-align:center; '
  +'      }'
        
  +'      .hole { width:30px; height:30px; text-align:center; }'
  +'      .msg {font-size:7pt; font-weight:bold;} '
  +'      .tab {cursor:hand;} '
  +'      .capt1 {font-size:10pt; font-weight:bold;} '
  +'      .capt2 {font-size:9pt; font-weight:bold;} '
  +'      .capt3 {font-size:14pt; font-weight:bold; color:yellow;} '
  +'      .capt4 {font-size:10pt; font-weight:bold; color:yellow;} '
  +'      .but {font-size:9pt; font-weight:bold; height:30px;background-color:#aaaa99;} '
  +'      </style> '
  return html
} /* end header() */


function footer(){
  var html = ''      
  +'      <table border=0 width="80%" cellpadding=4 cellspacing=0 style="display:none;"> '
  +'        <tr><td width="98%">Arrange</td> '
  +'          <td align=center><input type=button class=but value="Home Page" onclick="window.location.href=\'index.html\'"></td><td align=center><input type=button id=butHelp value="Hide Help" class="but" onclick="toggleHelp()"></td></tr> '
  +'        <tr id=help><td colspan=3><h3> '
  +'          <ol>'
  +'          <li>Choose a Level (3 to 10).</li> '
  +'          <li>The game board has blocks with numbers in it. Also there is a single "hole" that can be used for moving the blocks.</li> '
  +'          <li>The objective of the game is to order the numbers using the "hole" for temporary movement.</li> '
  +'          <li>Press the "Start Game" button. The timer would be started.</li> '
  +'          <li>Move blocks in a row by clicking on them. A block can be moved only if it is in the same row or column as the "hole". Make a guess by typing in a number in the box provided.</li> '
  +'          <li>You can move multiple blocks (in the same row or column as the "hole") by clicking the farthest block that you need to be moved.</li> '
  +'          </ol>'
  +'          Order all the numbers in the shortest time possible with a minimum number of moves... '
  +'          </h3></td></tr> '
  +'      </table> '
        
  +'      <div id=test></div> '
  +'      <div align="center" class="msg" id=board></div> '
  +'      <table cellpadding=4 align="center"> '
  +'        <tr>'
  +'          <td align=center class="content"> '
  +'            <form style="margin:0" name="gameform">'
  +'            <b><u>L</u>evel:</b> '
  +'            <select accesskey=l id=level _nchange="loadBoard(parseInt(level.value))"> '
  +'            <option value=3>3</option> '
  +'            <option value=4 selected>4</option> '
  +'            <option value=5>5</option> '
  +'            <option value=5>6</option> '
  +'            <option value=7>7</option> '
  +'            <option value=8>8</option> '
  +'            <option value=9>9</option> '
  +'            </select> '
  +'            <input type="button" value="Go" onclick="'
  +'              o=this.form.level.selectedIndex;'
  +'              loadBoard(parseInt(this.form.level[o].value));'
  +'            ">'
  +'            </form>'
  +'          </td>'
  +'        </tr>'
  +'        <tr><td align=center id=fldStatus class=capt2></td></tr> '
  +'      </table> '
        
  +'      <div align="center" class="msg">'
  +'      Original Games by ŠArun Narayanan, Dec 2002<br>'
        
  +'      Free JavaScripts provided<br> '
  +'      by <a href="http://javascriptsource.com">The JavaScript Source</a>'
  +'      </div>'
        
  +'      <sc'+'ript>if(window.loadBoard)loadBoard(4)</sc'+'ript>'
  return html 
}

document.write(header());
document.write(footer());