/**************************************************************

    Script        : Overlay
    Version        : 1.2
    Authors        : Samuel birch
    Desc        : Covers the window with a semi-transparent layer.
    Licence        : Open Source MIT Licence
    Modified    : Liam Smart (liam_smart@hotmail.com) - MooTools 1.2 support

**************************************************************/

//start overlay class
var Overlay = new Class({
    
    getOptions: function(){
        return {
            colour: '#000',
            opacity: 0.8,
            zIndex: 1000,
            container: $(document.body),
            onClick: new Class()
        };
    },

    initialize:function(options)
    {
        this.setOptions(this.getOptions(),options);
        
        this.container = new Element('div').setProperty('id','OverlayContainer').setStyles({
            position: 'absolute',
            left: 0,
            top: 0,
            width: '100%',
            height: document.body.getSize().y,
            display: 'none',
            zIndex: this.options.zIndex
        }).inject(this.options.container,'inside');
        
        
        
        this.overlay = new Element('div').setProperty('id','Overlay').setStyles({
            position: 'absolute',
            left: 0,
            top: 0,
            width: '100%',
            height: '100%',
            zIndex: 1002,
            backgroundColor: this.options.colour
        }).inject(this.container,'inside');
        
        this.container.addEvent('click',function(){
            this.options.onClick();
        }.bind(this));
        
        this.fade = new Fx.Morph(this.container);
        this.position();
        
        
    },
    
    position: function(){
        this.container.setStyle('height','0');//reset container height ready for resize( removes scrollbar so new calc is true - liam)
        if(this.options.container == document.body){
            if(this.options.container.getSize().y >= this.options.container.getScrollSize().y){
                this.container.setStyles({
                    width: window.getSize().x,
                    height: window.getSize().y
                });
            }else{
                var myCoord = $(document.body).getScrollSize().y;
                this.container.setStyles({
                    width: window.getSize().x,
                    height: myCoord
                });
                //alert(myCoord);
            }
        }else{ 
            var myCoords = this.options.container.getCoordinates(); 
            this.container.setStyles({
                top: myCoords.top,
                height: myCoords.height,
                left: myCoords.left,
                width: myCoords.width
            });
        };
    },
    
    show: function(){
        this.fade.start({
            opacity: this.options.opacity,
            display: 'block'
        //    visibility: 'visible'
        });
    },
    
    hide: function(){
        this.fade.start({
            opacity: 0,
            display: 'none'
            //visibility: 'hidden'
        });
    }
});

Overlay.implement(new Options);