
// Find all releveant elements
var diffTitle = document.querySelector('#diff-title');
var diffImage = document.querySelector('#diff-image');
var diffText = document.querySelector('#diff-text');

var identifier = document.querySelector('#identifier');
var statusDiv = document.querySelector('#status');

var buttonRefresh = document.querySelector('#refresh');
var buttonOpen = document.querySelector('#open');
var buttonLeft = document.querySelector('#left');
var buttonRight = document.querySelector('#right');

// Create connection
var socket = new WebSocket("ws://" + window.location.hostname + ':' + 9100);

socket.addEventListener("message", function (msg) {
  msg = JSON.parse(msg.data);
  
  HANDLERS[msg.what].call(null, msg.data);
});

function status(boolean, text) {
  statusDiv.style.borderColor = boolean ? 'tomato' : 'steelblue';
  statusDiv.innerHTML = text;
}

function send(msg) {
  socket.send(JSON.stringify(msg));
}

var canClick = false;
var dmp = new diff_match_patch();
    dmp.Diff_EditCost = 4;

function diff(a, b) {
  return dmp.diff_prettyHtml( dmp.diff_main(a, b) );
}

var TOTAL = 0;
var INDEX = 0;

var HANDLERS = {
  'ready': function (total) {
    status(false, 'Comparing ...');
    TOTAL = total;
  },

  'compare': function (data) {
    var item = data.item;
    var compare = data.compare;
    status(false, 'Compared result');
    canClick = true;

    identifier.innerHTML = item.key;
    buttonOpen.href = item.href;
    INDEX = item.index;

    diffTitle.innerHTML = diff(compare.actual.title || '', compare.expected.title || '');
    diffImage.innerHTML = diff(compare.actual.image || '', compare.expected.image || '');
    diffText.innerHTML = diff(compare.actual.text || '', compare.expected.text || '');

    buttonLeft.style.visibility = (INDEX !== 0) ? 'visible' : 'hidden';
    buttonRight.style.visibility = (INDEX !== (TOTAL - 1)) ? 'visible' : 'hidden';
  },

  'error': function (message) {
    status(true, message);
  },
};

buttonRefresh.addEventListener('click', function () {
  if (canClick === false) return;
  canClick = true;

  status(false, 'Comparing ...');
  send({ 'what': 'load', 'data': INDEX });
});

buttonLeft.addEventListener('click', function () {
  if (canClick === false) return;
  canClick = true;

  status(false, 'Comparing ...');
  send({ 'what': 'load', 'data': INDEX - 1 });
});

buttonRight.addEventListener('click', function () {
  if (canClick === false) return;
  canClick = true;

  status(false, 'Comparing ...');
  send({ 'what': 'load', 'data': INDEX + 1 });
});

@@ -2195,37 +2195,314 @@
 er('click', 
-function () %7B
+leftClick);%0AbuttonRight.addEventListener('click', rightClick);%0A%0Awindow.addEventListener('keydown', function (evt) %7B%0A  switch (evt.keyCode) %7B%0A    case 37:%0A      leftClick();%0A      break;%0A    case 39:%0A      rightClick();%0A      break;%0A  %7D%0A%7D);%0A%0Afunction leftClick() %7B%0A  if (INDEX === 0) return;
 %0A  if (canCl
@@ -2630,63 +2630,70 @@
 );%0A%7D
-);%0A%0AbuttonRight.addEventListener('click', function () %7B
+%0A%0Afunction rightClick() %7B%0A  if (INDEX === (TOTAL - 1)) return;
 %0A  i
@@ -2821,15 +2821,13 @@
 EX + 1 %7D);%0A%7D
-);
 %0A

support left and right keys