// -------------------------------------------------------------------
// Image Thumbnail Viewer Script- By Dynamic Drive, available at: http://www.dynamicdrive.com
// Last updated: February 1st, 2009 - add iframe support
// -------------------------------------------------------------------
 
var thumbnailviewer = {
 enableTitle : true, //Should "title" attribute of link be used as description?
 enableAnimation : true, //Enable fading animation?
 definefooter : '<div class="footerbar">Close X</div>', //Define HTML for footer interface
 defineLoading : '<img src="loading.gif" /> Loading Image...', //Define HTML for "loading" div
 
///////////// No Need to Edit Beyond Here /////////////
 
 scrollbarwidth : 16,
 opacitystring : 'filter:progid:DXImageTransform.Microsoft.alpha(opacity=10); -moz-opacity: 0.1; opacity: 0.1',
 
 createthumbBox : function(){ // write out HTML for Image Thumbnail Viewer plus loading div
  document.write('<div id="thumbBox" onClick="thumbnailviewer.closeit()"><div id="thumbImage"></div>' + this.definefooter + '</div>')
  document.write('<div id="thumbLoading">' + this.defineLoading + '</div>')
  this.thumbBox = parent.document.getElementById('thumbBox');
  this.thumbImage = parent.document.getElementById('thumbImage'); //Reference div that holds the shown image
  this.thumbLoading = parent.document.getElementById('thumbLoading'); //Reference "loading" div that will be shown while image is fetched
  this.standardbody = (parent.document.compatMode == 'CSS1Compat')? parent.document.documentElement : parent.document.body; //create reference to common "body" across doctypes
 },
 
 centerDiv : function(divobj){ //Centers a div element on the page
  var ie = document.all && !window.opera, dom = document.getElementById,
  scroll_top = ie? this.standardbody.scrollTop : parent.window.pageYOffset,
  scroll_left = ie? this.standardbody.scrollLeft : parent.window.pageXOffset,
  docwidth = ie? this.standardbody.clientWidth : parent.window.innerWidth - this.scrollbarwidth,
  docheight = ie? this.standardbody.clientHeight: parent.window.innerHeight,
  docheightcomplete = this.standardbody.offsetHeight > this.standardbody.scrollHeight?
   this.standardbody.offsetHeight : this.standardbody.scrollHeight, //Full scroll height of document
  objwidth = divobj.offsetWidth, //width of div element
  objheight = divobj.offsetHeight, //height of div element
//Vertical position of div element: Either centered, or if element height larger than viewpoint height, 10px from top of viewpoint
  topposition = docheight>objheight? scroll_top + docheight / 2 - objheight / 2 + 'px' : scroll_top + 10 + 'px';
  divobj.style.left = docwidth / 2 - objwidth / 2 + 'px'; //Center div element horizontally
  divobj.style.top = Math.floor(parseInt(topposition)) + 'px';
  divobj.style.visibility = 'visible';
 },
 
 showthumbBox : function(){ //Show ThumbBox div
  thumbnailviewer.thumbLoading.style.visibility = 'hidden'; //Hide "loading" div
  this.centerDiv(this.thumbBox);
  if (this.enableAnimation){ //If fading animation enabled
   this.currentopacity = 0.1; //Starting opacity value
   this.opacitytimer = setInterval(function(){thumbnailviewer.opacityanimation();}, 20);
  }
 },
 
 loadimage : function(link){ //Load image function that gets attached to each link on the page with rel="thumbnail"
  if (this.thumbBox.style.visibility == 'visible') //if thumbox is visible on the page already
   this.closeit(); //Hide it first (not doing so causes triggers some positioning bug in Firefox
  var imageHTML = '<img src="' + link.getAttribute('href') + '" style="' + this.opacitystring + '" />'; //Construct HTML for shown image
  if (this.enableTitle && link.getAttribute('title')) //Use title attr of the link as description?
   imageHTML += '<br />' + link.getAttribute('title')
  this.centerDiv(this.thumbLoading) //Center and display "loading" div while we set up the image to be shown
  this.thumbImage.innerHTML = imageHTML //Populate thumbImage div with shown image's HTML (while still hidden)
  this.featureImage = this.thumbImage.getElementsByTagName('img')[0]; //Reference shown image itself
  if (this.featureImage.complete){
   this.thumbImage.style.width = this.featureImage.width + 'px';
   this.showthumbBox();
  }
  else
   this.featureImage.onload = function(){ //When target image has completely loaded
    thumbnailviewer.thumbImage.style.width = thumbnailviewer.featureImage.width + 'px';
    thumbnailviewer.showthumbBox(); //Display "thumbbox" div to the world!
   };
 if (document.all && !window.createPopup) //Target IE5.0 browsers only. Address IE image cache not firing onload bug: panoramio.com/blog/onload-event/
  this.featureImage.src = link.getAttribute('href');
 this.featureImage.onerror = function(){ //If an error has occurred while loading the image to show
  thumbnailviewer.thumbLoading.style.visibility = 'hidden'; //Hide "loading" div, game over
  };
 },
 
 setimgopacity : function(value){ //Sets the opacity of "thumbimage" div per the passed in value setting (0 to 1 and in between)
  var targetobject = this.featureImage;
  if (targetobject.filters && targetobject.filters[0]){ //IE syntax
   if (typeof targetobject.filters[0].opacity == 'number') //IE6
    targetobject.filters[0].opacity = value * 100;
   else //IE 5.5
    targetobject.style.filter = 'alpha(opacity=' + value * 100 + ')';
  }
  else if (typeof targetobject.style.MozOpacity != 'undefined') //Old Mozilla syntax
   targetobject.style.MozOpacity = value;
  else if (typeof targetobject.style.opacity != 'undefined') //Standard opacity syntax
   targetobject.style.opacity = value;
  else //Non of the above, stop opacity animation
   this.stopanimation();
 },
 
 opacityanimation : function(){ //Gradually increase opacity function
  this.setimgopacity(this.currentopacity);
  this.currentopacity += 0.1;
  if (this.currentopacity > 1)
   this.stopanimation();
 },
 
 stopanimation : function(){
  if (typeof this.opacitytimer != 'undefined')
   clearInterval(this.opacitytimer);
 },
 
 closeit : function(){ //Close "thumbbox" div function
  this.stopanimation();
  this.thumbBox.style.visibility = 'hidden';
  this.thumbImage.innerHTML = '';
  this.thumbBox.style.left = '-2000px';
  this.thumbBox.style.top = '-2000px';
 },
 
 dotask : function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)
  tasktype = window.addEventListener? tasktype : 'on' + tasktype;
  if (target.addEventListener)
   target.addEventListener(tasktype, functionref, false);
  else if (target.attachEvent)
   target.attachEvent(tasktype, functionref);
 },
 
 init : function(){ //Initialize thumbnail viewer script by listening to the page for clicks on links with rel="thumbnail"
  if (!this.enableAnimation)
   this.opacitystring = '';
  var pagelinks = function(e){
   var t; e = e || window.event; t = e.target || e.srcElement;
   while(t.parentNode && t.nodeName && t.nodeName.toLowerCase() != 'a')
    t = t.parentNode;
   if (t.nodeName && t.nodeName.toLowerCase() == 'a' && t.rel && t.rel == 'thumbnail'){ //Begin if statement
    if (e.preventDefault) e.preventDefault();
    thumbnailviewer.stopanimation(); //Stop any currently running fade animation on "thumbbox" div before proceeding
    thumbnailviewer.loadimage(t); //Load image
    return false;
   } //end if statement
  return undefined;
  };
  this.dotask(document, pagelinks, 'click');
 //Reposition "thumbbox" div when page is resized
  this.dotask(window, function(){
   if (thumbnailviewer.thumbBox.style.visibility=='visible')
    thumbnailviewer.centerDiv(thumbnailviewer.thumbBox);},
    'resize');
 } //END init() function
 
};
 
thumbnailviewer.init();
thumbnailviewer.createthumbBox(); //Output HTML for the image thumbnail viewer