function toggleZoom(click) {
  if (loading) return;
                  
  //The joy of cross-browser mouse coordinate detection...
  var x = -1000; var y = -1000; //if we can't find any coords zoomimage.php centers preview
  if (!click) var click = window.event; //make sure we grab some event
  if (click.pageX || click.pageY) { //the easy way
    x = click.pageX;
    y = click.pageY;
  }
  else if (click.clientX || click.clientY) { //the hard way
    x = click.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
    y = click.clientY + document.body.scrollTop + document.documentElement.scrollTop;
  }
  //now we got coords relative to the page, but we want relative to image
  var offset = image;
  while (offset) {
    //substract offset relative to parent
    x -= offset.offsetLeft;
    y -= offset.offsetTop;
    //and go on to substract parents offset
    offset = offset.offsetParent;
  }
  //now we got the real coords, yay
                  
  //make it a percentage, easier for zoomimage
  var xp = x / image.width;
  var yp = y / image.height;
                  
  zoomed = !zoomed;
  if (zoomed) {//we already inverted zoomed for correct box behaviour
    image.src = '/zoomimage.php?size=sample&id=' + id + '&x=' + xp + '&y=' + yp;
    stopBox();
  }
  else {
    image.src = '/showimage.php?size=sample&id=' + id;
    moveBox(click);
  }
  
  image.style.cursor = 'progress';
  loading = true;
}
function moveBox(mouse) {
  if (zoomed) return;
  if (!box) startBox();
  if (!mouse) var mouse = window.event;
  if (mouse.pageX || mouse.pageY) {
    x = mouse.pageX;
    y = mouse.pageY;
  }
  else if (mouse.clientX || mouse.clientY) {
    x = mouse.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
    y = mouse.clientY + document.body.scrollTop + document.documentElement.scrollTop;
  }

  var offset = image;
  var minx = 0; var miny = 0;
  while (offset) {
    minx += offset.offsetLeft;
    miny += offset.offsetTop;
    offset = offset.offsetParent;
  }
  var maxx = minx + image.width;
  var maxy = miny + image.height;

  if (x < minx || x > maxx || y < miny || y > maxy) {
    stopBox();
    return;
  }

  //center box on cursor, clipped by image borders
  x = x - bw / 2;
  if (x < minx) x = minx;
  if (x > maxx - bw) x = maxx - bw;
  y = y - bh / 2;
  if (y < miny) y = miny;
  if (y > maxy - bh) y = maxy - bh;

  //IE wouldn't let us just append the box to documentElement, so we need this
  var offset = box.offsetParent;
  while (offset) {
    x -= offset.offsetLeft;
    y -= offset.offsetTop;
    offset = offset.offsetParent;
  }

  box.style.left = x + 'px';
  box.style.top = y + 'px';
  box.style.visibility = '';

}
function startBox() {
  if (!box) {
    box = document.createElement('div');
    with (box.style) {
      visibility = 'hidden';
      width = bw - 2 + 'px';
      height = bh - 2 + 'px';
      border = '1px solid black';
      background = 'transparent';
      position = 'absolute';
      zIndex = '999';
      cursor = 'url("/images/zoomin.png"), crosshair';
    }
    window.onmousemove = moveBox;
    box.onclick = toggleZoom;
    document.body.appendChild(box);
  }
}
function stopBox() {
  if (box) box.parentNode.removeChild(box);
  box = false;
}
function loaded() {
  loading = false;
  if (zoomed)
    image.style.cursor = 'url("/images/zoomout.png"), auto';
  else
    image.style.cursor = 'url("/images/zoomin.png"), crosshair';
}
var zoomed = false;
var loading = true;
var image = document.getElementById('preview');
var box;
image.onclick = toggleZoom;
image.onload = loaded;
image.onmousemove = moveBox;
image.style.cursor = 'progress';