var Overlay = new Class({
    options: {
        'executeScripts': true,       // Option to evaluate scripts in the response text
        'ajaxMethod': 'get',      // Option to evaluate the whole response text
        'status': 'closed'   // Status of ModalWindow (open, recycling or closed)
    },

    initialize: function(templateUrl, options) {
        this.template = { 'url': templateUrl, 'base': null, 'title': null, 'properties': null };
        this.eventKeyDown = this.closeKeyListener.bindWithEvent(this);
        this.eventPosition = this.setCover.bind(this);
        this.getTemplate();
        this.overlayMargin = 0;
        this.setOptions(options);
        if (this.options.overlayMargin) {
            this.overlayMargin = this.options.overlayMargin;
        }
    },

    buildTemplate: function(response) {
        this.template.base = response.body;
        this.template.title = response.title;
        var properties = {};
        for (var i = 0; i < response.scripts.length; i++) {
            if (response.scripts[i].type.toLowerCase() == "text/properties") {
                properties = response.scripts[i].code;
                break;
            }
        }
        this.template.properties = eval("(" + properties + ")");
        this.overlay = new Element('div', { 'id': 'overlay' + new Date().getTime().toString() }).setStyles({ 'position': 'absolute', 'zIndex': '1001', 'left': '50%', 'overflow': 'hidden', 'width': this.template.properties.options.initialWidth + 'px', 'marginLeft': '-' + (this.template.properties.options.initialWidth / 2) + 'px', 'display': 'none' });
        this.overlay.setHTML(this.template.base);

        this.templateHeight = this.overlay.offsetHeight;
        if (this.template.properties.options.overlayMargin && this.overlayMargin == 0) this.overlayMargin = this.template.properties.options.overlayMargin;


        if (this.template.properties.cover) this.buildCover();
    },

    buildCover: function() {
        var coverProps = this.template.properties.cover;
        if (coverProps.enabled) {
            var coverId = "cover" + new Date().getTime().toString();
            this.cover = new Element('div', { 'id': coverId });
            this.cover.setStyles({ 'position': 'absolute', 'width': '100%', 'left': '0', 'display': 'none', 'zIndex': '1000' });
            if (coverProps.background) this.cover.setStyle('background-color', coverProps.background);
            if (coverProps.opacity) this.cover.setStyle('opacity', coverProps.opacity);
            if (coverProps.close) { this.cover.addEvent('click', this.close.bind(this)); this.cover.setStyle('cursor', 'pointer'); }
            this.cover.injectInside(document.body);
        }
    },

    displayContent: function(response) {
        var detatchedDiv = new Element('div');

        detatchedDiv.setHTML(response.body);
        $('dummy-container').adopt(detatchedDiv);
        var calculatedWidth = $('dummy-container').getSize().size.x + 8;
        var calculatedHeight = $('dummy-container').getSize().size.y + 8;
        $('dummy-container').empty();

        if (calculatedWidth != 0 && calculatedHeight != 0) {
            this.overlay.setStyle('width', calculatedWidth);
            this.overlay.setStyle('height', calculatedHeight);
            this.overlay.setStyle('marginLeft', '-' + (calculatedWidth / 2) + 'px');
        }

        if (this.template.properties.zones.titlebar && response.title) $(this.template.properties.zones.titlebar).setHTML(response.title);

        //Making IE6,7,8 work
        //if (response.body) $(this.template.properties.zones.content).setHTML(response.body);
        if (response.body) {
            if (response.body.contains('dining_tabletop_1.jpg')) {
                $(this.template.properties.zones.content).setHTML("<img src='/images/subcategory/product_images/dining_tabletop_1.jpg' />");
            } else if (response.body.contains('dining_tabletop_2.jpg')) {
                $(this.template.properties.zones.content).setHTML("<img src='/images/subcategory/product_images/dining_tabletop_2.jpg' />");
            } else if (response.body.contains('bath_towels_1.jpg')) {
                $(this.template.properties.zones.content).setHTML("<img src='/images/subcategory/product_images/bath_towels_1.jpg' />");
            } else if (response.body.contains('dining_furniture_1.jpg')) {
                $(this.template.properties.zones.content).setHTML("<img src='/images/subcategory/product_images/dining_furniture_1.jpg' />");
            } else if (response.body.contains('homeoffice_1.jpg')) {
                $(this.template.properties.zones.content).setHTML("<img src='/images/subcategory/product_images/homeoffice_1.jpg' />");
            }
        }

        if (this.template.properties.options.autoHeight) {
            var maxHeight = (Window.getHeight() - (this.overlayMargin * 2)) - 60;
            if ((this.overlay.offsetHeight > maxHeight) && (maxHeight > 0)) { $(this.template.properties.zones.content).setStyle('height', maxHeight + 'px'); }
        }
        if (this.options.executeScripts && response.scripts) this.contentLoader.executeScripts();
    },

    getTemplate: function() {
        var buildTemplate = this.buildTemplate.bind(this);
        this.templateLoader = new Loader(this.template.url, { onLoad: buildTemplate });
        this.templateLoader.load();
    },

    getContent: function(url, formid) {
        var displayContent = this.displayContent.bind(this);
        this.contentLoader = new Loader(url, { onLoad: displayContent });
        this.contentLoader.load();
    },

    setCover: function() {
        this.cover.setStyles({ 'display': '', 'top': Window.getScrollTop() + 'px', 'height': Window.getHeight() + 'px' });
    },

    setButtons: function() {
        var closers = this.template.properties.buttons.close;
        if (closers != null) {
            for (var i = 0; i < closers.length; i++) {
                $(closers[i]).setStyle('cursor', 'pointer');
                $(closers[i]).addEvent('click', this.close.bind(this));
            }
        }
    },

    open: function(url, formid) {
        if (this.template.properties.cover && this.template.properties.cover.enabled) this.setCover();
        this.top = Window.getScrollTop() + this.overlayMargin;
        this.overlay.setStyles({ 'display': '', 'top': this.top + 'px' });

        if (this.options.status == "closed") {
            this.overlay.injectInside(document.body);
            //this.template.properties.transitions.open();
        }
        else if (this.options.status == "open") {
            this.template.properties.transitions.recycle();
        }

        $(this.template.properties.zones.content).setStyle('height', '');
        document.addEvent('keydown', this.eventKeyDown);
        window.addEvent('scroll', this.eventPosition).addEvent('resize', this.eventPosition);

        if (this.template.properties.buttons) this.setButtons();

        this.options.status == "open";
        this.getContent(url, formid);
    },

    closeKeyListener: function(event) {
        // close the ModalWindow when the user presses CTRL + W, CTRL + X, ESC
        if ((event.control && event.key == "w") || (event.control && event.key == "x") || (event.key == "esc")) {
            this.close();
            event.stop();
        }
    },

    close: function() {
        if (this.template.properties.transitions && this.template.properties.transitions.close) {
        }
        else {
            this.overlay.setStyle('display', 'none');
            this.cover.setStyle('display', 'none');
        }
        document.removeEvent('keydown', this.eventKeyDown);
        window.removeEvent('scroll', this.eventPosition).removeEvent('resize', this.eventPosition);
        $(this.template.properties.zones.content).setHTML("");
        this.options.status = "closed";
    }
});

Overlay.implement(new Events, new Options);