/**
 * Lightbox Class
 */
Core.createNamespace('nl.code.lightbox');
nl.code.lightbox.Lightbox = new Class({
    /**
     * Constructor
     *
     * @param integer, the identifier
     */
    initialize: function(id) {
        this.id = id;

        this.data = null;
        this.visible = false;

        this.container = this.getContainer();

        var thisObject = this;

        // set the style for the canvas
        this.overlay = this.container.getElement('div.overlay');
        this.overlay.setStyle('opacity', 0);
        this.overlay.addEvent('click', function(event) {
            event.stop();

            thisObject.hide();
        });

        // get the canvas
        this.canvas = this.container.getElement('div.canvas');

        // get the content
        this.content = this.container.getElement('div.content');

        // get, if available, the animation object
        try {
            this.animation = new LightboxAnimation(this);
        } catch (e) {
            this.animation = null;
        }

        window.addEvent('resize', function() {
            thisObject.setSize();
        });
    },

    /**
     * @param integer
     * @return void
     */
    setZIndex: function(zIndex) {
        this.container.setStyle('z-index', zIndex);
    },

    /**
     * Show the lightbox
     *
     * @param JSON, the data
     * @return void
     */
    show: function(data) {
        // check if the content must be preloaded to determine the width or height
        if (data.height === 0 || data.width === 0) {
            var preloader = new nl.code.lightbox.Preloader(data, this);
        } else if (this.animation !== null) {
            this.animation.show(data);
        } else {
            this.overlay.setStyle('opacity', 0.8);
            this.setSize(data);
            this.setContent(data.content);
            this.container.setStyle('display', 'block');
        }
    },

    /**
     * Set the content of the lightbox
     *
     * @param string
     * @return void
     */
    setContent: function(content) {
        this.visible = true;
        this.content.set('html', content);

        var thisObject = this;
        var anchor_arr = this.content.getElements('a[rel=close]');
        for (var i = 0; i < anchor_arr.length; i++) {
            anchor_arr[i].addEvent('click', function(event) {
                event.stop();

                nl.code.lightbox.Lightboxer.hideLightbox(thisObject.id);
            });
        }

        anchor_arr = this.content.getElements('a');
        for (var i = 0; i < anchor_arr.length; i++) {
            if (anchor_arr[i].get('rel') == 'lightbox') {
                continue;
            }

            if (anchor_arr[i].get('rel') == 'close') {
                continue;
            }

            if (! nl.code.pager.Uri.isInternalUrl(anchor_arr[i])) {
                continue;
            }

            anchor_arr[i].addEvent('click', function(e) {
                nl.code.lightbox.Lightboxer.hideAllLightboxes();
            });
        }

        nl.code.lightbox.Lightboxer.pager.scanContent(this.content);

        this.content.setStyle('display', 'block');
    },

    /**
     * Remove the content of the lightbox
     *
     * @return void
     */
    removeContent: function() {
        this.visible = false;
        this.content.empty();
        this.content.setStyle('display', 'none');
    },

    /**
     * @param JSON
     * @return void
     */
    setSize: function(data) {
        if (!$type(data)) {
            data = {width: this.canvas.getSize().x, height: this.canvas.getSize().y};
        }

        this.overlay.setStyles({
            width: nl.code.lightbox.Lightboxer.calculateWindowWidth(data.width),
            height: nl.code.lightbox.Lightboxer.calculateWindowHeight(data.height)
        });

        this.canvas.setStyles({
            width: data.width,
            height: data.height,
            left: nl.code.lightbox.Lightboxer.calculateCanvasXPosition(data.width),
            top: nl.code.lightbox.Lightboxer.calculateCanvasYPosition(data.height)
        });
    },

    /**
     * Hide the lightbox
     *
     * @return void
     */
    hide: function() {
        if (this.animation !== null) {
            this.animation.hide();
        } else {
            this.removeContent();
            this.container.setStyle('display', 'none');
        }
    },

    /**
     * Get the container for the lightbox
     *
     * @return Element
     */
    getContainer: function() {
        var container = $('lightbox');

        // if no container in the document create one
        if (! container) {
            container = this.renderContainer();
        }

        // clone the html, in this way another lightbox can use the same html
        return container.clone().inject($(document.body));
    },

    /**
     * Render the lightbox container
     *
     * @return Element
     */
    renderContainer: function() {
        var container = new Element('div', {'class': 'lightbox', 'id': 'lightbox'});
        var overlay = new Element('div', {'class': 'overlay'});

        // use a canvas element, in this way you can animate the lightbox without showing the content
        var canvas = new Element('div', {'class': 'canvas'});
        var content = new Element('div', {'class': 'content'});

        container.inject($(document.body));
        overlay.inject(container);
        canvas.inject(container);
        content.inject(canvas);

        return container;
    }
});