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

	Script		: Overlay
	Version		: 2.0
	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',
		opacity: 0.7,
		zIndex: 100,
		onClick: new Class()
	},

	//initialization
	initialize: function(options)
	{
		//set options
		this.setOptions(options);
		
		//start building overlay
		this.container = new Element('div').setProperty('id','OverlayContainer').setStyles({
			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').setProperties({
			id: 'OverlayIframe',
			name: 'OverlayIframe',
			src: 'javascript:void(0);',
			frameborder: 0,
			scrolling: 'no'
		}).setStyles({
			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').setProperty('id','Overlay').setStyles({
			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()
	{
		this.container.setStyle('height',0);//reset container height ready for resize
		if(this.options.container == document.body)
		{
			if(this.options.container.getSize().y >= this.options.container.getScrollSize().y)
			{
				this.container.setStyles({
					width: window.getSize().x,
					height: window.getSize().y
				});
			}
			else
			{
				this.container.setStyles({
					width: window.getSize().x,
					height: window.getScrollSize().y
				});
			};
		}
		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'
		});
	}
});