function AutoCompleteTextBox(textBoxId,searchButtonId,alternativesId,seperator){
    
    this.textBox = document.getElementById(textBoxId);
    this.textBox.autoCompleteTextBoxObject = this;
    this.textBox.setAttribute("autocomplete","off"); 
    this.searchButton = document.getElementById(searchButtonId);
    this.searchButton.blur();
    
    var alternativesInput = document.getElementById(alternativesId);
    this.alternatives = alternativesInput.value.split(seperator);
	
    this.suggestions = new Array();
    
    AutoCompleteTextBox.prototype.noSuggestions = noSuggestions;
    AutoCompleteTextBox.prototype.showSuggestions = showSuggestions;
    AutoCompleteTextBox.prototype.setSuggestionText = setSuggestionText;
    AutoCompleteTextBox.prototype.setSuggestionTextAndSubmit = setSuggestionTextAndSubmit;
    AutoCompleteTextBox.prototype.getSuggestions = getSuggestions;
    AutoCompleteTextBox.prototype.enableSearch = enableSearch;
    AutoCompleteTextBox.prototype.disableSearch = disableSearch;
    AutoCompleteTextBox.prototype.showMessage = showMessage;
    AutoCompleteTextBox.prototype.hideMessage = hideMessage;
    AutoCompleteTextBox.prototype.activatePreviousSuggestion = activatePreviousSuggestion;
    AutoCompleteTextBox.prototype.activateNextSuggestion = activateNextSuggestion;
    AutoCompleteTextBox.prototype.selectActivatedSuggestion = selectActivatedSuggestion;
    AutoCompleteTextBox.prototype.getActiveSuggestion = getActiveSuggestion;
    
    this.textBox.onkeyup=keyup;
    this.textBox.onkeypress = keypress;
    this.textBox.onblur=focusLost;
    this.disableSearch();
    //this.textBox.onchange=showSuggestions;
    
    function enableSearch(){
		this.searchButton.disabled = false;
    }
    function disableSearch(){
		this.searchButton.disabled = true;
    }
    function noSuggestions(){
		/*If nothing is visible when no suggestion are available*/
        //this.suggestionBox.style.visibility = "hidden";
        
        /*If 'no suggestions' text is shown when no suggestion are available*/
        this.showMessage("No suggestions");
    }
    function showMessage(message){
		var messageTextElement = document.createElement("span");
        messageTextElement.setAttribute("className","dropDownMessageText");//Internet Explorer
        messageTextElement.setAttribute("class","dropDownMessageText");//Firefox
        messageTextElement.innerHTML = message;
        try{
			this.suggestionBox.removeChild(this.suggestionBox.firstChild);
        }catch(ex){
			//Nothing to remove. No action
        }
        
        this.suggestionBox.appendChild(messageTextElement);
        this.suggestionBox.style.visibility = "visible";
    }
    function hideMessage(){
		var autoCompObject;
		if(this.autoCompleteTextBoxObject){//An event
			autoCompObject = this.autoCompleteTextBoxObject;
		}
		else{
			autoCompObject = this;
		}
		autoCompObject.suggestionBox.style.visibility = "hidden";
    }
    function focusLost(){
		var autoCompObject = this.autoCompleteTextBoxObject;
		if(!autoCompObject.suggestionBox.mouseOverSuggestionBox){
			autoCompObject.hideMessage();
		}
    }
    function mouseOverSuggestions(){
		this.mouseOverSuggestionBox = true;
    }
    function mouseOutSuggestions(){
		this.mouseOverSuggestionBox = false;
    }
    function showSuggestions(results){
        if(results.length > 0){//If no alternatives, do nothing
            
            var ulElement = document.createElement("ul");
            ulElement.setAttribute("id","suggestionBoxList_" + this.textBox.id);
            for(var i = 0; i < results.length; i++){
                var listItemElement = document.createElement("li");
                var listItemLinkElement = document.createElement("a");
                listItemLinkElement.setAttribute("href","#");
                listItemLinkElement.onclick = setSuggestionText;
                listItemLinkElement.onmouseup = setSuggestionTextAndSubmit;
                
                listItemLinkElement.autoCompleteTextBoxObject = this;
                listItemLinkElement.innerHTML = results[i][1];//Formatted result
                listItemLinkElement.ResultText = results[i][0];//Unformatted result
                listItemLinkElement.autoCompleteTextBoxObject = this;//To retreive reference on events
                listItemElement.appendChild(listItemLinkElement);
                ulElement.appendChild(listItemElement);
            }
            try{
                this.suggestionBox.removeChild(this.suggestionBox.firstChild);
            }catch(ex){
                //Element did not exist. Do nothing
            }
            this.suggestions = ulElement.childNodes;
            this.suggestionBox.onmouseover = mouseOverSuggestions;
            this.suggestionBox.onmouseout = mouseOutSuggestions;
            this.suggestionBox.appendChild(ulElement);
            this.suggestionBox.style.visibility = "visible";
            //var position = findPos(this.textBox);
            //this.suggestionBox.style.top = "" + (position[1] + this.textBox.offsetHeight) + "px";//(Number(this.textBox.offsetTop) + 30) + "px" ;
            //this.suggestionBox.style.left = "" + position[0] + "px"; //this.textBox.offsetLeft + "px";// autoCompObject.style.left;
			
        }else{
			
			if(this.textBox.value == ""){
				this.hideMessage();
			}else{
				this.noSuggestions();
            }
        }
     	var position = findPos(this.textBox);
        this.suggestionBox.style.top = "" + (position[1] + this.textBox.offsetHeight) + "px";//(Number(this.textBox.offsetTop) + 30) + "px" ;
        this.suggestionBox.style.left = "" + position[0] + "px"; //this.textBox.offsetLeft + "px";// autoCompObject.style.left;

    }
    function getSuggestions(text){
        var results = new Array();
        if(text != ""){
			this.disableSearch();//Search will be enabled if search text matches 100% or an alternative is selected
			for(var i = 0; i < this.alternatives.length; i++){
				//alert(this.alternatives[i]);
				if(this.alternatives[i].substring(0,text.length).toLowerCase() == text.toLowerCase()){
					if(this.alternatives[i].toLowerCase() == text.toLowerCase())this.enableSearch();//100% match
					var formattedResult = "<span class='matchingText'>" +
						this.alternatives[i].substring(0,text.length) +
						"</span>" + this.alternatives[i].substring(text.length,this.alternatives[i].length);
					results[results.length] = new Array(this.alternatives[i],formattedResult);
					//results[results.length][0] = this.alternatives[i];
					//results[results.length][1] = formattedResult;
				}
			}
        }
        return results;
    }
    function setSuggestionText(){
        this.autoCompleteTextBoxObject.textBox.value = this.ResultText;
        this.autoCompleteTextBoxObject.hideMessage();
        this.autoCompleteTextBoxObject.enableSearch();
    }
    function setSuggestionTextAndSubmit(){
		this.autoCompleteTextBoxObject.textBox.value = this.ResultText;
        this.autoCompleteTextBoxObject.hideMessage();
        this.autoCompleteTextBoxObject.enableSearch();
        setTimeout("document.getElementById('" + this.autoCompleteTextBoxObject.searchButton.id + "').click()",500);
		//this.autoCompleteTextBoxObject.searchButton.click();
		
    }
    function getActiveSuggestion()
    {
		for(var i = 0; i < this.suggestions.length; i++)
		{
			if(this.suggestions[i].className == "activeItem")
			{
				return this.suggestions[i];
			}
		}
    }
    function activateNextSuggestion()
    {
		var activeItem = null;//getActiveItem();
		for(var i = 0; i < this.suggestions.length; i++)
		{
			if(this.suggestions[i].className == "activeItem")
			{
				if((i + 1) < this.suggestions.length)//Has next
				{
					this.suggestions[i].className = null;
					this.suggestions[i+1].className = "activeItem";
					activeItem = this.suggestions[i+1];
				}else{
					this.suggestions[i].className = null;
				}
				break;
			}
		}
		if(activeItem == null && this.suggestions.length > 0){//No one is yet seleced, select the first
			this.suggestions[0].className = "activeItem";
		}
    }
    function activatePreviousSuggestion()
    {
		var activeItem = null;
		for(var i = 0; i < this.suggestions.length; i++)
		{
			if(this.suggestions[i].className == "activeItem")
			{
				
				if(i > 0)//Has previous
				{
					this.suggestions[i].className = null;
					this.suggestions[i-1].className = "activeItem";
					activeItem = this.suggestions[i-1];
				}else
				{
					this.suggestions[i].className = null;
				}
			}
		}
		if(activeItem == null && this.suggestions.length > 0){//No one is yet seleced, select the first
			this.suggestions[this.suggestions.length-1].className = "activeItem";
		}
    }
    function selectActivatedSuggestion()
    {
		var activeItem  = this.getActiveSuggestion();
		var linkElements = activeItem.getElementsByTagName("a");
		linkElements[0].onclick();
    }
    
}
function keyup(e){
	//Key codes: up:38,down:40,enter:13
	//Find current active item

	if(e == null){
		e = event;//For Internet Explorer
	}
	var autoCompObject = this.autoCompleteTextBoxObject;
	if(e.keyCode == 38)//Up
	{
		autoCompObject.activatePreviousSuggestion();
	}
	else if(e.keyCode == 40)//Down
	{
		autoCompObject.activateNextSuggestion();
	}
	else if(e.keyCode == 13)
	{
		
		if(!autoCompObject.searchButton.disabled && autoCompObject.suggestionBox.style.visibility != "visible"){
			autoCompObject.searchButton.click();
		}
		autoCompObject.selectActivatedSuggestion();
	}
	else
	{
		var autoCompObject = this.autoCompleteTextBoxObject;
		if(autoCompObject.suggestionBox == null){
			autoCompObject.suggestionBox = createSuggestionBox(autoCompObject.id);
			autoCompObject.autoCompleteTextBoxObject = autoCompObject;//Reference to parent
		}
		var results = autoCompObject.getSuggestions(this.value);//The text inputted
		autoCompObject.showSuggestions(results);
	}
}
function keypress(e){
	if(e == null){
		e = event;//For Internet Explorer
	}
	if(e.keyCode == 13)
	{
		return false;
	}
}
function textEntered(){
    var autoCompObject = this.autoCompleteTextBoxObject;
    if(autoCompObject.suggestionBox == null){
		autoCompObject.suggestionBox = createSuggestionBox(autoCompObject.id);
		autoCompObject.autoCompleteTextBoxObject = autoCompObject;//Reference to parent
	}
    var results = autoCompObject.getSuggestions(this.value);//The text inputted
    autoCompObject.showSuggestions(results);
}
function createSuggestionBox(parentId){
        var suggestionBoxDiv = document.createElement("div");
        suggestionBoxDiv.setAttribute("id","suggestionBox_" + parentId);
        suggestionBoxDiv.setAttribute("className","AutoCompleteTextBox");//Internet explorer
        suggestionBoxDiv.setAttribute("class","AutoCompleteTextBox");//Firefox
        suggestionBoxDiv.setAttribute("style","visibility:hidden;");
        suggestionBoxDiv.style.visibility = "hidden";//Internet explorer
        document.body.appendChild(suggestionBoxDiv);
        return suggestionBoxDiv;
    }
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];
}
