<h3>Terms</h3>
<form action="" method="get">
  <label for="field">Choose a field: 
    <select id="field" name="field" onchange="location.href='/term/show/' + this.value;">
      <option value="">--</option>
      <% @reader.field_infos.each do |fi| next unless fi.indexed? %>
      <option value="<%=fi.name%>" <%= 'selected="selected"' if @field == fi.name %>><%=fi.name%></option>
      <% end %>
    </select>
  </label>
</form>
<hr/>
<% if @terms %>
<div style="float:left; padding-right:30px;">
  <h4>Field: <%= @field %></h4>
  <form action="" onsubmit="return findTerm(document.getElementById('choose-term').value);">
    <input id="choose-term" type="text"/></form>
  <hr/>
  <div id="terms">
  </div>
  <hr/>
  <form action="">
    <input type="submit" value="Previous" onclick="return prevTerm();"/>
    <input type="submit" value="Next" onclick="return nextTerm();"/><br/>
  </form>
</div>
<div style="float:left; padding-right:30px;">
  <h4>Documents
  <input name="show-documents" type="checkbox" id="show-documents" onchange="displayDoc();"/></h4>
  <div id="doc-display">
    <form action="" onsubmit="return findDoc(document.getElementById('choose-doc').value);">
      <input id="choose-doc" type="text"/></form>
    <hr/>
    <div id="documents">
    </div>
    <hr/>
    <form action="">
      <input type="submit" value="Previous" onclick="return prevDoc();"/>
      <input type="submit" value="Next" onclick="return nextDoc();"/><br/>
    </form>
  </div>
</div>
<script type="text/javascript"><!--
  function createSideHeaderedTable(content) {
    var table = document.createElement("table");
    table.setAttribute('cellpadding', "0");
    table.setAttribute('cellspacing', "0");
    table.className = "left-headed";
    for (var i = 0; i < content.length; i++) {
      var tr = document.createElement("tr");
      var th = document.createElement("th");
      th.appendChild(document.createTextNode(content[i][0]));
      tr.appendChild(th);
      var td = document.createElement("td");
      var c = content[i][1];
      td.appendChild(c instanceof Object ? c : document.createTextNode(c));
      tr.appendChild(td);
      table.appendChild(tr);
    }
    return table;
  }

  var terms = <%= @terms %>;
  var numTerms = terms.length;
  var termI = 0;
  var termDiv = document.getElementById("terms");
  var termChooserTxt = document.getElementById('choose-term');

  var docs = null;
  var numDocs = 0;
  var docI = 0;
  var docDiv = document.getElementById("documents");
  var showDocs = document.getElementById("show-documents");
  var docChooserTxt = document.getElementById('choose-doc');
  var docDisplayDiv = document.getElementById('doc-display');

  function getDocs() {
    var req = new XMLHttpRequest();
    req.open('GET', '/term/termdocs/<%=@field%>/' + terms[termI][0], true);
    req.onreadystatechange = function() {
      if (req.readyState == 4) {
        docs = eval(req.responseText);
        numDocs = docs.length;
        docI = 0;
        displayDoc();
      }
    };
    req.send(/*no params*/null);
    return false;
  }
  function displayDoc() {
    if (showDocs.checked) {
      docDisplayDiv.style.display = 'block';
      if (docs == null) {
        getDocs();
      } else {
        docChooserTxt.value = docs[docI][0];
        var docLink = document.createElement('a');
        docLink.setAttribute('href', "/document/show/" + docs[docI][0]);
        docLink.appendChild(document.createTextNode(docs[docI][0]));
        var table = createSideHeaderedTable([
          ['index', '' + (docI + 1) + ' of ' + numDocs],
          ['document', docLink],
          ['number of occurrences', docs[docI][1]],
          ['positions', docs[docI][2].join(',')]
        ]);
        if (docDiv.firstChild) docDiv.replaceChild(table, docDiv.firstChild);
        else docDiv.appendChild(table);
      }
    } else {
      docDiv.innerHTML = '';
      docDisplayDiv.style.display = 'none';
    }
    return false;
  }
  function nextDoc() {
    if (docI < numDocs - 1) {
      docI++;
      displayDoc();
    } else alert('No more docs. Already at the end.');
    return false;
  }
  function prevDoc() {
    if (docI > 0) {
      docI -= 1;
      displayDoc();
    } else alert('No more docs. Already at the start.');
    return false;
  }
  function findDoc(doc) {
    if (docs && docs.length > 0) {
      docI = bsearch(docs, doc, function(a, b) {return a[0] < b});
      if (docI >= docs.length) docI -= 1;
      displayDoc();
    }
    return false;
  }
  function displayTerm() {
    docs = null;
    termChooserTxt.value = terms[termI][0];
    var table = createSideHeaderedTable([
      ['index', '' + (termI + 1) + ' of ' + numTerms],
      ['term', terms[termI][0]],
      ['number of documents', terms[termI][1]],
    ]);
    termDiv.replaceChild(table, termDiv.firstChild);
    displayDoc();
  }
  function nextTerm() {
    if (termI < numTerms - 1) {
      termI++;
      displayTerm();
    } else alert('No more terms. Already at the end.');
    return false;
  }
  function prevTerm() {
    if (termI > 0) {
      termI -= 1;
      displayTerm();
    } else alert('No more terms. Already at the start.');
    return false;
  }
  function findTerm(term) {
    if (terms && terms.length > 0) {
      termI = bsearch(terms, term, function(a, b) {return a[0] < b});
      var match = (terms[termI]||[])[0];
      if (term != match) {
        alert('Term <%=@field%>:' + term + ' not found in index');
      } else {
        displayTerm();
      }
    }
    return false;
  }
  
  function TermSuggestionProvider() {
  }
  TermSuggestionProvider.prototype.requestSuggestions = function(oAutoSuggestControl, bTypeAhead) {
    var aSuggestions = new Array();
    var sTextboxValue = oAutoSuggestControl.textbox.value;

    if (sTextboxValue.length > 0) {
      start = bsearch(terms, sTextboxValue, function(a, b) {return a[0] < b});
      for (var i = start; i < terms.length
          && terms[i][0].indexOf(sTextboxValue) == 0
          && aSuggestions.length < 10; i++) {
        aSuggestions.push(terms[i][0]);
      }
      oAutoSuggestControl.autosuggest(aSuggestions, bTypeAhead);
    }
  };
  window.onload = function() {
    var oTermTextbox = new AutoSuggestControl(termChooserTxt, new TermSuggestionProvider());
  }
  displayTerm();
  //-->
</script>
<% end %>
<hr/>
