Ext.namespace('Ext.ux');
Ext.ux.ImageButton = function(cfg) {
    Ext.ux.ImageButton.superclass.constructor.call(this, cfg);
};
 
Ext.extend(Ext.ux.ImageButton, Ext.Button, {
    onRender : function(ct, position) {
        this.disabledImgPath = this.disabledImgPath || this.imgPath;
        var tplHTML = '<div><img src="{imgPath}" border="0" width="{imgWidth}" height="{imgHeight}" qtip="{qtip}" style="cursor: {cursor};"/> {imgText:htmlEncode}<br/><br/></div>';
        var tpl = new Ext.Template(tplHTML);
        var btn, targs = {
            imgPath : this.disabled ? this.disabledImgPath : this.imgPath,
            imgWidth : this.imgWidth || "",
            imgHeight : this.imgHeight || "",
            imgText : this.text || "",
            cursor : this.disabled ? "default" : "pointer",
            qtip : this.qtip || ""
        };
 
        btn = tpl.append(ct, targs, true);
 
        btn.on("click", this.onClick, this);
 
        if (this.cls) {
            btn.addClass(this.cls);
        }
        this.el = btn;
        if (this.hidden) {
            this.hide();
        }
    },
	
    disable : function(newImgPath) {
        var replaceImgPath = newImgPath || this.disabledImgPath;
        if (replaceImgPath)
            this.el.dom.firstChild.src = replaceImgPath;
        this.disabled = true;
    },
	
    enable : function(newImgPath) {
        var replaceImgPath = newImgPath || this.imgPath;
        if (replaceImgPath)
            this.el.dom.firstChild.src = replaceImgPath;
        this.disabled = false;
    },
	
	changeImage: function(newImgPath){
        if (newImgPath)
            this.el.dom.firstChild.src = newImgPath;
	}
});
Ext.reg('imagebutton', Ext.ux.ImageButton);