/**
 * MooOver - Simple Overlay Extension for Mootools
 *
 * @version     1.0
 *
 * @license     MIT-style license
 * @author      Thomas Wilhelm <http://thomas.web-wack.at/>
 * @copyright   Author
 */

var MooOver = new Class({

    Implements: Options,

    getOptions: function(){
		return {
			overlay: null,
			onClick: new Class(),
			startOpacity: 0,
			finalOpacity: 0.8,
			overlayColor: '#000',
			container: document.body,
			onClickClose: true,
			disposeContentBefore: false,
			content: null
		}
	},
	
	initialize: function(options) {
		this.setOptions(this.getOptions(), options);
		
		this.options.container = $(this.options.container);
		
		this.overlay = new Element('div', {
		      'id': 'overlay',
			  'styles': {
		         'width': '100%',
				 'height': document.body.getSize().y + 'px',
		         'position': 'absolute',
				 'zIndex': 1,
				 'backgroundColor': this.options.overlayColor,
				 'opacity': this.options.startOpacity,
				 'overflow': 'hidden',
				 'visibility': 'hidden'
		      }
		});
		
		if (this.options.onClickClose == true) {
			this.overlay.addEvent('click', function(){
		       this.hide();
			   return false;
		   }.bind(this));
		}
		
		this.contentDiv = new Element('div', {'id': 'overlayContent'});
		
		this.fade = new Fx.Morph(this.overlay, 'opacity');
		
		this.display(this.options);
		
		this.position();
		window.addEvent('resize', this.position.bind(this));
	},
	
	position: function(){ 
		if (this.options.container == document.body) { 
			var h = document.getScrollSize().y+'px'; 
			this.overlay.setStyles({top: '0px', height: h});
		} else { 
			var myCoords = this.options.container.getCoordinates(); 
			this.overlay.setStyles({
				top: myCoords.top+'px', 
				height: myCoords.height+'px', 
				left: myCoords.left+'px', 
				width: myCoords.width+'px'
			}); 
		} 
	},
	
	display: function(options) {
		this.setOptions(this.getOptions(), options);
		this.overlay.inject(document.body, 'top');
		if (this.options.content) {
			if (this.options.disposeContentBefore) {
				this.contentDiv.dispose();
			}
			this.contentDiv.inject(this.overlay, 'after');
			this.contentDiv.set('html', this.options.content);
		}
		
		this.fade.start({'opacity': this.options.finalOpacity, 'visibility':'visible'});
	},
	
	hide: function() {
		this.fade.start({'opacity': this.options.startOpacity});
		if (this.options.content) {
			this.contentDiv.dispose();
		}
	},
	
	destroy: function() {
		this.overlay.dispose();
	}
	
});