var currRow = 4;
var currCol = 4; // initial row, column positions
var prevCol, prevRow;
var MAX_ROWS = 4;
var MAX_COLS = 4; // no. of row, columns
var LIMIT = 77; // no. of pixels+1 for up & down
var LIMIT1 = 77; // no. of pixels+1 for right & left
var INCR = 4; // no. of pixels per iteration
var TMR_INTERVAL = 1;
var mObj = null; // moving Obj
var MVi = 0;
var tmr = null; // timer to move the image
var TRANSITION_INTERVAL = 1; // in secs
var mTmr; // master to timer to initiate transition

function GETID ( row,col) { return 'Pic_'+row+''+col; }  // get id of the image node with row, column

function ISVALID (row,col) {  // check whether row, col is valid
   return ((row <= MAX_ROWS) && (row > 0) && (col <= MAX_COLS) && (col > 0));
}

function getAdjArr()
{
  res = new Array();
  for ( MVi = 0; MVi < 2; MVi++)
   {
       for ( MVj = 0; MVj < 2; MVj++) {
          index = (2*MVi)+MVj;
          res[index] = new Array();
          r = currRow;
          c = currCol;
          if ( MVi == 0 )  c += (2*MVj)-1;
          else  r += (2*MVj)-1;
          if (! ISVALID(r,c)) {
             res[index] = null;
             break;
          }
       res[index][0] = r ;
       res[index][1] = c ;
    }
   }
   return res;
}


var disableEvents = function()
{
  MVi = 0 ;
  adjArr = getAdjArr();
  for ( index=0; index< adjArr.length; index++)
     if (adjArr[index])	document.getElementById(GETID(adjArr[index][0],adjArr[index][1])).onclick = null;


}
var move = function ( dir )
{
  if ( tmr) clearTimeout(tmr);
  s = mObj.style;
  if ( (dir == 'up') || (dir == 'down'))
  {
    cT = 0;
    if ( s.top) cT = parseInt(s.top);
    if (dir == 'up')    cT -= INCR;
    else        cT += INCR;
    mObj.style.top = cT+'px';
  }
  else
  {
    cL = 0;
    if ( s.left)    cL = parseInt(s.left);
    if ( dir == 'right')        cL += INCR;
    else        cL -= INCR;
    mObj.style.left = cL+'px';
  }
  MVi += INCR;
  mObj.style.position = 'relative';
  if ( MVi < LIMIT)  tmr = setTimeout('move("'+dir+'")',TMR_INTERVAL);
  else  end(dir);

}

var end = function(dir)
{
  currObj = document.getElementById(GETID(currRow,currCol)).parentNode;
  currObj.style.position = 'relative';
  s = currObj.style;
  newRow = currRow;
  newCol = currCol;

  if ( (dir == 'up') || (dir == 'down'))
  {
    cT = 0;
    if ( s.top) cT = parseInt(s.top);
    if (dir == 'up') {   cT += LIMIT; newRow += 1; }
    else    {   cT -= LIMIT; newRow -= 1; }
    s.top = cT+'px';
  }
  else
  {
    cL = 0;
    if ( s.left)    cL = parseInt(s.left);
    if ( dir == 'right')     {   cL -= LIMIT1;  newCol -= 1; }
    else     {   cL += LIMIT1;  newCol +=1; }
    s.left = cL+'px';
  }

  currObj.getElementsByTagName('img')[0].id = GETID(newRow, newCol);

  mObj.getElementsByTagName('img')[0].id = GETID(currRow, currCol);

  updateEvents(dir);
}

var updateEvents = function (dir)
{
  prevRow = currRow;
  prevCol = currCol;
  if ( (dir == 'up')  || (dir == 'down') )
  {
      currRow -= 1;
      if ( dir =='up')
        currRow +=2;
  }
  else
  {
     currCol -= 1;
     if ( dir == 'left')
       currCol += 2;
  }
  setDirANDTimer();
}

var startTr = function(tr)
{
  disableEvents();

  r = currRow;
  c = currCol;
  if ( tr == 'right')     c -=1;
  else if ( tr == 'left' )     c +=1;
  else if (tr == 'up')     r +=1;
  else     r -=1;
  mObj = document.getElementById(GETID(r,c)).parentNode;
  move(tr);
}

var getDir = function (row, col)
{
  validDirArr = new Array();
  cnt = 0;
  if ( row+1 != prevRow && col != prevCol && ISVALID(row+1, col) )
  { validDirArr[cnt] = 'up'; cnt += 1; }
  if ( row-1 != prevRow && col != prevCol && ISVALID(row-1, col) )
  { validDirArr[cnt] = 'down'; cnt += 1; }
  if ( row != prevRow && col+1 != prevCol && ISVALID(row, col+1) )
  { validDirArr[cnt] = 'left'; cnt += 1; }
  if ( row != prevRow && col-1 != prevCol && ISVALID(row, col-1) )
  { validDirArr[cnt] = 'right'; cnt += 1; }
  return validDirArr[Math.floor(Math.random()*cnt)];
}

var setDirANDTimer = function()
{
  if (mTmr) clearTimeout(mTmr);
  dir = getDir(currRow, currCol);
  mTmr = setTimeout ( "startTr('"+dir+"');",TRANSITION_INTERVAL*1000);
}