var lastSearchBox;
var filterSearchBox = "";

function initSearchBox(id,query) {
  var input = document.getElementById(id);
  input.setAttribute('autocomplete','off');
  var box = document.createElement("div");
  input.parentNode.insertBefore(box,input);
  box.className = 'searchBox';
  box.setAttribute('id','searchBox'+id);
  box.style.width = (input.offsetWidth-2)+'px';
  input.onkeyup = function(e) {
    keyListenerSearchBox(e,id,query);
  }
}

function actionClickSearchBox(item,id) {
  selectSearchBox(item,id);
  var box = document.getElementById('searchBox'+id);
  box.style.visibility = 'hidden';
  
}

function actionSearchBox(id,query) {
  var box = document.getElementById('searchBox'+id);
  var search = document.getElementById(id).value;
  if (search.length==0) return;
  var request = createXMLHttpRequest();
  var url = "./ajax/search/search.php?query="+query;
  if (filterSearchBox.length>0) url += "&filter="+filterSearchBox;
  request.open("post",url,true);
  var params = "search="+search;
  request.onreadystatechange= function () {
    if (request.readyState == 4) {
       res = request.responseXML;
       var items = res.getElementsByTagName('item');
       var html = '';
       if (items.length>0) html += '<ul>';
       for (var i=0;i<items.length;i++) {
         html += '<li onclick="actionClickSearchBox(this,\''+id+'\');">'+items[i].getAttribute('value')+'</li>';
       }
       if (items.length>0) html += '</ul>';
       box.innerHTML = html;
       box.style.visibility = 'visible';
    }
  }
  request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  request.setRequestHeader("Content-length", params.length);
  request.setRequestHeader("Connection", "close");   
  request.send(params);  
}

function selectSearchBox(what,id) {
  var box = document.getElementById('searchBox'+id);
  var ul = box.firstChild;
  for (var i=0;i<ul.childNodes.length;i++) {
    ul.childNodes[i].className = (ul.childNodes[i]==what)?'sel':'';
  }
  document.getElementById(id).value = what.innerHTML;
}

function selectorSearchBox(dir,id) {
  var box = document.getElementById('searchBox'+id);
  box.style.visibility = 'visible';
  var ul = box.firstChild;
  for (var i=0;i<ul.childNodes.length;i++) {
    if (ul.childNodes[i].className=='sel') {
      var what = (dir>0)?ul.childNodes[i].nextSibling:ul.childNodes[i].previousSibling;
      if (what!=null) selectSearchBox(what,id);
      return;
    }
  }
  if (ul.childNodes.length>0) selectSearchBox(ul.firstChild,id);
}

function keyListenerSearchBox(e,id,query) {
  var key = (window.event) ? event.keyCode : e.keyCode;
  var box = document.getElementById('searchBox'+id);
  if (key==27 || key==13) { // escape
    box.style.visibility = 'hidden';
  } else
  if (key==40) { // sipka dolu
    selectorSearchBox(+1,id);
  } else
  if (key==38) { // sipka nahoru
    selectorSearchBox(-1,id);
  } else { // ostatni
    var value = document.getElementById(id).value;
    if (lastSearchBox!=value && value.length>0) {
      actionSearchBox(id,query);
      lastSearchBox = value;
    } else if (value.length==0) {
      box.style.visibility = 'hidden';
    }
  }    
}