var max = 300;
var padding = 18;
var border = 1;

function findPos(obj) {
  var curleft = curtop = 0;
  if (obj.offsetParent) {
    curleft = obj.offsetLeft
    curtop = obj.offsetTop
    if (obj.style.position == 'absolute') obj = obj.parentNode;
    while (obj = obj.offsetParent) {
      curleft += parseInt(obj.offsetLeft);
      curtop += parseInt(obj.offsetTop);
    }
  }
  return [curleft, curtop];
}

function show_zoomed(obj, image, link) {
  var div = document.getElementById("thumb");

  div.innerHTML = '<img id="thumb_img" src="' + image + '" border=0 style="border: ' + border + 'px solid #fff" onclick="' + link + '" />';

  var img = document.getElementById("thumb_img");
  if (div.timeout != false) {
    clearTimeout(div.timeout);
    div.timeout = 0;
  }

  var pos = findPos(obj);
  //alert(pos);

  var page = getPageSize();
  var scroll = getScrollXY();
  /*
   if (pos[0] + 300 - scroll[0] >= page[0]) pos[0] -= (300 + padding);
   //else div.style.left = (pos[0] + padding);
   if (pos[1] + 300 - scroll[1] >= page[1]) pos[1] -= (300 + padding);
   //else div.style.top = (pos[1] + padding);*/

  div.style.left = pos[0] + padding;
  div.style.top = pos[1] + padding;

  img.onload = function () {
    var div = document.getElementById("thumb");
    img.style.visibility = "hidden";
    div.style.opacity = 0;
    div.style.display = "block";
    var page = getPageSize();
    var scroll = getScrollXY();
    var width = img.width + 2 * border;
    var height = img.height + 2 * border;
    var left = div.offsetLeft;
    var top = div.offsetTop;

    if (left + width - scroll[0] >= page[0]) left -= width + padding;
    if (top + height - scroll[1] >= page[1]) top -= height + padding;

    if (left < scroll[0]) left = scroll[0];
    if (top < scroll[1]) top = scroll[1];

    if (parseFloat(div.style.left) != left) div.style.left = left;
    if (parseFloat(div.style.top) != top) div.style.top = top;
    img.style.visibility = "visible";
    div.style.opacity = 1;
  }
}

function hide_zoomed() {
  var div = document.getElementById("thumb");
  var img = document.getElementById("thumb_img");

  div.style.opacity = 0;
  div.timeout = setTimeout('document.getElementById("thumb").style.display = "none"; document.getElementById("thumb").timeout = false;', 1000);
}

function getPageSize() {
  var size = Array();

  if (typeof window.innerWidth != 'undefined') {
    size[0] = window.innerWidth,
        size[1] = window.innerHeight
  }
  else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) {
    size[0] = document.documentElement.clientWidth,
        size[1] = document.documentElement.clientHeight
  }
  else {
    size[0] = document.getElementsByTagName('body')[0].clientWidth,
        size[1] = document.getElementsByTagName('body')[0].clientHeight
  }
  return size;
}

function getScrollXY() {
  var scrOfX = 0, scrOfY = 0;
  if (typeof( window.pageYOffset ) == 'number') {
    //Netscape compliant
    scrOfY = window.pageYOffset;
    scrOfX = window.pageXOffset;
  } else if (document.body && ( document.body.scrollLeft || document.body.scrollTop )) {
    //DOM compliant
    scrOfY = document.body.scrollTop;
    scrOfX = document.body.scrollLeft;
  } else if (document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop )) {
    //IE6 standards compliant mode
    scrOfY = document.documentElement.scrollTop;
    scrOfX = document.documentElement.scrollLeft;
  }
  return [ scrOfX, scrOfY ];
}

