/*!
 * byo - 2008
 * overlay class v1.4
 */

// init main vars - common to all classes
var byo;
if(!$defined(byo)) byo= {};
// /vars ////////////////////////////////////////////////////////////////////////////////

// OVERLAY ////////////////////////////////////////////////////////////////////////////////

var overlayFxElement= null;


var Overlay = new Class({

	// vars //////////////////////////////
	_color		: '#000',
	_opacity	: 0.2,
	_elOverlay	: null,
	_elLoading	: null,
	_elMessage	: null,
	_fxOverlay	: null,
	_fxLoading	: null,
	_timer		: null,
	_optionalOpacity : null,
	
	_cornerLoading : null,
	// /vars //////////////////////////////

	// contructor //////////////////////////////
	initialize : function(options){

		// return the existing object if exist
		if($defined(byo.overlay)) {
			return byo.overlay;
		};

		// make the object global
		byo.overlay= this;

		// set the options
		this.setOptions(options);
		

		// elOverlay

		if(!$defined(this._elOverlay)) {

			this._elOverlay= new Element('div',{
									'id':'overlay',
									'styles': {
										'display':'none',
										'position': 'absolute',
										'top': 0,
										'left': 0,
										'z-index': 110,
										'background-color': this._color
									} // /style
								});

			$$('body').adopt(this._elOverlay);

		} // /if not exist

		this._fxOverlay = new Fx.Tween(this._elOverlay, {property:'opacity', duration: 200, wait: false});

		return true;

	},
	// /contructor //////////////////////////////

	// setOptions //////////////////////////////
	setOptions : function(options){

		if (!$defined(options)) {
			return false;
		}

		if($defined(options.color)){
			this._color= options.color;
		};

		if($defined(options.opacity)){
			this._opacity= options.opacity;
		};

		return true;

	},
	// /setOptions //////////////////////////////

	// windowOnResize //////////////////////////////
	windowOnResize : function(element){

		window.addEvent('resize', function() {
			element.setStyles({
									'width': window.getWidth(),
									'height': window.getHeight(),
									'top': window.getScrollTop()
			});
		});

		return false;

	},
	// /windowOnResize //////////////////////////////

	// windowOnScroll //////////////////////////////
	windowOnScroll : function(element){

		window.addEvent('scroll', function() {
			element.setStyle('top', window.getScrollTop());
		});

		return false;

	},
	// /windowOnScroll //////////////////////////////

	// display the overlay
	display: function() {

		this._fxOverlay.set(0);

		this._elOverlay.setStyles({
								'display': 'block',
								'width': window.getWidth(),
								'height': window.getHeight(),
								'top': window.getScrollTop()
								});

		this.windowOnResize(this._elOverlay);
		this.windowOnScroll(this._elOverlay);

		// display !
		this._fxOverlay.start(this._opacity);

		return true;

	},
	// /display //////////////////////////////

	// hide the overlay
	hide: function() {

		this._fxOverlay.start(0).chain(function(){
			// when effect is finished
			var _obj= new Overlay();

			_obj._elOverlay.setStyle('display','none');

			window.onscroll= '';
			window.onresize= '';

			delete _obj;
		});

		return true;

	},
	// /hide //////////////////////////////

	// displayLoading //////////////////////////////
	displayLoading: function(opacity) {
		
		if($defined(opacity)){
			this._opacity = opacity;
		}else{
			this._opacity = 0.2;
		}


		if (!$defined(this._elLoading)) {

			this._elLoading= new Element('div',{
										'id':'overlay-loading',
										'styles': {
											'display':'none',
											'height': 50,
											'width': 200,
											'position': 'absolute',
											'z-index': 111,
											'background-repeat': 'no-repeat',
											'background-position': 'center'
										} // /style
									});

			this._elLoading.inject(this._elOverlay, 'after');

			this._fxLoading = new Fx.Tween(this._elLoading, {property:'opacity', duration: 200, wait: false}).set(0);

		} // /if not exist

		var top= (window.getHeight()/2).toInt() - 25;
		var left= (window.getWidth()/2).toInt() - 100;

		this._elLoading.setStyles({
							'display': 'block',
							'top': top,
							'left': left
							});

		this.display();
		this._fxLoading.start(1);

		//this.windowOnResize(this._elLoading);
		//this.windowOnScroll(this._elLoading);


		return true;

	},
	// /displayLoading //////////////////////////////

	// hide the loading //////////////////////////////
	hideLoading: function() {

		this._fxLoading.start(0).chain(function(){
			// when effect is finished
			var _obj= new Overlay();

			_obj._elLoading.setStyle('display','none');

			delete _obj;
		});

		//var overlay= new Overlay();
		this.hide();

		return true;

	},
	// /loading //////////////////////////////

	// message //////////////////////////////
	showMessage: function(message, autoHide) {

		var container;

		$clear(this._timer);

		if (!$('overlay-message')) {

			container= new Element('div',{
										'id':'overlay-message',
										'styles': {
											'display':'none',
											'right':'0px',
											'padding': '3px 5px',
											'position': 'absolute',
											'z-index': 111,
											'background-color': this.color
										} // /style
									});

			container.inject($('overlay'), 'after');

		} // /if not exist

		container = $('overlay-message');

		container.setStyles({
									'display': 'block',
									'top': window.getScrollTop()
									}).set('text',message);

		var onScroll= function() {
			container.setStyle('top', window.getScrollTop());
		}

		window.removeEvent('scroll', onScroll);
		window.addEvent('scroll', onScroll);

		if(autoHide === true) {
			this._timer= (function(){
				container.setStyle('display','none');
			}).delay(2000);
		} // /autoHide

		return false;

	}, // /showMessage

	// hideMessage
	hideMessage: function() {

		$('overlay-message').setStyle('display','none');

	},
	// /hideMessage //////////////////////////////

	// display the overlay and an element on the page
	displayElement: function(element,phonedisplay) {

		var elementTmp = $(element);
		
		if(phonedisplay){
			var element = elementTmp.clone()
			element.removeEvent('click');
		}else{
			var element = elementTmp;
		}
		
		element.inject($('overlay'), 'after');
		
		overlayFxElement = new Fx.Tween(element, {property:'opacity', duration: 200, wait: false}).set(0);

		element.setStyles({
							'display': 'block',
							'visibility': 'hidden',
							'position': 'absolute',
							'z-index': 150,
							'overflow':'hidden',
							'cursor': 'pointer'
							});

		// add the close event
		if(phonedisplay){
			$('overlay').setStyle('cursor','pointer');
			$('overlay').addEvent("click", this.hideElement); // /close
		}else{
			element.addEvent("click", this.hideElement); // /close
		}

		var tp= element.getSize();
		var elWidth= tp.x;
		var elHeight= tp.y;

		var top= (window.getHeight()/2).toInt() - (elHeight/2).toInt();
		
		if(phonedisplay){
			top= (window.getHeight()/2).toInt() - (elHeight/2).toInt() - 100;
		}
		var left= (window.getWidth()/2).toInt() - (elWidth/2).toInt()

		element.setStyles({
							'visibility':'visible',
							'top': top,
							'left': left
							});

		this.display();
		overlayFxElement.start(1);

		return true;

	},
	// /displayElement //////////////////////////////

	// hide the element
	hideElement: function() {

		var overlay= new Overlay();
		overlay.hide();

		overlayFxElement.start(0).chain(function(){
			// when effect is finished
			//delete overlay;
			//delete overlayFxElement;
		});

	},
	// /hideElement //////////////////////////////

	
	// displayCornerLoading //////////////////////////////
	displayCornerLoading: function(container,topRef, leftRef) {
		
		if (!$defined(this._cornerLoading)) {

			this._cornerLoading= new Element('div',{
										'id':'overlay-small-loading',
										'styles': {
											'display':'none',
											'height': 16,
											'width': 16,
											'position': 'absolute',
											'z-index': 112,
											'background-repeat': 'no-repeat',
											'background-position': 'center'
										} // /style
									});

			if(container){
				container.setStyle('position','relative')
				this._cornerLoading.inject(container);
			}else{
				this._cornerLoading.inject(this._elOverlay, 'after');	
			}
			
			this._fxLoading = new Fx.Tween(this._cornerLoading, {property:'opacity', duration: 200, wait: false}).set(0);

		} // /if not exist
		
		var top = 0;
		var left = 0;
		
		if(topRef){ var top = topRef; }
		if(leftRef){ left = leftRef; }
		
		this._cornerLoading.setStyles({
							'display': 'block',
							'top': top,
							'left': left
							});

		this._fxLoading.start(1);

		return true;

	},
	// /displayCornerLoading //////////////////////////////

	// hide the corner Small loading //////////////////////////////
	hideCornerLoading: function() {

		this._fxLoading.start(0).chain(function(){
			// when effect is finished
			var _obj= new Overlay();

			_obj._cornerLoading.setStyle('display','none');

			delete _obj;
		});

		//var overlay= new Overlay();
		this.hide();

		return true;

	}
	// /loading //////////////////////////////

});
// /OVERLAY ////////////////////////////////////////////////////////////////////////////////


// getInstance //////////////////////////////
//Overlay.getInstance = function() {
//	return objOverlay
//}
// /getInstance //////////////////////////////