var overlayStack = new Array();

var Overlay = Class.create({
    element: null,
    overlayContainer: null,
    overlay: null,
    overlayBg: null,
    
	initialize : function(id) {
		//console.log("Overlay.init()");
		this.element = $(id);
		this.overlayContainer = $('overlayContainer');
		this.overlay = $('overlay');
		this.overlayBg = $('overlayBg');
		if (this.element && this.overlayContainer && this.overlay) {
	    	var openHandlers = $$('.' + id + 'OpenHandler');
	    	var closeHandlers = $$('.' + id + 'CloseHandler');
	    	
	    	openHandlers.each(function(el, i) {
	    		el.overlayHandler = this;
	    		el.onclick = this.showButtonClick;
	    	}.bind(this));
	    	
	    	closeHandlers.each(function(el, i) {
	    		el.onclick = this.hide.bind(this);
	    		el.onclickbind = true;
	    	}.bind(this));
	    	
			if (navigator.userAgent.indexOf('IE 6') != -1) {
				this.isIE6 = true;
				Event.observe(window, 'scroll', this.scaleBgIE6.bind(this));
			}
			
			this.element.select('.layerCnt').each(function(el) {
				el.observe('click', function(ev) {
					var clickEl = Event.element(ev);
					if (clickEl == el) {
						this.hide();
					}
				}.bind(this));
			}.bind(this));
			
		}
	},
	
	reinit : function(id) {
		this.element = $(id);
		if (this.element && this.overlayContainer && this.overlay) {
	    	var openHandlers = $$('.' + id + 'OpenHandler');
	    	var closeHandlers = $$('.' + id + 'CloseHandler');
	    	
	    	openHandlers.each(function(el, i) {
	    		el.overlayHandler = this;
	    		el.onclick = this.showButtonClick;
	    	}.bind(this));
	    	
	    	closeHandlers.each(function(el, i) {
	    		el.onclick = this.hide.bind(this);
	    	}.bind(this));
	    }
	},
	
	showButtonClick : function() {
		var that = this.overlayHandler;
		that.show();
		var hooks = this.overlayHandlerHooks;
		if (hooks) {
			hooks.each(function(hook) {
				hook.hookFunction(this, hook.hookOptions);
			}.bind(this));
		}
		return false;
	},

	show : function(offsetTop) {
		if (overlayStack.length > 0) {
			var currentOverlay = overlayStack[overlayStack.length - 1];
			currentOverlay.hideTemporary();
		} else {
			this.overlayContainer.style.display = 'block';
			if (this.isIE6) {
				this.hideSelectFields();
			}
		}
		overlayStack.push(this);
		this.element.style.display = 'block';
		
		var y = window.scrollY ? window.scrollY : document.documentElement.scrollTop+document.body.scrollTop;
		if( offsetTop != undefined )
			y += offsetTop;
		this.element.style.marginTop = y + 'px';
		
		this.overlay.fire('overlay:shown');
	},
	
	showTemporaryHiddenOverlay : function() {
		this.element.show();
	},

	hideTemporary : function() {
		this.element.hide();
	},

	hide : function() {
		overlayStack.pop();
		this.element.hide();
		if (overlayStack.length > 0) {
			var currentOverlay = overlayStack[overlayStack.length - 1];
			currentOverlay.showTemporaryHiddenOverlay();
		} else {
			this.overlayContainer.hide();
			if (this.isIE6) {
				this.showSelectFields();
			}
		}
		
		return false;		
	},
	
	scaleBgIE6 : function() {
		var height = document.documentElement.scrollTop + document.body.offsetHeight;
		this.overlayBg.style.height = height + 'px';
	},
  
	hideSelectFields : function() {
		$('main').getElementsBySelector('select').each(function(el,i){
			el.style.visibility = 'hidden';
		}); 
	},
  
	showSelectFields : function() {
		$('main').getElementsBySelector('select').each(function(el,i){
			el.style.visibility='visible';
		}); 
	},
	
	registerOverlayHook : function(element, hook, options) {
		if (element && element.overlayHandler && element.overlayHandler == this) {
			var overlayHandlerHooks = element.overlayHandlerHooks;
			if (!overlayHandlerHooks) {
				overlayHandlerHooks = new Array();
				element.overlayHandlerHooks = overlayHandlerHooks;
			}
			overlayHandlerHooks.push({hookFunction: hook, hookOptions: options});
		}
	}
  
});

Overlay.hideAll = function() {
	if (overlayStack.length > 0) {
		while (overlayStack.length > 0) {
			var currentOverlay = overlayStack[overlayStack.length - 1];
			currentOverlay.hide();
		}
	}
}

if ('observe' in document) {
	document.observe('dom:loaded', function() {
	});
}