/*
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++;
			}
		}
	}