/*
---
description: Simple overlay class for MooTools.

license: MIT-style

authors:
- Christopher Pitt

requires:
- core/1.2.4: Class.Extras
- core/1.2.4: Fx.Morph

provides: [Overlay]

...
*/

var Overlay = new Class({
    'Implements': [Options, Events],

    'options': {    
        /*
        'onLoad': $empty,
        'onPosition': $empty,
        'onShow': $empty,
        'onHide': $empty,
        'onClick': $empty,
        */        
        'color': '#fff',
        'opacity': 0.8,
        'z-index': 1,
        'container': document.body,
        'duration': 100
    },
    
    'initialize': function(options)
    {
        this.setOptions(options);
        
        var self = this,
            container = document.id(self.options['container']),
            
            wrapper = new Element('div', {
                'styles': {
                    'position': 'absolute',
                    'left': 0,
                    'top': 0,
                    'visibility': 'hidden',
                    'overflow': 'hidden',
                    'z-index': self.options['z-index'] + 1
                },
                'events': {
                    'click': function(e)
                    {
                        self.fireEvent('onClick', [e]);
                    }
                }
            }).inject(container),
            
            iframe = new Element('iframe', {
                'src': 'about:blank',
                'frameborder': 1,
                'scrolling': 'no',
                'styles': {
                    'position': 'absolute',
                    'top': 0,
                    'left': 0,
                    'width': '100%',
                    'height': '100%',
                    'filter': 'progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)',
                    'opacity': 0,
                    'z-index': self.options['z-index'] + 2
                }
            }).inject(wrapper),
            
            overlay = new Element('div', {
                'styles': {
                    'position': 'absolute',
                    'left': 0,
                    'top': 0,
                    'width': '100%',
                    'height': '100%',
                    'background-color': self.options['color'],
                    'z-index': self.options['z-index'] + 3
                }
            }).inject(wrapper),
            
            morph = new Fx.Morph(wrapper, {
                'duration': self.options['duration']
            });
            
        self.container = wrapper;
        self.wrapper = wrapper;
        self.iframe = iframe;
        self.overlay = overlay;
        self.morph = morph;
        
        container.addEvents({
            'resize': self.position.bind(self),
            'scroll': self.position.bind(self)
        });
        
        this.fireEvent('onLoad');
    },
	
    'position': function()
    {
        var self = this;        
        if(self.options.container == document.body)
        {
            var size = document.id(document.body).getScrollSize();
            
            self.wrapper.setStyles({
                'width': size.x,
                'height': size.y
            });
        }
        else
        {
            self.wrapper.setStyles(self.container.getCoordinates());
        }
        
        self.fireEvent('onPosition');
    },
    
    'show': function()
    {
        this.position();
        
        this.morph.start({
            'opacity': [0, this.options['opacity']]
        });
        
        this.fireEvent('onShow');
    },
	
    'hide': function()
    {      
        this.morph.start({
            'opacity': [this.options['opacity'], 0]
        });
        
        this.fireEvent('onHide');
    }
});