/*
 * mooFacebox
 * version: 0.1 (03/10/2008)
 * @requires MooTools v1.2 or later
 *
 * Facebox is a port to mootools of the original 
 * Facebox (http://famspam.com/facebox) written by Chris Wanstrath with some 
 * added features like drag support and titles.
 *
 * Licensed under the MIT:
 *
 *   http://www.opensource.org/licenses/mit-license.php
 *
 * Copyright 2007, 2008 Chris Wanstrath [ chris@ozmm.org ]
 * Copyright 2008 Augusto Becciu [ augusto@becciu.org ]
 *
 * Usage:
 *  
 *  window.addEvent('domready', function() {
 *      var myFacebox = new mooFacebox();
 *  });
 *
 *
 *  <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
 *
 */


var mooFacebox = new Class({

    Implements: Options,

    options: {
        draggable: true,
        elementsSelector: '.modal',
        loading_image : 'img/spinner_big.gif',
        image_types   : [ 'png', 'jpg', 'jpeg', 'gif' ],
        facebox_html  : '\
		<div class="popup"> \
			<h2 class="title"> \
				<span></span> \
			</h2> \
			<div class="body"> \
				<div class="modalcontent"> \
				</div> \
			</div> \
			<div class="footer"> \
				<a href="#" class="close button small">sluiten</a> \
			</div> \
		</div>'
    },

    loading: function() {
        if (this.faceboxEl.getElement('.loading')) return true;

        this.faceboxEl.getElement('.modalcontent').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 = window.getScroll();
		var pageSize = window.getSize();
		
        this.faceboxEl.setStyles({
            top: pageScroll.y + (pageSize.y / 6),
            left: pageScroll.x + (pageSize.x / 2 - this.faceboxEl.getStyle('width').toInt() / 2)
        });

        $(document).addEvent('keydown', this.keydownHdlr);

        this.fadeIn(this.faceboxEl);
    },

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

        if ($type(data) == 'string')
            this.faceboxEl.getElement('.modalcontent').set('html', data);
        else
            this.faceboxEl.getElement('.modalcontent').adopt(data);

        this.faceboxEl.getElement('.loading').destroy();
        this.faceboxEl.getElement('.body').getChildren().each(this.fadeIn);
		initPaperWeightCalc();

    },

    fadeIn: function(el) {
        el.set('tween', {
            onStart: function() {
                el.setStyle('display', 'block');
            }
        });
        el.fade('in');
    },

    fadeOut: function(el) {
        el.set('tween', {
            onComplete: function() {
                el.setStyle('display', 'none');
            }
        });
        el.fade('out');
    },

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

        this.fadeOut(this.faceboxEl);
        var contentEl = this.faceboxEl.getElement('.modalcontent');
        contentEl.set('class', '');
        contentEl.addClass('modalcontent');
        return false;
    },

    setTitle: function(title) {
        var titleEl = this.faceboxEl.getElement('.title');
        if (title == "")
            titleEl.setStyle('display', 'none');
        else
            titleEl.setStyle('display', 'block');

        titleEl.getElement('span').set('text', title);
    },

    initialize: function(options) {
        this.setOptions(options);

        this.faceboxEl = new Element('div', {'id': 'facebox', 'style': 'display: none;'});
        this.faceboxEl.fade('hide');
        this.faceboxEl.set('html', this.options.facebox_html);

        $(document.body).adopt(this.faceboxEl);

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

        this.faceboxEl.getElement('.close').addEvent('click', this.close.bind(this));

        if (this.options.draggable == true) {
            var dcontentEl = this.faceboxEl.getElement('.dialog-content');
            this.drag = this.faceboxEl.makeDraggable({handle: dcontentEl});
            dcontentEl.setStyle('cursor', 'move');
        }

        this.keydownHdlr = function(e) {
            //e = new Event(e);
            //e.stop();

            if (e.code == 27) this.close();
        }.bind(this);

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

        var elements = $$(this.options.elementsSelector +',.alert');

        elements.addEvent('click', function(e) {
            e = new Event(e);
            e.stop();
			
            this.setTitle(e.target.title);
			this.faceboxEl.set('class', '');
					
			this.loading();
												
           	// support for rel="facebox[.inline_popup]" syntax, to add a class
            var klass = e.target.rel.match(/facebox\[\.(\w+)\]/);
            if (klass) klass = klass[1];

            // div
            if (e.target.href.match(/#/)) {
                var url = window.location.href.split('#')[0];
                var target = e.target.href.replace(url+'#','');
                this.reveal($(target).clone().setStyle('display','block'), klass);

            // image
            } else if (e.target.href.match(image_types)) {
                var image = new Asset.image(e.target.href, {
                    onload: function() {
                        this.reveal('<div class="image"><img src="' + image.src + '" /></div>', klass);
                    }.bind(this)
                });

            // ajax
            } else {
                new Request({
                    url: e.target.href,
                    method: 'get',
                    onSuccess: function(responseText, responseXML) {
                        this.reveal(responseText, klass);
                    }.bind(this)
                }).send();
            }

            return false;
        }.bind(this));

    }

});