var mooOverlays = new Array();

var mooOverlay = new Class(
{
    initialize: function()
    {
        var id = mooOverlays.length;
            mooOverlays[mooOverlays.length] = this;
        
        var widnowSize       = $( window ).getSize();
        var windowScroll     = $( window ).getScroll();
        var windowScrollSize = $( window ).getScrollSize();

        this.overlay = new Element( 'div', 
        {
            'class': 'overlay',
            'styles':
            {
                'width': '100%',
                'height': windowScrollSize.y,
                'z-index': 10000,
                'background-color': '#000000',
                'position': 'absolute',
                'top': 0,
                'left': 0
            }
        } ); 
        
        this.overlayContentContainer = new Element( 'div',
        {
            'class': 'overlayContainer',
            'styles':
            {
                'width': '100%',
                'height': windowScrollSize.y, 
                'position': 'absolute',
                'left': '0',
                'top': '0',
                'z-index': 10001,
                'text-align': 'center'
            },
            'events':
            {
                'click': function()
                {                
                    var click = eval( 'mooOverlays['+id+'].click' );
                    
                    if( !click )
                    {
                        eval( 'mooOverlays['+id+'].hidden();' );
                    }
                    
                    eval( 'mooOverlays['+id+'].click = false;' );
                }
            }
        } );
        
        this.overlayContentTop = new Element( 'div',
        {
            'class': 'overlayTop'
        } ).adopt( new Element( 'div',
        {
            'class': 'overlayClose',
            'events':
            {
                'click': function()
                {
                    var click = eval( 'mooOverlays['+id+'].click' );
                    
                    if( !click )
                    {
                        eval( 'mooOverlays['+id+'].hidden();' );
                    }
                    
                    eval( 'mooOverlays['+id+'].click = false;' );   
                }
            }
        } ));
        
        this.overlayContentBottom = new Element( 'div',
        {
            'class': 'overlayBottom'
        } );
        
        this.overlayContent = new Element( 'div',
        {
            'class': 'overlatContent',
            'events':
            {
                'click': function()
                {                 
                    eval( 'mooOverlays['+id+'].click = true;' );
                }
            }
        } );
        
        this.overlayInsert = new Element( 'div',
        {
            'class': 'overlayInsert'
        } );
        
        this.insert( 'text', '<img src="/icon/ajax-loader.gif" alt="loading" />' );
        
        this.overlay.set( 'opacity', 0 );
        this.overlayContentContainer.set( 'opacity', 0 ); 
        
        this.overlayContent.setStyle( '-moz-border-radius', '5px' );
        
        document.body.appendChild( this.overlay );
        document.body.appendChild( this.overlayContentContainer ); 
        this.overlayContentContainer.appendChild( this.overlayContent );
        this.overlayContent.appendChild( this.overlayContentTop );
        this.overlayContent.appendChild( this.overlayContentBottom );
        this.overlayContent.appendChild( this.overlayInsert );
        
        this.fxOverlay        = new Fx.Tween( this.overlay,
        {
            duration: 250
        } );
        this.fxOverlayContent = new Fx.Tween( this.overlayContentContainer,
        {
            duration: 250
        } );
    },
    
    show: function()
    {    
        this.overlayContent.setStyle( 'margin-top', document.getScroll().y + document.getSize().y/2 - this.overlayContent.getSize().y/2 );
        
        this.fxOverlay.start( 'opacity', 0, 0.4 );    
        this.fxOverlayContent.start( 'opacity', 0, 1 );
    },
    
    hidden: function()
    {
        this.fxOverlay.start( 'opacity', 0.4, 0 );    
        this.fxOverlayContent.start( 'opacity', 1, 0 );
    },
    
    destroy: function()
    {
        document.body.removeChild( this.overlay );
        document.body.removeChild( this.overlayContentContainer );
    },
    
    insert: function( type, content )
    {
        var nodes = this.overlayInsert.getChildren();
        nodes.each( function( node )
        {
            node.destroy();
        } );
        
        switch( type )
        {
            case 'text':
            {
                var container = new Element( 'div',
                {
                    'html': content
                } );    
            }
            break;
            
            case 'html':
            {
                var container = content;
            }
            break;
        }
        
        var size = container.getSize();
        if( !size.x )
        {
            size.x = parseInt( container.getStyle( 'width' ).replace( 'px', '' ) );
            size.y = parseInt( container.getStyle( 'height' ).replace( 'px', '' ) );
        }
        var widnowSize       = $( window ).getSize();
        var windowScroll     = $( window ).getScroll();                            
        /*
        this.overlayContent.setStyle( 'margin-top', (windowScroll.y+(widnowSize.y/2)-(size.y+40)/2)+'px' );
        this.overlayContent.setStyle( 'width', (size.x+40)+'px' );
        this.overlayContent.setStyle( 'height', (size.y+40)+'px' );
        */    
        this.overlayInsert.appendChild( container );
    }
} );