function TypeAhead(listName ) {
 
 this.typeAheadServiceURL = "http://" + window.location.host + "/merk.php";

 this.listName = listName;
 this.userName = ""; 
 if(arguments.length>1) 
 this.userName = arguments[1];

 this.inputId = null; 
 this.inputElement = null; 

 this.suggestions = new Array(); 
 this.matchingSuggestions = new Array(); 
 this.suggestedText = ""; 
 this.userText = ""; 
 
 this.suggestionDropDown = null; 
 this.maxItemInDropDown = 200; 
 var suggestedIndex = 0; 
 var pressedKeyCount=0;
 
 var self = this; 
 var HTTPReq; 


 var isWaitingForSuggestions = false; 
 var isThereMoreOnServer = false; 

 
 var debugOutput = document.getElementById('debugOutput'); 
 function debug(text) { 
 if(typeof debugOutput != "undefined" && debugOutput) 
 debugOutput.innerHTML = debugOutput.innerHTML+"<br /><hr />"+text; 
 }
 
 

 
 this.init = function() {
 debug("TypeAhead Object Initialization");
 if(window.ActiveXObject)
 HTTPReq = new ActiveXObject("Microsoft.XMLHTTP");
 else
 HTTPReq = new XMLHttpRequest();

 
 self.getSuggestions(); 
 }
 
 
 this.initInput = function() { 

 
 if(arguments.length>0) self.inputId = arguments[0]; 
 if(self.inputId) self.inputElement = document.getElementById(self.inputId);
 if(self.inputElement && !self.inputId) { 
 if(!self.inputElement.id) self.inputElement.id = randomId();
 self.inputId = self.inputElement.id;
 }
 if(!self.inputId) return false; 
 self.userText = self.inputElement.value;

 debug("TypeAhead Field Initialization: "+ self.inputId);

 
 self.suggestionDropDown = document.getElementById("THDropDown-" + self.inputId);
 if(!self.suggestionDropDown) {
 self.suggestionDropDown = document.createElement('DIV');
 self.suggestionDropDown.id = "THDropDown-" + self.inputId;
 self.suggestionDropDown.className = "THHideDropDown";
 self.suggestionDropDown = self.inputElement.parentNode.insertBefore(self.suggestionDropDown, self.inputElement.nextSibling);
 self.suggestionDropDown.style.top = (getTop(self.inputElement) + self.inputElement.offsetHeight + 2).toString() + "px";
 self.suggestionDropDown.style.left = getLeft(self.inputElement).toString() + "px";
 self.suggestionDropDown.style.width = self.inputElement.offsetWidth.toString() + "px";
 } 
 
 
 self.inputElement.onkeyup = function (evt) {
 if(!evt) evt = window.event;
 
 switch(evt.keyCode) {
 case 8: 
 self.userText = self.inputElement.value; 
 self.updateSuggestionList();
 self.showSuggestionList(); 
 break;
 case 46: 
 self.userText = self.inputElement.value;
 self.updateSuggestionList();
 self.showSuggestionList(); 
 break; 
 case 40: 
 if(suggestedIndex==0) {
 self.updateSuggestionList();
 self.showSuggestionList(); 
 }
 if(suggestedIndex < self.matchingSuggestions.length) suggestedIndex++; 
 self.suggest();
 break;
 case 38: 
 if(suggestedIndex > 1) suggestedIndex --;
 self.suggest();
 break;
 default:
 pressedKeyCount--;
 if (self.userText != self.inputElement.value) {
 suggestedIndex = 0;
 self.suggest(self.inputElement.value.toLowerCase()); 
 }



 }
 }
 self.inputElement.onkeydown = function (evt) {
 if(!evt) evt = window.event;
 if(evt.keyCode != 38 && evt.keyCode != 40 && evt.keyCode != 46 && evt.keyCode != 8)
 pressedKeyCount++;



 }

 self.inputElement.onfocus = function(evt) {
 self.updateSuggestionList();

 }
 
 self.inputElement.onblur = function(evt) {
 window.setTimeout(function() {
 self.suggestionDropDown.className = self.suggestionDropDown.className.replace("THShowDropDown","THHideDropDown");
 },500);
 }
 }

 
 this.getSuggestions = function(text) {
 if(text) self.userText = text;
 HTTPReq.abort();
 HTTPReq.onreadystatechange = self.populateSuggestionsFromService; 
 HTTPReq.open("GET", self.typeAheadServiceURL + "?inputid="+encodeURIComponent(self.listName)+"&inputtxt="+encodeURIComponent(self.userText)+"&user="+encodeURIComponent(self.userName), true);
 HTTPReq.send(null);
 debug("request sent: "+"inputid="+encodeURIComponent(self.listName)+"&inputtxt="+encodeURIComponent(self.userText));
 }
 this.populateSuggestionsFromService = function(evt) {
 if (HTTPReq.readyState == 4) { 
 self.suggestions = HTTPReq.responseText.split("&");
 debug("response: "+ HTTPReq.responseText); 

 if(self.suggestions.length >= 10) isThereMoreOnServer = true;

 if(isWaitingForSuggestions) {
 isWaitingForSuggestions = false;
 self.showSuggestionList();
 }
 }
 }

 

 
 this.suggest = function(text) {

 if(text) self.userText = text;
 
 self.suggestedText = "";
 if(suggestedIndex==0 && pressedKeyCount==0) { 
 self.updateSuggestionList();

 if(self.matchingSuggestions.length>0) {
 self.suggestedText = self.matchingSuggestions[0];
 var startIndex = self.inputElement.value.length; 
 self.inputElement.value = self.suggestedText; 
 self.selectText(startIndex, self.suggestedText.length);
 }
 }
 if(suggestedIndex>0) {
 
 if(self.matchingSuggestions.length>0) {
 self.suggestedText = self.matchingSuggestions[suggestedIndex-1]; 
 var startIndex = self.inputElement.value.length; 
 self.inputElement.value = self.suggestedText; 
 self.selectText(startIndex, self.suggestedText.length);
 }
 }
 if(self.suggestedText=="" && isThereMoreOnServer) {
 
 debug("loading more suggestions...");
 isWaitingForSuggestions = true;
 self.getSuggestions(); 
 } else 
 isWaitingForSuggestions = false; 

 self.showSuggestionList();
 }
 
 this.updateSuggestionList = function() {
 suggestedIndex = 0;
 var newSuggestionArray = new Array();
 maxIdx = self.suggestions.length>self.maxItemInDropDown?self.maxItemInDropDown:self.suggestions.length;
 for (var i=0; i < maxIdx; i++) { 
 if (self.suggestions[i].toLowerCase().indexOf(self.userText.toLowerCase()) == 0) {
 newSuggestionArray[newSuggestionArray.length] = self.suggestions[i];
 } 
 } 
 self.matchingSuggestions = newSuggestionArray;
 }
 
 this.showSuggestionList = function() {
 var htmlList="";
 for (var i=0; i < self.matchingSuggestions.length; i++) { 
 if (self.matchingSuggestions[i].toLowerCase().indexOf(self.userText.toLowerCase()) == 0) {
 if(suggestedIndex-1 == i) 
 htmlList += "<li class='THLIHover' onclick='document.getElementById(\""+ self.inputId + "\").value=unescape(\""+ escape(self.matchingSuggestions[i]) +"\")' onmouseover='this.className+=\" THLIHover\"' onmouseout='this.className=this.className.replace(\"THLIHover\",\"\")' >"+self.matchingSuggestions[i]+"</li>";
 else
 htmlList += "<li onclick='document.getElementById(\""+ self.inputId + "\").value=unescape(\""+ escape(self.matchingSuggestions[i]) +"\")' onmouseover='this.className+=\" THLIHover\"' onmouseout='this.className=this.className.replace(\"THLIHover\",\"\")' >"+self.matchingSuggestions[i]+"</li>";
 } 
 } 
 if(htmlList=="") 
 if(isWaitingForSuggestions)
 self.suggestionDropDown.innerHTML = "loading more suggestions...";
 else
 self.suggestionDropDown.innerHTML = "no suggestion available";
 else
 self.suggestionDropDown.innerHTML = "<ul>"+htmlList+"</ul>";
 self.suggestionDropDown.className = self.suggestionDropDown.className.replace("THHideDropDown","THShowDropDown");
 }


 
 this.selectText = function(startIndex, nbChars) {
 if (self.inputElement.createTextRange) { 
 var txtRange = self.inputElement.createTextRange(); 
 txtRange.moveStart("character", startIndex); 
 txtRange.moveEnd("character", nbChars - self.inputElement.value.length); 
 txtRange.select(); 
 }
 else if (self.inputElement.setSelectionRange) { 
 self.inputElement.setSelectionRange(startIndex, nbChars);
 } 
 
 self.inputElement.focus(); 
 }

 function getTop(obj) {
 var cur = 0;
 if(obj.offsetParent) { 
 while(obj.offsetParent) {
 cur+=obj.offsetTop;
 obj = obj.offsetParent;
 }
 }
 return cur;
 }
 function getLeft(obj) {
 var cur = 0;
 if(obj.offsetParent) { 
 while(obj.offsetParent) {
 cur+=obj.offsetLeft;
 obj = obj.offsetParent;
 }
 }
 return cur;
 }
 function randomId() {
 var rId = "";
 for (var i=0; i<6;i++)
 rId += String.fromCharCode(97 + Math.floor((Math.random()*24)))
 return rId;
 }

 
 this.init();
}


var XBrowserAddHandler = function (target,eventName,handlerName) {
 if(!target) return;
 if (target.addEventListener) { 
 target.addEventListener(eventName, function(e){eval(handlerName)(e);}, false);
 } else if (target.attachEvent) { 
 target.attachEvent("on" + eventName, function(e){eval(handlerName)(e);});
 } else { 
 
 var originalHandler = target["on" + eventName]; 
 if (originalHandler) { 
 target["on" + eventName] = function(e){originalHandler(e);eval(handlerName)(e);}; 
 } else { 
 target["on" + eventName] = eval(handlerName); 
 } 
 } 
}