/*
	Lightbox JS: Fullsize Image Overlays 
	original version by Lokesh Dhakar - http://www.huddletogether.com
	
	edited by Brian Lowry - http://www.20spot.com
	-= Removed circular closures to reduce memory leaking in IE =-
	-= Added additional methods to support 20Spot.com =-
	-= Converted the code into an object by leveraging encapsulation =-
*/

addEvent(window, "load", initLightbox);

function initLightbox(){
    var lightbox = new Lightbox();
}

// Lightbox()
// Function runs on window load, going through link tags looking for rel="lightboxImage".
// These links receive onclick events that enable the lightbox display for their targets.
// The function also inserts html markup at the top of the page which will be used as a
// container for the overlay pattern and the inline image.
//
// The cleanup methods will properly dispose of circular references. They are local to their containing method.

function Lightbox(){
	var anchors = document.getElementsByTagName("a");
	var anchor;
	var selects = document.getElementsByTagName("select");
    var objBody = document.getElementsByTagName("body").item(0);
    var objOverlay = document.createElement("div");
    var arrayPageSize = GetPageSize();
    var arrayPageScroll = GetPageScroll();
    var imgPreloader = new Image();
    var objLightbox = document.createElement("div");
    var objLink = document.createElement("a");
    var imgPreloadCloseButton = new Image();
    var objImage = document.createElement("img");
    var objCaption = document.createElement("div");
    var objKeyboardMsg = document.createElement("div");
    var objLightboxDetails = document.createElement("div");
    var objCloseButtonLink = document.createElement("a");
	var objCloseButton = document.createElement("img");
	var objLoadingImageLink = document.createElement("a");
	var objLoadingImage = document.createElement("img");
	var loadingImage = 'http://localhost:92/components/images/lightbox/loading.gif';		
    var closeButton = 'http://localhost:92/components/images/lightbox/closelabel.gif';	
	
	if (!document.getElementsByTagName){ return; }

	for (var i=0; i<anchors.length; i++){
		anchor = anchors[i];

		if (anchor.getAttribute("href") && (anchor.getAttribute("rel") == "lightboxImage")){
		    //addEvent(anchor,"click",ShowLightbox);
			anchor.onclick = function () {ShowLightbox(this); return false;}
		}
	}

	// the rest of this code inserts html at the top of the page that looks like this:
	//
	// <div id="overlay">
	//		<a href="#" onclick="HideLightbox(); return false;"><img id="loadingImage" /></a>
	//	</div>
	// <div id="lightbox">
	//		<a href="#" onclick="HideLightbox(); return false;" title="Click anywhere to close image">
	//			<img id="closeButton" />		
	//			<img id="lightboxImage" />
	//		</a>
	//		<div id="lightboxDetails">
	//			<div id="lightboxCaption"></div>
	//			<div id="keyboardMsg"></div>
	//		</div>
	// </div>
	
	// create overlay div and hardcode some functional styles (aesthetic styles are in CSS file)
	objOverlay.setAttribute('id','overlay');
	addEvent(objOverlay,"click",HideLightbox);
	objOverlay.style.display = 'none';
	objOverlay.style.position = 'absolute';
	objOverlay.style.top = '0';
	objOverlay.style.left = '0';
	objOverlay.style.zIndex = '90';
 	objOverlay.style.width = '100%';
	objBody.insertBefore(objOverlay, objBody.firstChild);
	
	// create loading image and loading image link
	objLoadingImageLink.setAttribute('href','#');
	addEvent(objLoadingImageLink,"click",HideLightbox);
	objOverlay.appendChild(objLoadingImageLink);

	objLoadingImage.src = loadingImage;
	objLoadingImage.setAttribute('id','loadingImage');
	objLoadingImage.style.position = 'absolute';
	objLoadingImage.style.zIndex = '150';
	objLoadingImageLink.appendChild(objLoadingImage);

	// create lightbox div, same note about styles as above
	objLightbox.setAttribute('id','lightbox');
	objLightbox.style.display = 'none';
	objLightbox.style.position = 'absolute';
	objLightbox.style.zIndex = '100';	
	objBody.insertBefore(objLightbox, objOverlay.nextSibling);
	
	// create link
	objLink.setAttribute('href','#');
	objLink.setAttribute('id','lightboxCloseLink');
	objLink.setAttribute('title','Click to close');
	addEvent(objLink,"click",HideLightbox);
	objLightbox.appendChild(objLink);

	// create close button image and close button link
    objCloseButtonLink.setAttribute('href','#');
    objCloseButtonLink.setAttribute('title','Click to close');
    addEvent(objCloseButtonLink,"click",HideLightbox);
    objLightbox.appendChild(objCloseButtonLink);
    
	objCloseButton.src = closeButton;
	objCloseButton.style.border = '0';
	objCloseButton.setAttribute('id','closeButton');
	objCloseButton.style.position = 'absolute';
	objCloseButton.style.zIndex = '200';
	objCloseButtonLink.appendChild(objCloseButton);

	// create image
	objImage.setAttribute('id','lightboxImage');
	objLink.appendChild(objImage);
		
	// create details div, a container for the caption and keyboard message
	objLightboxDetails.setAttribute('id','lightboxDetails');
	objLightbox.appendChild(objLightboxDetails);

	// create caption
	objCaption.setAttribute('id','lightboxCaption');
	objCaption.style.display = 'none';
	objLightboxDetails.appendChild(objCaption);

	// create keyboard message
	objKeyboardMsg.setAttribute('id','keyboardMsg');
	objLightboxDetails.appendChild(objKeyboardMsg);	
	
	// ShowLightbox function
	function ShowLightbox(objLink){
	    var objOverlay = $('overlay');
        var objLightbox = $('lightbox');
        var objCaption = $('lightboxCaption');
        var objImage = $('lightboxImage');
        var objLoadingImage = $('loadingImage');
        var objLightboxDetails = $('lightboxDetails');
        var objLightboxCloseLink = $('lightboxCloseLink');
        var arrayPageSize = GetPageSize();
        var arrayPageScroll = GetPageScroll();
        var imgPreload = new Image();
        var lightboxTop;
        var lightboxLeft;
        
        var bod = document.getElementsByTagName('body')[0];
        bod.style.overflow = 'hidden';

        var htm = document.getElementsByTagName('html')[0];
        htm.style.overflow = 'hidden';

	    objImage.style.display = 'block';
	    objLightboxCloseLink.setAttribute('href','#');
	    objLightboxCloseLink.onclick = function () {HideLightbox(); return false;}

	    // center loadingImage if it exists
	    if (objLoadingImage){
		    objLoadingImage.style.top = (arrayPageScroll[1] + ((arrayPageSize[3] - 35 - objLoadingImage.height) / 2) + 'px');
		    objLoadingImage.style.left = (((arrayPageSize[0] - 20 - objLoadingImage.width) / 2) + 'px');
		    objLoadingImage.style.display = 'block';
	    }

	    // set height of lightbox overlay to take up whole page
	    objOverlay.style.height = (arrayPageSize[1] + 'px');
	    objOverlay.style.display = 'block';
	    objOverlay.style.top = arrayPageScroll[1];

	    // preload image
	        imgPreload.onload = function(){with(this){
		    objImage.src = objLink.href;

		    // center lightbox and make sure that the top and left values are not negative
		    lightboxTop = arrayPageScroll[1] + ((arrayPageSize[3] - 35 - imgPreload.height) / 2);
		    lightboxLeft = ((arrayPageSize[0] - 20 - imgPreload.width) / 2);
    		
		    objLightbox.style.top = (lightboxTop < 0) ? "0px" : lightboxTop + "px";
		    objLightbox.style.left = (lightboxLeft < 0) ? "0px" : lightboxLeft + "px";

		    objLightboxDetails.style.width = imgPreload.width + 'px';
    		
		    if(objLink.getAttribute('title')){
			    objCaption.style.display = 'block';
			    objCaption.innerHTML = objLink.getAttribute('title');
		    }else{
			    objCaption.style.display = 'none';
		    }
    		
		    // A small Pause between the image loading and displaying is required with IE,
		    // this prevents the previous image displaying for a short burst causing flicker.
		    // -= Does this even work? =
		    //if (navigator.appVersion.indexOf("MSIE")!=-1){
			//    Pause(250);
		    //} 

		    if (objLoadingImage) {	objLoadingImage.style.display = 'none'; }

		    // Hide select boxes as they will 'peek' through the image in IE
		    selects = document.getElementsByTagName("select");
            for (i = 0; i != selects.length; i++) {
                    selects[i].style.visibility = "hidden";
            }

		    objLightbox.style.display = 'block';

		    // After image is loaded, update the overlay height as the new image might have
		    // increased the overall page height.
		    arrayPageSize = GetPageSize();
		    objOverlay.style.height = (arrayPageSize[1] + 'px');
    		
            function CleanupLightbox(){with(this){
                objOverlay = null;
	            objLightbox = null;
	            objCaption = null;
	            objImage = null;
	            objLoadingImage = null;
	            objLightboxDetails = null;
	            objLightboxCloseLink = null;
	            arrayPageSize = null;
                arrayPageScroll = null;
                imgPreload = null;
                lightboxTop = null;
                lightboxLeft = null;
                selects = null;
                document.onkeypress = null;
                removeEvent(window,"unload",CleanupLightbox);
            }}

		    addEvent(window,"unload",CleanupLightbox);
	    }}

	    imgPreload.src = objLink.href;
    }

	function HideLightbox()
    {
        var bod = document.getElementsByTagName('body')[0];
        bod.style.overflow = 'auto';

        var htm = document.getElementsByTagName('html')[0];
        htm.style.overflow = 'auto';
	    
	    objOverlay.style.display = 'none';
	    objLightbox.style.display = 'none';

        for (i = 0; i != selects.length; i++) {
		    selects[i].style.visibility = "visible";
	    }
    }
    
    this.ShowLoadingProgress = function(){
        var objBody = document.getElementsByTagName("body").item(0);
	    var objOverlay = document.createElement("div");
	    var objLoadingDiv = document.createElement("div");
	    var objLoadingText = document.createElement("span");
	    var objLoadingImage = document.createElement("img");

	    objOverlay.setAttribute('id','overlay');
	    objOverlay.style.display = 'block';
	    objOverlay.style.position = 'absolute';
	    objOverlay.style.top = '0';
	    objOverlay.style.left = '0';
	    objOverlay.style.zIndex = '90';
 	    objOverlay.style.width = '100%';
	    objBody.insertBefore(objOverlay, objBody.firstChild);
    	
	    objLoadingDiv.style.zIndex = '150';
	    objLoadingDiv.style.width = '400px';
	    objLoadingDiv.style.height = '100px';
	    objLoadingDiv.style.position = 'absolute';
	    objLoadingDiv.style.fontFamily = 'Georgia, Arial, Sans-Serif';
	    objLoadingDiv.style.fontSize = '2em';
	    objLoadingDiv.style.fontWeight = 'bold';
	    objLoadingDiv.style.color = '#ccc';
	    objLoadingDiv.style.textAlign = '';
	    objLoadingDiv.innerHTML = 'Uploading Image<br/>';
	    objOverlay.appendChild(objLoadingDiv);
    	
	    objLoadingImage.src = loadingImage;
	    objLoadingImage.setAttribute('id','loadingImage');
	    objLoadingImage.style.margin = '0.5em 0';
	    objLoadingImage.style.display = 'block';
	    objLoadingImage.style.zIndex = '150';
	    objLoadingDiv.appendChild(objLoadingImage);	
    	
	    objLoadingText.style.zIndex = '150';
	    objLoadingText.style.fontFamily = 'Arial, Sans-Serif';
	    objLoadingText.style.fontSize = '0.6em';
	    objLoadingText.style.fontWeight = 'bold';
	    objLoadingText.style.color = '#ccc';
	    objLoadingText.style.textAlign = '';
	    objLoadingText.innerHTML = '<em>Please be patient as we prepare your photo...</em>';
	    objLoadingDiv.appendChild(objLoadingText);
    				
	    objLoadingDiv.style.top = (arrayPageScroll[1] + ((arrayPageSize[3] - 150 - objLoadingDiv.offsetHeight) / 2) + 'px');
	    objLoadingDiv.style.left = (((arrayPageSize[0] + 50 - objLoadingDiv.offsetWidth) / 2) + 'px');
	    objLoadingDiv.style.display = 'block';

	    objOverlay.style.height = (arrayPageSize[1] + 'px');
    	
	    function Cleanup(){with(this){
	        objBody = null;
	        objOverlay = null;
	        objLoadingDiv = null;
	        objLoadingText = null;
	        objLoadingImage = null;
	        removeEvent(window,"unload",Cleanup);
	    }}
	    addEvent(window,"unload",Cleanup);
    }
    
    function GetPageScroll(){
	    var yScroll;

	    if (self.pageYOffset){
		    yScroll = self.pageYOffset;
	    }else if (document.documentElement && document.documentElement.scrollTop){	 // Explorer 6 Strict
		    yScroll = document.documentElement.scrollTop;
	    }else if (document.body) {// all other Explorers
		    yScroll = document.body.scrollTop;
	    }

	    arrayPageScroll = new Array('',yScroll) 

	    function Cleanup(){with(this){
	        yScroll = null;
	        removeEvent(window,"unload",Cleanup);
	    }}
	    
	    addEvent(window,"unload",Cleanup);
	    return arrayPageScroll;
    }

    // GetPageSize()
    // Returns array with page width, height and window width, height

    function GetPageSize(){
	    var xScroll, yScroll;
	    var windowWidth, windowHeight;
    	
	    if (window.innerHeight && window.scrollMaxY) {	
		    xScroll = document.body.scrollWidth;
		    yScroll = window.innerHeight + window.scrollMaxY;
	    }else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
		    xScroll = document.body.scrollWidth;
		    yScroll = document.body.scrollHeight;
	    }else{ // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
		    xScroll = document.body.offsetWidth;
		    yScroll = document.body.offsetHeight;
	    }
    	
	    if (self.innerHeight) {	// all except Explorer
		    windowWidth = self.innerWidth;
		    windowHeight = self.innerHeight;
	    }else if (document.documentElement && document.documentElement.clientHeight){ // Explorer 6 Strict Mode
		    windowWidth = document.documentElement.clientWidth;
		    windowHeight = document.documentElement.clientHeight;
	    }else if (document.body){ // other Explorers
		    windowWidth = document.body.clientWidth;
		    windowHeight = document.body.clientHeight;
	    }	
    	
	    // for small pages with total height less then height of the viewport
	    if(yScroll < windowHeight){
		    pageHeight = windowHeight;
	    }else{ 
		    pageHeight = yScroll;
	    }

	    // for small pages with total width less then width of the viewport
	    if(xScroll < windowWidth){	
		    pageWidth = windowWidth;
	    }else{
		    pageWidth = xScroll;
	    }

	    arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight);
	    
	    function Cleanup(){with(this){
	        xScroll = null;
	        yScroll = null;
	        windowWidth = null;
	        windowHeight = null;
	        removeEvent(window,"unload",Cleanup);
	    }}
	    addEvent(window,"unload",Cleanup);
	    
	    return arrayPageSize;
    }
    
    function Pause(numberMilliseconds){
	    var now = new Date();
	    var exitTime = now.getTime() + numberMilliseconds;
	    while (true) {
		    now = new Date();
		    if (now.getTime() > exitTime)
			    return;
	    }
    }

	function Cleanup(){with (this){
		removeEvent(objOverlay,"click",HideLightbox);
		removeEvent(objLoadingImageLink,"click",HideLightbox);
		removeEvent(objLink,"click",HideLightbox);
	    removeEvent(objCloseButtonLink,"click",HideLightbox);
	    anchors = null;
	    anchor = null;
        objBody = null;
        objOverlay = null;
        arrayPageSize = null;
        arrayPageScroll = null;
        imgPreloader = null;
        objLightbox = null;
        objLink = null;
        imgPreloadCloseButton = null;
        objImage = null;
        objCaption = null;
        objKeyboardMsg = null;
        objLightboxDetails = null;
        objCloseButtonLink = null;
        objCloseButton = null;
        objLoadingImageLink = null;
        objLoadingImage = null;
        removeEvent(window,"unload",Cleanup);
	}}
	
	addEvent(window,"unload",Cleanup);
}

if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();