/*
---
description: Simple overlay class for MooTools.
license: MIT-style
authors: [Christopher Pitt]
provides: [Overlay]
requires: 
  core/1.3: [Fx.Tween]
...
*/

(function() {

	var z;

	function setStyles(element, size) {
		element.setStyles({
			'width': size.x,
			'height': size.y,
			'zIndex': z
		});
		return setStyles;
	}
	
	function dispose(element) {
		element.dispose();
		return dispose;
	}

	window.Overlay = new Class({
		'Implements': [Options, Events],
		'options': {
			'onLoad': function(){},
			'onPosition': function(){},
			'onShow': function(){},
			'onHide': function(){},
			'onClick': function(){},
			'color': '#000',
			'opacity': 0.7,
			'zIndex': 1,
			'duration': 100
		},
		'initialize': function(options) {
			this.setOptions(options);

			var self = this,
				options = self.options,
				styles = {
					'position': 'absolute',
					'top': 0,
					'left': 0,
					'margin': 0,
					'padding': 0,
					'border': 'none',
					'outline': 'none'
				};

			z = options.zIndex;

			self.container = document.id(options.container || document.body);

			self.wrapper = new Element('div', {
				'events': {
					'click': function(e) {
						self.fireEvent('click', [e]);
					}
				},
				'tween': {
					'duration': options.duration,
					'onStart': function() {
						self.wrapper.setStyle('display', 'block');
					},
					'onComplete': function() {
						if (self.wrapper.getStyle('opacity') == 0) {
							self.wrapper.setStyle('display', 'none');
						}
					}
				},
				'styles': Object.merge(styles, {
					'zIndex': z,
					'display': 'none',
					'opacity': 0
				})
			}).inject(self.container);

			self.iframe = new Element('iframe', {
				'src': 'about:blank',
				'frameborder': 1,
				'scrolling': 'no',
				'styles': Object.merge(styles, {
					'zIndex': z,
					'display': 'block'
				})
			}).inject(self.wrapper);

			self.overlay = new Element('div', {
				'styles': Object.merge(styles, {
					'zIndex': z,
					'backgroundColor': options.color,
					'opacity': 1,
					'display': 'block'
				})
			}).inject(self.wrapper);

			self.container.addEvents({
				'resize': self.position.bind(self),
				'scroll': self.position.bind(self)
			});

			self.fireEvent('onLoad');
		},
		'position': function() {
			var size = this.container.getScrollSize();
			setStyles(this.wrapper, size)(this.iframe, size)(this.overlay, size);
			this.fireEvent('onPosition');
		},
		'show': function() {
			this.wrapper.fade(this.options.opacity);
			this.position();
			this.fireEvent('onShow');
		},
		'hide': function() {
			this.wrapper.fade(0);
			this.fireEvent('onHide');
		},
		'dispose': function() {
			z = null;
			dispose(this.overlay)(this.iframe)(this.wrapper);
		}
	});

})();