// Schriftfarbe #000
// tr hover #d6ebff
// Event Handling Funktion
function eventHandling(element,type,callBack,returnParams)
{
  var returnParams = returnParams;
  if(document.addEventListener) //gute Browser
  {
      if(type.match(/^on/)) type = type.replace(/^on/,"");
      element.addEventListener(type,handleEvent,false);
  }
  else
  { // IE
    if(!type.match(/^on/))  type = "on"+type;
    element.attachEvent(type,handleEvent);
  }

  function handleEvent (evt)
  {
    var event  = (evt)?evt:(window.event)?window.event:'';
    if(event.stopPropagation)
    {
      event.stopPropagation();
    }
    else
    {
      event.cancelBubble = true;
    }
    var target = event.srcElement || event.currentTarget;
    callBack.call(callBack,event,target,(returnParams)?returnParams:null);
  }
}

function keynavigation (obj, div_id, txt_id)
{
  var curElement  = null;
  obj.innerHTML   = clearSpaces(obj.innerHTML)
  var naviElement = obj;

  // gleich Events festnageln die brauchen nur einmal belegt werden
  // darum habe ich einen Singleton Pattern bei der anderen Klasse
  // ich kann keine Instanzen von der Tastennavigation anlegen
  // aber mehere Listen anhängen somit kann auch immer nur ein Event gesetzt werden
  // ist hier nun aber etwas schwieriger umzusetzen so also solltest Du darauf achten das es nur eine Listnavigation gibt
  eventHandling(document,"keydown",keyPressed);

  function clearSpaces (strOut)
  {
    strOut = strOut.replace(/li>\s+/gm,'li>');
    strOut = strOut.replace(/\s+<li/gm,'<li');
    strOut = strOut.replace(/li>\s+<li/gm,'li><li');
    return strOut;
  };

  function keyPressed (evt)
  {
    var curKey = evt.keyCode;

    switch (curKey)
    {
      case 38: // hoch
      if(curElement && !curElement.previousSibling)
      {
        curElement = naviElement.lastChild.previousSibling;
        document.getElementById(txt_id).value = curElement.firstChild.id;
        curElement.style.backgroundColor = '#d6ebff';
        curElement.style.color = '#000';

        firstElement = naviElement.firstChild;
        firstElement.style.backgroundColor = '';
        firstElement.style.color = '#000';
      }
      else if(curElement && curElement.previousSibling)
      {
        curElement = curElement.previousSibling;
        document.getElementById(txt_id).value = curElement.firstChild.id;
        curElement.style.backgroundColor = '#d6ebff';
        curElement.style.color = '#000';

        if(curElement.nextSibling)
        {
          curElement.nextSibling.style.color = '#000';
          curElement.nextSibling.style.backgroundColor = '';
        }
      }
      else if(!curElement)
      {
        curElement = naviElement.lastChild.previousSibling;
        document.getElementById(txt_id).value = curElement.firstChild.id;
        curElement.style.backgroundColor = '#d6ebff';
        curElement.style.color = '#000';
      }
      break;

      case 40: // runter
      if(curElement)
      {
        if(!curElement.nextSibling.nextSibling)
        {
          curElement = naviElement.firstChild;
          document.getElementById(txt_id).value = curElement.firstChild.id;
          curElement.style.backgroundColor = '#d6ebff';
          curElement.style.color = '#000';

          lastElement = naviElement.lastChild.previousSibling;
          lastElement.style.backgroundColor = '';
          lastElement.style.color = '#000';

        }
        else if(curElement.nextSibling)
        {
          curElement = curElement.nextSibling;
          document.getElementById(txt_id).value = curElement.firstChild.id;
          curElement.style.backgroundColor = '#d6ebff';
          curElement.style.color = '#000';

          if(curElement.previousSibling)
          {
            curElement.previousSibling.style.color = '#000';
            curElement.previousSibling.style.backgroundColor = '';
          }
        }
      }
      else
      {
        curElement = naviElement.firstChild;
        document.getElementById(txt_id).value = curElement.firstChild.id;
        curElement.style.backgroundColor = '#d6ebff';
        curElement.style.color = '#000';
      }
      break;

      case 13: // Enter Taste
      if(curElement)
      {
        document.getElementById(div_id).style.visibility = 'hidden';
      }
      break;

      case 9: // Tabulator
      if(curElement)
      {
				document.getElementById(div_id).style.visibility = 'hidden';
			}

      default:  return;
    }
  };

  this.updateList = function (obj_new_list)
  {
    obj_new_list.innerHTML = clearSpaces(obj_new_list.innerHTML)
    naviElement = obj_new_list;
    curElement = null;
  };
}