<!--
  var zoomIsVisible;
  var zoomingIn;
  /*
    Load the big version of an image into the #zoomSpace.
  */
  function ZoomIn(thumbNail) {
    var xOff = 0;
    var yOff = 0;
    /* Use a regular expression to strip the file extension off
       from the thumbNail path string and replace it with ".xml". */
    var oldPath = new String(thumbNail);
    var xmlExtension = new String(".xml");
    var newPath = oldPath.replace("_preview.jpg", xmlExtension);
		if (newPath == oldPath) {
      newPath = oldPath.replace("_preview.png", xmlExtension);
		}
    /* Use a regular expression to strip the "_preview" from the name of the
       thumbNail path to obtain the name of the big image path. */
		var jpgExtension = new String(".jpg");
		var pngExtension = new String(".png");
    var bigImg = oldPath.replace("_preview.jpg", jpgExtension);
		if (bigImg == oldPath) {
      bigImg = bigImg.replace("_preview.png", pngExtension);
		}
    /* If the resulting .xml file exists, parse it and use its contents instead of
       imgTitle, imgClient, imgMedia, imgNotes, noteType */
    var imgMetaData = new ImageMetaData(newPath);

    var imgTitle = imgMetaData.title;
    var imgClient = imgMetaData.client;
    var imgMedia = imgMetaData.media;
    var imgNotes = imgMetaData.note;
    var noteType = imgMetaData.note_type;
    
    if( typeof( window.pageYOffset ) == 'number' ) {
      yOff = window.pageYOffset;
      xOff = window.pageXOffset;
    }
    else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
      yOff = document.body.scrollTop;
      xOff = document.body.scrollLeft;
    }
    else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
      yOff = document.documentElement.scrollTop;
      xOff = document.documentElement.scrollLeft;
    }
    
    document.getElementById("zoomSpace").style.left = xOff + "px";
    document.getElementById("zoomSpace").style.top = yOff + "px";
    document.getElementById("zoomImg").src = bigImg;
    document.getElementById("zoomImgTitle").innerHTML = imgTitle;
    document.getElementById("zoomImgClient").innerHTML = "<i>client: </i>" + imgClient;
    document.getElementById("zoomImgMedia").innerHTML = "<i>media: </i>" + imgMedia;
    if (noteType == "c")
    {
      document.getElementById("zoomImgNotes").innerHTML = "<cite>" + imgNotes + "</cite>";
    }
    else
    {
      document.getElementById("zoomImgNotes").innerHTML = imgNotes;
    }
    zoomingIn = true;
  }
  
	
	// A HELPER FUNCTION FOR ZoomIn()
  // Make #zoomSpace visible if show==true; Otherwise, hide it.
  function ShowZoom(show)
  {
    if(show) 
      document.getElementById("zoomSpace").style.visibility = "visible";
    else {
			// Load a tiny, invisible pixel into the #zoomSpace.
      document.getElementById("zoomImg").src = "global/TransparentPixel.png";
			// Hide the metadata and everything else.
      document.getElementById("zoomSpace").style.visibility = "hidden";
    }
    zoomIsVisible = show;
  }
  
  
  // INITIALIZE ALL EVENT HANDLERS
  // Perform one-time initializations just after the document has loaded.
  $(document).ready( function() {
    // Init the handlers for thumbnail clicks and arrow clicks.
    InitClickHandlers();
    
    zoomIsVisible = false; // Reflects the CSS-defined start state for the zoom space.
    // The body has an event handler for showing/hiding the zoom space as a click event
    // bubbles out. This variable tells the handler what state to switch to. If zooming
    // in, show it. Otherwise, hide it.
    zoomingIn = false; 
  
		//	Register an event handler for the body element that will hide
		//	the zoom space if it is visible.
		if(document.body.addEventListener) // W3C method for registering an event handler
		{
			document.body.addEventListener(
				'click',
				function (e) { ShowZoom(zoomingIn); zoomingIn = false;  },
				false); // Set useCapture false so this function gets
								//called after ZoomIn() might get called.
		}
		else if (document.body.attachEvent) // Microsoft version
		{
			// Microsoft always Bubbles instead of Captures.
			document.body.attachEvent(
				'onclick',
				function (e) { ShowZoom(zoomingIn); zoomingIn = false; }  )
		}
  }) // document ready
  
	
	// AN ONCLICK EVENT HANDLER
	// Displays a full-size image when a thumbnail is clicked.
  function Zoom( aLink ) {
    ZoomIn(aLink.src);
  }
	
	
	// AN ONCLICK EVENT HANDLER
	//   rotateState maintains the current state of the rotations of the four quadrants.
	//   Valid range is [0-3].
	var rotateState = 0;
	//   QuadrantOrder is a repeating list of quadrant IDs, read in counter-clockwise order.
	//   It repeats and has nine values so we can safely read values from [rotateState] to [rotateState+3].
	var QuadrantOrder = ["art1", "web1", "aboutThisSite", "banner", "art1", "web1", "aboutThisSite", "banner", "art1"];
	// Rotates the four quadrant blocks 90 degrees counterclockwise
	// (because that's the direction the arrows point).
	function RotateQuadrants() {
		var quadElement;
		// Update the state.
  	rotateState++;
		if (rotateState > 3) rotateState = 0;
		
		// Reposition the blocks according to the new state.
		if (document.getElementById) {
			quadElement = document.getElementById( QuadrantOrder[4-rotateState] );
			if (quadElement) {
				quadElement.style.left = "0px";
				quadElement.style.top = "0px";
			}
			quadElement = document.getElementById( QuadrantOrder[4-rotateState + 1] );
			if (quadElement) {
				quadElement.style.left = "0px";
				quadElement.style.top = "482px";
			}
			quadElement = document.getElementById( QuadrantOrder[4-rotateState + 2] );
			if (quadElement) {
				quadElement.style.left = "482px";
				quadElement.style.top = "482px";
			}
			quadElement = document.getElementById( QuadrantOrder[4-rotateState + 3] );
			if (quadElement) {
				quadElement.style.left = "482px";
				quadElement.style.top = "0px";
			}
		}
	}
  
	
  // Assign all of the onclick event handlers.
	// Thumbnail images will call the Zoom() function to show an image.
	// Arrow images will call the Rotate() function to rotate the four quadrants.
  function InitClickHandlers() {
    if (document.getElementsByTagName) {
      // Find all thumbnails and assign the Zoom() function to their onclick handlers.
      // Get an array of all divs of the "thumbNailCollection" class.
      var thumbieDivs = getElementByClass("thumbNailCollection");
			// Process each thumbNailCollection div.
      for(i=0; i<thumbieDivs.length; i++) {
				// Get an array of all descendent image elements.
        var links = thumbieDivs[i].getElementsByTagName( 'img' );
				// Process each image element.
        for (k=0; k<links.length; k++) {
          links[k].onclick = function() {
            return Zoom(this);
          };
        }
      }
      // Find all arrows and assign the Rotate() function to their onclick handlers.
      // Get an array of all images of the "arrow" class.
			var clickableArrows = getElementByClass("arrow");
			// Process each .arrow image element.
      for(i=0; i<clickableArrows.length; i++) {
				clickableArrows[i].onclick = function() {
					return RotateQuadrants();
				};
			}
    } // end of if(getElementsByTagName)
  }
  

  // getElementByClass by Benj Arriola
  // Searches the entire DOM for all elements of theClass.
  // Packs references to them in an array and returns the array.
  function getElementByClass(theClass) {
    var elementsOfTheClass = new Array();
    var eotc_i = 0;

    //Create Array of All HTML Tags
    var allHTMLTags = document.getElementsByTagName( '*' );
    //Loop through all tags using a for loop
    for (i=0; i<allHTMLTags.length; i++) {
      //Get all tags with the specified class name.
      if (allHTMLTags[i].className==theClass) {
        //Save each match to the elementsOfTheClass array.
        elementsOfTheClass[eotc_i] = allHTMLTags[i];
        eotc_i++;
      }
    }
    return elementsOfTheClass;
  }

-->

