Ext.namespace('Ext.ux.form');

/* 
 * HTML
 */
Ext.ux.form.HTML = function(config){
	var el = document.createElement("div");
	
    if(config.html){
    	el.innerHTML = config.html;
    }
    
    if(config.id){
    	el.id = config.id;
    }
    
    config.el = el;
    
	Ext.ux.form.HTML.superclass.constructor.call(this, config);
};

Ext.extend(Ext.ux.form.HTML, Ext.Component, {
    getName: function(){},
    validate: function(){return true;}
});


/*
 * IMAGE BUTTON
 */ 
Ext.ImageButton = function(renderTo, config){
    Ext.ImageButton.superclass.constructor.call(this, renderTo, config);
};

Ext.extend(Ext.ImageButton, Ext.Button, {
    render : function(renderTo){
    	this.disabledImgPath = this.disabledImgPath || this.imgPath;
    	var tplHTML = '<div><img width=\"{imgWidth}px\" height=\"{imgHeight}px\" src=\"{imgPath}\" /> {imgText:htmlEncode}</div>';
    	var tpl = new Ext.Template(tplHTML);
        var btn = tpl.append(renderTo, {
        	imgPath: this.disabled ? this.disabledImgPath : this.imgPath, 
        	imgWidth: this.imgWidth || "",
        	imgHeight: this.imgHeight || "", 
        	imgText: this.text || "", 
        	cursor: this.disabled ? "none" : "pointer",
        	tooltip: this.tooltip || ""
        }, true);
    	alert('btn imgPath: ' + btn);
        btn.on("click", this.onClick, this, true);          
        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;
    	Ext.fly(this.el.dom.firstChild).setStyle('cursor', 'none');
    	this.disabled = true;
    },
    enable : function(newImgPath){
    	var replaceImgPath = newImgPath || this.imgPath;
    	if (replaceImgPath)
    		this.el.dom.firstChild.src = replaceImgPath;
    	Ext.fly(this.el.dom.firstChild).setStyle('cursor', 'pointer');
    	this.disabled = false;
    }
});

/* Algorithm:
 * Create a new Ext.form.Layout instance
 * Create your form fields
 * Push all form fields on to the layout's 'stack'
 * Push only form fields that say they are a form field on to the form's 'items' array
 * Call render on the layout passing it the form's 'el' to render containers for each for element and the labels for the fields
 * Call render on each form field passing it the string "'x-form-el-' + f.id" to insert the acutal form field in to the page
 */
Ext.form.FormPanel.prototype.append = function() {
	// Create a new layout object
	var layout = new Ext.form.Layout();
	
	// Keep track of added fields that are form fields (isFormField)
	var fields = [];

	// Add all the fields on to the layout stack
	layout.stack.push.apply(layout.stack, arguments);

	// Add only those fields that are form fields to the 'fields' array
	for(var i = 0; i < arguments.length; i++) {
		if(arguments[i].isFormField) {
			fields.push(arguments[i]);
		}
	}
	
	// Render the layout
	layout.render(this.el);

	// If we found form fields add them to the form's items collection and render the
	// fields into their containers created by the layout
	if(fields.length > 0) {
		this.items.addAll(fields);

		// Render each field
		for(var i = 0; i < fields.length; i++) {
			fields[i].render('x-form-el-' + fields[i].id);
		}
	}
	return this;	
}
  
/* Here's what I do for a collection of fields in a container:
 * Remove the field from the form's items collection
 * Invoke destroy() on the form field element instanace
 * Delete the object
 * Invoke destroy() on the layout object
 * Delete the layout object
 * Invoke remove() on the container element
 * Delete the reference to the container
 */
Ext.form.FormPanel.prototype.remove = function() {
	for(var i = this.fields.length - 1; i >= 0; i--) {
		this.form.items.remove(this.form.items.last());
		this.fields[i].destroy();
		delete this.fields[i];
	}

	delete this.fields;
	this.layout.destroy();
	delete this.layout;
	this.container.remove();
	delete this.container;  
};