LightBox = new Class({
	Implements: Options,

	options: {
		overlay: 	{ color: '#000', opacity: 0.6, close_on_click: true }
	},

	initialize: function(elements, options) {
		this.setOptions(options);
		this.elements = $splat(elements);

		this.options.overlay.onClick = function() {
			this.close();
		}.bind(this);
		this.overlay = new OverlayDiv(this.options.overlay);
		if(!this.elements.length) return;

	},

	show: function(id) {
		var el = $(id);
		if(!el) return;

		this.overlay.show();

		var c = new Chain();
		c.chain(function() {
			c.callChain();
		}).chain(function() {
			el.setStyles({
				display: 'block',
				opacity: 0
			});
			el.setStyles({
				top: $(document.body).getHeight() / 2 - el.getHeight() / 2,
				left: $(document.body).getWidth() / 2 - el.getWidth() / 2
			});

			new Fx.Tween(el, {
				duration: 500,
				onComplete: function() {
					c.callChain();
				}
			}).start('opacity', 1);

		}).chain(function() {
			var lblClose = new Element('label', {
				styles: {
					cursor: 'pointer',
					position: 'absolute',
					top: 0,
					left: el.getWidth() - 60,
					'font-weight': 'bold',
					'padding-top': 5
				}
			}).addEvent('click', function() {
				this.close();
			}.bind(this)).set('html', 'X Close').inject(el);
			
		}.bind(this)).chain(function() {


		}).callChain();
	},

	close: function() {
		this.overlay.hide();

		for(var i=0; i<this.elements.length; ++i) {
			if(this.elements[i].getStyle('display') != 'none') {
				var el = $(this.elements[i]);
				new Fx.Tween(el, {
					duration: 300,
					onComplete: function() {
						el.setStyle('display', 'none');
					}
				}).start('opacity', 0);
			}
		}
	}

});