/*
 * Facebox (for prototype/scriptaculous)
 * version: 1.0 (21-01-2008)
 * @requires prototype 1.6 and scriptaculous 1.8
 *
 * Examples at http://famspam.com/facebox/
 *
 * Licensed under the MIT:
 *   http://www.opensource.org/licenses/mit-license.php
 *
 * Copyright 2007 Chris Wanstrath [ chris@ozmm.org ]
 * Copyright 2008 Jeroen Zwartepoorte [ jeroen.zwartepoorte@gmail.com ]
 *
 * Usage:
 *  
 *  jQuery(document).ready(function() {
 *    jQuery('a[@rel*=facebox]').facebox() 
 *  })
 *
 *  <a href="#terms" rel="facebox">Terms</a>
 *    Loads the #terms div in the box
 *
 *  <a href="terms.html" rel="facebox">Terms</a>
 *    Loads the terms.html page in the box
 *
 *  <a href="terms.png" rel="facebox">Terms</a>
 *    Loads the terms.png image in the box
 *
 *
 *  You can also use it programmatically:
 * 
 *    jQuery.facebox('some html')
 *
 *  This will open a facebox with "some html" as the content.
 *    
 *    jQuery.facebox(function() { ajaxes })
 *
 *  This will show a loading screen before the passed function is called,
 *  allowing for a better ajax experience.
 *
 */


var Facebox = {
	inited        : false,
  loading_image : '/images/loading.gif',
  close_image   : '/images/closelabel.gif',
  image_types   : [ 'png', 'jpg', 'jpeg', 'gif' ],
  facebox_html  : '\
    <div class="popup"> \
      <table style="width:100%;height:150%;"> \
        <tbody> \
          <tr> \
            <td class="tl"/><td class="b"/><td class="tr"/> \
          </tr> \
          <tr> \
            <td class="b"/> \
            <td class="b"> \
      <table> \
        <tbody> \
          <tr> \
            <td class="tl"/><td class="b"/><td class="tr"/> \
          </tr> \
          <tr> \
            <td class="b"/> \
            <td class="body"> \
              <div class="facebox_header"> \
                <a href="#" class="close"> \
                  <img src="" title="close" class="close_image" /> \
                </a> \
              </div> \
              <div class="content"> \
              </div> \
              <div class="footer"> \
              </div> \
            </td> \
            <td class="b"/> \
          </tr> \
          <tr> \
            <td class="bl"/><td class="b"/><td class="br"/> \
          </tr> \
        </tbody> \
      </table> \
            </td> \
            <td class="b"/> \
          </tr> \
          <tr> \
            <td class="bl"/><td class="b"/><td class="br"/> \
          </tr> \
        </tbody> \
      </table> \
    </div>',
	
	facebox: function(element) {
		Facebox.init();
		
		element.observe('click', function(event) {
			Facebox.loading();

			var image_types = Facebox.image_types.join('|')
			image_types = new RegExp('\.' + image_types + '$', 'i')

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

			if (this.href.match(/#/)) { // div already in the page
				var url    = window.location.href.split('#')[0];
				var target = this.href.split('#')[1].replace(url, '');
				var content = $(target).cloneNode(true);
				if (content.id) content.id = "fb_" + content.id;
				$(content).select('*[id]').each(function(el){ el.id = "fb_" + el.id; });
				content.show();
				Facebox.reveal(content, klass);
			} else if (this.href.match(image_types)) { // image
				var image = new Image();
				image.onload = function() {
		          Facebox.reveal('<div class="image"><img src="' + image.src + '" /></div>', klass)
				};
		        image.src = this.href;
			} else { // ajax call
				new Ajax.Request(this.href, { onSuccess: function(transport) {
					Facebox.reveal(transport.responseText, klass);
				}});
			}
			
			event.stop();
		});
	},
	
	init: function(element) {
		if (Facebox.inited)
			return;
		else
			Facebox.inited = true;
		
		var fb = new Element('div', {id: 'facebox', style: 'display:none'});
		fb.update(Facebox.facebox_html);
		$$('body')[0].appendChild(fb);
		
    var preload = [ new Image(), new Image() ];
    preload[0].src = Facebox.close_image;
    preload[1].src = Facebox.loading_image;

    $('facebox').select('.b:first', '.bl', '.br', '.tl', '.tr').each(function(e) {
      preload.push(new Image())
      preload.slice(-1).src = e.getStyle('background-image').replace(/url\((.+)\)/, '$1')
    })

    $('facebox').down('.close').observe('click', Facebox.close);
    $('facebox').down('.close_image').src = Facebox.close_image;
	},
	
	loading: function() {
		var facebox = $('facebox');
		
		if (facebox.down('.loading'))
			return true;
			
		facebox.down('.content').update();
		facebox.down('.body').childElements().invoke('hide');
		facebox.down('.body').appendChild(
			new Element('div', {'class': 'loading'}).update(
				new Element('img', {src: '/images/loading.gif'})
			)
		);
		
		var scroll = document.viewport.getScrollOffsets();
		facebox.setStyle({
			top: scroll[1] + (document.viewport.getHeight() / 10) + 'px',
			left: scroll[0] + 'px'
		});
		
		new Effect.Appear(facebox, {duration: 0.5});
	},
	
	reveal: function(data, klass) {
		var fb = $('facebox');
		if (klass) fb.down('.content').setClassName(klass);
		fb.down('.content').update(data);
		fb.down('.loading').remove();
		fb.down('.body').childElements().each(function (e) {
			new Effect.Appear(e, {duration: 0.5});
		});
	},
	
	close: function(event) {
		new Effect.Fade('facebox', {duration: 0.5, afterFinish: function() {
			$('facebox').down('.content').className = 'content';
		}});
		
		if (event) event.stop();
	}
};

function fireFaceBox(onElement){
	if (document.createEventObject){
		// dispatch for IE
		var evt = document.createEventObject();
		document.getElementById(onElement).fireEvent('onclick');
	}
	else{
		// dispatch for firefox + others
		var evtObj = window.document.createEvent('MouseEvents');
		evtObj.initMouseEvent( "click", true, true, document.defaultView, 1, 0, 0, 0, 0, false, false, true, false, 0, null);
		document.getElementById(onElement).dispatchEvent(evtObj);
	}
}