From 06d797bb3b04217452cf13d8ed12b9544a0a527c Mon Sep 17 00:00:00 2001
From: Faye Li <si.fi.faye.li@gmail.com>
Date: Tue, 31 Jan 2017 14:27:17 -0800
Subject: [PATCH 01/16] load bootstrao

---
 scripts/system/html/users.html | 25 +++++++++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/scripts/system/html/users.html b/scripts/system/html/users.html
index 23de9cf0b0..dd52af0620 100644
--- a/scripts/system/html/users.html
+++ b/scripts/system/html/users.html
@@ -13,6 +13,7 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,600,700"" rel="stylesheet">
+        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
         <style>
             body {
                 margin: 0;
@@ -114,6 +115,21 @@
                 background: linear-gradient(#1080b8, #1080b8);
             }
 
+            input[type=button].white {
+                color: #121212;
+                background-color: #afafaf;
+                background: linear-gradient(#fff 20%, #afafaf 100%);
+            }
+
+            input[type=button].white:hover {
+                background: linear-gradient(#fff, #fff);
+                border: none;
+            }
+
+            input[type=button].white:active {
+                background: linear-gradient(#afafaf, #afafaf);
+            }
+
             #friends-button {
                 margin: 0px 0px 15px 10px;
             }
@@ -128,6 +144,7 @@
             </div>
         </div>
         <div class="main">
+            <input type="button" class="white" id="visibility-toggle" value="Online">
             <ul class="tabs">
                 <li tab-id="tab-1" class="current">Everyone (0)</li>
                 <li tab-id="tab-2">Friends (0)</li>
@@ -141,10 +158,12 @@
             </div>
         </div>
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
+        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
         <script>
             var METAVERSE_API_URL = "https://metaverse.highfidelity.com/api/v1/users?status=online";
             var FRIENDS_FILTER = "&filter=friends";
             var myUsername = null;
+            var myVisibility = null;
 
             function displayUsers(data, element) {
                 element.empty();
@@ -201,10 +220,12 @@
                     // Parse the string into an object
                     event = JSON.parse(event);
                 }
-                if (event.type === "sendUsername") {
+                if (event.type === "user-info") {
                     myUsername = event.data.username;
+                    myVisibility = event.data.visibility;
                     $("#dev-div").append("<p>myUsername is " + myUsername + "</p>");
-                    consoloe.log("myUsername is " + myUsername);
+                    $("#dev-div").append("<p>myVisibility is " + myVisibility + "</p>");
+                    $("#visibility-toggle").prop("value", myVisibility);
                 }
             }
 

From fda20694b3afe067a274d01991f1bbce21e51dd0 Mon Sep 17 00:00:00 2001
From: Faye Li <si.fi.faye.li@gmail.com>
Date: Tue, 31 Jan 2017 15:47:51 -0800
Subject: [PATCH 02/16] jump to user confimation modal

---
 scripts/system/html/users.html | 96 ++++++++++++++++++++++++++++------
 1 file changed, 81 insertions(+), 15 deletions(-)

diff --git a/scripts/system/html/users.html b/scripts/system/html/users.html
index dd52af0620..0b55490aed 100644
--- a/scripts/system/html/users.html
+++ b/scripts/system/html/users.html
@@ -30,7 +30,7 @@
                 font-weight: bold;
             }
 
-            .top-bar .container {
+            .top-bar .myContainer {
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
@@ -100,51 +100,97 @@
                 cursor: pointer;
             }
 
+            input[type=button].red {
+                color: #fff;
+                background-color: #94132e;
+                background: linear-gradient(#d42043 20%, #94132e 100%);
+            }
             input[type=button].blue {
                 color: #fff;
                 background-color: #1080b8;
                 background: linear-gradient(#00b4ef 20%, #1080b8 100%);
             }
-
-            input[type=button].blue:hover {
-                background: linear-gradient(#00b4ef, #00b4ef);
-                border: none;
-            }
-
-            input[type=button].blue:active {
-                background: linear-gradient(#1080b8, #1080b8);
-            }
-
             input[type=button].white {
                 color: #121212;
                 background-color: #afafaf;
                 background: linear-gradient(#fff 20%, #afafaf 100%);
             }
 
-            input[type=button].white:hover {
+            input[type=button]:enabled:hover {
+                background: linear-gradient(#000, #000);
+                border: none;
+            }
+            input[type=button].red:enabled:hover {
+                background: linear-gradient(#d42043, #d42043);
+                border: none;
+            }
+            input[type=button].blue:enabled:hover {
+                background: linear-gradient(#00b4ef, #00b4ef);
+                border: none;
+            }
+            input[type=button].white:enabled:hover {
                 background: linear-gradient(#fff, #fff);
                 border: none;
             }
 
+            input[type=button]:active {
+                background: linear-gradient(#343434, #343434);
+            }
+            input[type=button].red:active {
+                background: linear-gradient(#94132e, #94132e);
+            }
+            input[type=button].blue:active {
+                background: linear-gradient(#1080b8, #1080b8);
+            }
             input[type=button].white:active {
                 background: linear-gradient(#afafaf, #afafaf);
             }
 
+            input[type=button]:disabled {
+                color: #252525;
+                background: linear-gradient(#575757 20%, #252525 100%);
+            }
+
+            input[type=button][pressed=pressed] {
+                color: #00b4ef;
+            }
+
             #friends-button {
                 margin: 0px 0px 15px 10px;
             }
 
+            /*Vertically Center Modal*/
+            .modal {
+              color: black;
+              text-align: center;
+              padding: 0!important;
+            }
+
+            .modal:before {
+              content: '';
+              display: inline-block;
+              height: 100%;
+              vertical-align: middle;
+              margin-right: -4px;
+            }
+
+            .modal-dialog {
+              display: inline-block;
+              text-align: left;
+              vertical-align: middle;
+            }
+
         </style>
     </head>
     <body>
         <div class="top-bar">
-            <div class="container">
+            <div class="myContainer">
                 <div>Users Online</div>
                 <img id="refresh-button" onclick="pollUsers()" src="https://hifi-content.s3.amazonaws.com/faye/tablet-dev/refresh-icon.svg"></img>
             </div>
         </div>
         <div class="main">
-            <input type="button" class="white" id="visibility-toggle" value="Online">
+<!--             <input type="button" class="white" id="visibility-toggle" value="Online"> -->
             <ul class="tabs">
                 <li tab-id="tab-1" class="current">Everyone (0)</li>
                 <li tab-id="tab-2">Friends (0)</li>
@@ -157,6 +203,26 @@
                 <input type="button" class="blue" id="friends-button" value="Add/Remove Friends">
             </div>
         </div>
+
+        <!-- Modal -->
+        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
+          <div class="modal-dialog" role="document">
+            <div class="modal-content">
+              <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                <h4 class="modal-title" id="myModalLabel">Jump to username @ Placename</h4>
+              </div>
+              <div class="modal-body">
+                This will teleport you to new location and possibly another domain. Are you sure?
+              </div>
+              <div class="modal-footer">
+                <input type="button" data-dismiss="modal" value="Cancel">
+                <input type="button" data-dismiss="modal" value="OK">
+              </div>
+            </div>
+          </div>
+        </div>
+
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
         <script>
@@ -177,7 +243,7 @@
                         // Don't display yourself
                         if (data.users[i].username !== myUsername) {
                             console.log(data.users[i].username + " @ " + data.users[i].location.root.name);
-                            element.append("<li>" + data.users[i].username + " @ " + data.users[i].location.root.name + "</li>");
+                            element.append("<li data-toggle='modal' data-target='#myModal'>" + data.users[i].username + " @ " + data.users[i].location.root.name + "</li>");
                         }
                     }
                 }

From 59aea60be0c7c8c8b6cf02f7057a7cb0b665d47c Mon Sep 17 00:00:00 2001
From: Faye Li <si.fi.faye.li@gmail.com>
Date: Tue, 31 Jan 2017 16:16:40 -0800
Subject: [PATCH 03/16] fill confirmation modal with data of the selected user

---
 scripts/system/html/users.html | 23 +++++++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/scripts/system/html/users.html b/scripts/system/html/users.html
index 0b55490aed..98c3db38c7 100644
--- a/scripts/system/html/users.html
+++ b/scripts/system/html/users.html
@@ -243,7 +243,14 @@
                         // Don't display yourself
                         if (data.users[i].username !== myUsername) {
                             console.log(data.users[i].username + " @ " + data.users[i].location.root.name);
-                            element.append("<li data-toggle='modal' data-target='#myModal'>" + data.users[i].username + " @ " + data.users[i].location.root.name + "</li>");
+                            // Create a list item and put user info in data-* attributes, also make it trigger the jump to confirmation modal
+                            $("<li></li>", {
+                                "data-toggle": "modal",
+                                "data-target": "#myModal",
+                                "data-username": data.users[i].username,
+                                "data-placename": data.users[i].location.root.name,
+                                text: data.users[i].username + " @ " + data.users[i].location.root.name
+                            }).appendTo(element);
                         }
                     }
                 }
@@ -309,6 +316,18 @@
                     $(this).addClass("current");
                 });
 
+                // Jump to user: Fill confirmation modal with data of the selected user
+                $("#myModal").on("show.bs.modal", function (event) {
+                    // Get the element that triggered the modal
+                    var li = $(event.relatedTarget); 
+                    // Extract info from data-* attributes
+                    var username = li.data("username");
+                    var placename = li.data("placename");
+                    // Write info to the modal
+                    var modal = $(this);
+                    modal.find(".modal-title").text("Jump to " + username + " @ " + placename);
+                })
+
                 // Listen for events from hifi
                 EventBridge.scriptEventReceived.connect(onScriptEventReceived);
                 
@@ -316,7 +335,7 @@
                 var eventObject = {"type": "ready"};
                 EventBridge.emitWebEvent(JSON.stringify(eventObject));
 
-                // Click listener mangage friends button
+                // Click listener for add/remove friends button
                 $("#friends-button").click(function() {
                     // Send a manage friends event to hifi
                     eventObject = {"type": "manage-friends"};

From fc1e5885888a84525613f50899446d456f5dfb71 Mon Sep 17 00:00:00 2001
From: Faye Li <si.fi.faye.li@gmial.com>
Date: Wed, 1 Feb 2017 10:34:54 -0800
Subject: [PATCH 04/16] sending and recieving jump to event

---
 scripts/system/html/users.html | 12 +++++++++++-
 scripts/system/users.js        | 31 ++++++++++++++++++++++++++++---
 2 files changed, 39 insertions(+), 4 deletions(-)

diff --git a/scripts/system/html/users.html b/scripts/system/html/users.html
index 98c3db38c7..f3e1a96309 100644
--- a/scripts/system/html/users.html
+++ b/scripts/system/html/users.html
@@ -217,7 +217,7 @@
               </div>
               <div class="modal-footer">
                 <input type="button" data-dismiss="modal" value="Cancel">
-                <input type="button" data-dismiss="modal" value="OK">
+                <input type="button" data-dismiss="modal" id="jump-to-confirm-button" value="OK">
               </div>
             </div>
           </div>
@@ -328,6 +328,16 @@
                     modal.find(".modal-title").text("Jump to " + username + " @ " + placename);
                 })
 
+                $("#jump-to-confirm-button").click(function() {
+                    var jumpToObject = {
+                        "type": "jump-to",
+                        "data": {
+                            "username": "Alan_"
+                        }
+                    }
+                    EventBridge.emitWebEvent(JSON.stringify(jumpToObject));
+                });
+
                 // Listen for events from hifi
                 EventBridge.scriptEventReceived.connect(onScriptEventReceived);
                 
diff --git a/scripts/system/users.js b/scripts/system/users.js
index 7930892395..b952795570 100644
--- a/scripts/system/users.js
+++ b/scripts/system/users.js
@@ -12,10 +12,26 @@
 
 (function() { // BEGIN LOCAL_SCOPE
     var USERS_URL = "https://hifi-content.s3.amazonaws.com/faye/tablet-dev/users.html";
+
     var FRIENDS_WINDOW_URL = "https://metaverse.highfidelity.com/user/friends";
     var FRIENDS_WINDOW_WIDTH = 290;
     var FRIENDS_WINDOW_HEIGHT = 500;
     var FRIENDS_WINDOW_TITLE = "Add/Remove Friends";
+
+    // Initialise visibility based on global service
+    var VISIBILITY_VALUES_SET = {};
+    VISIBILITY_VALUES_SET["all"] = true;
+    VISIBILITY_VALUES_SET["friends"] = true;
+    VISIBILITY_VALUES_SET["none"] = true;
+    var myVisibility;
+    if (GlobalServices.findableBy in VISIBILITY_VALUES_SET) {
+        myVisibility = GlobalServices.findableBy;
+    } else {
+        // default to friends if it can't be determined
+        myVisibility = "friends";
+        GlobalServices.findableBy = myVisibilty;
+    }
+
     var tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
     var button = tablet.addButton({
         icon: "icons/tablet-icons/people-i.svg",
@@ -35,10 +51,13 @@
             // send username to html
             var myUsername = GlobalServices.username;
             var object = {
-                "type": "sendUsername",
-                "data": {"username": myUsername}
+                "type": "user-info",
+                "data": {
+                    "username": myUsername,
+                    "visibility": myVisibility
+                }
             };
-            print("sending username: " + myUsername);
+            print("sending user info: " + JSON.stringify(object));
             tablet.emitScriptEvent(JSON.stringify(object));
         }
         if (event.type === "manage-friends") {
@@ -53,6 +72,12 @@
             friendsWindow.setVisible(true);
             friendsWindow.raise();
         }
+        if (event.type === "jump-to") {
+            if (typeof event.data.username !== undefined) {
+                // teleport to selected user from the online users list
+                location.goToUser(event.data.username);
+            }
+        }
     }
 
     button.clicked.connect(onClicked);

From 3f84e5778cb418f3465d1429d788e0b97bf179dd Mon Sep 17 00:00:00 2001
From: Faye Li <si.fi.faye.li@gmial.com>
Date: Wed, 1 Feb 2017 10:45:18 -0800
Subject: [PATCH 05/16] jump to the selected user

---
 scripts/system/html/users.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/scripts/system/html/users.html b/scripts/system/html/users.html
index f3e1a96309..1d5ce88233 100644
--- a/scripts/system/html/users.html
+++ b/scripts/system/html/users.html
@@ -190,7 +190,6 @@
             </div>
         </div>
         <div class="main">
-<!--             <input type="button" class="white" id="visibility-toggle" value="Online"> -->
             <ul class="tabs">
                 <li tab-id="tab-1" class="current">Everyone (0)</li>
                 <li tab-id="tab-2">Friends (0)</li>
@@ -326,13 +325,14 @@
                     // Write info to the modal
                     var modal = $(this);
                     modal.find(".modal-title").text("Jump to " + username + " @ " + placename);
+                    $("#jump-to-confirm-button").data("username", username);
                 })
 
                 $("#jump-to-confirm-button").click(function() {
                     var jumpToObject = {
                         "type": "jump-to",
                         "data": {
-                            "username": "Alan_"
+                            "username": $(this).data("username")
                         }
                     }
                     EventBridge.emitWebEvent(JSON.stringify(jumpToObject));

From 594633978207fa797e5626562b6c8683271d4611 Mon Sep 17 00:00:00 2001
From: Faye Li <si.fi.faye.li@gmial.com>
Date: Wed, 1 Feb 2017 10:52:37 -0800
Subject: [PATCH 06/16] move my changes to a different file

---
 scripts/system/{users.js => tablet-users.js} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename scripts/system/{users.js => tablet-users.js} (100%)

diff --git a/scripts/system/users.js b/scripts/system/tablet-users.js
similarity index 100%
rename from scripts/system/users.js
rename to scripts/system/tablet-users.js

From 4e209399da80b2656343287f547c2a387489f8d0 Mon Sep 17 00:00:00 2001
From: Faye Li <si.fi.faye.li@gmial.com>
Date: Wed, 1 Feb 2017 10:58:03 -0800
Subject: [PATCH 07/16] fix conflict

---
 scripts/system/users.js | 1280 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 1280 insertions(+)
 create mode 100644 scripts/system/users.js

diff --git a/scripts/system/users.js b/scripts/system/users.js
new file mode 100644
index 0000000000..009c446ff3
--- /dev/null
+++ b/scripts/system/users.js
@@ -0,0 +1,1280 @@
+"use strict";
+
+//
+//  users.js
+//  examples
+//
+//  Created by David Rowe on 9 Mar 2015.
+//  Copyright 2015 High Fidelity, Inc.
+//
+//  Distributed under the Apache License, Version 2.0.
+//  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
+//
+/*globals HMD, Toolbars, Script, Menu, Overlays, Tablet, Controller, Settings, OverlayWebWindow, Account, GlobalServices */
+
+(function() { // BEGIN LOCAL_SCOPE
+var button;
+var buttonName = "USERS";
+var toolBar = null;
+var tablet = null;
+
+var MENU_ITEM = "Users Online";
+
+if (Settings.getValue("HUDUIEnabled")) {
+    toolBar = Toolbars.getToolbar("com.highfidelity.interface.toolbar.system");
+    button = toolBar.addButton({
+        objectName: buttonName,
+        imageURL: Script.resolvePath("assets/images/tools/people.svg"),
+        visible: true,
+        alpha: 0.9
+    });
+} else {
+    tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
+    button = tablet.addButton({
+        icon: "icons/tablet-icons/users-i.svg",
+        text: "USERS",
+        isActive: Menu.isOptionChecked(MENU_ITEM)
+    });
+}
+
+
+function onClicked() {
+    Menu.setIsOptionChecked(MENU_ITEM, !Menu.isOptionChecked(MENU_ITEM));
+    button.editProperties({isActive: Menu.isOptionChecked(MENU_ITEM)});
+}
+button.clicked.connect(onClicked);
+
+// resolve these paths immediately
+var MIN_MAX_BUTTON_SVG = Script.resolvePath("assets/images/tools/min-max-toggle.svg");
+var BASE_URL = Script.resolvePath("assets/images/tools/");
+
+var PopUpMenu = function (properties) {
+    var value = properties.value,
+        promptOverlay,
+        valueOverlay,
+        buttonOverlay,
+        optionOverlays = [],
+        isDisplayingOptions = false,
+        OPTION_MARGIN = 4,
+
+        MIN_MAX_BUTTON_SVG_WIDTH = 17.1,
+        MIN_MAX_BUTTON_SVG_HEIGHT = 32.5,
+        MIN_MAX_BUTTON_WIDTH = 14,
+        MIN_MAX_BUTTON_HEIGHT = MIN_MAX_BUTTON_WIDTH;
+
+    function positionDisplayOptions() {
+        var y,
+            i;
+
+        y = properties.y - (properties.values.length - 1) * properties.lineHeight - OPTION_MARGIN;
+
+        for (i = 0; i < properties.values.length; i += 1) {
+            Overlays.editOverlay(optionOverlays[i], {
+                y: y
+            });
+            y += properties.lineHeight;
+        }
+    }
+
+    function showDisplayOptions() {
+        var i,
+            yOffScreen = Controller.getViewportDimensions().y;
+
+        for (i = 0; i < properties.values.length; i += 1) {
+            optionOverlays[i] = Overlays.addOverlay("text", {
+                x: properties.x + properties.promptWidth,
+                y: yOffScreen,
+                width: properties.width - properties.promptWidth,
+                height: properties.textHeight + OPTION_MARGIN, // Only need to add margin at top to balance descenders
+                topMargin: OPTION_MARGIN,
+                leftMargin: OPTION_MARGIN,
+                color: properties.optionColor,
+                alpha: properties.optionAlpha,
+                backgroundColor: properties.popupBackgroundColor,
+                backgroundAlpha: properties.popupBackgroundAlpha,
+                text: properties.displayValues[i],
+                font: properties.font,
+                visible: true
+            });
+        }
+
+        positionDisplayOptions();
+
+        isDisplayingOptions = true;
+    }
+
+    function deleteDisplayOptions() {
+        var i;
+
+        for (i = 0; i < optionOverlays.length; i += 1) {
+            Overlays.deleteOverlay(optionOverlays[i]);
+        }
+
+        isDisplayingOptions = false;
+    }
+
+    function handleClick(overlay) {
+        var clicked = false,
+            i;
+
+        if (overlay === valueOverlay || overlay === buttonOverlay) {
+            showDisplayOptions();
+            return true;
+        }
+
+        if (isDisplayingOptions) {
+            for (i = 0; i < optionOverlays.length; i += 1) {
+                if (overlay === optionOverlays[i]) {
+                    value = properties.values[i];
+                    Overlays.editOverlay(valueOverlay, {
+                        text: properties.displayValues[i]
+                    });
+                    clicked = true;
+                }
+            }
+
+            deleteDisplayOptions();
+        }
+
+        return clicked;
+    }
+
+    function updatePosition(x, y) {
+        properties.x = x;
+        properties.y = y;
+        Overlays.editOverlay(promptOverlay, {
+            x: x,
+            y: y
+        });
+        Overlays.editOverlay(valueOverlay, {
+            x: x + properties.promptWidth,
+            y: y - OPTION_MARGIN
+        });
+        Overlays.editOverlay(buttonOverlay, {
+            x: x + properties.width - MIN_MAX_BUTTON_WIDTH - 1,
+            y: y - OPTION_MARGIN + 1
+        });
+        if (isDisplayingOptions) {
+            positionDisplayOptions();
+        }
+    }
+
+    function setVisible(visible) {
+        Overlays.editOverlay(promptOverlay, {
+            visible: visible
+        });
+        Overlays.editOverlay(valueOverlay, {
+            visible: visible
+        });
+        Overlays.editOverlay(buttonOverlay, {
+            visible: visible
+        });
+    }
+
+    function tearDown() {
+        Overlays.deleteOverlay(promptOverlay);
+        Overlays.deleteOverlay(valueOverlay);
+        Overlays.deleteOverlay(buttonOverlay);
+        if (isDisplayingOptions) {
+            deleteDisplayOptions();
+        }
+    }
+
+    function getValue() {
+        return value;
+    }
+
+    function setValue(newValue) {
+        var index;
+
+        index = properties.values.indexOf(newValue);
+        if (index !== -1) {
+            value = newValue;
+            Overlays.editOverlay(valueOverlay, {
+                text: properties.displayValues[index]
+            });
+        }
+    }
+
+    promptOverlay = Overlays.addOverlay("text", {
+        x: properties.x,
+        y: properties.y,
+        width: properties.promptWidth,
+        height: properties.textHeight,
+        topMargin: 0,
+        leftMargin: 0,
+        color: properties.promptColor,
+        alpha: properties.promptAlpha,
+        backgroundColor: properties.promptBackgroundColor,
+        backgroundAlpha: properties.promptBackgroundAlpha,
+        text: properties.prompt,
+        font: properties.font,
+        visible: properties.visible
+    });
+
+    valueOverlay = Overlays.addOverlay("text", {
+        x: properties.x + properties.promptWidth,
+        y: properties.y,
+        width: properties.width - properties.promptWidth,
+        height: properties.textHeight + OPTION_MARGIN, // Only need to add margin at top to balance descenders
+        topMargin: OPTION_MARGIN,
+        leftMargin: OPTION_MARGIN,
+        color: properties.optionColor,
+        alpha: properties.optionAlpha,
+        backgroundColor: properties.optionBackgroundColor,
+        backgroundAlpha: properties.optionBackgroundAlpha,
+        text: properties.displayValues[properties.values.indexOf(value)],
+        font: properties.font,
+        visible: properties.visible
+    });
+
+    buttonOverlay = Overlays.addOverlay("image", {
+        x: properties.x + properties.width - MIN_MAX_BUTTON_WIDTH - 1,
+        y: properties.y,
+        width: MIN_MAX_BUTTON_WIDTH,
+        height: MIN_MAX_BUTTON_HEIGHT,
+        imageURL: MIN_MAX_BUTTON_SVG,
+        subImage: {
+            x: 0,
+            y: 0,
+            width: MIN_MAX_BUTTON_SVG_WIDTH,
+            height: MIN_MAX_BUTTON_SVG_HEIGHT / 2
+        },
+        //color: properties.buttonColor,
+        alpha: properties.buttonAlpha,
+        visible: properties.visible
+    });
+
+    return {
+        updatePosition: updatePosition,
+        setVisible: setVisible,
+        handleClick: handleClick,
+        tearDown: tearDown,
+        getValue: getValue,
+        setValue: setValue
+    };
+};
+
+var usersWindow = (function () {
+
+    var WINDOW_WIDTH = 260,
+        WINDOW_MARGIN = 12,
+        WINDOW_BASE_MARGIN = 24, // A little less is needed in order look correct
+        WINDOW_FONT = {
+            size: 12
+        },
+        WINDOW_FOREGROUND_COLOR = {
+            red: 240,
+            green: 240,
+            blue: 240
+        },
+        WINDOW_FOREGROUND_ALPHA = 0.95,
+        WINDOW_HEADING_COLOR = {
+            red: 180,
+            green: 180,
+            blue: 180
+        },
+        WINDOW_HEADING_ALPHA = 0.95,
+        WINDOW_BACKGROUND_COLOR = {
+            red: 80,
+            green: 80,
+            blue: 80
+        },
+        WINDOW_BACKGROUND_ALPHA = 0.8,
+        windowPane,
+        windowHeading,
+
+        // Margin on the left and right side of the window to keep
+        // it from getting too close to the edge of the screen which
+        // is unclickable.
+        WINDOW_MARGIN_X = 20,
+
+        // Window border is similar to that of edit.js.
+        WINDOW_MARGIN_HALF = WINDOW_MARGIN / 2,
+        WINDOW_BORDER_WIDTH = WINDOW_WIDTH + 2 * WINDOW_MARGIN_HALF,
+        WINDOW_BORDER_TOP_MARGIN = 2 * WINDOW_MARGIN_HALF,
+        WINDOW_BORDER_BOTTOM_MARGIN = WINDOW_MARGIN_HALF,
+        WINDOW_BORDER_LEFT_MARGIN = WINDOW_MARGIN_HALF,
+        WINDOW_BORDER_RADIUS = 4,
+        WINDOW_BORDER_COLOR = { red: 255, green: 255, blue: 255 },
+        WINDOW_BORDER_ALPHA = 0.5,
+        windowBorder,
+
+        MIN_MAX_BUTTON_SVG = BASE_URL + "min-max-toggle.svg",
+        MIN_MAX_BUTTON_SVG_WIDTH = 17.1,
+        MIN_MAX_BUTTON_SVG_HEIGHT = 32.5,
+        MIN_MAX_BUTTON_WIDTH = 14,
+        MIN_MAX_BUTTON_HEIGHT = MIN_MAX_BUTTON_WIDTH,
+        MIN_MAX_BUTTON_COLOR = {
+            red: 255,
+            green: 255,
+            blue: 255
+        },
+        MIN_MAX_BUTTON_ALPHA = 0.9,
+        minimizeButton,
+        SCROLLBAR_BACKGROUND_WIDTH = 12,
+        SCROLLBAR_BACKGROUND_COLOR = {
+            red: 70,
+            green: 70,
+            blue: 70
+        },
+        SCROLLBAR_BACKGROUND_ALPHA = 0.8,
+        scrollbarBackground,
+        SCROLLBAR_BAR_MIN_HEIGHT = 5,
+        SCROLLBAR_BAR_COLOR = {
+            red: 170,
+            green: 170,
+            blue: 170
+        },
+        SCROLLBAR_BAR_ALPHA = 0.8,
+        SCROLLBAR_BAR_SELECTED_ALPHA = 0.95,
+        scrollbarBar,
+        scrollbarBackgroundHeight,
+        scrollbarBarHeight,
+        FRIENDS_BUTTON_SPACER = 6, // Space before add/remove friends button
+        FRIENDS_BUTTON_SVG = BASE_URL + "add-remove-friends.svg",
+        FRIENDS_BUTTON_SVG_WIDTH = 107,
+        FRIENDS_BUTTON_SVG_HEIGHT = 27,
+        FRIENDS_BUTTON_WIDTH = FRIENDS_BUTTON_SVG_WIDTH,
+        FRIENDS_BUTTON_HEIGHT = FRIENDS_BUTTON_SVG_HEIGHT,
+        FRIENDS_BUTTON_COLOR = {
+            red: 225,
+            green: 225,
+            blue: 225
+        },
+        FRIENDS_BUTTON_ALPHA = 0.95,
+        FRIENDS_WINDOW_URL = "https://metaverse.highfidelity.com/user/friends",
+        FRIENDS_WINDOW_WIDTH = 290,
+        FRIENDS_WINDOW_HEIGHT = 500,
+        FRIENDS_WINDOW_TITLE = "Add/Remove Friends",
+        friendsButton,
+        friendsWindow,
+
+        OPTION_BACKGROUND_COLOR = {
+            red: 60,
+            green: 60,
+            blue: 60
+        },
+        OPTION_BACKGROUND_ALPHA = 0.1,
+
+        DISPLAY_SPACER = 12, // Space before display control
+        DISPLAY_PROMPT = "Show me:",
+        DISPLAY_PROMPT_WIDTH = 60,
+        DISPLAY_EVERYONE = "everyone",
+        DISPLAY_FRIENDS = "friends",
+        DISPLAY_VALUES = [DISPLAY_EVERYONE, DISPLAY_FRIENDS],
+        DISPLAY_DISPLAY_VALUES = DISPLAY_VALUES,
+        DISPLAY_OPTIONS_BACKGROUND_COLOR = {
+            red: 120,
+            green: 120,
+            blue: 120
+        },
+        DISPLAY_OPTIONS_BACKGROUND_ALPHA = 0.9,
+        displayControl,
+
+        VISIBILITY_SPACER = 6, // Space before visibility control
+        VISIBILITY_PROMPT = "Visible to:",
+        VISIBILITY_PROMPT_WIDTH = 60,
+        VISIBILITY_ALL = "all",
+        VISIBILITY_FRIENDS = "friends",
+        VISIBILITY_NONE = "none",
+        VISIBILITY_VALUES = [VISIBILITY_ALL, VISIBILITY_FRIENDS, VISIBILITY_NONE],
+        VISIBILITY_DISPLAY_VALUES = ["everyone", "friends", "no one"],
+        visibilityControl,
+
+        windowHeight,
+        windowBorderHeight,
+        windowTextHeight,
+        windowLineSpacing,
+        windowLineHeight, // = windowTextHeight + windowLineSpacing
+        windowMinimumHeight,
+
+        usersOnline, // Raw users data
+        linesOfUsers = [], // Array of indexes pointing into usersOnline
+        numUsersToDisplay = 0,
+        firstUserToDisplay = 0,
+
+        API_URL = "https://metaverse.highfidelity.com/api/v1/users?status=online",
+        API_FRIENDS_FILTER = "&filter=friends",
+        HTTP_GET_TIMEOUT = 60000, // ms = 1 minute
+        usersRequest,
+        processUsers,
+        pollUsersTimedOut,
+        usersTimer = null,
+        USERS_UPDATE_TIMEOUT = 5000, // ms = 5s
+
+        showMe,
+        myVisibility,
+
+        MENU_NAME = "View",
+        MENU_ITEM = "Users Online",
+        MENU_ITEM_OVERLAYS = "Overlays",
+        MENU_ITEM_AFTER = MENU_ITEM_OVERLAYS,
+
+        SETTING_USERS_SHOW_ME = "UsersWindow.ShowMe",
+        SETTING_USERS_VISIBLE_TO = "UsersWindow.VisibleTo",
+        SETTING_USERS_WINDOW_MINIMIZED = "UsersWindow.Minimized",
+        SETTING_USERS_WINDOW_OFFSET = "UsersWindow.Offset",
+        // +ve x, y values are offset from left, top of screen; -ve from right, bottom.
+
+        isLoggedIn = false,
+        isVisible = true,
+        isMinimized = false,
+        isBorderVisible = false,
+
+        viewport,
+        isMirrorDisplay = false,
+        isFullscreenMirror = false,
+
+        windowPosition = {},  // Bottom left corner of window pane.
+        isMovingWindow = false,
+        movingClickOffset = { x: 0, y: 0 },
+
+        isUsingScrollbars = false,
+        isMovingScrollbar = false,
+        scrollbarBackgroundPosition = {},
+        scrollbarBarPosition = {},
+        scrollbarBarClickedAt, // 0.0 .. 1.0
+        scrollbarValue = 0.0; // 0.0 .. 1.0
+
+    function isWindowDisabled() {
+        return !Menu.isOptionChecked(MENU_ITEM) || !Menu.isOptionChecked(MENU_ITEM_OVERLAYS);
+    }
+
+    function isValueTrue(value) {
+        // Work around Boolean Settings values being read as string when Interface starts up but as Booleans when re-read after
+        // Being written if refresh script.
+        return value === true || value === "true";
+    }
+
+    function calculateWindowHeight() {
+        var AUDIO_METER_HEIGHT = 52,
+            MIRROR_HEIGHT = 220,
+            nonUsersHeight,
+            maxWindowHeight;
+
+        if (isMinimized) {
+            windowHeight = windowTextHeight + WINDOW_MARGIN + WINDOW_BASE_MARGIN;
+            windowBorderHeight = windowHeight + WINDOW_BORDER_TOP_MARGIN + WINDOW_BORDER_BOTTOM_MARGIN;
+            return;
+        }
+
+        // Reserve space for title, friends button, and option controls
+        nonUsersHeight = WINDOW_MARGIN + windowLineHeight +
+            (shouldShowFriendsButton() ? FRIENDS_BUTTON_SPACER + FRIENDS_BUTTON_HEIGHT : 0) +
+            DISPLAY_SPACER +
+            windowLineHeight + VISIBILITY_SPACER +
+            windowLineHeight + WINDOW_BASE_MARGIN;
+
+        // Limit window to height of viewport above window position minus VU meter and mirror if displayed
+        windowHeight = linesOfUsers.length * windowLineHeight - windowLineSpacing + nonUsersHeight;
+        maxWindowHeight = windowPosition.y - AUDIO_METER_HEIGHT;
+        if (isMirrorDisplay && !isFullscreenMirror) {
+            maxWindowHeight -= MIRROR_HEIGHT;
+        }
+        windowHeight = Math.max(Math.min(windowHeight, maxWindowHeight), nonUsersHeight);
+        windowBorderHeight = windowHeight + WINDOW_BORDER_TOP_MARGIN + WINDOW_BORDER_BOTTOM_MARGIN;
+
+        // Corresponding number of users to actually display
+        numUsersToDisplay = Math.max(Math.round((windowHeight - nonUsersHeight) / windowLineHeight), 0);
+        isUsingScrollbars = 0 < numUsersToDisplay && numUsersToDisplay < linesOfUsers.length;
+        if (isUsingScrollbars) {
+            firstUserToDisplay = Math.floor(scrollbarValue * (linesOfUsers.length - numUsersToDisplay));
+        } else {
+            firstUserToDisplay = 0;
+            scrollbarValue = 0.0;
+        }
+    }
+
+    function saturateWindowPosition() {
+        windowPosition.x = Math.max(WINDOW_MARGIN_X, Math.min(viewport.x - WINDOW_WIDTH - WINDOW_MARGIN_X, windowPosition.x));
+        windowPosition.y = Math.max(windowMinimumHeight, Math.min(viewport.y, windowPosition.y));
+    }
+
+    function updateOverlayPositions() {
+        // Overlay positions are all relative to windowPosition; windowPosition is the position of the windowPane overlay.
+        var windowLeft = windowPosition.x,
+            windowTop = windowPosition.y - windowHeight,
+            x,
+            y;
+
+        Overlays.editOverlay(windowBorder, {
+            x: windowPosition.x - WINDOW_BORDER_LEFT_MARGIN,
+            y: windowTop - WINDOW_BORDER_TOP_MARGIN
+        });
+        Overlays.editOverlay(windowPane, {
+            x: windowLeft,
+            y: windowTop
+        });
+        Overlays.editOverlay(windowHeading, {
+            x: windowLeft + WINDOW_MARGIN,
+            y: windowTop + WINDOW_MARGIN
+        });
+
+        Overlays.editOverlay(minimizeButton, {
+            x: windowLeft + WINDOW_WIDTH - WINDOW_MARGIN / 2 - MIN_MAX_BUTTON_WIDTH,
+            y: windowTop + WINDOW_MARGIN
+        });
+
+        scrollbarBackgroundPosition.x = windowLeft + WINDOW_WIDTH - 0.5 * WINDOW_MARGIN - SCROLLBAR_BACKGROUND_WIDTH;
+        scrollbarBackgroundPosition.y = windowTop + WINDOW_MARGIN + windowTextHeight;
+        Overlays.editOverlay(scrollbarBackground, {
+            x: scrollbarBackgroundPosition.x,
+            y: scrollbarBackgroundPosition.y
+        });
+        scrollbarBarPosition.y = scrollbarBackgroundPosition.y + 1 +
+            scrollbarValue * (scrollbarBackgroundHeight - scrollbarBarHeight - 2);
+        Overlays.editOverlay(scrollbarBar, {
+            x: scrollbarBackgroundPosition.x + 1,
+            y: scrollbarBarPosition.y
+        });
+
+
+        x = windowLeft + WINDOW_MARGIN;
+        y = windowPosition.y -
+            DISPLAY_SPACER -
+            windowLineHeight - VISIBILITY_SPACER -
+            windowLineHeight - WINDOW_BASE_MARGIN;
+        if (shouldShowFriendsButton()) {
+            y -= FRIENDS_BUTTON_HEIGHT;
+            Overlays.editOverlay(friendsButton, {
+                x: x,
+                y: y
+            });
+            y += FRIENDS_BUTTON_HEIGHT;
+        }
+
+        y += DISPLAY_SPACER;
+        displayControl.updatePosition(x, y);
+
+        y += windowLineHeight + VISIBILITY_SPACER;
+        visibilityControl.updatePosition(x, y);
+    }
+
+    function updateUsersDisplay() {
+        var displayText = "",
+            user,
+            userText,
+            textWidth,
+            maxTextWidth,
+            ellipsisWidth,
+            reducedTextWidth,
+            i;
+
+        if (!isMinimized) {
+            maxTextWidth = WINDOW_WIDTH - (isUsingScrollbars ? SCROLLBAR_BACKGROUND_WIDTH : 0) - 2 * WINDOW_MARGIN;
+            ellipsisWidth = Overlays.textSize(windowPane, "...").width;
+            reducedTextWidth = maxTextWidth - ellipsisWidth;
+
+            for (i = 0; i < numUsersToDisplay; i += 1) {
+                user = usersOnline[linesOfUsers[firstUserToDisplay + i]];
+                userText = user.text;
+                textWidth = user.textWidth;
+
+                if (textWidth > maxTextWidth) {
+                    // Trim and append "..." to fit window width
+                    maxTextWidth = maxTextWidth - Overlays.textSize(windowPane, "...").width;
+                    while (textWidth > reducedTextWidth) {
+                        userText = userText.slice(0, -1);
+                        textWidth = Overlays.textSize(windowPane, userText).width;
+                    }
+                    userText += "...";
+                }
+
+                displayText += "\n" + userText;
+            }
+
+            displayText = displayText.slice(1); // Remove leading "\n".
+
+            scrollbarBackgroundHeight = numUsersToDisplay * windowLineHeight - windowLineSpacing / 2;
+            Overlays.editOverlay(scrollbarBackground, {
+                height: scrollbarBackgroundHeight,
+                visible: isLoggedIn && isUsingScrollbars
+            });
+            scrollbarBarHeight = Math.max(numUsersToDisplay / linesOfUsers.length * scrollbarBackgroundHeight,
+                SCROLLBAR_BAR_MIN_HEIGHT);
+            Overlays.editOverlay(scrollbarBar, {
+                height: scrollbarBarHeight,
+                visible: isLoggedIn && isUsingScrollbars
+            });
+        }
+
+        Overlays.editOverlay(windowBorder, {
+            height: windowBorderHeight
+        });
+
+        Overlays.editOverlay(windowPane, {
+            height: windowHeight,
+            text: displayText
+        });
+
+        Overlays.editOverlay(windowHeading, {
+            text: isLoggedIn ? (linesOfUsers.length > 0 ? "Users online" : "No users online") : "Users online - log in to view"
+        });
+    }
+
+    function shouldShowFriendsButton() {
+        return isVisible && isLoggedIn && !isMinimized;
+    }
+
+    function updateOverlayVisibility() {
+        Overlays.editOverlay(windowBorder, {
+            visible: isVisible && isBorderVisible
+        });
+        Overlays.editOverlay(windowPane, {
+            visible: isVisible
+        });
+        Overlays.editOverlay(windowHeading, {
+            visible: isVisible
+        });
+        Overlays.editOverlay(minimizeButton, {
+            visible: isVisible
+        });
+        Overlays.editOverlay(scrollbarBackground, {
+            visible: isVisible && isUsingScrollbars && !isMinimized
+        });
+        Overlays.editOverlay(scrollbarBar, {
+            visible: isVisible && isUsingScrollbars && !isMinimized
+        });
+        Overlays.editOverlay(friendsButton, {
+            visible: shouldShowFriendsButton()
+        });
+        displayControl.setVisible(isVisible && !isMinimized);
+        visibilityControl.setVisible(isVisible && !isMinimized);
+    }
+
+    function checkLoggedIn() {
+        var wasLoggedIn = isLoggedIn;
+
+        isLoggedIn = Account.isLoggedIn();
+        if (isLoggedIn !== wasLoggedIn) {
+            if (wasLoggedIn) {
+                setMinimized(true);
+                calculateWindowHeight();
+                updateOverlayPositions();
+                updateUsersDisplay();
+            }
+
+            updateOverlayVisibility();
+        }
+    }
+
+    function pollUsers() {
+        var url = API_URL;
+
+        if (showMe === DISPLAY_FRIENDS) {
+            url += API_FRIENDS_FILTER;
+        }
+
+        usersRequest = new XMLHttpRequest();
+        usersRequest.open("GET", url, true);
+        usersRequest.timeout = HTTP_GET_TIMEOUT;
+        usersRequest.ontimeout = pollUsersTimedOut;
+        usersRequest.onreadystatechange = processUsers;
+        usersRequest.send();
+    }
+
+    processUsers = function () {
+        var response,
+            myUsername,
+            user,
+            userText,
+            i;
+
+        if (usersRequest.readyState === usersRequest.DONE) {
+            if (usersRequest.status === 200) {
+                response = JSON.parse(usersRequest.responseText);
+                if (response.status !== "success") {
+                    print("Error: Request for users status returned status = " + response.status);
+                    usersTimer = Script.setTimeout(pollUsers, HTTP_GET_TIMEOUT); // Try again after a longer delay.
+                    return;
+                }
+                if (!response.hasOwnProperty("data") || !response.data.hasOwnProperty("users")) {
+                    print("Error: Request for users status returned invalid data");
+                    usersTimer = Script.setTimeout(pollUsers, HTTP_GET_TIMEOUT); // Try again after a longer delay.
+                    return;
+                }
+
+                usersOnline = response.data.users;
+                myUsername = GlobalServices.username;
+                linesOfUsers = [];
+                for (i = 0; i < usersOnline.length; i += 1) {
+                    user = usersOnline[i];
+                    if (user.username !== myUsername && user.online) {
+                        userText = user.username;
+                        if (user.location.root) {
+                            userText += " @ " + user.location.root.name;
+                        }
+
+                        usersOnline[i].text = userText;
+                        usersOnline[i].textWidth = Overlays.textSize(windowPane, userText).width;
+
+                        linesOfUsers.push(i);
+                    }
+                }
+
+                checkLoggedIn();
+                calculateWindowHeight();
+                updateUsersDisplay();
+                updateOverlayPositions();
+
+            } else {
+                print("Error: Request for users status returned " + usersRequest.status + " " + usersRequest.statusText);
+                usersTimer = Script.setTimeout(pollUsers, HTTP_GET_TIMEOUT); // Try again after a longer delay.
+                return;
+            }
+
+            usersTimer = Script.setTimeout(pollUsers, USERS_UPDATE_TIMEOUT); // Update after finished processing.
+        }
+    };
+
+    pollUsersTimedOut = function () {
+        print("Error: Request for users status timed out");
+        usersTimer = Script.setTimeout(pollUsers, HTTP_GET_TIMEOUT); // Try again after a longer delay.
+    };
+
+    function setVisible(visible) {
+        isVisible = visible;
+
+        if (isVisible) {
+            if (usersTimer === null) {
+                pollUsers();
+            }
+        } else {
+            Script.clearTimeout(usersTimer);
+            usersTimer = null;
+        }
+
+        updateOverlayVisibility();
+    }
+
+    function setMinimized(minimized) {
+        isMinimized = minimized;
+        Overlays.editOverlay(minimizeButton, {
+            subImage: {
+                y: isMinimized ? MIN_MAX_BUTTON_SVG_HEIGHT / 2 : 0
+            }
+        });
+        updateOverlayVisibility();
+        Settings.setValue(SETTING_USERS_WINDOW_MINIMIZED, isMinimized);
+    }
+
+    function onMenuItemEvent(event) {
+        if (event === MENU_ITEM) {
+            setVisible(Menu.isOptionChecked(MENU_ITEM));
+        }
+    }
+
+    function onFindableByChanged(event) {
+        if (VISIBILITY_VALUES.indexOf(event) !== -1) {
+            myVisibility = event;
+            visibilityControl.setValue(event);
+            Settings.setValue(SETTING_USERS_VISIBLE_TO, myVisibility);
+        } else {
+            print("Error: Unrecognized onFindableByChanged value: " + event);
+        }
+    }
+
+    function onMousePressEvent(event) {
+        var clickedOverlay,
+            numLinesBefore,
+            overlayX,
+            overlayY,
+            minY,
+            maxY,
+            lineClicked,
+            userClicked,
+            delta;
+
+        if (!isVisible || isWindowDisabled()) {
+            return;
+        }
+
+        clickedOverlay = Overlays.getOverlayAtPoint({
+            x: event.x,
+            y: event.y
+        });
+
+        if (displayControl.handleClick(clickedOverlay)) {
+            if (usersTimer !== null) {
+                Script.clearTimeout(usersTimer);
+                usersTimer = null;
+            }
+            pollUsers();
+            showMe = displayControl.getValue();
+            Settings.setValue(SETTING_USERS_SHOW_ME, showMe);
+            return;
+        }
+
+        if (visibilityControl.handleClick(clickedOverlay)) {
+            myVisibility = visibilityControl.getValue();
+            GlobalServices.findableBy = myVisibility;
+            Settings.setValue(SETTING_USERS_VISIBLE_TO, myVisibility);
+            return;
+        }
+
+        if (clickedOverlay === windowPane) {
+
+            overlayX = event.x - windowPosition.x - WINDOW_MARGIN;
+            overlayY = event.y - windowPosition.y + windowHeight - WINDOW_MARGIN - windowLineHeight;
+
+            numLinesBefore = Math.round(overlayY / windowLineHeight);
+            minY = numLinesBefore * windowLineHeight;
+            maxY = minY + windowTextHeight;
+
+            lineClicked = -1;
+            if (minY <= overlayY && overlayY <= maxY) {
+                lineClicked = numLinesBefore;
+            }
+
+            userClicked = firstUserToDisplay + lineClicked;
+
+            if (0 <= userClicked && userClicked < linesOfUsers.length && 0 <= overlayX &&
+                overlayX <= usersOnline[linesOfUsers[userClicked]].textWidth) {
+                //print("Go to " + usersOnline[linesOfUsers[userClicked]].username);
+                location.goToUser(usersOnline[linesOfUsers[userClicked]].username);
+            }
+
+            return;
+        }
+
+        if (clickedOverlay === minimizeButton) {
+            setMinimized(!isMinimized);
+            calculateWindowHeight();
+            updateOverlayPositions();
+            updateUsersDisplay();
+            return;
+        }
+
+        if (clickedOverlay === scrollbarBar) {
+            scrollbarBarClickedAt = (event.y - scrollbarBarPosition.y) / scrollbarBarHeight;
+            Overlays.editOverlay(scrollbarBar, {
+                backgroundAlpha: SCROLLBAR_BAR_SELECTED_ALPHA
+            });
+            isMovingScrollbar = true;
+            return;
+        }
+
+        if (clickedOverlay === scrollbarBackground) {
+            delta = scrollbarBarHeight / (scrollbarBackgroundHeight - scrollbarBarHeight);
+
+            if (event.y < scrollbarBarPosition.y) {
+                scrollbarValue = Math.max(scrollbarValue - delta, 0.0);
+            } else {
+                scrollbarValue = Math.min(scrollbarValue + delta, 1.0);
+            }
+
+            firstUserToDisplay = Math.floor(scrollbarValue * (linesOfUsers.length - numUsersToDisplay));
+            updateOverlayPositions();
+            updateUsersDisplay();
+            return;
+        }
+
+        if (clickedOverlay === friendsButton) {
+            if (!friendsWindow) {
+                friendsWindow = new OverlayWebWindow({
+                    title: FRIENDS_WINDOW_TITLE,
+                    width: FRIENDS_WINDOW_WIDTH,
+                    height: FRIENDS_WINDOW_HEIGHT,
+                    visible: false
+                });
+            }
+            friendsWindow.setURL(FRIENDS_WINDOW_URL);
+            friendsWindow.setVisible(true);
+            friendsWindow.raise();
+            return;
+        }
+
+        if (clickedOverlay === windowBorder) {
+            movingClickOffset = {
+                x: event.x - windowPosition.x,
+                y: event.y - windowPosition.y
+            };
+
+            isMovingWindow = true;
+        }
+    }
+
+    function onMouseMoveEvent(event) {
+        var isVisible;
+
+        if (!isLoggedIn || isWindowDisabled()) {
+            return;
+        }
+
+        if (isMovingScrollbar) {
+            if (scrollbarBackgroundPosition.x - WINDOW_MARGIN <= event.x &&
+                event.x <= scrollbarBackgroundPosition.x + SCROLLBAR_BACKGROUND_WIDTH + WINDOW_MARGIN &&
+                scrollbarBackgroundPosition.y - WINDOW_MARGIN <= event.y &&
+                event.y <= scrollbarBackgroundPosition.y + scrollbarBackgroundHeight + WINDOW_MARGIN) {
+                scrollbarValue = (event.y - scrollbarBarClickedAt * scrollbarBarHeight - scrollbarBackgroundPosition.y) /
+                    (scrollbarBackgroundHeight - scrollbarBarHeight - 2);
+                scrollbarValue = Math.min(Math.max(scrollbarValue, 0.0), 1.0);
+                firstUserToDisplay = Math.floor(scrollbarValue * (linesOfUsers.length - numUsersToDisplay));
+                updateOverlayPositions();
+                updateUsersDisplay();
+            } else {
+                Overlays.editOverlay(scrollbarBar, {
+                    backgroundAlpha: SCROLLBAR_BAR_ALPHA
+                });
+                isMovingScrollbar = false;
+            }
+        }
+
+        if (isMovingWindow) {
+            windowPosition = {
+                x: event.x - movingClickOffset.x,
+                y: event.y - movingClickOffset.y
+            };
+
+            saturateWindowPosition();
+            calculateWindowHeight();
+            updateOverlayPositions();
+            updateUsersDisplay();
+
+        } else {
+
+            isVisible = isBorderVisible;
+            if (isVisible) {
+                isVisible = windowPosition.x - WINDOW_BORDER_LEFT_MARGIN <= event.x &&
+                    event.x <= windowPosition.x - WINDOW_BORDER_LEFT_MARGIN + WINDOW_BORDER_WIDTH &&
+                    windowPosition.y - windowHeight - WINDOW_BORDER_TOP_MARGIN <= event.y &&
+                    event.y <= windowPosition.y + WINDOW_BORDER_BOTTOM_MARGIN;
+            } else {
+                isVisible = windowPosition.x <= event.x && event.x <= windowPosition.x + WINDOW_WIDTH &&
+                    windowPosition.y - windowHeight <= event.y && event.y <= windowPosition.y;
+            }
+            if (isVisible !== isBorderVisible) {
+                isBorderVisible = isVisible;
+                Overlays.editOverlay(windowBorder, {
+                    visible: isBorderVisible
+                });
+            }
+        }
+    }
+
+    function onMouseReleaseEvent() {
+        var offset = {};
+
+        if (isWindowDisabled()) {
+            return;
+        }
+
+        if (isMovingScrollbar) {
+            Overlays.editOverlay(scrollbarBar, {
+                backgroundAlpha: SCROLLBAR_BAR_ALPHA
+            });
+            isMovingScrollbar = false;
+        }
+
+        if (isMovingWindow) {
+            // Save offset of bottom of window to nearest edge of the window.
+            offset.x = (windowPosition.x + WINDOW_WIDTH / 2 < viewport.x / 2) ?
+                windowPosition.x : windowPosition.x - viewport.x;
+            offset.y = (windowPosition.y < viewport.y / 2) ?
+                windowPosition.y : windowPosition.y - viewport.y;
+            Settings.setValue(SETTING_USERS_WINDOW_OFFSET, JSON.stringify(offset));
+            isMovingWindow = false;
+        }
+    }
+
+    function onScriptUpdate() {
+        var oldViewport = viewport,
+            oldIsMirrorDisplay = isMirrorDisplay,
+            oldIsFullscreenMirror = isFullscreenMirror,
+            MIRROR_MENU_ITEM = "Mirror",
+            FULLSCREEN_MIRROR_MENU_ITEM = "Fullscreen Mirror";
+
+        if (isWindowDisabled()) {
+            return;
+        }
+
+        viewport = Controller.getViewportDimensions();
+        isMirrorDisplay = Menu.isOptionChecked(MIRROR_MENU_ITEM);
+        isFullscreenMirror = Menu.isOptionChecked(FULLSCREEN_MIRROR_MENU_ITEM);
+
+        if (viewport.y !== oldViewport.y || isMirrorDisplay !== oldIsMirrorDisplay ||
+            isFullscreenMirror !== oldIsFullscreenMirror) {
+            calculateWindowHeight();
+            updateUsersDisplay();
+        }
+
+        if (viewport.y !== oldViewport.y) {
+            if (windowPosition.y > oldViewport.y / 2) {
+                // Maintain position w.r.t. bottom of window.
+                windowPosition.y = viewport.y - (oldViewport.y - windowPosition.y);
+            }
+        }
+
+        if (viewport.x !== oldViewport.x) {
+            if (windowPosition.x + (WINDOW_WIDTH / 2) > oldViewport.x / 2) {
+                // Maintain position w.r.t. right of window.
+                windowPosition.x = viewport.x - (oldViewport.x - windowPosition.x);
+            }
+        }
+
+        updateOverlayPositions();
+    }
+
+    function setUp() {
+        var textSizeOverlay,
+            offsetSetting,
+            offset = {},
+            hmdViewport;
+
+        textSizeOverlay = Overlays.addOverlay("text", {
+            font: WINDOW_FONT,
+            visible: false
+        });
+        windowTextHeight = Math.floor(Overlays.textSize(textSizeOverlay, "1").height);
+        windowLineSpacing = Math.floor(Overlays.textSize(textSizeOverlay, "1\n2").height - 2 * windowTextHeight);
+        windowLineHeight = windowTextHeight + windowLineSpacing;
+        windowMinimumHeight = windowTextHeight + WINDOW_MARGIN + WINDOW_BASE_MARGIN;
+        Overlays.deleteOverlay(textSizeOverlay);
+
+        viewport = Controller.getViewportDimensions();
+
+        offsetSetting = Settings.getValue(SETTING_USERS_WINDOW_OFFSET);
+        if (offsetSetting !== "") {
+            offset = JSON.parse(Settings.getValue(SETTING_USERS_WINDOW_OFFSET));
+        }
+        if (offset.hasOwnProperty("x") && offset.hasOwnProperty("y")) {
+            windowPosition.x = offset.x < 0 ? viewport.x + offset.x : offset.x;
+            windowPosition.y = offset.y <= 0 ? viewport.y + offset.y : offset.y;
+        } else {
+            hmdViewport = Controller.getRecommendedOverlayRect();
+            windowPosition = {
+                x: (viewport.x - hmdViewport.width) / 2,  // HMD viewport is narrower than screen.
+                y: hmdViewport.height  // HMD viewport starts at top of screen but only extends down so far.
+            };
+        }
+
+        saturateWindowPosition();
+        calculateWindowHeight();
+
+        windowBorder = Overlays.addOverlay("rectangle", {
+            x: 0,
+            y: viewport.y,   // Start up off-screen
+            width: WINDOW_BORDER_WIDTH,
+            height: windowBorderHeight,
+            radius: WINDOW_BORDER_RADIUS,
+            color: WINDOW_BORDER_COLOR,
+            alpha: WINDOW_BORDER_ALPHA,
+            visible: false
+        });
+
+        windowPane = Overlays.addOverlay("text", {
+            x: 0,
+            y: viewport.y,
+            width: WINDOW_WIDTH,
+            height: windowHeight,
+            topMargin: WINDOW_MARGIN + windowLineHeight,
+            leftMargin: WINDOW_MARGIN,
+            color: WINDOW_FOREGROUND_COLOR,
+            alpha: WINDOW_FOREGROUND_ALPHA,
+            backgroundColor: WINDOW_BACKGROUND_COLOR,
+            backgroundAlpha: WINDOW_BACKGROUND_ALPHA,
+            text: "",
+            font: WINDOW_FONT,
+            visible: false
+        });
+
+        windowHeading = Overlays.addOverlay("text", {
+            x: 0,
+            y: viewport.y,
+            width: WINDOW_WIDTH - 2 * WINDOW_MARGIN,
+            height: windowTextHeight,
+            topMargin: 0,
+            leftMargin: 0,
+            color: WINDOW_HEADING_COLOR,
+            alpha: WINDOW_HEADING_ALPHA,
+            backgroundAlpha: 0.0,
+            text: "Users online",
+            font: WINDOW_FONT,
+            visible: false
+        });
+
+        minimizeButton = Overlays.addOverlay("image", {
+            x: 0,
+            y: viewport.y,
+            width: MIN_MAX_BUTTON_WIDTH,
+            height: MIN_MAX_BUTTON_HEIGHT,
+            imageURL: MIN_MAX_BUTTON_SVG,
+            subImage: {
+                x: 0,
+                y: 0,
+                width: MIN_MAX_BUTTON_SVG_WIDTH,
+                height: MIN_MAX_BUTTON_SVG_HEIGHT / 2
+            },
+            color: MIN_MAX_BUTTON_COLOR,
+            alpha: MIN_MAX_BUTTON_ALPHA,
+            visible: false
+        });
+
+        scrollbarBackgroundPosition = {
+            x: 0,
+            y: viewport.y
+        };
+        scrollbarBackground = Overlays.addOverlay("text", {
+            x: 0,
+            y: scrollbarBackgroundPosition.y,
+            width: SCROLLBAR_BACKGROUND_WIDTH,
+            height: windowTextHeight,
+            backgroundColor: SCROLLBAR_BACKGROUND_COLOR,
+            backgroundAlpha: SCROLLBAR_BACKGROUND_ALPHA,
+            text: "",
+            visible: false
+        });
+
+        scrollbarBarPosition = {
+            x: 0,
+            y: viewport.y
+        };
+        scrollbarBar = Overlays.addOverlay("text", {
+            x: 0,
+            y: scrollbarBarPosition.y,
+            width: SCROLLBAR_BACKGROUND_WIDTH - 2,
+            height: windowTextHeight,
+            backgroundColor: SCROLLBAR_BAR_COLOR,
+            backgroundAlpha: SCROLLBAR_BAR_ALPHA,
+            text: "",
+            visible: false
+        });
+
+        friendsButton = Overlays.addOverlay("image", {
+            x: 0,
+            y: viewport.y,
+            width: FRIENDS_BUTTON_WIDTH,
+            height: FRIENDS_BUTTON_HEIGHT,
+            imageURL: FRIENDS_BUTTON_SVG,
+            subImage: {
+                x: 0,
+                y: 0,
+                width: FRIENDS_BUTTON_SVG_WIDTH,
+                height: FRIENDS_BUTTON_SVG_HEIGHT
+            },
+            color: FRIENDS_BUTTON_COLOR,
+            alpha: FRIENDS_BUTTON_ALPHA,
+            visible: false
+        });
+
+        showMe = Settings.getValue(SETTING_USERS_SHOW_ME, "");
+        if (DISPLAY_VALUES.indexOf(showMe) === -1) {
+            showMe = DISPLAY_EVERYONE;
+        }
+
+        displayControl = new PopUpMenu({
+            prompt: DISPLAY_PROMPT,
+            value: showMe,
+            values: DISPLAY_VALUES,
+            displayValues: DISPLAY_DISPLAY_VALUES,
+            x: 0,
+            y: viewport.y,
+            width: WINDOW_WIDTH - 1.5 * WINDOW_MARGIN,
+            promptWidth: DISPLAY_PROMPT_WIDTH,
+            lineHeight: windowLineHeight,
+            textHeight: windowTextHeight,
+            font: WINDOW_FONT,
+            promptColor: WINDOW_HEADING_COLOR,
+            promptAlpha: WINDOW_HEADING_ALPHA,
+            promptBackgroundColor: WINDOW_BACKGROUND_COLOR,
+            promptBackgroundAlpha: 0.0,
+            optionColor: WINDOW_FOREGROUND_COLOR,
+            optionAlpha: WINDOW_FOREGROUND_ALPHA,
+            optionBackgroundColor: OPTION_BACKGROUND_COLOR,
+            optionBackgroundAlpha: OPTION_BACKGROUND_ALPHA,
+            popupBackgroundColor: DISPLAY_OPTIONS_BACKGROUND_COLOR,
+            popupBackgroundAlpha: DISPLAY_OPTIONS_BACKGROUND_ALPHA,
+            buttonColor: MIN_MAX_BUTTON_COLOR,
+            buttonAlpha: MIN_MAX_BUTTON_ALPHA,
+            visible: false
+        });
+
+        myVisibility = Settings.getValue(SETTING_USERS_VISIBLE_TO, "");
+        if (VISIBILITY_VALUES.indexOf(myVisibility) === -1) {
+            myVisibility = VISIBILITY_FRIENDS;
+        }
+        GlobalServices.findableBy = myVisibility;
+
+        visibilityControl = new PopUpMenu({
+            prompt: VISIBILITY_PROMPT,
+            value: myVisibility,
+            values: VISIBILITY_VALUES,
+            displayValues: VISIBILITY_DISPLAY_VALUES,
+            x: 0,
+            y: viewport.y,
+            width: WINDOW_WIDTH - 1.5 * WINDOW_MARGIN,
+            promptWidth: VISIBILITY_PROMPT_WIDTH,
+            lineHeight: windowLineHeight,
+            textHeight: windowTextHeight,
+            font: WINDOW_FONT,
+            promptColor: WINDOW_HEADING_COLOR,
+            promptAlpha: WINDOW_HEADING_ALPHA,
+            promptBackgroundColor: WINDOW_BACKGROUND_COLOR,
+            promptBackgroundAlpha: 0.0,
+            optionColor: WINDOW_FOREGROUND_COLOR,
+            optionAlpha: WINDOW_FOREGROUND_ALPHA,
+            optionBackgroundColor: OPTION_BACKGROUND_COLOR,
+            optionBackgroundAlpha: OPTION_BACKGROUND_ALPHA,
+            popupBackgroundColor: DISPLAY_OPTIONS_BACKGROUND_COLOR,
+            popupBackgroundAlpha: DISPLAY_OPTIONS_BACKGROUND_ALPHA,
+            buttonColor: MIN_MAX_BUTTON_COLOR,
+            buttonAlpha: MIN_MAX_BUTTON_ALPHA,
+            visible: false
+        });
+
+        Controller.mousePressEvent.connect(onMousePressEvent);
+        Controller.mouseMoveEvent.connect(onMouseMoveEvent);
+        Controller.mouseReleaseEvent.connect(onMouseReleaseEvent);
+
+        Menu.addMenuItem({
+            menuName: MENU_NAME,
+            menuItemName: MENU_ITEM,
+            afterItem: MENU_ITEM_AFTER,
+            isCheckable: true,
+            isChecked: isVisible
+        });
+        Menu.menuItemEvent.connect(onMenuItemEvent);
+
+        GlobalServices.findableByChanged.connect(onFindableByChanged);
+
+        Script.update.connect(onScriptUpdate);
+
+        pollUsers();
+
+        // Set minimized at end - setup code does not handle `minimized == false` correctly
+        setMinimized(isValueTrue(Settings.getValue(SETTING_USERS_WINDOW_MINIMIZED, true)));
+    }
+
+    function tearDown() {
+        Menu.removeMenuItem(MENU_NAME, MENU_ITEM);
+
+        Script.clearTimeout(usersTimer);
+        Overlays.deleteOverlay(windowBorder);
+        Overlays.deleteOverlay(windowPane);
+        Overlays.deleteOverlay(windowHeading);
+        Overlays.deleteOverlay(minimizeButton);
+        Overlays.deleteOverlay(scrollbarBackground);
+        Overlays.deleteOverlay(scrollbarBar);
+        Overlays.deleteOverlay(friendsButton);
+        displayControl.tearDown();
+        visibilityControl.tearDown();
+    }
+
+    setUp();
+    Script.scriptEnding.connect(tearDown);
+}());
+
+function cleanup () {
+    //remove tablet button
+    button.clicked.disconnect(onClicked);
+    if (tablet) {
+        tablet.removeButton(button);
+    }
+    if (toolBar) {
+        toolBar.removeButton(buttonName);
+    }
+}
+Script.scriptEnding.connect(cleanup);
+
+}()); // END LOCAL_SCOPE

From 378fdaec8b01e393b940e9369bceda18b5aaee2a Mon Sep 17 00:00:00 2001
From: Faye Li <si.fi.faye.li@gmial.com>
Date: Wed, 1 Feb 2017 11:27:44 -0800
Subject: [PATCH 08/16] the missing commit - fix typo and added user info

---
 scripts/system/html/users.html | 46 ++++++++++++++++++++++++++++++++--
 1 file changed, 44 insertions(+), 2 deletions(-)

diff --git a/scripts/system/html/users.html b/scripts/system/html/users.html
index 1d5ce88233..2a5372fa7b 100644
--- a/scripts/system/html/users.html
+++ b/scripts/system/html/users.html
@@ -48,6 +48,44 @@
                 padding: 30px;
             }
 
+            #user-info-div {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                padding-bottom: 40px;
+            }
+
+            #visibility-toggle-button {
+                font-family: 'Raleway';
+                font-weight: bold;
+                font-size: 13px;
+                text-transform: uppercase;
+                vertical-align: top;
+                height: 28px;
+                min-width: 120px;
+                padding: 0px 18px;
+                margin-right: 0px;
+                border-radius: 5px;
+                border: none;
+                color: #121212;
+                background-color: #afafaf;
+                background: linear-gradient(#fff 20%, #afafaf 100%);
+                cursor: pointer;
+            }
+
+            #visibility-toggle-button:enabled:hover {
+                background: linear-gradient(#fff, #fff);
+                border: none;
+            }
+
+            #visibility-toggle-button:active {
+                background: linear-gradient(#afafaf, #afafaf);
+            }
+
+            #visibility-toggle-button span {
+                padding-left: 10px;
+            }
+
             .tabs {
                 list-style: none;
                 padding: 0;
@@ -190,6 +228,10 @@
             </div>
         </div>
         <div class="main">
+            <div id="user-info-div">
+                <h4>faye @ dev-welcome</h4>
+                <button id="visibility-toggle-button">Online<span class="glyphicon glyphicon-menu-down"></span></button>
+            </div>
             <ul class="tabs">
                 <li tab-id="tab-1" class="current">Everyone (0)</li>
                 <li tab-id="tab-2">Friends (0)</li>
@@ -212,7 +254,7 @@
                 <h4 class="modal-title" id="myModalLabel">Jump to username @ Placename</h4>
               </div>
               <div class="modal-body">
-                This will teleport you to new location and possibly another domain. Are you sure?
+                This will teleport you to a new location and possibly another domain. Are you sure?
               </div>
               <div class="modal-footer">
                 <input type="button" data-dismiss="modal" value="Cancel">
@@ -297,7 +339,7 @@
                     myVisibility = event.data.visibility;
                     $("#dev-div").append("<p>myUsername is " + myUsername + "</p>");
                     $("#dev-div").append("<p>myVisibility is " + myVisibility + "</p>");
-                    $("#visibility-toggle").prop("value", myVisibility);
+                    //$("#visibility-toggle").prop("value", myVisibility);
                 }
             }
 

From 6d55b3c82d83fbdf2e50dcb135850b6d091fedf6 Mon Sep 17 00:00:00 2001
From: Faye Li <si.fi.faye.li@gmial.com>
Date: Wed, 1 Feb 2017 13:45:17 -0800
Subject: [PATCH 09/16] visibility toggle drop down

---
 scripts/system/html/users.html | 56 +++++++++++++++++++++++++++++++---
 1 file changed, 51 insertions(+), 5 deletions(-)

diff --git a/scripts/system/html/users.html b/scripts/system/html/users.html
index 2a5372fa7b..4b4d625242 100644
--- a/scripts/system/html/users.html
+++ b/scripts/system/html/users.html
@@ -55,7 +55,7 @@
                 padding-bottom: 40px;
             }
 
-            #visibility-toggle-button {
+            #visibility-toggle {
                 font-family: 'Raleway';
                 font-weight: bold;
                 font-size: 13px;
@@ -73,16 +73,16 @@
                 cursor: pointer;
             }
 
-            #visibility-toggle-button:enabled:hover {
+            #visibility-toggle:enabled:hover {
                 background: linear-gradient(#fff, #fff);
                 border: none;
             }
 
-            #visibility-toggle-button:active {
+            #visibility-toggle:active {
                 background: linear-gradient(#afafaf, #afafaf);
             }
 
-            #visibility-toggle-button span {
+            #visibility-toggle span {
                 padding-left: 10px;
             }
 
@@ -218,6 +218,31 @@
               vertical-align: middle;
             }
 
+            .dropdown-menu {
+                width: 280px;
+            }
+
+            .dropdown-menu li {
+                color: #333;
+                padding: 10px;
+            }
+
+            .dropdown-menu .divider {
+                padding: 0px;
+            }
+
+            .dropdown-menu li:hover {
+                background: #dcdcdc;
+            }
+
+            .dropdown-menu li h6 {
+                font-weight: bold;
+            }
+
+            .dropdown-menu li p {
+                font-size: 11px;
+            }
+
         </style>
     </head>
     <body>
@@ -230,7 +255,28 @@
         <div class="main">
             <div id="user-info-div">
                 <h4>faye @ dev-welcome</h4>
-                <button id="visibility-toggle-button">Online<span class="glyphicon glyphicon-menu-down"></span></button>
+                <div class="dropdown">
+                    <button id="visibility-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                        Online
+                        <span class="glyphicon glyphicon-menu-down"></span>
+                    </button>
+                    <ul class="dropdown-menu" aria-labelledby="visibility-toggle">
+                        <li>
+                            <h6>Online</h6>
+                            <p>You will be shown online to everyone else. Anybody will be able to find you from the users online list and jump to your current location.</p>
+                        </li>
+                        <li role="separator" class="divider"></li>
+                        <li>
+                            <h6>Available to Friends Only</h6>
+                            <p>You will be shown online only to users you have added as friends. Other users may still interact with you in the same domain, but they won't be able to find you from the users online list.</p>
+                        </li>
+                        <li role="separator" class="divider"></li>
+                        <li>
+                            <h6>Appear Offline</h6>
+                            <p>No one will be able to find you from the users online list. However, this does not prevent other users in the same domain from interacting with you. For a complete "Do not disturb" mode, you may want to your own private domain and set allow entering to no one.</p>
+                        </li>
+                    </ul>
+                </div>
             </div>
             <ul class="tabs">
                 <li tab-id="tab-1" class="current">Everyone (0)</li>

From 3c3ff908b4abb8ec88ccd242ccd1ca491d6654de Mon Sep 17 00:00:00 2001
From: Faye Li <si.fi.faye.li@gmial.com>
Date: Wed, 1 Feb 2017 14:22:13 -0800
Subject: [PATCH 10/16] handling the visibility toggle event

---
 scripts/system/html/users.html | 21 +++++++++++++++++----
 scripts/system/tablet-users.js |  7 +++++++
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/scripts/system/html/users.html b/scripts/system/html/users.html
index 4b4d625242..0444437958 100644
--- a/scripts/system/html/users.html
+++ b/scripts/system/html/users.html
@@ -261,17 +261,17 @@
                         <span class="glyphicon glyphicon-menu-down"></span>
                     </button>
                     <ul class="dropdown-menu" aria-labelledby="visibility-toggle">
-                        <li>
+                        <li class="visibility-option" data-visibility="all">
                             <h6>Online</h6>
                             <p>You will be shown online to everyone else. Anybody will be able to find you from the users online list and jump to your current location.</p>
                         </li>
                         <li role="separator" class="divider"></li>
-                        <li>
+                        <li class="visibility-option" data-visibility="friends">
                             <h6>Available to Friends Only</h6>
                             <p>You will be shown online only to users you have added as friends. Other users may still interact with you in the same domain, but they won't be able to find you from the users online list.</p>
                         </li>
                         <li role="separator" class="divider"></li>
-                        <li>
+                        <li class="visibility-option" data-visibility="none">
                             <h6>Appear Offline</h6>
                             <p>No one will be able to find you from the users online list. However, this does not prevent other users in the same domain from interacting with you. For a complete "Do not disturb" mode, you may want to your own private domain and set allow entering to no one.</p>
                         </li>
@@ -385,7 +385,7 @@
                     myVisibility = event.data.visibility;
                     $("#dev-div").append("<p>myUsername is " + myUsername + "</p>");
                     $("#dev-div").append("<p>myVisibility is " + myVisibility + "</p>");
-                    //$("#visibility-toggle").prop("value", myVisibility);
+                    $("#visibility-toggle").html(myVisibility + "<span class='glyphicon glyphicon-menu-down'></span>")
                 }
             }
 
@@ -426,6 +426,19 @@
                     EventBridge.emitWebEvent(JSON.stringify(jumpToObject));
                 });
 
+                // Click listener for toggling who can see me
+                $(".visibility-option").click(function() {
+                    var newButtonText = $(this).find("h6").text();
+                    $("#visibility-toggle").html(newButtonText + "<span class='glyphicon glyphicon-menu-down'></span>");
+                    var visibilityObject = {
+                        "type": "toggle-visibility",
+                        "data": {
+                            "visibility": $(this).data("visibility")
+                        }
+                    }
+                    EventBridge.emitWebEvent(JSON.stringify(visibilityObject));
+                });
+
                 // Listen for events from hifi
                 EventBridge.scriptEventReceived.connect(onScriptEventReceived);
                 
diff --git a/scripts/system/tablet-users.js b/scripts/system/tablet-users.js
index 5e3b018a53..0fad0c56f3 100644
--- a/scripts/system/tablet-users.js
+++ b/scripts/system/tablet-users.js
@@ -77,6 +77,13 @@
                 location.goToUser(event.data.username);
             }
         }
+        if (event.type === "toggle-visibility") {
+            if (typeof event.data.visibility !== undefined) {
+                // update your visibility (all, friends, or none)
+                myVisibility = event.data.visibility;
+                GlobalServices.findableBy = myVisibility;
+            } 
+        }
     }
 
     button.clicked.connect(onClicked);

From 9a22055c27cb0b15f506e8f85ab58646a5f0f6ca Mon Sep 17 00:00:00 2001
From: Faye Li <si.fi.faye.li@gmial.com>
Date: Wed, 1 Feb 2017 14:30:16 -0800
Subject: [PATCH 11/16] initialise the toggle button with correct info

---
 scripts/system/html/users.html | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/scripts/system/html/users.html b/scripts/system/html/users.html
index 0444437958..7d171110b9 100644
--- a/scripts/system/html/users.html
+++ b/scripts/system/html/users.html
@@ -385,7 +385,13 @@
                     myVisibility = event.data.visibility;
                     $("#dev-div").append("<p>myUsername is " + myUsername + "</p>");
                     $("#dev-div").append("<p>myVisibility is " + myVisibility + "</p>");
-                    $("#visibility-toggle").html(myVisibility + "<span class='glyphicon glyphicon-menu-down'></span>")
+                    var buttonText = "Online";
+                    if (myVisibility === "none") {
+                        buttonText = "Appear Offline";
+                    } else if (myVisibility === "friends") {
+                        buttonText = "Available To Friends Only";
+                    }
+                    $("#visibility-toggle").html(buttonText + "<span class='glyphicon glyphicon-menu-down'></span>")
                 }
             }
 
@@ -428,12 +434,13 @@
 
                 // Click listener for toggling who can see me
                 $(".visibility-option").click(function() {
+                    myVisibility = $(this).data("visibility");
                     var newButtonText = $(this).find("h6").text();
                     $("#visibility-toggle").html(newButtonText + "<span class='glyphicon glyphicon-menu-down'></span>");
                     var visibilityObject = {
                         "type": "toggle-visibility",
                         "data": {
-                            "visibility": $(this).data("visibility")
+                            "visibility": myVisibility
                         }
                     }
                     EventBridge.emitWebEvent(JSON.stringify(visibilityObject));

From c16a9a955e307dd52133dfcbc3cbd4a28e5d8809 Mon Sep 17 00:00:00 2001
From: Faye Li <si.fi.faye.li@gmial.com>
Date: Wed, 1 Feb 2017 14:53:03 -0800
Subject: [PATCH 12/16] display correct username

---
 scripts/system/html/users.html | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/scripts/system/html/users.html b/scripts/system/html/users.html
index 7d171110b9..94292e1905 100644
--- a/scripts/system/html/users.html
+++ b/scripts/system/html/users.html
@@ -254,7 +254,7 @@
         </div>
         <div class="main">
             <div id="user-info-div">
-                <h4>faye @ dev-welcome</h4>
+                <h4></h4>
                 <div class="dropdown">
                     <button id="visibility-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                         Online
@@ -327,8 +327,9 @@
                         $("#dev-div").append("<p>" + data.users[i].username + "is online but not in a domain</p>");
                     } else {
                         $("#dev-div").append("<li>" + data.users[i].username + " @ " + data.users[i].location.root.name + "</li>");
-                        // Don't display yourself
-                        if (data.users[i].username !== myUsername) {
+                        if (data.users[i].username === myUsername) {
+                            $("#user-info-div h4").text(data.users[i].username + " @ " + data.users[i].location.root.name);
+                        } else {
                             console.log(data.users[i].username + " @ " + data.users[i].location.root.name);
                             // Create a list item and put user info in data-* attributes, also make it trigger the jump to confirmation modal
                             $("<li></li>", {
@@ -383,8 +384,7 @@
                 if (event.type === "user-info") {
                     myUsername = event.data.username;
                     myVisibility = event.data.visibility;
-                    $("#dev-div").append("<p>myUsername is " + myUsername + "</p>");
-                    $("#dev-div").append("<p>myVisibility is " + myVisibility + "</p>");
+                    $("#user-info-div h4").text(myUsername);
                     var buttonText = "Online";
                     if (myVisibility === "none") {
                         buttonText = "Appear Offline";

From c24b6e5e5e5e971c8aa8fcfb4e709ccc5569c6c2 Mon Sep 17 00:00:00 2001
From: Faye Li <si.fi.faye.li@gmial.com>
Date: Wed, 1 Feb 2017 15:13:52 -0800
Subject: [PATCH 13/16] missing words

---
 scripts/system/html/users.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/system/html/users.html b/scripts/system/html/users.html
index 94292e1905..c18162ff8a 100644
--- a/scripts/system/html/users.html
+++ b/scripts/system/html/users.html
@@ -273,7 +273,7 @@
                         <li role="separator" class="divider"></li>
                         <li class="visibility-option" data-visibility="none">
                             <h6>Appear Offline</h6>
-                            <p>No one will be able to find you from the users online list. However, this does not prevent other users in the same domain from interacting with you. For a complete "Do not disturb" mode, you may want to your own private domain and set allow entering to no one.</p>
+                            <p>No one will be able to find you from the users online list. However, this does not prevent other users in the same domain from interacting with you. For a complete "Do not disturb" mode, you may want to go to your own private domain and set allow entering to no one.</p>
                         </li>
                     </ul>
                 </div>

From 2340f56b5308ff553de4597fc0d0100f7c54e308 Mon Sep 17 00:00:00 2001
From: Faye Li <si.fi.faye.li@gmial.com>
Date: Wed, 1 Feb 2017 15:26:40 -0800
Subject: [PATCH 14/16] replace old user.js

---
 scripts/system/tablet-users.js |   98 ---
 scripts/system/users.js        | 1306 ++------------------------------
 2 files changed, 62 insertions(+), 1342 deletions(-)
 delete mode 100644 scripts/system/tablet-users.js

diff --git a/scripts/system/tablet-users.js b/scripts/system/tablet-users.js
deleted file mode 100644
index 0fad0c56f3..0000000000
--- a/scripts/system/tablet-users.js
+++ /dev/null
@@ -1,98 +0,0 @@
-"use strict";
-
-//
-//  users.js
-//
-//  Created by Faye Li on 18 Jan 2017.
-//  Copyright 2017 High Fidelity, Inc.
-//
-//  Distributed under the Apache License, Version 2.0.
-//  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
-//
-
-(function() { // BEGIN LOCAL_SCOPE
-    var USERS_URL = "https://hifi-content.s3.amazonaws.com/faye/tablet-dev/users.html";
-
-    var FRIENDS_WINDOW_URL = "https://metaverse.highfidelity.com/user/friends";
-    var FRIENDS_WINDOW_WIDTH = 290;
-    var FRIENDS_WINDOW_HEIGHT = 500;
-    var FRIENDS_WINDOW_TITLE = "Add/Remove Friends";
-
-    // Initialise visibility based on global service
-    var VISIBILITY_VALUES_SET = {};
-    VISIBILITY_VALUES_SET["all"] = true;
-    VISIBILITY_VALUES_SET["friends"] = true;
-    VISIBILITY_VALUES_SET["none"] = true;
-    var myVisibility;
-    if (GlobalServices.findableBy in VISIBILITY_VALUES_SET) {
-        myVisibility = GlobalServices.findableBy;
-    } else {
-        // default to friends if it can't be determined
-        myVisibility = "friends";
-        GlobalServices.findableBy = myVisibilty;
-    }
-
-    var tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
-    var button = tablet.addButton({
-        icon: "icons/tablet-icons/people-i.svg",
-        text: "Users"
-    });
-
-    function onClicked() {
-        tablet.gotoWebScreen(USERS_URL);
-    }
-
-    function onWebEventReceived(event) {
-        print("Script received a web event, its type is " + typeof event);
-        if (typeof event === "string") {
-            event = JSON.parse(event);
-        }
-        if (event.type === "ready") {
-            // send username to html
-            var myUsername = GlobalServices.username;
-            var object = {
-                "type": "user-info",
-                "data": {
-                    "username": myUsername,
-                    "visibility": myVisibility
-                }
-            };
-            tablet.emitScriptEvent(JSON.stringify(object));
-        }
-        if (event.type === "manage-friends") {
-            // open a web overlay to metaverse friends page
-            var friendsWindow = new OverlayWebWindow({
-                title: FRIENDS_WINDOW_TITLE,
-                width: FRIENDS_WINDOW_WIDTH,
-                height: FRIENDS_WINDOW_HEIGHT,
-                visible: false
-            });
-            friendsWindow.setURL(FRIENDS_WINDOW_URL);
-            friendsWindow.setVisible(true);
-            friendsWindow.raise();
-        }
-        if (event.type === "jump-to") {
-            if (typeof event.data.username !== undefined) {
-                // teleport to selected user from the online users list
-                location.goToUser(event.data.username);
-            }
-        }
-        if (event.type === "toggle-visibility") {
-            if (typeof event.data.visibility !== undefined) {
-                // update your visibility (all, friends, or none)
-                myVisibility = event.data.visibility;
-                GlobalServices.findableBy = myVisibility;
-            } 
-        }
-    }
-
-    button.clicked.connect(onClicked);
-    tablet.webEventReceived.connect(onWebEventReceived);
-
-    function cleanup() {
-        button.clicked.disconnect(onClicked);
-        tablet.removeButton(button);
-    }
-
-    Script.scriptEnding.connect(cleanup);
-}()); // END LOCAL_SCOPE
diff --git a/scripts/system/users.js b/scripts/system/users.js
index 009c446ff3..0fad0c56f3 100644
--- a/scripts/system/users.js
+++ b/scripts/system/users.js
@@ -2,1279 +2,97 @@
 
 //
 //  users.js
-//  examples
 //
-//  Created by David Rowe on 9 Mar 2015.
-//  Copyright 2015 High Fidelity, Inc.
+//  Created by Faye Li on 18 Jan 2017.
+//  Copyright 2017 High Fidelity, Inc.
 //
 //  Distributed under the Apache License, Version 2.0.
 //  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
 //
-/*globals HMD, Toolbars, Script, Menu, Overlays, Tablet, Controller, Settings, OverlayWebWindow, Account, GlobalServices */
 
 (function() { // BEGIN LOCAL_SCOPE
-var button;
-var buttonName = "USERS";
-var toolBar = null;
-var tablet = null;
+    var USERS_URL = "https://hifi-content.s3.amazonaws.com/faye/tablet-dev/users.html";
 
-var MENU_ITEM = "Users Online";
+    var FRIENDS_WINDOW_URL = "https://metaverse.highfidelity.com/user/friends";
+    var FRIENDS_WINDOW_WIDTH = 290;
+    var FRIENDS_WINDOW_HEIGHT = 500;
+    var FRIENDS_WINDOW_TITLE = "Add/Remove Friends";
 
-if (Settings.getValue("HUDUIEnabled")) {
-    toolBar = Toolbars.getToolbar("com.highfidelity.interface.toolbar.system");
-    button = toolBar.addButton({
-        objectName: buttonName,
-        imageURL: Script.resolvePath("assets/images/tools/people.svg"),
-        visible: true,
-        alpha: 0.9
-    });
-} else {
-    tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
-    button = tablet.addButton({
-        icon: "icons/tablet-icons/users-i.svg",
-        text: "USERS",
-        isActive: Menu.isOptionChecked(MENU_ITEM)
-    });
-}
-
-
-function onClicked() {
-    Menu.setIsOptionChecked(MENU_ITEM, !Menu.isOptionChecked(MENU_ITEM));
-    button.editProperties({isActive: Menu.isOptionChecked(MENU_ITEM)});
-}
-button.clicked.connect(onClicked);
-
-// resolve these paths immediately
-var MIN_MAX_BUTTON_SVG = Script.resolvePath("assets/images/tools/min-max-toggle.svg");
-var BASE_URL = Script.resolvePath("assets/images/tools/");
-
-var PopUpMenu = function (properties) {
-    var value = properties.value,
-        promptOverlay,
-        valueOverlay,
-        buttonOverlay,
-        optionOverlays = [],
-        isDisplayingOptions = false,
-        OPTION_MARGIN = 4,
-
-        MIN_MAX_BUTTON_SVG_WIDTH = 17.1,
-        MIN_MAX_BUTTON_SVG_HEIGHT = 32.5,
-        MIN_MAX_BUTTON_WIDTH = 14,
-        MIN_MAX_BUTTON_HEIGHT = MIN_MAX_BUTTON_WIDTH;
-
-    function positionDisplayOptions() {
-        var y,
-            i;
-
-        y = properties.y - (properties.values.length - 1) * properties.lineHeight - OPTION_MARGIN;
-
-        for (i = 0; i < properties.values.length; i += 1) {
-            Overlays.editOverlay(optionOverlays[i], {
-                y: y
-            });
-            y += properties.lineHeight;
-        }
+    // Initialise visibility based on global service
+    var VISIBILITY_VALUES_SET = {};
+    VISIBILITY_VALUES_SET["all"] = true;
+    VISIBILITY_VALUES_SET["friends"] = true;
+    VISIBILITY_VALUES_SET["none"] = true;
+    var myVisibility;
+    if (GlobalServices.findableBy in VISIBILITY_VALUES_SET) {
+        myVisibility = GlobalServices.findableBy;
+    } else {
+        // default to friends if it can't be determined
+        myVisibility = "friends";
+        GlobalServices.findableBy = myVisibilty;
     }
 
-    function showDisplayOptions() {
-        var i,
-            yOffScreen = Controller.getViewportDimensions().y;
-
-        for (i = 0; i < properties.values.length; i += 1) {
-            optionOverlays[i] = Overlays.addOverlay("text", {
-                x: properties.x + properties.promptWidth,
-                y: yOffScreen,
-                width: properties.width - properties.promptWidth,
-                height: properties.textHeight + OPTION_MARGIN, // Only need to add margin at top to balance descenders
-                topMargin: OPTION_MARGIN,
-                leftMargin: OPTION_MARGIN,
-                color: properties.optionColor,
-                alpha: properties.optionAlpha,
-                backgroundColor: properties.popupBackgroundColor,
-                backgroundAlpha: properties.popupBackgroundAlpha,
-                text: properties.displayValues[i],
-                font: properties.font,
-                visible: true
-            });
-        }
-
-        positionDisplayOptions();
-
-        isDisplayingOptions = true;
-    }
-
-    function deleteDisplayOptions() {
-        var i;
-
-        for (i = 0; i < optionOverlays.length; i += 1) {
-            Overlays.deleteOverlay(optionOverlays[i]);
-        }
-
-        isDisplayingOptions = false;
-    }
-
-    function handleClick(overlay) {
-        var clicked = false,
-            i;
-
-        if (overlay === valueOverlay || overlay === buttonOverlay) {
-            showDisplayOptions();
-            return true;
-        }
-
-        if (isDisplayingOptions) {
-            for (i = 0; i < optionOverlays.length; i += 1) {
-                if (overlay === optionOverlays[i]) {
-                    value = properties.values[i];
-                    Overlays.editOverlay(valueOverlay, {
-                        text: properties.displayValues[i]
-                    });
-                    clicked = true;
-                }
-            }
-
-            deleteDisplayOptions();
-        }
-
-        return clicked;
-    }
-
-    function updatePosition(x, y) {
-        properties.x = x;
-        properties.y = y;
-        Overlays.editOverlay(promptOverlay, {
-            x: x,
-            y: y
-        });
-        Overlays.editOverlay(valueOverlay, {
-            x: x + properties.promptWidth,
-            y: y - OPTION_MARGIN
-        });
-        Overlays.editOverlay(buttonOverlay, {
-            x: x + properties.width - MIN_MAX_BUTTON_WIDTH - 1,
-            y: y - OPTION_MARGIN + 1
-        });
-        if (isDisplayingOptions) {
-            positionDisplayOptions();
-        }
-    }
-
-    function setVisible(visible) {
-        Overlays.editOverlay(promptOverlay, {
-            visible: visible
-        });
-        Overlays.editOverlay(valueOverlay, {
-            visible: visible
-        });
-        Overlays.editOverlay(buttonOverlay, {
-            visible: visible
-        });
-    }
-
-    function tearDown() {
-        Overlays.deleteOverlay(promptOverlay);
-        Overlays.deleteOverlay(valueOverlay);
-        Overlays.deleteOverlay(buttonOverlay);
-        if (isDisplayingOptions) {
-            deleteDisplayOptions();
-        }
-    }
-
-    function getValue() {
-        return value;
-    }
-
-    function setValue(newValue) {
-        var index;
-
-        index = properties.values.indexOf(newValue);
-        if (index !== -1) {
-            value = newValue;
-            Overlays.editOverlay(valueOverlay, {
-                text: properties.displayValues[index]
-            });
-        }
-    }
-
-    promptOverlay = Overlays.addOverlay("text", {
-        x: properties.x,
-        y: properties.y,
-        width: properties.promptWidth,
-        height: properties.textHeight,
-        topMargin: 0,
-        leftMargin: 0,
-        color: properties.promptColor,
-        alpha: properties.promptAlpha,
-        backgroundColor: properties.promptBackgroundColor,
-        backgroundAlpha: properties.promptBackgroundAlpha,
-        text: properties.prompt,
-        font: properties.font,
-        visible: properties.visible
+    var tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
+    var button = tablet.addButton({
+        icon: "icons/tablet-icons/people-i.svg",
+        text: "Users"
     });
 
-    valueOverlay = Overlays.addOverlay("text", {
-        x: properties.x + properties.promptWidth,
-        y: properties.y,
-        width: properties.width - properties.promptWidth,
-        height: properties.textHeight + OPTION_MARGIN, // Only need to add margin at top to balance descenders
-        topMargin: OPTION_MARGIN,
-        leftMargin: OPTION_MARGIN,
-        color: properties.optionColor,
-        alpha: properties.optionAlpha,
-        backgroundColor: properties.optionBackgroundColor,
-        backgroundAlpha: properties.optionBackgroundAlpha,
-        text: properties.displayValues[properties.values.indexOf(value)],
-        font: properties.font,
-        visible: properties.visible
-    });
-
-    buttonOverlay = Overlays.addOverlay("image", {
-        x: properties.x + properties.width - MIN_MAX_BUTTON_WIDTH - 1,
-        y: properties.y,
-        width: MIN_MAX_BUTTON_WIDTH,
-        height: MIN_MAX_BUTTON_HEIGHT,
-        imageURL: MIN_MAX_BUTTON_SVG,
-        subImage: {
-            x: 0,
-            y: 0,
-            width: MIN_MAX_BUTTON_SVG_WIDTH,
-            height: MIN_MAX_BUTTON_SVG_HEIGHT / 2
-        },
-        //color: properties.buttonColor,
-        alpha: properties.buttonAlpha,
-        visible: properties.visible
-    });
-
-    return {
-        updatePosition: updatePosition,
-        setVisible: setVisible,
-        handleClick: handleClick,
-        tearDown: tearDown,
-        getValue: getValue,
-        setValue: setValue
-    };
-};
-
-var usersWindow = (function () {
-
-    var WINDOW_WIDTH = 260,
-        WINDOW_MARGIN = 12,
-        WINDOW_BASE_MARGIN = 24, // A little less is needed in order look correct
-        WINDOW_FONT = {
-            size: 12
-        },
-        WINDOW_FOREGROUND_COLOR = {
-            red: 240,
-            green: 240,
-            blue: 240
-        },
-        WINDOW_FOREGROUND_ALPHA = 0.95,
-        WINDOW_HEADING_COLOR = {
-            red: 180,
-            green: 180,
-            blue: 180
-        },
-        WINDOW_HEADING_ALPHA = 0.95,
-        WINDOW_BACKGROUND_COLOR = {
-            red: 80,
-            green: 80,
-            blue: 80
-        },
-        WINDOW_BACKGROUND_ALPHA = 0.8,
-        windowPane,
-        windowHeading,
-
-        // Margin on the left and right side of the window to keep
-        // it from getting too close to the edge of the screen which
-        // is unclickable.
-        WINDOW_MARGIN_X = 20,
-
-        // Window border is similar to that of edit.js.
-        WINDOW_MARGIN_HALF = WINDOW_MARGIN / 2,
-        WINDOW_BORDER_WIDTH = WINDOW_WIDTH + 2 * WINDOW_MARGIN_HALF,
-        WINDOW_BORDER_TOP_MARGIN = 2 * WINDOW_MARGIN_HALF,
-        WINDOW_BORDER_BOTTOM_MARGIN = WINDOW_MARGIN_HALF,
-        WINDOW_BORDER_LEFT_MARGIN = WINDOW_MARGIN_HALF,
-        WINDOW_BORDER_RADIUS = 4,
-        WINDOW_BORDER_COLOR = { red: 255, green: 255, blue: 255 },
-        WINDOW_BORDER_ALPHA = 0.5,
-        windowBorder,
-
-        MIN_MAX_BUTTON_SVG = BASE_URL + "min-max-toggle.svg",
-        MIN_MAX_BUTTON_SVG_WIDTH = 17.1,
-        MIN_MAX_BUTTON_SVG_HEIGHT = 32.5,
-        MIN_MAX_BUTTON_WIDTH = 14,
-        MIN_MAX_BUTTON_HEIGHT = MIN_MAX_BUTTON_WIDTH,
-        MIN_MAX_BUTTON_COLOR = {
-            red: 255,
-            green: 255,
-            blue: 255
-        },
-        MIN_MAX_BUTTON_ALPHA = 0.9,
-        minimizeButton,
-        SCROLLBAR_BACKGROUND_WIDTH = 12,
-        SCROLLBAR_BACKGROUND_COLOR = {
-            red: 70,
-            green: 70,
-            blue: 70
-        },
-        SCROLLBAR_BACKGROUND_ALPHA = 0.8,
-        scrollbarBackground,
-        SCROLLBAR_BAR_MIN_HEIGHT = 5,
-        SCROLLBAR_BAR_COLOR = {
-            red: 170,
-            green: 170,
-            blue: 170
-        },
-        SCROLLBAR_BAR_ALPHA = 0.8,
-        SCROLLBAR_BAR_SELECTED_ALPHA = 0.95,
-        scrollbarBar,
-        scrollbarBackgroundHeight,
-        scrollbarBarHeight,
-        FRIENDS_BUTTON_SPACER = 6, // Space before add/remove friends button
-        FRIENDS_BUTTON_SVG = BASE_URL + "add-remove-friends.svg",
-        FRIENDS_BUTTON_SVG_WIDTH = 107,
-        FRIENDS_BUTTON_SVG_HEIGHT = 27,
-        FRIENDS_BUTTON_WIDTH = FRIENDS_BUTTON_SVG_WIDTH,
-        FRIENDS_BUTTON_HEIGHT = FRIENDS_BUTTON_SVG_HEIGHT,
-        FRIENDS_BUTTON_COLOR = {
-            red: 225,
-            green: 225,
-            blue: 225
-        },
-        FRIENDS_BUTTON_ALPHA = 0.95,
-        FRIENDS_WINDOW_URL = "https://metaverse.highfidelity.com/user/friends",
-        FRIENDS_WINDOW_WIDTH = 290,
-        FRIENDS_WINDOW_HEIGHT = 500,
-        FRIENDS_WINDOW_TITLE = "Add/Remove Friends",
-        friendsButton,
-        friendsWindow,
-
-        OPTION_BACKGROUND_COLOR = {
-            red: 60,
-            green: 60,
-            blue: 60
-        },
-        OPTION_BACKGROUND_ALPHA = 0.1,
-
-        DISPLAY_SPACER = 12, // Space before display control
-        DISPLAY_PROMPT = "Show me:",
-        DISPLAY_PROMPT_WIDTH = 60,
-        DISPLAY_EVERYONE = "everyone",
-        DISPLAY_FRIENDS = "friends",
-        DISPLAY_VALUES = [DISPLAY_EVERYONE, DISPLAY_FRIENDS],
-        DISPLAY_DISPLAY_VALUES = DISPLAY_VALUES,
-        DISPLAY_OPTIONS_BACKGROUND_COLOR = {
-            red: 120,
-            green: 120,
-            blue: 120
-        },
-        DISPLAY_OPTIONS_BACKGROUND_ALPHA = 0.9,
-        displayControl,
-
-        VISIBILITY_SPACER = 6, // Space before visibility control
-        VISIBILITY_PROMPT = "Visible to:",
-        VISIBILITY_PROMPT_WIDTH = 60,
-        VISIBILITY_ALL = "all",
-        VISIBILITY_FRIENDS = "friends",
-        VISIBILITY_NONE = "none",
-        VISIBILITY_VALUES = [VISIBILITY_ALL, VISIBILITY_FRIENDS, VISIBILITY_NONE],
-        VISIBILITY_DISPLAY_VALUES = ["everyone", "friends", "no one"],
-        visibilityControl,
-
-        windowHeight,
-        windowBorderHeight,
-        windowTextHeight,
-        windowLineSpacing,
-        windowLineHeight, // = windowTextHeight + windowLineSpacing
-        windowMinimumHeight,
-
-        usersOnline, // Raw users data
-        linesOfUsers = [], // Array of indexes pointing into usersOnline
-        numUsersToDisplay = 0,
-        firstUserToDisplay = 0,
-
-        API_URL = "https://metaverse.highfidelity.com/api/v1/users?status=online",
-        API_FRIENDS_FILTER = "&filter=friends",
-        HTTP_GET_TIMEOUT = 60000, // ms = 1 minute
-        usersRequest,
-        processUsers,
-        pollUsersTimedOut,
-        usersTimer = null,
-        USERS_UPDATE_TIMEOUT = 5000, // ms = 5s
-
-        showMe,
-        myVisibility,
-
-        MENU_NAME = "View",
-        MENU_ITEM = "Users Online",
-        MENU_ITEM_OVERLAYS = "Overlays",
-        MENU_ITEM_AFTER = MENU_ITEM_OVERLAYS,
-
-        SETTING_USERS_SHOW_ME = "UsersWindow.ShowMe",
-        SETTING_USERS_VISIBLE_TO = "UsersWindow.VisibleTo",
-        SETTING_USERS_WINDOW_MINIMIZED = "UsersWindow.Minimized",
-        SETTING_USERS_WINDOW_OFFSET = "UsersWindow.Offset",
-        // +ve x, y values are offset from left, top of screen; -ve from right, bottom.
-
-        isLoggedIn = false,
-        isVisible = true,
-        isMinimized = false,
-        isBorderVisible = false,
-
-        viewport,
-        isMirrorDisplay = false,
-        isFullscreenMirror = false,
-
-        windowPosition = {},  // Bottom left corner of window pane.
-        isMovingWindow = false,
-        movingClickOffset = { x: 0, y: 0 },
-
-        isUsingScrollbars = false,
-        isMovingScrollbar = false,
-        scrollbarBackgroundPosition = {},
-        scrollbarBarPosition = {},
-        scrollbarBarClickedAt, // 0.0 .. 1.0
-        scrollbarValue = 0.0; // 0.0 .. 1.0
-
-    function isWindowDisabled() {
-        return !Menu.isOptionChecked(MENU_ITEM) || !Menu.isOptionChecked(MENU_ITEM_OVERLAYS);
+    function onClicked() {
+        tablet.gotoWebScreen(USERS_URL);
     }
 
-    function isValueTrue(value) {
-        // Work around Boolean Settings values being read as string when Interface starts up but as Booleans when re-read after
-        // Being written if refresh script.
-        return value === true || value === "true";
-    }
-
-    function calculateWindowHeight() {
-        var AUDIO_METER_HEIGHT = 52,
-            MIRROR_HEIGHT = 220,
-            nonUsersHeight,
-            maxWindowHeight;
-
-        if (isMinimized) {
-            windowHeight = windowTextHeight + WINDOW_MARGIN + WINDOW_BASE_MARGIN;
-            windowBorderHeight = windowHeight + WINDOW_BORDER_TOP_MARGIN + WINDOW_BORDER_BOTTOM_MARGIN;
-            return;
+    function onWebEventReceived(event) {
+        print("Script received a web event, its type is " + typeof event);
+        if (typeof event === "string") {
+            event = JSON.parse(event);
         }
-
-        // Reserve space for title, friends button, and option controls
-        nonUsersHeight = WINDOW_MARGIN + windowLineHeight +
-            (shouldShowFriendsButton() ? FRIENDS_BUTTON_SPACER + FRIENDS_BUTTON_HEIGHT : 0) +
-            DISPLAY_SPACER +
-            windowLineHeight + VISIBILITY_SPACER +
-            windowLineHeight + WINDOW_BASE_MARGIN;
-
-        // Limit window to height of viewport above window position minus VU meter and mirror if displayed
-        windowHeight = linesOfUsers.length * windowLineHeight - windowLineSpacing + nonUsersHeight;
-        maxWindowHeight = windowPosition.y - AUDIO_METER_HEIGHT;
-        if (isMirrorDisplay && !isFullscreenMirror) {
-            maxWindowHeight -= MIRROR_HEIGHT;
-        }
-        windowHeight = Math.max(Math.min(windowHeight, maxWindowHeight), nonUsersHeight);
-        windowBorderHeight = windowHeight + WINDOW_BORDER_TOP_MARGIN + WINDOW_BORDER_BOTTOM_MARGIN;
-
-        // Corresponding number of users to actually display
-        numUsersToDisplay = Math.max(Math.round((windowHeight - nonUsersHeight) / windowLineHeight), 0);
-        isUsingScrollbars = 0 < numUsersToDisplay && numUsersToDisplay < linesOfUsers.length;
-        if (isUsingScrollbars) {
-            firstUserToDisplay = Math.floor(scrollbarValue * (linesOfUsers.length - numUsersToDisplay));
-        } else {
-            firstUserToDisplay = 0;
-            scrollbarValue = 0.0;
-        }
-    }
-
-    function saturateWindowPosition() {
-        windowPosition.x = Math.max(WINDOW_MARGIN_X, Math.min(viewport.x - WINDOW_WIDTH - WINDOW_MARGIN_X, windowPosition.x));
-        windowPosition.y = Math.max(windowMinimumHeight, Math.min(viewport.y, windowPosition.y));
-    }
-
-    function updateOverlayPositions() {
-        // Overlay positions are all relative to windowPosition; windowPosition is the position of the windowPane overlay.
-        var windowLeft = windowPosition.x,
-            windowTop = windowPosition.y - windowHeight,
-            x,
-            y;
-
-        Overlays.editOverlay(windowBorder, {
-            x: windowPosition.x - WINDOW_BORDER_LEFT_MARGIN,
-            y: windowTop - WINDOW_BORDER_TOP_MARGIN
-        });
-        Overlays.editOverlay(windowPane, {
-            x: windowLeft,
-            y: windowTop
-        });
-        Overlays.editOverlay(windowHeading, {
-            x: windowLeft + WINDOW_MARGIN,
-            y: windowTop + WINDOW_MARGIN
-        });
-
-        Overlays.editOverlay(minimizeButton, {
-            x: windowLeft + WINDOW_WIDTH - WINDOW_MARGIN / 2 - MIN_MAX_BUTTON_WIDTH,
-            y: windowTop + WINDOW_MARGIN
-        });
-
-        scrollbarBackgroundPosition.x = windowLeft + WINDOW_WIDTH - 0.5 * WINDOW_MARGIN - SCROLLBAR_BACKGROUND_WIDTH;
-        scrollbarBackgroundPosition.y = windowTop + WINDOW_MARGIN + windowTextHeight;
-        Overlays.editOverlay(scrollbarBackground, {
-            x: scrollbarBackgroundPosition.x,
-            y: scrollbarBackgroundPosition.y
-        });
-        scrollbarBarPosition.y = scrollbarBackgroundPosition.y + 1 +
-            scrollbarValue * (scrollbarBackgroundHeight - scrollbarBarHeight - 2);
-        Overlays.editOverlay(scrollbarBar, {
-            x: scrollbarBackgroundPosition.x + 1,
-            y: scrollbarBarPosition.y
-        });
-
-
-        x = windowLeft + WINDOW_MARGIN;
-        y = windowPosition.y -
-            DISPLAY_SPACER -
-            windowLineHeight - VISIBILITY_SPACER -
-            windowLineHeight - WINDOW_BASE_MARGIN;
-        if (shouldShowFriendsButton()) {
-            y -= FRIENDS_BUTTON_HEIGHT;
-            Overlays.editOverlay(friendsButton, {
-                x: x,
-                y: y
-            });
-            y += FRIENDS_BUTTON_HEIGHT;
-        }
-
-        y += DISPLAY_SPACER;
-        displayControl.updatePosition(x, y);
-
-        y += windowLineHeight + VISIBILITY_SPACER;
-        visibilityControl.updatePosition(x, y);
-    }
-
-    function updateUsersDisplay() {
-        var displayText = "",
-            user,
-            userText,
-            textWidth,
-            maxTextWidth,
-            ellipsisWidth,
-            reducedTextWidth,
-            i;
-
-        if (!isMinimized) {
-            maxTextWidth = WINDOW_WIDTH - (isUsingScrollbars ? SCROLLBAR_BACKGROUND_WIDTH : 0) - 2 * WINDOW_MARGIN;
-            ellipsisWidth = Overlays.textSize(windowPane, "...").width;
-            reducedTextWidth = maxTextWidth - ellipsisWidth;
-
-            for (i = 0; i < numUsersToDisplay; i += 1) {
-                user = usersOnline[linesOfUsers[firstUserToDisplay + i]];
-                userText = user.text;
-                textWidth = user.textWidth;
-
-                if (textWidth > maxTextWidth) {
-                    // Trim and append "..." to fit window width
-                    maxTextWidth = maxTextWidth - Overlays.textSize(windowPane, "...").width;
-                    while (textWidth > reducedTextWidth) {
-                        userText = userText.slice(0, -1);
-                        textWidth = Overlays.textSize(windowPane, userText).width;
-                    }
-                    userText += "...";
+        if (event.type === "ready") {
+            // send username to html
+            var myUsername = GlobalServices.username;
+            var object = {
+                "type": "user-info",
+                "data": {
+                    "username": myUsername,
+                    "visibility": myVisibility
                 }
-
-                displayText += "\n" + userText;
-            }
-
-            displayText = displayText.slice(1); // Remove leading "\n".
-
-            scrollbarBackgroundHeight = numUsersToDisplay * windowLineHeight - windowLineSpacing / 2;
-            Overlays.editOverlay(scrollbarBackground, {
-                height: scrollbarBackgroundHeight,
-                visible: isLoggedIn && isUsingScrollbars
+            };
+            tablet.emitScriptEvent(JSON.stringify(object));
+        }
+        if (event.type === "manage-friends") {
+            // open a web overlay to metaverse friends page
+            var friendsWindow = new OverlayWebWindow({
+                title: FRIENDS_WINDOW_TITLE,
+                width: FRIENDS_WINDOW_WIDTH,
+                height: FRIENDS_WINDOW_HEIGHT,
+                visible: false
             });
-            scrollbarBarHeight = Math.max(numUsersToDisplay / linesOfUsers.length * scrollbarBackgroundHeight,
-                SCROLLBAR_BAR_MIN_HEIGHT);
-            Overlays.editOverlay(scrollbarBar, {
-                height: scrollbarBarHeight,
-                visible: isLoggedIn && isUsingScrollbars
-            });
-        }
-
-        Overlays.editOverlay(windowBorder, {
-            height: windowBorderHeight
-        });
-
-        Overlays.editOverlay(windowPane, {
-            height: windowHeight,
-            text: displayText
-        });
-
-        Overlays.editOverlay(windowHeading, {
-            text: isLoggedIn ? (linesOfUsers.length > 0 ? "Users online" : "No users online") : "Users online - log in to view"
-        });
-    }
-
-    function shouldShowFriendsButton() {
-        return isVisible && isLoggedIn && !isMinimized;
-    }
-
-    function updateOverlayVisibility() {
-        Overlays.editOverlay(windowBorder, {
-            visible: isVisible && isBorderVisible
-        });
-        Overlays.editOverlay(windowPane, {
-            visible: isVisible
-        });
-        Overlays.editOverlay(windowHeading, {
-            visible: isVisible
-        });
-        Overlays.editOverlay(minimizeButton, {
-            visible: isVisible
-        });
-        Overlays.editOverlay(scrollbarBackground, {
-            visible: isVisible && isUsingScrollbars && !isMinimized
-        });
-        Overlays.editOverlay(scrollbarBar, {
-            visible: isVisible && isUsingScrollbars && !isMinimized
-        });
-        Overlays.editOverlay(friendsButton, {
-            visible: shouldShowFriendsButton()
-        });
-        displayControl.setVisible(isVisible && !isMinimized);
-        visibilityControl.setVisible(isVisible && !isMinimized);
-    }
-
-    function checkLoggedIn() {
-        var wasLoggedIn = isLoggedIn;
-
-        isLoggedIn = Account.isLoggedIn();
-        if (isLoggedIn !== wasLoggedIn) {
-            if (wasLoggedIn) {
-                setMinimized(true);
-                calculateWindowHeight();
-                updateOverlayPositions();
-                updateUsersDisplay();
-            }
-
-            updateOverlayVisibility();
-        }
-    }
-
-    function pollUsers() {
-        var url = API_URL;
-
-        if (showMe === DISPLAY_FRIENDS) {
-            url += API_FRIENDS_FILTER;
-        }
-
-        usersRequest = new XMLHttpRequest();
-        usersRequest.open("GET", url, true);
-        usersRequest.timeout = HTTP_GET_TIMEOUT;
-        usersRequest.ontimeout = pollUsersTimedOut;
-        usersRequest.onreadystatechange = processUsers;
-        usersRequest.send();
-    }
-
-    processUsers = function () {
-        var response,
-            myUsername,
-            user,
-            userText,
-            i;
-
-        if (usersRequest.readyState === usersRequest.DONE) {
-            if (usersRequest.status === 200) {
-                response = JSON.parse(usersRequest.responseText);
-                if (response.status !== "success") {
-                    print("Error: Request for users status returned status = " + response.status);
-                    usersTimer = Script.setTimeout(pollUsers, HTTP_GET_TIMEOUT); // Try again after a longer delay.
-                    return;
-                }
-                if (!response.hasOwnProperty("data") || !response.data.hasOwnProperty("users")) {
-                    print("Error: Request for users status returned invalid data");
-                    usersTimer = Script.setTimeout(pollUsers, HTTP_GET_TIMEOUT); // Try again after a longer delay.
-                    return;
-                }
-
-                usersOnline = response.data.users;
-                myUsername = GlobalServices.username;
-                linesOfUsers = [];
-                for (i = 0; i < usersOnline.length; i += 1) {
-                    user = usersOnline[i];
-                    if (user.username !== myUsername && user.online) {
-                        userText = user.username;
-                        if (user.location.root) {
-                            userText += " @ " + user.location.root.name;
-                        }
-
-                        usersOnline[i].text = userText;
-                        usersOnline[i].textWidth = Overlays.textSize(windowPane, userText).width;
-
-                        linesOfUsers.push(i);
-                    }
-                }
-
-                checkLoggedIn();
-                calculateWindowHeight();
-                updateUsersDisplay();
-                updateOverlayPositions();
-
-            } else {
-                print("Error: Request for users status returned " + usersRequest.status + " " + usersRequest.statusText);
-                usersTimer = Script.setTimeout(pollUsers, HTTP_GET_TIMEOUT); // Try again after a longer delay.
-                return;
-            }
-
-            usersTimer = Script.setTimeout(pollUsers, USERS_UPDATE_TIMEOUT); // Update after finished processing.
-        }
-    };
-
-    pollUsersTimedOut = function () {
-        print("Error: Request for users status timed out");
-        usersTimer = Script.setTimeout(pollUsers, HTTP_GET_TIMEOUT); // Try again after a longer delay.
-    };
-
-    function setVisible(visible) {
-        isVisible = visible;
-
-        if (isVisible) {
-            if (usersTimer === null) {
-                pollUsers();
-            }
-        } else {
-            Script.clearTimeout(usersTimer);
-            usersTimer = null;
-        }
-
-        updateOverlayVisibility();
-    }
-
-    function setMinimized(minimized) {
-        isMinimized = minimized;
-        Overlays.editOverlay(minimizeButton, {
-            subImage: {
-                y: isMinimized ? MIN_MAX_BUTTON_SVG_HEIGHT / 2 : 0
-            }
-        });
-        updateOverlayVisibility();
-        Settings.setValue(SETTING_USERS_WINDOW_MINIMIZED, isMinimized);
-    }
-
-    function onMenuItemEvent(event) {
-        if (event === MENU_ITEM) {
-            setVisible(Menu.isOptionChecked(MENU_ITEM));
-        }
-    }
-
-    function onFindableByChanged(event) {
-        if (VISIBILITY_VALUES.indexOf(event) !== -1) {
-            myVisibility = event;
-            visibilityControl.setValue(event);
-            Settings.setValue(SETTING_USERS_VISIBLE_TO, myVisibility);
-        } else {
-            print("Error: Unrecognized onFindableByChanged value: " + event);
-        }
-    }
-
-    function onMousePressEvent(event) {
-        var clickedOverlay,
-            numLinesBefore,
-            overlayX,
-            overlayY,
-            minY,
-            maxY,
-            lineClicked,
-            userClicked,
-            delta;
-
-        if (!isVisible || isWindowDisabled()) {
-            return;
-        }
-
-        clickedOverlay = Overlays.getOverlayAtPoint({
-            x: event.x,
-            y: event.y
-        });
-
-        if (displayControl.handleClick(clickedOverlay)) {
-            if (usersTimer !== null) {
-                Script.clearTimeout(usersTimer);
-                usersTimer = null;
-            }
-            pollUsers();
-            showMe = displayControl.getValue();
-            Settings.setValue(SETTING_USERS_SHOW_ME, showMe);
-            return;
-        }
-
-        if (visibilityControl.handleClick(clickedOverlay)) {
-            myVisibility = visibilityControl.getValue();
-            GlobalServices.findableBy = myVisibility;
-            Settings.setValue(SETTING_USERS_VISIBLE_TO, myVisibility);
-            return;
-        }
-
-        if (clickedOverlay === windowPane) {
-
-            overlayX = event.x - windowPosition.x - WINDOW_MARGIN;
-            overlayY = event.y - windowPosition.y + windowHeight - WINDOW_MARGIN - windowLineHeight;
-
-            numLinesBefore = Math.round(overlayY / windowLineHeight);
-            minY = numLinesBefore * windowLineHeight;
-            maxY = minY + windowTextHeight;
-
-            lineClicked = -1;
-            if (minY <= overlayY && overlayY <= maxY) {
-                lineClicked = numLinesBefore;
-            }
-
-            userClicked = firstUserToDisplay + lineClicked;
-
-            if (0 <= userClicked && userClicked < linesOfUsers.length && 0 <= overlayX &&
-                overlayX <= usersOnline[linesOfUsers[userClicked]].textWidth) {
-                //print("Go to " + usersOnline[linesOfUsers[userClicked]].username);
-                location.goToUser(usersOnline[linesOfUsers[userClicked]].username);
-            }
-
-            return;
-        }
-
-        if (clickedOverlay === minimizeButton) {
-            setMinimized(!isMinimized);
-            calculateWindowHeight();
-            updateOverlayPositions();
-            updateUsersDisplay();
-            return;
-        }
-
-        if (clickedOverlay === scrollbarBar) {
-            scrollbarBarClickedAt = (event.y - scrollbarBarPosition.y) / scrollbarBarHeight;
-            Overlays.editOverlay(scrollbarBar, {
-                backgroundAlpha: SCROLLBAR_BAR_SELECTED_ALPHA
-            });
-            isMovingScrollbar = true;
-            return;
-        }
-
-        if (clickedOverlay === scrollbarBackground) {
-            delta = scrollbarBarHeight / (scrollbarBackgroundHeight - scrollbarBarHeight);
-
-            if (event.y < scrollbarBarPosition.y) {
-                scrollbarValue = Math.max(scrollbarValue - delta, 0.0);
-            } else {
-                scrollbarValue = Math.min(scrollbarValue + delta, 1.0);
-            }
-
-            firstUserToDisplay = Math.floor(scrollbarValue * (linesOfUsers.length - numUsersToDisplay));
-            updateOverlayPositions();
-            updateUsersDisplay();
-            return;
-        }
-
-        if (clickedOverlay === friendsButton) {
-            if (!friendsWindow) {
-                friendsWindow = new OverlayWebWindow({
-                    title: FRIENDS_WINDOW_TITLE,
-                    width: FRIENDS_WINDOW_WIDTH,
-                    height: FRIENDS_WINDOW_HEIGHT,
-                    visible: false
-                });
-            }
             friendsWindow.setURL(FRIENDS_WINDOW_URL);
             friendsWindow.setVisible(true);
             friendsWindow.raise();
-            return;
         }
-
-        if (clickedOverlay === windowBorder) {
-            movingClickOffset = {
-                x: event.x - windowPosition.x,
-                y: event.y - windowPosition.y
-            };
-
-            isMovingWindow = true;
-        }
-    }
-
-    function onMouseMoveEvent(event) {
-        var isVisible;
-
-        if (!isLoggedIn || isWindowDisabled()) {
-            return;
-        }
-
-        if (isMovingScrollbar) {
-            if (scrollbarBackgroundPosition.x - WINDOW_MARGIN <= event.x &&
-                event.x <= scrollbarBackgroundPosition.x + SCROLLBAR_BACKGROUND_WIDTH + WINDOW_MARGIN &&
-                scrollbarBackgroundPosition.y - WINDOW_MARGIN <= event.y &&
-                event.y <= scrollbarBackgroundPosition.y + scrollbarBackgroundHeight + WINDOW_MARGIN) {
-                scrollbarValue = (event.y - scrollbarBarClickedAt * scrollbarBarHeight - scrollbarBackgroundPosition.y) /
-                    (scrollbarBackgroundHeight - scrollbarBarHeight - 2);
-                scrollbarValue = Math.min(Math.max(scrollbarValue, 0.0), 1.0);
-                firstUserToDisplay = Math.floor(scrollbarValue * (linesOfUsers.length - numUsersToDisplay));
-                updateOverlayPositions();
-                updateUsersDisplay();
-            } else {
-                Overlays.editOverlay(scrollbarBar, {
-                    backgroundAlpha: SCROLLBAR_BAR_ALPHA
-                });
-                isMovingScrollbar = false;
+        if (event.type === "jump-to") {
+            if (typeof event.data.username !== undefined) {
+                // teleport to selected user from the online users list
+                location.goToUser(event.data.username);
             }
         }
-
-        if (isMovingWindow) {
-            windowPosition = {
-                x: event.x - movingClickOffset.x,
-                y: event.y - movingClickOffset.y
-            };
-
-            saturateWindowPosition();
-            calculateWindowHeight();
-            updateOverlayPositions();
-            updateUsersDisplay();
-
-        } else {
-
-            isVisible = isBorderVisible;
-            if (isVisible) {
-                isVisible = windowPosition.x - WINDOW_BORDER_LEFT_MARGIN <= event.x &&
-                    event.x <= windowPosition.x - WINDOW_BORDER_LEFT_MARGIN + WINDOW_BORDER_WIDTH &&
-                    windowPosition.y - windowHeight - WINDOW_BORDER_TOP_MARGIN <= event.y &&
-                    event.y <= windowPosition.y + WINDOW_BORDER_BOTTOM_MARGIN;
-            } else {
-                isVisible = windowPosition.x <= event.x && event.x <= windowPosition.x + WINDOW_WIDTH &&
-                    windowPosition.y - windowHeight <= event.y && event.y <= windowPosition.y;
-            }
-            if (isVisible !== isBorderVisible) {
-                isBorderVisible = isVisible;
-                Overlays.editOverlay(windowBorder, {
-                    visible: isBorderVisible
-                });
-            }
+        if (event.type === "toggle-visibility") {
+            if (typeof event.data.visibility !== undefined) {
+                // update your visibility (all, friends, or none)
+                myVisibility = event.data.visibility;
+                GlobalServices.findableBy = myVisibility;
+            } 
         }
     }
 
-    function onMouseReleaseEvent() {
-        var offset = {};
+    button.clicked.connect(onClicked);
+    tablet.webEventReceived.connect(onWebEventReceived);
 
-        if (isWindowDisabled()) {
-            return;
-        }
-
-        if (isMovingScrollbar) {
-            Overlays.editOverlay(scrollbarBar, {
-                backgroundAlpha: SCROLLBAR_BAR_ALPHA
-            });
-            isMovingScrollbar = false;
-        }
-
-        if (isMovingWindow) {
-            // Save offset of bottom of window to nearest edge of the window.
-            offset.x = (windowPosition.x + WINDOW_WIDTH / 2 < viewport.x / 2) ?
-                windowPosition.x : windowPosition.x - viewport.x;
-            offset.y = (windowPosition.y < viewport.y / 2) ?
-                windowPosition.y : windowPosition.y - viewport.y;
-            Settings.setValue(SETTING_USERS_WINDOW_OFFSET, JSON.stringify(offset));
-            isMovingWindow = false;
-        }
-    }
-
-    function onScriptUpdate() {
-        var oldViewport = viewport,
-            oldIsMirrorDisplay = isMirrorDisplay,
-            oldIsFullscreenMirror = isFullscreenMirror,
-            MIRROR_MENU_ITEM = "Mirror",
-            FULLSCREEN_MIRROR_MENU_ITEM = "Fullscreen Mirror";
-
-        if (isWindowDisabled()) {
-            return;
-        }
-
-        viewport = Controller.getViewportDimensions();
-        isMirrorDisplay = Menu.isOptionChecked(MIRROR_MENU_ITEM);
-        isFullscreenMirror = Menu.isOptionChecked(FULLSCREEN_MIRROR_MENU_ITEM);
-
-        if (viewport.y !== oldViewport.y || isMirrorDisplay !== oldIsMirrorDisplay ||
-            isFullscreenMirror !== oldIsFullscreenMirror) {
-            calculateWindowHeight();
-            updateUsersDisplay();
-        }
-
-        if (viewport.y !== oldViewport.y) {
-            if (windowPosition.y > oldViewport.y / 2) {
-                // Maintain position w.r.t. bottom of window.
-                windowPosition.y = viewport.y - (oldViewport.y - windowPosition.y);
-            }
-        }
-
-        if (viewport.x !== oldViewport.x) {
-            if (windowPosition.x + (WINDOW_WIDTH / 2) > oldViewport.x / 2) {
-                // Maintain position w.r.t. right of window.
-                windowPosition.x = viewport.x - (oldViewport.x - windowPosition.x);
-            }
-        }
-
-        updateOverlayPositions();
-    }
-
-    function setUp() {
-        var textSizeOverlay,
-            offsetSetting,
-            offset = {},
-            hmdViewport;
-
-        textSizeOverlay = Overlays.addOverlay("text", {
-            font: WINDOW_FONT,
-            visible: false
-        });
-        windowTextHeight = Math.floor(Overlays.textSize(textSizeOverlay, "1").height);
-        windowLineSpacing = Math.floor(Overlays.textSize(textSizeOverlay, "1\n2").height - 2 * windowTextHeight);
-        windowLineHeight = windowTextHeight + windowLineSpacing;
-        windowMinimumHeight = windowTextHeight + WINDOW_MARGIN + WINDOW_BASE_MARGIN;
-        Overlays.deleteOverlay(textSizeOverlay);
-
-        viewport = Controller.getViewportDimensions();
-
-        offsetSetting = Settings.getValue(SETTING_USERS_WINDOW_OFFSET);
-        if (offsetSetting !== "") {
-            offset = JSON.parse(Settings.getValue(SETTING_USERS_WINDOW_OFFSET));
-        }
-        if (offset.hasOwnProperty("x") && offset.hasOwnProperty("y")) {
-            windowPosition.x = offset.x < 0 ? viewport.x + offset.x : offset.x;
-            windowPosition.y = offset.y <= 0 ? viewport.y + offset.y : offset.y;
-        } else {
-            hmdViewport = Controller.getRecommendedOverlayRect();
-            windowPosition = {
-                x: (viewport.x - hmdViewport.width) / 2,  // HMD viewport is narrower than screen.
-                y: hmdViewport.height  // HMD viewport starts at top of screen but only extends down so far.
-            };
-        }
-
-        saturateWindowPosition();
-        calculateWindowHeight();
-
-        windowBorder = Overlays.addOverlay("rectangle", {
-            x: 0,
-            y: viewport.y,   // Start up off-screen
-            width: WINDOW_BORDER_WIDTH,
-            height: windowBorderHeight,
-            radius: WINDOW_BORDER_RADIUS,
-            color: WINDOW_BORDER_COLOR,
-            alpha: WINDOW_BORDER_ALPHA,
-            visible: false
-        });
-
-        windowPane = Overlays.addOverlay("text", {
-            x: 0,
-            y: viewport.y,
-            width: WINDOW_WIDTH,
-            height: windowHeight,
-            topMargin: WINDOW_MARGIN + windowLineHeight,
-            leftMargin: WINDOW_MARGIN,
-            color: WINDOW_FOREGROUND_COLOR,
-            alpha: WINDOW_FOREGROUND_ALPHA,
-            backgroundColor: WINDOW_BACKGROUND_COLOR,
-            backgroundAlpha: WINDOW_BACKGROUND_ALPHA,
-            text: "",
-            font: WINDOW_FONT,
-            visible: false
-        });
-
-        windowHeading = Overlays.addOverlay("text", {
-            x: 0,
-            y: viewport.y,
-            width: WINDOW_WIDTH - 2 * WINDOW_MARGIN,
-            height: windowTextHeight,
-            topMargin: 0,
-            leftMargin: 0,
-            color: WINDOW_HEADING_COLOR,
-            alpha: WINDOW_HEADING_ALPHA,
-            backgroundAlpha: 0.0,
-            text: "Users online",
-            font: WINDOW_FONT,
-            visible: false
-        });
-
-        minimizeButton = Overlays.addOverlay("image", {
-            x: 0,
-            y: viewport.y,
-            width: MIN_MAX_BUTTON_WIDTH,
-            height: MIN_MAX_BUTTON_HEIGHT,
-            imageURL: MIN_MAX_BUTTON_SVG,
-            subImage: {
-                x: 0,
-                y: 0,
-                width: MIN_MAX_BUTTON_SVG_WIDTH,
-                height: MIN_MAX_BUTTON_SVG_HEIGHT / 2
-            },
-            color: MIN_MAX_BUTTON_COLOR,
-            alpha: MIN_MAX_BUTTON_ALPHA,
-            visible: false
-        });
-
-        scrollbarBackgroundPosition = {
-            x: 0,
-            y: viewport.y
-        };
-        scrollbarBackground = Overlays.addOverlay("text", {
-            x: 0,
-            y: scrollbarBackgroundPosition.y,
-            width: SCROLLBAR_BACKGROUND_WIDTH,
-            height: windowTextHeight,
-            backgroundColor: SCROLLBAR_BACKGROUND_COLOR,
-            backgroundAlpha: SCROLLBAR_BACKGROUND_ALPHA,
-            text: "",
-            visible: false
-        });
-
-        scrollbarBarPosition = {
-            x: 0,
-            y: viewport.y
-        };
-        scrollbarBar = Overlays.addOverlay("text", {
-            x: 0,
-            y: scrollbarBarPosition.y,
-            width: SCROLLBAR_BACKGROUND_WIDTH - 2,
-            height: windowTextHeight,
-            backgroundColor: SCROLLBAR_BAR_COLOR,
-            backgroundAlpha: SCROLLBAR_BAR_ALPHA,
-            text: "",
-            visible: false
-        });
-
-        friendsButton = Overlays.addOverlay("image", {
-            x: 0,
-            y: viewport.y,
-            width: FRIENDS_BUTTON_WIDTH,
-            height: FRIENDS_BUTTON_HEIGHT,
-            imageURL: FRIENDS_BUTTON_SVG,
-            subImage: {
-                x: 0,
-                y: 0,
-                width: FRIENDS_BUTTON_SVG_WIDTH,
-                height: FRIENDS_BUTTON_SVG_HEIGHT
-            },
-            color: FRIENDS_BUTTON_COLOR,
-            alpha: FRIENDS_BUTTON_ALPHA,
-            visible: false
-        });
-
-        showMe = Settings.getValue(SETTING_USERS_SHOW_ME, "");
-        if (DISPLAY_VALUES.indexOf(showMe) === -1) {
-            showMe = DISPLAY_EVERYONE;
-        }
-
-        displayControl = new PopUpMenu({
-            prompt: DISPLAY_PROMPT,
-            value: showMe,
-            values: DISPLAY_VALUES,
-            displayValues: DISPLAY_DISPLAY_VALUES,
-            x: 0,
-            y: viewport.y,
-            width: WINDOW_WIDTH - 1.5 * WINDOW_MARGIN,
-            promptWidth: DISPLAY_PROMPT_WIDTH,
-            lineHeight: windowLineHeight,
-            textHeight: windowTextHeight,
-            font: WINDOW_FONT,
-            promptColor: WINDOW_HEADING_COLOR,
-            promptAlpha: WINDOW_HEADING_ALPHA,
-            promptBackgroundColor: WINDOW_BACKGROUND_COLOR,
-            promptBackgroundAlpha: 0.0,
-            optionColor: WINDOW_FOREGROUND_COLOR,
-            optionAlpha: WINDOW_FOREGROUND_ALPHA,
-            optionBackgroundColor: OPTION_BACKGROUND_COLOR,
-            optionBackgroundAlpha: OPTION_BACKGROUND_ALPHA,
-            popupBackgroundColor: DISPLAY_OPTIONS_BACKGROUND_COLOR,
-            popupBackgroundAlpha: DISPLAY_OPTIONS_BACKGROUND_ALPHA,
-            buttonColor: MIN_MAX_BUTTON_COLOR,
-            buttonAlpha: MIN_MAX_BUTTON_ALPHA,
-            visible: false
-        });
-
-        myVisibility = Settings.getValue(SETTING_USERS_VISIBLE_TO, "");
-        if (VISIBILITY_VALUES.indexOf(myVisibility) === -1) {
-            myVisibility = VISIBILITY_FRIENDS;
-        }
-        GlobalServices.findableBy = myVisibility;
-
-        visibilityControl = new PopUpMenu({
-            prompt: VISIBILITY_PROMPT,
-            value: myVisibility,
-            values: VISIBILITY_VALUES,
-            displayValues: VISIBILITY_DISPLAY_VALUES,
-            x: 0,
-            y: viewport.y,
-            width: WINDOW_WIDTH - 1.5 * WINDOW_MARGIN,
-            promptWidth: VISIBILITY_PROMPT_WIDTH,
-            lineHeight: windowLineHeight,
-            textHeight: windowTextHeight,
-            font: WINDOW_FONT,
-            promptColor: WINDOW_HEADING_COLOR,
-            promptAlpha: WINDOW_HEADING_ALPHA,
-            promptBackgroundColor: WINDOW_BACKGROUND_COLOR,
-            promptBackgroundAlpha: 0.0,
-            optionColor: WINDOW_FOREGROUND_COLOR,
-            optionAlpha: WINDOW_FOREGROUND_ALPHA,
-            optionBackgroundColor: OPTION_BACKGROUND_COLOR,
-            optionBackgroundAlpha: OPTION_BACKGROUND_ALPHA,
-            popupBackgroundColor: DISPLAY_OPTIONS_BACKGROUND_COLOR,
-            popupBackgroundAlpha: DISPLAY_OPTIONS_BACKGROUND_ALPHA,
-            buttonColor: MIN_MAX_BUTTON_COLOR,
-            buttonAlpha: MIN_MAX_BUTTON_ALPHA,
-            visible: false
-        });
-
-        Controller.mousePressEvent.connect(onMousePressEvent);
-        Controller.mouseMoveEvent.connect(onMouseMoveEvent);
-        Controller.mouseReleaseEvent.connect(onMouseReleaseEvent);
-
-        Menu.addMenuItem({
-            menuName: MENU_NAME,
-            menuItemName: MENU_ITEM,
-            afterItem: MENU_ITEM_AFTER,
-            isCheckable: true,
-            isChecked: isVisible
-        });
-        Menu.menuItemEvent.connect(onMenuItemEvent);
-
-        GlobalServices.findableByChanged.connect(onFindableByChanged);
-
-        Script.update.connect(onScriptUpdate);
-
-        pollUsers();
-
-        // Set minimized at end - setup code does not handle `minimized == false` correctly
-        setMinimized(isValueTrue(Settings.getValue(SETTING_USERS_WINDOW_MINIMIZED, true)));
-    }
-
-    function tearDown() {
-        Menu.removeMenuItem(MENU_NAME, MENU_ITEM);
-
-        Script.clearTimeout(usersTimer);
-        Overlays.deleteOverlay(windowBorder);
-        Overlays.deleteOverlay(windowPane);
-        Overlays.deleteOverlay(windowHeading);
-        Overlays.deleteOverlay(minimizeButton);
-        Overlays.deleteOverlay(scrollbarBackground);
-        Overlays.deleteOverlay(scrollbarBar);
-        Overlays.deleteOverlay(friendsButton);
-        displayControl.tearDown();
-        visibilityControl.tearDown();
-    }
-
-    setUp();
-    Script.scriptEnding.connect(tearDown);
-}());
-
-function cleanup () {
-    //remove tablet button
-    button.clicked.disconnect(onClicked);
-    if (tablet) {
+    function cleanup() {
+        button.clicked.disconnect(onClicked);
         tablet.removeButton(button);
     }
-    if (toolBar) {
-        toolBar.removeButton(buttonName);
-    }
-}
-Script.scriptEnding.connect(cleanup);
 
+    Script.scriptEnding.connect(cleanup);
 }()); // END LOCAL_SCOPE

From 80c8748046aa5bc0ea1128c181ca7ccafaae7410 Mon Sep 17 00:00:00 2001
From: Faye Li <si.fi.faye.li@gmial.com>
Date: Wed, 1 Feb 2017 15:37:01 -0800
Subject: [PATCH 15/16] Revert "replace old user.js"

This reverts commit 2340f56b5308ff553de4597fc0d0100f7c54e308.
---
 scripts/system/tablet-users.js |   98 +++
 scripts/system/users.js        | 1308 ++++++++++++++++++++++++++++++--
 2 files changed, 1343 insertions(+), 63 deletions(-)
 create mode 100644 scripts/system/tablet-users.js

diff --git a/scripts/system/tablet-users.js b/scripts/system/tablet-users.js
new file mode 100644
index 0000000000..0fad0c56f3
--- /dev/null
+++ b/scripts/system/tablet-users.js
@@ -0,0 +1,98 @@
+"use strict";
+
+//
+//  users.js
+//
+//  Created by Faye Li on 18 Jan 2017.
+//  Copyright 2017 High Fidelity, Inc.
+//
+//  Distributed under the Apache License, Version 2.0.
+//  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
+//
+
+(function() { // BEGIN LOCAL_SCOPE
+    var USERS_URL = "https://hifi-content.s3.amazonaws.com/faye/tablet-dev/users.html";
+
+    var FRIENDS_WINDOW_URL = "https://metaverse.highfidelity.com/user/friends";
+    var FRIENDS_WINDOW_WIDTH = 290;
+    var FRIENDS_WINDOW_HEIGHT = 500;
+    var FRIENDS_WINDOW_TITLE = "Add/Remove Friends";
+
+    // Initialise visibility based on global service
+    var VISIBILITY_VALUES_SET = {};
+    VISIBILITY_VALUES_SET["all"] = true;
+    VISIBILITY_VALUES_SET["friends"] = true;
+    VISIBILITY_VALUES_SET["none"] = true;
+    var myVisibility;
+    if (GlobalServices.findableBy in VISIBILITY_VALUES_SET) {
+        myVisibility = GlobalServices.findableBy;
+    } else {
+        // default to friends if it can't be determined
+        myVisibility = "friends";
+        GlobalServices.findableBy = myVisibilty;
+    }
+
+    var tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
+    var button = tablet.addButton({
+        icon: "icons/tablet-icons/people-i.svg",
+        text: "Users"
+    });
+
+    function onClicked() {
+        tablet.gotoWebScreen(USERS_URL);
+    }
+
+    function onWebEventReceived(event) {
+        print("Script received a web event, its type is " + typeof event);
+        if (typeof event === "string") {
+            event = JSON.parse(event);
+        }
+        if (event.type === "ready") {
+            // send username to html
+            var myUsername = GlobalServices.username;
+            var object = {
+                "type": "user-info",
+                "data": {
+                    "username": myUsername,
+                    "visibility": myVisibility
+                }
+            };
+            tablet.emitScriptEvent(JSON.stringify(object));
+        }
+        if (event.type === "manage-friends") {
+            // open a web overlay to metaverse friends page
+            var friendsWindow = new OverlayWebWindow({
+                title: FRIENDS_WINDOW_TITLE,
+                width: FRIENDS_WINDOW_WIDTH,
+                height: FRIENDS_WINDOW_HEIGHT,
+                visible: false
+            });
+            friendsWindow.setURL(FRIENDS_WINDOW_URL);
+            friendsWindow.setVisible(true);
+            friendsWindow.raise();
+        }
+        if (event.type === "jump-to") {
+            if (typeof event.data.username !== undefined) {
+                // teleport to selected user from the online users list
+                location.goToUser(event.data.username);
+            }
+        }
+        if (event.type === "toggle-visibility") {
+            if (typeof event.data.visibility !== undefined) {
+                // update your visibility (all, friends, or none)
+                myVisibility = event.data.visibility;
+                GlobalServices.findableBy = myVisibility;
+            } 
+        }
+    }
+
+    button.clicked.connect(onClicked);
+    tablet.webEventReceived.connect(onWebEventReceived);
+
+    function cleanup() {
+        button.clicked.disconnect(onClicked);
+        tablet.removeButton(button);
+    }
+
+    Script.scriptEnding.connect(cleanup);
+}()); // END LOCAL_SCOPE
diff --git a/scripts/system/users.js b/scripts/system/users.js
index 0fad0c56f3..009c446ff3 100644
--- a/scripts/system/users.js
+++ b/scripts/system/users.js
@@ -2,97 +2,1279 @@
 
 //
 //  users.js
+//  examples
 //
-//  Created by Faye Li on 18 Jan 2017.
-//  Copyright 2017 High Fidelity, Inc.
+//  Created by David Rowe on 9 Mar 2015.
+//  Copyright 2015 High Fidelity, Inc.
 //
 //  Distributed under the Apache License, Version 2.0.
 //  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
 //
+/*globals HMD, Toolbars, Script, Menu, Overlays, Tablet, Controller, Settings, OverlayWebWindow, Account, GlobalServices */
 
 (function() { // BEGIN LOCAL_SCOPE
-    var USERS_URL = "https://hifi-content.s3.amazonaws.com/faye/tablet-dev/users.html";
+var button;
+var buttonName = "USERS";
+var toolBar = null;
+var tablet = null;
 
-    var FRIENDS_WINDOW_URL = "https://metaverse.highfidelity.com/user/friends";
-    var FRIENDS_WINDOW_WIDTH = 290;
-    var FRIENDS_WINDOW_HEIGHT = 500;
-    var FRIENDS_WINDOW_TITLE = "Add/Remove Friends";
+var MENU_ITEM = "Users Online";
 
-    // Initialise visibility based on global service
-    var VISIBILITY_VALUES_SET = {};
-    VISIBILITY_VALUES_SET["all"] = true;
-    VISIBILITY_VALUES_SET["friends"] = true;
-    VISIBILITY_VALUES_SET["none"] = true;
-    var myVisibility;
-    if (GlobalServices.findableBy in VISIBILITY_VALUES_SET) {
-        myVisibility = GlobalServices.findableBy;
-    } else {
-        // default to friends if it can't be determined
-        myVisibility = "friends";
-        GlobalServices.findableBy = myVisibilty;
+if (Settings.getValue("HUDUIEnabled")) {
+    toolBar = Toolbars.getToolbar("com.highfidelity.interface.toolbar.system");
+    button = toolBar.addButton({
+        objectName: buttonName,
+        imageURL: Script.resolvePath("assets/images/tools/people.svg"),
+        visible: true,
+        alpha: 0.9
+    });
+} else {
+    tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
+    button = tablet.addButton({
+        icon: "icons/tablet-icons/users-i.svg",
+        text: "USERS",
+        isActive: Menu.isOptionChecked(MENU_ITEM)
+    });
+}
+
+
+function onClicked() {
+    Menu.setIsOptionChecked(MENU_ITEM, !Menu.isOptionChecked(MENU_ITEM));
+    button.editProperties({isActive: Menu.isOptionChecked(MENU_ITEM)});
+}
+button.clicked.connect(onClicked);
+
+// resolve these paths immediately
+var MIN_MAX_BUTTON_SVG = Script.resolvePath("assets/images/tools/min-max-toggle.svg");
+var BASE_URL = Script.resolvePath("assets/images/tools/");
+
+var PopUpMenu = function (properties) {
+    var value = properties.value,
+        promptOverlay,
+        valueOverlay,
+        buttonOverlay,
+        optionOverlays = [],
+        isDisplayingOptions = false,
+        OPTION_MARGIN = 4,
+
+        MIN_MAX_BUTTON_SVG_WIDTH = 17.1,
+        MIN_MAX_BUTTON_SVG_HEIGHT = 32.5,
+        MIN_MAX_BUTTON_WIDTH = 14,
+        MIN_MAX_BUTTON_HEIGHT = MIN_MAX_BUTTON_WIDTH;
+
+    function positionDisplayOptions() {
+        var y,
+            i;
+
+        y = properties.y - (properties.values.length - 1) * properties.lineHeight - OPTION_MARGIN;
+
+        for (i = 0; i < properties.values.length; i += 1) {
+            Overlays.editOverlay(optionOverlays[i], {
+                y: y
+            });
+            y += properties.lineHeight;
+        }
     }
 
-    var tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
-    var button = tablet.addButton({
-        icon: "icons/tablet-icons/people-i.svg",
-        text: "Users"
+    function showDisplayOptions() {
+        var i,
+            yOffScreen = Controller.getViewportDimensions().y;
+
+        for (i = 0; i < properties.values.length; i += 1) {
+            optionOverlays[i] = Overlays.addOverlay("text", {
+                x: properties.x + properties.promptWidth,
+                y: yOffScreen,
+                width: properties.width - properties.promptWidth,
+                height: properties.textHeight + OPTION_MARGIN, // Only need to add margin at top to balance descenders
+                topMargin: OPTION_MARGIN,
+                leftMargin: OPTION_MARGIN,
+                color: properties.optionColor,
+                alpha: properties.optionAlpha,
+                backgroundColor: properties.popupBackgroundColor,
+                backgroundAlpha: properties.popupBackgroundAlpha,
+                text: properties.displayValues[i],
+                font: properties.font,
+                visible: true
+            });
+        }
+
+        positionDisplayOptions();
+
+        isDisplayingOptions = true;
+    }
+
+    function deleteDisplayOptions() {
+        var i;
+
+        for (i = 0; i < optionOverlays.length; i += 1) {
+            Overlays.deleteOverlay(optionOverlays[i]);
+        }
+
+        isDisplayingOptions = false;
+    }
+
+    function handleClick(overlay) {
+        var clicked = false,
+            i;
+
+        if (overlay === valueOverlay || overlay === buttonOverlay) {
+            showDisplayOptions();
+            return true;
+        }
+
+        if (isDisplayingOptions) {
+            for (i = 0; i < optionOverlays.length; i += 1) {
+                if (overlay === optionOverlays[i]) {
+                    value = properties.values[i];
+                    Overlays.editOverlay(valueOverlay, {
+                        text: properties.displayValues[i]
+                    });
+                    clicked = true;
+                }
+            }
+
+            deleteDisplayOptions();
+        }
+
+        return clicked;
+    }
+
+    function updatePosition(x, y) {
+        properties.x = x;
+        properties.y = y;
+        Overlays.editOverlay(promptOverlay, {
+            x: x,
+            y: y
+        });
+        Overlays.editOverlay(valueOverlay, {
+            x: x + properties.promptWidth,
+            y: y - OPTION_MARGIN
+        });
+        Overlays.editOverlay(buttonOverlay, {
+            x: x + properties.width - MIN_MAX_BUTTON_WIDTH - 1,
+            y: y - OPTION_MARGIN + 1
+        });
+        if (isDisplayingOptions) {
+            positionDisplayOptions();
+        }
+    }
+
+    function setVisible(visible) {
+        Overlays.editOverlay(promptOverlay, {
+            visible: visible
+        });
+        Overlays.editOverlay(valueOverlay, {
+            visible: visible
+        });
+        Overlays.editOverlay(buttonOverlay, {
+            visible: visible
+        });
+    }
+
+    function tearDown() {
+        Overlays.deleteOverlay(promptOverlay);
+        Overlays.deleteOverlay(valueOverlay);
+        Overlays.deleteOverlay(buttonOverlay);
+        if (isDisplayingOptions) {
+            deleteDisplayOptions();
+        }
+    }
+
+    function getValue() {
+        return value;
+    }
+
+    function setValue(newValue) {
+        var index;
+
+        index = properties.values.indexOf(newValue);
+        if (index !== -1) {
+            value = newValue;
+            Overlays.editOverlay(valueOverlay, {
+                text: properties.displayValues[index]
+            });
+        }
+    }
+
+    promptOverlay = Overlays.addOverlay("text", {
+        x: properties.x,
+        y: properties.y,
+        width: properties.promptWidth,
+        height: properties.textHeight,
+        topMargin: 0,
+        leftMargin: 0,
+        color: properties.promptColor,
+        alpha: properties.promptAlpha,
+        backgroundColor: properties.promptBackgroundColor,
+        backgroundAlpha: properties.promptBackgroundAlpha,
+        text: properties.prompt,
+        font: properties.font,
+        visible: properties.visible
     });
 
-    function onClicked() {
-        tablet.gotoWebScreen(USERS_URL);
+    valueOverlay = Overlays.addOverlay("text", {
+        x: properties.x + properties.promptWidth,
+        y: properties.y,
+        width: properties.width - properties.promptWidth,
+        height: properties.textHeight + OPTION_MARGIN, // Only need to add margin at top to balance descenders
+        topMargin: OPTION_MARGIN,
+        leftMargin: OPTION_MARGIN,
+        color: properties.optionColor,
+        alpha: properties.optionAlpha,
+        backgroundColor: properties.optionBackgroundColor,
+        backgroundAlpha: properties.optionBackgroundAlpha,
+        text: properties.displayValues[properties.values.indexOf(value)],
+        font: properties.font,
+        visible: properties.visible
+    });
+
+    buttonOverlay = Overlays.addOverlay("image", {
+        x: properties.x + properties.width - MIN_MAX_BUTTON_WIDTH - 1,
+        y: properties.y,
+        width: MIN_MAX_BUTTON_WIDTH,
+        height: MIN_MAX_BUTTON_HEIGHT,
+        imageURL: MIN_MAX_BUTTON_SVG,
+        subImage: {
+            x: 0,
+            y: 0,
+            width: MIN_MAX_BUTTON_SVG_WIDTH,
+            height: MIN_MAX_BUTTON_SVG_HEIGHT / 2
+        },
+        //color: properties.buttonColor,
+        alpha: properties.buttonAlpha,
+        visible: properties.visible
+    });
+
+    return {
+        updatePosition: updatePosition,
+        setVisible: setVisible,
+        handleClick: handleClick,
+        tearDown: tearDown,
+        getValue: getValue,
+        setValue: setValue
+    };
+};
+
+var usersWindow = (function () {
+
+    var WINDOW_WIDTH = 260,
+        WINDOW_MARGIN = 12,
+        WINDOW_BASE_MARGIN = 24, // A little less is needed in order look correct
+        WINDOW_FONT = {
+            size: 12
+        },
+        WINDOW_FOREGROUND_COLOR = {
+            red: 240,
+            green: 240,
+            blue: 240
+        },
+        WINDOW_FOREGROUND_ALPHA = 0.95,
+        WINDOW_HEADING_COLOR = {
+            red: 180,
+            green: 180,
+            blue: 180
+        },
+        WINDOW_HEADING_ALPHA = 0.95,
+        WINDOW_BACKGROUND_COLOR = {
+            red: 80,
+            green: 80,
+            blue: 80
+        },
+        WINDOW_BACKGROUND_ALPHA = 0.8,
+        windowPane,
+        windowHeading,
+
+        // Margin on the left and right side of the window to keep
+        // it from getting too close to the edge of the screen which
+        // is unclickable.
+        WINDOW_MARGIN_X = 20,
+
+        // Window border is similar to that of edit.js.
+        WINDOW_MARGIN_HALF = WINDOW_MARGIN / 2,
+        WINDOW_BORDER_WIDTH = WINDOW_WIDTH + 2 * WINDOW_MARGIN_HALF,
+        WINDOW_BORDER_TOP_MARGIN = 2 * WINDOW_MARGIN_HALF,
+        WINDOW_BORDER_BOTTOM_MARGIN = WINDOW_MARGIN_HALF,
+        WINDOW_BORDER_LEFT_MARGIN = WINDOW_MARGIN_HALF,
+        WINDOW_BORDER_RADIUS = 4,
+        WINDOW_BORDER_COLOR = { red: 255, green: 255, blue: 255 },
+        WINDOW_BORDER_ALPHA = 0.5,
+        windowBorder,
+
+        MIN_MAX_BUTTON_SVG = BASE_URL + "min-max-toggle.svg",
+        MIN_MAX_BUTTON_SVG_WIDTH = 17.1,
+        MIN_MAX_BUTTON_SVG_HEIGHT = 32.5,
+        MIN_MAX_BUTTON_WIDTH = 14,
+        MIN_MAX_BUTTON_HEIGHT = MIN_MAX_BUTTON_WIDTH,
+        MIN_MAX_BUTTON_COLOR = {
+            red: 255,
+            green: 255,
+            blue: 255
+        },
+        MIN_MAX_BUTTON_ALPHA = 0.9,
+        minimizeButton,
+        SCROLLBAR_BACKGROUND_WIDTH = 12,
+        SCROLLBAR_BACKGROUND_COLOR = {
+            red: 70,
+            green: 70,
+            blue: 70
+        },
+        SCROLLBAR_BACKGROUND_ALPHA = 0.8,
+        scrollbarBackground,
+        SCROLLBAR_BAR_MIN_HEIGHT = 5,
+        SCROLLBAR_BAR_COLOR = {
+            red: 170,
+            green: 170,
+            blue: 170
+        },
+        SCROLLBAR_BAR_ALPHA = 0.8,
+        SCROLLBAR_BAR_SELECTED_ALPHA = 0.95,
+        scrollbarBar,
+        scrollbarBackgroundHeight,
+        scrollbarBarHeight,
+        FRIENDS_BUTTON_SPACER = 6, // Space before add/remove friends button
+        FRIENDS_BUTTON_SVG = BASE_URL + "add-remove-friends.svg",
+        FRIENDS_BUTTON_SVG_WIDTH = 107,
+        FRIENDS_BUTTON_SVG_HEIGHT = 27,
+        FRIENDS_BUTTON_WIDTH = FRIENDS_BUTTON_SVG_WIDTH,
+        FRIENDS_BUTTON_HEIGHT = FRIENDS_BUTTON_SVG_HEIGHT,
+        FRIENDS_BUTTON_COLOR = {
+            red: 225,
+            green: 225,
+            blue: 225
+        },
+        FRIENDS_BUTTON_ALPHA = 0.95,
+        FRIENDS_WINDOW_URL = "https://metaverse.highfidelity.com/user/friends",
+        FRIENDS_WINDOW_WIDTH = 290,
+        FRIENDS_WINDOW_HEIGHT = 500,
+        FRIENDS_WINDOW_TITLE = "Add/Remove Friends",
+        friendsButton,
+        friendsWindow,
+
+        OPTION_BACKGROUND_COLOR = {
+            red: 60,
+            green: 60,
+            blue: 60
+        },
+        OPTION_BACKGROUND_ALPHA = 0.1,
+
+        DISPLAY_SPACER = 12, // Space before display control
+        DISPLAY_PROMPT = "Show me:",
+        DISPLAY_PROMPT_WIDTH = 60,
+        DISPLAY_EVERYONE = "everyone",
+        DISPLAY_FRIENDS = "friends",
+        DISPLAY_VALUES = [DISPLAY_EVERYONE, DISPLAY_FRIENDS],
+        DISPLAY_DISPLAY_VALUES = DISPLAY_VALUES,
+        DISPLAY_OPTIONS_BACKGROUND_COLOR = {
+            red: 120,
+            green: 120,
+            blue: 120
+        },
+        DISPLAY_OPTIONS_BACKGROUND_ALPHA = 0.9,
+        displayControl,
+
+        VISIBILITY_SPACER = 6, // Space before visibility control
+        VISIBILITY_PROMPT = "Visible to:",
+        VISIBILITY_PROMPT_WIDTH = 60,
+        VISIBILITY_ALL = "all",
+        VISIBILITY_FRIENDS = "friends",
+        VISIBILITY_NONE = "none",
+        VISIBILITY_VALUES = [VISIBILITY_ALL, VISIBILITY_FRIENDS, VISIBILITY_NONE],
+        VISIBILITY_DISPLAY_VALUES = ["everyone", "friends", "no one"],
+        visibilityControl,
+
+        windowHeight,
+        windowBorderHeight,
+        windowTextHeight,
+        windowLineSpacing,
+        windowLineHeight, // = windowTextHeight + windowLineSpacing
+        windowMinimumHeight,
+
+        usersOnline, // Raw users data
+        linesOfUsers = [], // Array of indexes pointing into usersOnline
+        numUsersToDisplay = 0,
+        firstUserToDisplay = 0,
+
+        API_URL = "https://metaverse.highfidelity.com/api/v1/users?status=online",
+        API_FRIENDS_FILTER = "&filter=friends",
+        HTTP_GET_TIMEOUT = 60000, // ms = 1 minute
+        usersRequest,
+        processUsers,
+        pollUsersTimedOut,
+        usersTimer = null,
+        USERS_UPDATE_TIMEOUT = 5000, // ms = 5s
+
+        showMe,
+        myVisibility,
+
+        MENU_NAME = "View",
+        MENU_ITEM = "Users Online",
+        MENU_ITEM_OVERLAYS = "Overlays",
+        MENU_ITEM_AFTER = MENU_ITEM_OVERLAYS,
+
+        SETTING_USERS_SHOW_ME = "UsersWindow.ShowMe",
+        SETTING_USERS_VISIBLE_TO = "UsersWindow.VisibleTo",
+        SETTING_USERS_WINDOW_MINIMIZED = "UsersWindow.Minimized",
+        SETTING_USERS_WINDOW_OFFSET = "UsersWindow.Offset",
+        // +ve x, y values are offset from left, top of screen; -ve from right, bottom.
+
+        isLoggedIn = false,
+        isVisible = true,
+        isMinimized = false,
+        isBorderVisible = false,
+
+        viewport,
+        isMirrorDisplay = false,
+        isFullscreenMirror = false,
+
+        windowPosition = {},  // Bottom left corner of window pane.
+        isMovingWindow = false,
+        movingClickOffset = { x: 0, y: 0 },
+
+        isUsingScrollbars = false,
+        isMovingScrollbar = false,
+        scrollbarBackgroundPosition = {},
+        scrollbarBarPosition = {},
+        scrollbarBarClickedAt, // 0.0 .. 1.0
+        scrollbarValue = 0.0; // 0.0 .. 1.0
+
+    function isWindowDisabled() {
+        return !Menu.isOptionChecked(MENU_ITEM) || !Menu.isOptionChecked(MENU_ITEM_OVERLAYS);
     }
 
-    function onWebEventReceived(event) {
-        print("Script received a web event, its type is " + typeof event);
-        if (typeof event === "string") {
-            event = JSON.parse(event);
+    function isValueTrue(value) {
+        // Work around Boolean Settings values being read as string when Interface starts up but as Booleans when re-read after
+        // Being written if refresh script.
+        return value === true || value === "true";
+    }
+
+    function calculateWindowHeight() {
+        var AUDIO_METER_HEIGHT = 52,
+            MIRROR_HEIGHT = 220,
+            nonUsersHeight,
+            maxWindowHeight;
+
+        if (isMinimized) {
+            windowHeight = windowTextHeight + WINDOW_MARGIN + WINDOW_BASE_MARGIN;
+            windowBorderHeight = windowHeight + WINDOW_BORDER_TOP_MARGIN + WINDOW_BORDER_BOTTOM_MARGIN;
+            return;
         }
-        if (event.type === "ready") {
-            // send username to html
-            var myUsername = GlobalServices.username;
-            var object = {
-                "type": "user-info",
-                "data": {
-                    "username": myUsername,
-                    "visibility": myVisibility
-                }
-            };
-            tablet.emitScriptEvent(JSON.stringify(object));
+
+        // Reserve space for title, friends button, and option controls
+        nonUsersHeight = WINDOW_MARGIN + windowLineHeight +
+            (shouldShowFriendsButton() ? FRIENDS_BUTTON_SPACER + FRIENDS_BUTTON_HEIGHT : 0) +
+            DISPLAY_SPACER +
+            windowLineHeight + VISIBILITY_SPACER +
+            windowLineHeight + WINDOW_BASE_MARGIN;
+
+        // Limit window to height of viewport above window position minus VU meter and mirror if displayed
+        windowHeight = linesOfUsers.length * windowLineHeight - windowLineSpacing + nonUsersHeight;
+        maxWindowHeight = windowPosition.y - AUDIO_METER_HEIGHT;
+        if (isMirrorDisplay && !isFullscreenMirror) {
+            maxWindowHeight -= MIRROR_HEIGHT;
         }
-        if (event.type === "manage-friends") {
-            // open a web overlay to metaverse friends page
-            var friendsWindow = new OverlayWebWindow({
-                title: FRIENDS_WINDOW_TITLE,
-                width: FRIENDS_WINDOW_WIDTH,
-                height: FRIENDS_WINDOW_HEIGHT,
-                visible: false
+        windowHeight = Math.max(Math.min(windowHeight, maxWindowHeight), nonUsersHeight);
+        windowBorderHeight = windowHeight + WINDOW_BORDER_TOP_MARGIN + WINDOW_BORDER_BOTTOM_MARGIN;
+
+        // Corresponding number of users to actually display
+        numUsersToDisplay = Math.max(Math.round((windowHeight - nonUsersHeight) / windowLineHeight), 0);
+        isUsingScrollbars = 0 < numUsersToDisplay && numUsersToDisplay < linesOfUsers.length;
+        if (isUsingScrollbars) {
+            firstUserToDisplay = Math.floor(scrollbarValue * (linesOfUsers.length - numUsersToDisplay));
+        } else {
+            firstUserToDisplay = 0;
+            scrollbarValue = 0.0;
+        }
+    }
+
+    function saturateWindowPosition() {
+        windowPosition.x = Math.max(WINDOW_MARGIN_X, Math.min(viewport.x - WINDOW_WIDTH - WINDOW_MARGIN_X, windowPosition.x));
+        windowPosition.y = Math.max(windowMinimumHeight, Math.min(viewport.y, windowPosition.y));
+    }
+
+    function updateOverlayPositions() {
+        // Overlay positions are all relative to windowPosition; windowPosition is the position of the windowPane overlay.
+        var windowLeft = windowPosition.x,
+            windowTop = windowPosition.y - windowHeight,
+            x,
+            y;
+
+        Overlays.editOverlay(windowBorder, {
+            x: windowPosition.x - WINDOW_BORDER_LEFT_MARGIN,
+            y: windowTop - WINDOW_BORDER_TOP_MARGIN
+        });
+        Overlays.editOverlay(windowPane, {
+            x: windowLeft,
+            y: windowTop
+        });
+        Overlays.editOverlay(windowHeading, {
+            x: windowLeft + WINDOW_MARGIN,
+            y: windowTop + WINDOW_MARGIN
+        });
+
+        Overlays.editOverlay(minimizeButton, {
+            x: windowLeft + WINDOW_WIDTH - WINDOW_MARGIN / 2 - MIN_MAX_BUTTON_WIDTH,
+            y: windowTop + WINDOW_MARGIN
+        });
+
+        scrollbarBackgroundPosition.x = windowLeft + WINDOW_WIDTH - 0.5 * WINDOW_MARGIN - SCROLLBAR_BACKGROUND_WIDTH;
+        scrollbarBackgroundPosition.y = windowTop + WINDOW_MARGIN + windowTextHeight;
+        Overlays.editOverlay(scrollbarBackground, {
+            x: scrollbarBackgroundPosition.x,
+            y: scrollbarBackgroundPosition.y
+        });
+        scrollbarBarPosition.y = scrollbarBackgroundPosition.y + 1 +
+            scrollbarValue * (scrollbarBackgroundHeight - scrollbarBarHeight - 2);
+        Overlays.editOverlay(scrollbarBar, {
+            x: scrollbarBackgroundPosition.x + 1,
+            y: scrollbarBarPosition.y
+        });
+
+
+        x = windowLeft + WINDOW_MARGIN;
+        y = windowPosition.y -
+            DISPLAY_SPACER -
+            windowLineHeight - VISIBILITY_SPACER -
+            windowLineHeight - WINDOW_BASE_MARGIN;
+        if (shouldShowFriendsButton()) {
+            y -= FRIENDS_BUTTON_HEIGHT;
+            Overlays.editOverlay(friendsButton, {
+                x: x,
+                y: y
             });
+            y += FRIENDS_BUTTON_HEIGHT;
+        }
+
+        y += DISPLAY_SPACER;
+        displayControl.updatePosition(x, y);
+
+        y += windowLineHeight + VISIBILITY_SPACER;
+        visibilityControl.updatePosition(x, y);
+    }
+
+    function updateUsersDisplay() {
+        var displayText = "",
+            user,
+            userText,
+            textWidth,
+            maxTextWidth,
+            ellipsisWidth,
+            reducedTextWidth,
+            i;
+
+        if (!isMinimized) {
+            maxTextWidth = WINDOW_WIDTH - (isUsingScrollbars ? SCROLLBAR_BACKGROUND_WIDTH : 0) - 2 * WINDOW_MARGIN;
+            ellipsisWidth = Overlays.textSize(windowPane, "...").width;
+            reducedTextWidth = maxTextWidth - ellipsisWidth;
+
+            for (i = 0; i < numUsersToDisplay; i += 1) {
+                user = usersOnline[linesOfUsers[firstUserToDisplay + i]];
+                userText = user.text;
+                textWidth = user.textWidth;
+
+                if (textWidth > maxTextWidth) {
+                    // Trim and append "..." to fit window width
+                    maxTextWidth = maxTextWidth - Overlays.textSize(windowPane, "...").width;
+                    while (textWidth > reducedTextWidth) {
+                        userText = userText.slice(0, -1);
+                        textWidth = Overlays.textSize(windowPane, userText).width;
+                    }
+                    userText += "...";
+                }
+
+                displayText += "\n" + userText;
+            }
+
+            displayText = displayText.slice(1); // Remove leading "\n".
+
+            scrollbarBackgroundHeight = numUsersToDisplay * windowLineHeight - windowLineSpacing / 2;
+            Overlays.editOverlay(scrollbarBackground, {
+                height: scrollbarBackgroundHeight,
+                visible: isLoggedIn && isUsingScrollbars
+            });
+            scrollbarBarHeight = Math.max(numUsersToDisplay / linesOfUsers.length * scrollbarBackgroundHeight,
+                SCROLLBAR_BAR_MIN_HEIGHT);
+            Overlays.editOverlay(scrollbarBar, {
+                height: scrollbarBarHeight,
+                visible: isLoggedIn && isUsingScrollbars
+            });
+        }
+
+        Overlays.editOverlay(windowBorder, {
+            height: windowBorderHeight
+        });
+
+        Overlays.editOverlay(windowPane, {
+            height: windowHeight,
+            text: displayText
+        });
+
+        Overlays.editOverlay(windowHeading, {
+            text: isLoggedIn ? (linesOfUsers.length > 0 ? "Users online" : "No users online") : "Users online - log in to view"
+        });
+    }
+
+    function shouldShowFriendsButton() {
+        return isVisible && isLoggedIn && !isMinimized;
+    }
+
+    function updateOverlayVisibility() {
+        Overlays.editOverlay(windowBorder, {
+            visible: isVisible && isBorderVisible
+        });
+        Overlays.editOverlay(windowPane, {
+            visible: isVisible
+        });
+        Overlays.editOverlay(windowHeading, {
+            visible: isVisible
+        });
+        Overlays.editOverlay(minimizeButton, {
+            visible: isVisible
+        });
+        Overlays.editOverlay(scrollbarBackground, {
+            visible: isVisible && isUsingScrollbars && !isMinimized
+        });
+        Overlays.editOverlay(scrollbarBar, {
+            visible: isVisible && isUsingScrollbars && !isMinimized
+        });
+        Overlays.editOverlay(friendsButton, {
+            visible: shouldShowFriendsButton()
+        });
+        displayControl.setVisible(isVisible && !isMinimized);
+        visibilityControl.setVisible(isVisible && !isMinimized);
+    }
+
+    function checkLoggedIn() {
+        var wasLoggedIn = isLoggedIn;
+
+        isLoggedIn = Account.isLoggedIn();
+        if (isLoggedIn !== wasLoggedIn) {
+            if (wasLoggedIn) {
+                setMinimized(true);
+                calculateWindowHeight();
+                updateOverlayPositions();
+                updateUsersDisplay();
+            }
+
+            updateOverlayVisibility();
+        }
+    }
+
+    function pollUsers() {
+        var url = API_URL;
+
+        if (showMe === DISPLAY_FRIENDS) {
+            url += API_FRIENDS_FILTER;
+        }
+
+        usersRequest = new XMLHttpRequest();
+        usersRequest.open("GET", url, true);
+        usersRequest.timeout = HTTP_GET_TIMEOUT;
+        usersRequest.ontimeout = pollUsersTimedOut;
+        usersRequest.onreadystatechange = processUsers;
+        usersRequest.send();
+    }
+
+    processUsers = function () {
+        var response,
+            myUsername,
+            user,
+            userText,
+            i;
+
+        if (usersRequest.readyState === usersRequest.DONE) {
+            if (usersRequest.status === 200) {
+                response = JSON.parse(usersRequest.responseText);
+                if (response.status !== "success") {
+                    print("Error: Request for users status returned status = " + response.status);
+                    usersTimer = Script.setTimeout(pollUsers, HTTP_GET_TIMEOUT); // Try again after a longer delay.
+                    return;
+                }
+                if (!response.hasOwnProperty("data") || !response.data.hasOwnProperty("users")) {
+                    print("Error: Request for users status returned invalid data");
+                    usersTimer = Script.setTimeout(pollUsers, HTTP_GET_TIMEOUT); // Try again after a longer delay.
+                    return;
+                }
+
+                usersOnline = response.data.users;
+                myUsername = GlobalServices.username;
+                linesOfUsers = [];
+                for (i = 0; i < usersOnline.length; i += 1) {
+                    user = usersOnline[i];
+                    if (user.username !== myUsername && user.online) {
+                        userText = user.username;
+                        if (user.location.root) {
+                            userText += " @ " + user.location.root.name;
+                        }
+
+                        usersOnline[i].text = userText;
+                        usersOnline[i].textWidth = Overlays.textSize(windowPane, userText).width;
+
+                        linesOfUsers.push(i);
+                    }
+                }
+
+                checkLoggedIn();
+                calculateWindowHeight();
+                updateUsersDisplay();
+                updateOverlayPositions();
+
+            } else {
+                print("Error: Request for users status returned " + usersRequest.status + " " + usersRequest.statusText);
+                usersTimer = Script.setTimeout(pollUsers, HTTP_GET_TIMEOUT); // Try again after a longer delay.
+                return;
+            }
+
+            usersTimer = Script.setTimeout(pollUsers, USERS_UPDATE_TIMEOUT); // Update after finished processing.
+        }
+    };
+
+    pollUsersTimedOut = function () {
+        print("Error: Request for users status timed out");
+        usersTimer = Script.setTimeout(pollUsers, HTTP_GET_TIMEOUT); // Try again after a longer delay.
+    };
+
+    function setVisible(visible) {
+        isVisible = visible;
+
+        if (isVisible) {
+            if (usersTimer === null) {
+                pollUsers();
+            }
+        } else {
+            Script.clearTimeout(usersTimer);
+            usersTimer = null;
+        }
+
+        updateOverlayVisibility();
+    }
+
+    function setMinimized(minimized) {
+        isMinimized = minimized;
+        Overlays.editOverlay(minimizeButton, {
+            subImage: {
+                y: isMinimized ? MIN_MAX_BUTTON_SVG_HEIGHT / 2 : 0
+            }
+        });
+        updateOverlayVisibility();
+        Settings.setValue(SETTING_USERS_WINDOW_MINIMIZED, isMinimized);
+    }
+
+    function onMenuItemEvent(event) {
+        if (event === MENU_ITEM) {
+            setVisible(Menu.isOptionChecked(MENU_ITEM));
+        }
+    }
+
+    function onFindableByChanged(event) {
+        if (VISIBILITY_VALUES.indexOf(event) !== -1) {
+            myVisibility = event;
+            visibilityControl.setValue(event);
+            Settings.setValue(SETTING_USERS_VISIBLE_TO, myVisibility);
+        } else {
+            print("Error: Unrecognized onFindableByChanged value: " + event);
+        }
+    }
+
+    function onMousePressEvent(event) {
+        var clickedOverlay,
+            numLinesBefore,
+            overlayX,
+            overlayY,
+            minY,
+            maxY,
+            lineClicked,
+            userClicked,
+            delta;
+
+        if (!isVisible || isWindowDisabled()) {
+            return;
+        }
+
+        clickedOverlay = Overlays.getOverlayAtPoint({
+            x: event.x,
+            y: event.y
+        });
+
+        if (displayControl.handleClick(clickedOverlay)) {
+            if (usersTimer !== null) {
+                Script.clearTimeout(usersTimer);
+                usersTimer = null;
+            }
+            pollUsers();
+            showMe = displayControl.getValue();
+            Settings.setValue(SETTING_USERS_SHOW_ME, showMe);
+            return;
+        }
+
+        if (visibilityControl.handleClick(clickedOverlay)) {
+            myVisibility = visibilityControl.getValue();
+            GlobalServices.findableBy = myVisibility;
+            Settings.setValue(SETTING_USERS_VISIBLE_TO, myVisibility);
+            return;
+        }
+
+        if (clickedOverlay === windowPane) {
+
+            overlayX = event.x - windowPosition.x - WINDOW_MARGIN;
+            overlayY = event.y - windowPosition.y + windowHeight - WINDOW_MARGIN - windowLineHeight;
+
+            numLinesBefore = Math.round(overlayY / windowLineHeight);
+            minY = numLinesBefore * windowLineHeight;
+            maxY = minY + windowTextHeight;
+
+            lineClicked = -1;
+            if (minY <= overlayY && overlayY <= maxY) {
+                lineClicked = numLinesBefore;
+            }
+
+            userClicked = firstUserToDisplay + lineClicked;
+
+            if (0 <= userClicked && userClicked < linesOfUsers.length && 0 <= overlayX &&
+                overlayX <= usersOnline[linesOfUsers[userClicked]].textWidth) {
+                //print("Go to " + usersOnline[linesOfUsers[userClicked]].username);
+                location.goToUser(usersOnline[linesOfUsers[userClicked]].username);
+            }
+
+            return;
+        }
+
+        if (clickedOverlay === minimizeButton) {
+            setMinimized(!isMinimized);
+            calculateWindowHeight();
+            updateOverlayPositions();
+            updateUsersDisplay();
+            return;
+        }
+
+        if (clickedOverlay === scrollbarBar) {
+            scrollbarBarClickedAt = (event.y - scrollbarBarPosition.y) / scrollbarBarHeight;
+            Overlays.editOverlay(scrollbarBar, {
+                backgroundAlpha: SCROLLBAR_BAR_SELECTED_ALPHA
+            });
+            isMovingScrollbar = true;
+            return;
+        }
+
+        if (clickedOverlay === scrollbarBackground) {
+            delta = scrollbarBarHeight / (scrollbarBackgroundHeight - scrollbarBarHeight);
+
+            if (event.y < scrollbarBarPosition.y) {
+                scrollbarValue = Math.max(scrollbarValue - delta, 0.0);
+            } else {
+                scrollbarValue = Math.min(scrollbarValue + delta, 1.0);
+            }
+
+            firstUserToDisplay = Math.floor(scrollbarValue * (linesOfUsers.length - numUsersToDisplay));
+            updateOverlayPositions();
+            updateUsersDisplay();
+            return;
+        }
+
+        if (clickedOverlay === friendsButton) {
+            if (!friendsWindow) {
+                friendsWindow = new OverlayWebWindow({
+                    title: FRIENDS_WINDOW_TITLE,
+                    width: FRIENDS_WINDOW_WIDTH,
+                    height: FRIENDS_WINDOW_HEIGHT,
+                    visible: false
+                });
+            }
             friendsWindow.setURL(FRIENDS_WINDOW_URL);
             friendsWindow.setVisible(true);
             friendsWindow.raise();
+            return;
         }
-        if (event.type === "jump-to") {
-            if (typeof event.data.username !== undefined) {
-                // teleport to selected user from the online users list
-                location.goToUser(event.data.username);
+
+        if (clickedOverlay === windowBorder) {
+            movingClickOffset = {
+                x: event.x - windowPosition.x,
+                y: event.y - windowPosition.y
+            };
+
+            isMovingWindow = true;
+        }
+    }
+
+    function onMouseMoveEvent(event) {
+        var isVisible;
+
+        if (!isLoggedIn || isWindowDisabled()) {
+            return;
+        }
+
+        if (isMovingScrollbar) {
+            if (scrollbarBackgroundPosition.x - WINDOW_MARGIN <= event.x &&
+                event.x <= scrollbarBackgroundPosition.x + SCROLLBAR_BACKGROUND_WIDTH + WINDOW_MARGIN &&
+                scrollbarBackgroundPosition.y - WINDOW_MARGIN <= event.y &&
+                event.y <= scrollbarBackgroundPosition.y + scrollbarBackgroundHeight + WINDOW_MARGIN) {
+                scrollbarValue = (event.y - scrollbarBarClickedAt * scrollbarBarHeight - scrollbarBackgroundPosition.y) /
+                    (scrollbarBackgroundHeight - scrollbarBarHeight - 2);
+                scrollbarValue = Math.min(Math.max(scrollbarValue, 0.0), 1.0);
+                firstUserToDisplay = Math.floor(scrollbarValue * (linesOfUsers.length - numUsersToDisplay));
+                updateOverlayPositions();
+                updateUsersDisplay();
+            } else {
+                Overlays.editOverlay(scrollbarBar, {
+                    backgroundAlpha: SCROLLBAR_BAR_ALPHA
+                });
+                isMovingScrollbar = false;
             }
         }
-        if (event.type === "toggle-visibility") {
-            if (typeof event.data.visibility !== undefined) {
-                // update your visibility (all, friends, or none)
-                myVisibility = event.data.visibility;
-                GlobalServices.findableBy = myVisibility;
-            } 
+
+        if (isMovingWindow) {
+            windowPosition = {
+                x: event.x - movingClickOffset.x,
+                y: event.y - movingClickOffset.y
+            };
+
+            saturateWindowPosition();
+            calculateWindowHeight();
+            updateOverlayPositions();
+            updateUsersDisplay();
+
+        } else {
+
+            isVisible = isBorderVisible;
+            if (isVisible) {
+                isVisible = windowPosition.x - WINDOW_BORDER_LEFT_MARGIN <= event.x &&
+                    event.x <= windowPosition.x - WINDOW_BORDER_LEFT_MARGIN + WINDOW_BORDER_WIDTH &&
+                    windowPosition.y - windowHeight - WINDOW_BORDER_TOP_MARGIN <= event.y &&
+                    event.y <= windowPosition.y + WINDOW_BORDER_BOTTOM_MARGIN;
+            } else {
+                isVisible = windowPosition.x <= event.x && event.x <= windowPosition.x + WINDOW_WIDTH &&
+                    windowPosition.y - windowHeight <= event.y && event.y <= windowPosition.y;
+            }
+            if (isVisible !== isBorderVisible) {
+                isBorderVisible = isVisible;
+                Overlays.editOverlay(windowBorder, {
+                    visible: isBorderVisible
+                });
+            }
         }
     }
 
-    button.clicked.connect(onClicked);
-    tablet.webEventReceived.connect(onWebEventReceived);
+    function onMouseReleaseEvent() {
+        var offset = {};
 
-    function cleanup() {
-        button.clicked.disconnect(onClicked);
-        tablet.removeButton(button);
+        if (isWindowDisabled()) {
+            return;
+        }
+
+        if (isMovingScrollbar) {
+            Overlays.editOverlay(scrollbarBar, {
+                backgroundAlpha: SCROLLBAR_BAR_ALPHA
+            });
+            isMovingScrollbar = false;
+        }
+
+        if (isMovingWindow) {
+            // Save offset of bottom of window to nearest edge of the window.
+            offset.x = (windowPosition.x + WINDOW_WIDTH / 2 < viewport.x / 2) ?
+                windowPosition.x : windowPosition.x - viewport.x;
+            offset.y = (windowPosition.y < viewport.y / 2) ?
+                windowPosition.y : windowPosition.y - viewport.y;
+            Settings.setValue(SETTING_USERS_WINDOW_OFFSET, JSON.stringify(offset));
+            isMovingWindow = false;
+        }
     }
 
-    Script.scriptEnding.connect(cleanup);
+    function onScriptUpdate() {
+        var oldViewport = viewport,
+            oldIsMirrorDisplay = isMirrorDisplay,
+            oldIsFullscreenMirror = isFullscreenMirror,
+            MIRROR_MENU_ITEM = "Mirror",
+            FULLSCREEN_MIRROR_MENU_ITEM = "Fullscreen Mirror";
+
+        if (isWindowDisabled()) {
+            return;
+        }
+
+        viewport = Controller.getViewportDimensions();
+        isMirrorDisplay = Menu.isOptionChecked(MIRROR_MENU_ITEM);
+        isFullscreenMirror = Menu.isOptionChecked(FULLSCREEN_MIRROR_MENU_ITEM);
+
+        if (viewport.y !== oldViewport.y || isMirrorDisplay !== oldIsMirrorDisplay ||
+            isFullscreenMirror !== oldIsFullscreenMirror) {
+            calculateWindowHeight();
+            updateUsersDisplay();
+        }
+
+        if (viewport.y !== oldViewport.y) {
+            if (windowPosition.y > oldViewport.y / 2) {
+                // Maintain position w.r.t. bottom of window.
+                windowPosition.y = viewport.y - (oldViewport.y - windowPosition.y);
+            }
+        }
+
+        if (viewport.x !== oldViewport.x) {
+            if (windowPosition.x + (WINDOW_WIDTH / 2) > oldViewport.x / 2) {
+                // Maintain position w.r.t. right of window.
+                windowPosition.x = viewport.x - (oldViewport.x - windowPosition.x);
+            }
+        }
+
+        updateOverlayPositions();
+    }
+
+    function setUp() {
+        var textSizeOverlay,
+            offsetSetting,
+            offset = {},
+            hmdViewport;
+
+        textSizeOverlay = Overlays.addOverlay("text", {
+            font: WINDOW_FONT,
+            visible: false
+        });
+        windowTextHeight = Math.floor(Overlays.textSize(textSizeOverlay, "1").height);
+        windowLineSpacing = Math.floor(Overlays.textSize(textSizeOverlay, "1\n2").height - 2 * windowTextHeight);
+        windowLineHeight = windowTextHeight + windowLineSpacing;
+        windowMinimumHeight = windowTextHeight + WINDOW_MARGIN + WINDOW_BASE_MARGIN;
+        Overlays.deleteOverlay(textSizeOverlay);
+
+        viewport = Controller.getViewportDimensions();
+
+        offsetSetting = Settings.getValue(SETTING_USERS_WINDOW_OFFSET);
+        if (offsetSetting !== "") {
+            offset = JSON.parse(Settings.getValue(SETTING_USERS_WINDOW_OFFSET));
+        }
+        if (offset.hasOwnProperty("x") && offset.hasOwnProperty("y")) {
+            windowPosition.x = offset.x < 0 ? viewport.x + offset.x : offset.x;
+            windowPosition.y = offset.y <= 0 ? viewport.y + offset.y : offset.y;
+        } else {
+            hmdViewport = Controller.getRecommendedOverlayRect();
+            windowPosition = {
+                x: (viewport.x - hmdViewport.width) / 2,  // HMD viewport is narrower than screen.
+                y: hmdViewport.height  // HMD viewport starts at top of screen but only extends down so far.
+            };
+        }
+
+        saturateWindowPosition();
+        calculateWindowHeight();
+
+        windowBorder = Overlays.addOverlay("rectangle", {
+            x: 0,
+            y: viewport.y,   // Start up off-screen
+            width: WINDOW_BORDER_WIDTH,
+            height: windowBorderHeight,
+            radius: WINDOW_BORDER_RADIUS,
+            color: WINDOW_BORDER_COLOR,
+            alpha: WINDOW_BORDER_ALPHA,
+            visible: false
+        });
+
+        windowPane = Overlays.addOverlay("text", {
+            x: 0,
+            y: viewport.y,
+            width: WINDOW_WIDTH,
+            height: windowHeight,
+            topMargin: WINDOW_MARGIN + windowLineHeight,
+            leftMargin: WINDOW_MARGIN,
+            color: WINDOW_FOREGROUND_COLOR,
+            alpha: WINDOW_FOREGROUND_ALPHA,
+            backgroundColor: WINDOW_BACKGROUND_COLOR,
+            backgroundAlpha: WINDOW_BACKGROUND_ALPHA,
+            text: "",
+            font: WINDOW_FONT,
+            visible: false
+        });
+
+        windowHeading = Overlays.addOverlay("text", {
+            x: 0,
+            y: viewport.y,
+            width: WINDOW_WIDTH - 2 * WINDOW_MARGIN,
+            height: windowTextHeight,
+            topMargin: 0,
+            leftMargin: 0,
+            color: WINDOW_HEADING_COLOR,
+            alpha: WINDOW_HEADING_ALPHA,
+            backgroundAlpha: 0.0,
+            text: "Users online",
+            font: WINDOW_FONT,
+            visible: false
+        });
+
+        minimizeButton = Overlays.addOverlay("image", {
+            x: 0,
+            y: viewport.y,
+            width: MIN_MAX_BUTTON_WIDTH,
+            height: MIN_MAX_BUTTON_HEIGHT,
+            imageURL: MIN_MAX_BUTTON_SVG,
+            subImage: {
+                x: 0,
+                y: 0,
+                width: MIN_MAX_BUTTON_SVG_WIDTH,
+                height: MIN_MAX_BUTTON_SVG_HEIGHT / 2
+            },
+            color: MIN_MAX_BUTTON_COLOR,
+            alpha: MIN_MAX_BUTTON_ALPHA,
+            visible: false
+        });
+
+        scrollbarBackgroundPosition = {
+            x: 0,
+            y: viewport.y
+        };
+        scrollbarBackground = Overlays.addOverlay("text", {
+            x: 0,
+            y: scrollbarBackgroundPosition.y,
+            width: SCROLLBAR_BACKGROUND_WIDTH,
+            height: windowTextHeight,
+            backgroundColor: SCROLLBAR_BACKGROUND_COLOR,
+            backgroundAlpha: SCROLLBAR_BACKGROUND_ALPHA,
+            text: "",
+            visible: false
+        });
+
+        scrollbarBarPosition = {
+            x: 0,
+            y: viewport.y
+        };
+        scrollbarBar = Overlays.addOverlay("text", {
+            x: 0,
+            y: scrollbarBarPosition.y,
+            width: SCROLLBAR_BACKGROUND_WIDTH - 2,
+            height: windowTextHeight,
+            backgroundColor: SCROLLBAR_BAR_COLOR,
+            backgroundAlpha: SCROLLBAR_BAR_ALPHA,
+            text: "",
+            visible: false
+        });
+
+        friendsButton = Overlays.addOverlay("image", {
+            x: 0,
+            y: viewport.y,
+            width: FRIENDS_BUTTON_WIDTH,
+            height: FRIENDS_BUTTON_HEIGHT,
+            imageURL: FRIENDS_BUTTON_SVG,
+            subImage: {
+                x: 0,
+                y: 0,
+                width: FRIENDS_BUTTON_SVG_WIDTH,
+                height: FRIENDS_BUTTON_SVG_HEIGHT
+            },
+            color: FRIENDS_BUTTON_COLOR,
+            alpha: FRIENDS_BUTTON_ALPHA,
+            visible: false
+        });
+
+        showMe = Settings.getValue(SETTING_USERS_SHOW_ME, "");
+        if (DISPLAY_VALUES.indexOf(showMe) === -1) {
+            showMe = DISPLAY_EVERYONE;
+        }
+
+        displayControl = new PopUpMenu({
+            prompt: DISPLAY_PROMPT,
+            value: showMe,
+            values: DISPLAY_VALUES,
+            displayValues: DISPLAY_DISPLAY_VALUES,
+            x: 0,
+            y: viewport.y,
+            width: WINDOW_WIDTH - 1.5 * WINDOW_MARGIN,
+            promptWidth: DISPLAY_PROMPT_WIDTH,
+            lineHeight: windowLineHeight,
+            textHeight: windowTextHeight,
+            font: WINDOW_FONT,
+            promptColor: WINDOW_HEADING_COLOR,
+            promptAlpha: WINDOW_HEADING_ALPHA,
+            promptBackgroundColor: WINDOW_BACKGROUND_COLOR,
+            promptBackgroundAlpha: 0.0,
+            optionColor: WINDOW_FOREGROUND_COLOR,
+            optionAlpha: WINDOW_FOREGROUND_ALPHA,
+            optionBackgroundColor: OPTION_BACKGROUND_COLOR,
+            optionBackgroundAlpha: OPTION_BACKGROUND_ALPHA,
+            popupBackgroundColor: DISPLAY_OPTIONS_BACKGROUND_COLOR,
+            popupBackgroundAlpha: DISPLAY_OPTIONS_BACKGROUND_ALPHA,
+            buttonColor: MIN_MAX_BUTTON_COLOR,
+            buttonAlpha: MIN_MAX_BUTTON_ALPHA,
+            visible: false
+        });
+
+        myVisibility = Settings.getValue(SETTING_USERS_VISIBLE_TO, "");
+        if (VISIBILITY_VALUES.indexOf(myVisibility) === -1) {
+            myVisibility = VISIBILITY_FRIENDS;
+        }
+        GlobalServices.findableBy = myVisibility;
+
+        visibilityControl = new PopUpMenu({
+            prompt: VISIBILITY_PROMPT,
+            value: myVisibility,
+            values: VISIBILITY_VALUES,
+            displayValues: VISIBILITY_DISPLAY_VALUES,
+            x: 0,
+            y: viewport.y,
+            width: WINDOW_WIDTH - 1.5 * WINDOW_MARGIN,
+            promptWidth: VISIBILITY_PROMPT_WIDTH,
+            lineHeight: windowLineHeight,
+            textHeight: windowTextHeight,
+            font: WINDOW_FONT,
+            promptColor: WINDOW_HEADING_COLOR,
+            promptAlpha: WINDOW_HEADING_ALPHA,
+            promptBackgroundColor: WINDOW_BACKGROUND_COLOR,
+            promptBackgroundAlpha: 0.0,
+            optionColor: WINDOW_FOREGROUND_COLOR,
+            optionAlpha: WINDOW_FOREGROUND_ALPHA,
+            optionBackgroundColor: OPTION_BACKGROUND_COLOR,
+            optionBackgroundAlpha: OPTION_BACKGROUND_ALPHA,
+            popupBackgroundColor: DISPLAY_OPTIONS_BACKGROUND_COLOR,
+            popupBackgroundAlpha: DISPLAY_OPTIONS_BACKGROUND_ALPHA,
+            buttonColor: MIN_MAX_BUTTON_COLOR,
+            buttonAlpha: MIN_MAX_BUTTON_ALPHA,
+            visible: false
+        });
+
+        Controller.mousePressEvent.connect(onMousePressEvent);
+        Controller.mouseMoveEvent.connect(onMouseMoveEvent);
+        Controller.mouseReleaseEvent.connect(onMouseReleaseEvent);
+
+        Menu.addMenuItem({
+            menuName: MENU_NAME,
+            menuItemName: MENU_ITEM,
+            afterItem: MENU_ITEM_AFTER,
+            isCheckable: true,
+            isChecked: isVisible
+        });
+        Menu.menuItemEvent.connect(onMenuItemEvent);
+
+        GlobalServices.findableByChanged.connect(onFindableByChanged);
+
+        Script.update.connect(onScriptUpdate);
+
+        pollUsers();
+
+        // Set minimized at end - setup code does not handle `minimized == false` correctly
+        setMinimized(isValueTrue(Settings.getValue(SETTING_USERS_WINDOW_MINIMIZED, true)));
+    }
+
+    function tearDown() {
+        Menu.removeMenuItem(MENU_NAME, MENU_ITEM);
+
+        Script.clearTimeout(usersTimer);
+        Overlays.deleteOverlay(windowBorder);
+        Overlays.deleteOverlay(windowPane);
+        Overlays.deleteOverlay(windowHeading);
+        Overlays.deleteOverlay(minimizeButton);
+        Overlays.deleteOverlay(scrollbarBackground);
+        Overlays.deleteOverlay(scrollbarBar);
+        Overlays.deleteOverlay(friendsButton);
+        displayControl.tearDown();
+        visibilityControl.tearDown();
+    }
+
+    setUp();
+    Script.scriptEnding.connect(tearDown);
+}());
+
+function cleanup () {
+    //remove tablet button
+    button.clicked.disconnect(onClicked);
+    if (tablet) {
+        tablet.removeButton(button);
+    }
+    if (toolBar) {
+        toolBar.removeButton(buttonName);
+    }
+}
+Script.scriptEnding.connect(cleanup);
+
 }()); // END LOCAL_SCOPE

From 4f04865963ec08a0df59fab638bdade8ae46222e Mon Sep 17 00:00:00 2001
From: Faye Li <si.fi.faye.li@gmial.com>
Date: Wed, 1 Feb 2017 15:37:54 -0800
Subject: [PATCH 16/16] load tablet users in default scripts

---
 scripts/defaultScripts.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/defaultScripts.js b/scripts/defaultScripts.js
index bb96fe96cf..36b0ddde85 100644
--- a/scripts/defaultScripts.js
+++ b/scripts/defaultScripts.js
@@ -24,7 +24,7 @@ var DEFAULT_SCRIPTS = [
     "system/goto.js",
     "system/marketplaces/marketplaces.js",
     "system/edit.js",
-    "system/users.js",
+    "system/tablet-users.js",
     "system/selectAudioDevice.js",
     "system/notifications.js",
     "system/controllers/controllerDisplayManager.js",