/**
* Lightbox
*
* This libary is used to create a lightbox in a web application.  This library
* requires the Prototype 1.6 library and Script.aculo.us core, effects, and dragdrop
* libraries.  To use, add a div containing the content to be displayed anywhere on 
* the page.  To create the lightbox, add the following code:
*
*	var test;
*	
*	Event.observe(window, 'load', function () {
*		test = new Lightbox('idOfMyDiv');
*	});
*	
*	Event.observe('lightboxLink', 'click', function () {
*		test.open();
*	});
*
*	Event.observe('closeLink', 'click', function () {
*		test.close();
*	});
*     
*/

var Lightbox = Class.create({
	open : function () {
		this._centerWindow(this.container);
		this._fade('open', this.container);
	},
	
	close : function () {
		this._fade('close', this.container);
	},
	
	_fade : function fadeBg(userAction,whichDiv){
		if(userAction=='close'){
			if (this.mode == "popup")
			{
				this._makeInvisible;
				this._hideLayer(whichDiv);
			}
			else
				new Effect.Opacity('bg_fade', {duration:.5, from:0.5, to:0, afterFinish:this._makeInvisible, afterUpdate:this._hideLayer(whichDiv)});
		}else{
			if (this.mode == "popup")
			{
				this._makeVisible;
				this._showLayer(whichDiv);
			}
			else
				new Effect.Opacity('bg_fade', {duration:.5, from:0, to:0.5, beforeUpdate:this._makeVisible, afterFinish:this._showLayer(whichDiv)});
		}
	},
	
	_makeVisible : function makeVisible(){
		$("bg_fade").style.visibility="visible";
	},

	_makeInvisible : function makeInvisible(){
		$("bg_fade").style.visibility="hidden";
	},

	_showLayer : function showLayer(userAction){
		$(userAction).style.display="block";
	},
	
	_hideLayer : function hideLayer(userAction){
		$(userAction).style.display="none";
	},
	
	_centerWindow : function centerWindow(element) {
		var windowHeight = this.Height ;//? this.Height : parseFloat($(element).getHeight())/2; 
		var windowWidth = this.Width ;//? this.Width : parseFloat($(element).getWidth())/2;

		$(element).style.width = this.Width + "px";
		$(element).style.height = this.Height + "px";
		$(element).style.backgroundColor = this.colorBox;
		$("bg_fade").style.backgroundColor = this.colorBG;
		
		var cx = window.innerWidth || document.documentElement.offsetWidth || document.body.clientWidth;
		var cy = window.innerHeight || document.documentElement.offsetHeight || document.body.clientHeight;
		
		$("bg_fade").style.width = cx;
		$("bg_fade").style.height = cy;
		
		$(element).style.top = Math.round(document.body.offsetTop + ((cy - $(element).getHeight()))/2)+'px';
		switch(this.Align)
		{
			case "left":
				$(element).style.left = 0;
				break;
			case "right":
				$(element).style.left = (cx - $(element).getWidth() - 4) + "px";
				break;
			default:
				$(element).style.left = Math.round(document.body.offsetLeft + ((cx - $(element).getWidth()))/2)+'px'
				break;
		};
	},
	
	initialize : function(containerDiv, popupMode, boxWidth, boxHeight, boxAlign, colorBox, colorBG) {
		this.container = containerDiv;
		this.mode = popupMode;
		this.Width = boxWidth;
		this.Height = boxHeight;
		this.Align = boxAlign;
		this.colorBox = colorBox;
		this.colorBG = colorBG;
		if($('bg_fade') == null) {
			var screen = new Element('div', {'id': 'bg_fade'});
			document.body.appendChild(screen);
		}
		//new Draggable(this.container);
		this._hideLayer(this.container);
	}
});