/* MooTools Facebook modal close */
var fbPopup = new Class({
	Implements: [Options, Events],
	options: {
		title: 'no title',
		width: 450,
		height: false,
		overlay: true,
		overlayEscapes: true,
		overlayOpacity: 0.6,
		closeButton: true,
		allowEscape: true,
		allowFade: true,
		offsetTop: 0,
		data: new Element('div')
	},
	
	initialize: function(options){
		this.setOptions(options);
		this.escapeModal = function(e) { if(e.key == 'esc') { this.destruct(); } }.bind(this);
		this.closeModal = function() { this.destruct();}.bind(this);
		this.drawPopup();
	},
	
	drawPopup: function(){
		if(this.options.overlay) this.createOverlay();
		this.popup();
	},
	
	createOverlay: function(){
		this.overlay = new Element('div').setProperty('class', 'fboverlay').injectInside(document.body);
		this.overlay.setStyles({opacity: this.options.overlayOpacity});
	},
	
	positionEls: function() {
		if(this.overlay) this.overlay.setStyles({top: Window.getScrollTop()+'px', height: Window.getHeight()+'px', width: (Window.getWidth() + Window.getScrollLeft())+'px'});
		var fbpopupHeight = this.infobox.getHeight() / 2;
		var totop = (window.getSize().y / 2)  + this.options.offsetTop + window.getScrollTop() - fbpopupHeight;
		if (totop < 0) totop = 0;
		var toleft = (window.getSize().x / 2) - (this.options.width /2);
		if (toleft < 0) toleft = 0;
		this.infobox.setStyles({top: totop+'px', left: toleft + 'px'});
	},
	
	popup: function (){
		this.infobox = new Element('table').setProperty('class', 'fbtable');
		if(this.options.allowFade) {
			this.infobox.setStyles({'opacity': 0, 'visibility': 'hidden'});
		}
		this.infobox.injectInside(document.body);
		//~ this.infobox.setStyle('zIndex', 999);
		this.infobox.setStyle('width', this.options.width+'px');
		var tbody = new Element('tbody').injectInside(this.infobox);
		var trow = new Element('tr').injectInside(tbody);
		var tl = new Element('td').setProperty('class', 'fbtl').injectInside(trow);
		var tm = new Element('td').setProperty('class', 'fbtm').injectInside(trow);
		var tr = new Element('td').setProperty('class', 'fbtr').injectInside(trow);

		var trow = new Element('tr').injectInside(tbody);
		var ml = new Element('td').setProperty('class', 'fbm').injectInside(trow);
		this.m = new Element('td').setProperty('class', 'fbcontent').injectInside(trow);

		var mr = new Element('td').setProperty('class', 'fbm').injectInside(trow);
		var trow = new Element('tr').injectInside(tbody);
		var bl = new Element('td').setProperty('class', 'fbbl').injectInside(trow);
		var bm = new Element('td').setProperty('class', 'fbbm').injectInside(trow);
		var br = new Element('td').setProperty('class', 'fbbr').injectInside(trow);
		
		if (this.options.title) var title = new Element('h2', {'html': this.options.title, 'class': 'fbtitle'}).inject(this.m);
		
		this.content = new Element('div').injectInside(this.m);
		if (this.options.height) this.content.setStyles({
			'height': this.options.height+'px',
			'overflow-y': 'auto'
		});
		
		/* SET THE CONTENT */
		var dataType = typeof (this.options.data);
		if (dataType == 'object'){
			this.options.data.inject(this.content);
		} else { this.content.set('html', this.options.data);}
		/* Add close button */
		if (this.options.closeButton) {
			var closeDiv = new Element('div', {'class':'statusbar'}).inject(this.m);
			var close = new Element('input', {'type':'button','class':'button', 'value':'Close', events: {
				'click': this.destruct.bind(this)
			}}).inject(closeDiv);
		}
		
		// Center items
		this.positionEls();
		
		if(this.options.allowFade)  {
			var myFx = new Fx.Tween(this.infobox);
			myFx.start('opacity', '0', 1);
		}
		
		if(this.options.allowEscape)  document.addEvent('keypress',this.escapeModal);
		
		this.centerItems = function(){	this.positionEls();}.bind(this)
		window.addEvents({ 
			'resize': this.centerItems,
			'scroll': this.centerItems
		});
		if (this.options.overlay && this.options.overlayEscapes) this.overlay.addEvent('click', this.closeModal);
	},
	
	destruct: function(){
		if(this.options.allowEscape) document.removeEvent('keypress', this.escapeModal);
		window.removeEvent('resize', this.centerItems);
		window.removeEvent('scroll', this.centerItems);
		if (this.overlay) this.overlay.destroy();
		if(this.options.allowFade) {
			new Fx.Tween(this.infobox).start('opacity',0).chain(
				function(){ this.infobox.destroy(); }.bind(this)
			);
		} else this.infobox.destroy();
	}
});