Popup.Overlay = new Class({
	
	Extends: Popup,
	
	options: {
		/*
		parentElement: false,
		className: null,
		fx: { },
		*/
		styles: {
			position: 'absolute',
			width: '100%',
			height: '100%',
			top: '0',
			left: '0',
			backgroundColor: '#000000'
		},
		showStyle: {opacity: .8},
		hideStyle: {opacity: 0},
		hideWhenEmpty: true
	},
	
	initialize: function(options){
		if (options){
			if (options.showStyle) this.options.showStyle = options.showStyle;
			if (options.hideStyle) this.options.hideStyle = options.hideStyle;
			this.setOptions(options);
		}
		var fix = Browser.Engine.trident5 || Browser.Engine.gecko || Browser.Engine.webkit || Browser.Engine.presto;

		var pe = $(this.options.parentElement) || $(document.body);
		var element = new Element('div', {
			'styles': {
				position: fix ? 'fixed' : 'absolute',
				display: 'none',
				visibility: 'visible',
				width: '100%',
				height: '100%',
				overflow: 'hidden',
				top: 0,
				left: 0,
				margin: 0,
				padding: 0,
				border: 0,
				zIndex: 1000
			}
		}).inject(pe);
		
		this.bg = new Element('div', {
			'class': this.options.className,
			'styles': this.options.styles,
			'events': { click: this.hide.bind(this) }
		}).inject(element);
		this.morph = new Fx.Morph(this.bg, $merge(this.options.fx, { link: 'cancel', onComplete: this.complete.bind(this) }));
		this.morph.set(this.options.hideStyle);

		this.parent(element, options);

		if (!fix){
			(pe.get('tag') == 'body' ? window : pe).addEvent('scroll', this.posFix.bind(this, pe)).addEvent('resize', this.posFix.bind(this, pe));
			this.posFix(pe);
		}
	},
	
	posFix: function(pe){
		var p = pe.getScroll(), s = pe.getSize();
		this.element.set('styles', {top: p.y, left: p.x, height: s.y + 'px', width: s.x + 'px'});
	},
	
	onShow: function(){
		this.element.setStyle('display', 'block');
		this.morph.start(this.options.showStyle);
		this.parent.apply(this, arguments);
	},
	
	onHide: function(){
		this.morph.start(this.options.hideStyle).chain(function(){
			this.element.setStyle('display', 'none');
		}.bind(this));
		this.parent.apply(this, arguments);
	},
	
	onTransition: function(){
		this.complete();
		this.parent.apply(this, arguments);
	},
	
	onCancel: function(){
		this.morph.cancel();
		this.parent.apply(this, arguments);
	}

});