// -------------------------------------------------------------------
// Image Thumbnail Viewer Script- By Dynamic Drive, available at: http://www.dynamicdrive.com
// Last updated: Jan 22nd, 2007
// -------------------------------------------------------------------

var vwr={
enableTitle: true, //Should "title" attribute of link be used as description?
enableAnimation: true, //Enable fading animation?
definefooter: '<div class="footerbar">CLICK TO CLOSE</div>', //Define HTML for footer interface
defineLoading: '<img src="/i/loading.gif" /> LOADING... ', //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',
targetlinks:[], //Array to hold links with rel="thumbnail"

createthbox:function(){
//write out HTML for Image Thumbnail Viewer plus loading div
document.write('<div id="thbox" onClick="vwr.closeit()">'+this.definefooter+'<div id="thimg"></div></div>');
document.write('<div id="thld">'+this.defineLoading+'</div>');
this.thbox=document.getElementById("thbox");
this.thimg=document.getElementById("thimg"); //Reference div that holds the shown image
this.thld=document.getElementById("thld"); //Reference "loading" div that will be shown while image is fetched
this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body; //create reference to common "body" across doctypes
},


centerDiv:function(divobj, is_lg_img){ //Centers a div element on the page

	if (is_lg_img == 1) {
		var caption = document.getElementById("caption");
		if (caption) {	
			var i = divobj.getElementsByTagName("img")[0];
			caption.style.width = (i.width) + "px";
		}
	}
	
var ie=document.all && !window.opera;
var dom=document.getElementById;
var scroll_top=(ie)? this.standardbody.scrollTop : window.pageYOffset;
var scroll_left=(ie)? this.standardbody.scrollLeft : window.pageXOffset;
var docwidth=(ie)? this.standardbody.clientWidth : window.innerWidth-this.scrollbarwidth;
var docheight=(ie)? this.standardbody.clientHeight: window.innerHeight;
var docheightcomplete=(this.standardbody.offsetHeight>this.standardbody.scrollHeight)? this.standardbody.offsetHeight : this.standardbody.scrollHeight; //Full scroll height of document
var objwidth=divobj.offsetWidth; //width of div element
var objheight=divobj.offsetHeight; //height of div element
var topposition=(docheight>objheight)? scroll_top+docheight/2-objheight/2+"px" : scroll_top+10+"px"; //Vertical position of div element: Either centered, or if element height larger than viewpoint height, 10px from top of viewpoint
divobj.style.left=docwidth/2-objwidth/2+"px"; //Center div element horizontally
divobj.style.top=Math.floor(parseInt(topposition))+"px";

divobj.style.visibility="visible";
},

showthbox:function(){ //Show thbox div
this.centerDiv(this.thbox, 1);
if (this.enableAnimation){ //If fading animation enabled
this.curopac=0.1; //Starting opacity value
this.opacitytimer=setInterval(function() {vwr.opacityanimation();}, 20);
}
},


loadimage:function(link){ //Load image function that gets attached to each link on the page with rel="thumbnail"
if (this.thbox.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.firstChild.getAttribute("title")) //Use title attr of the link as description?
{
	imageHTML+='<div id="caption"><div>'+link.firstChild.getAttribute("title")+'</div></div>';
}



this.centerDiv(this.thld, 0); //Center and display "loading" div while we set up the image to be shown
this.thimg.innerHTML=imageHTML; //Populate thimg div with shown image's HTML (while still hidden)
this.ftrimg=this.thimg.getElementsByTagName("img")[0]; //Reference shown image itself
this.ftrimg.onload=function(){ //When target image has completely loaded
vwr.thld.style.visibility="hidden"; //Hide "loading" div
vwr.showthbox(); //Display "thbox" 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.ftrimg.src=link.getAttribute("href");
}
this.ftrimg.onerror=function(){ //If an error has occurred while loading the image to show
vwr.thld.style.visibility="hidden"; //Hide "loading" div, game over
};
},

setimgopacity:function(value){ //Sets the opacity of "thimg" div per the passed in value setting (0 to 1 and in between)
var targobj=this.ftrimg;
if (targobj.filters && targobj.filters[0]){ //IE syntax
	if (typeof targobj.filters[0].opacity=="number") {//IE6
targobj.filters[0].opacity=value*100;
	}
	else {//IE 5.5
targobj.style.filter="alpha(opacity="+value*100+")";
	}
}
else if (typeof targobj.style.MozOpacity!="undefined") {//Old Mozilla syntax
targobj.style.MozOpacity=value;
}
else if (typeof targobj.style.opacity!="undefined") { //Standard opacity syntax
targobj.style.opacity=value;
}
else {//Non of the above, stop opacity animation
this.stopanimation();
}
},

opacityanimation:function(){ //Gradually increase opacity function
this.setimgopacity(this.curopac);
this.curopac+=0.1;
if (this.curopac>1) {
this.stopanimation();
}
},

stopanimation:function(){
	if (typeof this.opacitytimer!="undefined") {
clearInterval(this.opacitytimer);
	}
},


closeit:function(){ //Close "thbox" div function
this.stopanimation();
this.thbox.style.visibility="hidden";
this.thimg.innerHTML="";
this.thbox.style.left="-2000px";
this.thbox.style.top="-2000px";
},

cleanup:function(){ //Clean up routine on page unload
this.thld=null;
if (this.ftrimg) {
	this.ftrimg.onload=null;
}
this.ftrimg=null;
this.thimg=null;
for (var i=0; i<this.targetlinks.length; i++) {
this.targetlinks[i].onclick=null;
}
this.thbox=null;
},

dotask:function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)
var ttype= (window.addEventListener)? tasktype : "on"+tasktype;

if (target.addEventListener) {
target.addEventListener(ttype, functionref, false);
}
else if (target.attachEvent) {
target.attachEvent(ttype, functionref);
}
},

init:function(){ //Initialize thumbnail viewer script by scanning page and attaching appropriate function to links with rel="thumbnail"
	if (!this.enableAnimation) {
this.opacitystring="";
	}
var pagelinks=document.getElementsByTagName("a");
for (var i=0; i<pagelinks.length; i++) { //BEGIN FOR LOOP
if (pagelinks[i].getAttribute("rel") && pagelinks[i].getAttribute("rel")=="thumbnail") { //Begin if statement
pagelinks[i].onclick=function() {
vwr.stopanimation(); //Stop any currently running fade animation on "thbox" div before proceeding
vwr.loadimage(this); //Load image
return false;
};
this.targetlinks[this.targetlinks.length]=pagelinks[i]; //store reference to target link
} //end if statement
} //END FOR LOOP
//Reposition "thbox" div when page is resized
this.dotask( window, function() { if (vwr.thbox.style.visibility=="visible") {vwr.centerDiv(vwr.thbox, 1);}}, "resize");

} //END init() function

};

vwr.createthbox(); //Output HTML for the image thumbnail viewer
vwr.dotask(window, function(){vwr.init();}, "load"); //Initialize script on page load
vwr.dotask(window, function(){vwr.cleanup();}, "unload");
// ********************************