/*
	Multifaceted Lightbox
	by Greg Neustaetter - http://www.gregphoto.net

	INSPIRED BY (AND CODE TAKEN FROM)
	==================================
	The Lightbox Effect without Lightbox
	PJ Hyett
	http://pjhyett.com/articles/2006/02/09/the-lightbox-effect-without-lightbox


	Lightbox JS: Fullsize Image Overlays
	by Lokesh Dhakar - http://www.huddletogether.com

	For more information on this script, visit:
	http://huddletogether.com/projects/lightbox/

	Licensend under:
	Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
	(basically, do anything you want, just leave my name and link)

*/

var Lightbox = {
	lightboxType : null,
	lightboxCurrentContentID : null,

	showBoxString : function(content, boxWidth, boxHeight){
		this.setLightboxDimensions(boxWidth, boxHeight);
		this.lightboxType = 'string';
		var contents = $('lightboxContents');
		contents.innerHTML = content;
		this.showBox();
		return false;
	},


	showBoxImage : function(href) {
		this.lightboxType = 'image';
		this.init();
		var contents = $('lightboxContents');
		var objImage = document.createElement("img");
		objImage.setAttribute('id','lightboxImage');
		contents.appendChild(objImage);
		imgPreload = new Image();
		imgPreload.onload=function(){
			objImage.src = href;
			Lightbox.showBox();
		}
		imgPreload.src = href;
		return false;
	},

	showBoxByID : function(id, boxWidth, boxHeight)
	{
		this.lightboxType = 'id';
		this.init();
		this.lightboxCurrentContentID = id;
		this.setLightboxDimensions(boxWidth, boxHeight);
		var element = $(id);
		this.lightboxParent = element.parentNode;
		var contents = $('lightboxContents');
		contents.appendChild(element);
		Element.show(id);
		this.showBox();
		return false;
	},

	showBoxByAJAX : function(href, boxWidth, boxHeight) {
		this.lightboxType = 'ajax';
		this.init();
		this.setLightboxDimensions(boxWidth, boxHeight);
		var contents = $('lightboxContents');
		var myAjax = new Ajax.Updater(contents, href, {method: 'get'});

		//get all the links to photos on the page with the lightbox class
		var photoHrefs = document.getElementsByClassName('lightbox');
		if(photoHrefs.length > 1)
		{
			//get the href we are looking at:
			var currentHref = 0;
			for(var i=0; i<photoHrefs.length; i++) {
				if(photoHrefs[i] == href)
					currentHref = i;
			}
			var prevHref = currentHref>0 ? currentHref-1 : photoHrefs.length-1;
			var nextHref = currentHref+1<photoHrefs.length ? currentHref+1 : 0;
			var navigationText = '<span id="prev" onClick="Lightbox.hideBox(); Lightbox.showBoxByAJAX(\'';
			navigationText += photoHrefs[prevHref]+ '\','+boxWidth+','+boxHeight+');">Prev </span>';
			navigationText += '<span id="next" onClick="Lightbox.hideBox(); Lightbox.showBoxByAJAX(\'';
			navigationText += photoHrefs[nextHref]+ '\','+boxWidth+','+boxHeight+');">Next</span>';
			Element.update('lightboxNav',navigationText);
		}
		
		//show a waiting gif until the ajax replaces the main content
		var waitingText = '<p><img src="/common/graphics/spinner.gif" alt="Waiting for page load" /> Loading, please wait.</p>';
		Element.update('lightboxContents', waitingText);
		
		this.showBox();
		return false;
	},

	setLightboxDimensions : function(width, height) {
		var windowSize = this.getPageDimensions();
		if(width) {
			if(width < windowSize[0]) {
				$('lightbox').style.width = width + 'px';
			} else {
				$('lightbox').style.width = (windowSize[0] - 50) + 'px';
			}
		}
		if(height) {
			if(height < windowSize[1]) {
				$('lightbox').style.height = height + 'px';
			} else {
				$('lightbox').style.height = (windowSize[1] - 50) + 'px';
			}
		}
	},


	showBox : function() {
		Element.show('overlay');
		this.center('lightbox');//center function shows the element
		return false;
	},


	hideBox : function()
	{
		var contents = $('lightboxContents');
		if(this.lightboxType == 'id')
		{
			var myparent = this.lightboxParent;
			Element.hide(this.lightboxCurrentContentID);
			myparent.appendChild($(this.lightboxCurrentContentID));
		}
		contents.innerHTML = '';
		$('lightbox').style.width = null;
		$('lightbox').style.height = null;
		Element.hide('lightbox');
		Element.hide('overlay');
		return false;
	},

	// taken from lightbox js, modified argument return order
	getPageDimensions : function(){
		var xScroll, yScroll;

		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;
		}

		var windowWidth, windowHeight;
		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(windowWidth,windowHeight,pageWidth,pageHeight)
		return arrayPageSize;
	},

	center : function(element){
		try{
			element = document.getElementById(element);
		}catch(e){
			return;
		}
		var windowSize = this.getPageDimensions();
		var window_width  = windowSize[0];
		var window_height = windowSize[1];

		$('overlay').style.height = windowSize[3] + 'px';

		var scrollY = 0;

		//get the scroll place of the window based on which browser they are using
		if ( document.documentElement && document.documentElement.scrollTop ){
			scrollY = document.documentElement.scrollTop;
		}else if ( document.body && document.body.scrollTop ){
			scrollY = document.body.scrollTop;
		}else if ( window.pageYOffset ){
			scrollY = window.pageYOffset;
		}else if ( window.scrollY ){
			scrollY = window.scrollY;
		}

		//get the x and y offset to possition based on the size of the page.
		//this would be awsome, except it doesn't work with dynamic content.
		//we don't want to manually specify the deminsions of the lightbox.
		// var elementDimensions = Element.getDimensions(element);
		// var setX = ( window_width  - elementDimensions.width  ) / 2;
		// var setY = ( window_height - elementDimensions.height ) / 2 + scrollY;

		//instead just size to be 20% of the page over and 10% down
		var setX = ( window_width ) / 5;
		var setY = ( window_height ) / 10 + scrollY;

		//don't allow negative values
		setX = ( setX < 0 ) ? 0 : setX;
		setY = ( setY < 0 ) ? 0 : setY;

		//set the position for the box to center
		element.style.position = 'absolute';
		element.style.left = setX + "px";
		element.style.top  = setY + "px";
		Element.show(element);
	},

	init : function() {
		var lightboxtext = '<div id="overlay" style="display:none" onClick="Lightbox.hideBox()" ></div>';
		lightboxtext += '<div id="lightbox" style="display:none">';
		lightboxtext += '<span id="close" onClick="Lightbox.hideBox()">Close<img src="/common/graphics/close.gif" alt="Close" title="Close this window" /></span>';
		lightboxtext += '<div id="lightboxNav"></div>';
		lightboxtext += '<div id="lightboxContents"></div>';
		lightboxtext += '</div>';
		var body = document.getElementsByTagName("body").item(0);
		new Insertion.Bottom(body, lightboxtext);
	}
}