From 82e0ca2423e6eed65f65542eb5922c4dd69c2d15 Mon Sep 17 00:00:00 2001
From: Faye Li Si Fi <si.fi.faye.li@gmail.com>
Date: Wed, 18 Jan 2017 13:19:19 -0800
Subject: [PATCH 01/33] create users tablet button

---
 scripts/system/users.js | 1229 +--------------------------------------
 1 file changed, 9 insertions(+), 1220 deletions(-)

diff --git a/scripts/system/users.js b/scripts/system/users.js
index 8c52240aa9..a403dd7978 100644
--- a/scripts/system/users.js
+++ b/scripts/system/users.js
@@ -2,9 +2,8 @@
 
 //
 //  users.js
-//  examples
 //
-//  Created by David Rowe on 9 Mar 2015.
+//  Created by Faye Li on 18 Jan 2017.
 //  Copyright 2015 High Fidelity, Inc.
 //
 //  Distributed under the Apache License, Version 2.0.
@@ -12,1226 +11,16 @@
 //
 
 (function() { // BEGIN LOCAL_SCOPE
-
-// 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
+    var tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
+    var button = tablet.addButton({
+        // TODO: work with Alan to make new icon art
+        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 cleanup() {
+        tablet.removeButton(button);
     }
 
-    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);
-}());
-
+    Script.scriptEnding.connect(cleanup);
 }()); // END LOCAL_SCOPE

From 9865f134dbe771ce873f86f4dfb1bedfafb94207 Mon Sep 17 00:00:00 2001
From: Faye Li Si Fi <si.fi.faye.li@gmail.com>
Date: Wed, 18 Jan 2017 16:09:12 -0800
Subject: [PATCH 02/33] go to users.html on tablet button click

---
 scripts/system/users.js | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/scripts/system/users.js b/scripts/system/users.js
index a403dd7978..5603cc591c 100644
--- a/scripts/system/users.js
+++ b/scripts/system/users.js
@@ -4,13 +4,14 @@
 //  users.js
 //
 //  Created by Faye Li on 18 Jan 2017.
-//  Copyright 2015 High Fidelity, Inc.
+//  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 tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
     var button = tablet.addButton({
         // TODO: work with Alan to make new icon art
@@ -18,7 +19,14 @@
         text: "Users"
     });
 
+    function onClicked() {
+        tablet.gotoWebScreen(USERS_URL);
+    }
+
+    button.clicked.connect(onClicked);
+
     function cleanup() {
+        button.clicked.disconnect(onClicked);
         tablet.removeButton(button);
     }
 

From 75b1eba84e076b2a7f7f8c1f55dd5a429965ce70 Mon Sep 17 00:00:00 2001
From: Faye Li Si Fi <si.fi.faye.li@gmail.com>
Date: Wed, 18 Jan 2017 16:10:42 -0800
Subject: [PATCH 03/33] initial commit for users.html

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

diff --git a/scripts/system/html/users.html b/scripts/system/html/users.html
new file mode 100644
index 0000000000..cbe69efd92
--- /dev/null
+++ b/scripts/system/html/users.html
@@ -0,0 +1,16 @@
+<!--
+//  users.html
+//
+//  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
+-->
+<html>
+    <head>
+    </head>
+    <body>
+        <h1> Hello Users </h1>
+    </body>
+</html>
\ No newline at end of file

From 5ad1cc6f4d538dc9a04ea7c8f938c6d45b9f1893 Mon Sep 17 00:00:00 2001
From: Faye Li Si Fi <si.fi.faye.li@gmail.com>
Date: Wed, 18 Jan 2017 18:03:16 -0800
Subject: [PATCH 04/33] end of day commit

---
 scripts/system/html/users.html | 20 ++++++++++++++++++++
 scripts/system/users.js        |  2 +-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/scripts/system/html/users.html b/scripts/system/html/users.html
index cbe69efd92..de6a03b702 100644
--- a/scripts/system/html/users.html
+++ b/scripts/system/html/users.html
@@ -12,5 +12,25 @@
     </head>
     <body>
         <h1> Hello Users </h1>
+        <button type="button" onclick="pollUsers()">Poll Users</button>
+        <div id="dev-div"></div>
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
+        <script>
+            var METAVERSE_API_URL = "https://metaverse.highfidelity.com/api/v1/users?status=online";
+
+            function pollUsers() {
+                $("#dev-div").html("polling users");
+                $.ajax({
+                    url: METAVERSE_API_URL,
+                    success: function(response) {
+                        $("#dev-div").html(response);
+                    }
+                });
+            }
+
+            $(document).ready(function() {
+                $("#dev-div").html("ready");
+            });
+        </script>
     </body>
 </html>
\ No newline at end of file
diff --git a/scripts/system/users.js b/scripts/system/users.js
index 5603cc591c..76745ac86e 100644
--- a/scripts/system/users.js
+++ b/scripts/system/users.js
@@ -11,7 +11,7 @@
 //
 
 (function() { // BEGIN LOCAL_SCOPE
-    var USERS_URL = "https://hifi-content.s3.amazonaws.com/faye/tablet-dev/users.html";
+    var USERS_URL = Script.resolvePath("html/users.html");
     var tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
     var button = tablet.addButton({
         // TODO: work with Alan to make new icon art

From 10f512306ecb2ca9b0d4c987741499f6136009a7 Mon Sep 17 00:00:00 2001
From: Faye Li <si.fi.faye.li@gmail.com>
Date: Thu, 19 Jan 2017 10:58:29 -0800
Subject: [PATCH 05/33] successfully polling all online users

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

diff --git a/scripts/system/html/users.html b/scripts/system/html/users.html
index de6a03b702..75e79c47e8 100644
--- a/scripts/system/html/users.html
+++ b/scripts/system/html/users.html
@@ -23,7 +23,8 @@
                 $.ajax({
                     url: METAVERSE_API_URL,
                     success: function(response) {
-                        $("#dev-div").html(response);
+                        $("#dev-div").html(JSON.stringify(response.data));
+                        console.log(response);
                     }
                 });
             }

From 53404caccf43d4a1c17a65a0eb0957a132186d08 Mon Sep 17 00:00:00 2001
From: Faye Li <si.fi.faye.li@gmail.com>
Date: Thu, 19 Jan 2017 12:15:27 -0800
Subject: [PATCH 06/33] top bar css

---
 scripts/system/html/users.html | 38 +++++++++++++++++++++++++++++++---
 1 file changed, 35 insertions(+), 3 deletions(-)

diff --git a/scripts/system/html/users.html b/scripts/system/html/users.html
index 75e79c47e8..4192f4b33f 100644
--- a/scripts/system/html/users.html
+++ b/scripts/system/html/users.html
@@ -9,11 +9,43 @@
 -->
 <html>
     <head>
+        <title>Users Online</title>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <style>
+            body {
+                margin: 0;
+                width: 100%;
+            }
+
+            .top-bar {
+                width: 100%;
+                height: 90px;
+                background: linear-gradient(#2b2b2b, #1e1e1e);
+            }
+
+            .top-bar div {
+                padding-left: 30px;
+                padding-right: 30px;
+                line-height: 90px;
+                color: white;
+                white-space: nowrap;
+            }
+
+            .main {
+                padding-top: 90px;
+            }
+
+        </style>
     </head>
     <body>
-        <h1> Hello Users </h1>
-        <button type="button" onclick="pollUsers()">Poll Users</button>
-        <div id="dev-div"></div>
+        <div class="top-bar">
+            <div>Users Online</div>
+        </div>
+        <div class="main">
+            <button type="button" onclick="pollUsers()">Poll Users</button>
+            <div id="dev-div"></div>
+        </div>
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
         <script>
             var METAVERSE_API_URL = "https://metaverse.highfidelity.com/api/v1/users?status=online";

From 450b94f641fd491e251c3f670d3804eeb23bffc9 Mon Sep 17 00:00:00 2001
From: Faye Li <si.fi.faye.li@gmail.com>
Date: Thu, 19 Jan 2017 12:55:06 -0800
Subject: [PATCH 07/33] load font

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

diff --git a/scripts/system/html/users.html b/scripts/system/html/users.html
index 4192f4b33f..4c392c1dac 100644
--- a/scripts/system/html/users.html
+++ b/scripts/system/html/users.html
@@ -12,10 +12,12 @@
         <title>Users Online</title>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
         <style>
             body {
                 margin: 0;
                 width: 100%;
+                font-family: 'Raleway', sans-serif;
             }
 
             .top-bar {
@@ -33,7 +35,8 @@
             }
 
             .main {
-                padding-top: 90px;
+                width: 100%;
+                color: white;
             }
 
         </style>

From 193251eb8d29756337a7c65bb1f28bdd327bd894 Mon Sep 17 00:00:00 2001
From: Faye Li <si.fi.faye.li@gmail.com>
Date: Thu, 19 Jan 2017 13:11:35 -0800
Subject: [PATCH 08/33] background

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

diff --git a/scripts/system/html/users.html b/scripts/system/html/users.html
index 4c392c1dac..d1a41e923e 100644
--- a/scripts/system/html/users.html
+++ b/scripts/system/html/users.html
@@ -18,6 +18,8 @@
                 margin: 0;
                 width: 100%;
                 font-family: 'Raleway', sans-serif;
+                color: white;
+                background: linear-gradient(#2b2b2b, #0f212e);
             }
 
             .top-bar {
@@ -35,8 +37,7 @@
             }
 
             .main {
-                width: 100%;
-                color: white;
+                padding: 30px;
             }
 
         </style>

From 23269c2efb9830afb1cafe79741f70d78580a335 Mon Sep 17 00:00:00 2001
From: Faye Li <si.fi.faye.li@gmail.com>
Date: Thu, 19 Jan 2017 13:41:36 -0800
Subject: [PATCH 09/33] move refresh button to top bar

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

diff --git a/scripts/system/html/users.html b/scripts/system/html/users.html
index d1a41e923e..be657f35fe 100644
--- a/scripts/system/html/users.html
+++ b/scripts/system/html/users.html
@@ -28,12 +28,13 @@
                 background: linear-gradient(#2b2b2b, #1e1e1e);
             }
 
-            .top-bar div {
-                padding-left: 30px;
-                padding-right: 30px;
-                line-height: 90px;
-                color: white;
-                white-space: nowrap;
+            .top-bar .container{
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                margin-left: 30px;
+                margin-right: 30px;
+                height: 100%;
             }
 
             .main {
@@ -44,10 +45,12 @@
     </head>
     <body>
         <div class="top-bar">
-            <div>Users Online</div>
+            <div class="container">
+                <div>Users Online</div>
+                <button type="button" onclick="pollUsers()">Refresh</button>
+            </div>
         </div>
         <div class="main">
-            <button type="button" onclick="pollUsers()">Poll Users</button>
             <div id="dev-div"></div>
         </div>
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

From bbed26c8fa79e8b1a11ac7550a50916b7e6c60d5 Mon Sep 17 00:00:00 2001
From: Faye Li <si.fi.faye.li@gmail.com>
Date: Thu, 19 Jan 2017 14:34:28 -0800
Subject: [PATCH 10/33] display all online users

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

diff --git a/scripts/system/html/users.html b/scripts/system/html/users.html
index be657f35fe..b6cf8fb553 100644
--- a/scripts/system/html/users.html
+++ b/scripts/system/html/users.html
@@ -12,7 +12,7 @@
         <title>Users Online</title>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
-        <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,600,700"" rel="stylesheet">
         <style>
             body {
                 margin: 0;
@@ -26,6 +26,7 @@
                 width: 100%;
                 height: 90px;
                 background: linear-gradient(#2b2b2b, #1e1e1e);
+                font-weight: bold;
             }
 
             .top-bar .container{
@@ -41,6 +42,11 @@
                 padding: 30px;
             }
 
+            #users-list div {
+                padding-top: 4px;
+                padding-bottom: 4px;
+            }
+
         </style>
     </head>
     <body>
@@ -51,19 +57,28 @@
             </div>
         </div>
         <div class="main">
-            <div id="dev-div"></div>
+            <div id="users-list"></div>
         </div>
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
         <script>
             var METAVERSE_API_URL = "https://metaverse.highfidelity.com/api/v1/users?status=online";
 
+            function displayUsers(data) {
+                $("#users-list").empty();
+                for (var i = 0; i < data.users.length; i++) {
+                    console.log(data.users[i].username + " @ " + data.users[i].location.root.name);
+                    $("#users-list").append("<div>" + data.users[i].username + " @ " + data.users[i].location.root.name + "</div>");
+                }
+            }
+
             function pollUsers() {
+                // TODO: better transition visual such as spin wheel or loading bar
                 $("#dev-div").html("polling users");
                 $.ajax({
                     url: METAVERSE_API_URL,
                     success: function(response) {
-                        $("#dev-div").html(JSON.stringify(response.data));
                         console.log(response);
+                        displayUsers(response.data);
                     }
                 });
             }

From 5bc0030c8f6663670d7e801c69e25f6e6fc94da2 Mon Sep 17 00:00:00 2001
From: Faye Li <si.fi.faye.li@gmail.com>
Date: Thu, 19 Jan 2017 15:24:56 -0800
Subject: [PATCH 11/33] hook up event bridge

---
 scripts/system/html/users.html | 10 +++++++++-
 scripts/system/users.js        |  5 +++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/scripts/system/html/users.html b/scripts/system/html/users.html
index b6cf8fb553..703abb9638 100644
--- a/scripts/system/html/users.html
+++ b/scripts/system/html/users.html
@@ -83,9 +83,17 @@
                 });
             }
 
+            function onScriptEventReceived(event) {
+                // TODO: event handling
+            }
+
             $(document).ready(function() {
                 $("#dev-div").html("ready");
+                // Send a ready event to hifi
+                EventBridge.emitWebEvent("ready");
+                // Listen for events from hifi
+                EventBridge.scriptEventReceived.connect(onScriptEventReceived);
             });
-        </script>
+        </script
     </body>
 </html>
\ No newline at end of file
diff --git a/scripts/system/users.js b/scripts/system/users.js
index 76745ac86e..c55bccf961 100644
--- a/scripts/system/users.js
+++ b/scripts/system/users.js
@@ -23,7 +23,12 @@
         tablet.gotoWebScreen(USERS_URL);
     }
 
+    function onWebEventReceived(event) {
+        print(event);
+    }
+
     button.clicked.connect(onClicked);
+    tablet.webEventReceived.connect(onWebEventReceived);
 
     function cleanup() {
         button.clicked.disconnect(onClicked);

From 763028dad4a482e0da294ad74f995ae486c39c81 Mon Sep 17 00:00:00 2001
From: Faye Li <si.fi.faye.li@gmail.com>
Date: Thu, 19 Jan 2017 15:46:02 -0800
Subject: [PATCH 12/33] refresh icon

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

diff --git a/scripts/system/html/users.html b/scripts/system/html/users.html
index 703abb9638..79590f6443 100644
--- a/scripts/system/html/users.html
+++ b/scripts/system/html/users.html
@@ -29,7 +29,7 @@
                 font-weight: bold;
             }
 
-            .top-bar .container{
+            .top-bar .container {
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
@@ -38,6 +38,11 @@
                 height: 100%;
             }
 
+            #refresh-button {
+                width: 24px;
+                height: 24px;
+            }
+
             .main {
                 padding: 30px;
             }
@@ -53,7 +58,7 @@
         <div class="top-bar">
             <div class="container">
                 <div>Users Online</div>
-                <button type="button" onclick="pollUsers()">Refresh</button>
+                <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">
@@ -90,9 +95,9 @@
             $(document).ready(function() {
                 $("#dev-div").html("ready");
                 // Send a ready event to hifi
-                EventBridge.emitWebEvent("ready");
+                // EventBridge.emitWebEvent("ready");
                 // Listen for events from hifi
-                EventBridge.scriptEventReceived.connect(onScriptEventReceived);
+                // EventBridge.scriptEventReceived.connect(onScriptEventReceived);
             });
         </script
     </body>

From afc85a3afe7b79e5030dc0a550472722a2ea43ab Mon Sep 17 00:00:00 2001
From: Faye Li Si Fi <si.fi.faye.li@gmail.com>
Date: Fri, 20 Jan 2017 13:53:09 -0800
Subject: [PATCH 13/33] Don't display users who aren't in a domain

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

diff --git a/scripts/system/html/users.html b/scripts/system/html/users.html
index 79590f6443..1f60675b00 100644
--- a/scripts/system/html/users.html
+++ b/scripts/system/html/users.html
@@ -71,8 +71,13 @@
             function displayUsers(data) {
                 $("#users-list").empty();
                 for (var i = 0; i < data.users.length; i++) {
-                    console.log(data.users[i].username + " @ " + data.users[i].location.root.name);
-                    $("#users-list").append("<div>" + data.users[i].username + " @ " + data.users[i].location.root.name + "</div>");
+                    // Don't display users who aren't in a domain
+                    if (typeof data.users[i].location.root.name === "undefined") {
+                        console.log(data.users[i].username + "is online but not in a domain");
+                    } else {
+                        console.log(data.users[i].username + " @ " + data.users[i].location.root.name);
+                        $("#users-list").append("<div>" + data.users[i].username + " @ " + data.users[i].location.root.name + "</div>");
+                    }
                 }
             }
 

From f8162970ec7223ed13790aa4fc07dacc6d366f03 Mon Sep 17 00:00:00 2001
From: Faye Li Si Fi <si.fi.faye.li@gmail.com>
Date: Mon, 23 Jan 2017 15:24:33 -0800
Subject: [PATCH 14/33] filter out yourself from user list

---
 scripts/system/html/users.html | 35 +++++++++++++++++++++++++---------
 scripts/system/users.js        | 17 +++++++++++++++--
 2 files changed, 41 insertions(+), 11 deletions(-)

diff --git a/scripts/system/html/users.html b/scripts/system/html/users.html
index 1f60675b00..569d352ba4 100644
--- a/scripts/system/html/users.html
+++ b/scripts/system/html/users.html
@@ -67,6 +67,7 @@
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
         <script>
             var METAVERSE_API_URL = "https://metaverse.highfidelity.com/api/v1/users?status=online";
+            var myUsername = null;
 
             function displayUsers(data) {
                 $("#users-list").empty();
@@ -74,36 +75,52 @@
                     // Don't display users who aren't in a domain
                     if (typeof data.users[i].location.root.name === "undefined") {
                         console.log(data.users[i].username + "is online but not in a domain");
+                        $("#dev-div").append("<p>" + data.users[i].username + "is online but not in a domain</p>");
                     } else {
-                        console.log(data.users[i].username + " @ " + data.users[i].location.root.name);
-                        $("#users-list").append("<div>" + data.users[i].username + " @ " + data.users[i].location.root.name + "</div>");
+                        $("#dev-div").append("<div>" + data.users[i].username + " @ " + data.users[i].location.root.name + "</div>");
+                        // Don't display yourself
+                        if (data.users[i].username !== myUsername) {
+                            console.log(data.users[i].username + " @ " + data.users[i].location.root.name);
+                            $("#users-list").append("<div>" + data.users[i].username + " @ " + data.users[i].location.root.name + "</div>");
+                        }
                     }
                 }
             }
 
             function pollUsers() {
                 // TODO: better transition visual such as spin wheel or loading bar
-                $("#dev-div").html("polling users");
+                $("#dev-div").append("<p>polling users..</p>");
                 $.ajax({
                     url: METAVERSE_API_URL,
                     success: function(response) {
                         console.log(response);
+                        $("#dev-div").append("<p>polling sucess</p>");
                         displayUsers(response.data);
                     }
                 });
             }
 
             function onScriptEventReceived(event) {
-                // TODO: event handling
+                $("#dev-div").append("<p>Received a script event, its type is " + typeof event + "</p>");
+                if (typeof event === "string") {
+                    // Parse the string into an object
+                    event = JSON.parse(event);
+                }
+                if (event.type === "sendUsername") {
+                    myUsername = event.data.username;
+                    $("#dev-div").append("<p>myUsername is " + myUsername + "</p>");
+                    consoloe.log("myUsername is " + myUsername);
+                }
             }
 
             $(document).ready(function() {
-                $("#dev-div").html("ready");
-                // Send a ready event to hifi
-                // EventBridge.emitWebEvent("ready");
+                $("#dev-div").append("<p>ready</p>");
                 // Listen for events from hifi
-                // EventBridge.scriptEventReceived.connect(onScriptEventReceived);
+                EventBridge.scriptEventReceived.connect(onScriptEventReceived);
+                // Send a ready event to hifi
+                var eventObject = {"type": "ready"};
+                EventBridge.emitWebEvent(JSON.stringify(eventObject));
             });
-        </script
+        </script>
     </body>
 </html>
\ No newline at end of file
diff --git a/scripts/system/users.js b/scripts/system/users.js
index c55bccf961..0c10b1384d 100644
--- a/scripts/system/users.js
+++ b/scripts/system/users.js
@@ -11,7 +11,7 @@
 //
 
 (function() { // BEGIN LOCAL_SCOPE
-    var USERS_URL = Script.resolvePath("html/users.html");
+    var USERS_URL = "https://hifi-content.s3.amazonaws.com/faye/tablet-dev/users.html";
     var tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
     var button = tablet.addButton({
         // TODO: work with Alan to make new icon art
@@ -24,7 +24,20 @@
     }
 
     function onWebEventReceived(event) {
-        print(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": "sendUsername",
+                "data": {"username": myUsername}
+            };
+            print("sending username: " + myUsername);
+            tablet.emitScriptEvent(JSON.stringify(object));
+        } 
     }
 
     button.clicked.connect(onClicked);

From c7a0e609fc9d10aac529621211cff16a5559041c Mon Sep 17 00:00:00 2001
From: Faye Li <si.fi.faye.li@gmial.com>
Date: Wed, 25 Jan 2017 11:41:07 -0800
Subject: [PATCH 15/33] created a friends button for metaverse friends page

---
 scripts/defaultScripts.js |  1 +
 scripts/system/friends.js | 33 +++++++++++++++++++++++++++++++++
 2 files changed, 34 insertions(+)
 create mode 100644 scripts/system/friends.js

diff --git a/scripts/defaultScripts.js b/scripts/defaultScripts.js
index bd3131f4ff..2b52dae9b2 100644
--- a/scripts/defaultScripts.js
+++ b/scripts/defaultScripts.js
@@ -15,6 +15,7 @@ var DEFAULT_SCRIPTS = [
     "system/progress.js",
     "system/away.js",
     "system/users.js",
+    "system/friends.js",
     "system/mute.js",
     "system/goto.js",
     "system/hmd.js",
diff --git a/scripts/system/friends.js b/scripts/system/friends.js
new file mode 100644
index 0000000000..6afef1579f
--- /dev/null
+++ b/scripts/system/friends.js
@@ -0,0 +1,33 @@
+"use strict";
+
+//
+//  friends.js
+//
+//  Created by Faye Li on 25 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 FRIENDS_URL = "https://metaverse.highfidelity.com/user/friends";
+    var tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
+    var button = tablet.addButton({
+        icon: "icons/tablet-icons/people-i.svg",
+        text: "Friends"
+    });
+
+    function onClicked() {
+        tablet.gotoWebScreen(FRIENDS_URL);
+    }
+
+    button.clicked.connect(onClicked);
+
+    function cleanup() {
+        button.clicked.disconnect(onClicked);
+        tablet.removeButton(button);
+    }
+
+    Script.scriptEnding.connect(cleanup);
+}()); // END LOCAL_SCOPE

From f02b2ef40ab03142cab93a42f18c1979580c6ea2 Mon Sep 17 00:00:00 2001
From: Faye Li <si.fi.faye.li@gmial.com>
Date: Wed, 25 Jan 2017 11:59:31 -0800
Subject: [PATCH 16/33] auto poll users when page loads

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

diff --git a/scripts/system/html/users.html b/scripts/system/html/users.html
index 569d352ba4..20c020dbb8 100644
--- a/scripts/system/html/users.html
+++ b/scripts/system/html/users.html
@@ -115,6 +115,7 @@
 
             $(document).ready(function() {
                 $("#dev-div").append("<p>ready</p>");
+                pollUsers();
                 // Listen for events from hifi
                 EventBridge.scriptEventReceived.connect(onScriptEventReceived);
                 // Send a ready event to hifi

From ce0ee610eaf7855bb226411e0b91bb09e750eaaf Mon Sep 17 00:00:00 2001
From: Faye Li <si.fi.faye.li@gmial.com>
Date: Wed, 25 Jan 2017 14:32:36 -0800
Subject: [PATCH 17/33] a test on polling friends

---
 scripts/system/html/users-friends.html | 126 +++++++++++++++++++++++++
 1 file changed, 126 insertions(+)
 create mode 100644 scripts/system/html/users-friends.html

diff --git a/scripts/system/html/users-friends.html b/scripts/system/html/users-friends.html
new file mode 100644
index 0000000000..8890b2a109
--- /dev/null
+++ b/scripts/system/html/users-friends.html
@@ -0,0 +1,126 @@
+<!--
+//  users.html
+//
+//  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
+-->
+<html>
+    <head>
+        <title>Users Online</title>
+        <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">
+        <style>
+            body {
+                margin: 0;
+                width: 100%;
+                font-family: 'Raleway', sans-serif;
+                color: white;
+                background: linear-gradient(#2b2b2b, #0f212e);
+            }
+
+            .top-bar {
+                width: 100%;
+                height: 90px;
+                background: linear-gradient(#2b2b2b, #1e1e1e);
+                font-weight: bold;
+            }
+
+            .top-bar .container {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                margin-left: 30px;
+                margin-right: 30px;
+                height: 100%;
+            }
+
+            #refresh-button {
+                width: 24px;
+                height: 24px;
+            }
+
+            .main {
+                padding: 30px;
+            }
+
+            #users-list div {
+                padding-top: 4px;
+                padding-bottom: 4px;
+            }
+
+        </style>
+    </head>
+    <body>
+        <div class="top-bar">
+            <div class="container">
+                <div>Users Online (Friends)</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">
+            <div id="users-list"></div>
+        </div>
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
+        <script>
+            var METAVERSE_API_URL = "https://metaverse.highfidelity.com/api/v1/users?status=online&filter=friends";
+            var myUsername = null;
+
+            function displayUsers(data) {
+                $("#users-list").empty();
+                for (var i = 0; i < data.users.length; i++) {
+                    // Don't display users who aren't in a domain
+                    if (typeof data.users[i].location.root.name === "undefined") {
+                        console.log(data.users[i].username + "is online but not in a domain");
+                        $("#dev-div").append("<p>" + data.users[i].username + "is online but not in a domain</p>");
+                    } else {
+                        $("#dev-div").append("<div>" + data.users[i].username + " @ " + data.users[i].location.root.name + "</div>");
+                        // Don't display yourself
+                        if (data.users[i].username !== myUsername) {
+                            console.log(data.users[i].username + " @ " + data.users[i].location.root.name);
+                            $("#users-list").append("<div>" + data.users[i].username + " @ " + data.users[i].location.root.name + "</div>");
+                        }
+                    }
+                }
+            }
+
+            function pollUsers() {
+                // TODO: better transition visual such as spin wheel or loading bar
+                $("#dev-div").append("<p>polling users..</p>");
+                $.ajax({
+                    url: METAVERSE_API_URL,
+                    success: function(response) {
+                        console.log(response);
+                        $("#dev-div").append("<p>polling sucess</p>");
+                        displayUsers(response.data);
+                    }
+                });
+            }
+
+            function onScriptEventReceived(event) {
+                $("#dev-div").append("<p>Received a script event, its type is " + typeof event + "</p>");
+                if (typeof event === "string") {
+                    // Parse the string into an object
+                    event = JSON.parse(event);
+                }
+                if (event.type === "sendUsername") {
+                    myUsername = event.data.username;
+                    $("#dev-div").append("<p>myUsername is " + myUsername + "</p>");
+                    consoloe.log("myUsername is " + myUsername);
+                }
+            }
+
+            $(document).ready(function() {
+                $("#dev-div").append("<p>ready</p>");
+                // Listen for events from hifi
+                EventBridge.scriptEventReceived.connect(onScriptEventReceived);
+                // Send a ready event to hifi
+                var eventObject = {"type": "ready"};
+                EventBridge.emitWebEvent(JSON.stringify(eventObject));
+            });
+        </script>
+    </body>
+</html>
\ No newline at end of file

From 5ad522668a9e36204efb4bc29dddbe3f70178ca7 Mon Sep 17 00:00:00 2001
From: Faye Li <si.fi.faye.li@gmial.com>
Date: Wed, 25 Jan 2017 16:29:25 -0800
Subject: [PATCH 18/33] tabs header for everyone and friends

---
 scripts/system/html/users.html | 33 ++++++++++++++++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

diff --git a/scripts/system/html/users.html b/scripts/system/html/users.html
index 20c020dbb8..86f8494512 100644
--- a/scripts/system/html/users.html
+++ b/scripts/system/html/users.html
@@ -47,6 +47,21 @@
                 padding: 30px;
             }
 
+            .tabs {
+                list-style: none;
+                padding: 0;
+                margin: 0;
+            }
+
+            .tabs li {
+                display: inline-block;
+                padding: 10px 15px;
+            }
+
+            .tabs li.current {
+                background: rgba(255,255,255,0.15);
+            }
+
             #users-list div {
                 padding-top: 4px;
                 padding-bottom: 4px;
@@ -62,7 +77,14 @@
             </div>
         </div>
         <div class="main">
-            <div id="users-list"></div>
+            <ul class="tabs">
+                <li class="current">Everyone (10)</li>
+                <li>Friends (2)</li>
+            </ul>
+            <div id="tab-1">
+                <div id="users-list"></div>
+            </div>
+            <div id="tab-2"></div>
         </div>
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
         <script>
@@ -115,9 +137,18 @@
 
             $(document).ready(function() {
                 $("#dev-div").append("<p>ready</p>");
+                // Auto-load user lists when page loads
                 pollUsers();
+                
+                // Click listener for tabs
+                $(".tabs li").click(function() {
+                    $(".tabs li").removeClass("current");
+                    $(this).addClass("current");
+                });
+
                 // Listen for events from hifi
                 EventBridge.scriptEventReceived.connect(onScriptEventReceived);
+                
                 // Send a ready event to hifi
                 var eventObject = {"type": "ready"};
                 EventBridge.emitWebEvent(JSON.stringify(eventObject));

From b5b781f4a55fe590bf20167e599cd53ffb1ac0e4 Mon Sep 17 00:00:00 2001
From: Faye Li <si.fi.faye.li@gmial.com>
Date: Wed, 25 Jan 2017 16:59:16 -0800
Subject: [PATCH 19/33] tab content switching

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

diff --git a/scripts/system/html/users.html b/scripts/system/html/users.html
index 86f8494512..bb98be3d45 100644
--- a/scripts/system/html/users.html
+++ b/scripts/system/html/users.html
@@ -62,9 +62,23 @@
                 background: rgba(255,255,255,0.15);
             }
 
-            #users-list div {
-                padding-top: 4px;
-                padding-bottom: 4px;
+            .tab-content {
+                display: none;
+            }
+
+            .tab-content.current {
+                display: inherit;
+                background: rgba(255,255,255,0.15);
+            }
+
+            #users-list {
+                list-style: none;
+                padding: 15px 0px 15px 15px;
+                margin: 0;
+            }
+
+            #users-list li {
+                padding: 2px 0px;
             }
 
         </style>
@@ -78,13 +92,13 @@
         </div>
         <div class="main">
             <ul class="tabs">
-                <li class="current">Everyone (10)</li>
-                <li>Friends (2)</li>
+                <li tab-id="tab-1" class="current">Everyone (10)</li>
+                <li tab-id="tab-2">Friends (2)</li>
             </ul>
-            <div id="tab-1">
-                <div id="users-list"></div>
+            <div id="tab-1" class="tab-content current">
+                <ul id="users-list"></ul>
             </div>
-            <div id="tab-2"></div>
+            <div id="tab-2" class="tab-content"></div>
         </div>
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
         <script>
@@ -99,11 +113,11 @@
                         console.log(data.users[i].username + "is online but not in a domain");
                         $("#dev-div").append("<p>" + data.users[i].username + "is online but not in a domain</p>");
                     } else {
-                        $("#dev-div").append("<div>" + data.users[i].username + " @ " + data.users[i].location.root.name + "</div>");
+                        $("#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) {
                             console.log(data.users[i].username + " @ " + data.users[i].location.root.name);
-                            $("#users-list").append("<div>" + data.users[i].username + " @ " + data.users[i].location.root.name + "</div>");
+                            $("#users-list").append("<li>" + data.users[i].username + " @ " + data.users[i].location.root.name + "</li>");
                         }
                     }
                 }
@@ -142,6 +156,9 @@
                 
                 // Click listener for tabs
                 $(".tabs li").click(function() {
+                    var tabID = $(this).attr("tab-id");
+                    $(".tab-content").removeClass("current");
+                    $("#" + tabID).addClass("current");
                     $(".tabs li").removeClass("current");
                     $(this).addClass("current");
                 });

From 0a3a0e817e1356aa55d848d8c6f904cec92a3e74 Mon Sep 17 00:00:00 2001
From: Faye Li <si.fi.faye.li@gmial.com>
Date: Wed, 25 Jan 2017 17:36:50 -0800
Subject: [PATCH 20/33] polling users and displaying user count

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

diff --git a/scripts/system/html/users.html b/scripts/system/html/users.html
index bb98be3d45..75618ccc67 100644
--- a/scripts/system/html/users.html
+++ b/scripts/system/html/users.html
@@ -103,6 +103,7 @@
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
         <script>
             var METAVERSE_API_URL = "https://metaverse.highfidelity.com/api/v1/users?status=online";
+            var FRIENDS_FILTER = "&filter=friends";
             var myUsername = null;
 
             function displayUsers(data) {
@@ -123,15 +124,31 @@
                 }
             }
 
+            function processData(data, type) {
+                var num = data.users.length;
+                if (type === "everyone") {
+                    $(".tabs li:nth-child(1)").text("Everyone (" + num + ")");
+                } else if (type === "friends") {
+                    $(".tabs li:nth-child(2)").text("Friends (" + num + ")");
+                }
+            }
+
             function pollUsers() {
-                // TODO: better transition visual such as spin wheel or loading bar
                 $("#dev-div").append("<p>polling users..</p>");
                 $.ajax({
                     url: METAVERSE_API_URL,
                     success: function(response) {
                         console.log(response);
-                        $("#dev-div").append("<p>polling sucess</p>");
-                        displayUsers(response.data);
+                        $("#dev-div").append("<p>polling everyone sucess</p>");
+                        processData(response.data, "everyone");
+                    }
+                });
+                $.ajax({
+                    url: METAVERSE_API_URL + FRIENDS_FILTER,
+                    success: function(response) {
+                        console.log(response);
+                        $("#dev-div").append("<p>polling friends sucess</p>");
+                        processData(response.data, "friends");
                     }
                 });
             }

From 6a4a9bcb32d099a3eeebf0c8417d2a18bea36ba9 Mon Sep 17 00:00:00 2001
From: Faye Li <si.fi.faye.li@gmial.com>
Date: Wed, 25 Jan 2017 17:53:32 -0800
Subject: [PATCH 21/33] end of day commit

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

diff --git a/scripts/system/html/users.html b/scripts/system/html/users.html
index 75618ccc67..ad3d8e69ca 100644
--- a/scripts/system/html/users.html
+++ b/scripts/system/html/users.html
@@ -92,8 +92,8 @@
         </div>
         <div class="main">
             <ul class="tabs">
-                <li tab-id="tab-1" class="current">Everyone (10)</li>
-                <li tab-id="tab-2">Friends (2)</li>
+                <li tab-id="tab-1" class="current">Everyone (0)</li>
+                <li tab-id="tab-2">Friends (0)</li>
             </ul>
             <div id="tab-1" class="tab-content current">
                 <ul id="users-list"></ul>
@@ -141,6 +141,7 @@
                         console.log(response);
                         $("#dev-div").append("<p>polling everyone sucess</p>");
                         processData(response.data, "everyone");
+                        displayUsers(response.data);
                     }
                 });
                 $.ajax({

From bfbee20f43cdaa322f421a1e8477404ef5114a4e Mon Sep 17 00:00:00 2001
From: Faye Li <si.fi.faye.li@gmial.com>
Date: Fri, 27 Jan 2017 10:19:20 -0800
Subject: [PATCH 22/33] display friends

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

diff --git a/scripts/system/html/users.html b/scripts/system/html/users.html
index ad3d8e69ca..5986f9ce16 100644
--- a/scripts/system/html/users.html
+++ b/scripts/system/html/users.html
@@ -71,13 +71,13 @@
                 background: rgba(255,255,255,0.15);
             }
 
-            #users-list {
+            .tab-content ul {
                 list-style: none;
                 padding: 15px 0px 15px 15px;
                 margin: 0;
             }
 
-            #users-list li {
+            .tab-content ul li {
                 padding: 2px 0px;
             }
 
@@ -96,9 +96,11 @@
                 <li tab-id="tab-2">Friends (0)</li>
             </ul>
             <div id="tab-1" class="tab-content current">
-                <ul id="users-list"></ul>
+                <ul></ul>
+            </div>
+            <div id="tab-2" class="tab-content">
+                <ul></ul>
             </div>
-            <div id="tab-2" class="tab-content"></div>
         </div>
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
         <script>
@@ -106,8 +108,8 @@
             var FRIENDS_FILTER = "&filter=friends";
             var myUsername = null;
 
-            function displayUsers(data) {
-                $("#users-list").empty();
+            function displayUsers(data, element) {
+                element.empty();
                 for (var i = 0; i < data.users.length; i++) {
                     // Don't display users who aren't in a domain
                     if (typeof data.users[i].location.root.name === "undefined") {
@@ -118,7 +120,7 @@
                         // Don't display yourself
                         if (data.users[i].username !== myUsername) {
                             console.log(data.users[i].username + " @ " + data.users[i].location.root.name);
-                            $("#users-list").append("<li>" + data.users[i].username + " @ " + data.users[i].location.root.name + "</li>");
+                            element.append("<li>" + data.users[i].username + " @ " + data.users[i].location.root.name + "</li>");
                         }
                     }
                 }
@@ -128,8 +130,10 @@
                 var num = data.users.length;
                 if (type === "everyone") {
                     $(".tabs li:nth-child(1)").text("Everyone (" + num + ")");
+                    displayUsers(data, $("#tab-1 ul"));
                 } else if (type === "friends") {
                     $(".tabs li:nth-child(2)").text("Friends (" + num + ")");
+                    displayUsers(data, $("#tab-2 ul"));
                 }
             }
 
@@ -141,7 +145,6 @@
                         console.log(response);
                         $("#dev-div").append("<p>polling everyone sucess</p>");
                         processData(response.data, "everyone");
-                        displayUsers(response.data);
                     }
                 });
                 $.ajax({

From bf51ba7195312aab9bdbb60bfc5bf70167425814 Mon Sep 17 00:00:00 2001
From: Faye Li <si.fi.faye.li@gmial.com>
Date: Fri, 27 Jan 2017 11:34:38 -0800
Subject: [PATCH 23/33] button brings up add/remove friends page

---
 scripts/system/html/users.html |  8 ++++++++
 scripts/system/users.js        | 19 +++++++++++++++++--
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/scripts/system/html/users.html b/scripts/system/html/users.html
index 5986f9ce16..947642331c 100644
--- a/scripts/system/html/users.html
+++ b/scripts/system/html/users.html
@@ -100,6 +100,7 @@
             </div>
             <div id="tab-2" class="tab-content">
                 <ul></ul>
+                <button id="friends-button">Add/Remove Friends</button>
             </div>
         </div>
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
@@ -190,6 +191,13 @@
                 // Send a ready event to hifi
                 var eventObject = {"type": "ready"};
                 EventBridge.emitWebEvent(JSON.stringify(eventObject));
+
+                // Click listener mangage friends button
+                $("#friends-button").click(function() {
+                    // Send a manage friends event to hifi
+                    eventObject = {"type": "manage-friends"};
+                    EventBridge.emitWebEvent(JSON.stringify(eventObject));
+                });
             });
         </script>
     </body>
diff --git a/scripts/system/users.js b/scripts/system/users.js
index 0c10b1384d..7930892395 100644
--- a/scripts/system/users.js
+++ b/scripts/system/users.js
@@ -12,9 +12,12 @@
 
 (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";
     var tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
     var button = tablet.addButton({
-        // TODO: work with Alan to make new icon art
         icon: "icons/tablet-icons/people-i.svg",
         text: "Users"
     });
@@ -37,7 +40,19 @@
             };
             print("sending username: " + myUsername);
             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();
+        }
     }
 
     button.clicked.connect(onClicked);

From 8091b0ced4bfce8d5436dd93653eaf7b074f4bed Mon Sep 17 00:00:00 2001
From: Faye Li <si.fi.faye.li@gmial.com>
Date: Fri, 27 Jan 2017 13:33:07 -0800
Subject: [PATCH 24/33] button style

---
 scripts/system/html/users.html | 39 +++++++++++++++++++++++++++++++++-
 1 file changed, 38 insertions(+), 1 deletion(-)

diff --git a/scripts/system/html/users.html b/scripts/system/html/users.html
index 947642331c..23de9cf0b0 100644
--- a/scripts/system/html/users.html
+++ b/scripts/system/html/users.html
@@ -81,6 +81,43 @@
                 padding: 2px 0px;
             }
 
+            input[type=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: 6px;
+                border-radius: 5px;
+                border: none;
+                color: #fff;
+                background-color: #000;
+                background: linear-gradient(#343434 20%, #000 100%);
+                cursor: pointer;
+            }
+
+            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);
+            }
+
+            #friends-button {
+                margin: 0px 0px 15px 10px;
+            }
+
         </style>
     </head>
     <body>
@@ -100,7 +137,7 @@
             </div>
             <div id="tab-2" class="tab-content">
                 <ul></ul>
-                <button id="friends-button">Add/Remove Friends</button>
+                <input type="button" class="blue" id="friends-button" value="Add/Remove Friends">
             </div>
         </div>
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

From ea366dd227748aefd1e1d99edaa795c199b659e0 Mon Sep 17 00:00:00 2001
From: Faye Li <si.fi.faye.li@gmail.com>
Date: Fri, 27 Jan 2017 15:38:49 -0800
Subject: [PATCH 25/33] removed unused code

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

diff --git a/scripts/defaultScripts.js b/scripts/defaultScripts.js
index 2b52dae9b2..bd3131f4ff 100644
--- a/scripts/defaultScripts.js
+++ b/scripts/defaultScripts.js
@@ -15,7 +15,6 @@ var DEFAULT_SCRIPTS = [
     "system/progress.js",
     "system/away.js",
     "system/users.js",
-    "system/friends.js",
     "system/mute.js",
     "system/goto.js",
     "system/hmd.js",

From ff1c4995af7ea4b7c68cae55375a2a4a9830589f Mon Sep 17 00:00:00 2001
From: Faye Li <si.fi.faye.li@gmial.com>
Date: Fri, 27 Jan 2017 15:44:01 -0800
Subject: [PATCH 26/33] removed unused code

---
 scripts/system/friends.js              |  33 -------
 scripts/system/html/users-friends.html | 126 -------------------------
 2 files changed, 159 deletions(-)
 delete mode 100644 scripts/system/friends.js
 delete mode 100644 scripts/system/html/users-friends.html

diff --git a/scripts/system/friends.js b/scripts/system/friends.js
deleted file mode 100644
index 6afef1579f..0000000000
--- a/scripts/system/friends.js
+++ /dev/null
@@ -1,33 +0,0 @@
-"use strict";
-
-//
-//  friends.js
-//
-//  Created by Faye Li on 25 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 FRIENDS_URL = "https://metaverse.highfidelity.com/user/friends";
-    var tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
-    var button = tablet.addButton({
-        icon: "icons/tablet-icons/people-i.svg",
-        text: "Friends"
-    });
-
-    function onClicked() {
-        tablet.gotoWebScreen(FRIENDS_URL);
-    }
-
-    button.clicked.connect(onClicked);
-
-    function cleanup() {
-        button.clicked.disconnect(onClicked);
-        tablet.removeButton(button);
-    }
-
-    Script.scriptEnding.connect(cleanup);
-}()); // END LOCAL_SCOPE
diff --git a/scripts/system/html/users-friends.html b/scripts/system/html/users-friends.html
deleted file mode 100644
index 8890b2a109..0000000000
--- a/scripts/system/html/users-friends.html
+++ /dev/null
@@ -1,126 +0,0 @@
-<!--
-//  users.html
-//
-//  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
--->
-<html>
-    <head>
-        <title>Users Online</title>
-        <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">
-        <style>
-            body {
-                margin: 0;
-                width: 100%;
-                font-family: 'Raleway', sans-serif;
-                color: white;
-                background: linear-gradient(#2b2b2b, #0f212e);
-            }
-
-            .top-bar {
-                width: 100%;
-                height: 90px;
-                background: linear-gradient(#2b2b2b, #1e1e1e);
-                font-weight: bold;
-            }
-
-            .top-bar .container {
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-                margin-left: 30px;
-                margin-right: 30px;
-                height: 100%;
-            }
-
-            #refresh-button {
-                width: 24px;
-                height: 24px;
-            }
-
-            .main {
-                padding: 30px;
-            }
-
-            #users-list div {
-                padding-top: 4px;
-                padding-bottom: 4px;
-            }
-
-        </style>
-    </head>
-    <body>
-        <div class="top-bar">
-            <div class="container">
-                <div>Users Online (Friends)</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">
-            <div id="users-list"></div>
-        </div>
-        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
-        <script>
-            var METAVERSE_API_URL = "https://metaverse.highfidelity.com/api/v1/users?status=online&filter=friends";
-            var myUsername = null;
-
-            function displayUsers(data) {
-                $("#users-list").empty();
-                for (var i = 0; i < data.users.length; i++) {
-                    // Don't display users who aren't in a domain
-                    if (typeof data.users[i].location.root.name === "undefined") {
-                        console.log(data.users[i].username + "is online but not in a domain");
-                        $("#dev-div").append("<p>" + data.users[i].username + "is online but not in a domain</p>");
-                    } else {
-                        $("#dev-div").append("<div>" + data.users[i].username + " @ " + data.users[i].location.root.name + "</div>");
-                        // Don't display yourself
-                        if (data.users[i].username !== myUsername) {
-                            console.log(data.users[i].username + " @ " + data.users[i].location.root.name);
-                            $("#users-list").append("<div>" + data.users[i].username + " @ " + data.users[i].location.root.name + "</div>");
-                        }
-                    }
-                }
-            }
-
-            function pollUsers() {
-                // TODO: better transition visual such as spin wheel or loading bar
-                $("#dev-div").append("<p>polling users..</p>");
-                $.ajax({
-                    url: METAVERSE_API_URL,
-                    success: function(response) {
-                        console.log(response);
-                        $("#dev-div").append("<p>polling sucess</p>");
-                        displayUsers(response.data);
-                    }
-                });
-            }
-
-            function onScriptEventReceived(event) {
-                $("#dev-div").append("<p>Received a script event, its type is " + typeof event + "</p>");
-                if (typeof event === "string") {
-                    // Parse the string into an object
-                    event = JSON.parse(event);
-                }
-                if (event.type === "sendUsername") {
-                    myUsername = event.data.username;
-                    $("#dev-div").append("<p>myUsername is " + myUsername + "</p>");
-                    consoloe.log("myUsername is " + myUsername);
-                }
-            }
-
-            $(document).ready(function() {
-                $("#dev-div").append("<p>ready</p>");
-                // Listen for events from hifi
-                EventBridge.scriptEventReceived.connect(onScriptEventReceived);
-                // Send a ready event to hifi
-                var eventObject = {"type": "ready"};
-                EventBridge.emitWebEvent(JSON.stringify(eventObject));
-            });
-        </script>
-    </body>
-</html>
\ No newline at end of file

From 8879727d88c9e43759be1c83a9ef7bc43ad32282 Mon Sep 17 00:00:00 2001
From: Dante Ruiz <dante@highfidelity.io>
Date: Mon, 30 Jan 2017 18:11:42 +0000
Subject: [PATCH 27/33] ability to grab tablet in edit mode

---
 scripts/system/controllers/handControllerGrab.js | 7 ++-----
 scripts/system/edit.js                           | 4 ----
 2 files changed, 2 insertions(+), 9 deletions(-)

diff --git a/scripts/system/controllers/handControllerGrab.js b/scripts/system/controllers/handControllerGrab.js
index 972d95e9e9..f4b760dbce 100644
--- a/scripts/system/controllers/handControllerGrab.js
+++ b/scripts/system/controllers/handControllerGrab.js
@@ -853,7 +853,7 @@ function MyController(hand) {
     };
 
     this.setState = function(newState, reason) {
-        if (isInEditMode() && (newState !== STATE_OFF &&
+        if ((isInEditMode() && this.grabbedEntity !== HMD.tabletID )&& (newState !== STATE_OFF &&
                                newState !== STATE_SEARCHING &&
                                newState !== STATE_OVERLAY_STYLUS_TOUCHING)) {
             return;
@@ -1510,7 +1510,6 @@ function MyController(hand) {
     };
 
     this.entityIsNearGrabbable = function(entityID, handPosition, maxDistance) {
-
         if (!this.entityIsGrabbable(entityID)) {
             return false;
         }
@@ -1703,7 +1702,7 @@ function MyController(hand) {
     };
 
     this.isTablet = function (entityID) {
-        if (entityID === HMD.tabletID) { // XXX what's a better way to know this?
+        if (entityID === HMD.tabletID) {
             return true;
         }
         return false;
@@ -2264,7 +2263,6 @@ function MyController(hand) {
         this.clearEquipHaptics();
 
         this.shouldScale = false;
-
         Controller.triggerHapticPulse(HAPTIC_PULSE_STRENGTH, HAPTIC_PULSE_DURATION, this.hand);
 
         if (this.entityActivated) {
@@ -2394,7 +2392,6 @@ function MyController(hand) {
 
     this.nearGrabbing = function(deltaTime, timestamp) {
         this.grabPointSphereOff();
-
         if (this.state == STATE_NEAR_GRABBING && (!this.triggerClicked && this.secondaryReleased())) {
             this.callEntityMethodOnGrabbed("releaseGrab");
             this.setState(STATE_OFF, "trigger released");
diff --git a/scripts/system/edit.js b/scripts/system/edit.js
index d49f7ad3c5..dccd097817 100644
--- a/scripts/system/edit.js
+++ b/scripts/system/edit.js
@@ -191,7 +191,6 @@ var toolBar = (function () {
         selectionManager.clearSelections();
         entityListTool.sendUpdate();
         selectionManager.setSelections([entityID]);
-
         return entityID;
     }
 
@@ -714,9 +713,6 @@ function mouseClickEvent(event) {
         toolBar.setActive(true);
         var pickRay = result.pickRay;
         var foundEntity = result.entityID;
-        if (foundEntity === HMD.tabletID) {
-            return;
-        }
         properties = Entities.getEntityProperties(foundEntity);
         if (isLocked(properties)) {
             if (wantDebug) {

From 57a9d34cdafa15a1c02d9551758398910504d55a Mon Sep 17 00:00:00 2001
From: Dante Ruiz <dante@highfidelity.io>
Date: Mon, 30 Jan 2017 18:33:56 +0000
Subject: [PATCH 28/33] minimize git diff

---
 scripts/system/controllers/handControllerGrab.js | 3 +++
 scripts/system/edit.js                           | 1 +
 2 files changed, 4 insertions(+)

diff --git a/scripts/system/controllers/handControllerGrab.js b/scripts/system/controllers/handControllerGrab.js
index f4b760dbce..2efafa504d 100644
--- a/scripts/system/controllers/handControllerGrab.js
+++ b/scripts/system/controllers/handControllerGrab.js
@@ -1510,6 +1510,7 @@ function MyController(hand) {
     };
 
     this.entityIsNearGrabbable = function(entityID, handPosition, maxDistance) {
+        
         if (!this.entityIsGrabbable(entityID)) {
             return false;
         }
@@ -2263,6 +2264,7 @@ function MyController(hand) {
         this.clearEquipHaptics();
 
         this.shouldScale = false;
+        
         Controller.triggerHapticPulse(HAPTIC_PULSE_STRENGTH, HAPTIC_PULSE_DURATION, this.hand);
 
         if (this.entityActivated) {
@@ -2392,6 +2394,7 @@ function MyController(hand) {
 
     this.nearGrabbing = function(deltaTime, timestamp) {
         this.grabPointSphereOff();
+        
         if (this.state == STATE_NEAR_GRABBING && (!this.triggerClicked && this.secondaryReleased())) {
             this.callEntityMethodOnGrabbed("releaseGrab");
             this.setState(STATE_OFF, "trigger released");
diff --git a/scripts/system/edit.js b/scripts/system/edit.js
index dccd097817..8f9697b060 100644
--- a/scripts/system/edit.js
+++ b/scripts/system/edit.js
@@ -191,6 +191,7 @@ var toolBar = (function () {
         selectionManager.clearSelections();
         entityListTool.sendUpdate();
         selectionManager.setSelections([entityID]);
+        
         return entityID;
     }
 

From b264d84385d50984af5eefb38e00352351982ef4 Mon Sep 17 00:00:00 2001
From: Dante Ruiz <dante@highfidelity.io>
Date: Mon, 30 Jan 2017 18:38:02 +0000
Subject: [PATCH 29/33] minimize git diff

---
 scripts/system/controllers/handControllerGrab.js | 6 +++---
 scripts/system/edit.js                           | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/scripts/system/controllers/handControllerGrab.js b/scripts/system/controllers/handControllerGrab.js
index 2efafa504d..86820c990a 100644
--- a/scripts/system/controllers/handControllerGrab.js
+++ b/scripts/system/controllers/handControllerGrab.js
@@ -1510,7 +1510,7 @@ function MyController(hand) {
     };
 
     this.entityIsNearGrabbable = function(entityID, handPosition, maxDistance) {
-        
+
         if (!this.entityIsGrabbable(entityID)) {
             return false;
         }
@@ -2264,7 +2264,7 @@ function MyController(hand) {
         this.clearEquipHaptics();
 
         this.shouldScale = false;
-        
+
         Controller.triggerHapticPulse(HAPTIC_PULSE_STRENGTH, HAPTIC_PULSE_DURATION, this.hand);
 
         if (this.entityActivated) {
@@ -2394,7 +2394,7 @@ function MyController(hand) {
 
     this.nearGrabbing = function(deltaTime, timestamp) {
         this.grabPointSphereOff();
-        
+
         if (this.state == STATE_NEAR_GRABBING && (!this.triggerClicked && this.secondaryReleased())) {
             this.callEntityMethodOnGrabbed("releaseGrab");
             this.setState(STATE_OFF, "trigger released");
diff --git a/scripts/system/edit.js b/scripts/system/edit.js
index 8f9697b060..40952e9de1 100644
--- a/scripts/system/edit.js
+++ b/scripts/system/edit.js
@@ -191,7 +191,7 @@ var toolBar = (function () {
         selectionManager.clearSelections();
         entityListTool.sendUpdate();
         selectionManager.setSelections([entityID]);
-        
+
         return entityID;
     }
 

From 0962a15a06dfdb68fbcb2201da4d98b486b45c02 Mon Sep 17 00:00:00 2001
From: "Anthony J. Thibault" <tony@highfidelity.io>
Date: Mon, 30 Jan 2017 15:34:46 -0800
Subject: [PATCH 30/33] Fix for one-frame lag in the tablet stylus.

---
 interface/src/ui/overlays/ModelOverlay.cpp                 | 2 ++
 .../entities-renderer/src/RenderableModelEntityItem.cpp    | 2 +-
 libraries/render-utils/src/Model.cpp                       | 7 +++----
 libraries/render-utils/src/Model.h                         | 4 ++--
 4 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/interface/src/ui/overlays/ModelOverlay.cpp b/interface/src/ui/overlays/ModelOverlay.cpp
index f70537a952..e17ab587f6 100644
--- a/interface/src/ui/overlays/ModelOverlay.cpp
+++ b/interface/src/ui/overlays/ModelOverlay.cpp
@@ -22,6 +22,7 @@ ModelOverlay::ModelOverlay()
       _modelTextures(QVariantMap())
 {
     _model->init();
+    _model->setSpatiallyNestableOverride(this);
     _isLoaded = false;
 }
 
@@ -33,6 +34,7 @@ ModelOverlay::ModelOverlay(const ModelOverlay* modelOverlay) :
     _updateModel(false)
 {
     _model->init();
+    _model->setSpatiallyNestableOverride(this);
     if (_url.isValid()) {
         _updateModel = true;
         _isLoaded = false;
diff --git a/libraries/entities-renderer/src/RenderableModelEntityItem.cpp b/libraries/entities-renderer/src/RenderableModelEntityItem.cpp
index 087fcda8e1..be64985fdb 100644
--- a/libraries/entities-renderer/src/RenderableModelEntityItem.cpp
+++ b/libraries/entities-renderer/src/RenderableModelEntityItem.cpp
@@ -508,7 +508,7 @@ ModelPointer RenderableModelEntityItem::getModel(QSharedPointer<EntityTreeRender
         // If we don't have a model, allocate one *immediately*
         if (!_model) {
             _model = _myRenderer->allocateModel(getModelURL(), renderer->getEntityLoadingPriority(*this));
-            _model->setSpatiallyNestableOverride(shared_from_this());
+            _model->setSpatiallyNestableOverride(this);
             _needsInitialSimulation = true;
         // If we need to change URLs, update it *after rendering* (to avoid access violations)
         } else if (QUrl(getModelURL()) != _model->getURL()) {
diff --git a/libraries/render-utils/src/Model.cpp b/libraries/render-utils/src/Model.cpp
index 59b997b2cc..b28b2022fc 100644
--- a/libraries/render-utils/src/Model.cpp
+++ b/libraries/render-utils/src/Model.cpp
@@ -133,16 +133,15 @@ void Model::setRotation(const glm::quat& rotation) {
     updateRenderItems();
 }
 
-void Model::setSpatiallyNestableOverride(SpatiallyNestablePointer override) {
+void Model::setSpatiallyNestableOverride(SpatiallyNestable* override) {
     _spatiallyNestableOverride = override;
     updateRenderItems();
 }
 
 Transform Model::getTransform() const {
-    SpatiallyNestablePointer spatiallyNestableOverride = _spatiallyNestableOverride.lock();
-    if (spatiallyNestableOverride) {
+    if (_spatiallyNestableOverride) {
         bool success;
-        Transform transform = spatiallyNestableOverride->getTransform(success);
+        Transform transform = _spatiallyNestableOverride->getTransform(success);
         if (success) {
             transform.setScale(getScale());
             return transform;
diff --git a/libraries/render-utils/src/Model.h b/libraries/render-utils/src/Model.h
index 8b6992394f..dfb6822eb5 100644
--- a/libraries/render-utils/src/Model.h
+++ b/libraries/render-utils/src/Model.h
@@ -205,7 +205,7 @@ public:
 
     void setTranslation(const glm::vec3& translation);
     void setRotation(const glm::quat& rotation);
-    void setSpatiallyNestableOverride(SpatiallyNestablePointer ptr);
+    void setSpatiallyNestableOverride(SpatiallyNestable* ptr);
 
     const glm::vec3& getTranslation() const { return _translation; }
     const glm::quat& getRotation() const { return _rotation; }
@@ -297,7 +297,7 @@ protected:
     glm::quat _rotation;
     glm::vec3 _scale;
 
-    SpatiallyNestableWeakPointer _spatiallyNestableOverride;
+    SpatiallyNestable* _spatiallyNestableOverride { nullptr };
 
     glm::vec3 _offset;
 

From 7a4a76901571a764ebaeea1de036d88ed94dcc60 Mon Sep 17 00:00:00 2001
From: Dante Ruiz <dante@highfidelity.io>
Date: Tue, 31 Jan 2017 16:53:57 +0000
Subject: [PATCH 31/33] fix more editing bugs

---
 scripts/system/edit.js                          | 3 +++
 scripts/system/libraries/entitySelectionTool.js | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/scripts/system/edit.js b/scripts/system/edit.js
index 40952e9de1..d49f7ad3c5 100644
--- a/scripts/system/edit.js
+++ b/scripts/system/edit.js
@@ -714,6 +714,9 @@ function mouseClickEvent(event) {
         toolBar.setActive(true);
         var pickRay = result.pickRay;
         var foundEntity = result.entityID;
+        if (foundEntity === HMD.tabletID) {
+            return;
+        }
         properties = Entities.getEntityProperties(foundEntity);
         if (isLocked(properties)) {
             if (wantDebug) {
diff --git a/scripts/system/libraries/entitySelectionTool.js b/scripts/system/libraries/entitySelectionTool.js
index 2932417d25..b9bae72d14 100644
--- a/scripts/system/libraries/entitySelectionTool.js
+++ b/scripts/system/libraries/entitySelectionTool.js
@@ -1038,7 +1038,7 @@ SelectionDisplay = (function() {
                         if (entityIntersection.intersects &&
                             (!overlayIntersection.intersects || (entityIntersection.distance < overlayIntersection.distance))) {
 
-                            if (HMD.tabletID == entityIntersection.entityID) {
+                            if (HMD.tabletID === entityIntersection.entityID) {
                                 return;
                             }
 

From 0f75668923c0632929c630cc1955764f75819650 Mon Sep 17 00:00:00 2001
From: "Anthony J. Thibault" <tony@highfidelity.io>
Date: Tue, 31 Jan 2017 09:36:21 -0800
Subject: [PATCH 32/33] Moved Model setting of _spatiallyNestableOverride to
 constructor

---
 interface/src/ui/overlays/ModelOverlay.cpp                | 6 ++----
 libraries/entities-renderer/src/EntityTreeRenderer.cpp    | 4 ++--
 libraries/entities-renderer/src/EntityTreeRenderer.h      | 2 +-
 .../entities-renderer/src/RenderableModelEntityItem.cpp   | 3 +--
 libraries/render-utils/src/Model.cpp                      | 8 ++------
 libraries/render-utils/src/Model.h                        | 8 +++-----
 6 files changed, 11 insertions(+), 20 deletions(-)

diff --git a/interface/src/ui/overlays/ModelOverlay.cpp b/interface/src/ui/overlays/ModelOverlay.cpp
index e17ab587f6..a0f7c4e824 100644
--- a/interface/src/ui/overlays/ModelOverlay.cpp
+++ b/interface/src/ui/overlays/ModelOverlay.cpp
@@ -18,23 +18,21 @@
 QString const ModelOverlay::TYPE = "model";
 
 ModelOverlay::ModelOverlay()
-    : _model(std::make_shared<Model>(std::make_shared<Rig>())),
+    : _model(std::make_shared<Model>(std::make_shared<Rig>(), nullptr, this)),
       _modelTextures(QVariantMap())
 {
     _model->init();
-    _model->setSpatiallyNestableOverride(this);
     _isLoaded = false;
 }
 
 ModelOverlay::ModelOverlay(const ModelOverlay* modelOverlay) :
     Volume3DOverlay(modelOverlay),
-    _model(std::make_shared<Model>(std::make_shared<Rig>())),
+    _model(std::make_shared<Model>(std::make_shared<Rig>(), nullptr, this)),
     _modelTextures(QVariantMap()),
     _url(modelOverlay->_url),
     _updateModel(false)
 {
     _model->init();
-    _model->setSpatiallyNestableOverride(this);
     if (_url.isValid()) {
         _updateModel = true;
         _isLoaded = false;
diff --git a/libraries/entities-renderer/src/EntityTreeRenderer.cpp b/libraries/entities-renderer/src/EntityTreeRenderer.cpp
index d277fd540f..88b952de95 100644
--- a/libraries/entities-renderer/src/EntityTreeRenderer.cpp
+++ b/libraries/entities-renderer/src/EntityTreeRenderer.cpp
@@ -540,7 +540,7 @@ void EntityTreeRenderer::processEraseMessage(ReceivedMessage& message, const Sha
     std::static_pointer_cast<EntityTree>(_tree)->processEraseMessage(message, sourceNode);
 }
 
-ModelPointer EntityTreeRenderer::allocateModel(const QString& url, float loadingPriority) {
+ModelPointer EntityTreeRenderer::allocateModel(const QString& url, float loadingPriority, SpatiallyNestable* spatiallyNestableOverride) {
     ModelPointer model = nullptr;
 
     // Only create and delete models on the thread that owns the EntityTreeRenderer
@@ -552,7 +552,7 @@ ModelPointer EntityTreeRenderer::allocateModel(const QString& url, float loading
         return model;
     }
 
-    model = std::make_shared<Model>(std::make_shared<Rig>());
+    model = std::make_shared<Model>(std::make_shared<Rig>(), nullptr, spatiallyNestableOverride);
     model->setLoadingPriority(loadingPriority);
     model->init();
     model->setURL(QUrl(url));
diff --git a/libraries/entities-renderer/src/EntityTreeRenderer.h b/libraries/entities-renderer/src/EntityTreeRenderer.h
index 8c021ad184..395025543d 100644
--- a/libraries/entities-renderer/src/EntityTreeRenderer.h
+++ b/libraries/entities-renderer/src/EntityTreeRenderer.h
@@ -77,7 +77,7 @@ public:
     void reloadEntityScripts();
 
     /// if a renderable entity item needs a model, we will allocate it for them
-    Q_INVOKABLE ModelPointer allocateModel(const QString& url, float loadingPriority = 0.0f);
+    Q_INVOKABLE ModelPointer allocateModel(const QString& url, float loadingPriority = 0.0f, SpatiallyNestable* spatiallyNestableOverride = nullptr);
 
     /// if a renderable entity item needs to update the URL of a model, we will handle that for the entity
     Q_INVOKABLE ModelPointer updateModel(ModelPointer original, const QString& newUrl);
diff --git a/libraries/entities-renderer/src/RenderableModelEntityItem.cpp b/libraries/entities-renderer/src/RenderableModelEntityItem.cpp
index be64985fdb..751f44d816 100644
--- a/libraries/entities-renderer/src/RenderableModelEntityItem.cpp
+++ b/libraries/entities-renderer/src/RenderableModelEntityItem.cpp
@@ -507,8 +507,7 @@ ModelPointer RenderableModelEntityItem::getModel(QSharedPointer<EntityTreeRender
     if (!getModelURL().isEmpty()) {
         // If we don't have a model, allocate one *immediately*
         if (!_model) {
-            _model = _myRenderer->allocateModel(getModelURL(), renderer->getEntityLoadingPriority(*this));
-            _model->setSpatiallyNestableOverride(this);
+            _model = _myRenderer->allocateModel(getModelURL(), renderer->getEntityLoadingPriority(*this), this);
             _needsInitialSimulation = true;
         // If we need to change URLs, update it *after rendering* (to avoid access violations)
         } else if (QUrl(getModelURL()) != _model->getURL()) {
diff --git a/libraries/render-utils/src/Model.cpp b/libraries/render-utils/src/Model.cpp
index b28b2022fc..41ac39dfa8 100644
--- a/libraries/render-utils/src/Model.cpp
+++ b/libraries/render-utils/src/Model.cpp
@@ -78,11 +78,12 @@ void initCollisionMaterials() {
     }
 }
 
-Model::Model(RigPointer rig, QObject* parent) :
+Model::Model(RigPointer rig, QObject* parent, SpatiallyNestable* spatiallyNestableOverride) :
     QObject(parent),
     _renderGeometry(),
     _collisionGeometry(),
     _renderWatcher(_renderGeometry),
+    _spatiallyNestableOverride(spatiallyNestableOverride),
     _translation(0.0f),
     _rotation(),
     _scale(1.0f, 1.0f, 1.0f),
@@ -133,11 +134,6 @@ void Model::setRotation(const glm::quat& rotation) {
     updateRenderItems();
 }
 
-void Model::setSpatiallyNestableOverride(SpatiallyNestable* override) {
-    _spatiallyNestableOverride = override;
-    updateRenderItems();
-}
-
 Transform Model::getTransform() const {
     if (_spatiallyNestableOverride) {
         bool success;
diff --git a/libraries/render-utils/src/Model.h b/libraries/render-utils/src/Model.h
index dfb6822eb5..301a4592de 100644
--- a/libraries/render-utils/src/Model.h
+++ b/libraries/render-utils/src/Model.h
@@ -67,7 +67,7 @@ public:
 
     static void setAbstractViewStateInterface(AbstractViewStateInterface* viewState) { _viewState = viewState; }
 
-    Model(RigPointer rig, QObject* parent = nullptr);
+    Model(RigPointer rig, QObject* parent = nullptr, SpatiallyNestable* spatiallyNestableOverride = nullptr);
     virtual ~Model();
 
     inline ModelPointer getThisPointer() const {
@@ -205,7 +205,6 @@ public:
 
     void setTranslation(const glm::vec3& translation);
     void setRotation(const glm::quat& rotation);
-    void setSpatiallyNestableOverride(SpatiallyNestable* ptr);
 
     const glm::vec3& getTranslation() const { return _translation; }
     const glm::quat& getRotation() const { return _rotation; }
@@ -293,12 +292,11 @@ protected:
 
     GeometryResourceWatcher _renderWatcher;
 
+    SpatiallyNestable* _spatiallyNestableOverride;
+
     glm::vec3 _translation;
     glm::quat _rotation;
     glm::vec3 _scale;
-
-    SpatiallyNestable* _spatiallyNestableOverride { nullptr };
-
     glm::vec3 _offset;
 
     static float FAKE_DIMENSION_PLACEHOLDER;

From 3a6a7bcc8a8d6b6593b814a807c5ee6fd002d327 Mon Sep 17 00:00:00 2001
From: Seth Alves <seth@highfidelity.io>
Date: Tue, 31 Jan 2017 14:44:09 -0800
Subject: [PATCH 33/33] put tablet version of users.js into a different file

---
 scripts/system/tablet-users.js |   67 ++
 scripts/system/users.js        | 1297 ++++++++++++++++++++++++++++++--
 2 files changed, 1322 insertions(+), 42 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..7930892395
--- /dev/null
+++ b/scripts/system/tablet-users.js
@@ -0,0 +1,67 @@
+"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";
+    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": "sendUsername",
+                "data": {"username": myUsername}
+            };
+            print("sending username: " + myUsername);
+            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();
+        }
+    }
+
+    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 7930892395..009c446ff3 100644
--- a/scripts/system/users.js
+++ b/scripts/system/users.js
@@ -2,66 +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 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 tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
-    var button = tablet.addButton({
-        icon: "icons/tablet-icons/people-i.svg",
-        text: "Users"
-    });
+var button;
+var buttonName = "USERS";
+var toolBar = null;
+var tablet = null;
 
-    function onClicked() {
-        tablet.gotoWebScreen(USERS_URL);
+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 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": "sendUsername",
-                "data": {"username": myUsername}
-            };
-            print("sending username: " + myUsername);
-            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
+    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;
         }
     }
 
-    button.clicked.connect(onClicked);
-    tablet.webEventReceived.connect(onWebEventReceived);
+    function onMouseMoveEvent(event) {
+        var isVisible;
 
-    function cleanup() {
-        button.clicked.disconnect(onClicked);
-        tablet.removeButton(button);
+        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
+                });
+            }
+        }
     }
 
-    Script.scriptEnding.connect(cleanup);
+    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