var Lightbox = new Class({
	
	Implements: [Options, Events],
	
	options: {
		overlay: {
			color: '#000000',
			opacity: 0.6,
			zindex: 100
		},
		box: {
			position: 'absolute'
		},
		hideOnClick: false,
		frame: null
		/*onShow: $empty(box),
		onHide: $empty(box),
		onShowComplete: $empty(box),
		onHideComplete: $empty(box),
		*/
		
	},
	
	initialize: function(options) {
		this.setOptions(options);
		
		this.frameLoaded = false;
		this.overlayLoaded = false;
	},
	
	show: function() {
		var overlay = this.getOverlay();
		var box = this.getBox();

		this.frameLoaded = false;
		this.overlayLoaded = false;
		
		this.loadFrame(box);
		
		this.fireEvent('show', box);
		
		overlay.setStyle('display', 'block');
		overlay.set('opacity', 0);
		$(document.body).grab(overlay);

		overlay.set('tween', {
			onComplete: function(element) {
				if (this.frameLoaded) {
					this.ready(box)
				}
				this.overlayLoaded = true;
			}.bind(this)
		});
		overlay.fade(this.options.overlay.opacity);
	},
	
	hide: function() {
		var overlay = this.getOverlay();
		var box = this.getBox();
		
		this.fireEvent('hide', box);
		this.hideBox(box);

		overlay.set('tween', {
			onComplete: function(overlay) {
				overlay.setStyle('display', 'none');
				overlay.dispose();
				
				this.fireEvent('hideComplete', box);
			}.bind(this)
		});
		overlay.fade('out');
	},
	
	loadFrame: function(box) {
		if (this.options.frame) {
			this.frameIsLoaded(box);
		}
	},
	
	showBox: function(box) {
		box.grab(this.options.frame);
	//	box.setStyle('display', 'none');
	//	box.reveal();
		box.setStyle('display', 'block');
		$(document.body).grab(box);
		box.position();
		box.setStyle('position', this.options.box.position);
		this.fireEvent('showComplete', box);
	},
	
	hideBox: function(box) {
		box.setStyle('display', 'none');
	},
	
	getBox: function() {
		if (!this.box) {
			this.box = new Element('div');
			this.box.setStyles({
				'z-index': this.options.overlay.zindex + 10
			});
		}
		return this.box;
	},
	
	getOverlay: function() {
		if (!this.overlay) {
			this.overlay = new Element('div');
			
			this.overlay.setStyles({
				width: '100%',
				height: '100%',
				top: '0px',
				left: '0px',
				position: 'fixed',
				'background-color': this.options.overlay.color,
				margin: '0px',
				'z-index': this.options.overlay.zindex
			});
			
			if (this.options.hideOnClick) {
				this.overlay.addEvent('click', function(event) {
					this.hide();
				}.bind(this));
			}
			
			this.overlay.set('tween', {
				duration: 'short'
			});
		}
		return this.overlay;
	},
	
	getFrame: function() {
		return this.options.frame;
	},
	
	frameIsLoaded: function(box) {
		if (this.overlayLoaded) {
			this.ready(box);
		}
		this.frameLoaded = true;
	},
	
	ready: function(box) {
		this.showBox(box);
	}
});

Lightbox.AJAX = new Class({
	
	Extends: Lightbox,
	
	options: {
		url: '',
		method: 'post',
		data: {}
	},
	
	initialize: function(options) {
		this.parent(options);
		
		var box = this.getBox();
		if (!this.options.frame) {
			this.options.frame = new Element('div');
		}
		
		this.request = new Request.HTML({
			url: this.options.url,
			method: this.options.method,
			update: this.options.frame,
			onSuccess: function() {
				this.frameIsLoaded(box);
			}.bind(this)
		});
	},
	
	show: function(data) {
		if (data) {
			this.options.data = data;
		}
		this.parent();
	},
	
	loadFrame: function(box) {
		this.request.send({
			data: this.options.data
		});
	}
	
	
});