/*********************************************************************************************************************
	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)
	
	USAGE:
	----------------------
	Pass a string:
	<a href="#" onclick="Lightbox.showBoxString('This content was passed to the lightbox as a string', 300, 200);return false;">String</a>	
	----------------------
	Image:
	<a href="../Scripts/images/05.jpg" onclick="Lightbox.showBoxImage(this.href);return false;">Image</a>
	----------------------
	Local Element
	<a href="#" onclick="Lightbox.showBoxByID('hiddenDiv', 350, 300);return false;">Local element</a>
	----------------------
	Ajax
	<a href="#" onclick="Lightbox.showBoxByAJAX('ajax_fragment.html', 150, 300);return false;">AJAX</a>
	----------------------
*********************************************************************************************************************/
var Lightbox = {
	lightboxType : null,
	lightboxCurrentContentID : null,
	
	showAlertBox : function(content, boxWidth, boxHeight){
		ContainerName = "AlertBoxContainer";
		this.setLightboxDimensions(boxWidth, boxHeight);
		this.lightboxType = 'string';
		var contents = $('AlertMessage');
		contents.innerHTML = content;
		this.showBox();
		return false;
	},
	
	showConfirmBox : function(content, boxWidth, boxHeight, form){
		ContainerName = "ConfirmBoxContainer";
		FormName = form;
		this.setLightboxDimensions(boxWidth, boxHeight);
		this.lightboxType = 'string';
		var contents = $('ConfirmMessage');
		contents.innerHTML = content;
		this.showBox();
		return false;
	},

showStatusBox : function(content){
		var content = (content == null) ? "Saving Data..Please Wait" : content;
		ContainerName = "StatusBoxContainer";
		var contents = $('AlertMessage2');
		contents.innerHTML = content;
		this.showBox('StatusBoxContainer'); 
		return false;
	},
	
//------------------------------------------------
	showBoxString : function(content, boxWidth, boxHeight){
		ContainerName = "box";
		this.setLightboxDimensions(boxWidth, boxHeight);
		this.lightboxType = 'string';
		var contents = $('boxContents');
		contents.innerHTML = content;
		this.showBox();
		return false;
	},


	showBoxImage : function(href) {
		this.lightboxType = 'image';
		ContainerName = "box";
		var contents = $('boxContents');
		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) {
		ContainerName = "box";
		this.lightboxType = 'id';
		this.lightboxCurrentContentID = id;
		this.setLightboxDimensions(boxWidth, boxHeight);
		var element = $(id);
		var contents = $('boxContents');
		contents.appendChild(element);
		Element.show(id);
		this.showBox();
		return false;
	},

	showBoxByAJAX : function(href, boxWidth, boxHeight) {
		ContainerName = "box";
		this.lightboxType = 'ajax';
		this.setLightboxDimensions(boxWidth, boxHeight);
		var contents = $('boxContents');
		var myAjax = new Ajax.Updater(contents, href, {evalScripts:true, method: 'get'});
		this.showBox();
		return false;
	},

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


	showBox : function(boxId) {
		var boxId = (boxId == null) ? ContainerName : boxId;
		//if( typeof(boxId) == 'undefined' ){boxId = "AlertBoxContainer";}
		new Effect.Appear('overlay', { duration: 0.2, from: 0.0, to: 0.8 });		
		this.center(boxId);
		return false;
	},
	
	
	hideBox : function(){
		var contents = $('AlertMessage');
		if(this.lightboxType == 'id') {
			var body = document.getElementsByTagName("body").item(0);
			Element.hide(this.lightboxCurrentContentID);
			body.appendChild($(this.lightboxCurrentContentID));
		}
		contents.innerHTML = '';
		$(ContainerName).style.width = null;
		$(ContainerName).style.height = null;
		new Effect.Fade(ContainerName, { duration: 0.2});
		Element.hide(ContainerName);
		new Effect.Fade('overlay', { duration: 0.5});
	},
	
	//Used by ajax post hook only!
	hideStatusBox : function(){
			new Effect.Fade('overlay', { duration: 0.2});
			new Effect.Fade('StatusBoxContainer', { duration: 0.2});

	},
	
	hideConfirmBox : function(status){
		var contents = $('ConfirmMessage');
		//If OK Was Clicked, and a form exists, submit the form
		if(status && FormName != null) {
			$(FormName).submit();
			new Effect.Fade(ContainerName, { duration: 0.2});
			Element.hide(ContainerName);
			this.showStatusBox() //Show status box
		}
		// IF OK was clicked, and no form exists, return true and let other function handle return 2007-05-27
		if(status) {
			new Effect.Fade(ContainerName, { duration: 0.2});
			new Effect.Fade('overlay', { duration: 0.5});
			return true;
		}
		//If cancel was clicked, hide the box.
		else {
			if(this.lightboxType == 'id') {
				var body = document.getElementsByTagName("body").item(0);
				Element.hide(this.lightboxCurrentContentID);
				body.appendChild($(this.lightboxCurrentContentID));
			}
			contents.innerHTML = '';
			$(ContainerName).style.width = null;
			$(ContainerName).style.height = null;
			//Element.hide('overlay');
			new Effect.Fade(ContainerName, { duration: 0.2});
			Element.hide(ContainerName);
			new Effect.Fade('overlay', { duration: 0.5});
		}
	},
	
	
	
	// 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';
		
		element.style.position = 'absolute';
		element.style.zIndex   = 99;
	
		var scrollY = 0;
	
		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;
		}
	
		var elementDimensions = Element.getDimensions(element);
		var setX = ( window_width  - elementDimensions.width  ) / 2;
		var setY = ( window_height - elementDimensions.height ) / 2 + scrollY;
	
		setX = ( setX < 0 ) ? 0 : setX;
		setY = ( setY < 0 ) ? 0 : setY;
	
		element.style.left = setX + "px";
		element.style.top  = setY + "px";
		//Element.show(element);
		new Effect.Appear(element, { duration: 0.2});
		setTimeout("$('OK_Close').focus()",100); //Sets focus on OK Button
		},
						

	
	init : function() {				  
		var lightboxtext = '<div id="overlay" style="display:none"></div>';
		lightboxtext += '<div id="AlertBoxContainer" style="display:none;">';
		lightboxtext += '<div id="AlertBox">';
		lightboxtext += '<table width="100%" border="0" cellspacing="4" cellpadding="3">'
		lightboxtext += '<tr>';
		lightboxtext += '<td width="15%"><div id="AlertIcon"><img src="/Layouts/Admin/Images/Icons/48/Caution_48.gif" alt="Error" align="left"/></div></td>';
		lightboxtext += '<td width="100%"><div id="AlertMessage"></div>';
		lightboxtext += '</td>';
		lightboxtext += '</tr>';
		lightboxtext += '</table>';
		lightboxtext += '<br /><div align="center"><input name="OK_Close" id="OK_Close" value="&nbsp;&nbsp;OK&nbsp;&nbsp;" type="button" onClick="Lightbox.hideBox()" class="InputButton" /></div>'		
		lightboxtext += '</div>';
		lightboxtext += '</div>';
		
		var lightboxconfirm = '<div id="overlay" style="display:none"></div>';
		lightboxconfirm += '<div id="ConfirmBoxContainer" style="display:none;">';
		lightboxconfirm += '<div id="ConfirmBox">';
		lightboxconfirm += '<table width="100%" border="0" cellspacing="4" cellpadding="3">'
		lightboxconfirm += '<tr>';
		lightboxconfirm += '<td width="15%"><div id="AlertIcon"><img src="/Layouts/Admin/Images/Icons/48/Caution_48.gif" alt="Error" align="left"/></div></td>';
		lightboxconfirm += '<td width="100%"><div id="ConfirmMessage"></div>';
		lightboxconfirm += '</td>';
		lightboxconfirm += '</tr>';
		lightboxconfirm += '</table>';
		lightboxconfirm += '<br /><div align="center"><input name="OK_Close" id="OK_Close" value="OK" type="button" onClick="Lightbox.hideConfirmBox(true)" class="InputButton" /> <input name="Cancel" value="Cancel" type="button" onClick="Lightbox.hideConfirmBox(false)" class="InputButton" /></div>';		
		lightboxconfirm += '</div>';
		lightboxconfirm += '</div>';
		
		var statusbox = '<div id="StatusBoxContainer" style="display:none;z-index:5000;">';
		statusbox += '<div id="StatusBox" >';
		statusbox += '<div id="AlertMessage2">Saving Data. Please wait ... </div>';
		statusbox += '<br /><div align="center"><img src="/Images/Icons/Misc/Loading.gif" alt="Loading..." /></div>';
		statusbox += '<br /></div></div>';
		
		var lightboxtext2 = '<div id="overlay" style="display:none"></div>';
		lightboxtext2 += '<div id="box" style="display:none">';
		lightboxtext2 += '<img id="close" src="/Images/Icons/LightBox/Close.gif" onclick="Lightbox.hideBox()" alt="Close" title="Close this window" />';
		lightboxtext2 += '<div id="boxContents"></div>';
		lightboxtext2 += '</div>';
		
		var body = document.getElementsByTagName("body").item(0);
		new Insertion.Bottom(body, lightboxtext);
		new Insertion.Bottom(body, statusbox);
		new Insertion.Bottom(body, lightboxconfirm);
		new Insertion.Bottom(body, lightboxtext2);
	}



}//Lightbox