var autocompleteItem = function(value, action, section)
{
	this.value = value,
	this.action = action,
	this.section = section != null && section != undefined ? section : -1
}
var autocompleteSection = function(name, id)
{
	this.name = name,
	this.id = id
}
var autocomplete = function(textbox, div, capacity, defaultaction, type, width, callback) {
	this.textbox = textbox,
	this.div = div,
	this.capacity = capacity, // max item number per section
	this.defaultaction = defaultaction,
	this.type = type, // 1 = href, 2 = select, 3 = mail
	this.callback = callback,
	this.searchBoxWidth = width;
	
	this.value = '',
	this.list = [],
	this.selectedIndex = -1,

	this.sections = [],
	this.itemspersection = [],

	this.classhover = 'bgGreen',
	this.classsection = 'Orange',
	this.classtext = 'Dark',

	this.match = function(text) {
		if (this.type == 3) {
			var lastSemicolonIndex = this.textbox.value.lastIndexOf(';', this.textbox.value.length - 1);
			if (lastSemicolonIndex >= 0) {
				var curValue = this.textbox.value.substr(lastSemicolonIndex + 1, this.textbox.value.length - 1).trim();
				var multipleItems = this.textbox.value.split(/;/g);
				for (var i = 0; i < multipleItems.length; i++)
					multipleItems[i] = multipleItems[i].trim();
				for (var i = 0; i < multipleItems.length; i++) {
					if (multipleItems[i].toLowerCase() == text.toLowerCase())
						return false;
				}
				return curValue.toLowerCase() != '' && text.toLowerCase().indexOf(curValue.toLowerCase()) == 0;
			}
		}
		return this.textbox.value.toLowerCase() != '' && text.toLowerCase().indexOf(this.textbox.value.toLowerCase()) == 0;
	},
	this.add = function(item) {
		if (item.section != -1) {
			this.itemspersection[item.section]++;
			if (this.itemspersection[item.section] == 1) {
				var section = this.sections[item.section];
				var row = document.createElement('tr');

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

				this.getBaseTable().appendChild(row);
				row.appendChild(cell);
			}
		}
		if (this.itemspersection[item.section] <= capacity || item.section == -1) {
			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.style.cursor = 'pointer';
			cell.innerHTML = '<a style="text-decoration: none;" class="' + this.classtext + '">' + this.highlightItem(item, curIndex) + '</a>';

			var _this = this;
			cell.onmouseover = function() {
				_this.reset();
				_this.selectedIndex = curIndex;
				$_(_this.textbox.id + curIndex).className = _this.classhover;
				_this.value = _this.list[_this.selectedIndex].value;
			}
			cell.onmouseout = function() {
				_this.reset();
				$_(_this.textbox.id + curIndex).className = '';
				_this.selectedIndex = -1;
				_this.value = _this.textbox.value;
			}
			cell.onclick = function() {
				_this.submit();
			}

			this.getBaseTable().appendChild(row);
			row.appendChild(cell);
		}
	},
	this.addSection = function(sectionName, sectionId) {
		this.list.push(sectionId);
		this.itemspersection[sectionId] = 0;
		this.sections[sectionId] = new autocompleteSection(sectionName, sectionId);
	},
	this.submit = function() {
		var item = this.list[this.selectedIndex];
		switch (this.type) {
			case 1:
				if (this.selectedIndex >= 0) {
					if (this.textbox.value) {
						this.textbox.value = item.value;
						this.textbox.value = this.list[this.selectedIndex].value;
						this.div.style.display = 'none';
						document.location.href = this.list[this.selectedIndex].action;
					}
				}
				else {
					if (this.textbox.value) {
						this.div.style.display = 'none';
						document.location.href = this.defaultaction + this.textbox.value;
					}
				}
				break;
			case 2:
				if (item != null)
					this.textbox.value = item.value;
				this.hide();
				this.reset();
				this.empty();
				break;
			case 3:
				var semicolonIndex = this.textbox.value.indexOf(';');
				if (semicolonIndex < 0)
					this.textbox.value = item.value + '; ';
				else {
					if (item != null) {
						var lastSemicolonIndex = this.textbox.value.lastIndexOf(';', this.textbox.value.length - 1);
						this.textbox.value = this.textbox.value.substr(0, lastSemicolonIndex) + '; ' + item.value + '; ';
					}
				}
				this.hide();
				this.reset();
				this.empty();
				this.textbox.focus();
				break;
		}
		return false;
	},
	this.show = function() {
		this.div.style.left = framework.shared.getElementLeft(this.textbox) + this.searchBoxWidth - 175 - 11 + 'px';
		this.div.style.top = (framework.shared.getElementTop(this.textbox) + this.textbox.offsetHeight) + 'px';

		var count = 0;
		for (var i = 0; i < this.list.length; i++)
			if (typeof this.list[i] !== 'number')
			count++;
		if (count > 0)
			this.div.style.display = '';
		else
			this.hide();
	},
	this.hide = function() {
		this.div.style.display = 'none';

		if (this.selectedIndex >= 0) {
			if ($_(this.textbox.id + this.selectedIndex) != null)
				$_(this.textbox.id + this.selectedIndex).className = '';
			this.selectedIndex = -1;
		}

		if (this.textbox.value == '')
			this.empty();
	},
	this.empty = function() {
		if (this.div.firstChild != null)
			this.div.removeChild(this.div.firstChild);
		else
			this.div.innerHTML = '';
		this.list = [];
	},
	this.reset = function() {
		for (var i = 0; i < this.list.length; i++) {
			if (typeof this.list[i] !== 'number')
				$_(this.textbox.id + i).className = '';
		}
	},
	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 style="background: transparent;" id="span' + curIndex + '" class="' + this.classhighlight + '"><b>' + begin + '</b></span>' + end;
	},
	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;
	},
	this.down = function() {
		if (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.reset();
				$_(this.textbox.id + ++this.selectedIndex).className = this.classhover;
				this.value = this.list[this.selectedIndex].value;
			}
			if (oldSelectedIndex >= 0 && oldSelectedIndex < this.list.length - 1)
				$_(this.textbox.id + oldSelectedIndex).className = '';
		}
		else
			this.value = this.textbox.value;
	},
	this.up = function() {
		this.reset();
		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 = '';
			this.selectedIndex = -1;
			this.value = this.textbox.value;
		}
		else {
			if (this.selectedIndex - 1 < this.list.length && $_(this.textbox.id + (this.selectedIndex - 1)) != null) {
				$_(this.textbox.id + --this.selectedIndex).className = this.classhover;
				this.value = this.list[this.selectedIndex].value;
			}
			if (oldSelectedIndex >= 0 && typeof this.list[oldSelectedIndex] != 'number')
				$_(this.textbox.id + oldSelectedIndex).className = '';
		}
	},
	this.init = function() {
		this.textbox.setAttribute('autocomplete', 'off');

		var _this = this;

		framework.event.addEventListener(this.textbox, 'keydown', function(event) {
			var e = framework.event.eventKeyCode(event);
			if (e == 13 && _this.textbox.value == '')
				return framework.event.cancelEvent(event);
			switch (e) {
				case 13: // enter
					_this.submit();
					return framework.event.cancelEvent(event);
					break;
				case 38: // up arrow
					_this.up();
					break;
				case 40: // down arrow
					_this.down();
					break;
			}
			return true;
		});
		framework.event.addEventListener(this.textbox, 'keyup', function(event) {
			var e = framework.event.eventKeyCode(event);
			switch (e) {
				case 27: // escape
					_this.hide();
					_this.textbox.blur();
					break;
				case 13: // enter
				case 38: // up arrow
				case 40: // down arrow
					break;
				default:
					_this.value = _this.textbox.value;
					if (_this.textbox.value != '') {
						_this.empty();
						_this.callback();
						_this.selectedIndex = -1;
						_this.show();
					}
					else {
						_this.empty();
						_this.hide();
					}
			}
			return framework.event.cancelEvent(event);
		});

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

		framework.event.addEventListener(this.textbox, 'blur', function() {
			document.autocomplete = _this;
			setTimeout(function() {
				document.autocomplete.hide();
			}, 200);
		});
	},
	this.init();
}
var search =
{
	completion: null,
	init: function()
	{
		search.completion = new autocomplete($_(resources.get('CID_Search_UserInput')), $_(resources.get('CID_Search_Results')), 5, resources.get('URL_Search_SearchUrl'), 1, $('#' + resources.get('CID_Search_Panel')).width(), function()
		{
			search.completion.addSection(resources.get('TXT_Search_SectionFriends'), 0);
			for (var i = 0; i < friendnames.length; i++)
			{
				if (search.completion.match(friendnames[i]))
					search.completion.add(new autocompleteItem(friendnames[i], resources.get('URL_Search_PortalRoot') + friendnames[i], 0));
			}
			search.completion.addSection(resources.get('TXT_Search_SectionGames'), 1);
			for (var i = 0; i < gamenames.length; i++)
			{
				if (search.completion.match(gamenames[i][0]))
					search.completion.add(new autocompleteItem(gamenames[i][0], resources.get('URL_Search_GameRoot') + gamenames[i][1], 1));
			}
		});
		framework.event.addEventListener($_(resources.get('CID_Search_ActionButton')), 'click', function()
		{
			if (search.completion != null && (search.completion.textbox.value == '' || search.completion.textbox.value == resources.get('TXT_Search_Watermark')))
			{
				search.completion.textbox.focus();
				return false;
			}
			return search.completion.submit();
		});
	}
}