MultipleItemsSelector = function()
{
	var _self = this;
	extendClass(_self, BaseJsControl);

	_self.ClearContainer = function()
	{
		var el = _self.GetElement('Container');
		while (el.firstChild) el.removeChild(el.firstChild);
	}

	_self.EnsureItems = function()
	{
		_self.noItemsContainer.style.display = (_self.items.length ? 'none' : '');
	}

	_self.InitContainer = function()
	{
		_self.ClearContainer();

		var ttl = document.createElement('DIV');
		ttl.className = 'mis-title';
		_self.GetElement('Container').appendChild(ttl);

		_self.noItemsContainer = document.createElement('DIV');
		_self.noItemsContainer.className = 'mis-no-items';
		_self.noItemsContainer.innerHTML = 'No items selected';
		ttl.appendChild(_self.noItemsContainer);

		_self.itemsContainer = document.createElement('DIV');
		_self.itemsContainer.className = 'mis-items-container';
		ttl.appendChild(_self.itemsContainer);

		var sectionsContainer = document.createElement('DIV');
		sectionsContainer.className = 'mis-sections-container';
		_self.GetElement('Container').appendChild(sectionsContainer);

		for (var i = 0; i < _self.sections.length; i++)
		{
			var sect = document.createElement('DIV');
			sect.className = 'mis-section';
			sectionsContainer.appendChild(sect);

			var img = document.createElement('IMG');
			img.src = _self.closedImg;
			img.onclick = _self.ExpandCollapse;
			sect.appendChild(img);

			var stitle = document.createElement('SPAN');
			stitle.innerHTML = _self.prefix + ' <b>' + _self.sections[i][1] + '</b>';
			stitle.onclick = _self.ExpandCollapse;
			sect.appendChild(stitle);

			var sitems = document.createElement('TABLE');
			sitems.cellSpacing = 0;
			sitems.cellPadding = 0;
			sitems.style.display = 'none';
			sect.appendChild(sitems);

			var sbody = document.createElement('TBODY');
			sitems.appendChild(sbody);

			var trel;
			var sectId = _self.sections[i][0];

			for (var j = 0; j < _self.sections[i][2].length; j++)
			{
				if (j % _self.columns == 0)
				{
					trel = document.createElement('TR');
					sbody.appendChild(trel);
				}

				var itemId = _self.sections[i][2][j][0];
				var itemName = _self.sections[i][2][j][1];

				var tdel = document.createElement('TD');
				tdel.innerHTML = /* '&laquo; ' + */ itemName;
				tdel.className = 'mis-en';
				tdel.onclick = _self.CreateDelegate(_self.AppendItem, sectId, itemId);
				trel.appendChild(tdel);

				_self.sectionsHash[sectId+':'+itemId] = {name: itemName, el: tdel};
			}
		}
	}

	_self.ExpandCollapse = function()
	{
		var sect = this.parentNode;
		var img = sect.getElementsByTagName('IMG')[0];
		var sitems = sect.getElementsByTagName('TABLE')[0];

		if (sitems.style.display == '')
		{
			sitems.style.display = 'none';
			img.src = _self.closedImg;
		}
		else
		{
			sitems.style.display = '';
			img.src = _self.openedImg;
		}
	}

	_self.MouseOver = function()
	{
		if (this.className.indexOf('mis-sel') == -1) this.className += ' mis-sel';
	}

	_self.MouseOut = function()
	{
		if (this.className.indexOf('mis-sel') != -1) this.className = this.className.substring(0, this.className.indexOf(' mis-sel'));
	}

	_self.RemoveItem = function(sid, id)
	{
		var nitems = [];

		for (var i = 0; i < _self.items.length; i++) {
			if (_self.items[i].sid!=sid || _self.items[i].id!=id) nitems.push(_self.items[i]);
		}

		_self.items = nitems;

		_self.itemsContainer.removeChild(this.parentNode);
		if (_self.items.length > 0) _self.items[_self.items.length - 1].el.className = 'mis-item mis-last';

		_self.sectionsHash[sid+':'+id].el.className = 'mis-en';
		_self.EnsureItems();
		_self.UpdateHidden();
	}

	_self.AppendItem = function(sid, id, upd)
	{
		if (typeof(upd) == 'undefined') upd = true;

		for (var i = 0; i < _self.items.length; i++) {
			if (_self.items[i].sid==sid && _self.items[i].id==id) return;
		}

		if (_self.items.length > 0) _self.items[_self.items.length - 1].el.className = 'mis-item';

		var itm = document.createElement('SPAN');
		itm.style.position = 'relative';
		itm.className = 'mis-item mis-last';
		itm.onmouseover = _self.MouseOver;
		itm.onmouseout = _self.MouseOut;
		_self.itemsContainer.appendChild(itm);

		var elname = document.createElement('SPAN');
		elname.innerHTML = _self.sectionsHash[sid+':'+id].name;
		itm.appendChild(elname);

		var img = document.createElement('IMG');
		img.style.left = itm.offsetWidth - 5;
		img.src = _self.deleteImg;
		img.onclick = _self.CreateDelegate(_self.RemoveItem, sid, id);
		itm.appendChild(img);

		var spc = document.createElement('SPAN');
		spc.className = 'mis-spc'
		spc.innerHTML = ',';
		itm.appendChild(spc);

		var item = {el: itm, sid: sid, id: id, name: name};
		_self.items.push(item);

		_self.sectionsHash[sid+':'+id].el.className = 'mis-dis';
		_self.EnsureItems();

		if (upd) _self.UpdateHidden();
	}

	_self.RestoreFromHidden = function()
	{
		var hid = _self.GetElement('ItemsHid');
		if (hid.value == '') return;

		var spl = hid.value.split(',');

		for (var i = 0; i < spl.length; i++)
		{
			var splx = spl[i].split(':');

			var sid = splx[0];
			var id = splx[1];

			_self.AppendItem(sid, id, false);
		}
	}

	_self.UpdateHidden = function()
	{
		var res = '';
		for (var i = 0; i < _self.items.length; i++) res += (res==''?'':',') + _self.items[i].sid+':'+_self.items[i].id;
		_self.GetElement('ItemsHid').value = res;
	}

	_self.InitItems = function()
	{
		_self.InitContainer();
		_self.RestoreFromHidden();
		_self.EnsureItems();
	}

	_self.Init = function(sections, columns, prefix, closedImg, openedImg, deleteImg)
	{
		_self.columns = columns;
		_self.sections = sections;
		_self.prefix = prefix;
		_self.closedImg = closedImg;
		_self.openedImg = openedImg;
		_self.deleteImg = deleteImg;

		setTimeout(_self.InitItems, 1);
	}

	/*
	 * Constructor
	 */

	_self.prefix = '';
	_self.items = [];
	_self.columns = 1;
	_self.sections = [];
	_self.closedImg = '';
	_self.openedImg = '';
	_self.deleteImg = '';
	_self.sectionsHash = [];
	_self.itemsContainer = null;
}