// use this contructor to create an autocomplete item (else it won't work)
var autocompleteItem = function(value, action, section)
{
	this.value = value,
	this.action = action,
	this.section = section
}
var autocomplete = function(textbox, div, callback, instanceName)
{
	// public properties
	this.name = instanceName,
	this.textbox = textbox,
	this.div = div,

	// css classes
	this.classhover = 'bgGreen',
	this.classhighlight = 'bgPaleGreen',
	this.classsection = 'Orange',
	this.classtext = 'Dark',

	// private properties (do NOT use them)
	this._value = null,
	this._callback = callback,
	this._list = [],
	this._selectedIndex = -1,

	// empties the autocomplete
	this.empty = function()
	{
		if (this.div.firstChild != null)
			this.div.removeChild(this.div.firstChild);
		else
			this.div.innerHTML = '';
		this._list = [];
	},

	// shows the autocomplete
	this.show = function()
	{
		if (this._list.length > 0)
			this.div.style.display = '';
		else
			this._hide();
	},

	// submits the selected item
	this.submit = function()
	{
		if (this._selectedIndex >= 0)
		{
			this.textbox.value = this._list[this._selectedIndex].value;
			document.location.href = this._list[this._selectedIndex].action;
			this._hide();
			return false;
		}
		this._hide();
		this.empty();
		return true;
	},

	// adds a item (that can be submitted)
	this.add = function(item)
	{
		this._list.push(item);
		var curIndex = this._list.length - 1;

		var row = document.createElement('tr');

		var cell = document.createElement('td');
		cell.setAttribute('id', this.textbox.id + curIndex);
		cell.innerHTML = String.format('<a style="text-decoration: none;" class="' + this.classtext + '">{0}</a>', this._highlightItem(item, curIndex));

		var _this = this;
		cell.style.cursor = 'pointer';
		cell.onmouseover = function()
		{
			if (_this._selectedIndex > 0)
			{
				$(_this.textbox.id + _this._selectedIndex).className = '';
				$('span' + _this._selectedIndex).className = _this.classhighlight;
			}
			_this._selectedIndex = curIndex;
			$(_this.textbox.id + curIndex).className = _this.classhover;
			$('span' + curIndex).className = _this.classhover;
		}
		cell.onmouseout = function()
		{
			$(_this.textbox.id + curIndex).className = '';
			$('span' + curIndex).className = _this.classhighlight;
		}
		cell.onclick = function()
		{
			_this.textbox.value = item.value;
			_this.submit();
		}

		this._getBaseTable().appendChild(row);
		row.appendChild(cell);
	},

	// adds a section (actually not a real item)
	this.addSection = function(sectionName, sectionId)
	{
		this._list.push(sectionId);

		var row = document.createElement('tr');

		var cell = document.createElement('td');
		cell.setAttribute('id', this.textbox.id + (this._list.length - 1));
		cell.innerHTML = sectionName;
		cell.className = this.classsection;
		cell.setAttribute('sectionId', sectionId);

		this._getBaseTable().appendChild(row);
		row.appendChild(cell);
	},

	// hides the autocomplete (without emptying it)
	this._hide = function()
	{
		this.div.style.display = 'none';

		if (this._selectedIndex >= 0)
		{
			$(this.textbox.id + this._selectedIndex).className = '';
			$('span' + this._selectedIndex).className = this.classhighlight;
			this._selectedIndex = -1;
		}

		if (this.textbox.value == '')
			this.empty();
	},

	// highlights the item's subtext that matches the current textbox's value
	this._highlightItem = function(item, curIndex)
	{
		var begin = item.value.substring(0, this.textbox.value.length);
		var end = item.value.substring(this.textbox.value.length, item.value.length);
		return '<span id="span' + curIndex + '" class="' + this.classhighlight + '"><b>' + begin + '</b></span>' + end;
	},

	// returns the base table used to populate the autocomplete list (or first creates it)
	this._getBaseTable = function()
	{
		var tbody = $(this.textbox.id + 'tbody');
		if (tbody == null)
		{
			var table = document.createElement('table');
			table.setAttribute('id', this.textbox.id + 'table');
			table.setAttribute('cellpadding', '0');
			table.setAttribute('cellspacing', '0');
			table.setAttribute('border', '0');
			table.setAttribute('width', '100%');

			tbody = document.createElement('tbody');
			tbody.setAttribute('id', this.textbox.id + 'tbody');
			table.appendChild(tbody);

			this.div.appendChild(table);
		}
		return tbody;
	},

	// down arrow hit
	this._down = function()
	{
		if (this._list != null && this._list.length > 0 && this._selectedIndex < this._list.length)
		{
			var oldSelectedIndex = this._selectedIndex;
			while (typeof this._list[this._selectedIndex + 1] === 'number')
				this._selectedIndex++;
			if (this._selectedIndex + 1 < this._list.length)
			{
				$(this.textbox.id + ++this._selectedIndex).className = this.classhover;
				$('span' + this._selectedIndex).className = this.classhover;
			}
			if (oldSelectedIndex >= 0 && oldSelectedIndex < this._list.length - 1)
			{
				$(this.textbox.id + oldSelectedIndex).className = '';
				$('span' + oldSelectedIndex).className = this.classhighlight;
			}
		}
	},

	// up arrow hit
	this._up = function()
	{
		if (this._list != null)
		{
			var oldSelectedIndex = this._selectedIndex;
			while (typeof this._list[this._selectedIndex - 1] === 'number')
				this._selectedIndex--;
			if (this._selectedIndex == 0)
			{
				if (typeof this._list[oldSelectedIndex] != 'number')
				{
					$(this.textbox.id + oldSelectedIndex).className = '';
					$('span' + oldSelectedIndex).className = this.classhighlight;
				}
				this._selectedIndex = -1;
			}
			else
			{
				if (this._selectedIndex - 1 < this._list.length && $(this.textbox.id + (this._selectedIndex - 1)) != null)
				{
					$(this.textbox.id + --this._selectedIndex).className = this.classhover;
					$('span' + this._selectedIndex).className = this.classhover;
				}
				if (oldSelectedIndex >= 0 && typeof this._list[oldSelectedIndex] != 'number')
				{
					$(this.textbox.id + oldSelectedIndex).className = '';
					$('span' + oldSelectedIndex).className = this.classhighlight;
				}
			}
		}
	},

	// initializes the autocomplete
	this._init = function()
	{
		this.div.left = framework.shared.getElementLeft(this.div);
		this.div.top = framework.shared.getElementTop(this.div);
		if (navigator.userAgent.indexOf('Safari') >= 0)
			this.div.style.marginTop = '19px';

		textbox.setAttribute('autocomplete', 'off');

		var _this = this;

		framework.event.addEventListener(
			this.textbox,
			'keyup',
			function(event)
			{
				var e = framework.event.eventKeyCode(event);
				if (e != 38 && e != 40 && e != 13 && e != 27 && _this.textbox.value != '' && _this.textbox.value != _this._value)
				{
					_this._callback();
					_this._value = _this.textbox.value;
				}
				else if (_this.textbox.value == '')
				{
					_this.empty();
					_this._hide();
				}
			});

		framework.event.addEventListener(
			this.textbox,
			'keyup',
			function(event)
			{
				var e = framework.event.eventKeyCode(event);
				switch (e)
				{
					case 38:
						_this._up();
						break;
					case 40:
						_this._down();
						break;
					case 27:
						_this._hide();
						_this.textbox.blur();
						break;
				}
			}
		);

		framework.event.addEventListener(
			this.textbox,
			'focus',
			function()
			{
				_this.show();
			}
		);

		framework.event.addEventListener(
			this.textbox,
			'blur',
			function(e)
			{
				setTimeout(_this.name + '._hide();', 250);
			}
		);
	},

	this._init();
}