var socket = null;
var is_initialised = false;
var glist = [];  // [(int, string, element)]
var el_list = null;

function setupSocket() {
  socket = io();

  socket.on("init", function(list) {
    // Reload if server restarted
    if (!is_initialised) is_initialised = true;
    else { location.reload(); return; }

    glist = list;
    for (var i = 0; i < glist.length; i++) glist[i].push(null);
    initialiseList();
  });

  socket.on("error", function(err) {
    alert("Error: " + err);
  });

  socket.on("alert", function(text) {
    alert(text);
  });
}

// Returns element
function createItemElement(votes, string) {
  var el;

  var el_item = document.createElement("div");
  el_item.classList.add("item");
  if (votes < 0) el_item.classList.add("negative");

  el = document.createElement("span");
  el.classList.add("item-bullet");
  el.appendChild(document.createTextNode("•"));
  el_item.appendChild(el);

  el = document.createElement("span");
  el.classList.add("item-label");
  el.appendChild(document.createTextNode(string));
  el_item.appendChild(el);

  el = document.createElement("span");
  el.classList.add("item-votes");
  el.appendChild(document.createTextNode("[" + votes + "]"));
  el_item.appendChild(el);

  var buttons = document.createElement("span");
  buttons.classList.add("item-buttons");

  el = document.createElement("span");
  el.classList.add("item-upvote");
  el.appendChild(document.createTextNode("⇧"));
  el.addEventListener("click", function() {
    upvoteItem(string, 1);
  });
  buttons.appendChild(el);

  el = document.createElement("span");
  el.classList.add("item-downvote");
  el.appendChild(document.createTextNode("↓"));
  el.addEventListener("click", function() {
    upvoteItem(string, -1);
  });
  buttons.appendChild(el);

  el = document.createElement("span");
  el.classList.add("item-delete");
  el.appendChild(document.createTextNode("⨯"));
  el.addEventListener("click", function() {
    if (votes < 0) deleteItem(string);
    else negateItem(string);
  });
  buttons.appendChild(el);

  el_item.appendChild(buttons);

  return el_item;
}

function initialiseList() {
  var el_item, el;
  el_list.innerHTML = "";

  for (var i = 0; i < glist.length; i++) {
    el_item = createItemElement(glist[i][0], glist[i][1]);
    glist[i][2] = el_item;
    el_list.appendChild(el_item);
  }

  el_item = document.createElement("div");
  el_item.classList.add("item");
  el_item.classList.add("make-new");

  el = document.createElement("span");
  el.classList.add("new-item-bullet");
  el.appendChild(document.createTextNode("+"));
  el_item.appendChild(el);

  el = document.createElement("input");
  el.type = "text";
  el.setAttribute("size", 21);
  el.setAttribute("placeholder", "New item...");
  el.classList.add("new-item-input");
  el.addEventListener("keypress", function(ev) {
    if (ev.key == "Enter" || ev.keyCode == 10 || ev.keyCode == 13) {
      submitNewItem(ev.target.value);
      ev.target.value = "";
    }
  });
  el_item.appendChild(el);

  el_list.appendChild(el_item);
}

function submitNewItem(string) {
  for (var i = 0; i < glist.length; i++) {
    if (glist[i][1] == string) {
      var el = glist[i][2];
      el.classList.add("flash");
      setTimeout(function(i) { el.classList.remove("flash"); }, 200);
      return;
    }
  }

  socket.emit("new", string);

  insertItem(0, string);
}

function upvoteItem(string, incr) {
  for (var i = 0; i < glist.length; i++) {
    if (glist[i][1] == string) {
      glist[i][0] += incr;
      socket.emit("set_votes", string, glist[i][0]);
      reinsertItem(i);
      break;
    }
  }
}

function negateItem(string) {
  for (var i = 0; i < glist.length; i++) {
    if (glist[i][1] == string) {
      glist[i][0] = -1;
      socket.emit("set_votes", string, -1);
      reinsertItem(i);
      break;
    }
  }
}

function deleteItem(string) {
  for (var i = 0; i < glist.length; i++) {
    if (glist[i][1] == string) {
      socket.emit("delete", string);
      glist[i][2].parentElement.removeChild(glist[i][2]);
      glist.splice(i, 1);
      break;
    }
  }
}

function insertItem(votes, string) {
  var i;
  for (i = 0; i < glist.length; i++) {
    if (glist[i][0] > votes) continue;
    if (glist[i][0] < votes || glist[i][1] > string) break;
  }
  var el = createItemElement(votes, string);
  if (i == glist.length) {
    glist.push([votes, string, el]);
    el_list.insertBefore(el, document.querySelector(".item.make-new"));
  } else {
    var refel = glist[i][2];
    glist.splice(i, 0, [votes, string, el]);
    el_list.insertBefore(el, refel);
  }
}

function reinsertItem(index) {
  glist[index][2].parentElement.removeChild(glist[index][2]);
  var votes = glist[index][0];
  var string = glist[index][1];
  glist.splice(index, 1);

  insertItem(votes, string);
}

window.addEventListener("load", function() {
  el_list = document.getElementById("list");
  setupSocket();
});