<!--
var zoomableClass = "zoomable";
var zoomedClass = "x2";
var zoomables, origWidth, origHeight;

/*
This function initializes the zoomer by putting all zoomable elements into
the zoomables array.
*/
function initZoomer() {
   // Find all zoomed elements and put in array zoomed
   zoomed = document.getElementsByClass(zoomedClass);
   // loop through the zoomed array
   for (i=0;i<zoomed.length;i++) {
      // calculate what the height and width should be
      zoomHeight = zoomed[i].height*2;
      zoomWidth = zoomed[i].width*2
      // stick these into the zoomed elements height/width property
      zoomed[i].width = zoomWidth;
      zoomed[i].height = zoomHeight;
   }
   // Find all zoomable elements and put in array zoomables
   zoomables = document.getElementsByClass(zoomableClass);
   // create arrays to remember the original height/width of the zoomable elements
   origWidth = new Array();
   origHeight = new Array();
   // loop through zoomables array
   for (i=0;i < zoomables.length;i++) {
      // Assign the onclick event to zoomImg
      if (document.addEventListener)
         zoomables[i].addEventListener('click',zoomImg,false);
      else
         zoomables[i].onclick = zoomImg;
      // Remember the original dimensions of the zoomable element
      origWidth[i] = zoomables[i].width;
      origHeight[i] = zoomables[i].height;
   }
}

/*
This function is for assigning images to become a zoomable. Not as elegant as the class method but it might
make script exectution speedier if you wish customize the script. Just go to the last line of the script and
either comment it out or remove it. This will stop the script from running through all the images in the page
looking for the classes. However, doing so will disable zooming by class.
*/
function zoom(e) {
  if (document.addEventListener)
    e.addEventListener('click',zoomImg,false);
  else
   e.onclick = zoomImg;
}

/*
This function just increases the image size by 2
*/
function x2(e) {
   zoomHeight = e.height*2;
   zoomWidth = e.width*2
   e.width = zoomWidth;
   e.height = zoomHeight;

}

/*
This function handles the mouse clicking. It detects whether any of the zoom-out keys are pressed and
zooms out or in according to this.
*/
function zoomImg(e) {

   // Check if the browser supports this method of checking whether the zoom-out keys are pressed
   if (e) {
      // If any of the zoomout keys are pressed the variables will be assigned true
      ctrlKey = e.ctrlKey;
      altKey = e.altKey;
      shiftKey = e.shiftKey;
   }
   // If the browser does not support the method, use IE's method
   else {
      // If any of the zoomout keys are pressed the variables will be assigned true
      ctrlKey = event.ctrlKey;
      altKey = event.altKey;
      shiftKey = event.shiftKey;
   }

   // Loop an infinite loop. Break inside.
   for (i=0;true;i++) {
      // 'this' keyword refers to the element that called this function.
      // Check if the element that called the function is inside zoomable array.
      // If it is, zoom in or out.
      if (this == zoomables[i]) {
        if (ctrlKey || altKey || shiftKey) zoomOut(i)// If any zoomed out key is pressed, zoom out (duh)
        else zoomIn(i) // Else zoom in (again, duh)
        break // break infinite loop
      }
      // Check if 'i' has passed out of zoomables array's range. If it has
      // add the element to the zoomables array.
       if (i == zoomables.length) {
        // this will be the index of the zoomable element in the zoomables array
        index = zoomables.length;
        // Put the element into zoomables array, remember the original dimensions of this element
        zoomables[index] = this;
        origWidth[index] = this.width;
        origHeight[index] = this.height;
        // Go back by one in variable 'i'. In doing so, the element will pass the zoomables array check
        // and take appropriate action
        i--;
      }
   }

}

// This function does the actual work of zooming in. It takes in the index of the element in the zoomables array
function zoomIn(i) {
   // Calculate the current zoom value by taking the current width and dividing by original width
   zoomValue = zoomables[i].width/origWidth[i];
   // Increase the zoom value
   zoomValue++;
   // Zoom image by multiplying original dimensions by zoom value
   zoomables[i].width = origWidth[i]*zoomValue;
   zoomables[i].height = origHeight[i]*zoomValue;
}

// This function zooms out image. Takes in index of the element in the zoomables array.
function zoomOut(i) {
   // Calculate the current zoom value by taking the current width and dividing by original width
    zoomValue = zoomables[i].width/origWidth[i];
   // Decrease zoom value
   zoomValue--;
   // Check that the zoom value does not go to zero to prevent images from going below 1x
   if (zoomValue != 0) {
   zoomables[i].width = origWidth[i]*zoomValue;
   zoomables[i].height = origHeight[i]*zoomValue;
   }
}

/*
This function finds all the elements with the class name 'name'
*/
document.getElementsByClass = function ( name ) {
    var all, ret = new Array();
    all = document.body.getElementsByTagName('IMG');
    for ( i = 0; i < all.length; i++ ) {
        if ( all[i].className.toLowerCase() == name.toLowerCase() )
            ret[ret.length] = all[i];
    }
    return ret;
}

/*
This initializes the script and allows it to find all the images that have class="zoomable".
If you wish, this line can be commented out for faster execution time. However, this will disable zooming by
class="zoomable".
*/
window.onload = initZoomer;


-->