/*                                                       ,  ,
                                                        / \/ \
                                                       (/ //_ \_
      .-._                                              \||  .  \
       \  '-._                                    _,:__.-"/---\_ \
  ______/___  '.    .-----------------------------'~-'--.)__( , )\ \
 `'--.___  _\  /    |                                 ,'    \)|\ `\|
      /_.-' _\ \ _:,_  Script name: Shift Puzzle            " ||   (
    .'__ _.' \'-/,`-~` Version    : 2.0                       |/
        '. ___.> /=,|  By         : Marco Tijs                |
         / .-'/_ )  |  Modified   : 26-11-2006                |
         )'  ( /(/  |                                         |
              \\ "  '-----------------------------------------'
               '=='
*/

//Simple shift puzzle. Rewritten from version 1, with the main difference that
//only a single image is used.
//The script can freely be used on any non-commercial site as long as the
//disclaimer as shown above remains unchanged at the top of the code.

$field = new Array();
$blank = new Array(0, 0);
$started = 0;
$moves = 0;

function setupPuzzle(){
  var $divList = '';
  $started = 0;
  $pieceW = Math.floor($width / $piecesW);
  $pieceH = Math.floor($height / $piecesH);
  
  for(var $i = 0; $i < $piecesW; $i++){
    for(var $j = 0; $j < $piecesH; $j++){
      var $left = $i * ($pieceW);
      var $top = $j * ($pieceH);
      var $nr = $i * $piecesH + $j;
      $divList += '<div id="outer' + $nr + '" style="position:absolute; width: ' + $pieceW + '; height: ' + $pieceH + '; left: ' + $left + '; top: ' + $top + '; overflow: hidden; background:white" onClick="doClick(' + $nr + ')" onMouseOver="mouseOver(' + $nr + ')" onMouseOut="mouseOut(' + $nr + ')">';
//      $divList += '<div id="inner' + $nr + '" style="position:absolute; width: ' + $width  + '; height: ' + $height + '; left: -' + $left + '; top: -' + $top + '">';
      //$divList += '<a href="javascript:void(0)"><img src="' + $img + '" height="' + $height + '" width="' + $width + '" border="0" name="i_' + $nr + '"></a>';
      $divList += '<table cellpadding="0" cellspacing="0" width="' + $pieceW + '" height="' + $pieceH + '"><tr><td style="background-image: url(\'' + $img + '\'); background-position: -' + ($pieceW * $i) + 'px -' + ($pieceH * $j) + 'px">&nbsp;</td></tr></table>';
//      $divList += '</div>';
      $divList += '</div>';
    }
  }

  if($showArrows){
    $divList += '<div id="arrow" style="position:absolute; width: 30; height: 30; visibility: hidden;">'
    $divList += '<img src="images/puzzle01.gif" name="arrow" height="30" width="30">';
    $divList += '</div>';
  }
  
  document.getElementById('puzzle').style.width  = $width;
  document.getElementById('puzzle').style.height = $height;  
  document.getElementById('puzzle').innerHTML    = $divList;
}

function shufflePuzzle(){
  document.getElementById('outer0').style.visibility = 'hidden';
  $field.length = $piecesW;
  for(var $i = 0; $i < $piecesW; $i++){
    $field[$i] = new Array($piecesH);
    for(var $j = 0; $j < $piecesH; $j++){
      $field[$i][$j] = $i * $piecesH + $j;
    }
  }
  
  $blank[0] = 0;
  $blank[1] = 0;

  for(var $i = 0; $i < 400 * $piecesW * $piecesH; $i++){
    $rand = Math.floor(4 * Math.random());
    $dW = 0;
    $dH = 0;
    switch($rand){
      case 0: $dW = -1; break;
      case 1: $dW = 1;  break;
      case 2: $dH = -1; break;
      case 3: $dH = 1;  break;
    }
    
//    $dW = 0;
//    $dH = 1;

    doMove($dW, $dH);
  }

  updateDivs();
  $started = 1;
  $moves = 0;
}

function doClick($nr){
  var $position = getField($nr);
  $doUpdate = 0;
 
  doMove($position[0] - $blank[0], $position[1] - $blank[1])
 
  if($doUpdate){
    $moves++;
    updateDivs();
    setTimeout('checkSolved()',50);
  }
}

function mouseOver($nr){
  if(!$started) return 0;
  var $position = getField($nr);
  
  var $dW = $position[0] - $blank[0];
  var $dH = $position[1] - $blank[1];

  if(Math.abs($dH) + Math.abs($dW) != 1) return 0;
    window.status = $dW + ' - ' + $dH;

  document.images['arrow'].src = 'images/puzzle' + $dW + '' + $dH + '.gif';
  var $obj  = document.getElementById('arrow').style;
  $obj.left = ($blank[0] + .5) * $pieceW - 15 + $dW * ($pieceW / 2 - 15);
  $obj.top  = ($blank[1] + .5) * $pieceH - 15 + $dH * ($pieceH / 2 - 15);
  $obj.visibility = 'visible';
}

function mouseOut($nr){
  document.getElementById('arrow').style.visibility = 'hidden';
}

function doMove($dW, $dH){
  if(Math.abs($dW) + Math.abs($dH) != 1) return 0;
  if($blank[0] + $dW < 0 || $blank[0] + $dW >= $piecesW) return 0;
  if($blank[1] + $dH < 0 || $blank[1] + $dH >= $piecesH) return 0;

  $doUpdate = 1;

  document.getElementById('arrow').style.visibility = 'hidden';

  $field[$blank[0]][$blank[1]] = $field[$blank[0] + $dW][$blank[1] + $dH];
  $blank[0] += $dW;
  $blank[1] += $dH;
  $field[$blank[0]][$blank[1]] = 0;
  
  return 1;
}



function updateDivs(){
  for(var $i = 0; $i < $piecesW; $i++){
    for(var $j = 0; $j < $piecesH; $j++){
      var $left = $i * $pieceW;
      var $top = $j * $pieceH;
      var $nr = $field[$i][$j];
      var $obj = document.getElementById('outer' + $nr).style;
      if(parseInt($obj.left) != $left || parseInt($obj.top) != $top){
        $obj.left = $left;
        $obj.top  = $top;
      }
    }
  }
}

function solvePuzzle(){
  for(var $i = 0; $i < $field.length; $i++){
    for(var $j = 0; $j < $field[$i].length; $j++){
      $field[$i][$j] = $i * $piecesH + $j;
    }
  }
  document.getElementById('outer0').style.visibility = 'visible';
  updateDivs();
  $started = 0;
}

function getField($nr){
  for(var $i = 0; $i < $field.length; $i++){
    for(var $j = 0; $j < $field[$i].length; $j++){
      if($field[$i][$j] == $nr)  
        return new Array($i, $j);
    }
  }
  return new Array(-1, -1);
}

function keyDown($event){
  if(!$started) return;
  
  if(document.all){
    $keyCode = event.keyCode;
  }else{
    $keyCode = $event.which;
  }
  
  $doUpdate = 0;
  
  if($keyCode == 39 || ($keyCode == 100 && document.layers))
    doMove($invertKeys ? 1 : -1, 0);
  if($keyCode == 37 || ($keyCode == 97  && document.layers))
    doMove($invertKeys ? -1 : 1, 0);
  if($keyCode == 40 || ($keyCode == 115 && document.layers))
    doMove(0, $invertKeys ? 1 : -1);
  if($keyCode == 38 || ($keyCode == 119 && document.layers))
    doMove(0, $invertKeys ? -1 : 1);
    
  if($doUpdate){
    $moves++;
    updateDivs();
    setTimeout('checkSolved()',50);
  }
}

function checkSolved(){
  if(!$started) return;
  var $solved = 1;
  for(var $i = 0; $i < $field.length; $i++){
    for(var $j = 0; $j < $field[$i].length; $j++){
      var $nr = $i * $piecesH + $j;
      if($nr != $field[$i][$j])
        $solved = 0;
    }    
  }
  if($solved){
    document.getElementById('outer0').style.visibility = 'visible';
    setTimeout("alert('Je hebt de schuifpuzzel opgelost!\\nJe hebt hiervoor ' + $moves + ' keer een stuk verschoven.')", 50);
    $started = 0;
  }  
}

document.onkeydown = keyDown;