/**
 * Basic status bar component that can be used as the bottom toolbar of any {@link Ext.Panel}.  In addition to
 * supporting the standard {@link Ext.toolbar.Toolbar} interface for adding buttons, menus and other items, the StatusBar
 * provides a greedy status element that can be aligned to either side and has convenient methods for setting the
 * status text and icon.  You can also indicate that something is processing using the {@link #showBusy} method.
 *
 *     Ext.create('Ext.Panel', {
 *         title: 'StatusBar',
 *         // etc.
 *         bbar: Ext.create('Ext.ux.StatusBar', {
 *             id: 'my-status',
 *
 *             // defaults to use when the status is cleared:
 *             defaultText: 'Default status text',
 *             defaultIconCls: 'default-icon',
 *
 *             // values to set initially:
 *             text: 'Ready',
 *             iconCls: 'ready-icon',
 *
 *             // any standard Toolbar items:
 *             items: [{
 *                 text: 'A Button'
 *             }, '-', 'Plain Text']
 *         })
 *     });
 *
 *     // Update the status bar later in code:
 *     var sb = Ext.getCmp('my-status');
 *     sb.setStatus({
 *         text: 'OK',
 *         iconCls: 'ok-icon',
 *         clear: true // auto-clear after a set interval
 *     });
 *
 *     // Set the status bar to show that something is processing:
 *     sb.showBusy();
 *
 *     // processing....
 *
 *     sb.clearStatus(); // once completeed
 *
 */
Ext.define('Ext.ux.statusbar.StatusBar', {
	extend: 'Ext.toolbar.Toolbar',
	xtype: 'statusbar',
	alternateClassName: 'Ext.ux.StatusBar',
	requires: ['Ext.toolbar.TextItem'],
	/**
	 * @cfg {String} statusAlign
	 * The alignment of the status element within the overall StatusBar layout.  When the StatusBar is rendered,
	 * it creates an internal div containing the status text and icon.  Any additional Toolbar items added in the
	 * StatusBar's {@link #cfg-items} config, or added via {@link #method-add} or any of the supported add* methods, will be
	 * rendered, in added order, to the opposite side.  The status element is greedy, so it will automatically
	 * expand to take up all sapce left over by any other items.  Example usage:
	 *
	 *     // Create a left-aligned status bar containing a button,
	 *     // separator and text item that will be right-aligned (default):
	 *     Ext.create('Ext.Panel', {
	 *         title: 'StatusBar',
	 *         // etc.
	 *         bbar: Ext.create('Ext.ux.statusbar.StatusBar', {
	 *             defaultText: 'Default status text',
	 *             id: 'status-id',
	 *             items: [{
	 *                 text: 'A Button'
	 *             }, '-', 'Plain Text']
	 *         })
	 *     });
	 *
	 *     // By adding the statusAlign config, this will create the
	 *     // exact same toolbar, except the status and toolbar item
	 *     // layout will be reversed from the previous example:
	 *     Ext.create('Ext.Panel', {
	 *         title: 'StatusBar',
	 *         // etc.
	 *         bbar: Ext.create('Ext.ux.statusbar.StatusBar', {
	 *             defaultText: 'Default status text',
	 *             id: 'status-id',
	 *             statusAlign: 'right',
	 *             items: [{
	 *                 text: 'A Button'
	 *             }, '-', 'Plain Text']
	 *         })
	 *     });
	 */
	/**
	 * @cfg {String} [defaultText='']
	 * The default {@link #text} value.  This will be used anytime the status bar is cleared with the
	 * `useDefaults:true` option.
	 */
	/**
	 * @cfg {String} [defaultIconCls='']
	 * The default {@link #iconCls} value (see the iconCls docs for additional details about customizing the icon).
	 * This will be used anytime the status bar is cleared with the `useDefaults:true` option.
	 */
	/**
	 * @cfg {String} text
	 * A string that will be <b>initially</b> set as the status message.  This string
	 * will be set as innerHTML (html tags are accepted) for the toolbar item.
	 * If not specified, the value set for {@link #defaultText} will be used.
	 */
	/**
	 * @cfg [iconCls='']
	 * @inheritdoc Ext.panel.Header#cfg-iconCls
	 * @localdoc **Note:** This CSS class will be **initially** set as the status bar
	 * icon.  See also {@link #defaultIconCls} and {@link #busyIconCls}.
	 *
	 * Example usage:
	 *
	 *     // Example CSS rule:
	 *     .x-statusbar .x-status-custom {
	 *         padding-left: 25px;
	 *         background: transparent url(images/custom-icon.gif) no-repeat 3px 2px;
	 *     }
	 *
	 *     // Setting a default icon:
	 *     var sb = Ext.create('Ext.ux.statusbar.StatusBar', {
	 *         defaultIconCls: 'x-status-custom'
	 *     });
	 *
	 *     // Changing the icon:
	 *     sb.setStatus({
	 *         text: 'New status',
	 *         iconCls: 'x-status-custom'
	 *     });
	 */

	/**
	 * @cfg {String} cls
	 * The base class applied to the containing element for this component on render.
	 */
	cls : 'x-statusbar',
	/**
	 * @cfg {String} busyIconCls
	 * The default {@link #iconCls} applied when calling {@link #showBusy}.
	 * It can be overridden at any time by passing the `iconCls` argument into {@link #showBusy}.
	 */
	busyIconCls : 'x-status-busy',
	/**
	 * @cfg {String} busyText
	 * The default {@link #text} applied when calling {@link #showBusy}.
	 * It can be overridden at any time by passing the `text` argument into {@link #showBusy}.
	 */
	busyText : 'Loading...',
	/**
	 * @cfg {Number} autoClear
	 * The number of milliseconds to wait after setting the status via
	 * {@link #setStatus} before automatically clearing the status text and icon.
	 * Note that this only applies when passing the `clear` argument to {@link #setStatus}
	 * since that is the only way to defer clearing the status.  This can
	 * be overridden by specifying a different `wait` value in {@link #setStatus}.
	 * Calls to {@link #clearStatus} always clear the status bar immediately and ignore this value.
	 */
	autoClear : 5000,

	/**
	 * @cfg {String} emptyText
	 * The text string to use if no text has been set. If there are no other items in
	 * the toolbar using an empty string (`''`) for this value would end up in the toolbar
	 * height collapsing since the empty string will not maintain the toolbar height.
	 * Use `''` if the toolbar should collapse in height vertically when no text is
	 * specified and there are no other items in the toolbar.
	 */
	emptyText : '&#160;',

	/**
	 * @private
	 */
	activeThreadId : 0,

	initComponent: function() {
		var right = this.statusAlign === 'right';

		this.callParent(arguments);
		this.currIconCls = this.iconCls || this.defaultIconCls;
		this.statusEl = Ext.create('Ext.toolbar.TextItem', {
			cls: 'x-status-text ' + (this.currIconCls || ''),
			text: this.text || this.defaultText || ''
		});

		if (right) {
			this.cls += ' x-status-right';
			this.add('->');
			this.add(this.statusEl);
		} else {
			this.insert(0, this.statusEl);
			this.insert(1, '->');
		}
	},

	/**
	 * Sets the status {@link #text} and/or {@link #iconCls}. Also supports automatically clearing the
	 * status that was set after a specified interval.
	 *
	 * Example usage:
	 *
	 *     // Simple call to update the text
	 *     statusBar.setStatus('New status');
	 *
	 *     // Set the status and icon, auto-clearing with default options:
	 *     statusBar.setStatus({
	 *         text: 'New status',
	 *         iconCls: 'x-status-custom',
	 *         clear: true
	 *     });
	 *
	 *     // Auto-clear with custom options:
	 *     statusBar.setStatus({
	 *         text: 'New status',
	 *         iconCls: 'x-status-custom',
	 *         clear: {
	 *             wait: 8000,
	 *             anim: false,
	 *             useDefaults: false
	 *         }
	 *     });
	 *
	 * @param {Object/String} config A config object specifying what status to set, or a string assumed
	 * to be the status text (and all other options are defaulted as explained below). A config
	 * object containing any or all of the following properties can be passed:
	 *
	 * @param {String} config.text The status text to display.  If not specified, any current
	 * status text will remain unchanged.
	 *
	 * @param {String} config.iconCls The CSS class used to customize the status icon (see
	 * {@link #iconCls} for details). If not specified, any current iconCls will remain unchanged.
	 *
	 * @param {Boolean/Number/Object} config.clear Allows you to set an internal callback that will
	 * automatically clear the status text and iconCls after a specified amount of time has passed. If clear is not
	 * specified, the new status will not be auto-cleared and will stay until updated again or cleared using
	 * {@link #clearStatus}. If `true` is passed, the status will be cleared using {@link #autoClear},
	 * {@link #defaultText} and {@link #defaultIconCls} via a fade out animation. If a numeric value is passed,
	 * it will be used as the callback interval (in milliseconds), overriding the {@link #autoClear} value.
	 * All other options will be defaulted as with the boolean option.  To customize any other options,
	 * you can pass an object in the format:
	 *
	 * @param {Number} config.clear.wait The number of milliseconds to wait before clearing
	 * (defaults to {@link #autoClear}).
	 * @param {Boolean} config.clear.anim False to clear the status immediately once the callback
	 * executes (defaults to true which fades the status out).
	 * @param {Boolean} config.clear.useDefaults False to completely clear the status text and iconCls
	 * (defaults to true which uses {@link #defaultText} and {@link #defaultIconCls}).
	 *
	 * @return {Ext.ux.statusbar.StatusBar} this
	 */
	setStatus: function(config) {
		var me = this;

		config = config || {};
		Ext.suspendLayouts();
		if (Ext.isString(config)) {
			config = {text:config};
		}
		if (config.text !== undefined) {
			me.setText(config.text);
		}
		if (config.iconCls !== undefined) {
			me.setIcon(config.iconCls);
		}

		if (config.clear) {
			var c = config.clear,
				wait = me.autoClear,
				defaults = {useDefaults: true, anim: true};

			if (Ext.isObject(c)) {
				c = Ext.applyIf(c, defaults);
				if (c.wait) {
					wait = c.wait;
				}
			} else if (Ext.isNumber(c)) {
				wait = c;
				c = defaults;
			} else if (Ext.isBoolean(c)) {
				c = defaults;
			}

			c.threadId = this.activeThreadId;
			Ext.defer(me.clearStatus, wait, me, [c]);
		}
		Ext.resumeLayouts(true);
		return me;
	},

	/**
	 * Clears the status {@link #text} and {@link #iconCls}. Also supports clearing via an optional fade out animation.
	 *
	 * @param {Object} [config] A config object containing any or all of the following properties.  If this
	 * object is not specified the status will be cleared using the defaults below:
	 * @param {Boolean} config.anim True to clear the status by fading out the status element (defaults
	 * to false which clears immediately).
	 * @param {Boolean} config.useDefaults True to reset the text and icon using {@link #defaultText} and
	 * {@link #defaultIconCls} (defaults to false which sets the text to '' and removes any existing icon class).
	 *
	 * @return {Ext.ux.statusbar.StatusBar} this
	 */
	clearStatus : function(config) {
		config = config || {};

		var me = this,
			statusEl = me.statusEl;

		if (me.destroyed || config.threadId && config.threadId !== me.activeThreadId) {
			// this means the current call was made internally, but a newer
			// thread has set a message since this call was deferred.  Since
			// we don't want to overwrite a newer message just ignore.
			return me;
		}

		var text = config.useDefaults ? me.defaultText : me.emptyText,
			iconCls = config.useDefaults ? (me.defaultIconCls ? me.defaultIconCls : '') : '';

		if (config.anim) {
			// animate the statusEl Ext.Element
			statusEl.el.puff({
				remove: false,
				useDisplay: true,
				callback: function() {
					statusEl.el.show();
					me.setStatus({
						text: text,
						iconCls: iconCls
					});
				}
			});
		} else {
			 me.setStatus({
				 text: text,
				 iconCls: iconCls
			 });
		}
		return me;
	},

	/**
	 * Convenience method for setting the status text directly.  For more flexible options see {@link #setStatus}.
	 * @param {String} text (optional) The text to set (defaults to '')
	 * @return {Ext.ux.statusbar.StatusBar} this
	 */
	setText : function(text) {
		var me = this;
		me.activeThreadId++;
		me.text = text || '';
		if (me.rendered) {
			me.statusEl.setText(me.text);
		}
		return me;
	},

	/**
	 * Returns the current status text.
	 * @return {String} The status text
	 */
	getText : function(){
		return this.text;
	},

	/**
	 * Convenience method for setting the status icon directly.  For more flexible options see {@link #setStatus}.
	 * See {@link #iconCls} for complete details about customizing the icon.
	 * @param {String} cls (optional) The icon class to set (defaults to '', and any current icon class is removed)
	 * @return {Ext.ux.statusbar.StatusBar} this
	 */
	setIcon : function(cls) {
		var me = this;

		me.activeThreadId++;
		cls = cls || '';

		if (me.rendered) {
			if (me.currIconCls) {
				me.statusEl.removeCls(me.currIconCls);
				me.currIconCls = null;
			}
			if (cls.length > 0) {
				me.statusEl.addCls(cls);
				me.currIconCls = cls;
			}
		} else {
			me.currIconCls = cls;
		}
		return me;
	},

	/**
	 * Convenience method for setting the status text and icon to special values that are pre-configured to indicate
	 * a "busy" state, usually for loading or processing activities.
	 *
	 * @param {Object/String} config (optional) A config object in the same format supported by {@link #setStatus}, or a
	 * string to use as the status text (in which case all other options for setStatus will be defaulted).  Use the
	 * `text` and/or `iconCls` properties on the config to override the default {@link #busyText}
	 * and {@link #busyIconCls} settings. If the config argument is not specified, {@link #busyText} and
	 * {@link #busyIconCls} will be used in conjunction with all of the default options for {@link #setStatus}.
	 * @return {Ext.ux.statusbar.StatusBar} this
	 */
	showBusy : function(config){
		if (Ext.isString(config)) {
			config = { text: config };
		}
		config = Ext.applyIf(config || {}, {
			text: this.busyText,
			iconCls: this.busyIconCls
		});
		return this.setStatus(config);
	}
});
