/*

Created By: Chris Campbell

Website: http://particletree.com

Date: 2/1/2006



Inspired by the lightbox implementation found at http://www.huddletogether.com/projects/lightbox/

*/



/*-------------------------------GLOBAL VARIABLES------------------------------------*/



var detect = navigator.userAgent.toLowerCase();

var OS,browser,version,total,thestring;



/*-----------------------------------------------------------------------------------------------*/



//Browser detect script origionally created by Peter Paul Koch at http://www.quirksmode.org/



function getBrowserInfo() {

	if (checkIt('konqueror')) {

		browser = "Konqueror";

		OS = "Linux";

	}

	else if (checkIt('safari')) browser 	= "Safari"

	else if (checkIt('omniweb')) browser 	= "OmniWeb"

	else if (checkIt('opera')) browser 		= "Opera"

	else if (checkIt('webtv')) browser 		= "WebTV";

	else if (checkIt('icab')) browser 		= "iCab"

	else if (checkIt('msie')) browser 		= "Internet Explorer"

	else if (!checkIt('compatible')) {

		browser = "Netscape Navigator"

		version = detect.charAt(8);

	}

	else browser = "An unknown browser";



	if (!version) version = detect.charAt(place + thestring.length);



	if (!OS) {

		if (checkIt('linux')) OS 		= "Linux";

		else if (checkIt('x11')) OS 	= "Unix";

		else if (checkIt('mac')) OS 	= "Mac"

		else if (checkIt('win')) OS 	= "Windows"

		else OS 								= "an unknown operating system";

	}

}



function checkIt(string) {

	place = detect.indexOf(string) + 1;

	thestring = string;

	return place;

}



/*-----------------------------------------------------------------------------------------------*/



Event.observe(window, 'load', initialize, false);

Event.observe(window, 'load', getBrowserInfo, false);

Event.observe(window, 'unload', Event.unloadCache, false);



var lightbox = Class.create();



lightbox.prototype = {



	yPos : 0,

	xPos : 0,



	initialize: function(ctrl) {

		this.content = ctrl.href;

		Event.observe(ctrl, 'click', this.activate.bindAsEventListener(this), false);

		ctrl.onclick = function(){return false;};

	},

	

	// Turn everything on - mainly the IE fixes

	activate: function(){

		if (browser == 'Internet Explorer' && version == '6'){

			this.getScroll();

			this.prepareIE('100%', 'hidden');

			this.setScroll(0,0);

			this.hideSelects('hidden');

		}

		this.displayLightbox("block");

	},

	

	// Ie requires height to 100% and overflow hidden or else you can scroll down past the lightbox

	prepareIE: function(height, overflow){

		bod = document.getElementsByTagName('body')[0];

		bod.style.height = height;

		bod.style.overflow = overflow;

  

		htm = document.getElementsByTagName('html')[0];

		htm.style.height = height;

		htm.style.overflow = overflow; 

	},

	

	// In IE, select elements hover on top of the lightbox

	hideSelects: function(visibility){

		selects = document.getElementsByTagName('select');

		for(i = 0; i < selects.length; i++) {

			selects[i].style.visibility = visibility;

		}

	},

	

	// Taken from lightbox implementation found at http://www.huddletogether.com/projects/lightbox/

	getScroll: function(){

		if (self.pageYOffset) {

			this.yPos = self.pageYOffset;

		} else if (document.documentElement && document.documentElement.scrollTop){

			this.yPos = document.documentElement.scrollTop; 

		} else if (document.body) {

			this.yPos = document.body.scrollTop;

		}

	},

	

	setScroll: function(x, y){

		window.scrollTo(x, y); 

	},

	

	displayLightbox: function(display){

		$('overlay').style.display = display;

		$('lightbox').style.display = display;

		if(display != 'none') this.loadInfo();

	},

	

	// Begin Ajax request based off of the href of the clicked linked

	loadInfo: function() {

		var myAjax = new Ajax.Request(

        this.content,

        {method: 'get', parameters: "", onComplete: this.processInfo.bindAsEventListener(this)}

		);

		$('overlay').style.MozOpacity = 0;

		$('overlay').style.filter = "alpha(opacity=0)";

		$('overlay').style.opacity = 0;

		$('lightbox').style.MozOpacity = 0;

		$('lightbox').style.filter = "alpha(opacity=0)";

		$('lightbox').style.opacity = 0;

		toggle('overlay',300);

		

	},

	

	// Display Ajax response

	processInfo: function(response){

		info = "<div id='lbContent'>" + response.responseText + "</div>";

		new Insertion.Before($('lbLoadMessage'), info)

		$('lightbox').className = "done";	

		this.actions();			

	},

	

	// Search through new links within the lightbox, and attach click event

	actions: function(){

		lbActions = document.getElementsByClassName('lbAction');



		for(i = 0; i < lbActions.length; i++) {

			Event.observe(lbActions[i], 'click', this[lbActions[i].rel].bindAsEventListener(this), false);

			lbActions[i].onclick = function(){return false;};

		}



	},

	

	// Example of creating your own functionality once lightbox is initiated

	insert: function(e){

	   link = Event.element(e).parentNode;

	   Element.remove($('lbContent'));

	 

	   var myAjax = new Ajax.Request(

			  link.href,

			  {method: 'get', parameters: "", onComplete: this.processInfo.bindAsEventListener(this)}

	   );



	 

	},

	

	// Example of creating your own functionality once lightbox is initiated

	deactivate: function(){

		Element.remove($('lbContent'));

		

		if (browser == 'Internet Explorer' && version == '6'){

			this.setScroll(0,this.yPos);

			this.prepareIE("auto", "auto");

			this.hideSelects("visible");

		}

		

		this.displayLightbox("none");

	}

}



/*-----------------------------------------------------------------------------------------------*/



// Onload, make all links that need to trigger a lightbox active

function initialize(){

	addLightboxMarkup();

	lbox = document.getElementsByClassName('lbOn');

	for(i = 0; i < lbox.length; i++) {

		valid = new lightbox(lbox[i]);

	}

}



// Add in markup necessary to make this work. Basically two divs:

// Overlay holds the shadow

// Lightbox is the centered square that the content is put into.

function addLightboxMarkup() {

	bod 				= document.getElementsByTagName('body')[0];

	overlay 			= document.createElement('div');

	overlay.id		= 'overlay';

	lb					= document.createElement('div');

	lb.id				= 'lightbox';

	lb.className 	= 'loading';

	lb.innerHTML	= '<div id="lbLoadMessage">' +

						  '<p></p>' +

						  '</div>';

	bod.appendChild(overlay);

	bod.appendChild(lb);

}

	/* toggle() checks to see if the images has already been faded

	   or not and sends the appropriate variables to opacity(); */

	function toggle(el,milli) {

		// Get the opacity style parameter from the image

		var currOpacity = document.getElementById(el).style.opacity;

		if(currOpacity != 0) { // if not faded

			fade(el, milli, 80, 0);

		} else { // else the images is already faded

			fade(el, milli, 0, 80);

		}

	} 

	

	/* changeOpacity() uses three different opacity settings to

	   achieve a cross-browser opacity changing function.  This

	   function can also be used to directly change the opacity

	   of an element. */

	function changeOpacity(el,opacity) {

		var image = document.getElementById(el);

		// For Mozilla

		image.style.MozOpacity = (opacity / 100);

		// For IE

		image.style.filter = "alpha(opacity=" + opacity + ")";

		// For others

		image.style.opacity = (opacity / 100);

		if(opacity == 80){

			toggle2('lightbox',250);

		}

	}

	

	/* fade() will fade the image in or out based on the starting

	   and ending opacity settings.  The speed of the fade is 

	   determined by the variable milli (total time of the fade

	   in milliseconds)*/

	function fade(el,milli,start,end) {

		var fadeTime = Math.round(milli/100);

		

		var i = 0;  // Fade Timer

		// Fade in

		if(start < end) {

			for(j = start; j <= end; j++) {

				// define the expression to be called in setTimeout()

				var expr = "changeOpacity('" + el + "'," + j + ")";

				var timeout = i * fadeTime;

				// setTimeout will call 'expr' after 'timeout' milliseconds

				setTimeout(expr,timeout);

				i++;

			}

		}

		// Fade out

		else if(start > end) {

			for(j = start; j >= end; j--) {

				var expr = "changeOpacity('" + el + "'," + j + ")";

				var timeout = i * fadeTime;

				setTimeout(expr,timeout);

				i++;

			}

		}

	} 

	/* toggle() checks to see if the images has already been faded

	   or not and sends the appropriate variables to opacity(); */

	function toggle2(el,milli) {

		// Get the opacity style parameter from the image

		var currOpacity = document.getElementById(el).style.opacity;

		if(currOpacity != 0) { // if not faded

			fade2(el, milli, 100, 0);

		} else { // else the images is already faded

			fade2(el, milli, 0, 100);

		}

	} 

	

	/* changeOpacity() uses three different opacity settings to

	   achieve a cross-browser opacity changing function.  This

	   function can also be used to directly change the opacity

	   of an element. */

	function changeOpacity2(el,opacity) {

		var image = document.getElementById(el);

		// For Mozilla

		image.style.MozOpacity = (opacity / 100);

		// For IE

		image.style.filter = "alpha(opacity=" + opacity + ")";

		// For others

		image.style.opacity = (opacity / 100);

	}

	

	/* fade() will fade the image in or out based on the starting

	   and ending opacity settings.  The speed of the fade is 

	   determined by the variable milli (total time of the fade

	   in milliseconds)*/

	function fade2(el,milli,start,end) {

		var fadeTime = Math.round(milli/100);

		

		var i = 0;  // Fade Timer

		// Fade in

		if(start < end) {

			for(j = start; j <= end; j++) {

				// define the expression to be called in setTimeout()

				var expr = "changeOpacity2('" + el + "'," + j + ")";

				var timeout = i * fadeTime;

				// setTimeout will call 'expr' after 'timeout' milliseconds

				setTimeout(expr,timeout);

				i++;

			}

		}

		// Fade out

		else if(start > end) {

			for(j = start; j >= end; j--) {

				var expr = "changeOpacity2('" + el + "'," + j + ")";

				var timeout = i * fadeTime;

				setTimeout(expr,timeout);

				i++;

			}

		}

	}