/*
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.com
 * http://www.extjs.com/license
 * 
 * @usage: Ext.example.msg( {title:'Button Click', anchor:'t', pause:1}, 'You clicked the {0} button and entered the text "{1}".', btn, text);
 * @revisions:  2009-11-02 :: teagan :: added comments and an enhanced msg function which accepts a config object
 */

Ext.example = function(){
	
	// PRIVATE
	// -----------------------------------------------
    var msgCt;

	/**
	 * @method  createBox - create the rounded box for the message
	 * @param   {String} t - message box title
	 * @param   {String} s - message text
	 * @return  {String} Html markup
	 */	
    function createBox(t, s){
        return ['<div class="x-box-gray">',
                  '<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>',
                  '<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc"><h3>', t, '</h3>', s, '</div></div></div>',
                  '<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>',
                '</div>'].join('');
    };

		
	/**
	 * @method  createMsg - enhanced version of msg function.  accepts a config object 
	 * @param   {Object} config - A config object
	 * 				config.title = message title
	 * 				config.anchor - message box anchor: t=top, l=left, tl=top left etc
	 * 				config.pause - seconds to pause before ghosting
	 * @param	(String) format - message format/template 
	 * @param	(String) argument - OPTIONAL argument to fill in any template areas in the message format 
	 * @return  void
	 */	
    function createMsg(config, format){
		// defaults
		var defaults = {
			title: '',
			anchor: 'l',
			pause: 1.5
		};
		
		// create config object
		var cfg = Ext.apply({}, config, defaults);

		// insert message div into the body and align it to the anchor
        if(!msgCt){
            msgCt = Ext.DomHelper.insertFirst(document.body, {id:'msg-div'}, true);
        }						
        msgCt.alignTo(document, cfg.anchor + '-' + cfg.anchor);
					
		// apply any passed in optional arguments to the message format			
        var s = String.format.apply(String, Array.prototype.slice.call(arguments, 1));
		
		// append our message box with the title and text to the message div 
        var m = Ext.DomHelper.append(msgCt, {html:createBox(cfg.title, s)}, true);

		// use Ext.Fx to slide in, pause and then ghost our message box						
        m.slideIn(cfg.anchor).pause(cfg.pause).ghost(cfg.anchor, {remove:true});
    }		
		 
		
	// PUBLIC
	// -----------------------------------------------
    return {
		
		/**
		 * @method  msg - public version of createMsg function (see above) 
		 */	
        msg : function(config, format){
			createMsg (config, format);
        },

		/**
		 * @method  msgSuccess - displays a success message 
		 * @param   (String) text - message text 
		 * @return  {Ext.Panel}
		 */	
        msgSuccess : function(format){
								
			// create config object
			var config = {
				title: 'Success',
				anchor: 'l',
				pause: 1.5
			};
			// create the message
			createMsg (config, format);
						
        }  // end msgSuccess function
        
   } // end return
   
}();  // end and **Execute** Ext.example function