/*
	Class: UI.Overlay 
		Generic Overlay class
*/
var Overlay = new Class({

	options: {
		'class': 'ui-overlay',
		'styles': {
			'position'	: 'absolute',
			'background-color'	: '#000',
			'z-index'	: 9999,
			'opacity'	: .3
		},
		'events' : {
			'click' : Class.empty
		},
		'transition' : Fx.Transitions.Sine.easeInOut,
		'duration' : 500
	},

	initialize: function( target, options ) {

		this.target = $(target) || $(document.body);
		this.setOptions( options );

	},

	render: function() {
		if( $type(this.overlay) == 'element' ) 
			return;

		this.overlay = new Element('div', {
			'class': 'ui-overlay', 
			'styles' : this.options.styles
		}).inject( this.target );

		// Binding
		this.overlay.show = this.show.bind(this);
		this.overlay.hide = this.hide.bind(this);
		
		if( $type(this.options.events) == 'object' )
			this.overlay.addEvents( this.options.events );

		this.overlay.fx = this.overlay.effect( 'opacity' , {
			'transition' : this.options.transition,
			'duration' : this.options.duration,
			'wait' : false
		}).set(0);

		this.reposition();
		var repos = this.reposition.bind(this);
		window.addEvents({
			scroll: repos,
			resize: repos
		});
	},

	reposition: function() {
		var reference = ( this.target == $(document.body) ? window : this.target );

		var scroll = reference.getSize().scroll;
		var max = (reference == window ? { left:0, right:0, top:0, bottom:0 } : reference.getCoordinates() );

		max.left += scroll.x;
		max.right += scroll.x;
		max.top += scroll.y;
		max.bottom -= scroll.y;

		this.overlay.setStyles(max);

	},

	show: function() {
		this.render();
		this.overlay.fx.start( this.options.styles.opacity );
	},

	hide: function() {
		this.render();
		this.overlay.fx.start( 0 );
	}
});

Overlay.implement( new Options, new Events );