var autoCompleteTime = 300;
var maxWaitCycle =  8;
var targetElem = 'searchvalue';
var firstChar = 'xx';
var tipBottom;    // bottom of dropdown div
var tipLeft;      // left of dropdown div
var tipRight;     // left of dropdown div
var tipTop;       // topposition of dropdown div
var inputVar = [ ];
var totallist;   // is 1 als de totale lijst is verzonden
var charfilter = /^\w/;

inputVar.trefwoord = [ ];
inputVar.auteur = [ ];
inputVar.persoonsnaam = [ ];
inputVar.tijdschrift = [ ];
inputVar.uitgever = [ ];
//inputVar.titel = [ ];

function customInsert(actie, ref){
	if (actie == 'clear'){
		document.getElementById('showwordid').value = 0;

	} else if (actie == 'set'){
		document.getElementById('showwordid').value = ref.dbWordId;
		document.getElementById('submitvalue').value = document.getElementById(targetElem).value;

	}
	//debug('id='+document.getElementById('showwordid').value);
}


var lastvalue;
var soort;        // autocomplete array
//inputVar.a = [ 'test' ];

var browserDetected = identifyBrowser();

// constructor for outline item objects
function oi(text, id) {
  this.text = text;
  this.id = id;
}

function keydownAutoComplete(event)
{
	// only process valid types
	soort = document.indexform.zoekmet.value;
	if ( !inputVar[soort] ) return;

  if (typeof event == "undefined")
  {
    event = window.event;
  }

	var keydown;
	if( typeof( event.keyCode ) == 'number'  ) {
    keydown = event.keyCode;
  } else if( typeof( event.charCode ) == 'number'  ) {
    keydown = event.charCode;
  }

  switch(keydown)
  {
    case 9:     // tab
    	stopDefaultAction(event);
			closeDropdown();
      break;
    case 13:    // enter
    case 16:    // shift
    case 17:    // ctrl
    case 18:    // alt
    case 20:    // caps lock
    case 27:    // esc
    	stopDefaultAction(event);
			closeDropdown();
      break;
    case 33:    // page up
    case 34:    // page down
    case 35:    // end
    case 36:    // home
    case 37:    // left arrow
    case 39:    // right arrow
      break;

    case 38:    // up arrow

      var target = getEventTarget(event);
      var autoCompleteDropdown = document.getElementById("autoCompleteDropdown");

      if (autoCompleteDropdown != null)
      {
        var childLis = autoCompleteDropdown.childNodes;
        var selected = false;

        for (var i = 0; i < childLis.length; i++)
        {
          if (childLis[i].className == "hover")
          {
            selected = true;

            if (i > 0)
            {
              childLis[i].className = "";
              childLis[i - 1].className = "hover";

              target.value = childLis[i - 1].firstChild.nodeValue;
              if (typeof(customInsert) == 'function') customInsert('set',childLis[i - 1]);
            }

            break;
          }
        }

        if (!selected)
        {
          childLis[0].className = "hover";

          target.value = childLis[0].firstChild.nodeValue;
          if (typeof(customInsert) == 'function') customInsert('set',childLis[0]);
        }
      }

      stopDefaultAction(event);

      break;

    case 40:    // down arrow
      var target = getEventTarget(event);
      var autoCompleteDropdown = document.getElementById("autoCompleteDropdown");

      if (autoCompleteDropdown != null)
      {
        var childLis = autoCompleteDropdown.childNodes;
        var selected = false;

        for (var i = 0; i < childLis.length; i++)
        {
          if (childLis[i].className == "hover")
          {
            selected = true;

            if (i < childLis.length - 1)
            {
              childLis[i].className = "";
              childLis[i + 1].className = "hover";

              target.value = childLis[i + 1].firstChild.nodeValue;
              if (typeof(customInsert) == 'function') customInsert('set',childLis[i + 1]);
            }

            break;
          }
        }

        if (!selected)
        {
          childLis[0].className = "hover";
          target.value = childLis[0].firstChild.nodeValue;
          if (typeof(customInsert) == 'function') customInsert('set',childLis[0]);
        }
      }

      stopDefaultAction(event);

      break;

    case 8:     // backspace
    case 46:    // delete

      if (typeof autoCompleteTimer != "undefined")
      {
        clearTimeout(autoCompleteTimer);
      }

			if ( document.getElementById(targetElem).value ){
				firstChar = document.getElementById(targetElem).value.substring(0,1).toLowerCase();
				if (!checkGetList(firstChar)) return;
      } else {
      	firstChar = 'xx';
      	if (!checkGetList(firstChar)) return;
      }

			if ( !charfilter.test(firstChar) ){
				closeDropdown();
				return;
			}
      autoCompleteTimer = setTimeout("generateDropdown(false)", autoCompleteTime);

      break;

    default:

      if (typeof autoCompleteTimer != "undefined")
      {
        clearTimeout(autoCompleteTimer);
      }

      var target = getEventTarget(event);
      var inputRanges = "false";

      if (typeof target.createTextRange != "undefined" || typeof target.setSelectionRange != "undefined")
      {
        inputRanges = "true";
      }

      if ( checkFullSelection(document.getElementById(targetElem)) && document.getElementById(targetElem).value ){

				firstChar = document.getElementById(targetElem).value.substring(0,1).toLowerCase();
				//debug('hasvalue = ' + document.getElementById(targetElem).value+' lastvalue = '+lastvalue+' firtchar='+firstChar);
				lastvalue = document.getElementById(targetElem).value;
				if (!checkGetList(firstChar)) return;
      } else {

      	firstChar = String.fromCharCode(keydown).toLowerCase();
				if (!checkGetList(firstChar)) return;
      }

			if ( !charfilter.test(firstChar) ){
				closeDropdown();
				return;
			}
      autoCompleteTimer = setTimeout("generateDropdown(" + inputRanges + ")", autoCompleteTime);
  }

  return true;
}

function generateDropdown(doAutoComplete)
{
  closeDropdown();

  var input = document.getElementById(targetElem);

	var sizes = getPosition(input);
	var maxh = getViewportSize()[1]-sizes[1]-10-input.offsetHeight;

	tipTop    = sizes[1];
	tipLeft   = sizes[0];

  var newUl = document.createElement("ul");
  newUl.setAttribute("id", "autoCompleteDropdown");
  newUl.autoCompleteInput = input;
  //newUl.style.display = "inline"

	//debug('charref '+inputVar[soort][firstChar] +'  firstcher = '+firstChar);

	var charref = typeof inputVar[soort][firstChar] == 'undefined' ? false : inputVar[soort][firstChar];

	if ( !charref ){
		if ( inputVar[soort].waitloop[firstChar] > maxWaitCycle ){
			return;
		} else {
			var newLi = document.createElement("li");
    	newLi.appendChild(document.createTextNode('Loading... '+inputVar[soort].waitloop[firstChar]));
    	newUl.appendChild(newLi);
			inputVar[soort].waitloop[firstChar]++;

			autoCompleteTimer = setTimeout("generateDropdown(" + doAutoComplete + ")", autoCompleteTime);
			doAutoComplete = 0;
		}

	} else {

		if ( !charref.length || !charref[0].length ) return;

		var olfirst = '';
		var lastchar = charref[charref.length-1][0].substr(0,1).toLowerCase();

		var addchar;
		var subtel = 0;
		var lihight = 30;
		var litel = 0;

	  for (var i = 0; i < charref.length; i++)
	  {
			if (olfirst != charref[i][0].substr(0,1).toLowerCase()){
				olfirst = charref[i][0].substr(0,1).toLowerCase();

				if ((olfirst != lastchar || totallist) && typeof inputVar[soort][olfirst] == 'undefined'){
					addchar = 1;
					inputVar[soort][olfirst] = [];
					subtel = 0;
				} else {
					addchar = 0;
				}
			}

			if ( addchar ){
				 inputVar[soort][olfirst][subtel]=charref[i];
				 subtel++
			}
	    if (charref[i][0].toLowerCase().indexOf(input.value.toLowerCase()) == 0)
	    {
	      var newLi = document.createElement("li");
	      newLi.dbWordId = charref[i][1];

	      newLi.appendChild(document.createTextNode(charref[i][0]));

	      if (browserDetected != "ie5mac")
	      {
	        attachEventListener(newLi, "mouseover", mouseoverDropdown, false);
	        attachEventListener(newLi, "mouseout", mouseoutDropdown, false);
	        attachEventListener(newLi, "mousedown", mousedownDropdown, false);
	      }

	      newUl.appendChild(newLi);
	      litel++;
	    }
	  }
	}

  if (newUl.firstChild != null)
  {
  	var tip = document.createElement("div");
		tip.className = "tooltip";
		tip.setAttribute("id", "autoCompleteDiv");
	  tip.style.position = "absolute";
	  tip.style.left = sizes[0] + 1+"px";
	  tip.style.top = sizes[1] + input.offsetHeight - 2 + "px";
	  tip.style.width = input.offsetWidth + "px";
	  tip.style.height = litel * lihight < maxh ? litel * lihight + "px" : maxh + "px";

  	intip = document.createElement("div");
  	intip.className = "tooltipin";
  	intip.appendChild(newUl);
  	tip.appendChild(intip);
  	//ie hack

     document.getElementsByTagName("body")[0].appendChild(tip);

		//debug (newUl.offsetHeight);

    tipBottom = tipTop+newUl.offsetHeight + input.offsetHeight;
    tipRight  = tipLeft + input.offsetWidth;

		if ( document.all)
		{
			var ifnode = document.createElement("iframe");
			ifnode.setAttribute("id", "autoCompleteFrame");
			ifnode.style.position = "absolute";
			ifnode.setAttribute("frameBorder", "0");
			ifnode.setAttribute("scrolling", "0");
			ifnode.src = "javascript:false;";
			ifnode.style.zindex = 4;
			ifnode.style.top = sizes[1] + input.offsetHeight - 2 + "px";
			ifnode.style.left = sizes[0] +1+ "px";
			ifnode.style.width = input.offsetWidth-10 + "px";
			ifnode.style.height = intip.offsetHeight-3 > maxh ? maxh + "px" : intip.offsetHeight-3 + "px";
			document.getElementsByTagName("body")[0].appendChild(ifnode);
		}

    attachEventListener(document, "mouseup", mouseupDiv, false);

	} else {
		// clear custom value
		if (typeof(customInsert) == 'function') customInsert('clear');

	}

  if (typeof doAutoComplete != "undefined" && doAutoComplete)
  {
    autoComplete();
  }

  return true;
}

function autoComplete()
{
  var input = document.getElementById(targetElem);

  var cursorMidway = false;

  if (typeof document.selection != "undefined")
  {
    var range = document.selection.createRange();

    if (range.move("character", 1) != 0)
    {
      cursorMidway = true;
    }

  }
  else if (typeof input.selectionStart != "undefined" && input.selectionStart < input.value.length)
  {
    cursorMidway = true;
  }

  var originalValue = input.value;
  var autoCompleteDropdown = document.getElementById("autoCompleteDropdown");

  if (autoCompleteDropdown != null && !cursorMidway)
  {
    autoCompleteDropdown.firstChild.className = "hover";
    input.value = autoCompleteDropdown.firstChild.firstChild.nodeValue;
    if (typeof(customInsert) == 'function') customInsert('set',autoCompleteDropdown.firstChild);

    if (typeof input.createTextRange != "undefined")
    {
      var range = input.createTextRange();
      range.moveStart("character", originalValue.length);
      range.select();
    }
    else if (typeof input.setSelectionRange != "undefined")
    {
      input.setSelectionRange(originalValue.length, input.value.length);
    }

    if (autoCompleteDropdown.childNodes.length == 1)
    {
      setTimeout("closeDropdown();", 10);
    }
  }

  return true;
}

function mouseoverDropdown(event)
{
  if (typeof event == "undefined")
  {
    event = window.event;
  }

  var target = getEventTarget(event);

	var target = getEventTarget(event);

  while (target.nodeName.toLowerCase() != "li")
  {
    target = target.parentNode;
  }

	target.className = "hover";
	return true;

}

function mouseoutDropdown(event)
{
  if (typeof event == "undefined")
  {
    event = window.event;
  }

  var target = getEventTarget(event);

  while (target.nodeName.toLowerCase() != "li")
  {
    target = target.parentNode;
  }

  target.className = "";

  return true;
}

function mousedownDropdown(event)
{
  if (typeof event == "undefined")
  {
    event = window.event;
  }

  var target = getEventTarget(event);

  while (target.nodeName.toLowerCase() != "li")
  {
    target = target.parentNode;
  }

  target.parentNode.autoCompleteInput.value = target.firstChild.nodeValue;
  if (typeof(customInsert) == 'function') customInsert('set',target);

  closeDropdown();

  return true;
}

function mouseupDiv(event){
	var sizes = getCursorPos(event);
	if (sizes[0] < tipLeft || sizes[0] > tipRight+5 || sizes[0] > tipBottom || sizes[1] < tipTop ) blurAutoComplete(event);

}


function blurAutoComplete(event)
{
  if (typeof autoCompleteTimer != "undefined")
  {
    clearTimeout(autoCompleteTimer);
  }

  closeDropdown();

  return true;
}

function closeDropdown()
{

	var autoCompleteDiv = document.getElementById("autoCompleteDiv");
	tipWidth = tipTop = tipHeight = 0;

  if (autoCompleteDiv != null)
  {
   	autoCompleteDiv.parentNode.removeChild(autoCompleteDiv);
 		if ( document.all ){
 			var autoCompleteFrame = document.getElementById("autoCompleteFrame");
 			if (autoCompleteFrame != null) {
 				autoCompleteFrame.parentNode.removeChild(autoCompleteFrame);
 			}
 		}

  }

  return true;
}

function addLoadListener(fn)
{
  if (typeof window.addEventListener != 'undefined')
  {
    window.addEventListener('load', fn, false);
  }
  else if (typeof document.addEventListener != 'undefined')
  {
    document.addEventListener('load', fn, false);
  }
  else if (typeof window.attachEvent != 'undefined')
  {
    window.attachEvent('onload', fn);
  }
  else
  {
    var oldfn = window.onload;
    if (typeof window.onload != 'function')
    {
      window.onload = fn;
    }
    else
    {
      window.onload = function()
      {
        oldfn();
        fn();
      };
    }
  }
}

function attachEventListener(target, eventType, functionRef, capture)
{
  if (typeof target.addEventListener != "undefined")
  {
    target.addEventListener(eventType, functionRef, capture);
  }
  else if (typeof target.attachEvent != "undefined")
  {
    target.attachEvent("on" + eventType, functionRef);
  }
  else
  {
    eventType = "on" + eventType;

    if (typeof target[eventType] == "function")
    {
      var oldListener = target[eventType];

      target[eventType] = function()
      {
        oldListener();

        return functionRef();
      }
    }
    else
    {
      target[eventType] = functionRef;
    }
  }

  return true;
}

function getEventTarget(event)
{
  var targetElement = null;

  if (typeof event.target != "undefined")
  {
    targetElement = event.target;
  }
  else
  {
    targetElement = event.srcElement;
  }

  while (targetElement.nodeType == 3 && targetElement.parentNode != null)
  {
    targetElement = targetElement.parentNode;
  }

  return targetElement;
}

function getPosition(theElement)
{
  var positionX = 0;
  var positionY = 0;

  while (theElement != null)
  {
    positionX += theElement.offsetLeft;
    positionY += theElement.offsetTop;
    theElement = theElement.offsetParent;
  }

  return [positionX, positionY];
}

function identifyBrowser()
{
  var agent = navigator.userAgent.toLowerCase();

  if (typeof navigator.vendor != "undefined" && navigator.vendor == "KDE" && typeof window.sidebar != "undefined")
  {
    return "kde";
  }
  else if (typeof window.opera != "undefined")
  {
    var version = parseFloat(agent.replace(/.*opera[\/ ]([^ $]+).*/, "$1"));

    if (version >= 7)
    {
      return "opera7";
    }
    else if (version >= 5)
    {
      return "opera5";
    }

    return false;
  }
  else if (typeof document.all != "undefined")
  {
    if (typeof document.getElementById != "undefined")
    {
      var browser = agent.replace(/.*ms(ie[\/ ][^ $]+).*/, "$1").replace(/ /, "");

      if (typeof document.uniqueID != "undefined")
      {
        if (browser.indexOf("5.5") != -1)
        {
          return browser.replace(/(.*5\.5).*/, "$1");
        }
        else
        {
          return browser.replace(/(.*)\..*/, "$1");
        }
      }
      else
      {
        return "ie5mac";
      }
    }

    return false;
  }
  else if (typeof document.getElementById != "undefined")
  {
    if (navigator.vendor.indexOf("Apple Computer, Inc.") != -1)
    {
      if (typeof window.XMLHttpRequest != "undefined")
      {
        return "safari1.2";
      }

      return "safari1";
    }
    else if (agent.indexOf("gecko") != -1)
    {
      return "mozilla";
    }
  }

  return false;
}

function getViewportSize(){
  var size = [0,0];

  if (typeof window.innerWidth != 'undefined'){
    size = [
        window.innerWidth,
        window.innerHeight
    ];
  } else if (typeof document.documentElement != 'undefined'
      && typeof document.documentElement.clientWidth != 'undefined'
      && document.documentElement.clientWidth != 0){
    size = [
        document.documentElement.clientWidth,
        document.documentElement.clientHeight
    ];
  } else {
    size = [
        document.getElementsByTagName('body')[0].clientWidth,
        document.getElementsByTagName('body')[0].clientHeight
    ];
  }

  return size;
}


function debug(content){

	if ( debugh = document.getElementById('debug1') ){
		debugh.innerHTML = content
	} else {

		var debugdiv = document.createElement("div");
	  debugdiv.id = "debug1";
	  debugdiv.className = "debug";
	  debugdiv.appendChild(document.createTextNode(content));
		document.getElementsByTagName("body")[0].appendChild(debugdiv);
	}

}

function stopDefaultAction(event)
{
 event.returnValue = false;

 if (typeof event.preventDefault != "undefined")
 {
   event.preventDefault();
 }
}

function getCursorPos(event){

	if (typeof event == "undefined") {
    event = window.event;
  }

	var scrollingPosition = getScrollingPosition();

	var cx; var cy;
	if (typeof event.pageX != "undefined" && typeof event.x != "undefined") {
    cx = event.pageX;
    cy = event.pageY;
  } else {
    cx = event.clientX + scrollingPosition[0];
    cy = event.clientY + scrollingPosition[1];
  }

	return [cx,cy];

}

function getScrollingPosition(){
  //array for X and Y scroll position
  var position = [0, 0];

  //if the window.pageYOffset property is supported
  if(typeof window.pageYOffset != 'undefined'){
    //store position values
    position = [
        window.pageXOffset,
        window.pageYOffset
    ];
  }

  //if the documentElement.scrollTop property is supported
  //and the value is greater than zero
  if(typeof document.documentElement.scrollTop != 'undefined'
    && document.documentElement.scrollTop > 0){
    //store position values
    position = [
        document.documentElement.scrollLeft,
        document.documentElement.scrollTop
    ];
  }

  //if the body.scrollTop property is supported
  else if(typeof document.body.scrollTop != 'undefined'){
    //store position values
    position = [
        document.body.scrollLeft,
        document.body.scrollTop
    ];
  }

  //return the array
  return position;
}

function checkGetList (firstchar){


	if ( typeof inputVar[soort][firstChar] == 'undefined'){
		if ( !inputVar[soort].waitloop ) inputVar[soort].waitloop=[];
		if ( !inputVar[soort].waitloop[firstChar] ){

			inputVar[soort].waitloop[firstChar]=1;

			getList(firstChar);
			//alert ('getting '+firstChar+ '  '+inputVar[soort][firstChar]);
			//debug('getting = '+firstChar);
			return true;
		} else if (inputVar[soort].waitloop[firstChar] < maxWaitCycle){
			return true;
		} else {
			closeDropdown;

			return false;
		}
	} else {
		return true
	}
}

// check if complete value is selected
function checkFullSelection (input){

	if (typeof document.selection != "undefined")
  {

    var range = document.selection.createRange();

    if (range.move("character", -1) == 0)
    {

      return false;
    }

  }
  else if (typeof input.selectionStart != "undefined" && input.selectionStart == 0)
  {

    return false;
  }

  return true;
}

function createIframeLayer(menu)
{

  var layer = document.createElement('iframe');
  layer.tabIndex = '-1';
  layer.src = 'javascript:false;';
  menu.parentNode.appendChild(layer);

  layer.style.left = menu.offsetLeft + 'px';
  layer.style.top = menu.offsetTop + 'px';
  layer.style.width = menu.offsetWidth + 'px';
  layer.style.height = menu.offsetHeight + 'px';

}