<html>
   <head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <title>ewuuu</title>
    <link rel="stylesheet" type="text/css" href="/static/style.css" />
    <script src="/static/jquery.js"></script>
    <script src="/static/handlebars.js"></script>
    <script src="/static/underscore.js"></script>
  </head>
<body>
 
<style>
  .book {
    border-bottom: 1px solid white;
  }
  .book:hover {
    cursor: pointer;
    border-bottom: 1px dotted grey;
  }
  .book.selected {
    background: #3A87E1;
    color: white;
  }
  .oldbook {
    border: 5px solid white;
  }

  .oldbook:hover {
    text-decoration: line-through;
    cursor: pointer;
    color: grey;
  }
::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

</style>

<script>
  var nbooks = {{books|length}}
  var lastClicked = null;
  var shifted = false;
  var curIdx = 1;


  var save = function(oldname, newname, cb) {
    if (newname == "") newname = oldname;
    $.post(
      "/set/", 
      { oldbook: oldname, newbook: newname },
      cb,
      "json"
    )
  };
  var rm = function(id, cb) {
    $.post( "/rm/", { id: id }, cb, "json")
  };


</script>



<div id="help" style="display: none; position: absolute; height: 90%; overflow-y: scroll; top: 0px; right: 0px; width: 500px; margin-left: auto; margin-right: auto; background: white; border: 2px solid #ddd; padding: 1em; z-index: 1;">
  <h2>Cleaning Booktitles</h2>
  <p>
  The main pane in the middle of the page lists all of the distinct booktitles in the corpus, along
  with the number of entries with that booktitle.
  </p>
  <p>
  The text input at the bottom of the page is where you can write the normalized booktitle for 
  the currently selected booktitle (blue background).  
  We try very hard to keep the text input focused.
  </p>
  <h3>Editing Details</h3>
  <p>
  <ul>
    <li>You can press up and down on the keyboard at anytime to move the selected booktitle. 
    <li>You can also click on an entry to select it. 
        We will return focus to the text input and select all of the text so you can start editing immediately.
    <li>Press enter to add a new mapping between the selected book title and the text in the input box.
        If the input box is empty, it means the selected book title is correct and we add an identity mapping
    <li>Adding a mapping removes the selected booktitle from the list and moves the selection to the next title.
    <li>After you add a new mapping, we select all of the the text in the input so you can change it quickly.
  </ul>

  </p>

  <h2>Listing Mappings</h2>
  <p>
  The left panel lists the mappings grouped by the normalized booktitle.
  The blue text is the normalized booktitle, and the red text are the originals.
  Click on red text to remove that mapping (if you made an error).
  </p>
  <p>
  New mappings are added to the top of the listings, that way you can immediately see what you just did
  </p>
</div>
<div id="helpbtn" style="position:absolute;  top: 0px; right: 0px; padding: 10px; z-index: 2; background: white;">
  <a href="#">click for help!</a>
</div>
<div style="position:absolute;  top: 2em; right: 0px; padding: 10px; z-index: 0;">
  <p><a href="/upload">Upload New Bibtex</a>
  <p><a href="/files/">List uploaded files</a>
  {% if fname %}
  <p><a href="/print/{{fname}}">Export bibtex</a>
  {% endif %}
</div>

<script>
  $("#helpbtn").click(function() { $("#help").toggle(); });
</script>


<div style="width:30%; min-width: 50px; float:left;">
  <div id="mappings" style="height: 100%; overflow-y:scroll">
    {% for gmap in gmapping %}
      <div id="gmap-{{loop.index}}" class="mapping">
        <div id="gmap-new-{{loop.index}}" class="newbook">{{gmap.newbook}}</div>
        {% for d in gmap.oldbooks %}
          <div id="gmap-old-{{d.id}}" class="oldbook">{{d.oldbook}}</div>

          <script>
            $("#gmap-old-{{d.id}}").click(function() {
              rm({{d.id}}, function() {
                $("#gmap-old-{{d.id}}").fadeOut();
              })
            });
          </script>

        {% endfor %}
      </div>
    {% endfor %}
  </div>

</div>
<div style="width:5%; float:left;">
</div>
<div style="width:65%; float:left;">
  <div id="books"  style="height: 80%; overflow-y: scroll;">

    <ul>
    {% for book in books %}
    <li id="entry-{{loop.index}}">
    <span style="width: 3em">{{book.count}}</span>
    <span class="book" data-idx={{loop.index}} id="oldname-{{loop.index}}">{{book.name}}</span>
    </li>
    {% endfor %}
    </ul>


  </div>
  <div style="height: 20%;">
    <p>
    <form id="cmdform">
      <input id="cmd"  autofocus style="position: absolute; bottom: 0px; font-size: 25pt; width: 600px; border: 1px solid gray;"/>
    </form>
    <p>
  </div>

</div>

</body>

</html>



{%raw%}
<script id="map-template" type="text/x-handlebars-template">
  <div  class="mapping">
    <div class="newbook">{{newbook}}</div>
    <div id="gmap-old-{{id}}" class="oldbook">{{oldbook}}</div>
  </div>
</script>
{%endraw%}




<script>
  var next_entry = function(step) {
    if ((step > 0 && curIdx <= nbooks-step) || 
        (step < 0 && curIdx > 0-step)) {
      curIdx += step;
      if (select_entry(curIdx) === false) {
        if (step != 0) 
          next_entry(step / Math.abs(step));
      }
    }
  }
  var select_entry = function(idx) {
    if (idx > nbooks || idx <= 0) return;
    if ($("#oldname-"+idx).height() == 0) {
      return false;
    }
    $(".selected").removeClass("selected");
    $("#oldname-"+idx).toggleClass("selected");
    $("#books").get()[0].scrollTop = 0;
    var pos = $("#oldname-"+idx).position().top - 20;
    var fix = pos;
    if (pos > $("#books").height()/2) {
      fix = $("#books").height()/2;
    }
    console.log(pos + ", " + fix)
    $("#books").get()[0].scrollTop = _.max([pos - fix, 0]);
    return true;
  }


  var submitIt = function() {
    var oldname = $("#oldname-" + curIdx).html()
    var newname = $("#cmd").val()
    if (newname == "") newname = oldname;
    var entry = $("#entry-"+curIdx);
    next_entry(1);
    $("#cmd").select();

    save(oldname, newname, function(data) {
      if (data && data.status != "ERR") {
        entry.fadeOut();
        console.log(data);
        add_mapping(oldname, newname, data.id);
      }
    });
    return false;

  }


  var shortcuts = function(e){
    console.log(e.which);
    if (e.which == 40) {
      // down
      next_entry(1);
      $("#cmd").select();
    } 
    else if (e.which == 38) {
      // up
      next_entry(-1);
      $("#cmd").select();
    }
  }
  var addClick = function(idx) {
    $("#oldname-"+idx).click(function(el) {
      curIdx = +$(this).data("idx")
      console.log("clicked: " + curIdx)
      select_entry(curIdx);
      $("#cmd").focus().select()
    });
  }
  _.times(nbooks+1, addClick);


  var add_mapping = function(oldname, newname, id) {
    var template = Handlebars.compile($("#map-template").html());
    var html = template({ oldbook: oldname, newbook: newname, id: id});
    var el = $(html)
    $("#mappings").prepend(el);
    el.select(".oldbook").click(function() {
      rm(id, function() {
        el.fadeOut();
      })
    });
  };



  $(function() {
    $(document).keyup(function(e){shifted = e.shiftKey} );
    $(document).keydown(function(e){shifted = e.shiftKey} );
    $(document).keydown(shortcuts);
    $("#cmd").get()[0].setAttribute( "autocomplete", "off" )
    $("#cmdform").submit(submitIt);

    curIdx = 1;
    select_entry(curIdx);
  });




</script>
