//Define the namespace
Ext.ns('Ext.ux');
/**
 * @class Ext.ux.MessageBox
 * @author    Otavio Augusto R. Fernandes
 * @copyright (c) 2010, by Otavio Augusto R. Fernandes
 * @date      24. January 2010
 * @version   $Id: Ext.ux.MessageBox.Flash.js 50 2010-01-24 17:30:45Z oaugusts $
 * <p>Utility class for generating different styles of flash message boxes.  The alias Ext.ux.Msg can also be used.<p/>
 * <p>Example usage:</p>
 *<pre><code>
// Show a success flash message
Ext.ux.Msg.flash({
   msg: 'Done!',
   type: 'success'
});
</code></pre>
 * @singleton
 */
Ext.ux.MessageBox = function(){
    var msgCt;

    function createBox(config){
        return [
            '<div class="flash">',
            '<table class="' + config.type + '" cellspacing="0" cellpadding="0">',
            '<tr>','<td class="icon"></td>',
                '<td class="body"><div class="msg">' + config.msg + '</div></td>',
                '<td class="r"></td>','</tr>',
            '</table>','</div>'
        ].join('');
    }
    return {
        /**
         * Displays a new flash message box based on the config options passed in.
         * @param {Object} config The following config options are supported: <ul>
         * <li><b>msg</b> : String <div class="sub-desc"> Value of the message to display in the flash box </div></li>
         * <li><b>time</b> : Number<div class="sub-desc"> Number of seconds to display the flash message</div></li>
         * <li><b>type</b> : String<div class="sub-desc"> A CSS class to apply to the flash message box (e.g. warning, error, success, info or custom)</div></li>
         * </ul>
         * Example usage:
         * <pre><code>
Ext.Msg.flash({
   msg: 'The highlights fields are required!',
   time: 3,
   type: 'error'
});        
</code></pre>
         * @return {Ext.MessageBox} this
         */
        flash : function(config){
            //Defaults config
            Ext.applyIf(config,{
               msg: 'Text',
               type: 'info',
               time: 3
            });

            //Create the flash box container
            if(!msgCt){
                msgCt = Ext.DomHelper.insertFirst(document.body, {id:'msg-div'}, true);
            }

            //Insert the html of flash box
            var m = Ext.DomHelper.append(msgCt, {html:createBox(config)}, true);

            //Register event to close flash message
            m.on('click',function(e, t){
               var f = Ext.fly(t).parent('div.flash');
               f.stopFx();
               f.ghost("t",{remove: true});
            },this)

            //Animate flash message
            m.slideIn('t').pause(config.time).ghost("t", {remove:true});

            return this;
        }
    };
}();

/**
 * Shorthand for {@link Ext.ux.MessageBox}
 */
Ext.ux.Msg = Ext.ux.MessageBox;