var Fbox = new Class({
	options: {
        draggable: false,
        closeable: true,
        elementsSelector: 'a[rel="facebox"]',
        loading_image : 'images/facebox/loading.gif',
        close_image   : 'images/facebox/closelabel.gif',
        image_types   : [ 'png', 'jpg', 'jpeg', 'gif' ],
        facebox_html  : '\
    <div class="popup"> \
      <table> \
        <tbody> \
          <tr> \
            <td class="tl"/><td class="b"/><td class="tr"/> \
          </tr> \
          <tr> \
            <td class="b"/> \
            <td class="dialog-content"> \
              <h2 class="title"> \
                <span></span> \
              </h2> \
              <div class="body"> \
                <div class="content"> \
                </div> \
                <div class="footer"> \
                  <a href="#" class="close"> \
                    <img src="img/facebox/closelabel.gif" title="close" class="close_image" /> \
                  </a> \
                </div> \
              </div> \
            </td> \
            <td class="b"/> \
          </tr> \
          <tr> \
            <td class="bl"/><td class="b"/><td class="br"/> \
          </tr> \
        </tbody> \
      </table> \
    </div>'
    },
    ShowBox: function(ShowOpt)
	{
		   this.setTitle(ShowOpt.title);
            this.loading();

            // support for rel="facebox[.inline_popup]" syntax, to add a class
            this.reveal('<div>' + ShowOpt.text + '</div>', ShowOpt.klass);
            
	},
 	initialize: function(options) {
        this.setOptions(options);
        
        this.faceboxEl = new Element('div', {
	    'styles': {
	        'display': 'none'
	    },
	    'id': 'facebox'
	}).setHTML(this.options.facebox_html).injectInside(document.body);
 
//		this.faceboxEl.setHTML();
		

	 // preload images
        var preload = [ new Asset.image(this.options.close_image),
                        new Asset.image(this.options.loading_image) ];

//        this.faceboxEl.getElements('.b:first, .bl, .br, .tl, .tr').each(function(el) {
//            preload.push(new Asset.image(el.getStyle('background-image').replace(/url\((.+)\)/, '$1')));
//        });

 		if(this.options.closeable == true)
        {
    	  this.faceboxEl.getElement('.close').addEvent('click',this.close.bind(this));
    	  this.faceboxEl.getElement('.close_image').setProperty('src',this.options.close_image)
        	
    	  
        	this.keydownHdlr = function(e) {
            		e = new Event(e);//.stop();
	           		 if (e.code == 27) {
	           		 	this.close();
	           		 }
//	           		 console.log(e);
	           		 return e.key;
	           		 e.stop();
       		}.bind(this);
        	
        }
        else
        {
        	this.faceboxEl.getElement('.close').setStyle('display','none');
        }
        if (this.options.draggable == true) {
            var dcontentEl = this.faceboxEl.getElement('.dialog-content');
            this.drag = this.faceboxEl.makeDraggable({handle: dcontentEl});
            dcontentEl.setStyle('cursor', 'move');
        }
        
        
        this.applyElements();
        
       

       


 	},
 	loading: function()
 	{
 		if ($defined(this.faceboxEl.getElement('.loading')))
 		{
 			return true;
 		}

        this.faceboxEl.getElement('.content').empty();

        var bodyEl = this.faceboxEl.getElement('.body');
        bodyEl.getChildren().setStyle('display', 'none');
        
        var loadingEl = new Element('div', {'class': 'loading'});
        var loadingImgEl = new Element('img', {'src': this.options.loading_image});
        loadingEl.adopt(loadingImgEl);

        bodyEl.adopt(loadingEl);

        var pageScroll = this.getPageScroll();
        this.faceboxEl.setStyles({
            top: pageScroll[1] + (this.getPageHeight() / 4),
            left: pageScroll[0]
        });

        if(this.options.closeable == true)
        {
        	$(document).addEvent('keydown', this.keydownHdlr);
        }

        this.fadeIn(this.faceboxEl);
 	},
 	 reveal: function(data, klass) {
        if (klass) this.faceboxEl.getElement('.content').addClass(klass);

        if ($type(data) == 'string')
        {
        	this.faceboxEl.getElement('.content').setHTML(data);
        }
        else
        {
        	this.faceboxEl.getElement('.content').adopt(data);
        }
        	this.faceboxEl.getElement('.loading').remove();
        this.faceboxEl.getElement('.body').getChildren().each(this.fadeIn);
    },
 	setTitle: function(title)
 	{
 		 var titleEl = this.faceboxEl.getElement('.title');
        if (title == "")
            titleEl.setStyle('display', 'none');
        else
            titleEl.setStyle('display', 'block');

        titleEl.getElement('span').setText(title);
 	},

    fadeIn: function(el) {
    	
			el.setStyles({
				opacity: 0,
				display: 'block'
			});
			this.fadeFx = el.effect('opacity', {
				duration: 300,
				transition: Fx.Transitions.sineInOut
			});
    	
	 this.fadeFx.start(1)
//    	var mySlider = new Fx.Slide(el, {duration: 500}).show();
    },

    fadeOut: function(el) {
//    var mySlider = new Fx.Slide(el, {duration: 500}).hide();


el.setStyles({
				opacity: 0,
				display: 'none'
			});
			this.fadeFx = el.effect('opacity', {
				duration: 500,
				transition: Fx.Transitions.sineInOut
			});
    	
	 this.fadeFx.start(0)

//        el.setStyle('display', 'none');
    },

    close: function() {
        $(document).removeEvent('keydown', this.keydownHdlr);

        this.fadeOut(this.faceboxEl);
        var contentEl = this.faceboxEl.getElement('.content');
        contentEl.setProperty('class', '');
        contentEl.addClass('content');
        return false;
    },
 	applyElements:function()
 	{
 		
 		 var image_types = this.options.image_types.join('|');
       	 image_types = new RegExp('\.' + image_types + '$', 'i');
       	 
 		 var elements = $$(this.options.elementsSelector);
	     elements.addEvent('click', function(e) 
	     {
	     	 e = new Event(e).stop();
	     	 this.setTitle(e.target.title);
             this.loading();

	 		 var klass = this.fetchClass(e)
	 		 if (e.target.href.match(/#/)) 
	 		 {
	 		 	//div
	 		 	var url = window.location.href.split('#')[0];
	         	var target = e.target.href.replace(url+'#','');
	          	this.reveal($(target).clone().setStyle('display','block'), klass);
	 		 }
	 		 else if (e.target.href.match(image_types)) 
	 		 {
	 		 	//image
	 		 	 var image = new Asset.image(e.target.href, {
	                    onload: function() {
	                        this.reveal('<div class="image"><img src="' + image.src + '" /></div>', klass);
	                    }.bind(this)
	                });
	 		 }
	 		 else
	 		 {
	 		 	//AJAX
	 		 	  var Options = {
						encoding: 'utf-8',
						onSuccess: function(responseText) {
		                        this.reveal(responseText, klass);
		                    }.bind(this)
		            }
					var myXhr = new XHR(Options);
					myXhr.send(e.target.href, Object.toQueryString({
											'_a': 'moobox'
								}));
	 		 }
	 		 return false;
	     }.bind(this));
            
 	},
 	fetchClass:function(e)
 	{
 		var klass = e.target.rel.match(/facebox\[\.(\w+)\]/);
        if (klass) klass = klass[1];
        return klass;
 	},

    // getPageScroll() by quirksmode.com
    getPageScroll: function() {
        var xScroll, yScroll;
        if (self.pageYOffset) {
            yScroll = self.pageYOffset;
            xScroll = self.pageXOffset;
        } else if (document.documentElement && document.documentElement.scrollTop) { // Explorer 6 Strict
            yScroll = document.documentElement.scrollTop;
            xScroll = document.documentElement.scrollLeft;
        } else if (document.body) {// all other Explorers
            yScroll = document.body.scrollTop;
            xScroll = document.body.scrollLeft;	
        }

        return new Array(xScroll,yScroll);
    },

    // adapter from getPageSize() by quirksmode.com
    getPageHeight: function() {
        var windowHeight;
        if (self.innerHeight) {	// all except Explorer
            windowHeight = self.innerHeight;
        } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
            windowHeight = document.documentElement.clientHeight;
        } else if (document.body) { // other Explorers
            windowHeight = document.body.clientHeight;
        }

        return windowHeight;
    }
});

Fbox.implement(new Options, new Events);

 var myFacebox;
window.addEvent('domready',function(){
	
	 myFacebox = new Fbox();
});