function ConfigElementDesignerCollection(containerNodeBaseName, containerConfigElementId)
{
	this.containerNodeBaseName = containerNodeBaseName;
	this.containerNodeName = containerNodeBaseName + containerConfigElementId;
	this.containerNode = null;
	this.toggleFunction = null;
	this.containerConfigElementId = containerConfigElementId;
	this.elementDesigners = new Array(); // these are ConfigElementDesigner objects (not DOM elements)
}

// -- init
//
// we have this method because we can't grab the containerNode reference until the document
// is totally loaded (this will be called from the CodeEditorCommon.init() method)
ConfigElementDesignerCollection.prototype.init = function ()
{
	this.containerNode = document.getElementById(this.containerNodeName);
}

// -- runChildrenChanged
// 
// runs the childrenChanged() method on each of the elemtnDesigners
ConfigElementDesignerCollection.prototype.runChildrenChanged = function ()
{
	for (var i = 0; i < this.elementDesigners.length; i++)
	{
		if (this.elementDesigners[i].children)
		{
			this.elementDesigners[i].childrenChanged();
		}
	}
}

ConfigElementDesignerCollection.prototype.setContainerConfigElementId = function (containerConfigElementId)
{
	this.containerConfigElementId = containerConfigElementId;
	this.containerNodeName = this.containerNodeBaseName + containerConfigElementId;
}


// -- setToggleFunction 
//
// this sets up the toggle function which toggles the "Add new config..." element form.
ConfigElementDesignerCollection.prototype.setToggleFunction = function (func)
{
	this.toggleFunction = func;	
}

// -- updateTitles
//
// 
ConfigElementDesignerCollection.prototype.updateTitles = function ()
{

	for (var i = 0; i < this.elementDesigners.length; i++)
		this.elementDesigners[i].drawTitle();

}


// -- updateContainerIds
//
// 
ConfigElementDesignerCollection.prototype.updateContainerIds = function ()
{

	for (var i = 0; i < this.elementDesigners.length; i++)
	{
		this.elementDesigners[i].setContainerId( this.containerConfigElementId );
	
		if (this.elementDesigners[i].children)
		{
			this.elementDesigners[i].children.updateContainerIds();
		}	
	}

}

// -- findMaxOrder
//
// find's the maximum order within this collection
ConfigElementDesignerCollection.prototype.findMaxOrder = function ()
{
	var maxOrder = Number.NEGATIVE_INFINITY;

	for (var i = 0; i < this.elementDesigners.length; i++)
		if (this.elementDesigners[i].order > maxOrder) 
			maxOrder = this.elementDesigners[i].order;

	return maxOrder
}

// -- collectInfo
// 
// collects the info from the controls on the web page into memory (so we can save, or whatever)
ConfigElementDesignerCollection.prototype.collectInfo = function ()
{
	for (var i = 0; i < this.elementDesigners.length; i++)
	{
		this.elementDesigners[i].fetchUserData();
	}
}

// -- getElementDesigners
//
// returns just the data representation for all the config element designers.
ConfigElementDesignerCollection.prototype.getElementDesigners = function ()
{
	var configElementDesigners = new Array();
	
	for (var i = 0; i < this.elementDesigners.length; i++)
	{
		this.elementDesigners[i].fetchUserData();
		
		var elementData = this.elementDesigners[i].getData();
		
		configElementDesigners = configElementDesigners.concat(elementData);
	}
	
	return configElementDesigners;
}


// -- deleteElement
//
// delete's an element
ConfigElementDesignerCollection.prototype.deleteElement = function (configElementDesigner)
{
	for (var i = 0; i < this.elementDesigners.length; i++)
	{
		if (this.elementDesigners[i] == configElementDesigner)
		{
			this.elementDesigners.splice(i, 1);
			this.containerNode.removeChild( this.containerNode.childNodes[i] );			
		}
	}
}


// -- moveElementUp
//
// moves element up in the collection
ConfigElementDesignerCollection.prototype.moveElementUp = function (configElementDesigner)
{
	//alert("asd");
	for (var i = 0; i < this.elementDesigners.length; i++)
	{
		if (this.elementDesigners[i] == configElementDesigner && (i > 0))
		{
			// swap designers.
			var prevDesigner = this.elementDesigners[i-1];
			
			configElementDesigner.fetchUserData();
			
			this.elementDesigners[i-1] = configElementDesigner;
			this.elementDesigners[i] = prevDesigner;
			
			// rerender current node, then remove it from the DOM.  then add it back in.
			var currRendered = CodeEditorCommon.renderSingleConfigElementDesigner(this, configElementDesigner);
			this.containerNode.removeChild(this.containerNode.childNodes[i]);
			this.containerNode.insertBefore(currRendered, this.containerNode.childNodes[i-1]);// = currRendered;
			
			configElementDesigner.afterRender();
			
			if (configElementDesigner.children)
			{
				configElementDesigner.children.renderConfigElementDesigners();
				configElementDesigner.childrenChanged();
			}			
			
			// set the order property.
			configElementDesigner.order--;
			prevDesigner.order++;
			
			// set them as dirty
			configElementDesigner.setDirtyStatus(true);
			prevDesigner.setDirtyStatus(true);
			
			// TODO
			// kick off some saves here.?
			
		}
	}
}


// -- moveElementDown
//
// moves element down in the collection
ConfigElementDesignerCollection.prototype.moveElementDown = function (configElementDesigner)
{
	//alert("asd");
	for (var i = 0; i < this.elementDesigners.length; i++)
	{
		if (this.elementDesigners[i] == configElementDesigner && (i < (this.elementDesigners.length-1)))
		{
			// swap designers.
			var nextDesigner = this.elementDesigners[i+1];
			
			configElementDesigner.fetchUserData();
			
			this.elementDesigners[i+1] = configElementDesigner;
			this.elementDesigners[i] = nextDesigner;
			
			configElementDesigner.order++;
			nextDesigner.order--;
			
			// rerender current node, then remove it from the DOM.  then add it back in.
			var currRendered = CodeEditorCommon.renderSingleConfigElementDesigner(this, configElementDesigner);
			
			this.containerNode.removeChild(this.containerNode.childNodes[i]);
			
			if (i == (this.elementDesigners.length-2)) // if second to last 
			{
				this.containerNode.appendChild(currRendered);
			}
			else
			{
				this.containerNode.insertBefore(currRendered, this.containerNode.childNodes[i+1]);// = currRendered;			
			}
			
			configElementDesigner.afterRender();
			
			if (configElementDesigner.children)
			{
				configElementDesigner.children.renderConfigElementDesigners();
				configElementDesigner.childrenChanged();
			}
			
			// set them as dirty
			configElementDesigner.setDirtyStatus(true);
			nextDesigner.setDirtyStatus(true);
			
			// now save them - but what we have to remember is the objects don't store their order - it's inherant in the 
			// array of the order.  we'll have to fix this.
			// TODO
			// kick off some saves here.?
			
			break;
		}
	}
}


// -- renderConfigElementDesigners
//
// renders the collections set of config element designers to the collections container (blanking
// what was there)
ConfigElementDesignerCollection.prototype.renderConfigElementDesigners = function (callback)
{
	// blank current stuff.
	this.containerNode.innerHTML = "";
	
	//var newInnerHTML = "";
	
	for (var i = 0; i < this.elementDesigners.length; i++)
	{		
		var configElemDesigner = this.elementDesigners[i];
		
		var configElemContainerNode = CodeEditorCommon.renderSingleConfigElementDesigner(this, configElemDesigner);
		
		//newInnerHTML += configElemContainerNode.innerHTML;
		this.containerNode.appendChild(configElemContainerNode);

		configElemDesigner.afterRender();
		
		if (configElemDesigner.children)
		{
			configElemDesigner.children.renderConfigElementDesigners();
		}
	}
	
	//this.containerNode.innerHTML = newInnerHTML;
	if (callback)
	{
		callback();
	}
}


// -- renderConfigElementDesigner
//
// renders one of the collections config element designers.  run after adding a new 
// config designer, 
ConfigElementDesignerCollection.prototype.renderConfigElementDesigner = function (designerIndex)
{
	if (this.elementDesigners[designerIndex] == null)
	{
		return;
	}

	var configElemContainerNode = CodeEditorCommon.renderSingleConfigElementDesigner(this, this.elementDesigners[designerIndex]);

	// its currently rendered
	if (designerIndex < this.containerNode.childNodes.length)
	{
		this.containerNode.childNodes[designerIndex] = configElemContainerNode;
	}
	else
	{
		this.containerNode.appendChild(configElemContainerNode);
	}
	
	
	// run the element designers afterRender event.
	this.elementDesigners[designerIndex].afterRender();
}