/*
 * Copyright (c) 2019 Clementine Computing LLC.
 *
 * This file is part of PopuFare.
 *
 * PopuFare is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * PopuFare is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with PopuFare.  If not, see <https://www.gnu.org/licenses/>.
 *
 */

var _ADDRESS = "localhost";
var _URL = "http://" + _ADDRESS;
var _PORT = 60535;

var _fqADDRESS = _ADDRESS + ":" + _PORT;

var BG_COLOR = "#f7f7f7";
var TEXT_COLOR = "#444444";

var DIU_UI_VERSION = "0.1.10";
var DIU_UI_VERSION_DATE = "2020-02-10";

var g_snd = {
  "reject_fare" : "",
  "accept_fare" : "",
  "rule_error" : "",
  "button_press" : ""
};

function _beep_error() {
  g_snd.rule_error.currentTime=0;
  g_snd.rule_error.play();
}

function _beep_reject() {
  g_snd.reject_fare.currentTime=0;
  g_snd.reject_fare.play();
}

function _beep_accept() {
  g_snd.accept_fare.currentTime=0;
  g_snd.accept_fare.play();
}

function _beep() {
  g_snd.button_press.currentTime=0;
  g_snd.button_press.play();
}

var g_ctx = {

  "driver_login_state" : "driver",

  "driver" : "",
  "pin" : "",
  "paddle" : "",
  "eqnum" : "",

  "cur_eqnum" : "",

  "current_ui" : "ui_login",
  "ui_stack" : [],

  "ui_change_timeoutid": -1,
  "ui_watchdog_timeoutid": -1,

  "bulkfare" : "",
  "bulkfare_count" : "",

  "status_text": "",
  "status_text_w": 32,
  "status_text_h": 11,

  "status_html_text":"",

  "diu_status" : {
    "last_update" : -1
  },

  // system config
  //
  "config" : {
    "last_update": -1,
    "volume": 100,
    "brightness": 100,
    "showdimclock": 0
  },

  "x": ""
};

function _api_fail() {
  console.log(">>api fail");
  return true;
}

function _api_tick() { }

function _api_request(action, param, cb_ok, cb_fail, cb_neterr) {
  var idx = 0;
  var param_name = [], param_val = [];

  var req = new XMLHttpRequest();

  // Firefox gets testy about parsing assumed XML
  //
  req.overrideMimeType("text/plain");
  var url =  "/req";
  var varstr = "action=" + action;

  for (var x in param) {
    param_name.push(x);
    param_val.push(param[x]);
  }

  for (var ii=0; ii<param_name.length; ii++) {
    varstr += "&" + param_name[ii] + "=" + param_val[ii];
  }

  req.onreadystatechange = function() {

    if (req.readyState == 4) {
      if (req.status == 200) {

        var fulltxt = req.responseText;
        var resp = req.responseText.split(" ");

        if ((resp.length>=2) && (resp[0] == "ok"))  {
          if (typeof cb_ok !== "undefined") {
            cb_ok(fulltxt);
          }
          return;
        }

        if (typeof cb_fail !== "undefined") {
          cb_fail(fulltxt);
        }

      }
      else if (typeof cb_fail !== "undefined") { cb_fail(); }

    }
  };

  req.addEventListener("error", _api_fail);
  req.addEventListener("abort", _api_fail);

  req.onerror = function() { console.log("network error"); };

  try {
    req.open("POST", url, true);
    req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    req.send(varstr);
  } catch (er) {
    console.log(">>>>>>ERROR", er);
  }

}



function _block_status_window(ui_id) {
  var ele = document.getElementById(ui_id + "_status");
  ele.ondragstart = function() { return false; }
  ele.onselectstart = function() { return false; }
  ele.onmousedown = function() { return false; }
  ele.ondragstart = function() { return false; }

  var rect = ele.getBoundingClientRect();
  var block_ele = document.getElementById(ui_id + "_blockwindow");
  block_ele.style.width = rect.width;
  block_ele.style.height = rect.height;
  block_ele.style.bottom = rect.bottom;
  block_ele.style.left = rect.left;
  block_ele.style.top = rect.top;
  block_ele.style.right = rect.right;
  block_ele.style.x = rect.x;
  block_ele.style.y = rect.y;
}

function _clear_ui_watchdog() {
  if (g_ctx.ui_watchdog_timeoutid >= 0) {
    window.clearTimeout(g_ctx.ui_watchdog_timeoutid);
  }
}

function _set_ui_watchdog(failsafe_ui, _dt) {

  // default to 'ui_watchdog' and 5s
  //
  failsafe_ui = (( typeof failsafe_ui === "undefined") ? "ui_watchdog" : failsafe_ui);
  _dt = (( typeof _dt === "undefined") ? 5000 : _dt);

  _clear_ui_watchdog();

  g_ctx.ui_watchdog_timeoutid = window.setTimeout(
    (function(_fsui) {
      return function() { console.log("???", _fsui); _switch_ui(_fsui); };
    })(failsafe_ui),
    _dt);

}



function _switch_ui(to) {
  var ele;

  if (g_ctx.ui_change_timeoutid > 0) {
    window.clearTimeout(g_ctx.ui_change_timeoutid);
    g_ctx.ui_change_timeoutid = -1;
  }

  var from = g_ctx.current_ui;

  ele = document.getElementById(from);
  ele.style.display = "none";

  ele = document.getElementById(to);
  ele.style.display = "block";

  g_ctx.current_ui = to;

  if (to == "ui_main") {
    var _x = _calculate_ui_main_status_width_height();
    g_ctx.status_text_h = _x.n_height;
    g_ctx.status_text_w = _x.n_width;
  }

  if ((to == "ui_main") ||
      (to == "ui_login")) {
    _block_status_window(to);
  }

}

function _hide_ui(from) {
  var ele = document.getElementById(from);
  ele.style.display = "none";
}

function _hide_ui_element(from) {
  var ele = document.getElementById(from);
  ele.style.display = "none";
}

function _show_ui(to) {
  var ele = document.getElementById(to);
  ele.style.display = "block";

  g_ctx.current_ui = to;

  // put pane over status window to prevent highlights,
  // copy/pasting, etc.
  //
  if ((to == "ui_main") ||
      (to == "ui_login")) {
    _block_status_window(to);
  }

}

function _show_ui_element(to) {
  var ele = document.getElementById(to);
  ele.style.display = "block";
}

//------------

function _get_now_HH_MM() {
  var _dt = new Date();

  var _sep = ":";

  if ( (_dt.getSeconds() % 2) == 0) {
    _sep = " ";
  }

  var _hr = _dt.getHours();
  var _min = _dt.getMinutes();

  var _hr_str = _hr.toString();
  var _min_str = _min.toString();

  if (_hr < 10) { _hr_str = "0" + _hr_str; }
  if (_min < 10) { _min_str = "0" + _min_str; }

  var _time_str = _hr_str + _sep + _min_str;

  return _time_str;
}

function _get_now_YYYY_MM_DD() {
  var _dt = new Date();

  var _sep = "-";

  var _yr = _dt.getFullYear();
  var _mo = _dt.getMonth()+1;
  var _dy = _dt.getDate();

  var _yr_str = _yr.toString();
  var _mo_str = _mo.toString();
  if (_mo < 10) {
    _mo_str = "0" + _mo_str;
  }
  var _dy_str = _dy.toString();
  if (_dy < 10) {
    _dy_str = "0" + _dy_str;
  }

  return _yr_str + _sep + _mo_str + _sep + _dy_str;
}

function _update_display_time() {
  var ele = document.getElementById("ui_main_time");
  if (typeof ele === "undefined") { return; }
  var _time_str = _get_now_HH_MM();
  ele.innerHTML = "<span style='white-space:nowrap;'>" + _time_str + "</span>";
}

//------------

function _update_login_time() {
  var ele = document.getElementById("ui_login_time");
  if (typeof ele === "undefined") { return; }

  var _time_str = _get_now_HH_MM();

  ele.innerHTML = "<span style='white-space:nowrap;'>" + _time_str + "</span>";
}

function _update_login_date() {
  var ele = document.getElementById("ui_login_date");
  if (typeof ele === "undefined") { return; }

  var _date_str = _get_now_YYYY_MM_DD();

  ele.innerHTML = "<span style='white-space:nowrap;'>" + _date_str + "</span>";
}

//------------

function _update_dimclock_datetime() {
  var ele = document.getElementById("ui_dimclock_clock");
  if (typeof ele === "undefined") { return; }
  var _time_str = _get_now_HH_MM();
  ele.innerHTML = "<span style='white-space:nowrap;'>" + _time_str + "</span>";

  var ele = document.getElementById("ui_dimclock_date");
  if (typeof ele === "undefined") { return; }
  var _date_str = _get_now_YYYY_MM_DD();
  ele.innerHTML = "<span style='white-space:nowrap;'>" + _date_str + "</span>";
}

//------------

// value is from [0,1]
//
function _process_brightness(brightness, update_system) {

  // 0 opacity is completely clear, so (1.0) brightness (100% brightness).
  //
  var f_brightness = parseFloat(brightness);
  var opacity = 1.0 - f_brightness;

  // fail
  //
  if ((opacity < 0.0) || (opacity > 1.0)) { return {"type":"error", "msg":"opacity out of range"}; }

  var ele = document.getElementById("dim_overlay");
  ele.style.opacity = opacity;

  ele = document.getElementById("ui_configuration_displaybrightness");
  ival = Math.floor(f_brightness*100.0);
  ele.innerHTML = "" + ival + "%";

  g_ctx.config.brightness = ival;

  if (update_system) { _set_system_config(); }
}

//------------

// volume is from [0,1]
//
function _process_volume(vol, update_system) {
  var ele = document.getElementById("ui_configuration_displayvolume");
  ivol = Math.floor(vol*100.0);

  if (ivol < 0)   { ivol = 0; }
  if (ivol > 100) { ivol = 100; }

  ele.innerHTML = "" + ivol + "%";

  g_ctx.config.volume = ivol;

  if (update_system) { _set_system_config(); }
}

var _rate_limit_beep_t = -1.0;
var _rate_limit_beep_dt = 250;
function _rate_limit_beep() {
  if (_rate_limit_beep_t<0) {
    _rate_limit_beep_t = Date.now();
  }
  if (Date.now() > (_rate_limit_beep_t + _rate_limit_beep_dt)) {
    _rate_limit_beep_t = Date.now();
    _beep();
  }
}

function _slider_change(name) {
  if (name == "configuration.volume") {
    var val = document.getElementById("ui_configuration_volume").value;
    _process_volume(val, true);

    ivol = Math.floor(val*100.0);
    _api_request("custom", {"function":"volume", "parameter":ivol});

    _rate_limit_beep();
  }
  else if (name == "configuration.brightness") {
    var val = document.getElementById("ui_configuration_brightness").value;
    _process_brightness(val, true);
  }
}

function _volume_test() {
  _api_request("custom", {"function":"say", "parameter":"testing 1, 2, 3"});
}

function _btn_show_clock_on_dim_toggle() {
  if (g_ctx.config.showdimclock == 0) {
    g_ctx.config.showdimclock = 1;
  }
  else {
    g_ctx.config.showdimclock = 0;
  }

  _process_showdimclock(g_ctx.config.showdimclock, true);

  _beep();
}

function _process_showdimclock(val, update_system) {
  var ele = document.getElementById("ui_configuration_showclockondim");

  if (val == 1) { ele.innerHTML = 'X'; }
  else          { ele.innerHTML = ''; }

  if (update_system) {
    _set_system_config();
  }
}

//------------

function _clear_ui_driver() {
  var ele;

  var u = ["driver", "pin"];

  for (var i=0; i<u.length; i++) {
    g_ctx[u[i]] = "";
    ele = document.getElementById("ui_driver_" + u[i]);
    ele.innerHTML = "";
    ele.style.background = "";
  }

  ele = document.getElementById("ui_driver_pin");
  ele.style.display = "none";

  ele = document.getElementById("ui_driver_pin_text");
  ele.style.display = "none";

}

function _clear_ui_paddle() {
  g_ctx.paddle = "";
  var ele = document.getElementById("ui_paddle_paddle");
  ele.innerHTML = "";
}

function _clear_ui_bulkaccept() {
  var ele;

  g_ctx.bulkfare = "";
  ele = document.getElementById("ui_bulkaccept_faretype");
  ele.innerHTML = "";

  g_ctx.bulkfare_count = "";
  ele = document.getElementById("ui_bulkaccept_count");
  ele.innerHTML = "";
}

function _login() {
  _switch_ui('ui_driver');
  g_ctx.driver_login_state = "driver";
  _clear_ui_driver();
  _clear_ui_paddle();
}

//------------


function _verify_driver() {
  var driver = g_ctx.driver;
  var pin = g_ctx.pin;

  // have a fail safe for the verification
  //
  _set_ui_watchdog();

  _api_request("driverlogin", {"driver":driver, "pin":pin}, _verify_driver_ok, _verify_driver_fail);
  return;
}

function _verify_driver_ok(dat) {
  console.log("driver ok:", dat);

  _clear_ui_watchdog();

  var tok = dat.split(" ");

  // If we have an admin login...
  //
  if ( (tok.length >= 2) &&
       ((tok[1] == "admin") ||
        (tok[1] == "AdminMode")) ) {
    _switch_ui("ui_diagnostic");
    return;
  }

  _switch_ui("ui_paddle");
}

function _verify_driver_fail() {
  console.log("driver fail");

  _clear_ui_watchdog();

  _switch_ui("ui_driverincorrect");
}

function _driver_incorrect(inp)  {
  console.log("driver incorrect");

  _clear_ui_watchdog();
  _clear_ui_driver();

  _switch_ui("ui_driver");
}

//------------

function _driver_login(inp) {

  var uvar = "";
  if (g_ctx.driver_login_state == "driver")       { uvar = "driver"; }
  else if (g_ctx.driver_login_state == "pin")     { uvar = "pin"; }
  else {
    console.log("_driver_login: ERROR: unknown driver state \"" + g_ctx.driver_login_state + "\"");
    return;
  }

  var n = g_ctx[uvar].length;

  if (inp == 'cancel') { _switch_ui('ui_login'); }
  else if (inp == 'ok')     {

    if (uvar == "driver") {
      g_ctx.driver_login_state = "pin";

      var ele;
      ele = document.getElementById("ui_driver_driver");
      ele.style.background = "#aaaaaa";

      // Show 'pin' box now that the 'driver' box has been filled
      //
      ele = document.getElementById("ui_driver_pin");
      ele.style.display = "block";
      ele = document.getElementById("ui_driver_pin_text");
      ele.style.display = "block";

    }
    else if (uvar == "pin") {
      g_ctx.driver_login_state = "driver";

      _verify_driver();
      g_ctx.ui_change_timeoutid = window.setTimeout(function() {
        _switch_ui("ui_driververify");
      }, 150);

      return;
    }

  }

  // manage adding/subtracting/clearing relevant field
  //
  else if (inp == 'bksp')   { g_ctx[uvar] = g_ctx[uvar].substr(0, n-1); }
  else if (inp == 'clr')    { g_ctx[uvar]= ""; }
  else                      { g_ctx[uvar] += inp; }

  // Pin should not be displayed on screen.
  // Use '*' to hide it.
  //
  if (uvar == "pin") {
    var n = g_ctx[uvar].length;
    var x = "";
    for (i=0; i<n; i++) { x += "*"; }
    var ele = document.getElementById('ui_driver_' + uvar);
    ele.innerHTML = x;
  }

  // Otherwise update the displayed (driver number)
  //
  else {
    var ele = document.getElementById('ui_driver_' + uvar);
    ele.innerHTML = g_ctx[uvar];
  }

}

//------------
//------------


function _verify_paddle() {
  var paddle = g_ctx.paddle;

  // have a fail safe for the verification
  //
  _set_ui_watchdog();

  _api_request("paddleinput", {"paddle":paddle}, _verify_paddle_ack, _verify_paddle_fail);
  return;
}

function _verify_paddle_ack() {
  console.log("got ack for push paddle message\n");

}

function _verify_paddle_ok() {
  console.log("verify paddle ok");

  _clear_ui_watchdog();

  _switch_ui("ui_main");

}

function _verify_paddle_fail() {
  console.log("verify paddle fail");

  _clear_ui_watchdog();

  _switch_ui("ui_paddleunknown");
}

function _paddle_unknown(inp)   {

  console.log("paddle unknown...");

  _clear_ui_watchdog();
  _clear_ui_paddle();

  _switch_ui("ui_paddle");
}

function _watchdog_tripped(inp)   {
  console.log("watchdog UI expired!...");
  _reset();
}

//------------

function _paddle_input(inp) {
  var n = g_ctx.paddle.length;

  if (inp == 'cancel')    { _switch_ui('ui_login'); }
  else if (inp == 'ok')   {

    _verify_paddle();
    g_ctx.ui_change_timeoutid = window.setTimeout(function() {
      _switch_ui("ui_paddleverify");
    }, 150);

    return;
  }
  else if (inp == 'bksp') { g_ctx.paddle = g_ctx.paddle.substr(0, n-1); }
  else if (inp == 'clr')  { g_ctx.paddle = ""; }
  else                    { g_ctx.paddle  += inp; }

  // Otherwise update the displayed (driver number)
  //
  var ele = document.getElementById('ui_paddle_paddle');
  ele.innerHTML = g_ctx.paddle;
}

//-------------
//-------------
//-------------

function _main_prv() {
  console.log("prv");
  _api_request("prevstop");
}

function _main_nxt() {
  console.log("nxt");
  _api_request("nextstop");
}

function _main_dim() {
  console.log("dim...");

  if (g_ctx.config.showdimclock) {
    _switch_ui("ui_dimclock");
  }
  else {
    _api_request("custom", {"function":"dim"});
    _switch_ui('ui_dim');
  }
}

function _dim_wakeup() {
  console.log("waking up from dim");
  _api_request("custom", {"function": "undim" });
  _switch_ui("ui_main");
}

function _dim_soft_wakeup() {
  console.log("waking up from soft dim");
  _switch_ui("ui_main");

  // just in case
  //
  _api_request("custom", {"function": "undim" });
}

function _fare_adult() {
  console.log("fare adult");
  _api_request("fare", {"rule":"CASH-ADULT", "param":"", "fare":"adult","count":1});
}

function _fare_youth() {
  console.log("fare youth");
  _api_request("fare", {"rule":"CASH-YOUTH", "param":"", "fare":"youth","count":1});
}

function _fare_half() {
  console.log("fare half");
  _api_request("fare", {"rule":"CASH-HALF", "param":"", "fare":"half","count":1});
}

function _fare_bike() {
  console.log("fare bike");
  _api_request("fare", {"rule":"MISC-BIKE", "param":"", "fare":"bike","count":1});
}

function _fare_wheelchair() {
  console.log("fare wheelchair");
  _api_request("fare", {"rule":"MISC-WHEELCHAIR", "param":"", "fare":"wheelchair","count":1});
}

function _fare_transfer() {
  console.log("fare transfer");
  _api_request("fare", {"rule":"MISC-TRANSFER", "param":"", "fare":"transfer","count":1});
}

//-------------
//-------------
//-------------

function _main_bulk() {
  // reset tab to Misc. (first option) by default
  //
  ele = document.getElementById("ui_bulk_misc");
  ele.classList.remove("highlight");
  ele.classList.add("highlight");
  ele = document.getElementById("ui_bulk_passes");
  ele.classList.remove("highlight");

  _show_ui_element("ui_bulk_misc_tab");
  _hide_ui_element("ui_bulk_passes_tab");
  _switch_ui("ui_bulk");
}

function _main_menu() {
  // reset tab to Misc. (first option) by default
  //
  ele = document.getElementById("ui_fareoverride_misc");
  ele.classList.remove("highlight");
  ele.classList.add("highlight");
  ele = document.getElementById("ui_fareoverride_passes");
  ele.classList.remove("highlight");
  ele = document.getElementById("ui_fareoverride_options");
  ele.classList.remove("highlight");

  _show_ui_element("ui_fareoverride_misc_tab");
  _hide_ui_element("ui_fareoverride_passes_tab");
  _hide_ui_element("ui_fareoverride_options_tab");
  _switch_ui("ui_fareoverride");
}

//-------------
//-------------
//-------------


function _bulkaccept_ok() {
  console.log("bulkfare:", g_ctx.bulkfare, ", count:", g_ctx.bulkfare_count);
  _switch_ui("ui_main");

  _api_request("fare",{"rule":g_ctx.bulkfare, "param":g_ctx.bulkfare_count.toString(), "fare":g_ctx.bulkfare,"count":g_ctx.bulkfare_count});
}

function _bulkaccept_cancel() {
  _switch_ui("ui_main");
}

function _bulkaccept_input(inp) {
  var n = g_ctx.bulkfare_count.length;

  if (inp == 'cancel')    { _switch_ui('ui_main'); }
  else if (inp == 'ok')   { _bulkaccept_ok(); return; }
  else if (inp == 'bksp') { g_ctx.bulkfare_count = g_ctx.bulkfare_count.substr(0, n-1); }
  else if (inp == 'clr')  { g_ctx.bulkfare_count = ""; }
  else                    { g_ctx.bulkfare_count += inp; }

  // Otherwise update the displayed (driver number)
  //
  var ele = document.getElementById('ui_bulkaccept_count');
  ele.innerHTML = g_ctx.bulkfare_count;
}


//-------------
//-------------
//-------------


// space pad
// default 10
//
function _sp(str, align, pad) {
  align = ((typeof align=="undefined") ? "left" : align);
  pad = ((typeof pad==="undefined") ? 10 : pad);

  var n = 0;
  n = pad - str.length;

  if (align == "left") {
    for (var i=0; i<n; i++) { str += " "; }
  }
  else if (align == "center") {
    var rem = n%2;
    var n2 = Math.floor(n/2);
    var pfx = "", sfx = "";
    for (var i=0; i<n2; i++) { pfx += " "; }
    for (var i=0; i<(n2+rem); i++) { sfx += " "; }
    str = pfx + str + sfx;
  }
  else if (align == "right") {
    var pfx = "";
    for (var i=0; i<n; i++) { pfx += " "; }
    str = pfx + str;
  }

  return str;
}

function _cb_status(inp) {

  var tok = inp.split(" ");
  if (tok.length < 2) { return; }
  if (tok[0]!="ok") { return; }

  valtok = tok.slice(1).join(" ").split("\n");
  if (valtok[0]!="msg=status") { return; }

  g_ctx.diu_status = {};
  g_ctx.diu_status.last_update = Date.now();

  var fields = valtok[1].split("|");
  for (var ii=0; ii<fields.length; ii++) {
    var kv = fields[ii].split("=");
    if (kv.length!=2) { continue; }
    g_ctx.diu_status[kv[0].trim()] = kv[1].trim();
  }

  if ("equipno" in g_ctx.diu_status) {
    g_ctx.cur_eqnum = g_ctx.diu_status["equipno"];
  }

  if (g_ctx.config.last_update < 0) {
    _get_system_config();
  }

  var m = g_ctx.diu_status;
  if (g_ctx.current_ui === "ui_login") {

    var has_tunn = ((m["tunnel"] == '1') ? 'YES' : 'NO');
    var has_gprs = ((m["gprs"] == '1') ? 'YES' : 'NO');
    var has_gps = ((m["gps"] == '1') ? 'YES' : 'NO');

    var lat = ((typeof m["gpslat"] !== "undefined") ? m["gpslat"] : "");
    var lon = ((typeof m["gpslon"] !== "undefined") ? m["gpslon"] : "");

    var gps_str = ( ((lat.length>0) && (lon.length>0)) ?  (" (" + lat + "/" + lon + ")") : "" );

    var ele = document.getElementById("ui_login_status");

    var html_a = [];
    html_a.push("Tunnel: " + has_tunn + "  GPRS: " + has_gprs + "  Eq#: " + m["equipno"] + "  #Msg: " + m["nmsg"]);
    html_a.push("Last Token Read (" + m["last_token"] + ")");
    html_a.push("GPS: " + has_gps + gps_str + "");
    html_a.push(" ");

    // some site specific fiddling to display package information
    //
    html_a.push(_sp("Package") + _sp("Version", "left", 18) + _sp("Installed", "right", 12));
    html_a.push(_sp("ui") + _sp(DIU_UI_VERSION, "left", 18) + _sp(DIU_UI_VERSION_DATE, "right", 12) + "");

    for (var _ii=0; _ii<3; _ii++) {
      var key = "pkg" + _ii;
      if (key in g_ctx.diu_status) {
        var aval = g_ctx.diu_status[key].split(" ");
        html_a.push(_sp(aval[0]) + _sp(aval[1], "left", 18) + _sp(aval[2], "right", 12));
      }
    }
    html_a.push(" ");

    if ("IMEI" in m) { html_a.push("IMEI = " + m["IMEI"] + ""); }
    if ("IMSI" in m) { html_a.push("IMSI = " + m["IMSI"] + ""); }
    if ("ETH0" in m) { html_a.push("ETH0 = " + m["ETH0"] + ""); }
    html_a.push(" ");

    for (var ii=0; ii<html_a.length; ii++) {
      html_a[ii] = html_a[ii].replace(/ /g, '&nbsp;');
    }

    var div_hdr = "<div class='textrow'>";
    var str = div_hdr + html_a.join("</div><br>" + div_hdr ) + "</div>";

    ele.innerHTML = str;
  }
  else if (g_ctx.current_ui === "ui_main") {
    var ele = document.getElementById("mainstatus");
    var str = "";
    str += "Rt " + m["route"] + " ";
    str += "Trip " + m["trip"] + " ";
    str += "Stop " + m["stop"] + " ";
    str += "GPS " + m["gps"] + " ";
    str += "Tun " + m["tunnel"] + ", ";
    str += m["date"];

    str += " " + moment().format("HH:mm");

    ele.innerHTML = str;
  }

}

function _cb_status_err(e) {
  console.log("ERROR: _cb_status_err:", e);
}

//-------------

function _main_message_clear() {
  g_ctx.status_text = "";
}

function _main_message_replace(msg, bg_color, text_color) {
  var ele = document.getElementById("ui_main_status");

  bg_color = ((typeof bg_color === "undefined") ? BG_COLOR : bg_color);
  text_color = ((typeof text_color === "undefined") ? TEXT_COLOR : text_color);

  var lines = g_ctx.status_text.split("\n");
  if (lines.length > g_ctx.status_text_h) {
    var n = lines.length;
    lines = lines.slice(n - g_ctx.status_text_h);
  }

  for (var i=0; i<lines.length; i++) {
    lines[i] = lines[i].slice(0,g_ctx.status_text_w-1);
  }

  var idx = lines.length-1;
  if (idx<0) { idx = 0; }

  lines[idx] = msg;

  var html_lines = [];
  for (var i=0; i<lines.length; i++) {
    html_lines.push(lines[i].slice(0,g_ctx.status_text_w-1));

    if (html_lines[i].match(/ACCEPT/)) {
      html_lines[i] = "<div class='textrow accept'>" + html_lines[i] + "</div>";
    }
    else if (html_lines[i].match(/REJECT/)) {
      html_lines[i] = "<div class='textrow reject'>" + html_lines[i] + "</div>";
    }
    else if (html_lines[i].match(/[Uu]nknown/)) {
      html_lines[i] = "<div class='textrow reject'>" + html_lines[i] + "</div>";
    }
    else if (html_lines[i].match(/[Pp]assback/)) {
      html_lines[i] = "<div class='textrow reject'>" + html_lines[i] + "</div>";
    }
    else if (html_lines[i].match(/Rule execution error/)) {
      html_lines[i] = "<div class='textrow error'>" + html_lines[i] + "</div>";
    }
    else {
      html_lines[i] = "<div class='textrow'>" + html_lines[i] + "</div>";
    }

  }

  g_ctx.status_text = lines.join("\n");
  g_ctx.status_html_text = html_lines.join("<br>");
  ele.innerHTML = g_ctx.status_html_text;

  // sounds
  //
  if (msg.match(/ACCEPT/)) {
    _beep_accept();
  }
  else if (msg.match(/REJECT/)) {
    _beep_reject();
  }
  else if (msg.match(/[Uu]nknown/)) {
    _beep_reject();
  }
  else if (msg.match(/[Pp]assback/)) {
    _beep_reject();
  }
  else if (msg.match(/Rule execution error/)) {
    _beep_error();
  }

}

function _main_message_add(msg, bg_color, text_color) {
  var ele = document.getElementById("ui_main_status");

  bg_color = ((typeof bg_color === "undefined") ? BG_COLOR : bg_color);
  text_color = ((typeof text_color === "undefined") ? TEXT_COLOR : text_color);

  var txt = g_ctx.status_text + "\n" + msg;

  var html_lines = [];

  var lines = txt.split("\n");
  if (lines.length > g_ctx.status_text_h) {
    var n = lines.length;
    lines = lines.slice(n - g_ctx.status_text_h);
  }

  for (var i=0; i<lines.length; i++) {
    lines[i] = lines[i].slice(0,g_ctx.status_text_w-1);
  }

  for (var i=0; i<lines.length; i++) {
    html_lines.push(lines[i].slice(0,g_ctx.status_text_w-1));

    if (html_lines[i].match(/ACCEPT/)) {
      html_lines[i] = "<div class='textrow accept'>" + html_lines[i] + "</div>";
    }
    else if (html_lines[i].match(/REJECT/)) {
      html_lines[i] = "<div class='textrow reject'>" + html_lines[i] + "</div>";
    }
    else if (html_lines[i].match(/[Uu]nknown/)) {
      html_lines[i] = "<div class='textrow reject'>" + html_lines[i] + "</div>";
    }
    else if (html_lines[i].match(/[Pp]assback/)) {
      html_lines[i] = "<div class='textrow reject'>" + html_lines[i] + "</div>";
    }
    else if (html_lines[i].match(/Rule execution error/)) {
      html_lines[i] = "<div class='textrow error'>" + html_lines[i] + "</div>";
    }
    else {
      html_lines[i] = "<div class='textrow'>" + html_lines[i] + "</div>";
    }

  }

  g_ctx.status_text = lines.join("\n");
  g_ctx.status_html_text = html_lines.join("<br>");
  ele.innerHTML = g_ctx.status_html_text;

  // sounds
  //
  if (msg.match(/ACCEPT/)) {
    _beep_accept();
  }
  else if (msg.match(/REJECT/)) {
    _beep_reject();
  }
  else if (msg.match(/[Uu]nknown/)) {
    _beep_reject();
  }
  else if (msg.match(/[Pp]assback/)) {
    _beep_reject();
  }
  else if (msg.match(/Rule execution error/)) {
    _beep_error();
  }

}

//-------------

// The status message has the config lines, if present,
// so parse them into the 'config' sub-object.
// This should be called after we feel confident the status
// has been updated with the most current config.
//
function _get_system_config() {
  var m = g_ctx.diu_status;
  if (typeof m === 'undefined') { return; }

  g_ctx.config.last_update = Date.now();

  if ("brightness" in m)    { g_ctx.config.brightness = m["brightness"]; }
  if ("volume" in m)        { g_ctx.config.volume = m["volume"]; }
  if ("showdimclock" in m)  { g_ctx.config.showdimclock = m["showdimclock"]; }

  _process_volume(g_ctx.config.volume/100.0);
  _process_brightness(g_ctx.config.brightness/100.0);
  _process_showdimclock(g_ctx.config.showdimclock);
}

//---

function _set_system_config_ok(dat) { }
function _set_system_config_fail(dat) { }
function _set_system_config() {
  var dat = {
    "function"  : "setconfig",
    "parameter" : "volume " + g_ctx.config.volume + "," +
                  "brightness " + g_ctx.config.brightness + "," +
                  "showdimclock " + g_ctx.config.showdimclock
  };

  console.log(">>", dat);

  _api_request("custom", dat, _set_system_config_ok, _set_system_config_fail);
}

//-------------
//-------------
//-------------

function _ws_process(dat) {

  console.log("_ws_process:", dat);

  var tok = dat.split(" ");

  if (tok.length < 2) { return; }

  if (tok[0] == "paddle") {
    if      (tok[1] == "ok")    { _verify_paddle_ok(); }
    else if (tok[1] == "fail")  { _verify_paddle_fail(); }
    else { _verify_paddle_fail(); }
  }

  else if (tok[0] == "driver_notify") {
    if (tok.length < 5) {
      console.log("malformed message: ", dat);
    }
    else if (tok[1] == "replace") {
      _main_message_replace(tok.slice(4).join(" "));
    }
    else if (tok[1] == "ok") {
      _main_message_add(tok.slice(4).join(" "));
    }
    else {
      console.log("unknown message: ", dat);
    }
  }


}

function _init_websocket() {
  var sock = new WebSocket("ws://" + _fqADDRESS);

  sock.onopen = function(e) { console.log("open", e); }
  sock.onmessage = function(e) { _ws_process(e.data); }

  sock.onclose = function(e) {
    console.log("close", e);
    setTimeout( function() { _init_websocket(); }, 1000);
  }

  sock.onerror = function(e) {
    console.log("error", e);
  }
}

//-------------

var ui_pattern = {
  "state" : "idle",
  "lastX" : 0,
  "lastY" : 0,
  "curX" : 0,
  "curY" : 0
};

function ui_pattern_mousedown(ev) {
  var ele = document.getElementById("body");
  var rect = ele.getBoundingClientRect();

  var x = ev["x"];
  var y = ev["y"];

  var width = rect.width;
  var height = rect.height;

  if (ui_pattern.state == "idle") {

    if (y < (height/4)) {
      ui_pattern.state = "square_0";
    }
    else {
      ui_pattern.state = "idle"
    }

  }

  else if (ui_pattern.state == "square_0") {
    if (x > (3*width/4)) {
      ui_pattern.state = "square_1";
    }
    else {
      ui_pattern.state = "idle"
    }
  }

  else if (ui_pattern.state == "square_1") {
    if (y > (3*height/4)) {
      ui_pattern.state = "square_2";
    }
    else {
      ui_pattern.state = "idle"
    }
  }

  else if (ui_pattern.state == "square_2") {
    if (x < (width/4)) {
      ui_pattern.state = "square_3";
    }
    else {
      ui_pattern.state = "idle"
    }

  }

  else if (ui_pattern.state == "square_3") {
    if (y < (height/4)) {
      ui_pattern.state = "square_4";
    }
    else {
      ui_pattern.state = "idle"
    }

  }

  else if (ui_pattern.state == "square_4") {
    if (x > (3*width/4)) {
      ui_pattern.state = "square_5";
    }
    else {
      ui_pattern.state = "idle"
    }
  }

  else if (ui_pattern.state == "square_5") {
    if (y > (3*height/4)) {
      ui_pattern.state = "square_6";
    }
    else {
      ui_pattern.state = "idle"
    }
  }

  else if (ui_pattern.state == "square_6") {
    if (x < (width/4)) {
      _switch_ui("ui_diagnostic");
    }
    ui_pattern.state = "idle"
  }

  return false;
}

function ui_pattern_mouseup(ev) {
  return false;
}

//------------

function _mainscreen() {
  _switch_ui('ui_login');
  g_ctx.driver_login_state = "driver";
  _clear_ui_driver();
  _clear_ui_paddle();
}

function _configuration() {
  _switch_ui('ui_configuration');
  g_ctx.driver_login_state = "driver";
  _clear_ui_driver();
  _clear_ui_paddle();
}

function _configuration_back() {
  var ui_prev = "ui_login";
  if (g_ctx.ui_stack.length > 0) {
    ui_prev = g_ctx.ui_stack.pop();
  }

  _switch_ui(ui_prev);

  if (ui_prev == "ui_login") {
    g_ctx.driver_login_state = "driver";
    _clear_ui_driver();
    _clear_ui_paddle();
  }

}

function _eqnum() {
  _switch_ui('ui_eqnum');
  g_ctx.driver_login_state = "driver";

  if (g_ctx.cur_eqnum.length > 0) {
    var ele = document.getElementById("ui_eqnum_eqnum");
    ele.innerHTML = g_ctx.cur_eqnum;
    g_ctx.eqnum = g_ctx.cur_eqnum;
  }

  _clear_ui_driver();
  _clear_ui_paddle();
}

function _reset() {
  _switch_ui('ui_login');
  g_ctx.driver_login_state = "driver";
  _clear_ui_driver();
  _clear_ui_paddle();

  location.reload(true);
}

function _reboot() {

  _api_request("custom", {"function":"reboot"});

  _switch_ui('ui_login');
  g_ctx.driver_login_state = "driver";
  _clear_ui_driver();
  _clear_ui_paddle();
}

function _custom0() {
  _api_request("interfaceupdown", {"interface":"eth0", "state":"up"});
}

function _custom1() {
  _api_request("interfaceupdown", {"interface":"eth0", "state":"down"});
}

function _update_diagnostic_window(_msg) {
  var ele = document.getElementById("ui_diagnostic_view");
  ele.innerHTML = _msg;
}

function _custom2() {
  _api_request("interfaceinfo", {"interface":"eth0"}, _update_diagnostic_window);
}

function _custom3() {
  _api_request("say", {"message":"speech test"});
}

function _custom4() {
}

function _custom5() {
}

//------------

function _set_eqnum() {
  if (g_ctx.eqnum.length == 0) { return; }
  _api_request("eqnum", {"eqnum":g_ctx.eqnum}, function(inp) { console.log("eqnum ok:", inp); }, function(inp) { console.log("eqnum error:", inp); });
}

function _eqnum_input(inp) {
  var n = g_ctx.eqnum.length;

  if (inp == 'cancel')    { _switch_ui('ui_login'); }
  else if (inp == 'ok')   {
    _set_eqnum();
    _switch_ui('ui_login');
    return;
  }
  else if (inp == 'bksp') { g_ctx.eqnum = g_ctx.eqnum.substr(0, n-1); }
  else if (inp == 'clr')  { g_ctx.eqnum = ""; }
  else                    { g_ctx.eqnum  += inp; }

  // Otherwise update the displayed equipment number
  //
  var ele = document.getElementById('ui_eqnum_eqnum');
  ele.innerHTML = g_ctx.eqnum;
}


//-------------

function _text_width_height() {
  var _t = document.getElementById("ui_test");
  console.log(">>>", _t.clientHeight, _t.clientWidth);
}

function _calculate_ui_main_status_width_height() {
  var _t = document.getElementById("ui_test");
  var ch_w = _t.clientWidth;
  var ch_h = _t.clientHeight;

  var _w = document.getElementById("ui_main_status");
  var win_w = _w.clientWidth;
  var win_h = _w.clientHeight;

  var n_w = Math.floor(win_w / ch_w);
  var n_h = Math.floor(win_h / ch_h);

  return {"n_width": n_w, "n_height":n_h};
}

function _init_dim_overlay() {
  var ele = document.getElementById("ui_dim_overlay");
}

function init() {

  _init_websocket();
  _init_dim_overlay();

  window.setInterval(_update_display_time, 200);
  window.setInterval(_update_login_time, 200);
  window.setInterval(_update_login_date, 200);
  window.setInterval(_update_dimclock_datetime, 200);

  // watchdog
  //
  document.getElementById('ui_watchdog_btn').onclick = _watchdog_tripped;

  // diagnostics
  //
  document.getElementById('ui_diagnostic_mainscreen').onclick = _mainscreen;
  document.getElementById('ui_diagnostic_reset').onclick = _reset;
  document.getElementById('ui_diagnostic_reboot').onclick = _reboot;

  document.getElementById('ui_diagnostic_custom0').onclick = _custom0;
  document.getElementById('ui_diagnostic_custom1').onclick = _custom1;
  document.getElementById('ui_diagnostic_custom2').onclick = _custom2;

  document.getElementById('ui_diagnostic_custom3').onclick = _custom3;
  document.getElementById('ui_diagnostic_custom4').onclick = _custom4;
  document.getElementById('ui_diagnostic_custom5').onclick = _custom5;

  // configuration
  //
  //document.getElementById('ui_configuration_back').onclick = _mainscreen;
  document.getElementById('ui_configuration_back').onclick = _configuration_back;
  //document.getElementById('ui_configuration_volumetest').onclick = _volume_test;
  document.getElementById('ui_configuration_eqnum').onclick = _eqnum;

  // equipment number change
  //
  document.getElementById('ui_eqnum_cancel').onclick = _mainscreen;
  document.getElementById('ui_eqnum_ok').onclick = function() { console.log("eqnum change"); }


  // login
  //
  document.getElementById('ui_login_login').onclick = _login;
  document.getElementById('ui_login_configuration').onclick = _configuration;
  document.getElementById('ui_driverincorrect_btn').onclick = _driver_incorrect;
  document.getElementById('ui_paddleunknown_btn').onclick = _paddle_unknown;

  // main menu buttons
  //
  document.getElementById('ui_main_prv').onclick = _main_prv;
  document.getElementById('ui_main_nxt').onclick = _main_nxt;

  document.getElementById('ui_main_bulk').onclick = _main_bulk;
  document.getElementById('ui_main_menu').onclick = _main_menu;

  document.getElementById('ui_main_dim').onclick = _main_dim;

  // dim
  //
  document.getElementById('ui_dim_btn').onclick = _dim_wakeup;

  document.getElementById('ui_dimclock_btn').onclick = _dim_soft_wakeup;

  var simple_fares   = [ "adult", "youth", "half", "bike", "wheelchair", "transfer"];
  var simple_fares_f = [ _fare_adult, _fare_youth, _fare_half, _fare_bike, _fare_wheelchair, _fare_transfer];
  for (var ii=0; ii<simple_fares.length; ii++) {
    var fare = simple_fares[ii];
    document.getElementById('ui_main_' + fare).onclick = simple_fares_f[ii];
  }

  // bulk menu buttons
  //
  document.getElementById('ui_bulk_passes').onclick =
    function() {
      var ele;
      ele = document.getElementById("ui_bulk_misc");
      ele.classList.remove("highlight");
      ele = document.getElementById("ui_bulk_passes");
      ele.classList.add("highlight");

      _hide_ui_element("ui_bulk_misc_tab");
      _show_ui_element("ui_bulk_passes_tab");
    };

  document.getElementById('ui_bulk_misc').onclick =
    function() {
      var ele;
      ele = document.getElementById("ui_bulk_misc");
      ele.classList.add("highlight");
      ele = document.getElementById("ui_bulk_passes");
      ele.classList.remove("highlight");


      _show_ui_element("ui_bulk_misc_tab");
      _hide_ui_element("ui_bulk_passes_tab");
    };

  document.getElementById('ui_bulk_menu').onclick = function() { _switch_ui("ui_main"); }

  // Setup "Bulk" UI accept buttons to do proper screen switching and
  // other tasks.
  //
  var bulk_pass = ["adult", "youth", "half", "event", "transfer", "interline",
                    "schoola", "schoolb", "schoolc", "orga", "orgb", "orgc"];
  var bulk_rule = ["BULK-CASH-ADULT", "BULK-CASH-YOUTH", "BULK-CASH-HALF",
                   "BULK-MISC-EVENT", "BULK-MISC-TRANSFER", "BULK-MISC-INTERLINE",
                   "BULK-OVR-SCHOOLA", "BULK-OVR-SCHOOLB", "BULK-OVR-SCHOOLC",
                   "BULK-OVR-ORGA", "BULK-OVR-ORGB", "BULK-OVR-ORGC"];
  var bulk_pass_name = ["Adult Cash", "Youth Cash", "Half Cash", "Special Event", "Transfer", "Interline",
                        "School A", "School B", "School C", "Org A", "Org B", "Org C"];

  // use site specific values if available, otherwise default to the above
  //
  if ((typeof BULK_PASS !== "undefined") && (BULK_PASS.length > 0)) {
    bulk_pass = BULK_PASS;
  }

  if ((typeof BULK_RULE !== "undefined") && (BULK_RULE.length > 0)) {
    bulk_rule= BULK_RULE;
  }

  if ((typeof BULK_PASS_NAME !== "undefined") && (BULK_PASS_NAME.length > 0)) {
    bulk_pass_name = BULK_PASS_NAME;
  }

  for (var i=0; i<bulk_pass.length; i++) {
    var p = bulk_pass[i];
    var u = bulk_pass_name[i];
    var r = bulk_rule[i];
    var ele = document.getElementById('ui_bulk_' + p);
    ele.onclick = (function(x,y) {
      return function() {
        _clear_ui_bulkaccept();
        g_ctx.bulkfare = x;
        _switch_ui("ui_bulkaccept");
        var ee = document.getElementById("ui_bulkaccept_faretype");
        ee.innerHTML = y;
      };
    })(r, u);
  }

  // bulk accept fares
  //
  document.getElementById('ui_bulkaccept_ok').onclick = _bulkaccept_ok;
  document.getElementById('ui_bulkaccept_cancel').onclick = _bulkaccept_cancel;


  // fareoverride menu buttons
  //
  document.getElementById('ui_fareoverride_misc').onclick =
    function() {
      var ele;
      ele = document.getElementById("ui_fareoverride_misc");
      ele.classList.add("highlight");
      ele = document.getElementById("ui_fareoverride_passes");
      ele.classList.remove("highlight");
      ele = document.getElementById("ui_fareoverride_options");
      ele.classList.remove("highlight");

      _show_ui_element("ui_fareoverride_misc_tab");
      _hide_ui_element("ui_fareoverride_passes_tab");
      _hide_ui_element("ui_fareoverride_options_tab");
    };

  document.getElementById('ui_fareoverride_passes').onclick =
    function() {
      var ele;
      ele = document.getElementById("ui_fareoverride_misc");
      ele.classList.remove("highlight");
      ele = document.getElementById("ui_fareoverride_passes");
      ele.classList.add("highlight");
      ele = document.getElementById("ui_fareoverride_options");
      ele.classList.remove("highlight");

      _hide_ui_element("ui_fareoverride_misc_tab");
      _show_ui_element("ui_fareoverride_passes_tab");
      _hide_ui_element("ui_fareoverride_options_tab");
    };

  document.getElementById('ui_fareoverride_options').onclick =
    function() {
      var ele;
      ele = document.getElementById("ui_fareoverride_misc");
      ele.classList.remove("highlight");
      ele = document.getElementById("ui_fareoverride_passes");
      ele.classList.remove("highlight");
      ele = document.getElementById("ui_fareoverride_options");
      ele.classList.add("highlight");

      _hide_ui_element("ui_fareoverride_misc_tab");
      _hide_ui_element("ui_fareoverride_passes_tab");
      _show_ui_element("ui_fareoverride_options_tab");
    };

  document.getElementById('ui_fareoverride_menu').onclick = function() { _switch_ui("ui_main"); };

  document.getElementById('ui_fareoverride_config').onclick =
    function() {
      g_ctx.ui_stack.push("ui_fareoverride");
      _switch_ui("ui_configuration");
    };
  document.getElementById('ui_fareoverride_logout').onclick =
    function() {
      _main_message_clear();
      _api_request("logout");
      _switch_ui("ui_login");
    };

  // default values for override passes
  //
  var override_pass = [ "adult", "youth", "half",
                        "bike", "wheelchair", "transfer",
                        "event", "interline",
                        "schoola", "schoolb", "schoolc",
                        "orga", "orgb", "orgc" ];
  var override_rule = [ "CASH-ADULT", "CASH-YOUTH", "CASH-HALF",
                        "MISC-BIKE", "MISC-WHEELCHAIR", "MISC-TRANSFER",
                        "MISC-EVENT", "MISC-INTERLINE",
                        "OVR-SCHOOLA", "OVR-SCHOOLB", "OVR-SCHOOLC",
                        "OVR-ORGA", "OVR-ORGB", "OVR-ORGC" ];

  // use site specific values if available, otherwise default to the above
  //
  if ((typeof OVERRIDE_PASS !== "undefined") && (OVERRIDE_PASS.length > 0)) {
    override_pass = OVERRIDE_PASS;
  }

  if ((typeof OVERRIDE_RULE !== "undefined") && (OVERRIDE_RULE.length > 0)) {
    override_rule= OVERRIDE_RULE;
  }

  for (var i=0; i<override_pass.length; i++) {
    var p = override_pass[i];
    var r = override_rule[i];
    var ele = document.getElementById("ui_fareoverride_" + p);
    ele.onclick = (function(x,y) {
      return function() { _api_request("fare", {"rule":x,"fare":y,"param":"","count":1}); };
    })(r,p);
  }


  var ui_page = [ "driver", "paddle", "bulkaccept", "eqnum" ];
  var ui_func = [ _driver_login, _paddle_input, _bulkaccept_input, _eqnum_input ];

  for (var idx=0; idx<ui_page.length; idx++) {

    var c = ui_page[idx];
    var f = ui_func[idx];

    for (var i=0; i<=9; i++) {
      document.getElementById('ui_' + c + '_' + i).onclick =
        (function(_f, x) { return function() { _f(x); } })(f, i);
    }
    document.getElementById('ui_' + c + '_' + 'bksp').onclick =
      (function(_f,x) { return function() { _f(x); } })(f, 'bksp');
    document.getElementById('ui_' + c + '_' + 'clr').onclick =
      (function(_f,x) { return function() { _f(x); } })(f, 'clr');
    document.getElementById('ui_' + c + '_' + 'ok').onclick =
      (function(_f,x) { return function() { _f(x); } })(f, 'ok');
    document.getElementById('ui_' + c + '_' + 'cancel').onclick =
      (function(_f,x) { return function() { _f(x); } })(f, 'cancel');

  }

  // set interval to check status every 1 second
  //
  var x = window.setInterval(function() { _api_request("status", {}, _cb_status, _cb_status_err); }, 1000);

  // try and reduce textarea highlighting, drag and drop/copy pasting,
  // and other bad behavor.
  //
  var ele;
  var block_ele;
  var rect;

  ele = document.getElementById("ui_login_status");
  ele.ondragstart = function() { return false; }
  ele.onselectstart = function() { return false; }
  ele.onmousedown = function() { return false; }
  ele.ondragstart = function() { return false; }

  rect = ele.getBoundingClientRect();
  block_ele = document.getElementById("ui_login_blockwindow");
  block_ele.style.width = rect.width;
  block_ele.style.height = rect.height;
  block_ele.style.bottom = rect.bottom;
  block_ele.style.left = rect.left;
  block_ele.style.top = rect.top;
  block_ele.style.right = rect.right;
  block_ele.style.x = rect.x;
  block_ele.style.y = rect.y;

  ele = document.getElementById("ui_main_status");
  ele.ondragstart = function() { return false; }
  ele.onselectstart = function() { return false; }
  ele.onmousedown = function() { return false; }
  ele.ondragstart = function() { return false; }

  rect = ele.getBoundingClientRect();
  block_ele = document.getElementById("ui_main_blockwindow");
  block_ele.style.width = rect.width;
  block_ele.style.height = rect.height;
  block_ele.style.bottom = rect.bottom;
  block_ele.style.left = rect.left;
  block_ele.style.top = rect.top;
  block_ele.style.right = rect.right;
  block_ele.style.x = rect.x;
  block_ele.style.y = rect.y;

  ele = document.getElementById("body");
  // We're using jquery so we need to gracefully add callbacks
  // for mouse events.
  //
  ele.addEventListener('mousedown', ui_pattern_mousedown);
  ele.addEventListener('mouseup', ui_pattern_mouseup);

  g_snd.button_press = new Audio("assets/459992_florianreichelt_beep_short.mp3");
  //g_snd.accept_fare = new Audio("assets/443026__qubodup__public-domain-beep-sound.mp3");
  g_snd.accept_fare = new Audio("assets/389214__joe-anderson22__microwave-beeps.mp3");
  g_snd.reject_fare = new Audio("assets/368780__gurie__start-sound-beep.mp3");
  g_snd.rule_error = new Audio("assets/363920__samsterbirdies__8-bit-error.mp3");

  if (typeof PopufareSiteInit !== "undefined") {
    PopufareSiteInit();
  }

}

(function($) {
  $(document).ready(function() {
    init();
  });
})(jQuery);