// ZoomImage-Script v0.1
//
// shows an image at the mouse-position, which is shown as a thumbnail on a page
//
// relies on 'Simple Image Trail' by JavaScriptKit.com (http://www.javascriptkit.com)
// and 'Lightbox v2.02' by Lokesh Dhakar (http://www.huddletogether.com)
//
// Thomas Goellner, April 2007

var zoomInterval;
var ua = navigator.userAgent.toLowerCase();

function initZoomImage() {
  // Initialisation
  // This function checks every image on a page for a 'longdesc'-attribute, which contains the data for an image to enlarge
  
  for(i=0; i<document.images.length; i++) {

    image = document.images[i];

    if(image.getAttribute('longdesc')!=undefined) {
      if(image.getAttribute('longdesc')!='') {
        if(image.parentNode.nodeName.toUpperCase()=='A') {
          // Adds an onmouseover and a onmouseout-Eventhandler to the wrapping A-element of an image
          image.parentNode.onmouseover = function() { showImage(this); }
          image.parentNode.onmouseout = function() { hideImage(); }
        } else {
          // Creates an A-element which will contain the event-handler for the enlarging
          
        }
      }
    }
  }
}

function showImage(object) {
  hideImage(); // deletes an image which is already shown

  if(object!=undefined) {
    if(object.firstChild.getAttribute('longdesc')!=undefined) {
      if(object.firstChild.getAttribute('longdesc')!='') {
        // Gets the data of the LONGDESC-attribute and splits it into URL, WIDTH and HEIGHT
        temp = object.firstChild.getAttribute('longdesc').split(";");
        url = temp[0];
        if(temp[1]==undefined) width = 150; else width = temp[1];
        if(temp[2]==undefined) height = 150; else height = temp[2];

        if(url!=undefined) {
           // creates a new DIV-Element...
          var newDIV = document.createElement("div");
              newDIV.setAttribute("id","zoomimage"); 
              newDIV.setAttribute("style","width: "+width+"px; height: "+height+"px; visibility: hidden;");

              if(document.all && ua.indexOf("msie")>-1) {
                // different syntax for setting the Style-attributes in MSIE
                newDIV.style.visibility = "hidden";
                newDIV.style.width = width+"px";
                newDIV.style.height =height+"px";
              }
          
          // creates the image to be shown in the DIV-Element
          var newDIVImage = document.createElement("img");
              newDIVImage.setAttribute("src",url);
      
          // Sets the new elements onto the page
          document.getElementsByTagName("body")[0].appendChild(newDIV);
          document.getElementById("zoomimage").appendChild(newDIVImage);
        
          // starts the function which lets the image follow the mouse-cursor
          zoomInterval = window.setInterval("moveImage()", 10);
        }
      }
    }
  }
}

function hideImage() {
  window.clearInterval(zoomInterval); // stops the interval which lets the image follow the mouse-cursor
  
  if(document.getElementById("zoomimage")!=undefined) {
    // deletes the image-div
    document.getElementById("zoomimage").parentNode.removeChild(document.getElementById("zoomimage"));
  }
}

function moveImage() {
  // gets the image-size
  width = document.getElementById("zoomimage").style.width; width = width.substring(0,width.length-2); width = parseInt(width);
  height= document.getElementById("zoomimage").style.height; height = height.substring(0,height.length-2); height = parseInt(height);
  
  // gets the window-size
  docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15
  docheight=document.all? Math.min(truebody().scrollHeight, truebody().clientHeight) : Math.min(document.body.offsetHeight, window.innerHeight)

  // if the image would be shown outside of the viewable area of the page, it will stuck to the borders
  if(docwidth < 18+xmouse-truebody().scrollLeft+width+12)
    xpos = truebody().scrollLeft+xmouse-width-16;
  else
    xpos = xmouse+10;

  if(docheight < 18+ymouse-truebody().scrollTop+height+12)
    ypos = truebody().scrollTop+ymouse-Math.max(0,(height+12 + ymouse - docheight));
  else
    ypos = ymouse+10;

  xpos = xpos+"px";
  ypos = ypos+"px";
  
  if(document.all && ua.indexOf("msie")>-1) {
    // different syntax for MSIE
    document.getElementById("zoomimage").style.setAttribute("visibility","visible",false);
    document.getElementById("zoomimage").style.setAttribute("top",ypos,false);
    document.getElementById("zoomimage").style.setAttribute("left",xpos,false);
    document.getElementById("zoomimage").style.setAttribute("width",width+"px",false);
    document.getElementById("zoomimage").style.setAttribute("height",height+"px",false);
    document.getElementById("zoomimage").style.setAttribute("position","absolute",false);
    document.getElementById("zoomimage").style.setAttribute("border","solid 6px #ffffff",false);
    document.getElementById("zoomimage").style.setAttribute("backgroundColor","#ffffff",false);
    document.getElementById("zoomimage").style.setAttribute("backgroundImage","url(images/loading.gif)",false);
    document.getElementById("zoomimage").style.setAttribute("backgroundRepeat","no-repeat",false);
    document.getElementById("zoomimage").style.setAttribute("backgroundPosition","bottom right",false);
  } else {
    document.getElementById("zoomimage").setAttribute("style","position: absolute; display: block; top: "+ypos+"; left: "+xpos+"; width: "+width+"px; height: "+height+"px; border: solid 6px #ffffff;background-color: #ffffff; background-image: url(images/loading.gif); background-repeat: no-repeat; background-position: bottom right;");
  }

  // show the image-DIV
  document.getElementById("zoomimage").style.visibility = "visible";
}

function truebody()	{
  // right syntax for any browser (needed in "moveImage")
	return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}


// adds the 'onload'-eventhandler to the Window-Body
Event.observe(window, 'load', initZoomImage, false);