/*
* based on Facebox by Chris Wanstrath -- http://famspam.com/facebox
* 
* :: ported to the Prototype JS library by ::
* Phil Burrows
* http://blog.philburrows.com
* peburrows@gmail.com
* Date: 3 May 2008
*
*
* Usage:
*  
* This Prototype version is setup to automatically run when the window's load event is fired (see last three lines of this file),
* so usage is as easy as adding rel="facebox" to any link you want to use Facebox
*
* AGAIN, kudos to to Chris Wanstrath and the guys from ErrFree for really putting in the brunt of the effort exerted on this
* I just spent an evening taking all their work and molding it into something that would use Prototype
*/


var Facebox = Class.create({
	initialize	: function(extra_set){
		this.settings = {
			loading_image	: 'img/default/ld.gif',
			close_image		: 'img/default/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> \
	        <tbody> \
	          <tr> \
	            <td class="tl"/><td class="mt"/><td class="tr"/> \
	          </tr> \
	          <tr> \
	            <td class="sl"/> \
	            <td class="body"> \
	              <div class="fhd"> \
	                <a href="#" id="close_grey_formbox" class="close"> \
	                  <img src="img/default/close-grey.png" title="close" class="close_image" /> \
	                </a> \
					<a href="index.php?do=productaction&sub=basicemail" id="close_grey_formbox_basicemail" class="close" style="display:none;"> \
	                  <img src="img/default/close-grey.png" title="close" class="close_image" /> \
	                </a> \
	              </div> \
					<div class="content" id="fbcontent"> \
	              </div> \
	            </td> \
	            <td class="sr"/> \
	          </tr> \
	          <tr> \
	            <td class="bl"/><td class="mb"/><td class="br"/> \
	          </tr> \
	        </tbody> \
	      </table> \
	    </div> \
	  </div>'
		};
		if (extra_set) Object.extend(this.settings, extra_set);
		$$('body').first().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, #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.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()
		});
	},
	
	watchClickEvents: function(e){
		var f = this;
		$$('a[rel=facebox]').each(function(elem,i){
			Event.observe(elem, 'click', function(e){
				Event.stop(e);
				f.click_handler(elem, e);
			});
		});
		
	},
	
	loading	: function() {
		if ($$('#facebox .loading').length == 1) return true;
		
		contentWrapper = $$('#facebox .content').first();
		contentWrapper.update('');
		contentWrapper.childElements().each(function(elem, i){
			elem.remove();
		});
		contentWrapper.insert({bottom: '<div class="loading"><img src="'+this.settings.loading_image+'"/></div>'});
		var scrollY = 0;
		if(typeof(window.pageYOffset) == 'number') {
        	scrollY = window.pageYOffset;
      	} else if(document.body && (document.body.scrollLeft || document.body.scrollTop)) {
        	scrollY = document.body.scrollTop;
      	} else if(document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) {
        	scrollY = document.documentElement.scrollTop;
      	}
		$('facebox').setStyle({'marginTop': scrollY+'px'});
	},
	
	reveal	: function(data, klass){
		contentWrapper = $$('#facebox .content').first();
		if (klass) contentWrapper.addClassName(klass);
		contentWrapper.insert({bottom: data});
		load = $$('#facebox .loading').first();
		load.remove();
		$$('#facebox .body').first().childElements().each(function(elem,i){
			//elem.show();
			//elem.Appear();
			Effect.Appear(elem);
		});
		//Event.observe(document, 'keypress', this.keyPressListener);
	},
	
	close: function(){
		$('facebox').hide();
	},
	
	click_handler	: function(elem, e){
		this.loading();

		if(e)
			Event.stop(e);

		if(typeof(elem) == 'object'){
			var klass = elem.rel.match(/facebox\[\.(\w+)\]/);
			if (klass) klass = klass[1];
			url = elem.href;
		}
		else{
			url = elem;
		}
		var fb = this;
		
		new Ajax.Request(url+'&fb=true', {
			method		: 'get',
			onComplete	: function(transport){
				fb.reveal(transport.responseText, klass);
				var viewportheight;
				if (typeof window.innerWidth != 'undefined')
					viewportheight = window.innerHeight
				else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0)
					viewportheight = document.documentElement.clientHeight;
				else
					viewportheight = document.getElementsByTagName('body')[0].clientHeight
				var space = viewportheight - $('facebox').getHeight();
				var mt = Math.round(space/2);
				if(mt < 0)
					mt = 5;
				$('facebox').setStyle({top: mt+'px'});
				$('facebox').show();
			}
		});
	}

});

var facebox;
Event.observe(window, 'load', function(e){
	facebox = new Facebox();
});