Element.implement({
	hide: function() {
		return this.setStyle('opacity',0);
	},

	show: function() {
		return this.setStyle('opacity',1);
	}
});

/**
 * Lightbox - a JS class to control a built in lightbox window.
 * HTML prerequisites: 
 * - underlay to mask the rest of the site
 * - window - the container
 * - content - an HTML container to put content as a string
 * - iframe - to show a page in. 
 * They're accessed by ID. Id's are stored within the options-object used on initialisation
 * 
 * Relevant methods: 
 *  - showURL to show a page within the iframe-object
 *  - showContent to show content - passed as a string.
 *  
 * @author Bart Stroeken
 */
var Lightbox = new Class({
	
	Implements: new Options(),
	
	/**
	 * Config
	 */
	options: {
		containers: {
			underlay : 'lightboxUnderlay',
			window : 'lightboxWindow',
			content : 'lightboxContent',
			iframe : 'lightboxIframe',
			title : 'lightboxTitle'
		},
		
		spacing: {
			height: 250,
			header: 55
		}
	},
	
	/**
	 * Setup all containers, store the body's and html-object's overflow
	 * add an eventhandler to the iframe to resize the lightboxWindow
	 * 
	 */
	initialize: function(options){

		this.setOptions(options);
		
		this.obj = $(this.options.containers.window);
		this.title = $(this.options.containers.title);
		this.contentdiv = $(this.options.containers.content);
		this.iframe = $(this.options.containers.iframe);
		if ($chk(this.iframe)){
			this.iframe.addEvent('load', this.resize.bind(this));
		}

		this.overlay.object = $(this.options.containers.underlay);
	},

	/**
	 * Overlay-object 
	 * to be shown and to be hidden.
	 */
	overlay : {
		object: null,
		
		display: function(){
			this.object.removeClass('hidden');
			var selects = $$('select');
			selects.each(function(el){ el.addClass('hidden');});
			this.checkBodyStyles();
			this.documentbody.setStyle('overflow', 'hidden');
		},
		
		checkBodyStyles: function(){
			if (!$chk(this.documentbody)){
				this.documentbody = $(window.document.body);
				this.documenthtml = $(window.document.html);

				this.flowStyles = {
					body: this.documentbody.getStyle("overflow"),
					html: this.documenthtml.getStyle("overflow")
				}; 		
				
			}
			
		},
		
		hide : function(){
			var selects = $$('select');
			selects.each(function(el){ el.removeClass('hidden');});
			this.object.addClass('hidden');
			this.documentbody.setStyle('overflow', this.flowStyles.body);
		}
	},
	
	/**
	 * Display a page in the lightbox
	 * Start observing the window's resize-event for resizing the lightboxWindow along
	 */
	showUrl: function(url, title){
		this.overlay.display();
		this.iframe.setProperty('src', url);
		this.obj.show();
		if ($chk(title)){
			this.title.set('html', title);
		}
		if (this.obj.hasClass('hidden')){
			this.obj.removeClass('hidden');
		}
		
		this.active = 'iframe';
		this.resize();
		window.addEvent('resize', this.resize.bind(this));
	},
	
	/**
	 * Display a string of content within the lightbox
	 * Start observing the window's resize-event for resizing the lightboxWindow along
	 */
	showContent: function(content, title){
		this.overlay.display();
		this.contentdiv.set('html', content);
		this.obj.show();
		
		if ($chk(title)){
			this.title.set('html', title);
		}
		if (this.obj.hasClass('hidden')){
			this.obj.removeClass('hidden');
		}
		this.active = 'content';
		this.resize();
		window.addEvent('resize', this.resize.bind(this));
	},
	
	/**
	 * Resize the lightboxWindow
	 * The width is set by CSS - the height is calculated
	 */
	resize: function(){
		size = this.obj.getSize();
		var maxheight = window.getHeight()- this.options.spacing.height;
		w =  -(size.x/2) + 'px';
		
		if (this.active == 'iframe'){
			this.iframe.setStyle('height', maxheight + 'px');
			this.contentdiv.setStyle('height', '0px');
		} else {
			this.iframe.setStyle('height', '0px');
			this.contentdiv.setStyle('height', maxheight + 'px');
		}
		this.obj.setStyles({
			'marginLeft' : w,
			'marginTop' : - ((maxheight+this.options.spacing.header)/2) + 'px'
		});
	},
	
	/**
	 * - Hide the overlay
	 * - clear the content's HTML
	 * - removes the iframe's src
	 * - removes the resize-observer
	 */
	hide: function(){
		this.overlay.hide();
		this.contentdiv.set('html', '');
		this.iframe.removeProperty('src');
		window.removeEvent('resize', this.resize.bind(this));
		this.obj.hide();
	}
});

var lightbox;
window.addEvent('domready', function(){
	lightBox = new Lightbox();
});