var searchFieldId = 'q';     // Id des Input-Element der Standard-Suche
var detailUrl = '/details.htm?$product=myid'; // URL zur Detailansicht. myid wird dynamisch ersetzt durch die ausgewählte ID
var align = "left"; // left|right - Ausrichtung der Box am Input-Element
var x_offset = 0; // Abstand zum Input-Field
var y_offset = 2; // Abstand zum Input-Field
var transparent=true; // wenn suchbox halb-transparent, dann in dynSearch.css in #ds_body die Hintergrundfarbe heraus nehmen
var waitToSendAJAX = 400; //in milliseconds


// *************** Ab hier den Code unverändert belassen ***************************************

var inputfield;
var boxDiv;
var variableItemId;
var counter = -1;
var oldquery;
var length = 0;
var timeoutId

function initDynSearch(viid){
  variableItemId=viid;
  inputfield = jQuery("#"+ searchFieldId);
  jQuery("#"+ searchFieldId).keyup(function (evt){
	    if (!evt) { evt = window.event; }
	    query = jQuery("#" + searchFieldId).attr('value');
	    if(query.length==0){
	    	jQuery("#" + boxDiv.id).hide('fast');
	      }
	      var keyCode = getTaste(evt);
	      if(keyCode == 38){//hoch
	         counter--;
	          if(counter < -1) counter = -1;
	          activate("result_"+counter);
	      } else if(keyCode == 40){ //runter
	         counter++;
	         if(counter >= length)counter=length-1;
	         activate("result_"+counter);
	      } else if(keyCode == 13){  //Return
	          if(counter > -1){
	            goTo("result_"+counter);
	          }
	      } else {
	      counter=-1;
	  }

	  if(oldquery != query){
	      oldquery=query;
		  if (timeoutId!=null){
		  	window.clearTimeout(timeoutId);
		  }
		  timeoutId = window.setTimeout(function(){
		      sendXmlHttp('$'+variableItemId+'.ajaxContent','chgdiv:boxDiv','q='+query);
		  }, waitToSendAJAX);
	  }
	});

  boxDiv = document.createElement("div");
  boxDiv.id = "boxDiv";
  boxDiv.style.display = "none";
  boxDiv.style.position = "absolute";
  //if(transparent) boxDiv.style.backgroundImage = "url(/js/dynSearchBackround.png)"
  document.getElementsByTagName("body")[0].appendChild(boxDiv);
  document.getElementsByTagName("body")[0].onclick=hideBox;
  // jQuery("body").click(function(){ hideBox; });
}

function testlog(para1, para2, para3) {
	console.log(para1);
	console.log(para2);
	console.log(para3);
}
/**
 * positioniert die Box
 */
function setPossition(){
	var bLeft;
	var poss = inputfield.offset();
	if(align == "left"){
		bLeft = (poss.left+x_offset)+"px";
	} else {
		bLeft = (poss.left + inputfield.width() - jQuery("#" + boxDiv.id).width() + x_offset)+"px";
	}
	var bTop = (poss.top + inputfield.height() + y_offset)+"px";
	jQuery("#" + boxDiv.id).css("left", bLeft);
	jQuery("#" + boxDiv.id).css("top", bTop);
}

/**
 * Cross-Browser keyCode-Ermittlung
 */
function getTaste (evt) {
  if (!evt) evt = window.event;
  if (evt.which) {
    Tastencode = evt.which;
  } else if (evt.keyCode) {
    Tastencode = evt.keyCode;
  }
  return Tastencode;
}

function hideBox(){
    jQuery("#" + boxDiv.id).hide('fast');
}

/**
 * wird vom ajax-framework aufgerufen, nach Aktualisierung der Box
 */
function afterupdate_boxDiv(){
    if(boxDiv.innerHTML=="_no_session"){
        document.location.reload();
        return;
    }
    length=0;
    jQuery(".ds_item_active").removeClass("ds_item_active");
    for(i=0;i<30;i++){
        lineDiv = jQuery("#result_" + i);
        if(lineDiv){
        	jQuery("#result_" + i).addClass("ds_item");

            // Mouseover in einer zeile
            lineDiv.mouseover(function mover(evt){
                if (!evt) evt = window.event;
                lineid=getLineId(evt);
                activate(lineid);
                counter = 0 + lineid.substr(7);
            });

            //Klick auf ein Ergebnis
            lineDiv.click(function click(evt){
                if (!evt) evt = window.event;
                goTo(getLineId(evt));
            });
            length++;
        }  else {
            break;
        }
    }
    setPossition();
    jQuery("#" + boxDiv.id).show('fast');
}

/**
 * Beim Klicken wird eine URL angesprungen deren Parameter sich aus
 * dem Attribut itemid="" der Zeile ergibt
 */
function goTo(lineid){
	var prefix		= "";
	var template	= jQuery("input[name|=site]", jQuery("#" + lineid)).val();
	var para		= jQuery("input[name|=para]", jQuery("#" + lineid)).val();
	var variable	= jQuery("input[name|=vari]", jQuery("#" + lineid)).val();
	var itemId		= jQuery("#" + lineid).attr('itemid');
	if (urlVari1 != null && urlVari1 != "") {
		prefix = prefix + "/" + urlVari1;
	}
	if (urlVari2 != null && urlVari2 != "") {
		prefix = prefix + "/" + urlVari2;
	}
	if (para == null){ para = ""; }
	if (template != null) {
		template = prefix + "/" + template + "?$" + variable + "=" + itemId + para;
	}
	else {
		template = prefix + detailUrl.replace(/myid/, itemId) + para;
	}
    document.location.href = template;
}


/**
 * welches item (Zeile) hat den Event ausgeloest?
 */
function getLineId(evt){
    if (!evt){ evt = window.event; }
    node = jQuery(evt.target)
	while (!node.attr("itemid")){
		node = node.parent() ;
	}
    return node.attr("id");
}

/**
 * Aktiviert eine Zeile indem der Klassenname von
 *	ds_item auf ds_item_active gesetzt wird
 *	Wechselt die Klassen nur wenn notwendig, um Flackern zu vermeiden
 *
 * @param lineid  in der Form: "result_" + Nr
 * @return
 */
function activate(lineid){
	jQuery(".ds_item_active").removeClass("ds_item_active");	// Alle Elemente die ds_item_active haben...
    for(i=0; i < length; i++){
        if(jQuery("#result_" + i)){
        	if( ! jQuery("#result_" + i).hasClass("ds_item")){
        		jQuery("#result_" + i).addClass("ds_item");
        	}
        }  else {
            break;
        }
    }
    if(lineid=="result_-1"){
    	return;
    }

    if(jQuery("#" + lineid).hasClass("ds_item")){
    	jQuery("#" + lineid).removeClass("ds_item");
    }
    if( ! jQuery("#" + lineid).hasClass("ds_item_active")){
    	jQuery("#" + lineid).addClass("ds_item_active");
    }

}

/**
 * normales Suchergebnis anzeigen.
 */
function bigResult(){
     inputfield.form.submit();
}