/************************
 * Javascript for dynamically generating suggested input,
 * something like google suggest.
 * Some of the ideas and implementations here are adapted from
 * (i)google.com, and 
 * (ii)a script from Robert Plank
 * http://www.developertutorials.com/print/339.html, and
 * (iii) Microsoft MSDN:
 * http://support.microsoft.com/default.aspx?scid=kb;EN-US;q296772
 ************************/

//
// get sugestion div
//
var xmlHttp;
var selectedIndex = -1;
var inputBox;

function processKeyDown(event){
   //Enter has to be processed here instead of KeyUp
   //or, when you submit a form the new value wouldnot take any effect
   if(event.keyCode == 13){ //ENTER
       //inputBox.blur(); 
       hideSug();
       return;
   }
}

function processKeyUp(event){
   //alert(event.keyCode);
   if(event.keyCode == 9){ //TAB
       return;
   }
   //if it's esc, escape
   if(event.keyCode == 27){ //ESC
       selectedIndex = -1;
       inputBox.blur(); 
       return;
   }
   //if it's up arrow or down arrow
   if(event.keyCode == 40 || event.keyCode == 38){ //Down arrow
      processUpDown(event.keyCode);
      return;
   }

   //for everything else, go ahead and grab the list
   grabPage();
}

function mouseOverItem(item){
    selectedIndex = getPosition(item.innerHTML);
    refreshList();
}

function processUpDown(keyCode){
    var counter = countItems();
    if(counter < 1) return;
    //alert(counter);
    if(keyCode == 38){//UP
        if(selectedIndex <=0) selectedIndex = counter-1;
        else  selectedIndex -= 1;
    }
    if(keyCode == 40){//Down
        if(selectedIndex < 0) selectedIndex = 0;
        else if(selectedIndex < counter - 1) selectedIndex += 1; 
        else selectedIndex = 0;
    }
    //alert(keyCode + ":" + selectedIndex);
    refreshList();
}

function refreshList(){
    var counter = 0;
    var mywin = document.all('mywin');
    for(var i=0; i<mywin.childNodes.length; i++){
        var itemWin = mywin.childNodes[i];
        if(itemWin.innerHTML){ //is div?
            //adjust sugdiv width if needed
            if(selectedIndex == counter){
                itemWin.style.background = 'highlight';
            }else{
                itemWin.style.background = 'white';
            }
            counter++; 
        }
    }
}

//
//get the n'th list item
//
function getListItem(n){
    counter = 0;
    for(var i=0; i<document.all('mywin').childNodes.length; i++){
        if(document.all('mywin').childNodes[i].innerHTML){ //is div?
            if(counter == n) return document.all('mywin').childNodes[i];
            counter++; 
        }
    }
}

//
//get the position
//
function getPosition(str){
    counter = 0;
    for(var i=0; i<document.all('mywin').childNodes.length; i++){
        if(document.all('mywin').childNodes[i].innerHTML){ //is div?
            if(document.all('mywin').childNodes[i].innerHTML == str) 
                return counter;
            counter++; 
        }
    }
    return 0;
}

function grabPage(){
   // Internet Explorer
   try {
      xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); }
   catch(e) {
      try {
           xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
      }catch(oc){
           xmlHttp = null; 
      }
   }

   // Mozailla/Safari
   if (!xmlHttp && typeof XMLHttpRequest != "undefined") {
       xmlHttp = new XMLHttpRequest();
   }
   // Call the processChange() function when the page has loaded
   if (xmlHttp != null) {
      xmlHttp.onreadystatechange = setSug;
      var url = "/sug.cgi?k=" + inputBox.value;
      xmlHttp.open("GET", url, true);
      xmlHttp.send(null);
   }
}

function setSug(){
   if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
      var mywin = getObject('mywin');
      selectedIndex = -1;
      mywin.innerHTML = xmlHttp.responseText;
      //set sug window size
      for(var i=0; i<mywin.childNodes.length; i++){
          var itemWin = mywin.childNodes[i];
          if(itemWin.innerHTML){ //is div?
             //inputBox.value += itemWin.offsetWidth 
             //               + "!" + mywin.offsetWidth + "-";
             if(itemWin.offsetWidth > mywin.offsetWidth)
                 mywin.style.width = itemWin.offsetWidth;
          }
      }
   }
}

//
// show sug div right below box(should be an input field)
//
function showSug(box){
    //var win = document.all('mywin');
    var win = getObject('mywin');
    win.innerHTML = '';
    inputBox = box;
    //set sug window position
    win.style.position = "absolute";
    win.style.visibility = "visible";
    win.style.left = getOffsetLeft(inputBox);
    win.style.width = inputBox.offsetWidth;
    win.style.top = getOffsetTop(inputBox) + inputBox.offsetHeight;
}

// 
// show sug div
//
function hideSug(){
    var obj = getObject('mywin');
    if(selectedIndex >=0)
        inputBox.value = getListItem(selectedIndex).innerHTML;
    obj.style.visibility = "hidden";
}

function getObject(name){
    var obj = document.all(name);
    if(!obj) obj = document.getElementById(name);
    if(!obj) obj = eval("document." + name);
    if(!obj) obj = eval("document.all." + name);
    return obj;
}

function getOffsetLeft(theObj){
    var x = 0;
    while(theObj){
    x += theObj.offsetLeft;
    theObj = theObj.offsetParent;
  }
  return x;
}

function getOffsetTop(theObj){
    var y = 0;
    while(theObj){
        y += theObj.offsetTop;
        theObj = theObj.offsetParent;
    }
    return y;
}

function countItems(){
    var counter = 0;
    for(var i=0; i<document.all('mywin').childNodes.length; i++){
        if(document.all('mywin').childNodes[i].innerHTML){ //is div?
            counter++; 
        }
    }
    return counter;
}