// Puzzle - (c) 2003-2006 Robin Thellend
// This is a little exercise in DHTML

squares = new Array(16);
offsetx = 0;
offsety = 0;
count = 0;

function init(name)
{
  var puz = document.getElementById('puz');

  for(var i = 0; i < 15; i++)
  {
    var div = document.createElement('DIV');
    var img = document.createElement('IMG');
    puz.appendChild(div);
    div.appendChild(img);
    div.setAttribute('id', 'sq' + i);
    div.style.position = 'absolute';
    div.style.margin = '0px';
    div.style.padding = '0px';
    div.style.borderStyle = 'solid';
    div.style.borderWidth = '1px';
    div.style.width = '125px';
    div.style.height = '125px';

    if(document.all)
      div.onclick = on_click;
    else
      div.addEventListener('click', on_click, true);

    squares[i] = new Object();
    squares[i].elem = div;
    squares[i].img = img;
  }

  squares[15] = new Object();

  reset_positions();
  shuffle();
  change_image(name);
}

function on_click()
{
  var sq = parseInt(this.id.substr(2));

  if(squares[sq].motion != undefined)
    return;

  if(squares[sq].y == squares[15].y)
  {
    var dir = squares[sq].x < squares[15].x ? -1 : 1;
    var ox = squares[sq].x;

    for(var x = squares[15].x; x != ox; x += dir)
    {
      var i = find_by_pos(x + dir, squares[15].y);
      squares[i].motion = new Object();
      squares[i].motion.srcx = positionx(squares[i].x);
      squares[i].motion.srcy = positiony(squares[i].y);
      squares[i].x = x;
      squares[i].motion.destx = positionx(squares[i].x);
      squares[i].motion.desty = positiony(squares[i].y);
      squares[i].motion.tick = 0;
      squares[i].motion.nbticks = 20;
    }
    squares[15].x = ox;
    count++;
  }
  else if(squares[sq].x == squares[15].x)
  {
    var dir = squares[sq].y < squares[15].y ? -1 : 1;
    var oy = squares[sq].y;

    for(var y = squares[15].y; y != oy; y += dir)
    {
      var i = find_by_pos(squares[15].x, y + dir);
      squares[i].motion = new Object();
      squares[i].motion.srcx = positionx(squares[i].x);
      squares[i].motion.srcy = positiony(squares[i].y);
      squares[i].y = y;
      squares[i].motion.destx = positionx(squares[i].x);
      squares[i].motion.desty = positiony(squares[i].y);
      squares[i].motion.tick = 0;
      squares[i].motion.nbticks = 20;
    }
    squares[15].y = oy;
    count++;
  }

  do_motion();
}

function do_motion()
{
  var nbinmotion = 0;

  for(var i = 0; i < 15; i++)
  {
    if(squares[i].motion != undefined)
    {
      nbinmotion++;
      var x = squares[i].motion.srcx +
              (squares[i].motion.destx - squares[i].motion.srcx) / squares[i].motion.nbticks *
               squares[i].motion.tick;
      var y = squares[i].motion.srcy +
              (squares[i].motion.desty - squares[i].motion.srcy) / squares[i].motion.nbticks *
               squares[i].motion.tick;
      squares[i].elem.style.left = x + 'px';
      squares[i].elem.style.top = y + 'px';
      if(++squares[i].motion.tick > squares[i].motion.nbticks)
        delete squares[i].motion;
    }
  }

  if(nbinmotion > 0)
    window.setTimeout('do_motion()', 10);
  else
    refresh();
}

function move_square(i)
{
  var newx = squares[15].x;
  var newy = squares[15].y;

  squares[15].x = squares[i].x;
  squares[15].y = squares[i].y;

  squares[i].x = newx;
  squares[i].y = newy;
}

function refresh()
{
  for(var i = 0; i < 15; i++)
  {
    squares[i].elem.style.left = positionx(squares[i].x) + 'px';
    squares[i].elem.style.top = positiony(squares[i].y) + 'px';
  }
}

function positionx(x)
{
  return (offsetx + (x * 126));
}

function positiony(y)
{
  return (offsety + (y * 126));
}

function reset_positions()
{
  for(var i = 0; i < 15; i++)
  {
    squares[i].motion = new Object();
    squares[i].motion.srcx = positionx(squares[i].x);
    squares[i].motion.srcy = positiony(squares[i].y);
    squares[i].x = i % 4;
    squares[i].y = (i - squares[i].x) / 4;
    squares[i].motion.destx = positionx(squares[i].x);
    squares[i].motion.desty = positiony(squares[i].y);
    squares[i].motion.tick = 0;
    squares[i].motion.nbticks = 30;
  }

  squares[15].x = 3;
  squares[15].y = 3;
  count = 0;

  do_motion();
}

function find_by_pos(x, y)
{
  for(var i = 0; i < 15; i++)
  {
    if(squares[i].x == x && squares[i].y == y)
      return i;
  }
  return -1;
}

function shuffle()
{
  for(var i = 0; i < 15; i++)
  {
    squares[i].motion = new Object();
    squares[i].motion.srcx = positionx(squares[i].x);
    squares[i].motion.srcy = positiony(squares[i].y);
  }

  for(var a = 0; a < 1000; a++)
  {
    var i;
    switch(Math.floor(Math.random() * 4))
    {
    case 0:
      if((i = find_by_pos(squares[15].x, squares[15].y - 1)) != -1)
        move_square(i);
      break;
    case 1:
      if((i = find_by_pos(squares[15].x, squares[15].y + 1)) != -1)
        move_square(i);
      break;
    case 2:
      if((i = find_by_pos(squares[15].x - 1, squares[15].y)) != -1)
        move_square(i);
      break;
    case 3:
      if((i = find_by_pos(squares[15].x + 1, squares[15].y)) != -1)
        move_square(i);
      break;
    }
  }

  for(var i = 0; i < 15; i++)
  {
    squares[i].motion.destx = positionx(squares[i].x);
    squares[i].motion.desty = positiony(squares[i].y);
    squares[i].motion.tick = 0;
    squares[i].motion.nbticks = 30;
  }

  count = 0;

  do_motion();
}

function change_image(name)
{
  for(var i = 0; i < 15; i++)
    squares[i].img.src = 'imgs/' + name + i + '.jpg';
}