popufare/busunit/DIUv2/html/js/diu_ui-ORG.js

/*
 * 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.5";
var DIU_UI_VERSION_DATE = "2019-11-27 13:09:00";

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" : "",

  "current_ui" : "ui_login",

  "ui_change_timeoutid": -1,

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

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

  "status_html_text":"",

  "diu_status" : {},

  "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.addEventListener("load", _api_tick);
  //req.addEventListener("progress", _api_tick);

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

  try {

    //DEBUG
    console.log("req, varstr:", varstr);

    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 _switch_ui(to) {
  var ele;

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

  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") ||
      (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";
}

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

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

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

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

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;

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

function _verify_driver_ok()      { _switch_ui("ui_paddle"); }
function _verify_driver_fail()    { _switch_ui("ui_driverincorrect");  }
function _driver_incorrect(inp)  {
  _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_driver', 'ui_login'); }
  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";

      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;

  _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()    { _switch_ui("ui_main"); }
function _verify_paddle_fail()  { _switch_ui("ui_paddleunknown"); }

function _paddle_unknown(inp)   {
  _clear_ui_paddle();
  _switch_ui("ui_paddle");
}

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

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...");
  _api_request("dim");
  _switch_ui('ui_dim');
}

function _dim_wakeup() {
  console.log("waking up from dim");
  _switch_ui("ui_main");
}

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");

  _show_ui_element("ui_fareoverride_misc_tab");
  _hide_ui_element("ui_fareoverride_passes_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 = prx + 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 = {};
  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();
  }

  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(" ");
    html_a.push("Package   Version   Installed");
    html_a.push(_sp("ui") + _sp(DIU_UI_VERSION) + _sp(DIU_UI_VERSION_DATE) + "");
    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;');
    }

    //span_str = "<div style='float:left; width: 100%; margin: 0 auto; display:block; text-align:left;  background: #770000; color:#008800;'>";
    //span_str = "<div style='float:left; width: 100%; text-align:left;  background: #770000; color:#008800;'>";
    //var div_hdr = "<div style='float:left; width: 100%; text-align:left; '>";
    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);
  }

  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));

    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_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++) {
    html_lines.push(lines[i].slice(0,g_ctx.status_text_w));

    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 _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); }
  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 _reset() {

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

  location.reload(true);

}

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

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

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

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

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


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

function init() {

  _init_websocket();

  // 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;

  // configuration
  //
  document.getElementById('ui_configuration_back').onclick = _mainscreen;


  // 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;

  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_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");

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

  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");

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

  document.getElementById('ui_fareoverride_menu').onclick = function() { _switch_ui("ui_main"); }
  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" ];
  var ui_func = [ _driver_login, _paddle_input, _bulkaccept_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.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);