var Overlay = new Class({

			Implements: [Options,Events],

			options:  {
				id: 'overlay',
				color: '#000',
				duration: 500,
				opacity: 0.7/*,
				onClick: $empty,
				onClose: $empty,
				onHide: $empty,
				onOpen: $empty,
				onShow: $empty
				*/
			},

			initialize: function(container,options) {
				this.setOptions(options);
				this.container = document.id(container);
				this.overlay = new Element('div',{
					id: this.options.id,
					opacity: 0,
					styles: {
						position: 'absolute',
						background: this.options.color,
						left: 0,
						top: 0
					},
					events: {
						click: function() {
							this.fireEvent('click');
						}.bind(this)
					}
				}).inject(this.container);
				this.tween = new Fx.Tween(this.overlay,{ 
					duration: this.options.duration,
					link: 'cancel',
					property: 'opacity',
					onStart: function() {
						var size = this.container.getScrollSize();
						this.overlay.setStyles({
							width: size.x,
							height: size.y
						});
					}.bind(this),
					onComplete: function() {
						this.fireEvent(this.overlay.get('opacity') == this.options.opacity ? 'show' : 'hide');
					}.bind(this)
				});
			},
			open: function() {
				this.fireEvent('open');
				this.tween.start(this.options.opacity);
			},
			close: function() {
				this.fireEvent('close');
				this.tween.start(0);
			}
		});

		window.addEvent('domready',function() {

			/* usage */

			var closer = $('closer');
			if(!closer){return false;}
			
			$('closer').addEvent('click',function(e) {
				// alert("closer clicked!");
				olay.close();
				$('holder').addClass('hide');
			});
			
			var olay = new Overlay(document.body, {
				duration: 7,
				onClick: function() {  this.close(); } // closing click event
			});

			// the shower button click event
			$('shower').addEvent('click',function(e) {
				e.stop(); // prevents default
				// alert("shower clicked!");
				olay.open(); // calls olay aka new Overlay
				$('holder').removeClass('hide');
			});
		});