/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//   	In order to get the editable dropdowns to work
// 		you need to include this JS
//		and you must add the following to your existing JS...
//
//		1)Initialize the following global variables:
//		editStringDefault = ''; - value of the innerHTML of the option that is editable, such as '??' or 'Type your own value'
//		
//		2)You must create a dropdownObj for each select dropdown that has an editable option. For example:
//		payCalcTerm = new dropdownObj();
//
//		3)You must initialize the maxLength property for each of your dropdownObj. For example:
//		payCalcTerm.maxLength = 3;
//
//		4)You must write a function named getDDObj(dropdown) that matches the dropdownObj you just created
//		with the name attribute of the select object in your HTML. For example:
//		function getDDObj(dropdown){
//			if (dropdown.getAttribute('name') == 'p_pay_calc_term'){
//				return payCalcTerm;
//			}	  	  
//		}
//
//		5)You must write another function that will initialize other values for
//		each of the dropdownObj you created. For example:
//		function initializeIndex(){
//			if (typeof(document.pay_calc_form.p_pay_calc_term) != 'undefined') {
//				initializeIndexDDObj(document.pay_calc_form.p_pay_calc_term);	
//			}
//		}		
//
//		6)You must include the following JS Script:
//      <cfinclude template="/#Application.g_include#/javascript/isFieldInteger.cfm">
//
//
//
//		HTML Considerations:
//
//		1)The select drop down should look something like this:
// 		<select name="p_engine_type" onKeyDown="editableDDOnKeyDown(event)" onKeyUp="editableDDOnKeyUp(this)" onKeyPress="fnKeyPressHandler(this, event)" //		onChange="fnChangeHandler(this)">
//		
//		If a change in the select drop down needs to trigger another change (such as an update in another field), then it must look like this:
// 		<select name="p_pay_calc_term" onBlur="processPayCalcTermBlur(this)" onKeyDown="editableDDOnKeyDown(event)" onKeyUp="editableDDOnKeyUp(this)"
//		onKeyPress="fnKeyPressHandler(this, event)" onChange="processPayCalcTermChange(this)">
//		and you must write the following additional functions:
//
//		function processPayCalcTermChange(_selectbox){
//			fnChangeHandler(_selectbox);
//			if (_selectbox.options[_selectbox.options.selectedIndex].getAttribute('name') != 'EditMe'){
//If the editable dropdown option is selected, the Model will be updated on the onBlur - otherwise the user
//      will not be able to type in a Make if the Model dropdown is refreshed (the Make object will lose focus)
//					calculateEstimatedPayment(internet_price); -- JS for whatever other change needs to happen
//			}
//		}
//
//		function processPayCalcTermBlur(_selectbox){
//					calculateEstimatedPayment(internet_price);-- JS for whatever other change needs to happen
//		}	
//
//		2)The editable option of the drop down should look something like this:
//		<OPTION id="EditMe" name="EditMe" value="" style="COLOR:##ff0000;BACKGROUND-COLOR:##ffff00;">??</option>
//		The ?? value should match the value of the global JS variable editStringDefault
//
//		3)The onload of the body tag must call the function: initializeIndex();
//
//
//		That's it!!!!
//
// 	For more info: http://chakrabarty.com/pp_editable_dropdown.html
//
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

function dropdownObj()
{
    this.maxlength = 0;
    this.previousSelectIndex = 0; /* Contains the Previously Selected Index */
    this.selectIndex = 0; /* Contains the Currently Selected Index  */
    this.selectChange = 'MANUAL_CLICK'; /* Indicates whether Change in dropdown selected value was due to a Manual Click or due to System properties of dropdown */
    this.editableOptionIndex = 0;
    this.editableOptionText = '--?--'; /* Default text for the editable option */
	this.isNumeric = 'N';
}

function initializeIndexDDObj(dropdown){
    getDDObj(dropdown).previousSelectIndex = dropdown.options.selectedIndex;
    getDDObj(dropdown).selectIndex = dropdown.options.selectedIndex;
    resetSelectStyle(dropdown);
}

function resetSelectStyle(dropdown){
    //If the editable dd is selected, the special background and colors disappear in FF. This fixes it.	
    dropdown.style.backgroundColor = dropdown.options[dropdown.selectedIndex].style.backgroundColor;
    dropdown.style.color = dropdown.options[dropdown.selectedIndex].style.color;
}

function dropDownLeftToRight(dropdown)
{
    dropdown.style.direction = "ltr";
}

function dropDownRightToLeft(dropdown)
{
    dropdown.style.direction = "rtl";
}

function FindKeyCode(e)
{
    if (e.which) 
	{
        keycode = e.which; //NetscapeFirefoxChrome
    }
    else 
	{
        keycode = e.keyCode; //Internet Explorer
    }
    return keycode;
}

function FindKeyChar(e)
{
    keycode = FindKeyCode(e);
    if ((keycode == 8) || (keycode == 127)) 
	{
		character = "backspace"
	}
	else 
	{
		if ((keycode == 46)) 
		{
			character = "delete"
		}
		else 
		{
			character = String.fromCharCode(keycode);
		}
	}
    //alert("FindKey"+ character);
    return character;
}

function dropDownKeyDownHandler(dropdown, e)
{
    var vEventKeyCode = FindKeyCode(e);
    
    if (vEventKeyCode == 37) 
	{
        dropDownLeftToRight(dropdown);
    }
    if (vEventKeyCode == 39) 
	{
        dropDownRightToLeft(dropdown);
    }
    
    if (vEventKeyCode == 46) 
	{
        if (dropdown.options.length != 0) 
		{
            if (dropdown.options.selectedIndex == (dropdown.options.length - 1)) 
			{
                dropdown.options[dropdown.options.selectedIndex].text = '';
                dropdown.options[dropdown.options.selectedIndex].value = '';
            }
        }
    }
    
    if (vEventKeyCode == 8 || vEventKeyCode == 127) 
	{
        if (dropdown.options.length != 0) 
		{
            if (dropdown.options.selectedIndex == (dropdown.options.length - 1)) 
			{
                if ((dropdown[(dropdown.options.length - 1)].text == getDDObj(dropdown).editableOptionText) || (dropdown[(dropdown.options.length - 1)].value == getDDObj(dropdown).editableOptionText)) 
				{
                    dropdown.options[dropdown.options.selectedIndex].text = '';
                    dropdown.options[dropdown.options.selectedIndex].value = '';
                }
                else 
				{
                    dropdown.options[dropdown.options.selectedIndex].text = dropdown.options[dropdown.options.selectedIndex].text.slice(0, -1);
                    dropdown.options[dropdown.options.selectedIndex].value = dropdown.options[dropdown.options.selectedIndex].value.slice(0, -1);
                }
            }
        }
        if (e.which) //NetscapeFirefoxChrome
        {
            e.which = '';
        }
        else //Internet Explorer
        {
            e.keyCode = '';
        }
        if (e.cancelBubble) //Internet Explorer
        {
            e.cancelBubble = true;
            e.returnValue = false;
        }
        if (e.stopPropagation) //NetscapeFirefoxChrome
        {
            e.stopPropagation();
        }
        if (e.preventDefault) //NetscapeFirefoxChrome
        {
            e.preventDefault();
        }
    }
}

function dropDownChangeHandler(dropdown)
{
    getDDObj(dropdown).previousSelectIndex = getDDObj(dropdown).selectIndex;
    getDDObj(dropdown).selectIndex = dropdown.options.selectedIndex;
    
    if ((getDDObj(dropdown).previousSelectIndex == ((dropdown.options.length - 1))) && (getDDObj(dropdown).selectIndex != ((dropdown.options.length - 1))) && (getDDObj(dropdown).selectChange != 'MANUAL_CLICK')) 
	{
        dropdown[((dropdown.options.length - 1))].selected = true;
        getDDObj(dropdown).previousSelectIndex = getDDObj(dropdown).selectIndex;
        getDDObj(dropdown).selectIndex = dropdown.options.selectedIndex;
        getDDObj(dropdown).selectChange = 'MANUAL_CLICK';
    }
	resetSelectStyle(dropdown);
}

function dropDownKeyPressHandler(dropdown, e)
{
    keycode = FindKeyCode(e);
    keychar = FindKeyChar(e);
    
	
    if( getDDObj(dropdown).isNumeric == 'N' && ((keycode > 47 && keycode < 59) || (keycode > 62 && keycode < 127) || (keycode == 32)) ) 
	{
        var vAllowableCharacter = "yes";
    }
	else if( getDDObj(dropdown).isNumeric == 'Y' && (keycode > 47 && keycode < 59) )
	{
		var vAllowableCharacter = "yes";
	}
    else 
	{
        var vAllowableCharacter = "no";
    }
    
    if (dropdown.options.length != 0) 
	{
		if (dropdown.options.selectedIndex == ((dropdown.options.length - 1))) 
		{
			var vEditString = dropdown.options[dropdown.options.selectedIndex].innerHTML;	
			
			if (vAllowableCharacter == "yes") 
			{
				if ((dropdown[(dropdown.options.length - 1)].text == getDDObj(dropdown).editableOptionText) || (dropdown[(dropdown.options.length - 1)].value == getDDObj(dropdown).editableOptionText)) 
					vEditString = "";
			}
			
			if (vAllowableCharacter == "yes") 
			{
				vEditString += String.fromCharCode(keycode);
				
				var i = 0;
				var vEnteredChar = String.fromCharCode(keycode);
				var vUpperCaseEnteredChar = vEnteredChar;
				var vLowerCaseEnteredChar = vEnteredChar;
				
				
				if (((keycode) >= 97) && ((keycode) <= 122)) 
				{
					vUpperCaseEnteredChar = String.fromCharCode(keycode - 32);
				}
				
				if (((keycode) >= 65) && ((keycode) <= 90)) 
				{
					vLowerCaseEnteredChar = String.fromCharCode(keycode + 32);
				}
				
				if (e.which) //For NetscapeFirefoxChrome
				{
					for (i = 0; i <= (dropdown.options.length - 1); i++) 
					{
						if (i != (dropdown.options.length - 1)) 
						{
							var vReadOnlyString = dropdown.options[i].innerHTML;
							var vFirstChar = vReadOnlyString.substring(0, 1);
							if ((vFirstChar == vUpperCaseEnteredChar) || (vFirstChar == vLowerCaseEnteredChar)) 
							{
								getDDObj(dropdown).selectChange = 'AUTO_SYSTEM';
								break;
							}
							else
							{
								getDDObj(dropdown).selectChange = 'MANUAL_CLICK';
							}
						}
					}
				}
			}
			
			if(vEditString.length <= getDDObj(dropdown).maxlength)
			{
				dropdown.options[(dropdown.options.length - 1)].innerHTML = vEditString;
			}
			
			return false;
		}
	}
    return true;
}

function dropDownKeyUpHandler(dropdown, e)
{
    if (e.which) // NetscapeFirefoxChrome
    {
        if (getDDObj(dropdown).selectChange == 'AUTO_SYSTEM') 
		{
            dropdown[((dropdown.options.length - 1))].selected = true;
        }
        
        var vEventKeyCode = FindKeyCode(e);
        if ((vEventKeyCode == 37) || (vEventKeyCode == 39)) 
		{
            dropdown[(dropdown.options.length - 1)].selected = true;
        }
    }
}

////////////////////////////////////////////////////////////////////////////////////
// End of Editable Drop Down
////////////////////////////////////////////////////////////////////////////////////