﻿/**
* AutoCompleteSuche
*
* Erstellt: 10.10.2008, Daniel Schwarz, *1977 Bochum
*/
function AutoCompleteSuche(strInputId, strDivId, strAutoCompleteUrl) 
{
  // Variablen
  this._strDivId = strDivId;
  this._strInputId = strInputId;
  this._strAutoCompleteUrl = strAutoCompleteUrl;
  this._inputAutoComplete = null;
  this._divAutoComplete = null;
  this._blnXmlReqLaueft = false;
  this._strSuchPuffer = "";
  this._xmlReq = false;
  this._hndlTimeoutSuchergebnisVerstecken = null;
  this._iTimeoutSuchergebnisVerstecken = 500;
  this.obj = "AutoCompleteSuche_" + strInputId + "_" + strDivId;
  eval(this.obj + "=this");

  
  /**
  * Initialisiert die AutoCompleteSuche
  */
  this.Initialisieren = function() 
  {
  
    try { 
      // IE 6
      _xmlReq = new ActiveXObject("Msxml2.XMLHTTP"); }
    catch (e) 
    { 
      try { 
         // IE 7+
         _xmlReq = new ActiveXObject("Microsoft.XMLHTTP"); 
      } catch (e) { 
         try { 
            // ff ect.
            _xmlReq = new XMLHttpRequest(); 
         } catch (e) 
         { 
            _xmlReq = false; 
         }
      } 
    }  
  

    this._inputAutoComplete = document.getElementById(this._strInputId);
    this._inputAutoComplete.onkeyup = this._OnInput_KeyUp
    this._inputAutoComplete.onmouseover = this._OnInput_MouseOver;
    this._inputAutoComplete.onmouseout = this._OnInput_MouseOut;
    this._inputAutoComplete.rootObj = this;
    
    this._divAutoComplete = document.getElementById(this._strDivId);
    this._divAutoComplete.onmouseover = this._OnDivAutoComplete_MouseOver;
    this._divAutoComplete.onmousemove = this._OnDivAutoComplete_MouseMove;
    this._divAutoComplete.onmouseout = this._OnDivAutoComplete_MouseOut;
    this._divAutoComplete.rootObj = this;
    
    
    this._SuchergebnisVerstecken();
  }
  
  
  
  /**
  * Schreibt das Suchergebnis 
  * in das Html Element welches 
  * für die Suche vorgesehen ist (strDivId)
  *
  * @param {array} aryDaten Daten aus dem XmlRequest
  */
  this._SetAutoCompleteErgebnis = function(aryDaten) 
  {
    var strHtml = '<div style="">';
    for (var i=0; i < aryDaten.length; i++) 
    {
      strHtml += '<span class="Kategorie">' + aryDaten[i]['CategoryName'] + '</span>'
    
      for (var e=0; e < aryDaten[i]['Items'].length;e++) {
        var item = aryDaten[i]['Items'][e];
        strHtml += 
          '<a href="' + item['link'] + '" class="Link" onclick="document.location=\'' + item['link'] + '\'" >' +
          '<table cellpadding="0" cellspacing="2" border="0" width="100%">' +
          '<tr><td align="left">' + item['titel'] + '</td>' +
          '<td width="80" align="right" valign="top" class="Preis">' + item['preis'] + '</td></tr>' +
          '</table>' +
          '</a>';
      
      }
    }
    
    strHtml += '</div>';
    
    this._divAutoComplete.innerHTML = strHtml;
  }
  

  /**
  * Startet einen AutoComplete
  * Xml Request 
  *
  * @param {string} strSuche Such wort
  */
  this._StartAutoCompleteXmlRequest = function(strSuche) 
  {
     if (!this._blnXmlReqLaueft) {
        
      var fn = this._OnAutoComplete_XmlResponse;
      var obj = this;
    
      this._blnXmlReqLaueft = true;
      
      _xmlReq.open("GET",this._strAutoCompleteUrl + "&suche=" + strSuche,true);
      
      _xmlReq.onreadystatechange = function() 
      {
        if (_xmlReq.readyState == 4 && _xmlReq.status == 200) 
        {
          fn(_xmlReq.responseText, obj);
        }
      }
    
      _xmlReq.send(null);
    }
     
  }
  

  
  /**
  * Prueft den Such Puffer und
  * startet ggf. eine Suche wenn
  * kein XmlReq angefordert wird.
  */
  this._SuchPufferCheck = function() 
  {
    if (this._strSuchPuffer.length > 0) 
    {
      if (this._blnXmlReqLaueft) 
      {
        window.setTimeout(this.obj + "._SuchPufferCheck()",1);
      } else {

        if (this._strSuchPuffer.length > 2) 
        {
          this._StartAutoCompleteXmlRequest(this._strSuchPuffer);
        } 
        else 
        {
          this._SuchergebnisVerstecken();
        }
        
        this._strSuchPuffer = "";
        
      }
    }
  }
  

  /**
  * Zeigt das Suchergebnis an.
  */  
  this._SuchergebnisZeigen = function() 
  {
    this._divAutoComplete.style.visibility = "visible";
  }
  
  
  /**
  * Versteckt das Suchergebnis
  */
  this._SuchergebnisVerstecken = function() 
  {
    //this._divAutoComplete.innerHTML = "";
    this._divAutoComplete.style.visibility = "hidden";
  }


  /***********************************************************
  ** Ereignis Methoden
  ***********************************************************/
  
  /**
  * Ereignis Methode die ausgelößt wird,
  * wenn ein eine Xml Response vom Server
  * angekommen ist. 
  *
  * @param {string} strResponseText Response text aus Xml Request
  * @param {AutoCompleteSuche} obj eine Instanz dieser Klasse
  *
  */
  this._OnAutoComplete_XmlResponse = function(responseText,obj)
  {
    var aryDaten = Array()
    eval("aryDaten = " + responseText);
    if (aryDaten.length > 0) {
      obj._SetAutoCompleteErgebnis(aryDaten);
      obj._SuchergebnisZeigen();
    }
    obj._blnXmlReqLaueft = false;
  }
  
    
  /**
  * Ereignis Methode für
  * das KeyPress Ereignis bei dem
  * Input Element
  */
  this._OnInput_KeyUp = function(e) 
  {
    var obj = this.rootObj;
    if (!obj._blnXmlReqLaueft) 
    {
      if (obj._inputAutoComplete.value.length > 2) 
      {
        obj._StartAutoCompleteXmlRequest(obj._inputAutoComplete.value);      
      } else 
      {
        obj._SuchergebnisVerstecken();
      }
    } else 
    {
      obj._strSuchPuffer = obj._inputAutoComplete.value;
      window.setTimeout(obj.obj + "._SuchPufferCheck()",1);
    }
  }
  

  /**
  * Ereignis Methode für das
  * MouseOver Ereignis des
  * Eingabefeldes
  */  
  this._OnInput_MouseOver = function(e) 
  {
    var obj = this.rootObj;
  
    if (obj._hndlTimeoutSuchergebnisVerstecken) {
      window.clearTimeout(obj._hndlTimeoutSuchergebnisVerstecken);
    }
    
    if (obj._inputAutoComplete.value.length > 2) 
    {
      obj._StartAutoCompleteXmlRequest(obj._inputAutoComplete.value);      
    } else 
    {
      obj._SuchergebnisVerstecken();
    }
    
  }
  
  /**
  * Ereignis Methode für das
  * MouseOut Ereignis des
  * Eingabefeldes
  */  
  this._OnDivAutoComplete_MouseOut =
  this._OnInput_MouseOut = function(e) 
  {
    var obj = this.rootObj;
    
    obj._hndlTimeoutSuchergebnisVerstecken = 
      window.setTimeout(obj.obj + "._SuchergebnisVerstecken()",obj._iTimeoutSuchergebnisVerstecken)
  }


  /**
  * Ereignis Methode für das
  * MouseMove und MouseOver Ereignis 
  * der AutoComplete Anzeige
  */   
  this._OnDivAutoComplete_MouseMove =
  this._OnDivAutoComplete_MouseOver = function() 
  {
    var obj = this.rootObj;
  
    if (obj._hndlTimeoutSuchergebnisVerstecken) {
      window.clearTimeout(obj._hndlTimeoutSuchergebnisVerstecken);
    }
  }
  
}
