/*  Facebox for Prototype, version 2.0
 *  By Robert Gaal - http://wakoopa.com 
 *
 *  Heavily based on Facebox by Chris Wanstrath - http://famspam.com/facebox
 *  First ported to Prototype by Phil Burrows - http://blog.philburrows.com
 *
 *  Licensed under the MIT:
 *  http://www.opensource.org/licenses/mit-license.php
 *
 *  Need help?  Join the Google Groups mailing list:
 *  http://groups.google.com/group/facebox/
 *
 *  Dependencies:   prototype & script.aculo.us + images & CSS files from original facebox
 *  Usage:          Append 'rel="facebox"' to an element to call it inside a so-called facebox
 *
 *--------------------------------------------------------------------------*/

var Facebox = Class.create({
	initialize: function(extra_set)
	{
		this.isopen = false;
		this.pagename = '';

		this.settings = {
			loading_image: '/images/facebox/loading.gif',
			close_image: '/images/facebox/closelabel.gif',
			image_types: new RegExp('\.' + ['png', 'jpg', 'jpeg', 'gif'].join('|') + '$', 'i'),
			inited: true,	
			facebox_html: '\
				  <div id="facebox" style="display:none;"> \
				    <div class="popup"> \
				      <table id="facebox_table"> \
					<tbody> \
					  <tr> \
					    <td class="facebox_tl transparent"/><td class="facebox_b transparent"/><td class="facebox_tr transparent"/> \
					  </tr> \
					  <tr> \
					    <td class="facebox_b transparent"/> \
					    <td class="body"> \
					      <div class="content"> \
					      </div> \
					      <div class="footer"> \
						<a href="#" class="close"> \
						  <img src="'
					};


					this.settings.facebox_html = this.settings.facebox_html + this.settings.close_image + '" title="close" class="close_image" /> \
						</a> \
					      </div> \
					    </td> \
					    <td class="facebox_b transparent"/> \
					  </tr> \
					  <tr> \
					    <td class="facebox_bl transparent"/><td class="facebox_b transparent"/><td class="facebox_br transparent"/> \
					  </tr> \
					</tbody> \
				      </table> \
				    </div> \
				  </div>';


		if (extra_set) Object.extend(this.settings, extra_set);
		$(document.body).insert({bottom: this.settings.facebox_html});
		
		this.preload = [ new Image(), new Image() ];
		this.preload[0].src = this.settings.close_image;
		this.preload[1].src = this.settings.loading_image;
		
		f = this;
		$$('#facebox .b:first-child, #facebox .bl, #facebox .br, #facebox .tl, #facebox .tr').each(function(elem){
			f.preload.push(new Image());
			f.preload.slice(-1).src = elem.getStyle('background-image').replace(/url\((.+)\)/, '$1');
		});
		
		this.facebox = $('facebox');
    		this.keyPressListener = this.watchKeyPress.bindAsEventListener(this);
		
		this.watchClickEvents();
		fb = this;
		Event.observe($$('#facebox .close').first(), 'click', function(e){
			Event.stop(e);
			fb.close();
		});
		Event.observe($$('#facebox .close_image').first(), 'click', function(e){
			Event.stop(e);
			fb.close();
		});
	},
	
	watchKeyPress: function(e)
	{
		// Close if espace is pressed or if there's a click outside of the facebox
		if (this.isopen && (e.keyCode == 27 || !Event.element(e).descendantOf(this.facebox))) this.close();
	},
	
	watchClickEvents: function(e)
	{
		var f = this;
		$$('a[rel=facebox]').each(function(elem,i)
		{
			Event.observe(elem, 'click', function(e)
			{
				// Get the pagename from the href
				pagename = '';
				href = elem.href.toString();
				
				pagename = href.split('.php');
				pagename = pagename.shift().split('/');
				pagename = pagename.pop();
				
				Event.stop(e);
				f.click_handler(elem, e, pagename);
			});
		});
	},
	
	loading: function()
	{
		if ($$('#facebox .loading').length == 1) return true;
		
		contentWrapper = $$('#facebox .content').first();
		contentWrapper.childElements().each(function(elem, i){
			elem.remove();
		});
		contentWrapper.insert({bottom: '<div class="loading"><img src="'+this.settings.loading_image+'"/></div>'});
		
		var pageScroll = document.viewport.getScrollOffsets();
		this.facebox.setStyle({
			'top': pageScroll.top + (document.viewport.getHeight() / 10) + 'px',
			'left': document.viewport.getWidth() / 2 - (this.facebox.getWidth() / 2) + 'px'
		});
		
    		Event.observe(document, 'keypress', this.keyPressListener);
    		Event.observe(document, 'click', this.keyPressListener);
	},
	
	reveal: function(data, klass)
	{
		this.loading();
		load = $$('#facebox .loading').first();
		if(load) load.remove();
		
		contentWrapper = $$('#facebox .content').first();
		if (klass) contentWrapper.addClassName(klass);
		contentWrapper.insert({bottom: data});
		
		$$('#facebox .body').first().childElements().each(function(elem,i){
			elem.show();
		});
    		
		if(!this.facebox.visible()) new Effect.Appear(this.facebox, {duration: .3});
		this.facebox.setStyle({
			'left': 870 / 2 - (this.facebox.getWidth() / 2) + 'px'
		});
		
		Event.observe(document, 'keypress', this.keyPressListener);
		Event.observe(document, 'click', this.keyPressListener);
	},
	
	close: function()
	{
		new Effect.Fade('facebox', {duration: .3});

//		if (this.pagename != '')
//		{
//			// Run the close callback function on the dashboard
//			dashboard_closefaceboxcb(this.pagename);
//		}
		
		this.isopen = false;
	},
	
	click_handler: function(elem, e, pagename)
	{
		this.loading();
		Event.stop(e);
		
		// Save the pagename
		this.pagename = pagename;

		// support for rel="facebox[.inline_popup]" syntax, to add a class
		var klass = elem.rel.match(/facebox\[\.(\w+)\]/);
		if (klass) klass = klass[1];

		// Show the facebox
		new Effect.Appear(this.facebox, {duration: .3});

		this.isopen = true;

		if (elem.href.match(/#/)){
			var url			= window.location.href.split('#')[0];
			var target	= elem.href.replace(url+'#','');
			// var data			= $$(target).first();
			var d			  = $(target);
			// create a new element so as to not delete the original on close()
			var data = new Element(d.tagName);
			data.innerHTML = d.innerHTML;
			this.reveal(data, klass);
		} else if (elem.href.match(this.settings.image_types)) {
			var image = new Image();
			fb = this;
			image.onload = function() {
				fb.reveal('<div class="image"><img src="' + image.src + '" /></div>', klass)
			}
			image.src = elem.href;
		} else {
			var fb  = this;
			var url = elem.href+(elem.href.indexOf('?') > 0 ? '&skin=none' : '?skin=none');
			new Ajax.Request(url, {
				method		: 'get',
				onFailure	: function(transport){
					fb.reveal(transport.responseText, klass);
				},
				onSuccess	: function(transport){
					fb.reveal(transport.responseText, klass);
				}
			});
			
		}
	}
});

var facebox;
// Initial facebox is loaded at bottom of refering page...

function reloadFaceboxCodeObject()
{
	// Stop observing keypresses & clicks-outside-of-the-box
	facebox.keyPressListener = null;

	// Stop observing link clicks
	$$('a[rel=facebox]').each(function(elem, i)
	{
		$(elem).stopObserving();
	});

	// Restart observations
	facebox.keyPressListener = facebox.watchKeyPress.bindAsEventListener(facebox);
	facebox.watchClickEvents();
}