/* ========================================================================= */
/* Dynamic lists with JavaScript - r020 (05.02.2010)
/* ========================================================================= */


/* --- class DynamicListItem --- */

function DynamicListItem(_value)
{
	// Properties
	this.value = (_value!='' ? _value : '');		// - value
	this.subItems = new Array();					// - array of subitems
	this.valueTemplate = "%%VAL%%\n%%SUBITEMS%%";	// - item HTML template
	this.subItemsTemplate = "  %%SUBITEM%%";		// - subitems`s HTML template
	this.level = 0;									// - the depth level of the item (0 - root, 1 - root`s subitems, 2 - sub-sub items)
	this.codeId = 'it';								// - the item`s unique code
	this.lastSubItem = 0;							// - last subitem number (to generate unique code)
	this.listObject = null;							// - the main list object
	this.onlyUniqueValues = true;					// - set if have to check for existing items
	this.valueMinLength = 1;						// - minumum length of values (if the values must contain something)

	// Methods
	this.addItem = function(_value)
	{
		if (this.valueMinLength >= _value.length
			|| (this.onlyUniqueValues && this.findItemValue(_value) > -1))
			return false;

		var newInd = this.subItems.length;
		this.subItems[newInd] = new DynamicListItem(_value);
		this.subItems[newInd].level = this.level + 1;
		this.subItems[newInd].valueTemplate = this.valueTemplate;
		this.subItems[newInd].subItemsTemplate = this.subItemsTemplate;
		this.lastSubItem ++;
		this.subItems[newInd].codeId = this.codeId + '-' + this.lastSubItem;
		this.subItems[newInd].listObject = this.listObject;
		this.subItems[newInd].onlyUniqueValues = this.onlyUniqueValues;
		this.subItems[newInd].valueMinLength = this.valueMinLength;
		return this.subItems[newInd];
	}

	this.deleteItem = function(_codeId)
	{
		var delInd = this.findItem(_codeId);

		if (delInd > -1)
		{
			for (var i=delInd+1; i<this.subItems.length; i++)
				this.subItems[i-1] = this.subItems[i];
			this.subItems.pop();
		}
		else
			for (var i=0; i<this.subItems.length; i++)
				this.subItems[i].deleteItem(_codeId);
	}

	this.findItem = function(_codeId)
	{
		for (var i=0; i<this.subItems.length; i++)
			if (this.subItems[i].codeId == _codeId)
				return i;
		return -1;
	}

	this.findItemValue = function(_value)
	{
		for (var i=0; i<this.subItems.length; i++)
			if (this.subItems[i].value == _value)
				return i;
		return -1;
	}

	this.moveItem = function(_codeId, _step)
	{
		var itInd = this.findItem(_codeId);

		if (itInd > -1)
		{
			if (itInd+_step >= 0 && itInd+_step < this.subItems.length)
			{
				var tmp = this.subItems[itInd];
				this.subItems[itInd] = this.subItems[itInd+_step];
				this.subItems[itInd+_step] = tmp;
			}
		}
		else
			for (var i=0; i<this.subItems.length; i++)
				this.subItems[i].moveItem(_codeId, _step);
	}

	this.getContentHTML = function()
	{
		var html = '';
		if (this.subItems.length > 0)
		{
			for (var i=0; i<this.subItems.length; i++)
				html += this.subItemsTemplate.replace('%%SUBITEM%%', this.subItems[i].getContentHTML());
		}
		return this.valueTemplate.replace('%%VAL%%', this.value).replace(/%%ITEMCODE%%/g, this.codeId).replace('%%SUBITEMS%%', html);
	}
}


/* --- class DynamicList --- */

function DynamicList(_containerId)
{
	// Properties
	this.rootItem = new DynamicListItem();				// - the parent of all items
	this.onlyUniqueValues = true;						// - set if have to check for existing items
	this.valueMinLength = 1;							// - minumum length of values (if the values must contain something)
	this.containerId = _containerId;					// - the container ID
	this.isClientIE = (navigator.userAgent.indexOf("MSIE") > -1);	// - mark if the user browser is MS IE
	this.header = '';									// - add additional HTML content before the items HTML
	this.footer = '';									// - add additional HTML content after the items HTML
	this.blankImagePath = 'img/s.png';					// - path to the blank image
	this.tooltipDelete = 'Delete';						// - translation for the tooltips of the "buttons"
	this.tooltipMoveUp = 'Move up';						// - translation for the tooltips of the "buttons"
	this.tooltipMoveDown = 'Move down';					// - translation for the tooltips of the "buttons"

	this.rootItem.listObject = this;					// - initialize the root object`s listObject`s pointer ;P

	// Methods
	this.setTemplate = function(_name)
	{
		switch (_name)
		{
			case 'text':
				this.rootItem.valueTemplate = "%%VAL%%\n%%SUBITEMS%%";
				this.rootItem.subItemsTemplate = "  %%SUBITEM%%";
				break;
			case 'div':
				this.rootItem.valueTemplate =
					'<div>%%VAL%% '+
					'<img class="btn-x" src="'+this.blankImagePath+'" onclick="objList.deleteItemDisplay(\'%%ITEMCODE%%\');" alt="""" title="'+this.tooltipDelete+'"/>'+
					'<img class="btn-up" src="'+this.blankImagePath+'" onclick="objList.moveItemDisplay(\'%%ITEMCODE%%\', -1);" alt="""" title="'+this.tooltipMoveUp+'"/>'+
					'<img class="btn-down" src="'+this.blankImagePath+'" onclick="objList.moveItemDisplay(\'%%ITEMCODE%%\', 1);" alt="""" title="'+this.tooltipMoveDown+'"/>'+
					'</div>%%SUBITEMS%%';
				this.rootItem.subItemsTemplate = '<div style="padding-left:10px">%%SUBITEM%%</div>';
				break;
			case 'table':
				this.rootItem.valueTemplate =
					'<tr><td>%%VAL%%</td>%%SUBITEMS%%'+
					'<td><img class="btn-x" src="'+this.blankImagePath+'" onclick="objList.deleteItemDisplay(\'%%ITEMCODE%%\');" alt="""" title="'+this.tooltipDelete+'"/>'+
					'<img class="btn-up" src="'+this.blankImagePath+'" onclick="objList.moveItemDisplay(\'%%ITEMCODE%%\', -1);" alt="""" title="'+this.tooltipMoveUp+'"/>'+
					'<img class="btn-down" src="'+this.blankImagePath+'" onclick="objList.moveItemDisplay(\'%%ITEMCODE%%\', 1);" alt="""" title="'+this.tooltipMoveDown+'"/></td>'+
					'</tr>';
				this.rootItem.subItemsTemplate = '<td>%%SUBITEM%%</td>';
				break;
		}
	}

	this.setCustomTemplate = function(_valueTemplate, _subItemsTemplate)
	{
		this.rootItem.valueTemplate = _valueTemplate;
		this.rootItem.subItemsTemplate = _subItemsTemplate;
	}

	// Adds an item
	this.addItem = function(_value)
	{
		this.rootItem.onlyUniqueValues = this.onlyUniqueValues;
		this.rootItem.valueMinLength = this.valueMinLength;
		return this.rootItem.addItem(_value);
	}

	// Adds an item from input's value
	this.addInputItem = function(_id)
	{
		var elem = document.getElementById(_id);
		if (elem)
		{
			var newItem = this.addItem(elem.value);
			if (newItem)
			{
				this.display();
				elem.value = '';
			}
			elem.focus();
			return newItem;
		}
		return false;
	}

	// Adds multiple items from inputs
	this.addInputItems = function(_ids, _doNotAutoDraw)
	{
		var newItem = null;
		var newItemTmp = null;
		var elem = null;
		var valueTmp = '';
		for (var i=0; i<_ids.length; i++)
		{
			elem = document.getElementById(_ids[i]);
			if (elem)
			{
				switch (elem.tagName.toLowerCase())
				{
					case 'input': valueTmp = elem.value; break;
					case 'select':
						if (elem.selectedIndex < 0)
							return false;
						var option = elem.options[elem.selectedIndex];
						valueTmp = (!elem.getAttribute('showInnerHTML') ? option.value : option.innerHTML);
						break;
					case 'textarea': valueTmp = elem.innerHTML; break;
				}

				if (!newItem)
					// Add main item
					newItem = this.addItem(valueTmp);
				else
					// Add sub-item
					newItemTmp = newItem.addItem(valueTmp);

				// Check for error
				if ((i==0 && !newItem) || (i>0 && !newItemTmp))
					return false;
			}
			else
				return false;
		}

		if (!_doNotAutoDraw)
			this.display();

		return true;
	}

	this.deleteItem = function(_codeId)
	{
		return this.rootItem.deleteItem(_codeId);
	}

	this.deleteItemDisplay = function(_codeId)
	{
		this.rootItem.deleteItem(_codeId);
		this.display();
	}

	this.moveItem = function(_codeId, _step)
	{
		this.rootItem.moveItem(_codeId, _step);
	}

	this.moveItemDisplay = function(_codeId, _step)
	{
		this.rootItem.moveItem(_codeId, _step);
		this.display();
	}

	this.getContentHTML = function()
	{
		var html = '';
		for (var i=0; i<this.rootItem.subItems.length; i++)
			html += this.rootItem.subItems[i].getContentHTML();

		return this.header + html + this.footer;
	}

	this.display = function()
	{
		if (this.containerId && document.getElementById(this.containerId))
		{
			//if (this.isClientIE)
			//	this.container.outerHTML = this.container.outerHTML.replace(this.container.innerHTML, this.getContentHTML());
			//else
				document.getElementById(this.containerId).innerHTML = this.getContentHTML();
		}
	}
}