/**
 * Lightbox class
 * @author Johan
 */
var LightboxClass = Class.create({
        overlay: null,
        content: null,
        contentWidth: 500,
        contentHeight: 500,
        /**
         * Create the elements
         */
        initialize: function() {
                var body = $(document.body);
                // create overlay (background) element:
                this.overlay = new Element('div', {
                        id: 'lightbox-overlay'
                }).setStyle({
                        width: document.viewport.getWidth()+'px',
                        height: document.viewport.getHeight()+'px',
                        opacity: 0.8
                })
                .observe('click', this.hide.bindAsEventListener(this))
                .hide();
                Event.observe(window, 'resize', this.updateLightBox.bind(this));

                // create content element:
                this.content = new Element('div', {
                        id: 'lightbox-content'
                }).hide();

                body.insert({bottom: this.overlay});
                body.insert({bottom: this.content});
        },

        /**
         * The default create (shortcut)
         */
        create: function(url, ajaxOptions, afterFinish) {
                this.createFromAjax(url, ajaxOptions, afterFinish);
        },

        /**
         * Create a lightbox from specific content
         */
        createFromText: function(contents) {
                this.afterFinish = Prototype.K;
                this.lightbox(contents);
        },

        /**
         * Create a lightbox from an ajax result
         */
        createFromAjax: function(url, ajaxOptions, afterFinish) {
                if(typeof(ajaxOptions) == 'undefined') {
                        ajaxOptions = {method: 'get'}
                }

                this.afterFinish = afterFinish;
                if(typeof(afterFinish) == 'undefined') {
                        this.afterFinish = Prototype.K;
                }
                ajaxOptions.onSuccess = function(transport) {
                    this.lightbox(transport.responseText);
                }.bind(this);
                new Ajax.Request(url, ajaxOptions);
        },

        /**
         * Create a lightbox
         */
        lightbox: function(contents) {
                var viewportOffsets = document.viewport.getScrollOffsets();
                this.overlay.setStyle({
                        width: document.viewport.getWidth()+'px',
                        height: document.viewport.getHeight()+'px'
                }).show();
                this.content.update(contents).show();
                var divElement = this.content.down("div")
                if(divElement) {
                    divElement.hide();

                    // take the left from the contentwrapper and set the lightbox to outline on the same width
                    divElement.setStyle({ left: $("contentwrapper").cumulativeOffset().left + "px" });

                    Effect.Appear(divElement, { duration: 0.5 });
                }
                this.afterShow();
                this.afterFinish(this.content);
                /**
                 * Add functionality for the closebutton
                 */
                var closeButton = $("lightboxCloseButton");
                if(closeButton) {
                    closeButton.observe("click", function(event) {
                        Lightbox.hide(event);
                    });
                }
        },

        /**
         * Hide the active lightbox
         */
        hide: function(event) {
                if(event) event.stop();
                this.overlay.hide();
                this.content.update('').hide();
                this.afterHide();
        },

        /**
         * Update the overlay to the new window size
         */
        updateLightBox: function() {
            this.overlay.setStyle({
                width: document.viewport.getWidth()+'px',
                height: document.viewport.getHeight()+'px'
            });
        },

        /**
         * Callbacks
         */
        afterShow: function() {},
        afterHide: function() {}
});
var Lightbox2;

document.observe('dom:loaded', function() {
    Lightbox2 = new LightboxClass();
	Lightbox2.afterShow = function() {
		$$('div.videoContainer').invoke('setStyle', { visibility:'hidden' });
	}
	Lightbox2.afterHide = function() {
		$$('div.videoContainer').invoke('setStyle', { visibility:'visible' });
	}
});