$(function() {
  var ui = {
    bBeginning  : $("##{rawJS butBeginning}"),
    bBackward   : $("##{rawJS butBackward}"),
    bTogglePlay : $("##{rawJS butTogglePlay}"),
    bForward    : $("##{rawJS butForward}"),
    prTape      : $("##{rawJS prTape}"),
    prTrans     : $("##{rawJS prTrans}"),
    eHello      : $("##{rawJS eHello}"),
    eSub        : $("##{rawJS eSub}"),
  };
  var pollInterval = 10000;
  var playing = false;
  var timeout = 150;
  var transBak = "";
  function poll() {
    sock.send("Poll");
    setTimeout(poll, pollInterval);
  };
  function forwardWait() {
    if (playing === true) {
      sock.send("Forward");
      setTimeout(forwardWait, timeout);
    }
  };
  function enableButtons(buttons) {
    for (var i = 0; i < buttons.length; i++) {
      buttons[i].removeAttr("disabled");
    };
  };
  function disableButtons(buttons) {
    for (var i = 0; i < buttons.length; i++) {
      buttons[i].attr("disabled", "disabled");
    };
  };
  function togglePlay() {
    var btns = [ui.bBeginning, ui.bBackward, ui.bForward];
    ui.bTogglePlay.children().toggleClass("glyphicon-play glyphicon-stop");
    playing = !playing;
    if (playing === true) {
      disableButtons(btns);
      forwardWait();
    } else {
      enableButtons(btns);
    };
  };
  ui.bBeginning.on("click", function () {
    sock.send("Beginning");
  });
  ui.bBackward.on("click", function () {
    sock.send("Backward");
  });
  ui.bTogglePlay.on("click", function () {
    togglePlay();
  });
  ui.bForward.on("click", function () {
    sock.send("Forward");
  });
  sock = new WebSocket("wss://" + window.location.host);
  ui.eHello.on("click", function () {
    sock.send("MHello");
  });
  ui.eSub.on("click", function () {
    sock.send("MSub");
  });
  sock.onopen = function (e) {
    enableButtons([ui.bBeginning, ui.bBackward,
                   ui.bTogglePlay, ui.bForward]);
    poll();
  };
  sock.onclose = function (e) {
    disableButtons([ui.bBeginning, ui.bBackward,
                    ui.bTogglePlay, ui.bForward]);
    alert("WEBSOCKET CLOSED. At this point, reloading the page " +
          "is probably the wise thing to do.");
  };
  sock.onmessage = function (e) {
    var data = JSON.parse(e.data);
    if (data["type"] === "tape") {
      ui.prTape.html(data["value"]);
    } else if (data["type"] === "trans") {
      transBak = data["value"];
      ui.prTrans.html(transBak);
    } else if (data["type"] === "stop") {
      togglePlay();
    } else if (data["type"] === "bold") {
      var idx = parseInt(data["value"]);
      if (idx >= 0) {
        var trans = transBak.split("\n");
        idx = idx+3;
        trans[idx] = "<div style=\"display: inline; color: #ffffff; " +
                     "background-color: #000000\">" + trans[idx] + "</div>";
        trans[idx+1] = trans[idx+1]
        ui.prTrans.html(trans.join("\n"));
      } else {
        ui.prTrans.html(transBak);
      }
    }
  };
  sock.onerror = function (e) {
    console.debug("ERROR: " + e.data);
  };
});