function ConfigOptionGroupElementDesigner(id, order, attributeName, label, value, isDefaultValue)
{
	this.designsClass = "ConfigOptionGroupElement";
	this.designsClassDisplay = "Option";

   	this.id = id;
   	this.order = order;
    this.containerId = 0;    
    this.attributeName = attributeName; //"optionElement";
    this.label = label;
    this.value = value;
    this.isDefaultValue = isDefaultValue;

	this.helpLabel = "A short one or two word label which appears to the right of the option.";
	this.helpValue = "The value that the ConfigOptionGroup configuration attribute will be set to if this item is chosen by the user.";
    
    if (id == -1)
		this.isDirty = true;
	else
		this.isDirty = false;
		
	// node ref which is a DOM node containing our title
	this.titleNodeRef = null;
}

ConfigOptionGroupElementDesigner.prototype.afterRender = function ()
{
}

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

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

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

ConfigOptionGroupElementDesigner.prototype.drawTitle = function ()
{
	if (this.titleNodeRef)
		this.titleNodeRef.innerHTML = this.designsClassDisplay; //+ ": " + this.attributeName; //  + ((this.isDirty) ? "*" : "");
}


ConfigOptionGroupElementDesigner.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 headerLabel = LKDOM.CreateElement("th", null, "Label ", htmlHeaderRow);

	CodeEditorUtils.makeHelpIcon(this.helpLabel, headerLabel);
	
	var headerValue = LKDOM.CreateElement("th", null, "Value ", htmlHeaderRow);
	
	CodeEditorUtils.makeHelpIcon(this.helpValue, headerValue);

	var htmlContentRow = LKDOM.CreateElement("tr", null, null, htmlTBodyNode);
	
	var labelTdCell = LKDOM.CreateElement("td", null, null, htmlContentRow);
	var valueTdCell = LKDOM.CreateElement("td", null, null, htmlContentRow);
	
	this.inputLabel = LKDOM.CreateElement("input", null, null, labelTdCell, this.id + "_label");
	this.inputValue = LKDOM.CreateElement("input", null, null, valueTdCell, this.id + "_value");
	
	var _this = this;
	var touch = function () { _this.touch(); };
	
	this.inputLabel.size = 15;
	this.inputValue.size = 15;
	
	
	this.inputLabel.value = this.label;
	this.inputLabel.onkeypress = touch;
	this.inputValue.value = this.value;
	this.inputValue.onkeypress = touch;
	
	this.inputLabel.onfocus = CodeEditorCommon.formElementFocus;
	this.inputLabel.onblur = CodeEditorCommon.formElementUnfocus;

	this.inputValue.onfocus = CodeEditorCommon.formElementFocus;
	this.inputValue.onblur = CodeEditorCommon.formElementUnfocus;
			
	
	if (readOnlyMode)
	{
		this.inputLabel.disabled = true;
		this.inputValue.disabled = true;
	}

    return htmlTableNode;
}


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


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

ConfigOptionGroupElementDesigner.prototype.fetchUserData = function ()
{
	if (this.inputLabel)
	{
		this.label = this.inputLabel.value;
	}	
	if (this.inputValue)
	{
		this.value = this.inputValue.value;
	}
}

ConfigOptionGroupElementDesigner.prototype.getData = function ()
{	
	var configDataOnly = { id : this.id,
							order : this.order,
							attributeName : this.attributeName, 
							label : this.label,
							value : this.value,
							isDefaultValue : this.isDefaultValue,
							attributeType : 8, 
							containerId : this.containerId
						};
	
	return configDataOnly;
}