
Ext.define("Ext.ux.themed.Button", {

	extend: "Ext.button.Button",

	alias: [
		"widget.themedbutton"
	],

	config: {
		iconActive: "icon icon-init ",
		iconHover: "icon icon-over ",
		iconDisable: "icon icon-disabled ",
		iconClass: ""
	},

	listeners: {
		menushow: {
			fn: function (i_self) {
				var s_iconCls = i_self.isDisabled() ? i_self.getIconDisable() : i_self.getIconActive();
				i_self.setIconCls(s_iconCls + i_self.getIconClass());
			}
		},
		menuhide: {
			fn: function (i_self) {
				var s_iconCls = i_self.isDisabled() ? i_self.getIconDisable() : i_self.getIconActive();
				i_self.setIconCls(s_iconCls + i_self.getIconClass());
			}
		},
		mouseover: {
			fn: function (i_self) {
				var s_iconCls = i_self.isDisabled() ? i_self.getIconDisable() : i_self.getIconHover();
				i_self.setIconCls(s_iconCls + i_self.getIconClass());
			}
		},
		mouseout: {
			fn: function (i_self) {
				var s_iconCls = i_self.isDisabled() ? i_self.getIconDisable() : i_self.getIconActive();
				i_self.setIconCls(s_iconCls + i_self.getIconClass());
			}
		},
		enable: {
			fn: function(i_self) {
				i_self.setIconCls(i_self.getIconActive() + i_self.getIconClass());
			}
		},
		disable: {
			fn: function(i_self) {
				i_self.setIconCls(i_self.getIconDisable() + i_self.getIconClass());
			}
		}
	},

	initComponent: function() {

		var i_self = this;
		var o_config = i_self.initialConfig;
		var s_iconCls = o_config.iconCls || o_config.icon || "";

		if (Ext.String.startsWith(s_iconCls, "icon-")) {
			s_iconCls = "icon " + s_iconCls.toLowerCase();
		}
		else {
			s_iconCls = "icon icon-" + s_iconCls.toLowerCase();
		}

		i_self.setIconClass(s_iconCls.toLowerCase());

		s_iconCls = s_iconCls ? i_self.getIconActive() + i_self.getIconClass() : i_self.getIconActive();

		i_self.iconCls = s_iconCls;

		i_self.callParent();

		return i_self;
	}
});
