/* On crée deux objets globaux qui vont servir à stocker l'objet
 * XMLHttpRequest et la minuterie ; utile parce que l'usage de ces objets
 * n'est pas limité à une fonction */
request=new XMLHttpRequest();
timer=null;

/* Cette fonction remplace la valeur du champ texte "film" par son
 * argument, et ferme la liste des complétions */
function select(text) {
  document.getElementById("film").value=text;
  closeCompletions();
}

/* Cette fonction ferme la liste des complétions, affiche le bouton de
 * recherche et rend le focus au champ texte "film" */
function closeCompletions() {
  document.getElementById("completions").style.display="none";
  document.getElementById("search").style.display="inline";
  document.getElementById("film").focus();
}

/* Cette fonction ouvre la liste des complétions */
function openCompletions() {
  document.getElementById("completions").style.display="block";
}

/* Requête AJAX : on émet une requête au script "lookup_title.php" du
 * serveur avec comme paramètre la valeur courante du champ texte "film".
 * Une fois la réponse reçue, on affiche la liste des complétions
 * correspondante. */
function lookup() {
  film=document.getElementById("film").value;
  request.open("GET", "lookup_title.php?title="+encodeURIComponent(film));
  /* Noter l'usage de encodeURIComponent pour bien coder les caractères
   * tels que les espaces, "%" ou "?" dans l'URL ; elle est à utiliser
   * systématiquement quand on construit une URL avec du contenu fourni
   * par l'utilisateur. */

  /* On définit le comportement à adopter quand on reçoit les résultats
   * de la requête AJAX */
  request.onreadystatechange = function() {
    /* On teste que la notification a lieu parce que la requête est
     * terminée (readyState==4) et s'est bien passée (200) ; sinon, on
     * pourrait afficher un message d'erreur */
    if (request.readyState == 4 && request.status == 200) {
      /* On commence par vider la liste des complétions */
      ul=document.getElementById("completions");
      while(ul.childNodes.length>0)
        ul.removeChild(ul.childNodes[0]);

      /* Et on la remplit à partir des résultats de la requête */
      openCompletions();
      results=request.responseXML.documentElement;
      /* On récupère les résultats XML : un élément <results> contenant
       * plusieurs éléments <result> contenant chacun un nœud texte */
      for(i=0;i<results.childNodes.length;++i) {
        result=results.childNodes[i];

        /* On ne s'intéresse qu'aux éléments (<result>) pas aux nœuds
         * texte contenant uniquement des espaces ; Node.ELEMENT_NODE
         * n'est malheureusement pas compris par IE */
        if(result.nodeType==1/*Node.ELEMENT_NODE*/) {
          /* On crée un nouvel élément de liste contenant le texte
           * en-dessous de <result> dans le DOM XML, et on l'ajoute à la
           * liste */
          li=document.createElement("li");
          li.setAttribute("onclick","select(this.childNodes[0].nodeValue)");
          li.appendChild(document.createTextNode(result.childNodes[0].nodeValue));
          ul.appendChild(li);
        }
      }
    }
  };

  /* On envoie la requête AJAX */
  request.send(null);
}

/* Cette fonction est appelée à chaque fois qu'on appuie sur une touche
 * du clavier : une minuterie de 200ms est lancée au bout desquels la
 * requête AJAX est effectuée. Ceci évite le bousculement de multiples
 * requêtes successives. */
function keypressed() {
  /* On cache le bouton de recherche, on ne veut pas pouvoir cliquer
   * dessus si on ne vient pas de sélectionner un élément dans la liste */
  document.getElementById("search").style.display="none";

  /* S'il y a déjà une minuterie en cours, il faut l'interrompre pour en
   * installer une nouvelle */
  if(timer) {
    window.clearTimeout(timer);
  }

  /* On installe la minuterie */
  timer=window.setTimeout("lookup()",200);
}