var arrOptions = new Array();
var strLastValue = "";
var theTextBox;
var theHiddenTextBox;
var hideArrOptions = new Array();
var currentValueSelected = -1;
window.onload = function () {
  var elemSpan = document.createElement("span");
  elemSpan.id = "spanOutput";
  elemSpan.className = "spanTextDropdown";
  document.body.appendChild(elemSpan);
  //document.Form1.txtUserInput.onkeyup = GiveOptions;
};
function GiveOptions(hiddenTextBox,evt) { 
 if(hiddenTextBox!=null){
   theHiddenTextBox=hiddenTextBox;
 }
 
 var intKey = -1;
 var obj={"box":evt?evt.target:(window.event?window.event.srcElement:null),
          "keyCode":evt?evt.which:(window.event?window.event.keyCode:null)};//FireFox&&IE,2010-01-21arson
 if (obj.box!=null) {
   intKey = obj.keyCode;
   theTextBox = obj.box;
 // TypeAhead(theTextBox.value);
 }
 
 if (theTextBox.value.length == 0) {
   HideTheBox();
   strLastValue = "";
   return false;
 }
 
// alert('a');
 
 if (intKey == 13) {
   GrabHighlighted();
   theTextBox.blur();
   return false;
 } else {
  if (intKey == 38) {
    MoveHighlight(-1);
    return false;
  } else {
   if (intKey == 40) {
     MoveHighlight(1);
     return false;
   }
     if (intKey == 27) {
     MoveHighlight(1);
     return false;
   }
  }
 }

// alert('length--'+arrOptions.length);
 //alert('strLastValue--'+strLastValue);
 
 //if (theTextBox.value.indexOf(strLastValue) != 0 || arrOptions.length == 0 || (strLastValue.length == 0 && theTextBox.value.length > 0) || (theTextBox.value.length <= strLastValue.length)) {
   strLastValue = theTextBox.value;
   TypeAhead(theTextBox.value);
 //} else {
 // BuildList(theTextBox.value);
  // strLastValue = theTextBox.value;
 //}
}
function TypeAhead(xStrText) {
 arrOptions = new Array();
 hideArrOptions = new Array();
 // add option here ,cargoinchina
 setArrOptions(theTextBox.value);
 strLastValue = theTextBox.value;
}

function BuildList(theText) {
 SetElementPosition();
 var inner = "";
 var theMatches = MakeMatches(theText);
 for (var i = 0; i < theMatches.length; i++) {
   inner += theMatches[i];
 }
 if (theMatches.length > 0) {
   document.getElementById("spanOutput").innerHTML = inner;
   document.getElementById("OptionsList_0").className = "spanHighElement";
   currentValueSelected = 0;
 } else {
  HideTheBox();
 }
 
 setIframeStyle();
}
function SetElementPosition() {
 var selectedPosX = 0;
 var selectedPosY = 0;
 var theElement = theTextBox;
 var theTextBoxInt = theTextBox;
 if (!theElement) {
  return;
 }
 var theElemHeight = theElement.offsetHeight;
 var theElemWidth = theElement.offsetWidth;
while (theElement != null) {
   selectedPosX += theElement.offsetLeft;
   selectedPosY += theElement.offsetTop;
   theElement = theElement.offsetParent;
 }
 xPosElement = document.getElementById("spanOutput");
 xPosElement.style.left = selectedPosX;
// xPosElement.style.width = theElemWidth;
 xPosElement.style.width = 300;
 xPosElement.style.top = selectedPosY + theElemHeight;
 xPosElement.style.display = "block"; 
 
}
var countForId = 0;
function MakeMatches(xCompareStr) {
 countForId = 0;
 var matchArray = new Array();
 for (var i = 0; i < arrOptions.length; i++) 
 {
  var regExp = new RegExp(xCompareStr, "ig");
  if ((arrOptions[i].search(regExp)) >= 0) 
  {
     matchArray[matchArray.length] = CreateUnderline(arrOptions[i], xCompareStr, i);
  } else 
  {
   continue;
  }
  if(i > 10 || i == 10)
  {
	    break;
  }
 }
 return matchArray;
}
var undeStart = "<span class='spanMatchText'>";
var undeEnd = "</span>";
var selectSpanStart = "<span\t style='width:100%;display:block;' class='spanNormalElement' onmouseover='SetHighColor(this)' ";
var selectSpanEnd = "</span><iframe name='spanIframe1' frameborder='0' scrolling='no' class='spanIframe'></iframe>";
function CreateUnderline(xStr, xTextMatch, xVal) {
 selectSpanMid = "onclick='SetText(" + xVal + ")'" + " id='OptionsList_" + countForId + "' theArrayNumber='" + xVal + "'>";
 countForId++;
 var regExp = new RegExp(xTextMatch, "ig");
 var start = xStr.search(regExp);
 var matchedText = xStr.substring(start, start + xTextMatch.length);
 var Replacestr = xStr.replace(regExp, undeStart + matchedText + undeEnd);
 return selectSpanStart + selectSpanMid + Replacestr + selectSpanEnd;
}
function SetHighColor(theTextBox) {
 if (theTextBox) {
  currentValueSelected = theTextBox.id.slice(theTextBox.id.indexOf("_") + 1, theTextBox.id.length);
 }
 for (var i = 0; i < countForId; i++) {
  document.getElementById("OptionsList_" + i).className = "spanNormalElement";
 }
 document.getElementById("OptionsList_" + currentValueSelected).className = "spanHighElement";
}
function SetText(xVal) {
  theTextBox.value = arrOptions[xVal]; //set text value
  if(theHiddenTextBox!=null){
    theHiddenTextBox.value = hideArrOptions[xVal];
  }
  
  document.getElementById("spanOutput").style.display = "none";
  currentValueSelected = -1; //remove the selected index
}
function GrabHighlighted() {
 if (currentValueSelected >= 0) {
   xVal = document.getElementById("OptionsList_" + currentValueSelected).getAttribute("theArrayNumber");
   SetText(xVal);
   HideTheBox();
 }
}
function HideTheBox() {
  document.getElementById("spanOutput").style.display = "none";
  currentValueSelected = -1;
}
function MoveHighlight(xDir) {
 if (currentValueSelected >= 0) {
  newValue = parseInt(currentValueSelected) + parseInt(xDir);
  if (newValue > -1 && newValue < countForId) {
    currentValueSelected = newValue;
    SetHighColor(null);
  }
 }
}
function ReDraw() {
 BuildList(theTextBox.value);
}

//rewrite setArrOptions here



function GiveOptions2(textBox,keycode,hiddenTextBox) {
 if(hiddenTextBox!=null){
   theHiddenTextBox=hiddenTextBox;
 }
 var intKey = parseInt(keycode);
 theTextBox = textBox;
 
 if (theTextBox.value.length == 0) {
   HideTheBox();
   strLastValue = "";
   return false;
 }
 
// alert('a');
 
 if (intKey == 13) {
   GrabHighlighted();
   theTextBox.blur();
   return false;
 } else {
  if (intKey == 38) {
    MoveHighlight(-1);
    return false;
  } else {
   if (intKey == 40) {
     MoveHighlight(1);
     return false;
   }
     if (intKey == 27) {
     MoveHighlight(1);
     return false;
   }
  }
 }

// alert('length--'+arrOptions.length);
 //alert('strLastValue--'+strLastValue);
 
 if (theTextBox.value.indexOf(strLastValue) != 0 || arrOptions.length == 0 || (strLastValue.length == 0 && theTextBox.value.length > 0) || (theTextBox.value.length <= strLastValue.length)) {
   strLastValue = theTextBox.value;
   TypeAhead(theTextBox.value);
 } else {
  BuildList(theTextBox.value);
  // strLastValue = theTextBox.value;
 }
}

function setIframeStyle(){
var iframes=document.getElementsByName("spanIframe1");
 var heigh;
 if(arrOptions.length>=10){
   heigh = 20*10+"px";
 }
 else {
   heigh= 20*(arrOptions.length)+"px";
 }
 for(var i=0;i<iframes.length;i++){
    iframes[i].style.height=heigh;
 }
}