var InfoOverlay = Class.create();

InfoOverlay.prototype = {

    initialize: function(please_wait_url, url) {

        this.url = url;
        this.please_wait_url = please_wait_url;
        this.loaded = false;

        content = $('info-overlay');
        over = $('mz-overlay');

        if (content == null) {
            this.content = new Element('div', {'id': 'info-overlay'}).hide();
            this.subcontent = new Element('div').hide();
            Element.insert(this.content, this.subcontent);
            Element.insert(document.body, this.content, {position: top});
        } else {
            this.content = content;
            this.subcontent = new Element('div').hide();
            Element.insert(this.content, this.subcontent);
            Element.hide(this.content);
        }

        if (over == null) {
            this.overlay = new Element('div', {'id': 'mz-overlay'}).hide();
            Element.insert(document.body, this.overlay, {position: top});
        } else {
            this.overlay = over;
            Element.hide(this.overlay);
        }

        var button = $$('#info-overlay .close-button');

        if (button.size()) {
            this.button = button.first();
        } else {
            this.button = new Element('button', {'class': 'close-button', 'type': 'button'});
            Element.insert(this.button, '<span>Close</span>');
            Element.insert(this.content, this.button);
        }

        // Hide the overlay when clicked. Ignore clicks on the dialog.
        Event.observe(this.button, 'click', this.hide.bindAsEventListener(this));
        Event.observe(this.overlay, 'click', this.hide.bindAsEventListener(this));
        Event.observe(this.content, 'click', function(event) {Event.stop(event)});

    },

    getContent: function() {
        var _overlay = this;
        new Ajax.Updater(this.subcontent, this.url, {
            method : 'get',
            onComplete: function() { _overlay.center(); _overlay.loaded = true; }
        });
        return this;
    },

    center: function() {
        var offset = document.viewport.getScrollOffsets();
        var x = Math.ceil(offset[0] + (document.viewport.getWidth() - this.content.getWidth()) / 2) + 'px';
        var y = Math.ceil(offset[1] + (document.viewport.getHeight() - this.content.getHeight()) / 2) + 'px';
        this.content.setStyle({left: x, top: y});
        return this;
    },

    moveCenter: function() {
        var offset = document.viewport.getScrollOffsets();
        var new_x = Math.ceil(offset[0] + (document.viewport.getWidth() - this.content.getWidth()) / 2);
        var new_y = Math.ceil(offset[1] + (document.viewport.getHeight() - this.content.getHeight()) / 2);
        new Effect.Move(this.content, {x : new_x, y : new_y, mode : 'absolute'});
        return this;
    },

    show: function(url) {
        if (url && (url != this.url)) {
            this.url = url;
            this.loaded = false;
            Element.update(this.subcontent, '');
        }
        new Effect.Appear(this.overlay, { duration: 0.5, to: 0.8 });
        Element.show(this.content);
        if (!this.loaded) {
            Element.insert(this.subcontent, '<img class="please-wait" src="' + this.please_wait_url + '" alt="Please wait" />');
            Element.show(this.subcontent);
            this.getContent();
        }
        this.center();
        return this;
    },

    hide: function(event) {
        Element.hide(this.content);
        Element.hide(this.overlay);
        return this;
    }

}

var PlayerOverlay = Class.create();

PlayerOverlay.prototype = {

    initialize: function() {

        subcontent = $('player');
        over = $('overlay');

        if (subcontent == null) {
            this.subcontent = new Element('div', {'id': 'player'});
            this.content = new Element('div', {'id': 'player-wrapper'}).hide();
            Element.insert(this.content, this.subcontent);
            Element.insert(document.body, this.content, {position: top});
        } else {
            this.subcontent = subcontent;
        }

        if (over == null) {
            this.overlay = new Element('div', {'id': 'overlay'}).hide();
            Element.insert(document.body, this.overlay, {position: top});
        } else {
            this.overlay = over;
            this.overlay.hide();
        }

        var button = $$('#player-wrapper .wide-close-button');

        if (button.size()) {
            this.button = button.first();
        } else {
            this.button = new Element('button', {'class': 'wide-close-button', 'type': 'button'});
            Element.insert(this.button, '<span>Close</span>');
            Element.insert(this.content, this.button, {position: top});
        }

        Event.observe(this.button, 'click', this.hide.bindAsEventListener(this));
        Event.observe(this.overlay, 'click', this.hide.bindAsEventListener(this));
        Event.observe(this.content, 'click', function(event) {Event.stop(event)});

    },

    show: function() {
        this.center();
        $f().play();

        new Effect.Appear(this.overlay, { duration: 0.5,  to: 0.8 });
        Element.show(this.content);

        return this;
    },

    hide: function(event) {
        $f().stop();
        Element.hide(this.content);
        Element.hide(this.overlay);
        return this;
    },

    center: function() {
        var offset = document.viewport.getScrollOffsets();
        var x = Math.ceil(offset[0] + (document.viewport.getWidth() - this.content.getWidth()) / 2) + 'px';
        var y = Math.ceil(offset[1] + (document.viewport.getHeight() - this.content.getHeight()) / 2) + 'px';
        this.content.setStyle({left: x, top: y});
        return this;
    },

    moveCenter: function() {
        var offset = document.viewport.getScrollOffsets();
        var new_x = Math.ceil(offset[0] + (document.viewport.getWidth() - this.content.getWidth()) / 2);
        var new_y = Math.ceil(offset[1] + (document.viewport.getHeight() - this.content.getHeight()) / 2);
        new Effect.Move(this.content, {x : new_x, y : new_y, mode : 'absolute'});
        return this;
    }
}

var player_overlay;
var info_overlay;