function Overlay()
{    
    this.id = 'overlay_' + Math.round(Math.random() * 1000000);    
    this.dom = null;
    
    this.opacity = 0;
    
    this.content_placeholders = {};
    this.button_placeholders = [];
        
    this._spawn = function()
    {         
        var overlay;
        
        this.opacity = 0;            
        
        overlay = document.createElement('div');
        overlay.className = 'overlay';
        overlay.id = this.id;
        overlay.obj = this;
        overlay.style.opacity = 0;
        
        this.dom = overlay;
         
        document.body.appendChild(this.dom);
        
        this._fade_in();
    }
    
    this._set_content_placeholder = function(content, type)
    {
        this.content_placeholders[type] = content;
    }
    
    this._add_button_placeholder = function(text, action)
    {
        var button = document.createElement('div');
        
        button.className = 'overlay_button';
        button.obj = this;
        button.innerHTML = text;
        button.onclick = action;
        button.onmouseover = function() { this.className = 'overlay_button overlay_button_hover'; }
        button.onmouseout = function() { this.className = 'overlay_button overlay_button_idle'; }
        
        this.button_placeholders[this.button_placeholders.length] = button;
    }
    
    this._fade_in = function()
    {
        this.opacity = this.opacity + .2;
        if (this.opacity >= 1) {
            this.opacity = 1;
            this._create_secondary_dom();
        } else {
            setTimeout('document.getElementById(\''+this.id+'\').obj._fade_in();', 100);   
        }   

        this.dom.style.opacity = this.opacity;
        this.dom.style.filter = 'alpha(opacity='+(this.opacity*100)+')';     
    }
    
    this._create_secondary_dom = function()
    {
        var center_container = document.createElement('div');
        var top_container = document.createElement('div');
        var bottom_container = document.createElement('div');   // container within overlay
        var top_content = document.createElement('div');   // text container
        var bottom_content = document.createElement('div');   // text container
                        
        top_content.top_content_container = true;
        bottom_content.bottom_content_container = true;

        center_container.className = 'center_container';
        
        top_container.className = 'top_container';
        bottom_container.className = 'bottom_container';
        
        bottom_content.className = 'bottom_container_content';
        
        top_container.id = this.id+'_top';      
        bottom_container.id = this.id+'_bottom';      
        
        this.dom.appendChild(center_container);
        center_container.appendChild(top_container);
        center_container.appendChild(bottom_container);
        bottom_container.appendChild(bottom_content);
        top_container.appendChild(top_content); 
        
        for (type in this.content_placeholders) {
            this._set_content(this.content_placeholders[type], type);
        }
        
        this._add_buttons();
    }
    
    this._remove_secondary_dom = function()
    {
        this.dom.innerHTML = '';
    }
        
    this._set_content = function(content, type)
    {
        var children = this.dom.getElementsByTagName('div');  
        for (i = 0; i < children.length; i++) {
            if (type == 'top' && children[i].top_content_container == true ) {
                children[i].innerHTML = content;
            } else if (type == 'bottom' && children[i].bottom_content_container == true) {
                children[i].innerHTML = content;
            }
        }
    }
    
    this._add_buttons = function()
    {
        var bottom_container;
        var children = this.dom.getElementsByTagName('div');  
        for (i = 0; i < children.length; i++) {
            if (children[i].bottom_content_container == true) {
                bottom_container = children[i];
            }
        }

        for (i = 0; i < this.button_placeholders.length; i++) {
            bottom_container.appendChild(this.button_placeholders[i]);
        }
        
        var clearer = document.createElement('div');
        clearer.style.clear = 'both';
        bottom_container.appendChild(clearer);
    }
    
    
    
    this._fade_out = function()
    {
        this.opacity = this.opacity - .2;
        
        if (this.opacity < 0 || this.opacity == 0) {
            this.opacity = 0;
            document.body.removeChild(this.dom);
        } else {
            this.dom.style.opacity = this.opacity;
            this.dom.style.filter = 'alpha(opacity='+(this.opacity*100)+')';
            setTimeout('document.getElementById(\''+this.id+'\').obj._fade_out();', 100);   
        }        
    }

    
    this._close = function()
    {
        this._remove_secondary_dom();
        this._fade_out();
    }
    
}