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

	Script		: Overlay
	Version		: 1.2
	Authors		: Samuel birch
	Desc		: Covers the window with a semi-transparent layer.
	Licence		: Open Source MIT Licence

	Modified: Leonardo Di Lella (leonardo@dilella.org) - MooTools 1.2 support

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

var Overlay = new Class({
	
	getOptions: function(){
		return {
			colour: '#666',
			opacity: 0.5,
			zIndex: 1,
			container: document.body,
			onClick: $empty
		};
	},

	initialize: function(options){
		this.setOptions(this.getOptions(), options);
		
		this.options.container = $(this.options.container);
		
		this.container = new Element('div').setProperty('id', 'OverlayContainer').setStyles({
			position: 'absolute',
			left: '0px',
			top: '0px',
			bottom: 0,
			right: 0,
			width: '100%',
			visibility: 'hidden',
			overflow: 'hidden',
			zIndex: this.options.zIndex
		}).inject(this.options.container,'inside');
		
		this.overlay = new Element('div').setProperty('id', 'Overlay').setStyles({
			position: 'absolute',
			left: 0,
			top: 0,
			bottom: 0,
			right: 0,
			width: '100%',
			height: '100%',
			zIndex: 8,
			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, 'opacity').set(0);
		this.fade = new Fx.Morph(this.container, {
			link: 'cancel',
			duration: 500,
			fps: 150
		}).set({ opacity: 0 });
		
		
		this.position();
		
		window.addEvent('resize', this.position.bind(this));
	},
	
	position: function(){ 
		if(this.options.container == document.body){ 
			var h = document.getScrollSize().x+'px'; 
			//this.container.setStyles({ top:0, bottom:0, left:0, right:0, height:'100%' });
			this.container.setStyles({ top:0, bottom:0, left:0, right:0, height:$(document.body).getScrollSize().y + 'px' });
		}else{ 
			var myCoords = this.options.container.getCoordinates(); 
			this.container.setStyles({
				top: myCoords.top+'px', 
				height: myCoords.height+'px', 
				left: myCoords.left+'px', 
				width: myCoords.width+'px'
			}); 
		} 
	},
	
	show: function(){
		//this.fade.start({'opacity':[0,this.options.opacity], 'visibility':'visible'});
		this.fade.start({'opacity':[this.container.get('opacity'),this.options.opacity], 'visibility':'visible'});
	},
	
	hide: function(){
		//this.fade.start({'opacity':[0,this.options.opacity], 'visibility':'hidden'});
		this.fade.start({'opacity':[this.container.get('opacity'),0]});
	},
	
	cancel: function() {
		this.fade.cancel();
	},
	
	pause: function() {
		this.fade.pause();
	},
	
	resume: function() {
		this.fade.resume();
	}
	
});
Overlay.implement(new Options);

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