var submitTimer;

window.onload = function() {
  $("word").onkeyup = function() {
    clearTimeout(submitTimer); // Clears any previously-scheduled submission
    submitTimer = setTimeout(submitWord, 1000);
  }
}

function submitWord() {

  // Show progress indicator and clear existing results
  $("progress").className = "waiting";
  $("results").innerHTML = "";

  var xhr = createXMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState==4) { // Request is finished
      if (xhr.status==200) {
        var anagramsCSV = xhr.responseText;
        updateAnagramsDisplay(anagramsCSV);
      } else {
        alert("An error occurred.");
      }
    }
  }
  var word = $("word").value;
  xhr.open("GET", "anagrams.phtml?word="+word, true);
  xhr.send(null);
}

function updateAnagramsDisplay(anagramsCSV) {
  $("progress").className = "notWaiting";
  fade();
  var anagrams = anagramsCSV.split(",");
  for (var i=0; i<anagrams.length; i++) {
    $("results").innerHTML += anagrams[i] + "<br/>";
  }
}

// -- Fading --------------------------------------------------

// Caller-friendly front-end to fadeLoop
function fade() {
  fadeLoop(0);
}

// Initially set to yellow - "rgb(100%, 100%, 0%)". Blue component is 
// stepped up 10% every 100 milliseconds until the target colour of white 
// - "rgb(100%, 100%, 100%)" - has been reached.
function fadeLoop(nextBluePercent) {
  $("results").style.backgroundColor = "rgb(100%, 100%, "+nextBluePercent+"%)";
  nextBluePercent += 10;
  if (nextBluePercent<=100) {
    setTimeout("fadeLoop("+nextBluePercent+")", 100/*ms*/);
  }
}

// -- Generic functions --------------------------------------------------

function createXMLHttpRequest() {
      try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {}
      try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {}
      try { return new XMLHttpRequest(); } catch(e) {}
      alert("XMLHttpRequest not supported");
      return null;
}

function $(id) {
  return document.getElementById(id);
}