MoodalBox = new Class({
    Implements: [Options],

    options: {
        destinationOverlayOpacity: 0.7,

        allowManualClose: true
    },

    initialize: function(element, overlay, options) {
        this.setOptions(options);

        this.element = $(element);
        this.overlay = $(overlay);

        if (this.options.allowManualClose) {
            this.overlay.addEventMoo("click", this.hide.bind(this));
        }
        this.targetCoords = this.element.getCoordinates();

        this.fx = {
            overlayAnimation: new Fx.Tween(this.overlay, { property: "opacity" }),
            elementAnimation: new Fx.Tween(this.element, { property: "opacity" })
        }
    },

    show: function() {
        this.setPosition();

        this.fx.overlayAnimation.start(0, this.options.destinationOverlayOpacity);
        this.fx.elementAnimation.start(0, 1);
    },

    hide: function() {
        this.fx.overlayAnimation.start(this.options.destinationOverlayOpacity, 0);
        this.fx.elementAnimation.start(1, 0);
    },

    setPosition: function() {
        this.element.setStyles({
            "marginLeft": -(this.targetCoords.width / 2),
            "marginTop": -(this.targetCoords.height / 2)
        });


        this.overlay.setStyles({
            "top": window.getScrollTop(),
            "height": window.getHeight()
        });
    }
});