// -----------------------------------------------------------------------------------
//
//	HtmlLightbox v1.0
//  by Benoit Journaud
//
//  based on Lightbox
//	by Lokesh Dhakar - http://www.huddletogether.com
//
//	Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
//
//  this script is a add-on of Lightbox. You needs to link Lightbox script in your HTML page
//
// -----------------------------------------------------------------------------------
/*

	Table of Contents
	-----------------
	Configuration
	Global Variables

	Extending Built-in Objects	
	- Object.extend(Element)
	- Array.prototype.removeDuplicates()
	- Array.prototype.empty()

	Lightbox Class Declaration
	- initialize()
	- updateImageList()
	- start()
	- changeImage()
	- resizeImageContainer()
	- showImage()
	- updateDetails()
	- updateNav()
	- enableKeyboardNav()
	- disableKeyboardNav()
	- keyboardAction()
	- preloadNeighborImages()
	- end()
	
	Function Calls
	- addLoadEvent(initLightbox)
	
*/
// -----------------------------------------------------------------------------------


// -----------------------------------------------------------------------------------

//
//	HTMLLightbox Class Declaration
//	- initialize()
//	- start()
//	- changeImage()
//	- resizeImageContainer()
//	- showImage()
//	- updateDetails()
//	- updateNav()
//	- enableKeyboardNav()
//	- disableKeyboardNav()
//	- keyboardNavAction()
//	- preloadNeighborImages()
//	- end()
//
//	Structuring of code inspired by Scott Upton (http://www.uptonic.com/)
//
//


//  Configurationl
//
HTMLLightboxOptions = Object.extend({
    fileLoadingImage:        'images/loading.gif',     
    overlayOpacity: 0.8,   // controls transparency of shadow overlay

    animate: true,         // toggles resizing animations
    resizeSpeed: 7,        // controls the speed of the image resizing animations (1=slowest and 10=fastest)

    borderSize: 10,         //if you adjust the padding in the CSS, you will need to update this variable

	overlayDuration: 0.3

}, window.HTMLLightboxOptions || {});

var HTMLLightbox = Class.create();
HTMLLightbox.prototype = {
	
	// initialize()
	// Constructor runs on completion of the DOM loading. Calls updateImageList and then
	// the function inserts html at the bottom of the page which is used to display the shadow 
	// overlay and the image container.
	//
	initialize: function() {	
		//	<div id="HTMLoverlay"></div>
		//  <div id="HTMLlightbox">
  		//    <div id="outerHTMLContainer">
		//       <div id="HTMLcontainer"></div>
		//		 <div id="HTMLloading">
		//		    <a href="#" id="HTMLloadingLink">
		//			<img src="images/loading.gif">
		//			</a>
		//		</div>
		//    </div>
		//  </div>
		
		var objBody = document.getElementsByTagName("body").item(0);
		
		var objOverlay = document.createElement("div");
		objOverlay.setAttribute('id','HTMLoverlay');
		objOverlay.style.display = 'none';
		objOverlay.onclick = function() { myHTMLLightbox.end(); }
		objBody.appendChild(objOverlay);
		
		var objHTMLLightbox = document.createElement("div");
		objHTMLLightbox.setAttribute('id','HTMLlightbox');
		objHTMLLightbox.style.display = 'none';
		objHTMLLightbox.onclick = function(e) {	// close Lightbox is user clicks shadow overlay
			if (!e) var e = window.event;
			var clickObj = Event.element(e).id;
			if ( clickObj == 'HTMLlightbox') {
				myHTMLLightbox.end();
			}
		};
		objBody.appendChild(objHTMLLightbox);
			
		var objOuterHTMLContainer = document.createElement("div");
		objOuterHTMLContainer.setAttribute('id','outerHTMLContainer');
		objHTMLLightbox.appendChild(objOuterHTMLContainer);

		Element.setWidth('outerHTMLContainer', 250);
		Element.setHeight('outerHTMLContainer', 250);			

		var objHTMLContainer = document.createElement("div");
		objHTMLContainer.setAttribute('id','HTMLcontainer');
		objOuterHTMLContainer.appendChild(objHTMLContainer);
		
		var objHTMLloading = document.createElement("div");
    	objHTMLloading.setAttribute('id','HTMLloading');
		objOuterHTMLContainer.appendChild(objHTMLloading);
		
		var objLoadingLink = document.createElement("a");
		objLoadingLink.setAttribute('id','HTMLloadingLink');
		objLoadingLink.setAttribute('href','#');
		objLoadingLink.onclick = function() { myHTMLLightbox.end(); return false; }
		objHTMLloading.appendChild(objLoadingLink);
		
		var objLoadingImage = document.createElement("img");
		objLoadingImage.setAttribute('src', 'images/loading.gif');
		objLoadingLink.appendChild(objLoadingImage);
	
	},
	
	show: function(url, sizeX, sizeY) {	
		
        $$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'hidden' });
		// stretch overlay to fill page and fade in
		var arrayPageSize = this.getPageSize();
		$('HTMLoverlay').setStyle({ width: arrayPageSize[0] + 'px', height: arrayPageSize[1] + 'px' });
        new Effect.Appear('HTMLoverlay', { duration: HTMLLightboxOptions.overlayDuration, from: 0.0, to: HTMLLightboxOptions.overlayOpacity });


		// calculate top and left offset for the lightbox 
        var arrayPageScroll = document.viewport.getScrollOffsets();
        var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 3);
        var lightboxLeft = arrayPageScroll[0];
        $('HTMLlightbox').setStyle({ top: lightboxTop + 'px', left: lightboxLeft + 'px' })
		Element.show('HTMLlightbox');
		this.loadUrl(url, sizeX, sizeY);
	
	},
	
	//
	//	
	//	Hide most elements and preload image in preparation for resizing image container.
	//
	loadUrl: function(url, sizeX, sizeY) {	
		
		// hide elements during transition
		if(HTMLLightboxOptions.animate){
			Element.show('HTMLloading');
		}
		$('HTMLcontainer').innerHTML='';
		Element.hide('HTMLcontainer');

		// We resize the container during the loading
		
	    new Ajax.Updater($('HTMLcontainer'),url,
						   {
							   evalScripts : true,
							   onFailure : function (trs) { alert(trs)} ,
							   onLoading : function(trs){myHTMLLightbox.resizeHTMLContainer(sizeX,sizeY)} });	

	},
	//
	//	resizeImageContainer()
	//
	resizeHTMLContainer: function( divWidth, divHeight) {
		// get new width and height
		var widthNew = (divWidth  + (HTMLLightboxOptions.borderSize * 2));
		var heightNew = (divHeight  + (HTMLLightboxOptions.borderSize * 2));
		

		// scalars based on change from old to new
		this.xScale = ( widthNew / this.widthCurrent) * 100;
		this.yScale = ( heightNew / this.heightCurrent) * 100;

		$('outerHTMLContainer').setStyle({ width: widthNew + 'px', height: heightNew + 'px' });	
		$('HTMLcontainer').setStyle({ width: widthNew + 'px'});

		this.showUrl();
		
	},
	//
	//	showImage()
	//	Display image and begin preloading neighbors.
	//
	showUrl: function(){
		Element.hide('HTMLloading');
		Element.show('HTMLcontainer');
		new Effect.SlideDown('HTMLcontainer');
	},
		//
	//	end()
	//
	end: function() {
		//this.disableKeyboardNav();
		Element.hide('HTMLlightbox');
		new Effect.Fade('HTMLoverlay', { duration: HTMLLightboxOptions.overlayDuration});
		$$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'visible' });
	},

	 //
    //  getPageSize()
    //
    getPageSize: function() {
	        
	     var xScroll, yScroll;
		
		if (window.innerHeight && window.scrollMaxY) {	
			xScroll = window.innerWidth + window.scrollMaxX;
			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;
		}
		
		var windowWidth, windowHeight;
		
		if (self.innerHeight) {	// all except Explorer
			if(document.documentElement.clientWidth){
				windowWidth = document.documentElement.clientWidth; 
			} else {
				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 = xScroll;		
		} else {
			pageWidth = windowWidth;
		}

		return [pageWidth,pageHeight];
	}
}

function initHTMLLightbox() { myHTMLLightbox = new HTMLLightbox(); }
Event.observe(window, 'load', initHTMLLightbox, false);