/*
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'){
			/*this.getScroll();
			this.prepareIE('100%', 'hidden');
			this.setScroll(0,0);*/
			//this.hideSelects('hidden');
			//this.hideFlash('hidden');
		}
		this.hideSelects('hidden');
		this.hideFlash('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;
		}
	},
	
	hideFlash: function(visibility){
		var objects = document.getElementsByTagName('object');
		var embeds = document.getElementsByTagName('embed');
		for( i=0; i<objects.length; i++){
			objects[i].style.visibility = visibility;
		}
		for( i=0; i<embeds.length; i++){
			embeds[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;
		}else{
			this.yPos = 0;
		}
		return this.yPos;
	},
	
	setScroll: function(x, y){
		window.scrollTo(x, y); 
	},
	
	setOverlayHeight: function(){
		b = document.getElementsByTagName('body')[0];
		height = $(b).getHeight();
		if( height ){
			$('overlay').setStyle({height: height + 'px'});
		}
	},
	
	displayLightbox: function(display){
		$('overlay').style.display = display;
		$('lightbox').style.display = display;
		if(display != 'none'){
			this.setOverlayHeight();
			this.origHeight = parseInt($('lightbox').getStyle('top'));
			ntop = this.getScroll() + this.origHeight;
			$('lightbox').setStyle({'top': ntop + 'px'});
			this.loadInfo();
		}else{
			$('lightbox').setStyle({'top': this.origHeight + 'px'});
		}
	},
	
	// Begin Ajax request based off of the href of the clicked linked
	loadInfo: function() {
		var myAjax = new Ajax.Request(
        this.content,
        {method: 'get', onComplete: this.processInfo.bindAsEventListener(this)}
		);
		
	},
	
	// Display Ajax response
	processInfo: function(response){
		info = "<div id='lbContent'>" + response.responseText + "</div>";
		new Insertion.Before($('lbLoadMessage'), info)
		$('lightbox').className = "done";
		this.setOverlayHeight();
		this.parseNew();
		this.actions();
		this.forms();
		this.buttons();
	},
	
	parseNew: function(){
		lbs = $$('#lbContent a.lbOn');
		//console.log( lbs );
		for(i=0; i<lbs.length; i++){
			Event.observe(lbs[i], 'click', this.insert.bindAsEventListener(this), false);
			lbs[i].onclick = function(){return false;};
			lbs[i].setStyle({visibility: 'visible'});
		}
	},
	
	buttons: function(){
		btns = $$('#lbContent .lbClose');
		for( i=0; i<btns.length; i++){
			Event.observe(btns[i], 'click', this.deactivate.bindAsEventListener(this), false);
			btns[i].onclick = function(){return false;};
			btns[i].setStyle({visibility: 'visible'});
		}
	},
	
	// Search through new links within the lightbox, and attach click event
	actions: function(){
		lbActions = document.getElementsByClassName('lbAction');

		for(i = 0; i < lbActions.length; i++) {
			//console.log(lbActions[i].rel + ', ' + this[lbActions[i].rel]);
			Event.observe(lbActions[i], 'click', this[lbActions[i].rel].bindAsEventListener(this), false);
			lbActions[i].onclick = function(){return false;};
			lbActions[i].setStyle({visibility: 'visible'});
		}

	},
	
	forms: function(){
		lbForms = document.getElementsByClassName('lbForm');
		//console.log(lbForms.length);
		for( i=0; i<lbForms.length; i++){
			//console.log(lbForms[i]);
			Event.observe(lbForms[i], 'submit',
				this.processform.bindAsEventListener(this), false);
			lbForms[i].onsubmit = function(){return false;};
			Event.observe(lbForms[i], 'reset',
				this.deactivate.bindAsEventListener(this), false);
			lbForms[i].onreset = function(){return false;};
			lbForms[i].setStyle({visibility: 'visible'});
		}
	},
	
	// Example of creating your own functionality once lightbox is initiated
	insert: function(e){
	   var link = findElementParent(Event.element(e), 'A');
	   Element.remove($('lbContent'));
	   $('lightbox').className = 'loading';
	   
	   //console.log( link.nodeName );
	 
	   var myAjax = new Ajax.Request(
			  link.href,
			  {method: 'get', onComplete: this.processInfo.bindAsEventListener(this)}
	   );
	 
	},
	
	// Example of creating your own functionality once lightbox is initiated
	deactivate: function(){
		Element.remove($('lbContent'));
		
		if (browser == "Internet Explorer"){
			/*this.prepareIE("auto", "auto");*/
			//this.hideSelects("visible");
			//this.hideFlash('visible');
			/*this.setScroll(0,this.yPos);*/
		}
		
		this.hideSelects('visible');
		this.hideFlash('visible');
		this.displayLightbox("none");
		$('lightbox').className = "loading";
	},
	
	processform: function(e){
		//alert('got to process form');
		Event.stop(e);
		//console.log('got to process form');
		var form = findElementParent(Event.element(e), 'FORM');
		var req = createRequestString(form);
		var action = form.action;
		var target = action + '?' + req;
		//console.log(target);
		
		Element.remove($('lbContent'));
		$('lightbox').className = "loading";
		
		var myAjax = new Ajax.Request(
			target,
			{method: 'get', onComplete: this.processInfo.bindAsEventListener(this)}
			);
	},
	
	deactivate_update: function(){
		if( window.updateCart ){
			updateCart();
		}
		this.deactivate();
	}
}

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

function findElementParent(elm, p){
	var node = elm;
	while( node ){
		if( node.nodeType == 1 ){
			if( node.nodeName.toUpperCase() == p ){
				return node;
			}
		}
		node = node.parentNode;
	}
	return null;
}

function createRequestString(theform){
	var reqStr = "";
	var length = theform.elements.length;
	var temp;
	//console.log(length);
	for(i=0; i < length; i++){
		isformObject = false;
		
		switch (theform.elements[i].tagName){
		case "INPUT":
			switch (theform.elements[i].type){
			case "text":
			case "hidden":
				temp = theform.elements[i].name + "=" + encodeURIComponent(theform.elements[i].value);
				isformObject = true;
				break;
				
			case "checkbox":
				if (theform.elements[i].checked){
					temp = theform.elements[i].name + "=" + theform.elements[i].value;
				}else{
					temp = theform.elements[i].name + "=";
				}
				isformObject = true;
				break;
				
			case "radio":
				if (theform.elements[i].checked){
					temp = theform.elements[i].name + "=" + theform.elements[i].value;
					isformObject = true;
				}
			}
			break;
			
		case "TEXTAREA":
			temp = theform.elements[i].name + "=" + encodeURIComponent(theform.elements[i].value);
			isformObject = true;
			break;
			
		case "SELECT":
			var sel = theform.elements[i];
			temp = sel.name + "=" + sel.options[sel.selectedIndex].value;
			isformObject = true;
			break;
		}
		
		if ((isformObject)){
			if( reqStr != '' ){
				reqStr += "&";
			}
			reqStr += temp;
		}
	}
	return reqStr;
}

// 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]);
		lbox[i].setStyle({visibility: 'visible'});
	}
}

function processNewLightboxes(container){
	lbox = $$(container);
	//console.log('processNewLightboxes: ' + container + ', ' + lbox.length);
	for(i=0; i<lbox.length; i++){
		valid = new lightbox(lbox[i]);
		lbox[i].setStyle({visibility: 'visible'});
	}
}

// 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.appendChild(document.createTextNode('&nbsp;'));
	lb.id				= 'lightbox';
	lb.className 	= 'loading';
	lb.innerHTML	= '<div id="lbLoadMessage">' +
						  '<img class="loading_image" src="/images/ajax-loader.gif" alt="loading" /><p>Loading</p>' +
						  '</div>';
	bod.appendChild(overlay);
	bod.appendChild(lb);
}