function ConfigOptionGroupDesigner(id, order, attributeName, label, description, optionElements)
{
	this.designsClass = "ConfigOptionGroup";
	this.designsClassDisplay = "Option Group";
	
    this.id = id;
   	this.order = order;   	   	
    this.attributeName = attributeName;
    this.label = label;
    this.description = description;
    this.attributeType = 7;
    this.containerId = 0;
    
    
    this.helpAttributeName = "The attribute name is the name by which you can access this options value through your Javacsript code.  It must be unique.";
    this.helpLabel = "The label appears to the left of the options.  It short be a short explaination of the what the options allow the user to choose.";
    this.helpDescription = "The description appears in a smaller font and can be longer than the label, perhaps an example value.";
    this.helpDefaultOption = "The default value for this option group.";


	// this is initialized here.  it's init() method isn't called here, but rather in afterRender() because that's
	// when it's been addded to the page and we can setup the node references.
    this.children = new ConfigElementDesignerCollection("childElementDesignerCollectionContainer", this.id);
    
    if (optionElements)
    {
		for (var i = 0; i < optionElements.length; i++)
		{
			this.children.elementDesigners.push(optionElements[i]);
		}
    }
    
    //this.defaultValue = defaultValue;
    
    // 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;
}

ConfigOptionGroupDesigner.prototype.fillChildren = function ()
{
	this.selectDefaultOption.innerHTML = "";
	
	var standardDefault = LKDOM.CreateElement("option", null, "-", this.selectDefaultOption);
	standardDefault.value = -1;
	
	for (var i = 0; i < this.children.elementDesigners.length; i++)
	{
		var aChild = LKDOM.CreateElement("option", null, this.children.elementDesigners[i].label, this.selectDefaultOption);
		aChild.value = this.children.elementDesigners[i].id;
	}
	
	this.selectDefaultOption.value = -1;
}


ConfigOptionGroupDesigner.prototype.childrenChanged = function ()
{
	var currentlyChosen = this.selectDefaultOption.value;
	
	this.children.collectInfo();
	
	this.fillChildren(); // fill our "Default Option Element" drop down with the list of children.
	
	this.selectDefaultOption.value = currentlyChosen;
	
	if (this.selectDefaultOption.value == -1)
	{
		if (this.children.elementDesigners.length > 0)
		{
			this.selectDefaultOption.value = this.children.elementDesigners[0].id;
		}
	}
}


ConfigOptionGroupDesigner.prototype.afterRender = function ()
{
	//var firstId = -1;
	
	this.children.init();
	
	for (var i = 0; i < this.children.elementDesigners.length; i++)
	{
		if (this.children.elementDesigners[i].isDefaultValue)
		{
			this.selectDefaultOption.value = this.children.elementDesigners[i].id;
		}
	}
	
	//alert(firstId);
	//if (this.selectDefaultOption.value == -1)
	//	this.selectDefaultOption.value = firstId;
}

ConfigOptionGroupDesigner.prototype.setId = function (id)
{
	this.id = id;
	this.children.setContainerConfigElementId(id);
}

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

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

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

ConfigOptionGroupDesigner.prototype.getDesignerNode = function (readOnlyMode)
{	
	var _this = this;
	var touch = function () { _this.touch(); };
	var toggleOurForm = function () {
	};
	
	this.children.setToggleFunction(toggleOurForm);
	
    var htmlTableNode = LKDOM.CreateElement("table");
    
    //htmlTableNode.setAttribute("width", "100%");
    
    var htmlTBodyNode = LKDOM.CreateElement("TBODY", null, null, htmlTableNode, null);
        
	var htmlHeaderRow = LKDOM.CreateElement("tr", null, null, htmlTBodyNode);    
    
	var attNameHeader = LKDOM.CreateElement("th", null, "Attribute Name ", htmlHeaderRow);
	CodeEditorUtils.makeHelpIcon(this.helpAttributeName, attNameHeader);
	
	var lblHeader = LKDOM.CreateElement("th", null, "Label ", htmlHeaderRow);
	CodeEditorUtils.makeHelpIcon(this.helpLabel, lblHeader);
	
	var descHeader = LKDOM.CreateElement("th", null, "Description ", htmlHeaderRow);
	CodeEditorUtils.makeHelpIcon(this.helpDescription, descHeader);
			
	var defOptHeader = LKDOM.CreateElement("th", null, "Default Option ", htmlHeaderRow);
	CodeEditorUtils.makeHelpIcon(this.helpDefaultOption, defOptHeader);
	
	// spacer
	LKDOM.CreateElement("th", null, "", htmlHeaderRow); // spacer

	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 defOptIndexTdCell = LKDOM.CreateElement("td", null, null, htmlContentRow);

	var spacerTdCell = LKDOM.CreateElement("td", null, null, htmlContentRow);
	//spacerTdCell.style.width = "100%";
	
	
	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.selectDefaultOption = LKDOM.CreateElement("select", this.id + "_defaultOption", null, defOptIndexTdCell, this.id + "_defaultOption");

	this.selectDefaultOption.onchange = function () {
		var optId = _this.selectDefaultOption.value;
		
		for (var j = 0; j < _this.children.elementDesigners.length; j++)
		{
			if (_this.children.elementDesigners[j].id == optId)
			{
				_this.children.elementDesigners[j].isDefaultValue = 1;
			}
			else
			{
				_this.children.elementDesigners[j].isDefaultValue = 0;			
			}
		}
	};
	
	this.fillChildren();
	
	
	this.inputAttributeName.size = 15;
	this.inputLabel.size = 15;
	this.selectDefaultOption.style.width = "90px";
	this.inputDescription.size = 30;
	
	this.inputAttributeName.value = this.attributeName;
	this.inputAttributeName.onkeypress = touch;
	this.inputLabel.value = this.label;
	this.inputLabel.onkeypress = touch;
	this.inputDescription.value = this.description;
	this.inputDescription.onkeypress = touch;
	//this.selectDefaultOption.value = this.defaultOptionIndex;
	this.selectDefaultOption.onkeypress = touch;
	
	this.inputAttributeName.onfocus = CodeEditorCommon.formElementFocus;
	this.inputAttributeName.onblur = CodeEditorCommon.formElementUnfocus;

	this.inputLabel.onfocus = CodeEditorCommon.formElementFocus;
	this.inputLabel.onblur = CodeEditorCommon.formElementUnfocus;

	this.inputDescription.onfocus = CodeEditorCommon.formElementFocus;
	this.inputDescription.onblur = CodeEditorCommon.formElementUnfocus;


	// this holds the "Add new config element to table..." link.
	var htmlContentRowAddNewLink = LKDOM.CreateElement("tr", null, null, htmlTBodyNode);
	var addNewLinkCell = LKDOM.CreateElement("td", null, null, htmlContentRowAddNewLink);
	addNewLinkCell.style.height = "20px";
	//addNewLinkCell.style.width = "100%";
	addNewLinkCell.setAttribute("colSpan", 5);
	
	var divContainer = LKDOM.CreateElement("div", null, null, addNewLinkCell);
	divContainer.style.fontSize = "14px";
	divContainer.style.paddingLeft = "4px";
	divContainer.style.paddingBottom = "10px";
	divContainer.style.paddingTop = "10px";
	
	
	var divAddNewConfigElementLink = LKDOM.CreateElement("div", "toggleAddNewConfigFormLink" + this.id, "&raquo; ", divContainer, null);
		
	var aLink = LKDOM.CreateElement("a", null, "Add new option to group...", divAddNewConfigElementLink, null);
	aLink.href = "javascript:void(0)";
	aLink.onclick = function () {
		CodeEditorCommon.addNewConfigElement(8, _this.children);
		return false;
	};
	

	// this is to hold the children config element designers.
	var htmlContentRowElements = LKDOM.CreateElement("tr", null, null, htmlTBodyNode);
	var elementsTdCell = LKDOM.CreateElement("td", "childElementDesignerCollectionContainer" + _this.id, null, htmlContentRowElements);
	//elementsTdCell.style.border = "1px solid black";
	//alert(elementsTdCell.setAttribute);
	elementsTdCell.setAttribute("colSpan", 5); // FF
	//elementsTdCell.style.width = "100%";
	elementsTdCell.style.marginLeft = "40px";
		
	if (readOnlyMode)
	{
		this.inputAttributeName.disabled = true;
		this.inputLabel.disabled = true;
		this.inputDescription.disabled = true;
		this.selectDefaultOption.disabled = true;
		divAddNewConfigElementLink.style.display = "none";
	}
	
    return htmlTableNode;
}



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


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

ConfigOptionGroupDesigner.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.children)
	{
		this.children.collectInfo();
	}
}

ConfigOptionGroupDesigner.prototype.getData = function ()
{	
	this.fetchUserData();
	
	var configDesigners = new Array();
	
	var configDataOnly = { id : this.id,
							order : this.order,
							attributeName : this.attributeName,
							label : this.label,
							description : this.description,
							attributeType : 7,
							containerId : this.containerId
							};
							
	configDesigners.push(configDataOnly);
	
	if (this.children && this.children.elementDesigners)
	{
		var childConfigDesigners = this.children.getElementDesigners();
		configDesigners = configDesigners.concat(childConfigDesigners);
	}	
	
	// as it's a table, and we have sub-elements / children, we return an array here not a single
	// object of which to save.  The children do not need to be listed under the parent table element
	// as thats extra complexity for no gain - they all have their containerId stored within them anyways
	return configDesigners;
}