//================================================================
//
// Product:     Type-Ahead Select Box Control
// Author:      Justin Greenwood 
// Version:     1.0
// Browsers:    Internet Explorer 5+
//
// Revision History:
//     2001/01/21 - Version 1.0 Released
//
// Support:
//     http://support.punktech.com/
//     support@punktech.com
//
//================================================================
//
// Object: 
//     typeAheadSelectBox - The Type-Ahead Select Box Control Object. 
//
// Constructor Parameters: 
//     strID - The ID & Name that identifies the control for validation and HTTP submission
//     strClass - the name of a CSS class to apply to the control.
//     strWidth - width in pixels or percentage. Examples: "90%", "250px"
//     intRows - 1 for ComboBox Mode, 3 or more for ListBox Mode
//     boolSorted - True will sort the list of options, false will not.
//     strAlign - The alignment of the TABLE containing the control.  (The control is embedded in a TABLE.)
//
// Methods:
//     addOption(strValue, strText, boolIsSelected) - Add's an option to the option list.
//     render() - Render the control.
//     rendersubmit() - Render the control and submit when onchange fired.
//
// Example 1:
//     var objTypeAhead = new typeAheadSelectBox("locationId", "cssGreenControls", "300px", 1, true, "left");
//     objTypeAhead.addOption(1, "Indianapolis, IN");
//     objTypeAhead.addOption(2, "Memphis, TN");
//     objTypeAhead.render();
//
// Example 2:
//     var objTypeAhead = new typeAheadSelectBox("locationId", null, "90%", 4, true);
//     objTypeAhead.addOption(1, "Indianapolis, IN");
//     objTypeAhead.addOption(2, "Memphis, TN");
//     objTypeAhead.render();
//
//================================================================
function keyWasTab(){
	var key_code = window.event.keyCode;
	if (key_code == 9){
		return true;
        } else {
		return false;
	}
}
function typeAheadSelectBox(strID , strClass , strWidth , intRows , boolSorted , strAlign){
	this.c_id = strID;
	this.c_class = strClass;
	this.c_width = strWidth;
	this.c_rows = intRows;
	this.c_align = strAlign;
	this.c_sorted = boolSorted;
	this.c_options = new Array();
	this.addOption = typeAheadSelectBox_AddOption;
	this.render = typeAheadSelectBox_Render;
	this.rendersubmit = typeAheadSelectBox_RenderSubmit;
}
function typeAheadSelectBox_AddOption(strValue, strText, boolSelected){
	if(null == boolSelected)boolSelected = false;
	this.c_options[this.c_options.length] = "<option value=\"" + strValue + "\"" +(boolSelected ? " selected" : "")+ ">" + strText + "</option>";
}
function typeAheadSelectBox_Render()
{
	var isPercentage = false;
	if(this.c_width == null)this.c_width = "150px";
	else if(this.c_width.length == 0x0)this.c_width = "150px";
	isPercentage =(this.c_width.charAt(this.c_width.length - 0x01)== '%');
	if(isPercentage){
		document.write("<table" +(this.c_align == null ? "" :(" align=" + this.c_align)) + " cellspacing=0 cellpadding=0 border=0 width=\"" + this.c_width + "\" id=\"" + this.c_id + "__container\"><tr><td>");
		document.write("<input id=\"" + this.c_id + "__input\" type=text value=\"\" style=\"display:none;width:100%;\" ");
		document.write("class=\"" + this.c_class + "\" title=\"\" onclick=\"focusOnSelect('" + this.c_id + "');\" ");
		document.write("onblur=\"focusOnSelect('" + this.c_id + "')\" onkeyup=\"searchListBox('" + this.c_id + "');\">");
		document.write("<select name=\"" + this.c_id + "\" id=\"" + this.c_id + "\" class=\"" + this.c_class + "\" title=\"\" size=\"" + this.c_rows + "\" style=\"display:block;width:100%;\" onkeyup=\"showTextBox('" + this.c_id + "');\" onkeypress=\"return keyWasTab();\">");
		for(var i = 0x0; i < this.c_options.length; i++){
			document.write(this.c_options[i]);
		}
		document.write("</select>");
		document.write("</td></tr></table>");
	}else {
		document.write("<span" + (this.c_align == null ? "" :  (" align=" + this.c_align)) + " id=\"" + this.c_id + "__container\">");
		document.write("<input id=\"" + this.c_id + "__input\" type=text value=\"\" style=\"display:none;width:" + this.c_width + ";\" ");
		document.write("class=\"" + this.c_class + "\" title=\"\" onclick=\"focusOnSelect('" + this.c_id + "');\" ");
		document.write("onblur=\"focusOnSelect('" + this.c_id + "')\" onkeyup=\"searchListBox('" + this.c_id + "');\">");
		document.write("<select name=\"" + this.c_id + "\" id=\"" + this.c_id + "\" class=\"" + this.c_class + "\" title=\"\" size=\"" + this.c_rows + "\" style=\"display:block;width:" + this.c_width + ";\" onkeyup=\"showTextBox('" + this.c_id + "');\" onkeypress=\"return keyWasTab();\">");
		for(var i = 0x0; i < this.c_options.length; i++){
			document.write(this.c_options[i]);
		}
		document.write("</select>");
		document.write("</span>");
	}
	if(this.c_sorted){
	var objSelect = document.getElementById(this.c_id);
	var intCount = objSelect.options.length;
	var intLeast;
	var strTmpText, strTmpValue, boolTmpSelected;
		
	for (var i = 0x0; i < intCount - 0x01; i++)
	{
		intLeast = i;
			
		for (var j = i + 0x01; j < intCount; j++)
		
			if (objSelect.options[intLeast].text > objSelect.options[j].text)
				intLeast = j;

				
		if (intLeast != i) {
			
			strTmpText = objSelect.options[intLeast].text;
			strTmpValue = objSelect.options[intLeast].value;
			boolTmpSelected = objSelect.options[intLeast].selected;

			objSelect.options[intLeast].text = objSelect.options[i].text;
			objSelect.options[intLeast].value = objSelect.options[i].value;
			objSelect.options[intLeast].selected = objSelect.options[i].selected;

			objSelect.options[i].text = strTmpText;
			objSelect.options[i].value = strTmpValue;
			objSelect.options[i].selected = boolTmpSelected;
			}
		}
	}
}

function typeAheadSelectBox_RenderSubmit(strForm)
{
	var isPercentage = false;
	if(this.c_width == null)this.c_width = "150px";
	else if(this.c_width.length == 0x0)this.c_width = "150px";
	isPercentage =(this.c_width.charAt(this.c_width.length - 0x01)== '%');
	if(isPercentage){
		document.write("<table" +(this.c_align == null ? "" :(" align=" + this.c_align)) + " cellspacing=0 cellpadding=0 border=0 width=\"" + this.c_width + "\" id=\"" + this.c_id + "__container\"><tr><td>");
		document.write("<input id=\"" + this.c_id + "__input\" type=text value=\"\" style=\"display:none;width:100%;\" ");
		document.write("class=\"" + this.c_class + "\" title=\"\" onclick=\"focusOnSelect('" + this.c_id + "');\" ");
		document.write("onblur=\"focusOnSelect('" + this.c_id + "')\" onkeyup=\"searchListBox('" + this.c_id + "');\">");
		document.write("<select name=\"" + this.c_id + "\" id=\"" + this.c_id + "\" class=\"" + this.c_class + "\" title=\"\" size=\"" + this.c_rows + "\" style=\"display:block;width:100%;\" onkeyup=\"showTextBox('" + this.c_id + "');\" onkeypress=\"return keyWasTab();\" onchange=\"ChickenOut();\">");
		for(var i = 0x0; i < this.c_options.length; i++){
			document.write(this.c_options[i]);
		}
		document.write("</select>");
		document.write("</td></tr></table>");
	}else {
		document.write("<span" + (this.c_align == null ? "" :  (" align=" + this.c_align)) + " id=\"" + this.c_id + "__container\">");
		document.write("<input id=\"" + this.c_id + "__input\" type=text value=\"\" style=\"display:none;width:" + this.c_width + ";\" ");
		document.write("class=\"" + this.c_class + "\" title=\"\" onclick=\"focusOnSelect('" + this.c_id + "');\" ");
		document.write("onblur=\"focusOnSelect('" + this.c_id + "')\" onkeyup=\"searchListBox('" + this.c_id + "');\">");
		document.write("<select name=\"" + this.c_id + "\" id=\"" + this.c_id + "\" class=\"" + this.c_class + "\" title=\"\" size=\"" + this.c_rows + "\" style=\"display:block;width:" + this.c_width + ";\" onkeyup=\"showTextBox('" + this.c_id + "');\" onkeypress=\"return keyWasTab();\">");
		for(var i = 0x0; i < this.c_options.length; i++){
			document.write(this.c_options[i]);
		}
		document.write("</select>");
		document.write("</span>");
	}
	if(this.c_sorted){
	var objSelect = document.getElementById(this.c_id);
	var intCount = objSelect.options.length;
	var intLeast;
	var strTmpText, strTmpValue, boolTmpSelected;
		
	for (var i = 0x0; i < intCount - 0x01; i++)
	{
		intLeast = i;
			
		for (var j = i + 0x01; j < intCount; j++)
		
			if (objSelect.options[intLeast].text > objSelect.options[j].text)
				intLeast = j;

				
		if (intLeast != i) {
			
			strTmpText = objSelect.options[intLeast].text;
			strTmpValue = objSelect.options[intLeast].value;
			boolTmpSelected = objSelect.options[intLeast].selected;

			objSelect.options[intLeast].text = objSelect.options[i].text;
			objSelect.options[intLeast].value = objSelect.options[i].value;
			objSelect.options[intLeast].selected = objSelect.options[i].selected;

			objSelect.options[i].text = strTmpText;
			objSelect.options[i].value = strTmpValue;
			objSelect.options[i].selected = boolTmpSelected;
			}
		}
	}
}

function searchListBox(strControlId, boolMakeSelection)
{
	if (searchListBox.arguments.length == 0x01)boolMakeSelection = false;
	var objContainer = document.getElementById(strControlId + "__container");
	var objInput = document.getElementById(strControlId + "__input");
	var objSelect = document.getElementById(strControlId);
	var strCompare = objInput.value.toLowerCase();
	if (!boolMakeSelection)
	{
		// if the user presses enter, up arrow, or down arrow, switch to the select box and select the appropriate item, otherwise, continue
		if (event.keyCode == 0x0d || (event.keyCode == 0x028 && !event.shiftKey) || (event.keyCode == 0x026 && !event.shiftKey)) 
		{
			searchListBox(strControlId, true);
			objInput.style.display = "none";
			if (parseInt(objSelect.size) > 0x01)
				objSelect.size = "" + (parseInt(objSelect.size) + 0x01);
			else
				objSelect.style.display = "block";
			objSelect.focus();
			objSelect.fireEvent('onchange');
			return;
		}
		else if (event.keyCode < 0x2f && event.keyCode != 0x020)
		{
			return;
		}
	}

	// if there is a patially matched selection, append the remaining text and hilight it, otherwise, set the focus at the end of the text.
	var txtRange = null;
	for (var i=0x0; i < objSelect.options.length; i++)
	{
		var strPossibleSelection = objSelect.options[i].text.toLowerCase();
		if (strPossibleSelection.indexOf(strCompare) == 0x0)
		{
			if (boolMakeSelection)
			{
				objSelect.selectedIndex = i;
			}
			else
			{
				txtRange = objInput.createTextRange();
				objInput.value = strCompare + strPossibleSelection.substr(strCompare.length);
				txtRange.moveStart("character", strCompare.length);
				txtRange.select();
			}
			break;
		}
	}
	if (txtRange == null && !boolMakeSelection)
	{
		txtRange = objInput.createTextRange();
		objInput.value = strCompare;
		txtRange.moveStart("character", strCompare.length);
		txtRange.select();
	}
}

function focusOnSelect(strControlId) {
	var objContainer = document.getElementById(strControlId + "__container");
	var objInput = document.getElementById(strControlId + "__input");
	var objSelect = document.getElementById(strControlId);
	if (objInput.style.display == "block")
	{
		searchListBox(strControlId, true);
		objInput.style.display = "none";
		if (parseInt(objSelect.size) > 0x01)
			objSelect.size = "" + (parseInt(objSelect.size) + 0x01);
		else
			objSelect.style.display = "block";
		objSelect.fireEvent('onchange');
	}
}

function showTextBox(strControlId){
	// if any alpha-numeric characters are typed in, switch to textbox mode
	if ( ((event.keyCode >= 0x020) && (event.keyCode <=  0x0ff)) && !(event.keyCode == 0x028 && !event.shiftKey) && !(event.keyCode == 0x026 && !event.shiftKey) ) 
	{
		var objContainer = document.getElementById(strControlId + "__container");
		var objInput = document.getElementById(strControlId + "__input");
		var objSelect = document.getElementById(strControlId);
		var intKeyPressedCode = event.keyCode;
		if(intKeyPressedCode==48&&event.shiftKey){intKeyPressedCode=41};
		if(intKeyPressedCode==49&&event.shiftKey){intKeyPressedCode=33};
		if(intKeyPressedCode==50&&event.shiftKey){intKeyPressedCode=64};
		if(intKeyPressedCode==51&&event.shiftKey){intKeyPressedCode=35};
		if(intKeyPressedCode==52&&event.shiftKey){intKeyPressedCode=36};
		if(intKeyPressedCode==53&&event.shiftKey){intKeyPressedCode=37};
		if(intKeyPressedCode==55&&event.shiftKey){intKeyPressedCode=38};
		if(intKeyPressedCode==56&&event.shiftKey){intKeyPressedCode=42};
		if(intKeyPressedCode==57&&event.shiftKey){intKeyPressedCode=40};
		if(intKeyPressedCode>95&&intKeyPressedCode<106){intKeyPressedCode-=48;} 
		var strKeyPressed = String.fromCharCode(intKeyPressedCode);
		
		objInput.style.display = "block";
		if (parseInt(objSelect.size) > 2)
			objSelect.size = "" + (parseInt(objSelect.size) - 1);
		else
			objSelect.style.display = "none";
		objInput.value = strKeyPressed.toLowerCase();
		searchListBox(strControlId);
		objInput.focus();
	}
}

function ChickenOut(){
	document.forms[0].submit();
	}