/**************************************************************

	Script	: Pop Up Overlay
	Version	: 1.1
	Authors	: Marcus Sykes
	Desc	: Creates a popup with an overlay that covers the page contents below it
	Licence	: Open Source MIT Licence

**************************************************************/
var popUpOverlay = new Class({
	Implements : Options,
	options: {
		className:'help',
		title:'text',
		closeText:'Close X',
		duration:500,
		errorText:"Due to a system error, we could not retreive the requested information. We apologize for the inconvenience.",
		closeStyles:{
			opacity:[0.75, 0]
		},
		openStyles:{
			opacity:[0, 0.75]
		},
		onLoad: (function(){}),
		onLoaded: (function(){}),
		onClose: (function(){}),
		onClosed: (function(){}),
		onOpen: (function(){}),
		onOpened: (function(){})
	},
	initialize: function(options){
		this.setOptions(options);
		//Create overlay divs
			//Overlay
				this.overlay = new Element('div', {'id':'overlay'});
				this.overlay.inject(document.body);
			//Overlay Window
				this.overlayWindow = new Element('div', {'id':'overlay_window'});
				this.overlayWindow.inject(document.body);
				//Window content template
					this.overlayContent = new Element('div', {'id':'overlay_content'});
					this.overlayContent.inject(this.overlayWindow)
					new Element('h2', {'class':'title'}).inject(this.overlayContent).set('html', ' ');
					new Element('div', {'class':'content'}).inject(this.overlayContent);
					new Element('a', {
						'id':'overlay_close',
						'events':{
							'click': (function(e){
								this.closeOverlay.start(this.options.closeStyles);
							}).bind(this)
						}
					}).inject(this.overlayWindow).set('text', this.options.closeText);
					
		//Add style effects to overlay open/close
			this.closeOverlay = new Fx.Morph(this.overlay, {
				duration : this.options.duration, 
				link : 'ignore',
				onStart : (function(){
					this.overlayWindow.setStyle('display','none');
					this.options.onClose();
				}).bind(this),
				onComplete : (function(){
					this.overlay.setStyles({
						'display':'block',
						'opacity':'0'
					});
					this.options.onClosed();
					this.status = 'closed';
				}).bind(this)
			});
			this.openOverlay = new Fx.Morph(this.overlay, {
				duration:this.options.duration, 
				link : 'ignore',
				onStart:(function(){	
					this.overlay.setStyles({
						'display':'block',
						'opacity':'0'
					});
					this.options.onOpen();
				}).bind(this),
				onComplete:(function(){
					this.overlayWindow.setStyle('display', 'block');
					this.status = 'open';
					this.options.onOpened();
				}.bind(this))
			});
			
		//Create the request object
			this.request = new Request.HTML({
				onRequest: (function(){
					//Add loadng class to HTML
					this.overlayContent.getFirst().set('text', 'Loading...');
					this.overlayContent.getLast().set('html', '');
					this.overlayContent.getLast().addClass('ajax-loading');
					this.requestRunning = true;
					this.options.onLoad();
				}).bind(this),
				onComplete: (function(responseTree, responseElements, responseHTML, responseJavaScript){
					this.requestRunning = false;
					this.overlayContent.getFirst().set('text', this.target.get(this.options.title));
					this.overlayContent.getLast().removeClass('ajax-loading');
					this.overlayContent.getLast().set('html', responseHTML);
					this.options.onLoaded();
				}).bind(this),
				onFailure: (function(){
					this.requestRunning = false;
					this.overlayContent.getLast().removeClass('ajax-loading');
					this.overlayContent.getLast().set('html', this.options.errorText);
				}).bind(this)
			});	
			
		//Add events to DOM
			$$('a.' + this.options.className).each( (function(el, i){
				el.addEvent('click', (function(e){
					e.stop();
					this.target = e.target;
					this.request.send({url : e.target.getProperty('href')});
					this.openOverlay.start(this.options.openStyles);
				}).bind(this));
			}).bind(this));
	}
});