function ConfigTextFieldDesigner(id, order, attributeName, label, description, defaultValue, minWidth, widthExpansionPercent)
{
	this.designsClass = "ConfigTextField";
	this.designsClassDisplay = "Text Field";
	
    this.id = id;
   	this.order = order;
    this.attributeName = attributeName;
    this.attributeType = 2;
    this.containerId = 0;    
    this.label = label;
    this.description = description;
    this.defaultValue = defaultValue;
    this.minWidth = minWidth;
    this.widthExpansionPercent = widthExpansionPercent; 
    
    this.helpAttributeName = "The attribute name is the name by which you can access this Text Field through your Javacsript code.  It must be unique.";
    this.helpLabel = "A short explanation of what the Text Field configures.";
    this.helpDescription = "Appears in a smaller font just under the label.  The description is a good place for a sample value or futher explanation.";
    this.helpMinWidth = "The minimum width that the Text Field must occupy.";
    this.helpWidthExpansionPercent = "The amount of width you'd like this Text Field to take up within the row. (Only applies if the Text Filed is placed in a Table)";
	this.helpDefaultValue = "The default value for this Text Field";
    
    // sets the dirty flag.
    if (id == -1)
		this.isDirty = true;
	else
		this.isDirty = false;
		
	// node ref which is a DOM node containing our title
	this.titleNodeRef = null;
	
	this.inputAttributeName = null;
}

ConfigTextFieldDesigner.prototype.afterRender = function ()
{
}

ConfigTextFieldDesigner.prototype.setId = function (id)
{
	this.id = id;
}

ConfigTextFieldDesigner.prototype.setContainerId = function (containerId)
{
	this.containerId = containerId;
}

ConfigTextFieldDesigner.prototype.setTitleNodeRef = function (nodeRef)
{
	this.titleNodeRef = nodeRef;
}

ConfigTextFieldDesigner.prototype.drawTitle = function ()
{
	if (this.titleNodeRef)
		this.titleNodeRef.innerHTML = this.designsClassDisplay + ": " + this.attributeName;
}

ConfigTextFieldDesigner.prototype.getDesignerNode = function (readOnlyMode)
{	
    var htmlTableNode = LKDOM.CreateElement("table");
    
    var htmlTBodyNode = LKDOM.CreateElement("TBODY", null, null, htmlTableNode, null);
        
	var htmlHeaderRow = LKDOM.CreateElement("tr", null, null, htmlTBodyNode);
	
	var headerAttName = LKDOM.CreateElement("th", null, "Attribute Name ", htmlHeaderRow);

	CodeEditorUtils.makeHelpIcon(this.helpAttributeName, headerAttName);

	var headerLabel = LKDOM.CreateElement("th", null, "Label ", htmlHeaderRow);
	
	CodeEditorUtils.makeHelpIcon(this.helpLabel, headerLabel);
	
	var headerDesc = LKDOM.CreateElement("th", null, "Description ", htmlHeaderRow);

	CodeEditorUtils.makeHelpIcon(this.helpDescription, headerDesc);

	var headerDefVal = LKDOM.CreateElement("th", null, "Default Value ", htmlHeaderRow);

	CodeEditorUtils.makeHelpIcon(this.helpDefaultValue, headerDefVal);

	var headerMinWidth = LKDOM.CreateElement("th", null, "Min Width ", htmlHeaderRow);

	CodeEditorUtils.makeHelpIcon(this.helpMinWidth, headerMinWidth);

	var headerWidthExpansion = LKDOM.CreateElement("th", null, "Width Expansion % ", htmlHeaderRow);

	CodeEditorUtils.makeHelpIcon(this.helpWidthExpansionPercent, headerWidthExpansion);

	var htmlContentRow = LKDOM.CreateElement("tr", null, null, htmlTBodyNode);
	
	var attTdCell = LKDOM.CreateElement("td", null, null, htmlContentRow);
	var lblTdCell = LKDOM.CreateElement("td", null, null, htmlContentRow);
	var descTdCell = LKDOM.CreateElement("td", null, null, htmlContentRow);
	var defValueTdCell = LKDOM.CreateElement("td", null, null, htmlContentRow);
	var minWidthTdCell = LKDOM.CreateElement("td", null, null, htmlContentRow);
	var widthExpansionTdCell = LKDOM.CreateElement("td", null, null, htmlContentRow);
	
	widthExpansionTdCell.setAttribute("align", "center");
	widthExpansionTdCell.style.textAlign = "center";
	
	this.inputAttributeName = LKDOM.CreateElement("input", null, null, attTdCell, this.id + "_attributeName");
	this.inputLabel = LKDOM.CreateElement("input", null, null, lblTdCell, this.id + "_label");
	this.inputDescription = LKDOM.CreateElement("input", null, null, descTdCell, this.id + "_description");
	this.inputDefaultValue = LKDOM.CreateElement("input", null, null, defValueTdCell, this.id + "_defaultValue");
	this.inputMinWidth = LKDOM.CreateElement("input", null, null, minWidthTdCell, this.id + "_minWidth");
	this.inputWidthExpansion = LKDOM.CreateElement("input", null, null, widthExpansionTdCell, this.id + "_widthExpansionPercent");
	
	//this.inputDescription.type = "checkbox";
	this.inputAttributeName.size = 15;
	this.inputLabel.size = 15;
	this.inputDefaultValue.size = 15;
	this.inputDescription.size = 30;

	this.inputMinWidth.size = 7;
	this.inputWidthExpansion.size = 7;
	
	
	var _this = this;
	var touch = function () { _this.touch(); };
	
	this.inputAttributeName.value = this.attributeName;
	this.inputAttributeName.onkeypress = touch;
	this.inputAttributeName.onfocus = CodeEditorCommon.formElementFocus;
	this.inputAttributeName.onblur = CodeEditorCommon.formElementUnfocus;
	
	this.inputLabel.value = this.label;
	this.inputLabel.onkeypress = touch;
	this.inputLabel.onfocus = CodeEditorCommon.formElementFocus;
	this.inputLabel.onblur = CodeEditorCommon.formElementUnfocus;
	
	this.inputDescription.value = this.description;
	this.inputDescription.onkeypress = touch;
	this.inputDescription.onfocus = CodeEditorCommon.formElementFocus;
	this.inputDescription.onblur = CodeEditorCommon.formElementUnfocus;
	
	this.inputDefaultValue.value = this.defaultValue;
	this.inputDefaultValue.onkeypress = touch;
	this.inputDefaultValue.onfocus = CodeEditorCommon.formElementFocus;
	this.inputDefaultValue.onblur = CodeEditorCommon.formElementUnfocus;
	
	this.inputMinWidth.value = this.minWidth;
	this.inputMinWidth.onkeypress = touch;
	this.inputMinWidth.onfocus = CodeEditorCommon.formElementFocus;
	this.inputMinWidth.onblur = CodeEditorCommon.formElementUnfocus;
	
	this.inputWidthExpansion.value = this.widthExpansionPercent;
	this.inputWidthExpansion.onkeypress = touch;
	this.inputWidthExpansion.onfocus = CodeEditorCommon.formElementFocus;
	this.inputWidthExpansion.onblur = CodeEditorCommon.formElementUnfocus;

	if (readOnlyMode)
	{
		this.inputAttributeName.disabled = true;
		this.inputLabel.disabled = true;
		this.inputDescription.disabled = true;
		this.inputDefaultValue.disabled = true;
		this.inputMinWidth.disabled = true;
		this.inputWidthExpansion.disabled = true;
	}

    return htmlTableNode;
}



ConfigTextFieldDesigner.prototype.touch = function ()
{
	this.setDirtyStatus(true);
}


ConfigTextFieldDesigner.prototype.setDirtyStatus = function (dirtyStatus)
{
	if (this.isDirty == dirtyStatus)
		return;
	this.isDirty = dirtyStatus;
	
	CodeEditorCommon.setConfigTemplateDirty(dirtyStatus);
	
	this.drawTitle();
}

ConfigTextFieldDesigner.prototype.fetchUserData = function ()
{
	if (this.inputAttributeName)
	{
		this.attributeName = this.inputAttributeName.value;
	}

	if (this.inputLabel)
	{
		this.label = this.inputLabel.value;
	}

	if (this.inputDescription)
	{
		this.description = this.inputDescription.value;
	}

	if (this.inputDefaultValue)
	{
		this.defaultValue = this.inputDefaultValue.value;
	}

	if (this.inputMinWidth)
	{
		this.minWidth = this.inputMinWidth.value;
	}
	
	if (this.inputWidthExpansion)
	{
		this.widthExpansionPercent = this.inputWidthExpansion.value;
	}
}

ConfigTextFieldDesigner.prototype.getData = function ()
{	
	this.fetchUserData();
	
	var configDataOnly = { id : this.id,
							order : this.order,
							attributeName : this.attributeName,
							attributeType : 2,
							containerId : this.containerId,
							label : this.label,
							description : this.description,
							defaultValue : this.defaultValue,
							minWidth : this.minWidth,
							widthExpansionPercent : this.widthExpansionPercent
							};
	
	return configDataOnly;
}