/**
 * Create a faded overlay over the whole page, lightbox style
 *
 *@author Sam McCallum <sam@palo-verde.us>
 */

function Overlay(options) {
	var defaultOptions = {
		disableCloseOnClick: false,
		className: 'overlay'
	};
	this.options = Object.extend(defaultOptions, options || {});
	
	this.doOverlay();
}

Overlay.prototype = {
	/**
	 * Make a div the size of the current window.
	 * make it transparent
	 * make it overlay the whole page
	 * onclick, hide it
	 */
	doOverlay: function () {
		this.overlay = new Element('div', {className: this.options.className});
		document.getElementsByTagName('body')[0].appendChild(this.overlay);
		this.overlay.setOpacity(0.7);
		this.overlay.absolutize();
		this.overlay.setStyle({
			display: 'none',
			'top': '0px',
			'left': '0px',
			'width': document.body.offsetWidth+'px',
			'height': document.body.offsetHeight+'px',
			backgroundColor: '#236d93',
			zIndex: '50'
		});
		
		if (!this.options.disableCloseOnClick) {
			this.overlay.observe('click', this.handleOverlayClick.bind(this));
		}
		
		this.overlay.appear({duration: 0.3, to: 0.7});
	},
	
	/**
     * The overlay click handler
	 */
	handleOverlayClick: function (ev) {
		 this.overlay.fade({duration: 0.3, afterFinish: function () {this.overlay.parentNode.removeChild(this.overlay);}.bind(this)});
	}
}