/**************************************************************

	Script		: Overlay
	Version		: 2.0.2
	Authors		: Samuel Birch
	Desc		: Covers the window with a semi-transparent layer.
	Licence		: Open Source MIT Licence
	Modified	: Liam Smart (liam_smart@hotmail.com) - MooTools 1.2 upgrade

**************************************************************/

//start overlay class
var Overlay = new Class({
	
	//implements
	Implements: Options,
	
	//options
	options:{
		colour: '#000',//background color of overlay
		opacity: 0.7,//opacity of overlay
		zIndex: 100,//the z-index of the overlay (needs to lower than multiBox pop-up)
		onClick: new Class()//make sure new class is loaded
	},

	//initialization
	initialize: function(options){
		//set options
		this.setOptions(options);
		//start building overlay

                //my hack
                if($('OverlayContainer')){
                    $('OverlayContainer').dispose()
                }

                this.container = new Element('div', {
                        'id': 'OverlayContainer',
                        'styles': {
                                position: 'absolute',
                                left: 0,
                                top: 0,
                                width: '100%',
                                visibility: 'hidden',
                                overflow: 'hidden',
                                zIndex: this.options.zIndex,
                                opacity: 0
                        }
                }).inject(this.options.container,'inside');

                this.iframe = new Element('iframe', {
                        'id': 'OverlayIframe',
                        'name': 'OverlayIframe',
                        'src': 'javascript:void(0);',
                        'frameborder': 0,
                        'scrolling': 'no',
                        'styles': {
                                position: 'absolute',
                                top: 0,
                                left: 0,
                                width: '100%',
                                height: '100%',
                                filter: 'progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)',
                                opacity: 0,
                                zIndex: 101
                        }
                }).inject(this.container,'inside');

                this.overlay = new Element('div', {
                        'id': 'Overlay',
                        'styles': {
                                position: 'absolute',
                                left: 0,
                                top: 0,
                                width: '100%',
                                height: '100%',
                                zIndex: 102,
                                backgroundColor: this.options.colour
                        }
                }).inject(this.container,'inside');


		
		this.container.addEvent('click', function(){
			this.options.onClick();
		}.bind(this));
		
		this.fade = new Fx.Morph(this.container);
		this.position();
		
		window.addEvent('resize',this.position.bind(this));
	},
	
	position: function(){
		if(this.options.container == document.body){
			if(this.options.container.getHeight() >= this.options.container.getScrollHeight()){
				this.container.setStyles({
					width: window.getWidth(),
					height: window.getHeight()
				});
			}else{
				this.container.setStyles({
					width: window.getWidth(),
					height: window.getScrollHeight()
				});
			};
		}else{
			var myCoords = this.options.container.getCoordinates();
			this.container.setStyles({
				top: myCoords.top,
				height: myCoords.height,
				left: myCoords.left,
				width: myCoords.width
			});
		};
	},
	
	show: function(){
		this.fade.start({
			visibility: 'visible',
			opacity: this.options.opacity
		}).chain(function() {
			visibility: 'hidden'
		});
	},
	
	hide: function(){
		this.fade.start({
			opacity: 0
		}).chain(function() {
			visibility: 'hidden'
		});
	}
});