/*******************************************************

AutoSuggest - a javascript automatic text input completion component
Copyright (C) 2005 Joe Kepley, The Sling & Rock Design Group, Inc.

This library is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License as published by the Free Software Foundation; either
version 2.1 of the License, or (at your option) any later version.

This library is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
Lesser General Public License for more details.

You should have received a copy of the GNU Lesser General Public
License along with this library; if not, write to the Free Software
Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA

*******************************************************

Please send any useful modifications or improvements via 
email to joekepley at yahoo (dot) com

*******************************************************/

/*v*v*v*v*v*v*v*v*v*v*v*v*v*v*v*v*v*v*v*v*v*v*v*v*v*v*v*
   This code has been modified such that instead of
   using a static list of possible values that have
   been hardcoded to the page, I will try to have
   each keystroke invoke a connection via the
   XMLHTTPRequest object to a server-side data query
   using AJAX-like interfaces.  Should this work, this
   will enable the AutoSuggest code to query much
   bigger dataset without incurring the cost of
   downloading every entry.

            Doug Kelly
            Medical Student, UofL School of Medicine
            doug (dot) kelly at louisville (dot) edu
*v*v*v*v*v*v*v*v*v*v*v*v*v*v*v*v*v*v*v*v*v*v*v*v*v*v*v*/

/********************************************************
 The AutoSuggest class binds to a text input field
 and creates an automatic suggestion dropdown in the style
 of the "IntelliSense" and "AutoComplete" features of some
 desktop apps. 
 Parameters: 
 elem: A DOM element for an INPUT TYPE="text" form field
 suggestions: an array of strings to be used as suggestions
              when someone's typing.

 Example usage: 
 
 Please enter the name of a fruit.
 <input type="text" id="fruit" name="fruit" />
 <script language="Javascript">
 var fruits=new Array("apple","orange","grape","kiwi","cumquat","banana");
 new AutoSuggest(document.getElementById("fruit",fruits));
 </script>

 Requirements: 

 Unfortunately the AutoSuggest class doesn't seem to work 
 well with dynamically-created DIVs. So, somewhere in your 
 HTML, you'll need to add this: 
 <div id="autosuggest"><ul></ul></div>

 Here's a default set of style rules that you'll also want to 
 add to your CSS: 

 .suggestion_list
 {
 background: white;
 border: 1px solid;
 padding: 4px;
 }

 .suggestion_list ul
 {
 padding: 0;
 margin: 0;
 list-style-type: none;
 }

 .suggestion_list a
 {
 text-decoration: none;
 color: navy;
 }

 .suggestion_list .selected
 {
 background: navy;
 color: white;
 }

 .suggestion_list .selected a
 {
 color: white;
 }

 #autosuggest
 {
 display: none;
 }
*********************************************************/

function ajax()
{
   //---------------------
   // Private Declarations
   //---------------------
   var _request = null;
   var _this = null;
        
   //--------------------
   // Public Declarations
   //--------------------
   this.GetResponseXML = function()
   {
      return (_request) ? _request.responseXML : null;
   }
        
   this.GetResponseText = function()
   {
      return (_request) ? _request.responseText : null;
   }
        
   this.GetRequestObject = function()
   {
      return _request;
   }
        
   this.InitializeRequest = function(Method, Uri)
   {
      _InitializeRequest();
      _this = this;
                
      switch (arguments.length)
      {
         case 2:
            _request.open(Method, Uri);
            break;
                                
         case 3:
            _request.open(Method, Uri, arguments[2]);
            break;
      }
                
      if (arguments.length >= 4) _request.open(Method, Uri, arguments[2], arguments[3]);
      this.SetRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
   }
        
   this.SetRequestHeader = function(Field, Value)
   {
      if (_request) _request.setRequestHeader(Field, Value);
   }
        
   this.Commit = function(Data)
   {
      if (_request) _request.send(Data);
   }
        
   this.Close = function()
   {
      if (_request) _request.abort();
   }
        
   //---------------------------
   // Public Event Declarations.
   //---------------------------
   this.OnUninitialize = function() { };
   this.OnLoading = function() { };
   this.OnLoaded = function() { };
   this.OnInteractive = function() { };
   this.OnSuccess = function() { };
   this.OnFailure = function() { };
        
   //---------------------------
   // Private Event Declarations
   //---------------------------
   function _OnUninitialize() { _this.OnUninitialize(); };
   function _OnLoading() { _this.OnLoading(); };
   function _OnLoaded() { _this.OnLoaded(); };
   function _OnInteractive() { _this.OnInteractive(); };
   function _OnSuccess() { _this.OnSuccess(); };
   function _OnFailure() { _this.OnFailure(); };

   //------------------
   // Private Functions
   //------------------
   function _InitializeRequest()
   {
      _request = _GetRequest();
      _request.onreadystatechange = _StateHandler;
   }
        
   function _StateHandler()
   {
      switch (_request.readyState)
      {
         case 0:
            window.setTimeout("void(0)", 100);
            _OnUninitialize();
            break;
                                
         case 1:
            window.setTimeout("void(0)", 100);
            _OnLoading();
            break;
                                
         case 2:
            window.setTimeout("void(0)", 100);
            _OnLoaded();
            break;
                        
         case 3:
            window.setTimeout("void(0)", 100);
            _OnInteractive();
            break;
                                
         case 4:
            if (_request.status == 200)
			{
               _OnSuccess();
			}
            else
               _OnFailure();
                                        
            return;
            break;
      }
   }
        
   function _GetRequest()
   {
      var obj;
                
      try
      {
         obj = new XMLHttpRequest();
      }
      catch (error)
      {
         try
         {
            obj = new ActiveXObject("Microsoft.XMLHTTP");
         }
         catch (error)
         {
            return null;
         }
      }
                
      return obj;
   }
}

function AutoSuggest(elem)
{

	//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;

	//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");
	
	//URI Reference For AJAX Object (Leave Open Ended For Appending Search String
	this.URI = '/';

	//Allow Additional OnKeyUp Command(s) Such As Input Filtering and Validation
	//This Additional Code Will Run Before The AutoSuggest Code, Allowing Validation
	//  failures to cancel the AJAX Suggest request.
	this.OnKeyUp = '';

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

	//Create an instance of the AJAX Communications Object
	ajaxObject = function()
	{
		this.OnSuccess = function()
		{
			me.readEligible(this.GetResponseXML());
		}

		this.GetData = function(strSearch)
		{
			this.InitializeRequest('GET', me.URI + strSearch, true);
			this.Commit(null);
		}
	}
	ajaxObject.prototype = new ajax();

	var objAjax = new ajaxObject();

	//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 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:
			return;
		default:
			if(me.OnKeyUp != '') eval(me.OnKeyUp);

			if (this.value != me.inputText && this.value.length > 0)
			{
				me.inputText = this.value;
				me.getEligible(this.value);
			}
			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);
		} else {
			this.hideDiv();
		}
	};

	/********************************************************
	Display the dropdown. Pretty straightforward.
	********************************************************/
	this.showDiv = function()
	{
		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 (this.highlighted == i)
			{
				li.className = "selected";
			}
			else
			{
				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');
	
		//Create an array of LI's for the words.
		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]);
	

		/********************************************************
		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';

	};

	/********************************************************
	Respond to keyed entry by querying the server for relevent data
	********************************************************/
	this.getEligible = function(strSearch)
	{
		this.eligible = new Array();

		objAjax.GetData(strSearch);
	};
	
	/********************************************************
	Check the server's response for relevent data, display DIV
	********************************************************/
	this.readEligible = function(objXML)
	{
		var lngCount = 0;

		if(objXML)
		{
			xnlOuts = objXML.getElementsByTagName("out");

			for(i=0; i < xnlOuts.length; i++)
			{
				this.eligible[this.eligible.length] = xnlOuts.item(i).firstChild.nodeValue;
				lngCount++;
			}

			if(lngCount == 0) this.eligible[this.eligible.length] = '<i>No Suggestions</i>';

			me.createDiv();
			me.positionDiv();
			me.showDiv();
		}
	}

	/********************************************************
	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;