function Suggest(elem, suggestions) {
	var me = this;
	this.elem = elem;
	this.suggestions = suggestions;
	this.eligible = new Array();
	this.inputText = null;
	this.highlighted = -1;
	this.div = $("autosuggest");
	
	var TAB = 9;
	var ESC = 27;
	var KEYUP = 38;
	var KEYDN = 40;
	var ENTER = 13;
	
	elem.setAttribute("autocomplete","off");

	elem.onkeydown = function(ev) {
		var key = me.getKeyCode(ev);
		
		switch(key) 	{
			case TAB:
				temp = 0;
				me.useSuggestion();
			break;
			case ENTER: {
				temp = ENTER;
				me.useSuggestion();
			} break;

			case ESC:
			me.hideDiv();
			break;

			case KEYUP:
			
			if (me.highlighted > 0)
			{
				me.highlighted--;
			}

			me.changeHighlight(key);
			break;

			case KEYDN:			
			if (me.highlighted < (me.eligible.length - 1))
			{
				me.highlighted++;
			}
			me.changeHighlight(key); 
			break;
		}
	};

	elem.onkeyup = function(ev) {
		var key = me.getKeyCode(ev);
		switch(key)	{
		case TAB:
		case ENTER:
		case ESC:
		case KEYUP:
		case KEYDN:
			return;
		default:
			/* voor uitgebreid zoeken */
			$('autosuggest').style.width = parseInt(elem.style.width) + 'px';
		
			if (this.value != me.inputText && this.value.length > 0) {
				me.inputText = this.value;
				me.getEligible();
				me.createDiv();
				me.positionDiv();
				me.showDiv();	
			}
			else
			{
				me.hideDiv();
			}
		}
	};

	this.useSuggestion = function(ev) {
		if (this.highlighted > -1)
		{
			if (temp==ENTER) doSubmit = false; temp=0;	
			
			this.elem.value = this.eligible[this.highlighted];
			this.hideDiv();
			
			setTimeout("$('" + this.elem.id + "').focus()",0);
			var fl = document.forms.length;
			
			for (var n = 0; n < fl; n++)
			{
				var len = document.forms[n].elements.length;
			
				for (var i = 0; i < len; i++) {
					if (document.forms[n].elements[i].id == this.elem.id) {
					 var frm = n; 
					 var txt = i-1;
					}
				}
			}
			
			var fi_val = document.forms[frm].elements[txt].value;

			if(fi_val!='' && this.elem.id =='tg-where') { 
				document.forms[frm].submit(); 
			} else {
				var fi_id = document.forms[frm].elements[txt].id;
				setTimeout("$('" + fi_id + "').focus()",0);
			}
			
		}
	};

	this.showDiv = function() {
		this.div.style.display = 'block';
	};

	this.hideDiv = function() {
		this.div.style.display = 'none';
		this.highlighted = -1;
	};

	this.changeHighlight = function() {
		
		var lis = this.div.getElementsByTagName('LI');
		
		for (i in lis){
			var li = lis[i];

			if (this.highlighted == i) {
				li.className = "selected";
				this.scrollTo(li);
			} else {
				li.className = "";
			}
		}
		
	};

	this.positionDiv = function() {
	 	
		var el = this.elem;
	 	
	 	var coors_loc = findPos(el);
		var loc_x=coors_loc[0]; 
		var loc_y=coors_loc[1]; 
		var loc_o=el.offsetHeight;
		
		var coors_as = findPos(this.div);
		var as_x=coors_as[0]; 
		var as_y=coors_as[1]; 
	
		var x = loc_x-as_x;
		var y = loc_y-as_y+loc_o;
		
		if (x!=as_x) {
			 x = loc_x;
			 y = loc_y+loc_o;
		}	
	
		this.div.style.position = 'absolute';
		this.div.style.left = x + 'px';
		this.div.style.top = y + 'px';
		this.div.scrollTop = 0;
		
	};

	this.createDiv = function()	{
		var ul = document.createElement('ul');
	
		for (i in this.eligible) {
			var word = this.eligible[i];
	
			var li = document.createElement('li');

			var a = document.createElement('a');
			a.href="javascript:false";
			a.innerHTML = word;
			li.appendChild(a);
	
			if (me.highlighted == i) {
				li.className = "selected";
			}
	
			ul.appendChild(li);
		}
	
		this.div.replaceChild(ul,this.div.childNodes[0]);
	
		ul.onmouseover = function(ev){
			var target = me.getEventSource(ev);
		
			while (target.parentNode && target.tagName.toUpperCase() != 'LI')
			{
				target = target.parentNode;
			}
		
			var lis = me.div.getElementsByTagName('LI');
			
			for (i in lis) {
				var li = lis[i];
				if(li == target)
				{
					me.highlighted = i;
					break;
				}
			}
			me.changeHighlight();
		};
		
		ul.onclick = function(ev) {
			temp = 0;
			me.useSuggestion();
			me.hideDiv();
			me.cancelEvent(ev);
			return false;
		};
	
		this.div.className="suggestion_list";
		this.div.style.position = 'absolute';		
	};

	this.getEligible = function() {
		this.eligible = new Array();
		var teller = 0;
		
		for (i in this.suggestions) 
		{
			var suggestion = this.suggestions[i];
			if(suggestion.toLowerCase().indexOf(this.inputText.toLowerCase()) == "0")
			{
				this.eligible[this.eligible.length]=suggestion;
				teller += 1;
			}
		}
		
		if (teller > 13) {
			this.div.style.visibility = 'visible';
			this.div.style.height = '167px';
		} else if ( teller == 0) {
			this.div.style.visibility = 'hidden';
			this.highlighted = -1;
		  } else {
			this.div.style.visibility = 'visible';
			var n = (12 * teller);
			this.div.style.height = n+'px'; 
		}
	};

	this.getKeyCode = function(ev)
	{
		if(ev)			//Moz
		{
			return ev.keyCode;
		}
		if(window.event)	//IE
		{
			return window.event.keyCode;
		}
	};

	this.getEventSource = function(ev)
	{
		if(ev)			//Moz
		{
			return ev.target;
		}
	
		if(window.event)	//IE
		{
			return window.event.srcElement;
		}
	};

	this.cancelEvent = function(ev)
	{
		if(ev)			//Moz
		{
			ev.preventDefault();
			ev.stopPropagation();
		}
		if(window.event)	//IE
		{
			window.event.returnValue = false;
		}
	};
	
	this.scrollTo = function(obj) {
		var _ch = this.div.clientHeight;
		var _st = this.div.scrollTop;
		var _sh = this.div.scrollHeight;
		var _oh = obj.offsetHeight;
		var _ot = obj.offsetTop;
		var _och = obj.scrollHeight;
		if((_ot+_och) > _ch) {
			this.div.scrollTop = ((_ot+_och) - _ch)+3;
		} else {
			this.div.scrollTop = 0;
		}
		return true;
	};
}

var idCounter = 0;
var temp = 0;


function findPos(obj) { 
	var curleft = curtop = 0;
	if (obj.offsetParent) {
	
		curleft = obj.offsetLeft;
		curtop = obj.offsetTop;
		
		while (obj = obj.offsetParent) {
			curleft += obj.offsetLeft;
			curtop += obj.offsetTop;			
		}
	}

	return [curleft,curtop];
}

addEvent(window,'load', function(e) { new Suggest( $('tg-where'), arrLocations); } );