/* 
// Ajax auto suggest 
// Versie: 1.1
// Parameters: fieldId, minChars, url
// Wijziging: 07-09-2007
// Added: 'loading image' in input tijdens ajax request (class 'loading') en selecteren tekst (functie 'selectTextRange').
*/

var AutoSuggest = Class.create();

AutoSuggest.prototype = {
	initialize: function(fieldId, minChars, url)
	{
		this.results = null;
		this.selectedItem = null;
		this.input = $(fieldId);
		this.minChars = minChars;
		this.typedLength = 0;
		this.url = url;
		if (this.input)
		{
			this.createSuggest();
			this.input.setAttribute('autocomplete', 'off'); //Schakel browser's eigen autocomplete uit!
			Event.observe(this.input, 'keyup', this.keyListener.bind(this), false);
		}
	},
	createSuggest: function()
	{
		this.container = this.input.parentNode;
		this.suggest = document.createElement('ul');
		this.suggest.className = 'autosuggest';
		this.suggest.style.display = 'none';
		this.container.appendChild(this.suggest);
	},
	keyListener: function(event)
	{
		if (event.keyCode == 40 || event.keyCode == 38)
		{ // Key up & key down
			if (this.results != null)
			{
				this.keySelectSuggestItem(event);
			}
		} else if (event.keyCode == 39 || event.keyCode == 37)
		{ // Key left & key right 
			//Doe niks					
		} else if (event.keyCode == 27 && this.suggest.visible())
		{ // Esc
			$(this.suggest).hide();
		} else if (this.input.value.length >= this.minChars)
		{
			this.typedLength = this.input.value.length;
			this.getSuggestItems();
		} else
		{
			$(this.suggest).hide();
		}
	},
	mouseListener: function(event)
	{
		this.selectedItem = Event.element(event);
		this.mouseSelectSuggestItem();
	},
	getSuggestItems: function()
	{
		var _this = this;
		this.pars = '?searchTerm=' + this.input.value;
		this.input.addClassName('loading');
		var ajax = new Ajax.Request(this.url, { parameters: this.pars, onComplete: function(t) { _this.updateSuggestList(t.responseXML) } });
	},
	updateSuggestList: function(xml)
	{
		this.results = xml.getElementsByTagName('result');
		if (this.results.length > 0)
		{
			this.suggest.update(''); //Verwijder oude termen			
			for (var i = 0; i < this.results.length; i++)
			{
				var li = document.createElement('li');
				li.appendChild(document.createTextNode(this.results[i].getAttribute('title')));
				this.suggest.appendChild(li);
				Event.observe(li, 'mouseover', this.mouseListener.bind(this), false);
			}
		} else
		{
			this.results = null;
			this.suggest.update('<li class="no-results">No suggestions</li>');
		}
		this.input.removeClassName('loading');
		this.suggest.show();
		this.input.focus();
	},
	mouseSelectSuggestItem: function(event)
	{
		alert('mousie');
		this.selectedItem.addClassName('selected');
		//		this.suggest.immediateDescendants().without(this.selectedItem).invoke('removeClassName', 'selected')
		//		this.input.value = this.selectedItem.cleanWhitespace().innerHTML; //nodeValue ??
		//		this.selectTextRange();
		//		this.input.focus();
		//		this.selectedItem.observe('click', function(event)
		//		{
		//			Event.element(event).up('form').submit();
		//		});
	},
	keySelectSuggestItem: function(event)
	{
		alert('ke');
		if (this.selectedItem == null)
		{
			this.selectedItem = this.suggest.firstDescendant();
		} else if (event.keyCode == 40)
		{ //key down
			this.selectedItem.removeClassName('selected');
			var nextItem = this.selectedItem.next();
			if (nextItem)
			{
				this.selectedItem = nextItem;
			} else
			{
				this.selectedItem = this.suggest.firstDescendant(); //Begin weer vanaf boven
			}
		} else if (event.keyCode == 38)
		{ //key up
			this.selectedItem.removeClassName('selected');
			var prevItem = this.selectedItem.previous();
			if (prevItem)
			{
				this.selectedItem = prevItem;
			} else
			{
				this.selectedItem = this.suggest.down(this.suggest.childNodes.length - 1); //Begin weer vanaf onder
			}
		}

		if (this.selectedItem)
		{
			this.selectedItem.addClassName('selected');
			if (this.selectedItem.scrollIntoView)
			{
				this.selectedItem.scrollIntoView(false)
			}
			this.input.value = this.selectedItem.cleanWhitespace().innerHTML; //nodeValue ??
			this.selectTextRange();
			this.input.focus();
		}
	},
	selectTextRange: function()
	{
		var start = this.typedLength;
		var end = this.input.value.length;
		if (this.input.createTextRange)
		{
			var itsTextRange = this.input.createTextRange();
			itsTextRange.moveStart("character", start);
			itsTextRange.moveEnd("character", end);
			itsTextRange.select();
		}
		if (this.input.setSelectionRange)
		{
			this.input.setSelectionRange(start, end);
		}
	}

};

/*
Event.observe(window,'load',function(){ new AutoSuggest('searchTerm', 3, '/autosuggest.aspx'); }, false);
*/