﻿var MooOverlay = new Class({
    Implements: [Options, Events],
    options:
    {
        container: '',
        overlayColor: '#fff'
    },
    initialize: function(options)
    {
        this.setOptions(options);
        this.container = this.options.container != "" ? document.id(this.options.container) : document.id(document.body);
        if(!this.container)
            return;
            
        this.overlay = new Element('div', {
            styles:
            {
                left: 0,
                top: 0,
                width: 0,
                height: 0,
                position: 'absolute',
                zIndex: 11002,
                opacity: 0,
                background: this.options.overlayColor
            }
        }).inject(this.container);   
    },
    show: function()
    {
        this.overlay.setStyles({
            width: this.container.getWidth(),
            height: this.container.getScrollSize().y
        });
        new Fx.Morph(this.overlay, {
            onComplete: function(){
                this.fireEvent('onShow', [this.overlay]);
            }.bind(this)
        }).start({opacity: .9});
        
    },
    hide: function()
    {
        new Fx.Morph(this.overlay, {
            onComplete: function(){
                this.fireEvent('onHide', [this.overlay]);
            }.bind(this)
        }).start({opacity: 0});
    }
    
});    
