.

foo/test.js

+data = null;
+idx = 0;
+
+nextUpdateId = 0;
+
+urlHolder = document.querySelector('#url-holder');
+dataTable = document.querySelector('#data-table');
+$dataRows = null;
+
+baseImage = document.querySelector('#base-img');
+distilledImage = document.querySelector('#distilled-img');
+imageHolder = document.querySelector('#image-holder');
+
+goodButton = document.querySelector('#good');
+badButton = document.querySelector('#bad');
+resetButton = document.querySelector('#reset');
+errorButton = document.querySelector('#error');
+
+function changeIndex(newIndex) {
+  var oldIndex = idx;
+  idx = Math.max(0, Math.min(data.length - 1, newIndex));
+  showImage(idx);
+  $dataRows.eq(oldIndex).removeClass('active');
+  var $currentRow = $dataRows.eq(idx);
+  $currentRow.addClass('active');
+  $('.current-position').text(idx + 1);
+}
+
+function recordGood() {
+  var e = data[idx];
+  e['good'] = 1;
+  updateTableRow(idx);
+  sendUpdate(e, function() {
+    changeIndex(idx + 1);
+  });
+}
+
+function recordBad() {
+  var e = data[idx];
+  e['good'] = 0;
+  updateTableRow(idx);
+  sendUpdate(e, function() {
+    changeIndex(idx + 1);
+  });
+}
+
+function recordError() {
+  var e = data[idx];
+  e['good'] = -1;
+  updateTableRow(idx);
+  sendUpdate(e, function() {
+    changeIndex(idx + 1);
+  });
+}
+
+function resetEntry() {
+  var e = data[idx];
+  delete e['good']
+  updateTableRow(idx);
+  sendUpdate(e, function() {
+  });
+}
+
+function sendMessage(type, message, callback) {
+  $.ajax({
+    'type': type,
+    'url': '/message',
+    'contentType': 'application/json',
+    'processData': false,
+    'data': JSON.stringify(message),
+    'error': function(response, status) {
+      console.log('wtf response: ', response, status);
+    },
+    'success': function(response) {
+      console.log('response: ', response);
+      callback(response);
+    },
+    'dataType': 'json',
+  });
+}
+
+function sendUpdate(e, callback) {
+  sendMessage(
+      'POST',
+      {
+        'action': 'update',
+        'data': e,
+      },
+      callback);
+}
+
+function back() {
+  changeIndex(idx - 1);
+}
+
+function skip() {
+  changeIndex(idx + 1);
+}
+
+goodButton.onclick = recordGood
+badButton.onclick = recordBad
+resetButton.onclick = resetEntry
+errorButton.onclick = recordError
+$('.right-caret').click(skip);
+$('.left-caret').click(back);
+
+function showImage(i) {
+  goodButton.disabled = false;
+  badButton.disabled = false;
+  var e = data[i]
+  baseImage.src = '/images/' + e['screenshot'].replace(/.*\//, '')
+  distilledImage.src = '/images/' + e['distilled'].replace(/.*\//, '')
+  urlHolder.innerText = e['url']
+  urlHolder.href = e['url']
+  imageHolder.classList.remove('bad');
+  imageHolder.classList.remove('good');
+  imageHolder.classList.remove('error');
+  if (typeof e['good'] != 'undefined')  {
+    imageHolder.classList.add(
+        e['good'] == 1
+          ? 'good'
+          : e['good'] == -1
+            ? 'error'
+            : 'bad');
+  }
+}
+
+function updateTableRow(i) {
+  var row = dataTable.querySelectorAll('tr')[i];
+  row.classList.remove('good');
+  row.classList.remove('bad');
+  imageHolder.classList.remove('error');
+  var e = data[i];
+  if (typeof e['good'] != 'undefined') {
+    row.classList.add(
+        e['good'] == 1
+          ? 'good'
+          : e['good'] == -1
+            ? 'error'
+            : 'bad');
+  }
+  if (i == idx) {
+    // forces ui update
+    changeIndex(idx);
+  }
+}
+
+function createTable() {
+  var dataRows = [];
+  for (var i = 0; i < data.length; i++) {
+    row = document.createElement('tr');
+    cell = document.createElement('td');
+    row.appendChild(cell);
+    cell.appendChild(document.createTextNode(data[i]['url']));
+    dataTable.appendChild(row);
+    dataRows.push(row);
+  }
+
+  $dataRows = $(dataRows);
+
+  $dataRows.each(function(i, r) {
+    $(r).click(function() {
+      console.log(i);
+      // forces ui update
+      changeIndex(i);
+    });
+  })
+}
+
+function setData(d, i) {
+  var needsTable = data == null;
+  data = d; //.slice(0, 100);
+  $('.total-entries').text(data.length);
+  if (needsTable) {
+    createTable();
+  }
+  for (var i = 0; i < data.length; i++) {
+    updateTableRow(i);
+  }
+}
+
+function handleVisibilityChange() {
+  if (!document.hidden) sendGetUpdates(1000);
+}
+
+function getData() {
+  sendMessage(
+      'POST',
+      {
+        'action': 'getData'
+      },
+      function(rsp) {
+        document.addEventListener('visibilitychange', handleVisibilityChange, false);
+        var data = rsp['response']['data'];
+        nextUpdateId = rsp['response']['nextId'];
+        setData(data);
+        var startIndex = parseInt(window.location.hash.substr(1)) - 1;
+        if (isNaN(startIndex)) {
+          startIndex = 0;
+        }
+        changeIndex(startIndex);
+        sendGetUpdates(1000);
+      }
+    );
+}
+
+
+getUpdatesSent = false;
+function sendGetUpdates(delay) {
+  if (document.hidden) return;
+  if (getUpdatesSent) return;
+  getUpdatesSent = true;
+  setTimeout(function() { getUpdates(delay); }, delay);
+}
+
+function getUpdates(delay) {
+  $.ajax({
+    'type': 'GET',
+    'url': '/getupdates?nextId=' + nextUpdateId,
+    'contentType': 'application/json',
+    'processData': false,
+    'error': function(response, status) {
+      console.log('xx: wtf response: ', response, status);
+    },
+    'success': function(rawResponse) {
+      getUpdatesSent = false;
+      var response = rawResponse['response'];
+      nextUpdateId = response['nextId'];
+      if (response['data'] != null) {
+        setData(response['data']);
+      } else if (response['updates'] != null) {
+        updates = response['updates'];
+        for (var i = 0; i < updates.length; i++) {
+          var u = updates[i];
+          var idx = u['index'];
+          var entry = u['entry'];
+          var curr = data[idx];
+          if (curr['url'] != entry['url']) {
+            console.error(curr, entry);
+          }
+          data[idx] = entry;
+          updateTableRow(idx);
+        }
+        nextUpdateId = nextUpdateId;
+        delay = 1000;
+      } else {
+        delay = Math.min(30 * 1000, 1.5 * delay);
+      }
+      console.log('xx: response: ', response, delay);
+      sendGetUpdates(delay);
+    },
+    'dataType': 'json',
+  });
+}
+
+$(document).ready(function(){
+  getData();
+  $(document).keypress(function(e){
+    console.log(e)
+    switch (e.which) {
+      case 42: // *
+      case 48: // 0
+        recordError();
+        break;
+      case 43: // +
+      case 61: // =
+        recordGood();
+        break;
+      case 45: // -
+        recordBad();
+        break;
+    }
+  });
+  $(document).keydown(function(e) {
+    switch (e.which) {
+      case 37: // <--
+      case 39: // >--
+        e.preventDefault();
+    }
+  });
+  $(document).keyup(function(e){
+    switch (e.which) {
+      case 37: // <--
+        back();
+        break;
+      case 39: // >--
+        skip();
+        break;
+    }
+  });
+});