<!-- the script begins

var isNN4 = false;
var isIE4 = false;

var pic_id = "pic";
var pic_table = "picb";

var pic_index = 2;

var pic_base_x = 0;
var pic_base_y = 0;

var pic_image = null;
var pic_image_width = 0;
var pic_image_height = 0;
var pic_grip_x = 1;
var pic_grip_y = 1;
var pic_table_gap = 0;

var pic_grip_width = 0;
var pic_grip_height = 0;
var layer_length = 0;

var layer_recovered = 0;

var pic_image_top = 0;
var pic_table_top = 0;
var pic_table_bottom = 0;
var pic_table_left = 0;
var pic_table_right = 0;

var game_started = false;

var active_layer = null;
var host_layer = null;

var current_x = 0;
var current_y = 0;

var move_timer = 0;
var move_max_step = 64
var move_step = move_max_step;
var move_start = 1;
var move_solve = 2;
var move_ongoing = 3;
var move_status = move_start;

function Event_Init() {
  document.onmousedown = Mouse_Down;
  document.onmousemove = Mouse_Move;
  document.onmouseup = Mouse_Up;

  if (isNN4)
    document.captureEvents(Event.MOUSEDOWN|Event.MOUSEUP|Event.MOUSEMOVE);
}

function Event_Release() {
  document.onmousedown = null;
  document.onmousemove = null;
  document.onmouseup = null;

  if (isNN4)
    document.releaseEvents(Event.MOUSEDOWN|Event.MOUSEUP|Event.MOUSEMOVE);
}

function Layer_Top(layer_pointer) {
  if (isIE4)
    return layer_pointer.style.pixelTop
  else
    return layer_pointer.top;
}

function Layer_Left(layer_pointer) {
  if (isIE4)
    return layer_pointer.style.pixelLeft
  else
    return layer_pointer.left;
}

function Layer_Index(layer_pointer) {
  if (isIE4)
    return layer_pointer.style.zIndex
  else
    return layer_pointer.zIndex;
}

function Index_Layer(layer_pointer,new_index) {
  if (isIE4)
    layer_pointer.style.zIndex = new_index
  else
    layer_pointer.zIndex = new_index;
}

function Move_Layer(layer_pointer,left_offset,top_offset) {
  if (isIE4) {
    layer_pointer.style.pixelLeft += left_offset;
    layer_pointer.style.pixelTop += top_offset;
  }
  else {
    layer_pointer.left += left_offset;
    layer_pointer.top += top_offset;
  }
}

function Get_ID(layer_num) {
  return pic_id + layer_num + "";
}

function Get_Layer(layer_id) {
  if (isIE4)
    return document.all[layer_id]
  else
    return document.layers[layer_id];
}

function Assign_Layer() {
  var layer_id = "";
  var layer_div = "";
  var layer_str = '<img src="' + pic_image.src + '" width="' + pic_image_width + '" height="' + pic_image_height + '" border="0">';
  var layer_clip = "";
  var layer_clip_top = 0;
  var layer_clip_bottom = 0;
  var layer_clip_left = 0;
  var layer_clip_right = 0;
  var the_layer = null;
  var layer_num = 0;

  for (var i = 1 ; i <= pic_grip_y; i++)
    for (var j = 1; j <= pic_grip_x; j++) {
      layer_num = (i - 1) * pic_grip_x + j;
      layer_id = Get_ID(layer_num);

      layer_clip_top = (i - 1) * pic_grip_height;
      layer_clip_bottom = i * pic_grip_height;
      layer_clip_left = (j - 1) * pic_grip_width;
      layer_clip_right = j * pic_grip_width;
      layer_clip = "(" + layer_clip_top + "px " + layer_clip_right + "px " + i * pic_grip_height + "px " + layer_clip_left + "px)";

      if (isIE4) {
        layer_div = '<div id="' + layer_id + '" ' + 'style="position:absolute; top:' + pic_base_y + '; left:' + pic_base_x + '; width:' + pic_image_width + '; height:' + pic_image_height + '; clip:rect' + layer_clip + '; visibility:visible; ' + 'z-index:' + pic_index + ';">' + layer_str + '</div>';
        document.body.insertAdjacentHTML("BeforeEnd",layer_div);

        the_layer = document.all[layer_id];
      }
      else {
        document.layers[layer_id] = new Layer(pic_image_width);

        with (document.layers[layer_id]) {
          height = pic_image_height;
          top = pic_base_y;
          left = pic_base_x;
          clip.top = layer_clip_top;
          clip.left = layer_clip_left;
          clip.bottom = layer_clip_bottom;
          clip.right = layer_clip_right;
          zIndex = pic_index;
          document.open();
          document.writeln(layer_str);
          document.close();
          visibility = "show";
        }

        the_layer = document.layers[layer_id];
      }

      the_layer.clip_left = layer_clip_left;
      the_layer.clip_top = layer_clip_top;
      the_layer.dx = pic_base_x + the_layer.clip_left;
      the_layer.dy = pic_base_y + the_layer.clip_top;
      the_layer.nx = the_layer.dx;
      the_layer.ny = the_layer.dy;
      the_layer.lodger = layer_id;
    }
}

function Check_Status() {
  move_step = move_max_step;

  if (move_status == move_start) {
    move_status = move_ongoing;
    game_started = true;
    Event_Init();
  }

  if (move_status == move_solve) {
    move_status = move_start;
    game_started = false;
    Event_Init();
  }

  if (move_status == move_ongoing) {
    if (layer_recovered == layer_length) {
      active_layer = null;
      move_status = move_start;
      alert("Congratulations !\n\nYou've solved the puzzle.");
      game_started = false;
    }
  }
}

function Move_In() {
  var the_layer = null;
  var layer_touched = false;
  var layer_dx = 0;
  var layer_dy = 0;
  var nx = 0;
  var ny = 0;
  var layer_id = "";

  layer_recovered = 0;

  for (var i = 0 ; i < layer_length; i++) {
    layer_id = Get_ID(i + 1);
    the_layer = Get_Layer(layer_id);

    if ((the_layer.nx == the_layer.dx) && (the_layer.ny == the_layer.dy))
      layer_recovered++;

    nx = Layer_Left(the_layer) + the_layer.clip_left;
    ny = Layer_Top(the_layer) + the_layer.clip_top;

    if ((nx != the_layer.nx) || (ny != the_layer.ny)) {
      layer_touched = true;

      if (the_layer != active_layer) {
        layer_dx = (the_layer.nx - nx)/move_step;
        layer_dy = (the_layer.ny - ny)/move_step;

        layer_dx = (layer_dx > 0)?Math.ceil(layer_dx):Math.floor(layer_dx);
        layer_dy = (layer_dy > 0)?Math.ceil(layer_dy):Math.floor(layer_dy);

        Move_Layer(the_layer,layer_dx,layer_dy);
      }
    }
  }

  if (layer_touched) {
    move_step = (move_step>4)?move_step/2:2;
    move_timer = setTimeout("Move_In()",200);
  }
  else
    Check_Status();
}

function Check_Layer(x,y,offset_x,offset_y) {
  var layer_x = 0;
  var layer_y = 0;
  var layer_id = "";

  layer_x = Math.floor((x - pic_base_x + offset_x/2)/pic_grip_width);
  layer_y = Math.floor((y - pic_base_y + offset_y/2)/pic_grip_height);
  layer_id = Get_ID(layer_y * pic_grip_x + layer_x + 1);

  return layer_id;
}

function Check_Position() {
  var target_layer = null;
  var lodger_layer = null;
  var target_id = "";
  var lodger_id = "";

  Event_Release();
  clearTimeout(move_timer);

  target_id = Check_Layer(Layer_Left(active_layer) + active_layer.clip_left, Layer_Top(active_layer) + active_layer.clip_top, pic_grip_width, pic_grip_height);
  target_layer = Get_Layer(target_id);
  lodger_id = target_layer.lodger;
  lodger_layer = Get_Layer(lodger_id);

  if (active_layer != lodger_layer) {
    target_layer.lodger = host_layer.lodger;
    host_layer.lodger = lodger_id;

    active_layer.nx = target_layer.dx;
    active_layer.ny = target_layer.dy;

    lodger_layer.nx = host_layer.dx;
    lodger_layer.ny = host_layer.dy;

    if (pic_index > Layer_Index(lodger_layer)) {
      Index_Layer(lodger_layer,++pic_index);
      Index_Layer(active_layer,++pic_index);
    }
  }

  active_layer = null;

  Event_Init();

  move_status = move_ongoing;
  Move_In();
}

function Touched(mouse_x,mouse_y) {
  var target_layer = null;
  var target_id = "";
  var host_id = "";

  if (mouse_x >= pic_base_x && mouse_x <= (pic_base_x + pic_image_width - 1) && mouse_y >= pic_base_y && mouse_y <= (pic_base_y + pic_image_height - 1)) {
    host_id = Check_Layer(mouse_x,mouse_y,0,0);
    host_layer = Get_Layer(host_id);
    target_id = host_layer.lodger;
    target_layer = Get_Layer(target_id);
  }

  return target_layer;
}

function Mouse_Down(e) {
  if (!game_started)
    Start_Game()
  else {
    if (isIE4)
      active_layer = Touched(event.clientX + document.body.scrollLeft, event.clientY + document.body.scrollTop)
    else
      active_layer = Touched(e.pageX,e.pageY);

    if (active_layer != null) {
      if (isIE4) {
        current_x = event.clientX + document.body.scrollLeft;
        current_y = event.clientY + document.body.scrollTop;
      }
      else {
        current_x = e.pageX;
        current_y = e.pageY;
      }

      Index_Layer(active_layer,++pic_index);
    }
    else
      Solve_Puzzle();
  }

  return false;
}

function Mouse_Move(e) {
  var layer_x = 0;
  var layer_y = 0;
  var new_x = 0;
  var new_y = 0;
  var distance_x = 0;
  var distance_y = 0;

  if (active_layer != null) {
    layer_x = Layer_Left(active_layer) + active_layer.clip_left;
    layer_y = Layer_Top(active_layer) + active_layer.clip_top;

    if (isIE4) {
      new_x = event.clientX + document.body.scrollLeft;
      new_y = event.clientY + document.body.scrollTop;
    }
    else {
      new_x = e.pageX;
      new_y = e.pageY;
    }

    distance_x = (new_x - current_x);
    distance_y = (new_y - current_y);

    if ((layer_x + distance_x) < pic_table_left)
      distance_x = pic_table_left - layer_x;
    if ((layer_x + pic_grip_width -1 + distance_x) > pic_table_right)
      distance_x = pic_table_right - (layer_x + pic_grip_width -1);
    if ((layer_y + distance_y) < pic_table_top)
      distance_y = pic_table_top - layer_y;
    if ((layer_y + pic_grip_height - 1 + distance_y) > pic_table_bottom)
      distance_y = pic_table_bottom - (layer_y + pic_grip_height - 1);

    current_x += distance_x;
    current_y += distance_y;

    Move_Layer(active_layer,distance_x,distance_y);
  }

  return false;
}

function Mouse_Up(e) {
  if (active_layer != null)
    Check_Position()

  return false;
}

function Shuffle_Puzzle() {
  var layer_empty = new Array();
  var layer_position = 0;
  var the_layer = null;
  var target_layer = null;
  var this_id = "";
  var target_id = "";

  for (var i = 0; i < layer_length; i++)
    layer_empty[i] = true;

  for (i = 0; i < layer_length; i++) {
    this_id = Get_ID(i + 1);
    the_layer = Get_Layer(this_id);

    layer_position = Math.floor(Math.random() * (layer_length - i));

    for (var j = 0; j < layer_length; j++)
      if (layer_empty[j]) {
        if (layer_position == 0) {
          layer_empty[j] = false;
          target_id = Get_ID(j + 1);
          break;
        }
        else
          layer_position--;
      }

    target_layer = Get_Layer(target_id);

    the_layer.nx = target_layer.dx;
    the_layer.ny = target_layer.dy;
    target_layer.lodger = this_id;
  }
}

function Start_Game(){
  if ((pic_grip_width > (pic_table_gap * 2)) && (pic_grip_height > (pic_table_gap * 2))) {
    Event_Release();

    Shuffle_Puzzle();

    move_status = move_start;
    Move_In();
  }
  else
    alert("The size of the tiles is too small.");
}

function Solve_Puzzle() {
  var the_layer = null;
  var this_id = "";

  Event_Release();
  clearTimeout(move_timer);
  pic_index = 2;

  for (var i = 0; i < layer_length; i++) {
    this_id = Get_ID(i + 1);
    the_layer = Get_Layer(this_id);
    Index_Layer(the_layer,pic_index);

    the_layer.nx = the_layer.dx;
    the_layer.ny = the_layer.dy;
  }

  move_step = move_max_step;
  move_status = move_solve;
  Move_In();
}

function Show_Border() {
  var layer_b = '<table align="center"  width="' + (pic_image_width + pic_table_gap * 2) + '" height="' + (pic_image_height + pic_table_gap * 2) + '" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0" border="1"><tr align="center" valign="middle"><td>&nbsp;</td></tr></table>';

  if (isIE4)
    document.body.insertAdjacentHTML("BeforeEnd",'<div id="' + pic_table + '" style="position:absolute; left:' + (pic_base_x - pic_table_gap) + '; top:' + (pic_base_y - pic_table_gap) + '; width:' + (pic_image_width + pic_table_gap * 2) + '; height:' + (pic_image_height + pic_table_gap * 2) + '; visibility:visible; z-index:1;">' + layer_b + '</div>')
  else {
    document.layers[pic_table] = new Layer(pic_image_width + pic_table_gap * 2);

    with (document.layers[pic_table]) {
      height = pic_image_height + pic_table_gap * 2;
      left = pic_base_x - pic_table_gap;
      top = pic_base_y - pic_table_gap;
      document.open();
      document.writeln(layer_b);
      document.close();
      zIndex = 1;
      visibility = "show";
    }
  }
}

function Position_Image() {
  var block_window_width = 0;
  var block_window_height = 0;

  if (isIE4) {
    block_window_width = document.body.clientWidth;
    block_window_height = document.body.clientHeight;
  }
  else {
    block_window_width = window.innerWidth;
    block_window_height = window.innerHeight;
  }

  pic_base_x = Math.floor((block_window_width - pic_image_width)/2);
  pic_base_y = Math.floor((block_window_height - pic_image_height)/2);

  if (pic_base_x < pic_table_gap)
    pic_base_x = pic_table_gap;
  if (pic_base_y < pic_image_top)
    pic_base_y = pic_image_top;

  pic_table_top = pic_base_y - pic_table_gap + 1;
  pic_table_left = pic_base_x - pic_table_gap + 1;
  pic_table_bottom = pic_base_y + pic_image_height + pic_table_gap -1;
  pic_table_right = pic_base_x + pic_image_width + pic_table_gap -1;
}

function Check_Image() {
  pic_image_width = 340;
  pic_image_height = 340;
  pic_grip_x = 4;
  pic_grip_y = 4;
  pic_table_gap = 10;

  pic_grip_width = pic_image_width / pic_grip_x;
  pic_grip_height = pic_image_height / pic_grip_y;
  layer_length = pic_grip_x * pic_grip_y;

  pic_image = new Image(pic_image_width,pic_image_height);
  pic_image.onload = _Game_Init;
  pic_image.src = "eaststar2.gif";
}

function _Game_Init() {
  Position_Image();
  Show_Border();
  Assign_Layer();
  Event_Init();
}

function Game_Init() {
  isNN4 = document.layers;
  isIE4 = document.all;

  if (isIE4 || isNN4) {
    Check_Image();
  }
  else {
    alert("Sorry !\n\nYou need a version 4 or above browser to play the game.");
  }
}

// the script ends -->