/**********************************************************/
function AutoSuggest(elem, suggestions)
{
	//The 'me' variable allow you to access the AutoSuggest object
	//from the elem's event handlers defined below.
	var me = this;

	//A reference to the element we're binding the list to.
	this.elem = elem;

	this.suggestions = suggestions;

	//Arrow to store a subset of eligible suggestions that match the user's input
	this.eligible = new Array();

	//The text input by the user.
	this.inputText = null;

	//A pointer to the index of the highlighted eligible item. -1 means nothing highlighted.
	this.highlighted = -1;

	//A div to use to create the dropdown.
	this.div = document.getElementById("autosuggest");


	//Do you want to remember what keycode means what? Me neither.
	var TAB = 9;
	var ESC = 27;
	var ENTER = 13;
	var KEYUP = 38;
	var KEYDN = 40;
	

	//The browsers' own autocomplete feature can be problematic, since it will 
	//be making suggestions from the users' past input.
	//Setting this attribute should turn it off.
	elem.setAttribute("autocomplete","off");

	//We need to be able to reference the elem by id. If it doesn't have an id, set one.
	if(!elem.id)
	{
		var id = "autosuggest" + idCounter;
		idCounter++;

		elem.id = id;
	}


	/********************************************************
	onkeydown event handler for the input elem.
	Tab key = use the highlighted suggestion, if there is one.
	Esc key = get rid of the autosuggest dropdown
	Up/down arrows = Move the highlight up and down in the suggestions.
	********************************************************/
	elem.onkeydown = function(ev) {
	  var key = me.getKeyCode(ev);

	  switch (key) {
	    case TAB:
	      me.useSuggestion();
	      break;

	    case ESC:
	      me.hideDiv();
	      break;

	    case ENTER:
	      me.useSuggestion();
	      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;
	  }
	};

	/********************************************************
	onkeyup handler for the elem
	If the text is of sufficient length, and has been changed, 
	then display a list of eligible suggestions.
	********************************************************/
	elem.onkeyup = function(ev) {
	  var key = me.getKeyCode(ev);
	  switch (key) {
	    //The control keys were already handled by onkeydown, so do nothing.   
	    case TAB:
	    case ESC:
	    case KEYUP:
	    case KEYDN:
	    case ENTER:
	      return;
	    default:

	      if (this.value != me.inputText && this.value.length > 0) {
	        me.inputText = this.value;
	        me.getEligible();
          me.createDiv();
          me.positionDiv();
          me.showDiv();
	      }
	      else {
	        me.hideDiv();
	      }
	  }
	};


	/********************************************************
	Insert the highlighted suggestion into the input box, and 
	remove the suggestion dropdown.
	********************************************************/
	this.useSuggestion = function()
	{
		if (this.highlighted > -1)
		{
			this.elem.value = this.eligible[this.highlighted];
			this.hideDiv();
			//It's impossible to cancel the Tab key's default behavior. 
			//So this undoes it by moving the focus back to our field right after
			//the event completes.
			setTimeout("document.getElementById('" + this.elem.id + "').focus()",0);
		}
	};

	/********************************************************
	Display the dropdown. Pretty straightforward.
	********************************************************/
	this.showDiv = function()
	{
	  if(this.eligible.length > 0)
		this.div.style.display = 'block';
	};

	/********************************************************
	Hide the dropdown and clear any highlight.
	********************************************************/
	this.hideDiv = function()
	{
		this.div.style.display = 'none';
		this.highlighted = -1;
	};

	/********************************************************
	Modify the HTML in the dropdown to move the highlight.
	********************************************************/
	this.changeHighlight = function() {
	  var lis = this.div.getElementsByTagName('LI');
	  for (i in lis) {
	    var li = lis[i];
	    if (li.className != "firsthit") {
	      if (this.highlighted == i) {
	        li.className = "selected";
	      }
	      else {
	        if (li && li.className) {
	          li.className = "";
	        }
	      }
	    }
	  }
	};

	/********************************************************
	Position the dropdown div below the input text field.
	********************************************************/
	this.positionDiv = function()
	{
		var el = this.elem;
		var x = 0;
		var y = el.offsetHeight;
	
		//Walk up the DOM and add up all of the offset positions.
		while (el.offsetParent && el.tagName.toUpperCase() != 'BODY')
		{
			x += el.offsetLeft;
			y += el.offsetTop;
			el = el.offsetParent;
		}

		x += el.offsetLeft;
		y += el.offsetTop;

		this.div.style.left = x + 'px';
		this.div.style.top = y + 'px';
	};

	/********************************************************
	Build the HTML for the dropdown div
	********************************************************/
	this.createDiv = function() {
	  var ul = document.createElement('ul');
	  var v = this.elem.value;
	  //Create an array of LI's for the words.
	  var word, li, a;
	  for (i in this.eligible) {
	    word = this.eligible[i];
	    li = document.createElement('li');
	    a = document.createElement('a');
	    a.href = "javascript:false";
	    a.innerHTML = '<strong>' + word.substring(0, v.length) + '</strong>' + word.substring(v.length);
	    li.appendChild(a);

	    if (i == 0) {
	      li.className = 'firsthit';
	      me.highlighted = i;
	    }
	    else if (me.highlighted == i) {
	      li.className = "selected";
	    }

	    ul.appendChild(li);
	  }


	  this.div.replaceChild(ul, this.div.childNodes[0]);


	  /********************************************************
	  mouseover handler for the dropdown ul
	  move the highlighted suggestion with the mouse
	  ********************************************************/
	  ul.onmouseover = function(ev) {
	    //Walk up from target until you find the LI.
	    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();
	  };

	  /********************************************************
	  click handler for the dropdown ul
	  insert the clicked suggestion into the input
	  ********************************************************/
	  ul.onclick = function(ev) {
	    me.useSuggestion();
	    me.hideDiv();
	    me.cancelEvent(ev);
	    return false;
	  };

	  this.div.className = "suggestion_list";
	  this.div.style.position = 'absolute';

	};

	/********************************************************
	determine which of the suggestions matches the input
	********************************************************/
	this.getEligible = function()
	{
		this.eligible = new Array();
		for (i in this.suggestions) 
		{
			var suggestion = this.suggestions[i];
			
			if(suggestion.toLowerCase().indexOf(this.inputText.toLowerCase()) == "0")
			{
				this.eligible[this.eligible.length]=suggestion;
			}
		}
	};

	/********************************************************
	Helper function to determine the keycode pressed in a 
	browser-independent manner.
	********************************************************/
	this.getKeyCode = function(ev)
	{
		if(ev)			//Moz
		{
			return ev.keyCode;
		}
		if(window.event)	//IE
		{
			return window.event.keyCode;
		}
	};

	/********************************************************
	Helper function to determine the event source element in a 
	browser-independent manner.
	********************************************************/
	this.getEventSource = function(ev)
	{
		if(ev)			//Moz
		{
			return ev.target;
		}
	
		if(window.event)	//IE
		{
			return window.event.srcElement;
		}
	};

	/********************************************************
	Helper function to cancel an event in a 
	browser-independent manner.
	(Returning false helps too).
	********************************************************/
	this.cancelEvent = function(ev)
	{
		if(ev)			//Moz
		{
			ev.preventDefault();
			ev.stopPropagation();
		}
		if(window.event)	//IE
		{
			window.event.returnValue = false;
		}
	}
}

//counter to help create unique ID's
var idCounter = 0;