var SelectedItem=-1; //This allows users to scroll through different options on the AJAX popup.
var HintsId='seal'; //This is the ID of the containing divs for the recipe entry
var oTimeOut;


function CheckTheKey(TheForm, KeyID){
	CheckKey(TheForm, KeyID,"IngredientHint");
}

function CheckKey(TheForm, KeyID, FunctionName){
  // var KeyID = event.keyCode;
   switch(KeyID)
   {
	
	  case 9:
      case 13: //ENTER. Just hide the div when enter is pressed. The selected value should already be selected
		hide_div();
		break;

      case 38: //Up Arrow - highlights a div and copies it's innerHTML to the form
		  var HighlightedDiv=$(HintsId).getChildren();
		  if(HighlightedDiv[0].tagName != 'A') break;
		  if (SelectedItem>0) //if the selected items variable is allowed, set the current item back to white
			{
				//HighlightedDiv[SelectedItem].style.backgroundColor='#ffffff';
				PopupUnHilight(HighlightedDiv[SelectedItem]);
				SelectedItem--;
			}
			PopupHilight(HighlightedDiv[SelectedItem]);
			TheForm.value=trim(HighlightedDiv[SelectedItem].innerHTML);
      break;

      case 40://Down Arrow - highlights a div and copies it's innerHTML to the form
			var HighlightedDiv=$(HintsId).getChildren();
			 if(HighlightedDiv[0].tagName != 'A') break;
			if (SelectedItem>-1) //if the selected items variable is allowed, set the current item back to white
			{
				//HighlightedDiv[SelectedItem].style.backgroundColor='#ffffff';
				PopupUnHilight(HighlightedDiv[SelectedItem]);
			}
			if (SelectedItem<(HighlightedDiv.length-1)){SelectedItem++; } //if the selected div is less than the total number of divs, move to the next div.
			PopupHilight(HighlightedDiv[SelectedItem]);
			TheForm.value=trim(HighlightedDiv[SelectedItem].innerHTML);
       break;
	  
	  default:
			clearTimeout(oTimeOut);
			oTimeOut = setTimeout(FunctionName+"('"+TheForm.value+"','"+TheForm.id+"');",200);
		  
   }  
}


//Hint Functions
function IngredientHint(str, Input_Id)
{
	show_div($(Input_Id));//This turns on the floating div, positioned according to the input form
	SelectedItem=-1;//Sets the selected item to off the page

	new Ajax("Ajax/IngredientHint.asp", {method: "get",update: $(HintsId)}).request("q="+str+"&object="+Input_Id);
} 

function TagHint(str, Input_Id)
{
	show_div($(Input_Id));//This turns on the floating div, positioned according to the input form
	SelectedItem=-1;//Sets the selected item to off the page

	new Ajax("Ajax/TagHint.asp", {method: "get",update: $(HintsId)}).request("q="+str+"&type=store&object="+Input_Id);
} 

function RecipeTagHint(str, Input_Id)
{
	show_div($(Input_Id));//This turns on the floating div, positioned according to the input form
	SelectedItem=-1;//Sets the selected item to off the page

	new Ajax("Ajax/TagHint.asp", {method: "get",update: $(HintsId)}).request("q="+str+"&type=recipe&object="+Input_Id);
} 

//THIS IS FOR LOCATING A CERTAIN ELEMENT
function setLyr2(obj)
{
	var newX = obj.getLeft();
	var newY = obj.getTop();
	newX+=20;
	newY+=130;
	//make adjustments for different browsers
	$(HintsId).style.top = newY + 'px';
	$(HintsId).style.left = newX + 'px';
	$(HintsId).style.display='block';
}

function show_div(obj)
{
	var newX = obj.getLeft();
	var newY = obj.getTop();
	newX+=7;
	newY+=25;
		if(navigator.userAgent.indexOf("Firefox")!=-1)
		{
			newX-=12;
			newY-=11;
		}
	
	$(HintsId).style.top = newY + 'px';
	$(HintsId).style.left =  newX + 'px';
	$(HintsId).style.display='block';
}

function hide_div(){

	$(HintsId).style.display='none';
	$(HintsId).innerHTML="<span style=\"color:#990000;\">Loading...</span>"

}