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

    Script        : Overlay
    Version        : 2.0
    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 upgrade

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

//start overlay class
var Overlay = new Class({
    
    //implements
    Implements: [Options],
    
    //options
    options:{
        colour: '#000',//background color of overlay
        opacity: 0.65,//opacity of overlay
        zIndex: 100,//the z-index of the overlay (needs to lower than multiBox pop-up)
        onClick: new Class()//make sure new class is loaded
    },

    //initialization
    initialize: function(options){
        //set options
        this.setOptions(options);
        //start building overlay
        this.container = new Element('div', {
            'id': 'OverlayContainer',
            'styles': {
                position: 'absolute',
                left: 0,
                top: 0,
                width: '100%',
                visibility: 'hidden',
                overflow: 'hidden',
                zIndex: this.options.zIndex,
                opacity: 0
            }
        }).inject(this.options.container,'inside');
        
        this.iframe = new Element('iframe', {
            'id': 'OverlayIframe',
            'name': 'OverlayIframe',
            'src': 'javascript:void(0);',
            'frameborder': 0,
            'scrolling': 'no',
            'styles': {
                position: 'absolute',
                top: 0,
                left: 0,
                width: '100%',
                height: '100%',
                filter: 'progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)',
                opacity: 0,
                zIndex: 101
            }
        }).inject(this.container,'inside');
        
        this.overlay = new Element('div', {
            'id': 'Overlay',
            'styles': {
                position: 'absolute',
                left: 0,
                top: 0,
                width: '100%',
                height: '100%',
                zIndex: 102,
                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();
        
        window.addEvent('resize',this.position.bind(this));
    },
    
    position: function(){
        this.container.setStyle('height',0);//reset container height ready for resize
        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{
                this.container.setStyles({
                    width: window.getSize().x,
                    height: window.getScrollSize().y
                });
            };
        }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({
            visibility: 'visible',
            opacity: this.options.opacity
        }).chain(function() {
            visibility: 'hidden'
        });
    },
    
    hide: function(){
        this.fade.start({
            opacity: 0
        }).chain(function() {
            visibility: 'hidden'
        });
    }
});