/**********************************
 * WA.Components.Overlay
 * 
 * Creates a skinnable overlay ( using css sprites )
 * which can be located relative to a specified element
 * and can be shown/hidden as required
 * 
 * Credits: Several pieces of this code are adaptations of the MooTools Tip class
 **********************************/
WA.Components.Overlay = new Class({
    Implements : [Events, Options],
    
    options : {
        /*** available events ***
        onBuild       : function() {},
        onShow        : function() {},
        onHide        : function() {},
        ***                   ***/
        offset        : {x:0, y:0},
        windowPadding : {x:0, y:0}
    },
    
    initialize : function( className, options ) {
        this.className = className;
        this.setOptions( options );
    },
    
    // show the overlay
    show : function() {
        $(this).show();
        this.fireEvent('show', [this]);
    },
    
    // hide the overlay
    hide : function() {
        $(this).hide();
        this.fireEvent('hide', [this]);
    },
    
    // fill the overlay with content
    fill : function(contents){
        var container = $(this).getElement('.tip-text');
        container.empty();
        if (typeof contents == 'string') container.set('html', contents);
        else container.adopt(contents);
    },
    
    // When someone calls $(this) or document.id(this)
    // we want to give them the div element for the overlay
    toElement : function() {
        // once we have defined the element, we don't need to do it again
        if( this.element ) return this.element;
        // create our skinnable div with a top, middle and bottom
        this.element = new Element( 'div', {
            'class' : this.className + ' container',
            styles  : {
                position: 'absolute',
                top: 0,
                left: 0,
                visibility: 'visible',
                display: 'none'
            }
        } ).adopt(
            new Element('div', {'class': 'tip-top'}).adopt(
                new Element('div', {'class': 'nw'}).adopt(
                    new Element('div', {'class': 'n'})
                )
            ),
            new Element('div', {'class': 'tip'}).adopt(
                new Element('div', {'class': 'tip-text container'})
            ),
            new Element('div', {'class': 'tip-bottom'}).adopt(
                new Element('div', {'class': 'sw'}).adopt(
                    new Element('div', {'class': 's'})
                )
            )
        ).inject( document.body );
        
        this.fireEvent('build', [this]);
        
        return this.element;
    }
});