var Overlay = new Class({

    element: null,

    initialize: function() {
        this.element = new Element('div', {
            'styles': {
                'opacity': 0,
                'z-index': '600',
                'background': '#111',
                'top': 0,
                'left': 0,
                'position': 'absolute',
                'width': '100%',
                'height': document.getScrollSize().y
            }
        }).injectInside(document.body);
    },

    open: function() {
        new Fx.Morph(this.element).start({
            'opacity': 0.35
        }).chain(function() {

        }.bind(this));
    },

    close: function() {
        new Fx.Morph(this.element).start({
            'opacity': 0
        }).chain(function() {
            this.element.destroy();
        }.bind(this));
    }

});


Popup = new Class({

    href: null,
    overlay: null,

    initialize: function(href) {
        this.overlay = new Overlay();
        this.overlay.open();
        this.href = href;

        this.load();
        this.init_events();
        this.init_close();
    },

    init_close: function() {
        var close = new Element('a', {
            'href': '',
            'class': 'close'
        });
        close.injectInside(this.wrapper);
        close.addEvent('click', this.close.bindWithEvent(this));
    },

    init_events: function() {
        this.overlay.element.addEvent('click', function(e) {
            this.close();
        }.bind(this));
        document.addEvent('keydown', function(e) {
            if(e.key == 'esc' && this.wrapper) {
                this.close();
            }
        }.bind(this));
    },

    init_wrapper: function() {
        this.wrapper = new Element('div', {
            'id': 'popup-wrapper',
            'class': 'loading'
        }).injectInside($(document.body));

        this.wrapper.position();
    },

    load: function() {
        this.init_wrapper();
        new Request.HTML({
            url: this.href,
            onSuccess: this.load_success.bind(this)
        }).get();
    },

    load_success: function(node, elements, html) {
        this.wrapper.removeClass('loading');
        var content = new Element('div', {
            'html': html,
            'class': 'content',
            'opacity': 0
        }).injectInside(this.wrapper);
        var form = content.getElement('form');
        var width = form.getStyle('width').toInt();
        var height = form.getStyle('height').toInt() + 150;
        new Fx.Morph(this.wrapper, {
            'duration': 400
        }).start({
            'width': width,
            'height': height,
            'left': (0.5 * ($(document.body).getSize().x - width)).toInt(),
            'top': $(document.body).getScroll().y + (0.5 * ($(document.body).getSize().y - height)).toInt()
        }).chain(function() {
            new Fx.Morph(content, {
                'duration': 600
            }).start({
                'opacity': 1
            }).chain(function() {
                if(typeof(init_scripts) == 'function') {
                    init_scripts();
                }
            }.bind(this));
        });
    },

    close: function() {
        this.overlay.close();
        new Fx.Morph(this.wrapper, {
            'duration': 300
        }).start({
            'opacity': 0
        }).chain(function() {
            this.wrapper.destroy();
        }.bind(this));
        return false;
    }

});