diff --git a/interface/resources/qml/hifi/tablet/EditTabView.qml b/interface/resources/qml/hifi/tablet/EditTabView.qml
index 4ac8755570..bf7dd3e66b 100644
--- a/interface/resources/qml/hifi/tablet/EditTabView.qml
+++ b/interface/resources/qml/hifi/tablet/EditTabView.qml
@@ -175,7 +175,7 @@ TabBar {
                                     method: "newEntityButtonClicked",
                                     params: { buttonName: "newParticleButton" }
                                 });
-                                editTabView.currentIndex = 4
+                                editTabView.currentIndex = 2
                             }
                         }
 
@@ -279,21 +279,6 @@ TabBar {
         }
     }
 
-    EditTabButton {
-        title: "P"
-        active: true
-        enabled: true
-        property string originalUrl: ""
-
-        property Component visualItem: Component {
-            WebView {
-                id: particleExplorerWebView
-                url: Paths.defaultScripts + "/system/particle_explorer/particleExplorer.html"
-                enabled: true
-            }
-        }
-    }
-
     function fromScript(message) {
         switch (message.method) {
             case 'selectTab':
@@ -326,9 +311,6 @@ TabBar {
                 case 'grid':
                     editTabView.currentIndex = 3;
                     break;
-                case 'particle':
-                    editTabView.currentIndex = 4;
-                    break;
                 default:
                     console.warn('Attempt to switch to invalid tab:', id);
             }
diff --git a/interface/resources/qml/hifi/tablet/EditToolsTabView.qml b/interface/resources/qml/hifi/tablet/EditToolsTabView.qml
index 00084b8ca9..13b1caf8fb 100644
--- a/interface/resources/qml/hifi/tablet/EditToolsTabView.qml
+++ b/interface/resources/qml/hifi/tablet/EditToolsTabView.qml
@@ -18,7 +18,6 @@ TabBar {
         readonly property int create: 0
         readonly property int properties: 1
         readonly property int grid: 2
-        readonly property int particle: 3
     }
 
     readonly property HifiConstants hifi: HifiConstants {}
@@ -182,7 +181,7 @@ TabBar {
                                     method: "newEntityButtonClicked",
                                     params: { buttonName: "newParticleButton" }
                                 });
-                                editTabView.currentIndex = tabIndex.particle
+                                editTabView.currentIndex = tabIndex.properties
                             }
                         }
 
@@ -271,21 +270,6 @@ TabBar {
         }
     }
 
-    EditTabButton {
-        title: "P"
-        active: true
-        enabled: true
-        property string originalUrl: ""
-
-        property Component visualItem: Component {
-            WebView {
-                id: particleExplorerWebView
-                url: Paths.defaultScripts + "/system/particle_explorer/particleExplorer.html"
-                enabled: true
-            }
-        }
-    }
-
     function fromScript(message) {
         switch (message.method) {
             case 'selectTab':
@@ -299,7 +283,7 @@ TabBar {
     // Changes the current tab based on tab index or title as input
     function selectTab(id) {
         if (typeof id === 'number') {
-            if (id >= tabIndex.create && id <= tabIndex.particle) {
+            if (id >= tabIndex.create && id <= tabIndex.grid) {
                 editTabView.currentIndex = id;
             } else {
                 console.warn('Attempt to switch to invalid tab:', id);
@@ -315,9 +299,6 @@ TabBar {
                 case 'grid':
                     editTabView.currentIndex = tabIndex.grid;
                     break;
-                case 'particle':
-                    editTabView.currentIndex = tabIndex.particle;
-                    break;
                 default:
                     console.warn('Attempt to switch to invalid tab:', id);
             }
diff --git a/scripts/system/edit.js b/scripts/system/edit.js
index 15068cf097..9f4ec3c62b 100644
--- a/scripts/system/edit.js
+++ b/scripts/system/edit.js
@@ -12,7 +12,7 @@
 
 /* global Script, SelectionDisplay, LightOverlayManager, CameraManager, Grid, GridTool, EntityListTool, Vec3, SelectionManager,
    Overlays, OverlayWebWindow, UserActivityLogger, Settings, Entities, Tablet, Toolbars, Messages, Menu, Camera,
-   progressDialog, tooltip, MyAvatar, Quat, Controller, Clipboard, HMD, UndoStack, ParticleExplorerTool, OverlaySystemWindow */
+   progressDialog, tooltip, MyAvatar, Quat, Controller, Clipboard, HMD, UndoStack, OverlaySystemWindow */
 
 (function() { // BEGIN LOCAL_SCOPE
 
@@ -32,7 +32,6 @@ Script.include([
     "libraries/gridTool.js",
     "libraries/entityList.js",
     "libraries/utils.js",
-    "particle_explorer/particleExplorerTool.js",
     "libraries/entityIconOverlayManager.js"
 ]);
 
@@ -112,28 +111,6 @@ var entityListTool = new EntityListTool(shouldUseEditTabletApp);
 selectionManager.addEventListener(function () {
     selectionDisplay.updateHandles();
     entityIconOverlayManager.updatePositions();
-
-    // Update particle explorer
-    var needToDestroyParticleExplorer = false;
-    if (selectionManager.selections.length === 1) {
-        var selectedEntityID = selectionManager.selections[0];
-        if (selectedEntityID === selectedParticleEntityID) {
-            return;
-        }
-        var type = Entities.getEntityProperties(selectedEntityID, "type").type;
-        if (type === "ParticleEffect") {
-            selectParticleEntity(selectedEntityID);
-        } else {
-            needToDestroyParticleExplorer = true;
-        }
-    } else {
-        needToDestroyParticleExplorer = true;
-    }
-
-    if (needToDestroyParticleExplorer && selectedParticleEntityID !== null) {
-        selectedParticleEntityID = null;
-        particleExplorerTool.destroyWebView();
-    }
 });
 
 var KEY_P = 80; //Key code for letter p used for Parenting hotkey.
@@ -580,10 +557,6 @@ var toolBar = (function () {
                 properties: properties
             }], [], true);
 
-            if (properties.type === "ParticleEffect") {
-                selectParticleEntity(entityID);
-            }
-
             var POST_ADJUST_ENTITY_TYPES = ["Model"];
             if (POST_ADJUST_ENTITY_TYPES.indexOf(properties.type) !== -1) {
                 // Adjust position of entity per bounding box after it has been created and auto-resized.
@@ -1314,13 +1287,6 @@ function mouseClickEvent(event) {
             orientation = MyAvatar.orientation;
             intersection = rayPlaneIntersection(pickRay, P, Quat.getForward(orientation));
 
-            if (event.isShifted) {
-                particleExplorerTool.destroyWebView();
-            }
-            if (properties.type !== "ParticleEffect") {
-                particleExplorerTool.destroyWebView();
-            }
-
             if (!event.isShifted) {
                 selectionManager.setSelections([foundEntity], this);
             } else {
@@ -1739,8 +1705,6 @@ function deleteSelectedEntities() {
     if (SelectionManager.hasSelection()) {
         var deletedIDs = [];
 
-        selectedParticleEntityID = null;
-        particleExplorerTool.destroyWebView();
         SelectionManager.saveProperties();
         var savedProperties = [];
         var newSortedSelection = sortSelectedEntities(selectionManager.selections);
@@ -2347,9 +2311,11 @@ var PropertiesTool = function (opts) {
             if (entity.properties.rotation !== undefined) {
                 entity.properties.rotation = Quat.safeEulerAngles(entity.properties.rotation);
             }
+            if (entity.properties.emitOrientation !== undefined) {
+                entity.properties.emitOrientation = Quat.safeEulerAngles(entity.properties.emitOrientation);
+            }
             if (entity.properties.keyLight !== undefined && entity.properties.keyLight.direction !== undefined) {
-                entity.properties.keyLight.direction = Vec3.multiply(RADIANS_TO_DEGREES,
-                                                                     Vec3.toPolar(entity.properties.keyLight.direction));
+                entity.properties.keyLight.direction = Vec3.toPolar(entity.properties.keyLight.direction);
                 entity.properties.keyLight.direction.z = 0.0;
             }
             selections.push(entity);
@@ -2385,18 +2351,24 @@ var PropertiesTool = function (opts) {
                     data.properties.angularVelocity = Vec3.ZERO;
                 }
                 if (data.properties.rotation !== undefined) {
-                    var rotation = data.properties.rotation;
-                    data.properties.rotation = Quat.fromPitchYawRollDegrees(rotation.x, rotation.y, rotation.z);
+                    data.properties.rotation = Quat.fromVec3Degrees(data.properties.rotation);
+                }
+                if (data.properties.emitOrientation !== undefined) {
+                    data.properties.emitOrientation = Quat.fromVec3Degrees(data.properties.emitOrientation);
                 }
                 if (data.properties.keyLight !== undefined && data.properties.keyLight.direction !== undefined) {
-                    data.properties.keyLight.direction = Vec3.fromPolar(
-                        data.properties.keyLight.direction.x * DEGREES_TO_RADIANS,
-                        data.properties.keyLight.direction.y * DEGREES_TO_RADIANS
-                    );
+                    var currentKeyLightDirection = Vec3.toPolar(Entities.getEntityProperties(selectionManager.selections[0], ['keyLight.direction']).keyLight.direction);
+                    if (data.properties.keyLight.direction.x === undefined) {
+                        data.properties.keyLight.direction.x = currentKeyLightDirection.x;
+                    }
+                    if (data.properties.keyLight.direction.y === undefined) {
+                        data.properties.keyLight.direction.y = currentKeyLightDirection.y;
+                    }
+                    data.properties.keyLight.direction = Vec3.fromPolar(data.properties.keyLight.direction.x, data.properties.keyLight.direction.y);
                 }
                 Entities.editEntity(selectionManager.selections[0], data.properties);
                 if (data.properties.name !== undefined || data.properties.modelURL !== undefined || data.properties.materialURL !== undefined ||
-                        data.properties.visible !== undefined || data.properties.locked !== undefined) {
+                    data.properties.visible !== undefined || data.properties.locked !== undefined) {
                     entityListTool.sendUpdate();
                 }
             }
@@ -2742,31 +2714,6 @@ propertyMenu.onSelectMenuItem = function (name) {
 var showMenuItem = propertyMenu.addMenuItem("Show in Marketplace");
 
 var propertiesTool = new PropertiesTool();
-var particleExplorerTool = new ParticleExplorerTool(createToolsWindow);
-var selectedParticleEntityID = null;
-
-function selectParticleEntity(entityID) {
-    selectedParticleEntityID = entityID;
-
-    var properties = Entities.getEntityProperties(entityID);
-    if (properties.emitOrientation) {
-        properties.emitOrientation = Quat.safeEulerAngles(properties.emitOrientation);
-    }
-
-    particleExplorerTool.destroyWebView();
-    particleExplorerTool.createWebView();
-
-    particleExplorerTool.setActiveParticleEntity(entityID);
-
-    // Switch to particle explorer
-    var selectTabMethod = { method: 'selectTab', params: { id: 'particle' } };
-    if (shouldUseEditTabletApp()) {
-        var tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
-        tablet.sendToQml(selectTabMethod);
-    } else {
-        createToolsWindow.sendToQml(selectTabMethod);
-    }
-}
 
 entityListTool.webView.webEventReceived.connect(function(data) {
     try {
@@ -2780,20 +2727,6 @@ entityListTool.webView.webEventReceived.connect(function(data) {
         parentSelectedEntities();
     } else if (data.type === 'unparent') {
         unparentSelectedEntities();
-    } else if (data.type === "selectionUpdate") {
-        var ids = data.entityIds;
-        if (ids.length === 1) {
-            if (Entities.getEntityProperties(ids[0], "type").type === "ParticleEffect") {
-                if (JSON.stringify(selectedParticleEntityID) === JSON.stringify(ids[0])) {
-                    // This particle entity is already selected, so return
-                    return;
-                }
-                // Destroy the old particles web view first
-            } else {
-                selectedParticleEntityID = 0;
-                particleExplorerTool.destroyWebView();
-            }
-        }
     }
 });
 
diff --git a/scripts/system/html/css/edit-style.css b/scripts/system/html/css/edit-style.css
index 2992762e87..2db7fce065 100644
--- a/scripts/system/html/css/edit-style.css
+++ b/scripts/system/html/css/edit-style.css
@@ -310,6 +310,28 @@ input[type=number].hover-down::-webkit-inner-spin-button:after {
     color: #ffffff;
 }
 
+input[type=range] {
+    -webkit-appearance: none;
+    background: #2e2e2e;
+    height: 1.8rem;
+    border-radius: 1rem;
+}
+input[type=range]::-webkit-slider-thumb {
+    -webkit-appearance:none;
+    width: 0.6rem;
+    height: 1.8rem;
+    padding:0;
+    margin: 0;
+    background-color: #696969;
+    border-radius: 1rem;
+}
+input[type=range]::-webkit-slider-thumb:hover {
+    background-color: white;
+}
+input[type=range]:focus { /*#252525*/
+    outline: none;
+}
+
 input.no-spin::-webkit-outer-spin-button,
 input.no-spin::-webkit-inner-spin-button {
     display: none;
@@ -458,14 +480,15 @@ input[type=checkbox]:checked + label:hover {
     border: 1.5pt solid black;
 }
 
-.shape-section, .light-section, .model-section, .web-section, .image-section, .hyperlink-section, .text-section, .zone-section, .material-section {
-    display: table;
+#properties-list {
+    display: flex;
+    flex-direction: column;
 }
 
 #properties-list fieldset {
     position: relative;
     /* 0.1px on the top is to prevent margin collapsing between this and it's first child */
-    margin: 21px -21px 0 -21px;
+    margin: 0 -21px 21px -21px;
     padding: 0.1px 21px 0 21px;
     border: none;
     border-top: 1px rgb(90,90,90) solid;
@@ -492,13 +515,6 @@ input[type=checkbox]:checked + label:hover {
     box-shadow: none;
 }
 
-#properties-list > fieldset#properties-header {
-    margin-top: 0;
-    padding-bottom: 0;
-}
-
-
-
 #properties-list > fieldset > legend {
     position: relative;
     display: table;
@@ -517,7 +533,7 @@ input[type=checkbox]:checked + label:hover {
     box-shadow: 0 -1px 0 rgb(37,37,37), 0 4px 4px 0 rgba(0,0,0,0.75);
 }
 
-div.section-header, .sub-section-header, hr {
+div.section-header, hr {
     display: table;
     width: 100%;
     margin: 21px -21px 0 -21px;
@@ -530,17 +546,6 @@ div.section-header, .sub-section-header, hr {
     outline: none;
 }
 
-
-
-.column .sub-section-header {
-    background-image: none;
-    padding-top: 0;
-}
-
-.sub-section-header, .no-collapse, hr {
-    background: #404040 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAjSURBVBhXY1RVVf3PgARYjIyMoEwIYHRwcEBRwQSloYCBAQCwjgPMiI7W2QAAAABJRU5ErkJggg==) repeat-x top left;
-}
-
 div.section-header:first-child {
     margin-top: -2px;
     padding-top: 0;
@@ -548,10 +553,6 @@ div.section-header:first-child {
     height: auto;
 }
 
-.sub-section-header {
-    margin-bottom: -10px;
-}
-
 #properties-list > fieldset > legend span, .section-header span {
     font-family: HiFi-Glyphs;
     font-size: 30px;
@@ -565,26 +566,21 @@ div.section-header:first-child {
     margin-bottom: -21px;
 }
 
+#properties-list .sub-section-header {
+    border-top: none;
+    box-shadow: none;
+    margin-top: 8px;
+}
+
+.sub-section-header + .property {
+    margin-top: 0;
+}
+
 hr {
     border: none;
     padding-top: 2px;
 }
 
-.text-group[collapsed="true"] ~ .text-group,
-.zone-group[collapsed="true"] ~ .zone-group,
-.image-group[collapsed="true"] ~ .image-group,
-.web-group[collapsed="true"] ~ .web-group,
-.hyperlink-group[collapsed="true"] ~ .hyperlink-group,
-.spatial-group[collapsed="true"] ~ .spatial-group,
-.physical-group[collapsed="true"] ~ .physical-group,
-.behavior-group[collapsed="true"] ~ .behavior-group,
-.model-group[collapsed="true"] ~ .model-group,
-.material-group[collapsed="true"] ~ .material-group,
-.light-group[collapsed="true"] ~ .light-group {
-    display: none !important;
-}
-
-
 .property {
     display: table;
     width: 100%;
@@ -654,7 +650,16 @@ hr {
     margin-left: 10px;
 }
 
-.text label, .url label, .number label, .textarea label, .xy label, .wh label, .rgb label, .xyz label,.pyr label, .dropdown label, .gen label {
+.property.range label{
+    padding-bottom: 3px;
+}
+.property.range input[type=number]{
+    margin-left: 0.8rem;
+    width: 5.4rem;
+    height: 1.8rem;
+}
+
+.text label, .url label, .number label, .textarea label, .xy label, .wh label, .rgb label, .xyz label, .pyr label, .dropdown label, .gen label {
     float: left;
     margin-left: 1px;
     margin-bottom: 3px;
@@ -668,6 +673,10 @@ hr {
     margin-top: -2px;
 }
 
+.xy > div, .wh > div, .xyz > div, .pyr > div, .gen > div {
+    clear: both;
+}
+
 .number > input {
     clear: both;
     float: left;
@@ -676,9 +685,6 @@ hr {
     clear: both;
     float: left;
 }
-.xy > div, .wh > div, .xyz > div, .pyr > div, .gen > div {
-    clear: both;
-}
 
 .dropdown {
     position: relative;
@@ -771,6 +777,29 @@ hr {
     color: #252525;
 }
 
+.multiselect {
+    position: relative;
+}
+.select-box {
+    position: absolute;
+}
+.select-box select {
+    font-family: FiraSans-SemiBold;
+    font-size: 15px;
+    color: #afafaf;
+    background-color: #252525;
+    border: none;
+    height: 28px;
+    width: 107px;
+    text-align-last: center;
+}
+.over-select {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+}
 
 div.refresh {
     box-sizing: border-box;
@@ -810,15 +839,6 @@ div.refresh input[type="button"] {
     display: none !important;
 }
 
-#property-color-control1 {
-    display: table-cell;
-    float: none;
-}
-
-#property-color-control1 + label  {
-    border-left: 20px transparent solid;
-}
-
 .rgb label {
     float: left;
     margin-top: 10px;
@@ -883,23 +903,23 @@ div.refresh input[type="button"] {
     font-family: FiraSans-SemiBold;
     font-size: 12px;
 }
-.tuple .red + label, .tuple .x + label, .tuple .pitch + label {
+.tuple .red + label, .tuple .x + label, .tuple .pitch + label, .tuple .width + label {
     color: #e2334d;
 }
-.tuple .green + label, .tuple .y + label, .tuple .yaw + label {
+.tuple .green + label, .tuple .y + label, .tuple .yaw + label, .tuple .height + label {
     color: #1ac567;
 }
 .tuple .blue + label, .tuple .z + label, .tuple .roll + label {
     color: #1080b8;
 }
 
-.tuple .red:focus, .tuple .x:focus, .tuple .pitch:focus {
+.tuple .red:focus, .tuple .x:focus, .tuple .pitch:focus, .tuple .width:focus {
     outline-color: #e2334d;
 }
-.tuple .green:focus, .tuple .y:focus, .tuple .yaw:focus {
+.tuple .green:focus, .tuple .y:focus, .tuple .yaw:focus, .tuple .height:focus {
     outline-color: #1ac567;
 }
-tuple, .blue:focus, .tuple .z:focus, .tuple .roll:focus {
+.tuple .blue:focus, .tuple .z:focus, .tuple .roll:focus {
     outline-color: #1080b8;
 }
 
@@ -924,6 +944,37 @@ tuple, .blue:focus, .tuple .z:focus, .tuple .roll:focus {
     float: left;
 }
 
+.property.texture {
+    display: block;
+}
+.property.texture input{
+    margin: 0.4rem 0;
+}
+.texture-image img{
+    padding: 0;
+    margin: 0;
+    width: 100%;
+    height: 100%;
+    display: none;
+}
+.texture-image {
+    display: block;
+    position: relative;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 100% 100%;
+    margin-top: 0.4rem;
+    height:128px;
+    width: 128px;
+    background-image: url('data:image/png;base64,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');
+}
+.texture-image.no-texture {
+    background-image: url('data:image/png;base64,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');
+}
+.texture-image.no-preview {
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAIAAABMXPacAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAA8sSURBVHhe7Z3rbxXFG8d7B9SWthRabLmIYlHkIEXKJdXYBEXxHtEXprwxxsR3/jG+8PLCaDDGeAkmKsTEoCUVKoVCA6WNtLS2UEUKBSy0tKW/D+eZM9nu7tmz55z+mC2Zz4tl9tk5c2bnO/PMM2dnS+6nn36aYzFH7vvvv6+SFhMoAY4fPy7nljvG448/zjFPTiymsAIYxgpgGCuAYawAhrECGMYKYBgrgGGsAIaxAhjGCmAYK4BhrACGsQIYxgpgGCuAYawAhrECGMYKYBgrgGGsAIaxAhjmLhQgPz+/pKRk3rx56jzaRHFf0ObNmxctWkTi7Nmzp0+fFqNm+/btRUVFP/30kzp3UFtbu27duqVLl+bl3e5Y169f7+rqam1tvXnzpmSIFNHdF1RTU7M6TkNDQ0FBgbImWLVqFZfUSQKyvfzyy88991x1dfXU1NSFCxdGRkbuueeeurq6pqam0tJSlS96RNcFSQvSo9V5IC+88MIDDzwwOjr6448/fvTRR19++eVnn322Z8+ev//+u7i4+M0331ywYIHKGjGiK8Aff/zBMRaL5ebmiiUZjz322MqVK/Ez33333ZkzZxgBYh8eHt67d++lS5do/W3btokxakRXANxIf38/3mPNmjXKlARxpkeOHKGtxaIZHx9vaWkhwfTg9WZRILoCgIQG0r7JKC8vlxm7s7NTLC6YyW/cuFFYWIiPUqYoEWkB+vr6cOJLlizBwyiTB2l9vA0xj1hcTE9PDw4OkiA6EkukiLQAcOzYMY4bN26UUy8LFy7k+O+//8qpL1euXOF43333yWmkiLoATKqEQwSmlZWVyjQTIiWOwZG+npYjSNQFwIG0tbWRqK+vF4sL1r0qlZzJyUmOYXLeeaIuAHR3d+PfmQbE27hgguUY3LgS/0RzHMwBAei/R48ezcvL8x0EOCiOxEJy6osoJ1JFjTkgAHR0dExMTBDLexe0EvsTKQUMgsWLF3OUWChqzA0BGARoQBN7wyHWa6Ojo1x6+OGHlWkmaEOoeuvWrXPnzilTlJgbAgBeiEEQi8W8Pf3kyZMct27d6v0JGsf15JNPkmA5lmyhYJY5IwAenNmYBW1RUZEyJSBMYiYoLi7etWtXWVmZsubkkHPHjh2EsCjX3NysrBFjzggANDSeRJ04wEF9//33rLYqKip27979yiuvNDY2Pvvss2+//TZ+ieBn//79V69eVbkjRv6WLVv4hxW/nEcB+iyuo6ura3x8XJnicIqToV8zGpgSlDXO2NhYZ2cnV+WnIVZtTLxEn+fPn9+3b180p9+qqiqOd9ub8ihH67M8xuPT65mf1YXocXe+KY+PGhoa6unp4Rjl1tfcbQLMOawAhrECGMYKYBgrgGGsAIaxAhjGCmAYK4BhrACGyfy3oNdff72mpkadJLh27Vpvb29LS8vExIRYdu7c6dpLOz09ffPmTXLypadOnVLWnJzGxsZYLKZOPHR0dDQ3N7/33nv5+fkff/yx7/PFBQsWvPPOO5T/4YcfLly4sKmpaXBw8Ntvv5Wr7777bsAOUbINDw+Th5IpX1kTyGcPHz7c2tqqTHG4NW7wzz//9N2tHczs/BY0NjZ2PQFVLy4uXr9+/UsvvaQuJxgfH1eZ4tkKCwsrKiq2b9/u3XbozOkEzaamps6ePUueZHvcsOfl5ZFHtkH4oorzQOFU7MqVKzS0S6fy8nKxeDvckiVLOGbza2u22yW/+eYbOo46ie9Te/XVV5ctW7Z8+fK//vpLWXNyfvjhB2ctaaaGhoYNGzZs3bq1q6tLWeP88ssvdCh14oFLDz30EA3tuxFRhBGRkvHJJ5+olB8XLlxg6NCs/f39ypRo93/++Wfp0qWMP+fuCnna7N2TGp5ZngMQ48iRIyQefPBBsfhy69atgwcPjo6OlpSU+G42SQaicv80tPfBJBbslBwsQDBDQ0McpVk1CMBAx2HyFa79jUhFfeRTmTH7k7DsEky5DxBPffHiRRKytS0kNMTAwAAN4d0tigX7+fPnfaeHkEjlxbFoEIAvlTFRXV0tRhBnNTIy4hwT6TL7Asgz2zBvBUlO/K+chkQc1IoVK+RUI5YzZ87IaWZIX3buMpIJAP+Jroxv5zQgOmW52WL2BZDtyv/995+cJkMeHHJX6T42wcPgZ5gJ1HkCsWTjf4C+TCuXlpZqFyctLl6etpZpIH5F6eScAjNglgVg+n3iiSdIuHoiI/f2S19xamtrN23a9NprrzEVt7W1uSKWtWvXPu2HuhzfHkF/pFfef//9ypSTQxoLPi3lw3dV3Ez4UnU5/nicJpZuBAigvTzfyyU9DWQfAkG2UdCLL76oPeC99947f/58Et3d3cQMYhTk0b8TejGhfXt7uzpPgCfxuhf49ddfVSonp6enhyhr1apVeHyxkOYYxv8QJauUA9yaXpEQCKEH8zAJThGA1pd7lLamM0mCPNhl73vGZDsCGK10FgGffvnyZZYqP//8s7qcgCY7EUemMvz+F198ceDAAaZiyaA5duwYixov6nIcaWhpdEHSfIucBqCKm4m8hSDIBhHp3URoMgHEr9wefHoaYChw71qbjMlWgK+//pp1o/DBBx98/vnnLBfp3epyAmI4ujDs3bv3t99+I/J5/vnnfd++4/7pj17U5TjohzsuKysTL8yRNM5HwqpgVHEzce7KoYlpUynZO83qaYAOxzGbFYCQrQAsXOkXgrc7+4IYuA5WwgHvvaSEVuMoKy859vb23r6QNbQ+zof2Je2cAAQ9DYhCWU4AMPtRUBhko2B9fX1aiwAnEu3IakCOYfxPSFgN4HnwP7h7xHA6GT0NyFScZQgEZgRgimYyKCwsrKurU6Y0weHIbwO0FEfGX5bxuBPp8kR0jAPX22d8EY2Oa6qqqiJt3gVlzKFDhzjGYjFaUCzpgs/BGzQ2NnJkWg7pAMMg8Y/8Wul1Mn19fUiONtl3fzAmAP0XN8IgcM0EGzZs2JkElSOBTAMsLDiGnwBUWR74XpUjvuxiJS/TgK8AdBpUz34CAGMCgPy27hoEdC5Zr3lRORIQ8krYMzExMTAwIMaUqLI8iE/XyCCgj+NnxKLRoWf2/gcyfyBDGDNv3jw6csCP70C0QPvSUq6tzgKelK5EUxJZElazlFMX/PB6efkIJXsD0IKCgsrKSuclmpi1t6S9uBy6lJzMy1My5ae892DExdn/R8wYd+fu6DmHFcAwVgDDWAEMYwUwjBXAMFYAw1gBDGMFMIwVwDBp/xSxZs2aqqqqsbGxw4cPK1PiD2W0t7cne0K9ePHitWvXXr9+Xf4aKFRWVj7yyCMkKIfSxKgpLS1lpT4yMqIrxinGU6dOBf95OGH16tXV1dWuSmrkmbs6iTM5OXnjxo2enh7560Oap+O7MZz7AVzIF6kTPwI+m+FPEbT1+vXrN2/eXFJSokzxfXAYH330UXXuYd26dWRw/uoZi8WwgPPZukYKdO5vJI0FDdR5IL6V1KxYseL2FzvYuHFjQ0NDU1OTa7uRXFUnftTU1EieZKh8yUlPALott3T58mXSiC9GkJ/mA/aDyo1JNsjPz6fdr169OjU15SxnVqioqCgrK/NW0oXefrF///4DBw5QN2r1zDPPFBcXqxyhOXnypBTlReVITnoCyP20tLS4Gq6/v58hvGjRIudfi9HIrqnR0VG9jWfZsmXz58/nnoeGhiQt9llBVxIXFCCA3n7R3d3d0dFBY3EXRUVF4hjTAq8oRXlROZKTtgATExN9fX0DAwMyGsQ+PT0te3V8b1iMztqIpbe3l6JkNIh9VtCVpEGdlUyJPOjnI3J6Z0hDALkZbozuL63pbG6vReMSQFqcEcOACPhUZoj/kUrKPonwhcvTlTDbimeRNASQt1mkp9N5uUPn+y2Dg4M4Ge7f1eOQTR4taf+zcuVKfI6UI5sbli9f7pyfs0GaWwpnmLoqGYxswwr/dHNWSEMA7o37kfdecK+4b+luchUv5NudnS0iiEU/Rmfg5+XlBb/QEZ7gSjoh0CpPwOy1adMmQrVz58653tgJAz1MFTQT79+w8xJWACZSvobeoWN2r9MXAWSfmkb8u8v/UIjuaOk6igCkrYMrqXnqqad2JyAA3bZtG8N037593n2VKamvr1cFzaS2tlblSE5YAeQenLvPpJc57w0ng0thYaL3u0mLcGN6Bwf+p7CwkOmRfiqWixcv4rsIqLP3QmEqqRkeHqZWQK8njMH1U+233nor5FLDCcs3KcpFypckIOz2dLkHhiqrG7EAlZYmlqAb6Oksaoj65W+6iWOhG+pdU1IOGjjLQSGGF5nlD1BmTMhKCq2trXpcAkOT5RuV37Fjx1dffaWs4Whvb3f9DbvwhBoBdE8aiASr5y0O5B0j519MlVvSDt21/iooKBCPxFEVEYcGwhhmwAYgrUwiZSV9YUQeOnQI31VVVZXWe4NZEkoAqT3tyIrRibwQ6Ww4Qho6mvgTmoNG4ZZ0/EO70/cZ7+rzDojc+VTGe3VBur+3kvq/MInnCgINqD+JDLxQxqQWIDc3VzoyHYSB5uT333/HfUtDS2agCYhqWN8CpxKwyiVpI/XhmUhQJBkyQz7rrWRbWxvu3lXJZMhw0RW+A6QWQLoz9+DyoYI3hmFlzxHN+CAJp/+RAMk5SWqyjIXE/ySrJOsyjikLp+OzaiEKohxl+v+TWgCpt2+rgTfOu3TpEoENrQ/OcBP/w0RHyMGUKxYnrAbod84IyheCa/K4YH4KrqSvAK6i6urq3njjDcbu6dOnXTVUOWZCf1KX48opqweZOwNIEQVp/6PXTS7w77SyDHC9C5NeT0RBorOz0+V/5PcWL5OTk0hFkEq2EydOKKsHJlWVcoCjl8KTVVJUd1XStyjmp4MHD6qTBLt27VIpB3v27NEDZUMcSbugbrhBdeJHij9dTDyAvFQrWaMQXyLS+Pj4tWvX9PAn/kV5hgJhJXYxMgLIQDm+u3SBeZgOKJM2/YuhwJSoN+SWlJTQiJTphTZlzRlQSXBWkjUwsan6cBy+iLD9+PHjzc3Nzv22RLQqhwfEphBukx6mTH6wEEn2kOru/NPFc4gMn4hZZhcrgGGsAIaxAhjGCmAYK4BhrACGsQIYxgpgGCuAYawAhrECGMYKYBgrgGGsAIaxAhjGCmAYK4BhrACGsQIYxgpgGCuAYdS2FIsp7AgwSk7O/wCqCi/+JioQYgAAAABJRU5ErkJggg==');
+}
+
 .two-column {
     display: table;
     width: 100%;
@@ -934,12 +985,11 @@ tuple, .blue:focus, .tuple .z:focus, .tuple .roll:focus {
 }
 
 #properties-list fieldset .two-column {
-    padding-top:21px;
+    padding-top: 10px;
     display: flex;
 }
 
-#properties-list .two-column  fieldset {
-    /*display: table-cell;*/
+#properties-list .two-column fieldset {
     width: 50%;
     margin: 0;
     padding: 0;
@@ -947,22 +997,30 @@ tuple, .blue:focus, .tuple .z:focus, .tuple .roll:focus {
     box-shadow: none;
 }
 
+#properties-list .two-column .column {
+    position: relative;
+    top: -10px;
+}
+
 #properties-list .two-column  fieldset legend {
-    display: table;
     width: 100%;
     margin: 21px -21px 0 -21px;
-    padding: 0 0 0 21px;
+    padding: 16px 0 0 21px;
     font-family: Raleway-Regular;
     font-size: 12px;
     color: #afafaf;
-    height: 28px;
+    height: 10px;
     text-transform: uppercase;
     outline: none;
 }
 
+#properties-list .two-column + .property {
+    margin-top: 6px;
+}
+
 fieldset .checkbox-sub-props {
      margin-top: 0;
- }
+}
 
 fieldset .checkbox-sub-props .property:first-child {
     margin-top: 0;
@@ -1009,6 +1067,10 @@ textarea:enabled[scrolling="true"]::-webkit-resizer {
 }
 
 
+body#entity-list-body {
+    padding-bottom: 0;
+}
+
 #entity-list-header {
     margin-bottom: 36px;
 }
@@ -1045,45 +1107,11 @@ textarea:enabled[scrolling="true"]::-webkit-resizer {
     position: relative; /* New positioning context. */
 }
 
-#footer-text {
-    float: right;
-    padding-top: 12px;
-    padding-right: 22px;
-}
-
-#entity-list-footer {
-    padding-top: 9px;
-}
-
 #filter-area {
     padding-right: 168px;
     padding-bottom: 24px;
 }
 
-.multiselect {
-    position: relative;
-}
-.select-box {
-    position: absolute;
-}
-.select-box select {
-    font-family: FiraSans-SemiBold;
-    font-size: 15px;
-    color: #afafaf;
-    background-color: #252525;
-    border: none;
-    height: 28px;
-    width: 107px;
-    text-align-last: center;
-}
-.over-select {
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-}
-
 #filter-type-select-box select {
     border-radius: 14.5px;
 }
@@ -1174,6 +1202,32 @@ textarea:enabled[scrolling="true"]::-webkit-resizer {
     display: none;
 }
 
+#entity-list-footer {
+    padding-top: 9px;
+}
+
+#footer-text {
+    float: right;
+    padding-top: 12px;
+    padding-right: 22px;
+}
+
+input[type=button]#export {
+    height: 38px;
+    width: 180px;
+}
+
+#no-entities {
+    display: none;
+    position: absolute;
+    top: 80px;
+    padding: 12px;
+    font-family: FiraSans-SemiBold;
+    font-size: 15px;
+    font-style: italic;
+    color: #afafaf;
+}
+
 #entity-table-scroll {
     /* Height is set by JavaScript. */
     width: 100%;
@@ -1391,63 +1445,51 @@ th#entity-hasScript {
     border-right: 1px solid #575757;
 }
 
-
-#no-entities {
-    display: none;
-    position: absolute;
-    top: 80px;
-    padding: 12px;
-    font-family: FiraSans-SemiBold;
-    font-size: 15px;
-    font-style: italic;
-    color: #afafaf;
+#properties-base {
+    border-top: none !important;
+    box-shadow: none !important;
+    margin-bottom: 5px !important;
+    top: -15px;
 }
 
-
-#properties-list #properties-header {
-    display: table-row;
-    height: 28px;
-    border-top: none;
-    box-shadow: none;
-}
-
-#properties-header .property {
-    display: table-cell;
-    vertical-align: middle;
-}
-#properties-header .checkbox {
-    position: relative;
-    top: -1px;
-}
-
-#properties-header #type-icon {
+#properties-base #property-type-icon {
     font-family: hifi-glyphs;
     font-size: 31px;
     color: #00b4ef;
     margin: -4px 12px -4px -2px;
     width: auto;
     display: none;
-    vertical-align: middle;
 }
 
-#properties-header #property-type {
+#properties-base #property-type {
     padding: 5px 24px 5px 0;
     border-right: 1px solid #808080;
-    height: 100%;
     width: auto;
     display: inline-block;
+}
+
+#properties-base #div-property-locked {
+    position: absolute;
+    top: 6px;
+    right: 140px;
+    display: table-cell;
     vertical-align: middle;
 }
 
-#properties-header .checkbox:last-child {
-    padding-left: 24px;
+#properties-base #div-property-visible {
+    position: absolute;
+    top: 26px;
+    right: 20px;
+    display: table-cell;
+    vertical-align: middle;
 }
 
-#properties-header .checkbox label {
+#properties-base #div-property-locked label,
+#properties-base #div-property-visible label {
     background-position-y: 1px;
 }
 
-#properties-header .checkbox label span {
+#properties-base .checkbox label span {
     font-family: HiFi-Glyphs;
     font-size: 20px;
     padding-right: 6px;
@@ -1456,15 +1498,10 @@ th#entity-hasScript {
     top: -4px;
 }
 
-#properties-header input[type=checkbox]:checked + label span {
+#properties-base input[type=checkbox]:checked + label span {
     color: #ffffff;
 }
 
-#properties-header + hr {
-    margin-top: 12px;
-}
-
-
 #id label {
     width: 24px;
 }
@@ -1476,434 +1513,52 @@ th#entity-hasScript {
     background-color: #00b4ef;
 }
 
-input#property-parent-id {
-    width: 340px;
-}
-
-input#dimension-rescale-button {
+input#property-scale-button-rescale {
     min-width: 50px;
     margin-left: 6px;
 }
-input#reset-to-natural-dimensions {
+input#property-scale-button-reset {
     margin-right: 0;
 }
 
-#animation-fps {
-    margin-top: 48px;
-}
-
-#userdata-clear,
-#materialdata-clear {
+#property-userData-button-clear,
+#property-materialData-button-clear {
     margin-bottom: 10px;
 }
 
-
-#static-userdata,
-#static-materialData {
+#property-userData-static,
+#property-materialData-static {
     display: none;
     z-index: 99;
     position: absolute;
     width: 96%;
-    padding-left:1%;
-    margin-top:5px;
-    margin-bottom:10px;
+    padding-left: 1%;
+    margin-top: 5px;
+    margin-bottom: 10px;
     background-color: #2e2e2e;
 }
 
-#userdata-saved,
-#materialData-saved {
-    margin-top:5px;
-    font-size:16px;
-    display:none;
+#property-userData-saved,
+#property-materialData-saved {
+    margin-top: 5px;
+    font-size: 16px;
+    display: none;
 }
 
-#properties-list #collision-info > fieldset:first-of-type {
-    border-top: none !important;
-    box-shadow: none;
+#div-property-serverScripts-status label {
+    position: relative;
+    top: 8px;
+}
+#property-serverScripts-status {
+    position: relative;
+    top: 5px;
+    right: -20px;
+}
+
+#div-property-collisionSoundURL[style*="display: none"] + .property {
     margin-top: 0;
 }
 
-#properties-list {
-    display: flex;
-    flex-direction: column;
-}
-
-/* -----   Order of Menu items for Primitive   ----- */
-/* Entity Menu classes are specified by selected entity
-    within entityProperties.js
-*/
-#properties-list.ShapeMenu #general,
-#properties-list.BoxMenu #general,
-#properties-list.SphereMenu #general {
-    order: 1;
-}
-
-#properties-list.ShapeMenu #collision-info,
-#properties-list.BoxMenu #collision-info,
-#properties-list.SphereMenu #collision-info {
-    order: 2;
-}
-
-#properties-list.ShapeMenu #physical,
-#properties-list.BoxMenu #physical,
-#properties-list.SphereMenu #physical {
-    order: 3;
-}
-
-#properties-list.ShapeMenu #spatial,
-#properties-list.BoxMenu #spatial,
-#properties-list.SphereMenu #spatial {
-    order: 4;
-}
-
-#properties-list.ShapeMenu #behavior,
-#properties-list.BoxMenu #behavior,
-#properties-list.SphereMenu #behavior {
-    order: 5;
-}
-
-#properties-list.ShapeMenu #hyperlink,
-#properties-list.BoxMenu #hyperlink,
-#properties-list.SphereMenu #hyperlink {
-    order: 6;
-}
-
-#properties-list.ShapeMenu #material,
-#properties-list.BoxMenu #material,
-#properties-list.SphereMenu #material,
-#properties-list.ShapeMenu #light,
-#properties-list.BoxMenu #light,
-#properties-list.SphereMenu #light,
-#properties-list.ShapeMenu #model,
-#properties-list.BoxMenu #model,
-#properties-list.SphereMenu #model,
-#properties-list.ShapeMenu #zone,
-#properties-list.BoxMenu #zone,
-#properties-list.SphereMenu #zone,
-#properties-list.ShapeMenu #text,
-#properties-list.BoxMenu #text,
-#properties-list.SphereMenu #text,
-#properties-list.ShapeMenu #image,
-#properties-list.BoxMenu #image,
-#properties-list.SphereMenu #image,
-#properties-list.ShapeMenu #web,
-#properties-list.BoxMenu #web,
-#properties-list.SphereMenu #web {
-    display: none;
-}
-
-/* -----   ParticleEffectMenu   ----- */
-#properties-list.ParticleEffectMenu #general {
-    order: 1;
-}
-#properties-list.ParticleEffectMenu #collision-info {
-    order: 2;
-}
-#properties-list.ParticleEffectMenu #physical {
-    order: 3;
-}
-#properties-list.ParticleEffectMenu #spatial {
-    order: 4;
-}
-#properties-list.ParticleEffectMenu #behavior {
-    order: 5;
-}
-
-/* items to hide    */
-#properties-list.ParticleEffectMenu #material,
-#properties-list.ParticleEffectMenu #base-color-section,
-#properties-list.ParticleEffectMenu #hyperlink,
-#properties-list.ParticleEffectMenu #light,
-#properties-list.ParticleEffectMenu #model,
-#properties-list.ParticleEffectMenu #shape-list,
-#properties-list.ParticleEffectMenu #text,
-#properties-list.ParticleEffectMenu #web,
-#properties-list.ParticleEffectMenu #image,
-#properties-list.ParticleEffectMenu #zone {
-    display: none;
-}
-
-/* -----   Order of Menu items for Light   ----- */
-#properties-list.LightMenu #general {
-    order: 1;
-}
-#properties-list.LightMenu #light {
-    order: 2;
-}
-#properties-list.LightMenu #physical {
-    order: 3;
-}
-#properties-list.LightMenu #spatial {
-    order: 4;
-}
-#properties-list.LightMenu #behavior {
-    order: 5;
-}
-#properties-list.LightMenu #collision-info {
-    order: 6;
-}
-#properties-list.LightMenu #hyperlink {
-    order: 7;
-}
-/* sections to hide    */
-#properties-list.LightMenu #material,
-#properties-list.LightMenu #model,
-#properties-list.LightMenu #zone,
-#properties-list.LightMenu #text,
-#properties-list.LightMenu #image,
-#properties-list.LightMenu #web {
-    display: none;
-}
-/* items to hide */
-#properties-list.LightMenu #shape-list,
-#properties-list.LightMenu #base-color-section {
-    display: none
-}
-
-
-/* -----   Order of Menu items for Model   ----- */
-#properties-list.ModelMenu #general {
-    order: 1;
-}
-#properties-list.ModelMenu #model {
-    order: 2;
-}
-#properties-list.ModelMenu #collision-info {
-    order: 3;
-}
-#properties-list.ModelMenu #physical {
-    order: 4;
-}
-#properties-list.ModelMenu #spatial {
-    order: 5;
-}
-#properties-list.ModelMenu #behavior {
-    order: 6;
-}
-#properties-list.ModelMenu #hyperlink {
-    order: 7;
-}
-/* sections to hide    */
-#properties-list.ModelMenu #material,
-#properties-list.ModelMenu #light,
-#properties-list.ModelMenu #zone,
-#properties-list.ModelMenu #text,
-#properties-list.ModelMenu #image,
-#properties-list.ModelMenu #web {
-    display: none;
-}
-/* items to hide */
-#properties-list.ModelMenu #shape-list,
-#properties-list.ModelMenu #base-color-section {
-    display: none
-}
-
-
-/* -----   Order of Menu items for Zone   ----- */
-#properties-list.ZoneMenu #general {
-    order: 1;
-}
-#properties-list.ZoneMenu #zone {
-    order: 2;
-}
-#properties-list.ZoneMenu #physical {
-    order: 3;
-}
-#properties-list.ZoneMenu #spatial {
-    order: 4;
-}
-#properties-list.ZoneMenu #behavior {
-    order: 5;
-}
-#properties-list.ZoneMenu #collision-info {
-    order: 6;
-}
-#properties-list.ZoneMenu #hyperlink {
-    order: 7;
-}
-/* sections to hide    */
-#properties-list.ZoneMenu #material,
-#properties-list.ZoneMenu #light,
-#properties-list.ZoneMenu #model,
-#properties-list.ZoneMenu #text,
-#properties-list.ZoneMenu #image,
-#properties-list.ZoneMenu #web {
-    display: none;
-}
-/* items to hide */
-#properties-list.ZoneMenu #shape-list,
-#properties-list.ZoneMenu #base-color-section {
-    display: none
-}
-
-
-/* -----   Order of Menu items for Image   ----- */
-#properties-list.ImageMenu #general {
-    order: 1;
-}
-#properties-list.ImageMenu #image {
-    order: 2;
-}
-#properties-list.ImageMenu #collision-info {
-    order: 3;
-}
-#properties-list.ImageMenu #physical {
-    order: 4;
-}
-#properties-list.ImageMenu #spatial {
-    order: 5;
-}
-#properties-list.ImageMenu #behavior {
-    order: 6;
-}
-#properties-list.ImageMenu #hyperlink {
-    order: 7;
-}
-/* sections to hide    */
-#properties-list.ImageMenu #material,
-#properties-list.ImageMenu #light,
-#properties-list.ImageMenu #model,
-#properties-list.ImageMenu #zone,
-#properties-list.ImageMenu #web,
-#properties-list.ImageMenu #text {
-    display: none;
-}
-/* items to hide */
-#properties-list.ImageMenu #shape-list,
-#properties-list.ImageMenu #base-color-section {
-    display: none;
-}
-
-
-/* -----   Order of Menu items for Web   ----- */
-#properties-list.WebMenu #general {
-    order: 1;
-}
-#properties-list.WebMenu #web {
-    order: 2;
-}
-#properties-list.WebMenu #collision-info {
-    order: 3;
-}
-#properties-list.WebMenu #physical {
-    order: 4;
-}
-#properties-list.WebMenu #spatial {
-    order: 5;
-}
-#properties-list.WebMenu #behavior {
-    order: 6;
-}
-#properties-list.WebMenu #hyperlink {
-    order: 7;
-}
-/* sections to hide    */
-#properties-list.WebMenu #material,
-#properties-list.WebMenu #light,
-#properties-list.WebMenu #model,
-#properties-list.WebMenu #zone,
-#properties-list.WebMenu #image,
-#properties-list.WebMenu #text {
-    display: none;
-}
-/* items to hide */
-#properties-list.WebMenu #shape-list,
-#properties-list.WebMenu #base-color-section {
-    display: none;
-}
-
-
-
-/* -----   Order of Menu items for Text   ----- */
-#properties-list.TextMenu #general {
-    order: 1;
-}
-#properties-list.TextMenu #text {
-    order: 2;
-}
-#properties-list.TextMenu #collision-info {
-    order: 3;
-}
-#properties-list.TextMenu #physical {
-    order: 4;
-}
-#properties-list.TextMenu #spatial {
-    order: 5;
-}
-#properties-list.TextMenu #behavior {
-    order: 6;
-}
-#properties-list.TextMenu #hyperlink {
-    order: 7;
-}
-/* sections to hide    */
-#properties-list.TextMenu #material,
-#properties-list.TextMenu #light,
-#properties-list.TextMenu #model,
-#properties-list.TextMenu #zone,
-#properties-list.TextMenu #image,
-#properties-list.TextMenu #web {
-    display: none;
-}
-/* items to hide */
-#properties-list.TextMenu #shape-list,
-#properties-list.TextMenu #base-color-section {
-    display: none
-}
-
-/* -----   Order of Menu items for Material   ----- */
-#properties-list.MaterialMenu #general {
-    order: 1;
-}
-#properties-list.MaterialMenu #material {
-    order: 2;
-}
-#properties-list.MaterialMenu #spatial {
-    order: 3;
-}
-#properties-list.MaterialMenu #hyperlink {
-    order: 4;
-}
-#properties-list.MaterialMenu #behavior {
-    order: 5;
-}
-
-/* sections to hide    */
-#properties-list.MaterialMenu #physical,
-#properties-list.MaterialMenu #collision-info,
-#properties-list.MaterialMenu #model,
-#properties-list.MaterialMenu #light,
-#properties-list.MaterialMenu #zone,
-#properties-list.MaterialMenu #text,
-#properties-list.MaterialMenu #web,
-#properties-list.MaterialMenu #image {
-    display: none;
-}
-/* items to hide */
-#properties-list.MaterialMenu #shape-list,
-#properties-list.MaterialMenu #base-color-section {
-    display: none
-}
-
-
-/* Currently always hidden */
-#properties-list #polyvox {
-    display: none;
-}
-
-.skybox-section {
-    display: none;
-}
-
-input[type=button]#export {
-    height: 38px;
-    width: 180px;
-}
-
-body#entity-list-body {
-    padding-bottom: 0;
-}
-
 .context-menu {
     display: none;
     position: fixed;
diff --git a/scripts/system/html/entityProperties.html b/scripts/system/html/entityProperties.html
index 8b27efa1fe..03b034fc83 100644
--- a/scripts/system/html/entityProperties.html
+++ b/scripts/system/html/entityProperties.html
@@ -1,4 +1,4 @@
-<!--
+<!--
 //  entityProperties.html
 //
 //  Created by Ryan Huffman on 13 Nov 2014
@@ -20,882 +20,14 @@
     <script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script>
     <script type="text/javascript" src="js/eventBridgeLoader.js"></script>
     <script type="text/javascript" src="js/spinButtons.js"></script>
+    <script type="text/javascript" src="js/underscore-min.js"></script>
     <script type="text/javascript" src="js/entityProperties.js"></script>
     <script src="js/jsoneditor.min.js"></script>
 </head>
 
 <body onload='loaded();'>
     <div id="properties-list">
-
-        <fieldset id="properties-header">
-            <div id="type" class="property value">
-                <span id="type-icon"></span><label id="property-type"><i>No selection</i></label>
-            </div>
-            <div class="property checkbox">
-                <input type="checkbox" id="property-locked">
-                <label for="property-locked"><span>&#xe006;</span>&nbsp;Locked</label>
-            </div>
-            <div class="property checkbox">
-                <input type="checkbox" id="property-visible">
-                <label for="property-visible"><span>&#xe007;</span>&nbsp;Visible</label>
-            </div>
-        </fieldset>
-
-        <fieldset id="general" class="major">
-            <div class="shape-group shape-section property dropdown" id="shape-list">
-                <label for="property-shape">Shape</label>
-                <select name="SelectShape" id="property-shape">
-                    <option value="Cube">Box</option>
-                    <option value="Sphere">Sphere</option>
-                    <option value="Tetrahedron">Tetrahedron</option>
-                    <option value="Octahedron">Octahedron</option>
-                    <option value="Icosahedron">Icosahedron</option>
-                    <option value="Dodecahedron">Dodecahedron</option>
-                    <option value="Hexagon">Hexagon</option>
-                    <option value="Triangle">Triangle</option>
-                    <option value="Octagon">Octagon</option>
-                    <option value="Cylinder">Cylinder</option>
-                    <option value="Cone">Cone</option>
-                    <option value="Circle">Circle</option>
-                    <option value="Quad">Quad</option>
-                </select>
-            </div>
-            <div class="property text">
-                <label for="property-name">Name</label>
-                <input type="text" id="property-name">
-            </div>
-            <div class="physical-group color-section property rgb fstuple" id="base-color-section">
-                <div class="color-picker" id="property-color-control2"></div>
-                <label>Entity color</label>
-                <div class="tuple">
-                    <div><input type="number" class="red" id="property-color-red"><label for="property-color-red">Red:</label></div>
-                    <div><input type="number" class="green" id="property-color-green"><label for="property-color-green">Green:</label></div>
-                    <div><input type="number" class="blue" id="property-color-blue"><label for="property-color-blue">Blue:</label></div>
-                </div>
-            </div>
-        </fieldset>
-
-        <fieldset id="collision-info" class="major">
-            <legend class="section-header"> Collision<span class=".collapse-icon">M</span> </legend>
-            <fieldset class="minor">
-                <div class="behavior-group property checkbox">
-                    <input type="checkbox" id="property-collisionless">
-                    <label for="property-collisionless">Collisionless</label>
-                </div>
-                <div class="behavior-group property checkbox">
-                    <input type="checkbox" id="property-dynamic">
-                    <label for="property-dynamic">Dynamic</label>
-                </div>
-            </fieldset>
-            <fieldset class="minor">
-                <div class="behavior-group two-column">
-                    <fieldset class="column">
-                        <legend class="sub-section-header">
-                            Collides With
-                        </legend>
-                        <div class="checkbox-sub-props">
-                            <div class="property checkbox">
-                                <input type="checkbox" id="property-collide-static">
-                                <label for="property-collide-static">Static entities</label>
-                            </div>
-                            <div class="property checkbox">
-                                <input type="checkbox" id="property-collide-dynamic">
-                                <label for="property-collide-dynamic">Dynamic entities</label>
-                            </div>
-                            <div class="property checkbox">
-                                <input type="checkbox" id="property-collide-kinematic">
-                                <label for="property-collide-kinematic">Kinematic entities</label>
-                            </div>
-                            <div class="property checkbox">
-                                <input type="checkbox" id="property-collide-myAvatar">
-                                <label for="property-collide-myAvatar">My avatar</label>
-                            </div>
-                            <div class="property checkbox">
-                                <input type="checkbox" id="property-collide-otherAvatar">
-                                <label for="property-collide-otherAvatar">Other avatars</label>
-                            </div>
-                        </div>
-                    </fieldset>
-                    <fieldset class="column">
-                        <legend class="sub-section-header">
-                            Grabbing
-                        </legend>
-                        <div class="checkbox-sub-props">
-                            <div class="property checkbox">
-                                <input type="checkbox" id="property-grabbable">
-                                <label for="property-grabbable">Grabbable</label>
-                            </div>
-                            <div class="property checkbox">
-                                <input type="checkbox" id="property-triggerable">
-                                <label for="property-triggerable">Triggerable</label>
-                            </div>
-                            <div class="property checkbox">
-                                <input type="checkbox" id="property-cloneable">
-                                <label for="property-cloneable">Cloneable</label>
-                            </div>
-                            <div class="property checkbox">
-                                <input type="checkbox" id="property-grab-follows-controller">
-                                <label for="property-grab-follows-controller">Follow Controller</label>
-                            </div>
-                        </div>
-                    </fieldset>
-
-                    <fieldset class="column" id="group-cloneable-group" style="display:none;">
-                        <legend class="sub-section-header">
-                            <span>Cloneable Settings</span>
-                        </legend>
-                        <fieldset class="minor">
-                            <div><label>Clone Lifetime</label><input type="number" data-user-data-type="cloneLifetime" id="property-cloneable-lifetime"></div>
-                        </fieldset>
-                        <fieldset class="minor">
-                            <div><label>Clone Limit</label><input type="number" data-user-data-type="cloneLimit" id="property-cloneable-limit"></div>
-                        </fieldset>
-                        <div class="property checkbox">
-                            <input type="checkbox" id="property-cloneable-dynamic">
-                            <label for="property-cloneable-dynamic">Clone Dynamic</label>
-                        </div>
-                        <div class="property checkbox">
-                            <input type="checkbox" id="property-cloneable-avatarEntity">
-                            <label for="property-cloneable-avatarEntity">Clone Avatar Entity</label>
-                        </div>
-                    </fieldset>
-                </div>
-            </fieldset>
-        </fieldset>
-
-
-        <fieldset id="physical" class="major">
-            <legend class="section-header physical-group">
-                Physical<span class=".collapse-icon"> M</span>
-            </legend>
-            <fieldset class="minor">
-                <fieldset class="physical-group property xyz fstuple">
-                    <legend>Linear velocity <span class="unit">m/s</span></legend>
-                    <div class="tuple">
-                        <div><input type="number" class="x" id="property-lvel-x"><label for="property-lvel-x">X:</label></div>
-                        <div><input type="number" class="y" id="property-lvel-y"><label for="property-lvel-y">Y:</label></div>
-                        <div><input type="number" class="z" id="property-lvel-z"><label for="property-lvel-z">Z:</label></div>
-                    </div>
-                </fieldset>
-                <div class="physical-group property number">
-                    <label>Linear damping</label>
-                    <input type="number" id="property-ldamping">
-                </div>
-            </fieldset>
-            <fieldset class="minor">
-                <fieldset class="physical-group property pyr fstuple">
-                    <legend>Angular velocity <span class="unit">deg/s</span></legend>
-                    <div class="tuple">
-                        <div><input type="number" class="pitch" id="property-avel-x"><label for="property-avel-x">Pitch:</label></div>
-                        <div><input type="number" class="yaw" id="property-avel-y"><label for="property-avel-y">Yaw:</label></div>
-                        <div><input type="number" class="roll" id="property-avel-z"><label for="property-avel-z">Roll:</label></div>
-                    </div>
-                </fieldset>
-                <div class="physical-group property number">
-                    <label>Angular damping</label>
-                    <input type="number" id="property-adamping">
-                </div>
-            </fieldset>
-            <fieldset class="physical-group property gen fstuple">
-                <div class="tuple">
-                    <div><label>Restitution</label><input type="number" id="property-restitution"></div>
-                    <div><label>Friction</label><input type="number" id="property-friction"></div>
-                    <div><label>Density</label><input type="number" id="property-density"></div>
-                </div>
-            </fieldset>
-            <fieldset class="minor">
-                <fieldset class="physical-group property xyz fstuple">
-                    <legend>Gravity <span class="unit">m/s<sup>2</sup></span></legend>
-                    <div class="tuple">
-                        <div><input type="number" class="x" id="property-grav-x"><label for="property-grav-x">X:</label></div>
-                        <div><input type="number" class="y" id="property-grav-y"><label for="property-grav-y">Y:</label></div>
-                        <div><input type="number" class="z" id="property-grav-z"><label for="property-grav-z">Z:</label></div>
-                    </div>
-                </fieldset>
-                <fieldset class="physical-group property xyz fstuple">
-                    <legend>Acceleration <span class="unit">m/s<sup>2</sup></span></legend>
-                    <div class="tuple">
-                        <div><input type="number" class="x" id="property-lacc-x"><label for="property-lacc-x">X:</label></div>
-                        <div><input type="number" class="y" id="property-lacc-y"><label for="property-lacc-y">Y:</label></div>
-                        <div><input type="number" class="z" id="property-lacc-z"><label for="property-lacc-z">Z:</label></div>
-                    </div>
-                </fieldset>
-            </fieldset>
-        </fieldset>
-
-
-        <fieldset id="spatial" class="major">
-            <legend class="section-header spatial-group">
-                Spatial<span class=".collapse-icon" >M</span>
-            </legend>
-            <fieldset class="spatial-group property xyz fstuple">
-                <legend>Position <span class="unit">m</span></legend>
-                <div class="tuple">
-                    <div><input type="number" class="x" id="property-pos-x"><label for="property-pos-x">X:</label></div>
-                    <div><input type="number" class="y" id="property-pos-y"><label for="property-pos-y">Y:</label></div>
-                    <div><input type="number" class="z" id="property-pos-z"><label for="property-pos-z">Z:</label></div>
-                </div>
-            </fieldset>
-            <fieldset class="spatial-group property pyr fstuple">
-                <legend>Rotation <span class="unit">deg</span></legend>
-                <div class="tuple">
-                    <div><input type="number" class="pitch" id="property-rot-x" step="0.1"><label for="property-rot-x">Pitch:</label></div>
-                    <div><input type="number" class="yaw" id="property-rot-y" step="0.1"><label for="property-rot-y">Yaw:</label></div>
-                    <div><input type="number" class="roll" id="property-rot-z" step="0.1"><label for="property-rot-z">Roll:</label></div>
-                </div>
-            </fieldset>
-            <fieldset class="spatial-group property xyz fstuple">
-                <legend>Dimensions <span class="unit">m</span></legend>
-                <div class="tuple">
-                    <div><input type="number" class="x" id="property-dim-x" step="0.1"><label for="property-dim-x">X:</label></div>
-                    <div><input type="number" class="y" id="property-dim-y" step="0.1"><label for="property-dim-y">Y:</label></div>
-                    <div><input type="number" class="z" id="property-dim-z" step="0.1"><label for="property-dim-z">Z:</label></div>
-                </div>
-            </fieldset>
-            <fieldset class="spatial-group property xyz fstuple">
-                <legend>Registration <span class="unit">(pivot offset as ratio of dimension)</span></legend>
-                <div class="tuple">
-                    <div><input type="number" class="x" id="property-reg-x" step="0.1"><label for="property-reg-x">X:</label></div>
-                    <div><input type="number" class="y" id="property-reg-y" step="0.1"><label for="property-reg-y">Y:</label></div>
-                    <div><input type="number" class="z" id="property-reg-z" step="0.1"><label for="property-reg-z">Z:</label></div>
-                </div>
-            </fieldset>
-            <fieldset class="spatial-group property gen fsrow">
-                <legend>Scale <span class="unit">%</span></legend>
-                <div class="row">
-                    <input type="number" id="dimension-rescale-pct" value=100>
-                    <input type="button" class="blue" id="dimension-rescale-button" value="Rescale">
-                    <input type="button" class="red" id="reset-to-natural-dimensions" value="Reset Dimensions">
-                </div>
-            </fieldset>
-            <div class="spatial-group row">
-                <div class="property text">
-                    <label for="property-parent-id">Parent ID</label>
-                    <input type="text" id="property-parent-id">
-                </div>
-                <div class="property number">
-                    <label for="property-parent-joint-index">Parent joint index</label>
-                    <input type="number" id="property-parent-joint-index">
-                </div>
-            </div>
-            <div class="spatial-group ">
-                <div class="property text">
-                    <label>Align</label>
-                </div>
-                <div class="row">
-                    <div class="buttons">
-                        <input type="button" id="move-selection-to-grid" value="Selection to Grid">
-                        <input type="button" id="move-all-to-grid" value="All to Grid">
-                    </div>
-                </div>
-            </div>
-        </fieldset>
-
-        <fieldset id="behavior" class="major">
-            <legend class="section-header behavior-group">
-                Behavior<span class=".collapse-icon">M</span>
-            </legend>
-            <div class="property textarea">
-                <label for="property-user-data">User data</label>
-                <br>
-                <div class="row">
-                    <input type="button" class="red" id="userdata-clear" value="Clear User Data">
-                    <input type="button" class="blue" id="userdata-new-editor" value="Edit as JSON">
-                    <input disabled type="button" class="black" id="userdata-save" value="Save User Data">
-                    <span id="userdata-saved">Saved!</span>
-                </div>
-                <div id="static-userdata"></div>
-                <div id="userdata-editor"></div>
-                <textarea id="property-user-data"></textarea>
-            </div>
-            <div id="id" class="property value">
-                <label>ID:</label>
-                <input type="text" id="property-id" readonly>
-            </div>
-            <div class="can-cast-shadow-section property checkbox">
-                <input type="checkbox" id="property-can-cast-shadow">
-                <label for="property-can-cast-shadow">Can cast shadow</label>
-            </div>
-
-            <fieldset class="minor">
-                <div class="behavior-group property url ">
-                    <label for="property-collision-sound-url">Collision sound URL</label>
-                    <input type="text" id="property-collision-sound-url">
-                </div>
-                <div class="behavior-group property number">
-                    <label>Lifetime <span class="unit">s</span></label>
-                    <input type="number" id="property-lifetime">
-                </div>
-            </fieldset>
-            <fieldset class="minor">
-                <div class="behavior-group property url refresh">
-                    <input type="hidden" id="property-script-timestamp" class="value">
-                    <label for="property-script-url">Script URL</label>
-                    <input type="text" id="property-script-url">
-                    <input type="button" id="reload-script-button" class="glyph" value="F">
-                </div>
-            </fieldset>
-            <fieldset class="minor">
-                <div class="behavior-group property url refresh">
-                    <label for="property-server-scripts">Server Script URL</label>
-                    <input type="text" id="property-server-scripts">
-                    <input type="button" id="reload-server-scripts-button" class="glyph" value="F">
-                </div>
-                <div class="behavior-group property">
-                    <label for="server-script-status">Server Script Status</label>
-                    <span id="server-script-status"></span>
-                </div>
-                <div class="behavior-group property">
-                    <textarea id="server-script-error"></textarea>
-                </div>
-            </fieldset>
-            <div class="property text">
-                <label for="property-description">Description</label>
-                <input type="text" id="property-description">
-            </div>
-        </fieldset>
-
-
-        <fieldset id="hyperlink" class="major">
-            <legend class="section-header hyperlink-group hyperlink-section">
-                Hyperlink<span class=".collapse-icon">M</span>
-            </legend>
-            <div class="hyperlink-group hyperlink-section property url">
-                <label for="property-hyperlink-href">Href - hifi://address</label>
-                <input type="text" id="property-hyperlink-href">
-            </div>
-        </fieldset>
-
-        <fieldset id="light" class="major">
-            <legend class="section-header light-group light-section">
-                Light<span class=".collapse-icon">M</span>
-            </legend>
-            <fieldset class="light-group light-section property rgb fstuple">
-                <div class="color-picker" id="property-light-color"></div>
-                <legend>Light color</legend>
-                <div class="tuple">
-                    <div><input type="number" class="red" id="property-light-color-red"><label for="property-light-color-red">Red:</label></div>
-                    <div><input type="number" class="green" id="property-light-color-green"><label for="property-light-color-green">Green:</label></div>
-                    <div><input type="number" class="blue" id="property-light-color-blue"><label for="property-light-color-blue">Blue:</label></div>
-                </div>
-            </fieldset>
-            <fieldset class="light-group light-section property gen fstuple">
-                <div class="tuple">
-                    <div><label>Intensity</label><input type="number" id="property-light-intensity" min="0" step="0.1"></div>
-                    <div><label>Fall-off radius <span class="unit">m</span></label><input type="number" id="property-light-falloff-radius" min="0" step="0.1"></div>
-                    <div></div>
-                </div>
-            </fieldset>
-            <div class="light-group light-section property checkbox">
-                <input type="checkbox" id="property-light-spot-light">
-                <label for="property-light-spot-light">Spotlight</label>
-            </div>
-            <fieldset class="light-group light-section property gen fstuple">
-                <div class="tuple">
-                    <div><label>Spotlight exponent</label><input type="number" id="property-light-exponent" step="0.01"></div>
-                    <div><label>Spotlight cut-off</label><input type="number" id="property-light-cutoff" step="0.01"></div>
-                    <div></div>
-                </div>
-            </fieldset>
-        </fieldset>
-
-        <fieldset id="model" class="major">
-            <legend class="section-header model-group model-section zone-section">
-                Model<span class=".collapse-icon">M</span>
-            </legend>
-            <fieldset class="minor">
-                <div class="model-group model-section property url ">
-                    <label for="property-model-url">Model URL</label>
-                    <input type="text" id="property-model-url">
-                </div>
-                <div class="model-group model-section zone-section property dropdown">
-                    <label>Collision shape type</label>
-                    <select name="SelectShapeType" id="property-shape-type">
-                           <option value="none">No Collision</option>
-                           <option value="box">Box</option>
-                           <option value="sphere">Sphere</option>
-                           <option value="compound">Compound</option>
-                           <option value="simple-hull">Basic - Whole model</option>
-                           <option value="simple-compound">Good - Sub-meshes</option>
-                           <option value="static-mesh">Exact - All polygons (non-dynamic only)</option>
-                       </select>
-                </div>
-                <div class="model-group model-section zone-section property url ">
-                    <label for="property-compound-shape-url">Compound shape URL</label>
-                    <input type="text" id="property-compound-shape-url">
-                </div>
-            </fieldset>
-            <fieldset class="minor">
-                <div class="model-group model-section property url ">
-                    <label for="property-model-animation-url">Animation URL</label>
-                    <input type="text" id="property-model-animation-url">
-                </div>
-
-                <div class="model-group model-section two-column">
-                    <div class="column">
-                        <div class="property checkbox">
-                            <input type="checkbox" id="property-model-animation-playing">
-                            <label for="property-model-animation-playing">Animation playing</label>
-                        </div>
-                        <div class="property checkbox indent">
-                            <input type="checkbox" id="property-model-animation-loop">
-                            <label for="property-model-animation-loop">Animation loop</label>
-                        </div>
-                        <div class="property checkbox indent">
-                            <input type="checkbox" id="property-model-animation-hold">
-                            <label for="property-model-animation-hold">Animation hold</label>
-                        </div>
-                        <div class="property checkbox indent">
-                            <input type="checkbox" id="property-model-animation-allow-translation">
-                            <label for="property-model-animation-allow-translation">Animation Allow Translation</label>
-                        </div>
-                        <div id="animation-fps" class="property number">
-                            <label>Animation FPS</label>
-                            <input type="number" id="property-model-animation-fps">
-                        </div>
-                    </div>
-                    <div class="column">
-                        <div class="property number">
-                            <label>Animation frame</label>
-                            <input type="number" id="property-model-animation-frame">
-                        </div>
-                        <div class="property number">
-                            <label>First frame</label>
-                            <input type="number" id="property-model-animation-first-frame">
-                        </div>
-                        <div class="property number">
-                            <label>Last frame</label>
-                            <input type="number" id="property-model-animation-last-frame">
-                        </div>
-                    </div>
-                </div>
-            </fieldset>
-            <fieldset class="minor">
-                <div class="model-group model-section property textarea">
-                    <label for="property-model-textures">Textures</label>
-                    <textarea id="property-model-textures"></textarea>
-                </div>
-                <div class="model-group model-section property textarea">
-                    <label for="property-model-original-textures">Original textures</label>
-                    <textarea id="property-model-original-textures" readonly></textarea>
-                </div>
-            </fieldset>
-        </fieldset>
-
-        <fieldset id="zone" class="major">
-            <legend class="section-header zone-group zone-section">
-                Zone<span class=".collapse-icon">M</span>
-            </legend>
-            <fieldset class="minor">
-                <div class="zone-group zone-section property checkbox">
-                    <input type="checkbox" id="property-zone-flying-allowed">
-                    <label for="property-zone-flying-allowed">Flying allowed</label>
-                </div>
-                <div class="zone-group zone-section property checkbox">
-                    <input type="checkbox" id="property-zone-ghosting-allowed">
-                    <label for="property-zone-ghosting-allowed">Ghosting allowed</label>
-                </div>
-            </fieldset>
-            <fieldset class="minor">
-                <div class="zone-group zone-section property url ">
-                    <label for="property-zone-filter-url">Filter URL</label>
-                    <input type="text" id="property-zone-filter-url">
-                </div>
-                <div class="sub-section-header zone-group zone-section">
-                    <label>Key Light</label>
-                </div>
-                <form>
-                    <input type="radio" name="keyLightMode" value="inherit" id="property-zone-key-light-mode-inherit" checked> Inherit
-                    <input type="radio" name="keyLightMode" value="disabled" id="property-zone-key-light-mode-disabled"> Off
-                    <input type="radio" name="keyLightMode" value="enabled" id="property-zone-key-light-mode-enabled"> On
-                </form>
-                <div class="zone-section keylight-section zone-group property rgb">
-                    <div class="color-picker" id="property-zone-key-light-color"></div>
-                    <label>Key light color</label>
-                    <div class="tuple">
-                        <div><input type="number" class="red" id="property-zone-key-light-color-red" min="0" max="255" step="1"><label for="property-zone-key-light-color-red">Red:</label></div>
-                        <div><input type="number" class="green" id="property-zone-key-light-color-green" min="0" max="255" step="1"><label for="property-zone-key-light-color-green">Green:</label></div>
-                        <div><input type="number" class="blue" id="property-zone-key-light-color-blue" min="0" max="255" step="1"><label for="property-zone-key-light-color-blue">Blue:</label></div>
-                    </div>
-                </div>
-                <div class="zone-section keylight-section zone-group property number">
-                    <label>Light intensity</label>
-                    <input type="number" id="property-zone-key-intensity" min="0" max="10" step="0.1">
-                </div>
-                <div class="zone-group zone-section keylight-section property gen">
-                    <div class="tuple">
-                        <div><label>Light altitude <span class="unit">deg</span></label><input type="number" id="property-zone-key-light-direction-x"></div>
-                        <div><label>Light azimuth <span class="unit">deg</span></label><input type="number" id="property-zone-key-light-direction-y"></div>
-                        <div></div>
-                    </div>
-                </div>
-                <div class="zone-group zone-section keylight-section property checkbox">
-                    <input type="checkbox" id="property-zone-key-light-cast-shadows">
-                    <label for="property-zone-key-light-cast-shadows">Cast Shadows</label>
-                </div>
-            <fieldset class="minor">
-                <legend class="sub-section-header zone-group zone-section background-section">
-                    Skybox
-                </legend>
-                <form>
-                    <input type="radio" name="skyboxMode" value="inherit" id="property-zone-skybox-mode-inherit" checked> Inherit
-                    <input type="radio" name="skyboxMode" value="disabled" id="property-zone-skybox-mode-disabled"> Off
-                    <input type="radio" name="skyboxMode" value="enabled" id="property-zone-skybox-mode-enabled"> On
-                </form>
-                <fieldset class="zone-group zone-section skybox-section property rgb fstuple">
-                    <div class="color-picker" id="property-zone-skybox-color"></div>
-                    <legend>Skybox color</legend>
-                    <div class="tuple">
-                        <div>
-                            <input type="number" class="red" id="property-zone-skybox-color-red">
-                            <label for="property-zone-skybox-color-red">Red:</label>
-                        </div>
-                        <div>
-                            <input type="number" class="green" id="property-zone-skybox-color-green">
-                            <label for="property-zone-skybox-color-green">Green:</label>
-                        </div>
-                        <div>
-                            <input type="number" class="blue" id="property-zone-skybox-color-blue">
-                            <label for="property-zone-skybox-color-blue">Blue:</label>
-                        </div>
-                    </div>
-                </fieldset>
-                <div class="zone-group zone-section skybox-section property url ">
-                    <br>
-                    <label for="property-zone-skybox-url" width="80">Skybox URL</label>
-                    <input type="text" id="property-zone-skybox-url">
-                    <br>
-                    <br>
-                    <input type="button" id="copy-skybox-url-to-ambient-url" value="Copy URL to Ambient">
-                </div>
-            </fieldset>
-                <div class="sub-section-header zone-group zone-section">
-                    <label>Ambient Light</label>
-                </div>
-                <form>
-                    <input type="radio" name="ambientLightMode" value="inherit" id="property-zone-ambient-light-mode-inherit" checked> Inherit
-                    <input type="radio" name="ambientLightMode" value="disabled" id="property-zone-ambient-light-mode-disabled"> Off
-                    <input type="radio" name="ambientLightMode" value="enabled" id="property-zone-ambient-light-mode-enabled"> On
-                </form>
-                <div class="zone-group zone-section ambient-section property number">
-                    <label>Ambient intensity</label>
-                    <input type="number" id="property-zone-key-ambient-intensity" min="0" max="10" step="0.1">
-                </div>
-                <div class="zone-group zone-section ambient-section property url ">
-                    <label for="property-zone-key-ambient-url">Ambient URL</label>
-                    <input type="text" id="property-zone-key-ambient-url">
-                </div>
-            </fieldset>
-            <fieldset class="minor">
-                <legend class="sub-section-header zone-group zone-section">
-                    Haze
-                </legend>
-                <form>
-                    <input type="radio" name="hazeMode" value="inherit" id="property-zone-haze-mode-inherit" checked> Inherit
-                    <input type="radio" name="hazeMode" value="disabled" id="property-zone-haze-mode-disabled"> Off
-                    <input type="radio" name="hazeMode" value="enabled" id="property-zone-haze-mode-enabled"> On
-                </form>
-                <fieldset class="zone-group zone-section haze-section property gen fstuple">
-                    <div class="tuple">
-                        <div>
-                              <label>Range<span class="unit">m</span></label>
-                              <input type="number" id="property-zone-haze-range" min="5" max="10000" step="5">
-                        </div>
-                    </div>
-                </fieldset>
-                    <div class="zone-group zone-section haze-section property checkbox">
-                        <input type="checkbox" id="property-zone-haze-altitude-effect">
-                        <label for="property-zone-haze-altitude-effect">Use Altitude</label>
-                    </div>
-                <fieldset class="zone-group zone-section haze-section property gen fstuple">
-                  <div class="tuple">
-                      <div><label>Base<span class="unit">m</span></label><input type="number" id="property-zone-haze-base" min="-1000" max="1000" step="10"></div>
-                      <div><label>Ceiling<span class="unit">m</span></label><input type="number" id="property-zone-haze-ceiling" min="-1000" max="5000" step="10"></div>
-                  </div>
-                </fieldset>
-                <fieldset class="zone-group zone-section haze-section property rgb fstuple">
-                    <div class="color-picker" id="property-zone-haze-color"></div>
-                    <legend>Haze Color</legend>
-                    <div class="tuple">
-                        <div><input type="number" class="red" id="property-zone-haze-color-red" min="0" max="255" step="1">
-                          <label for="property-zone-haze-blend-in-color-red">Red:</label></div>
-                        <div><input type="number" class="green" id="property-zone-haze-color-green" min="0" max="255" step="1">
-                          <label for="property-zone-haze-blend-in-color-green">Green:</label></div>
-                        <div><input type="number" class="blue" id="property-zone-haze-color-blue" min="0" max="255" step="1">
-                          <label for="property-zone-haze-blend-in-color-blue">Blue:</label></div>
-                    </div>
-                </fieldset>
-                <fieldset class="zone-group zone-section haze-section property gen fstuple">
-                    <div class="tuple">
-                        <div>
-                            <br>
-                                <table>
-                                    <td><label>Background Blend&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0.0</label></td>
-                                    <td><input type="range" class="slider" id="property-zone-haze-background-blend" min="0.0" max="1.0" step="0.01" value="0.0"></td>
-                                    <td><label>1.0</label></td>
-                                </table>
-                        </div>
-                    </div>
-                </fieldset>
-                <div class="zone-group zone-section haze-section property checkbox">
-                    <input type="checkbox" id="property-zone-haze-enable-light-blend">
-                    <label for="property-zone-haze-enable-light-blend">Enable Glare</label>
-                </div>
-                <fieldset class="zone-group zone-section haze-section property rgb fstuple">
-                    <div class="color-picker" id="property-zone-haze-glare-color"></div>
-                    <legend>Glare Color</legend>
-                    <div class="tuple">
-                        <div><input type="number" class="red" id="property-zone-haze-glare-color-red" min="0" max="255" step="1">
-                          <label for="property-zone-haze-blend-out-color-red">Red:</label></div>
-                        <div><input type="number" class="green" id="property-zone-haze-glare-color-green" min="0" max="255" step="1">
-                          <label for="property-zone-haze-blend-out-color-green">Green:</label></div>
-                        <div><input type="number" class="blue" id="property-zone-haze-glare-color-blue" min="0" max="255" step="1">
-                          <label for="property-zone-haze-blend-out-color-blue">Blue:</label></div>
-                    </div>
-                </fieldset>
-                <fieldset class="zone-group zone-section haze-section property gen fstuple">
-                    <div class="tuple">
-                        <div>
-                            <br>
-                            <table>
-                                <td><label>Glare Angle&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0</label></td>
-                                <td><input type="range" class="slider" id="property-zone-haze-blend-angle" min="0" max="180" step="1"></td>
-                                <td><label>180</label>
-                            </table>
-                        </div>
-                    </div>
-                </fieldset>
-                <!--div class="zone-group zone-section haze-section property checkbox">
-                    <input type="checkbox" id="property-zone-haze-attenuate-keylight">
-                    <label for="property-zone-haze-attenuate-keylight">Attenuate Keylight</label>
-                </div>
-                <fieldset class="zone-group zone-section haze-section property gen fstuple">
-                    <div class="tuple">
-                        <div><label>Range<span class="unit">m</span></label><input type="number" id="property-zone-haze-keylight-range" 
-                        min="5" max="1000000" step="5"></div>
-                        <div><label>Altitude<span class="unit">m</span></label><input type="number" id="property-zone-haze-keylight-altitude" 
-                        min="-1000" max="50000" step="10"></div>
-                    </div>
-                </fieldset-->
-            </fieldset>
-            <fieldset class="minor">
-                <legend class="sub-section-header zone-group zone-section">
-                    Bloom
-                </legend>
-                <form>
-                    <input type="radio" name="bloomMode" value="inherit" id="property-zone-bloom-mode-inherit" checked> Inherit
-                    <input type="radio" name="bloomMode" value="disabled" id="property-zone-bloom-mode-disabled"> Off
-                    <input type="radio" name="bloomMode" value="enabled" id="property-zone-bloom-mode-enabled"> On
-                </form>
-                <fieldset class="zone-group zone-section bloom-section property gen fstuple">
-                    <div class="tuple">
-                        <div>
-                            <br>
-                            <table>
-                                <td><label>Bloom Intensity&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0</label></td>
-                                <td><input type="range" class="slider" id="property-zone-bloom-intensity" min="0" max="1" step="0.01"></td>
-                                <td><label>1</label>
-                            </table>
-                        </div>
-                    </div>
-                </fieldset>
-                <fieldset class="zone-group zone-section bloom-section property gen fstuple">
-                    <div class="tuple">
-                        <div>
-                            <br>
-                            <table>
-                                <td><label>Bloom Threshold&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0</label></td>
-                                <td><input type="range" class="slider" id="property-zone-bloom-threshold" min="0" max="1" step="0.01"></td>
-                                <td><label>1</label>
-                            </table>
-                        </div>
-                    </div>
-                </fieldset>
-                <fieldset class="zone-group zone-section bloom-section property gen fstuple">
-                    <div class="tuple">
-                        <div>
-                            <br>
-                            <table>
-                                <td><label>Bloom Size&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0</label></td>
-                                <td><input type="range" class="slider" id="property-zone-bloom-size" min="0" max="2" step="0.01"></td>
-                                <td><label>2</label>
-                            </table>
-                        </div>
-                    </div>
-                </fieldset>
-            </fieldset>
-        </fieldset>
-        <fieldset id="text" class="major">
-            <legend class="section-header text-group text-section">
-                Text<span class=".collapse-icon">M</span>
-            </legend>
-            <div class="text-group text-section property text">
-                <label for="property-text-text">Text content</label>
-                <input type="text" id="property-text-text">
-            </div>
-            <div class="text-group text-section property checkbox">
-                <input type="checkbox" id="property-text-face-camera">
-                <label for="property-text-face-camera">&nbsp;Face Camera</label>
-            </div>
-            <div class="text-group text-section property number">
-                <label>Line height <span class="unit">m</span></label>
-                <input type="number" id="property-text-line-height" min="0" step="0.005">
-            </div>
-            <div class="text-group text-section property rgb">
-                <div class="color-picker" id="property-text-text-color"></div>
-                <label>Text color</label>
-                <div class="tuple">
-                    <div><input type="number" class="red" id="property-text-text-color-red"><label for="property-text-text-color-red">Red:</label></div>
-                    <div><input type="number" class="green" id="property-text-text-color-green"><label for="property-text-text-color-green">Green:</label></div>
-                    <div><input type="number" class="blue" id="property-text-text-color-blue"><label for="property-text-text-color-blue">Blue:</label></div>
-                </div>
-            </div>
-            <fieldset class="text-group text-section property rgb fstuple">
-                <div class="color-picker" id="property-text-background-color"></div>
-                <legend>Background color</legend>
-                <div class="tuple">
-                    <div><input type="number" class="red" id="property-text-background-color-red"><label for="roperty-text-background-color-red">Red:</label></div>
-                    <div><input type="number" class="green" id="property-text-background-color-green"><label for="property-text-background-color-green">Green:</label></div>
-                    <div><input type="number" class="blue" id="property-text-background-color-blue"><label for="property-text-background-color-blue">Blue:</label></div>
-                </div>
-            </fieldset>
-        </fieldset>
-
-        <fieldset id="image" class="major">
-            <legend class="section-header image-group image-section">
-                Image<span>M</span>
-            </legend>
-            <div class="image-group image-section property url ">
-                <label for="property-image-url">Image URL</label>
-                <input type="text" id="property-image-url">
-            </div>
-        </fieldset>
-
-        <fieldset id="web" class="major">
-            <legend class="section-header web-group web-section">
-                Web<span class=".collapse-icon">M</span>
-            </legend>
-            <div class="web-group web-section property url ">
-                <label for="property-web-source-url">Source URL</label>
-                <input type="text" id="property-web-source-url">
-            </div>
-            <div class="web-group web-section property dpi ">
-                <label for="property-web-dpi">Resolution (DPI)</label>
-                <input type="number" id="property-web-dpi">
-            </div>
-        </fieldset>
-
-        <fieldset id="polyvox" class="major">
-            <legend class="section-header spatial-group poly-vox-section property xyz">
-                Voxel volume size <span>m</span>
-            </legend>
-            <div class="tuple">
-                <div><input type="number" class="x" id="property-voxel-volume-size-x"><label for="property-voxel-volume-size-x">X:</label></div>
-                <div><input type="number" class="y" id="property-voxel-volume-size-y"><label for="property-voxel-volume-size-y">Y:</label></div>
-                <div><input type="number" class="z" id="property-voxel-volume-size-z"><label for="property-voxel-volume-size-z">Z:</label></div>
-            </div>
-            <div class="spatial-group poly-vox-section property dropdown">
-                <label>Surface extractor</label>
-                <select name="SelectVoxelSurfaceStyle" id="property-voxel-surface-style">
-                     <option value="0">Marching cubes</option>
-                     <option value="1">Cubic</option>
-                     <option value="2">Edged cubic</option>
-                     <option value="3">Edged marching cubes</option>
-                 </select>
-            </div>
-            <div class="spatial-group poly-vox-section property url ">
-                <label for="property-x-texture-url">X-axis texture URL</label>
-                <input type="text" id="property-x-texture-url">
-            </div>
-            <div class="spatial-group poly-vox-section property url ">
-                <label for="property-y-texture-url">Y-axis texture URL</label>
-                <input type="text" id="property-y-texture-url">
-            </div>
-            <div class="spatial-group poly-vox-section property url ">
-                <label for="property-z-texture-url">Z-axis texture URL</label>
-                <input type="text" id="property-z-texture-url">
-            </div>
-        </fieldset>
-
-        <fieldset id="material" class="major">
-            <legend class="section-header material-group material-section">
-                Material<span>M</span>
-            </legend>
-            <fieldset class="minor">
-                <div class="material-group material-section property url">
-                    <label for="property-material-url">Material URL</label>
-                    <input type="text" id="property-material-url">
-                </div>
-
-                <div class="property textarea">
-                    <label for="property-material-data">Material data</label>
-                    <br><br>
-                    <div class="row">
-                        <input type="button" class="red" id="materialdata-clear" value="Clear Material Data">
-                        <input type="button" class="blue" id="materialdata-new-editor" value="Edit as JSON">
-                        <input disabled type="button" class="black" id="materialdata-save" value="Save Material Data">
-                        <span id="materialdata-saved" visible="false">Saved!</span>
-                    </div>
-                    <div id="static-naterialdata"></div>
-                    <div id="materialdata-editor"></div>
-                    <textarea id="property-material-data"></textarea>
-                </div>
-            </fieldset>
-            <fieldset class="minor">
-                <div class="material-group material-section property text" id="property-parent-material-id-string-container">
-                    <label for="property-parent-material-id-string">Material Name to Replace </label>
-                    <input type="text" id="property-parent-material-id-string">
-                </div>
-
-                <div class="material-group material-section property number" id="property-parent-material-id-number-container">
-                    <label for="property-parent-material-id-number">Submesh to Replace </label>
-                    <input type="number" min="0" step="1" value="0" id="property-parent-material-id-number">
-                </div>
-
-                <div class="material-group material-section property checkbox">
-                    <input type="checkbox" id="property-parent-material-id-checkbox">
-                    <label for="property-parent-material-id-checkbox">Select Submesh</label>
-                </div>
-
-                <div class="material-group material-section property number">
-                    <label>Priority </label>
-                    <input type="number" id="property-priority" min="0">
-                </div>
-
-                <fieldset>
-                    <!-- TODO: support 3D projected materials
-                    <div class="material-group material-section property dropdown">
-                        <label>Material mode </label>
-                        <select name="SelectMaterialMode" id="property-material-mapping-mode">
-                            <option value="uv">UV space material</option>
-                            <option value="projected">3D projected material</option>
-                        </select>
-                    </div>
-                    -->
-
-                    <div class="material-group material-section property xy fstuple">
-                        <label>Material Position </label>
-                        <div class="tuple">
-                            <div><input type="number" class="x" id="property-material-mapping-pos-x" min="0" max="1" step="0.1"><label for="property-material-mapping-pos-x">X:</label></div>
-                            <div><input type="number" class="y" id="property-material-mapping-pos-y" min="0" max="1" step="0.1"><label for="property-material-mapping-pos-y">Y:</label></div>
-                    </div>
-
-                    <div class="material-group material-section property wh fstuple">
-                        <label>Material Scale </label>
-                        <div class="tuple">
-                            <div><input type="number" class="x" id="property-material-mapping-scale-x" min="0" step="0.1"><label for="property-material-mapping-scale-x">Width:</label></div>
-                            <div><input type="number" class="y" id="property-material-mapping-scale-y" min="0" step="0.1"><label for="property-material-mapping-scale-y">Height:</label></div>
-                    </div>
-
-                    <div class="material-group material-section property number">
-                        <label>Material Rotation <span class="unit">deg</span></label>
-                        <input type="number" id="property-material-mapping-rot" step="0.1">
-                    </div>
-                </fieldset>
-
-            </fieldset>
-        </fieldset>
-
+        <!-- each property is added at runtime in entityProperties -->
     </div>
 </body>
 
diff --git a/scripts/system/html/js/entityProperties.js b/scripts/system/html/js/entityProperties.js
index 2d2e4d5675..676ecaf289 100644
--- a/scripts/system/html/js/entityProperties.js
+++ b/scripts/system/html/js/entityProperties.js
@@ -1,18 +1,16 @@
 //  entityProperties.js
 //
 //  Created by Ryan Huffman on 13 Nov 2014
+//  Modified by David Back on 19 Oct 2018
 //  Copyright 2014 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
 
-/* global alert, augmentSpinButtons, clearTimeout, document, Element, EventBridge,
-    JSONEditor, openEventBridge, setTimeout, window, $ */
-
-var PI = 3.14159265358979;
-var DEGREES_TO_RADIANS = PI / 180.0;
-var RADIANS_TO_DEGREES = 180.0 / PI;
-var ICON_FOR_TYPE = {
+/* global alert, augmentSpinButtons, clearTimeout, console, document, Element, 
+   EventBridge, JSONEditor, openEventBridge, setTimeout, window, _ $ */
+    
+const ICON_FOR_TYPE = {
     Box: "V",
     Sphere: "n",
     Shape: "n",
@@ -27,17 +25,1289 @@ var ICON_FOR_TYPE = {
     Multiple: "&#xe000;",
     PolyLine: "&#xe01b;",
     Material: "&#xe00b;"
+};  
+
+const DEGREES_TO_RADIANS = Math.PI / 180.0;
+
+const NO_SELECTION = "<i>No selection</i>";
+
+const GROUPS = [
+    {
+        id: "base",
+        properties: [
+            {
+                label: NO_SELECTION,
+                type: "icon",
+                icons: ICON_FOR_TYPE,
+                propertyID: "type",
+            },
+            {
+                label: "Name",
+                type: "string",
+                propertyID: "name",
+            },
+            {
+                label: "ID",
+                type: "string",
+                propertyID: "id",
+                readOnly: true,
+            },
+            {
+                label: "Description",
+                type: "string",
+                propertyID: "description",
+            },
+            {
+                label: "Parent",
+                type: "string",
+                propertyID: "parentID",
+            },
+            {
+                label: "Parent Joint Index",
+                type: "number",
+                propertyID: "parentJointIndex",
+            },
+            {
+                label: "Locked",
+                glyph: "&#xe006;",
+                type: "bool",
+                propertyID: "locked",
+            },
+            {
+                label: "Visible",
+                glyph: "&#xe007;",
+                type: "bool",
+                propertyID: "visible",
+            },
+        ]
+    },
+    {
+        id: "shape",
+        addToGroup: "base",
+        properties: [
+            {
+                label: "Shape",
+                type: "dropdown",
+                options: { Cube: "Box", Sphere: "Sphere", Tetrahedron: "Tetrahedron", Octahedron: "Octahedron", 
+                           Icosahedron: "Icosahedron", Dodecahedron: "Dodecahedron", Hexagon: "Hexagon", 
+                           Triangle: "Triangle", Octagon: "Octagon", Cylinder: "Cylinder", Cone: "Cone", 
+                           Circle: "Circle", Quad: "Quad" },
+                propertyID: "shape",
+            },
+            {
+                label: "Color",
+                type: "color",
+                propertyID: "color",
+            },
+        ]
+    },
+    {
+        id: "text",
+        addToGroup: "base",
+        properties: [
+            {
+                label: "Text",
+                type: "string",
+                propertyID: "text",
+            },
+            {
+                label: "Text Color",
+                type: "color",
+                propertyID: "textColor",
+            },
+            {
+                label: "Background Color",
+                type: "color",
+                propertyID: "backgroundColor",
+            },
+            {
+                label: "Line Height",
+                type: "number",
+                min: 0,
+                step: 0.005,
+                decimals: 4,
+                unit: "m",
+                propertyID: "lineHeight"
+            },
+            {
+                label: "Face Camera",
+                type: "bool",
+                propertyID: "faceCamera"
+            },
+        ]
+    },
+    {
+        id: "zone",
+        addToGroup: "base",
+        properties: [
+            {
+                label: "Flying Allowed",
+                type: "bool",
+                propertyID: "flyingAllowed",
+            },
+            {
+                label: "Ghosting Allowed",
+                type: "bool",
+                propertyID: "ghostingAllowed",
+            },
+            {
+                label: "Filter",
+                type: "string",
+                propertyID: "filterURL",
+            },
+            {
+                label: "Key Light",
+                type: "dropdown",
+                options: { inherit: "Inherit", disabled: "Off", enabled: "On" },
+                propertyID: "keyLightMode",
+                
+            },
+            {
+                label: "Key Light Color",
+                type: "color",
+                propertyID: "keyLight.color",
+                showPropertyRule: { "keyLightMode": "enabled" },
+            },
+            {
+                label: "Light Intensity",
+                type: "number",
+                min: 0,
+                max: 10,
+                step: 0.1,
+                decimals: 2,
+                propertyID: "keyLight.intensity",
+                showPropertyRule: { "keyLightMode": "enabled" },
+            },
+            {
+                label: "Light Horizontal Angle",
+                type: "number",
+                multiplier: DEGREES_TO_RADIANS,
+                decimals: 2,
+                unit: "deg",
+                propertyID: "keyLight.direction.x",
+                showPropertyRule: { "keyLightMode": "enabled" },
+            },
+            {
+                label: "Light Vertical Angle",
+                type: "number",
+                multiplier: DEGREES_TO_RADIANS,
+                decimals: 2,
+                unit: "deg",
+                propertyID: "keyLight.direction.y",
+                showPropertyRule: { "keyLightMode": "enabled" },
+            },
+            {
+                label: "Cast Shadows",
+                type: "bool",
+                propertyID: "keyLight.castShadows",
+                showPropertyRule: { "keyLightMode": "enabled" },
+            },
+            {
+                label: "Skybox",
+                type: "dropdown",
+                options: { inherit: "Inherit", disabled: "Off", enabled: "On" },
+                propertyID: "skyboxMode",
+            },
+            {
+                label: "Skybox Color",
+                type: "color",
+                propertyID: "skybox.color",
+                showPropertyRule: { "skyboxMode": "enabled" },
+            },
+            {
+                label: "Skybox Source",
+                type: "string",
+                propertyID: "skybox.url",
+                showPropertyRule: { "skyboxMode": "enabled" },
+            },
+            {
+                label: "Ambient Light",
+                type: "dropdown",
+                options: { inherit: "Inherit", disabled: "Off", enabled: "On" },
+                propertyID: "ambientLightMode",
+            },
+            {
+                label: "Ambient Intensity",
+                type: "number",
+                min: 0,
+                max: 10,
+                step: 0.1,
+                decimals: 2,
+                propertyID: "ambientLight.ambientIntensity",
+                showPropertyRule: { "ambientLightMode": "enabled" },
+            },
+            {
+                label: "Ambient Source",
+                type: "string",
+                propertyID: "ambientLight.ambientURL",
+                showPropertyRule: { "ambientLightMode": "enabled" },
+            },
+            {
+                type: "buttons",
+                buttons: [ { id: "copy", label: "Copy from Skybox", 
+                             className: "black", onClick: copySkyboxURLToAmbientURL } ],
+                propertyID: "copyURLToAmbient",
+                showPropertyRule: { "skyboxMode": "enabled" },
+            },
+            {
+                label: "Haze",
+                type: "dropdown",
+                options: { inherit: "Inherit", disabled: "Off", enabled: "On" },
+                propertyID: "hazeMode",
+            },
+            {
+                label: "Range",
+                type: "number",
+                min: 5,
+                max: 10000,
+                step: 5,
+                decimals: 0,
+                unit: "m",
+                propertyID: "haze.hazeRange",
+                showPropertyRule: { "hazeMode": "enabled" },
+            },
+            {
+                label: "Use Altitude",
+                type: "bool",
+                propertyID: "haze.hazeAltitudeEffect",
+                showPropertyRule: { "hazeMode": "enabled" },
+            },
+            {
+                label: "Base",
+                type: "number",
+                min: -1000,
+                max: 1000,
+                step: 10,
+                decimals: 0,
+                unit: "m",
+                propertyID: "haze.hazeBaseRef",
+                showPropertyRule: { "hazeMode": "enabled" },
+            },
+            {
+                label: "Ceiling",
+                type: "number",
+                min: -1000,
+                max: 5000,
+                step: 10,
+                decimals: 0,
+                unit: "m",
+                propertyID: "haze.hazeCeiling",
+                showPropertyRule: { "hazeMode": "enabled" },
+            },
+            {
+                label: "Haze Color",
+                type: "color",
+                propertyID: "haze.hazeColor",
+                showPropertyRule: { "hazeMode": "enabled" },
+            },
+            {
+                label: "Background Blend",
+                type: "slider",
+                min: 0,
+                max: 1,
+                step: 0.01,
+                decimals: 2,
+                propertyID: "haze.hazeBackgroundBlend",
+                showPropertyRule: { "hazeMode": "enabled" },
+            },
+            {
+                label: "Enable Glare",
+                type: "bool",
+                propertyID: "haze.hazeEnableGlare",
+                showPropertyRule: { "hazeMode": "enabled" },
+            },
+            {
+                label: "Glare Color",
+                type: "color",
+                propertyID: "haze.hazeGlareColor",
+                showPropertyRule: { "hazeMode": "enabled" },
+            },
+            {
+                label: "Glare Angle",
+                type: "slider",
+                min: 0,
+                max: 180,
+                step: 1,
+                decimals: 0,
+                propertyID: "haze.hazeGlareAngle",
+                showPropertyRule: { "hazeMode": "enabled" },
+            },
+            {
+                label: "Bloom",
+                type: "dropdown",
+                options: { inherit: "Inherit", disabled: "Off", enabled: "On" },
+                propertyID: "bloomMode",
+            },
+            {
+                label: "Bloom Intensity",
+                type: "slider",
+                min: 0,
+                max: 1,
+                step: 0.01,
+                decimals: 2,
+                propertyID: "bloom.bloomIntensity",
+                showPropertyRule: { "bloomMode": "enabled" },
+            },
+            {
+                label: "Bloom Threshold",
+                type: "slider",
+                min: 0,
+                max: 1,
+                step: 0.01,
+                decimals: 2,
+                propertyID: "bloom.bloomThreshold",
+                showPropertyRule: { "bloomMode": "enabled" },
+            },
+            {
+                label: "Bloom Size",
+                type: "slider",
+                min: 0,
+                max: 2,
+                step: 0.01,
+                decimals: 2,
+                propertyID: "bloom.bloomSize",
+                showPropertyRule: { "bloomMode": "enabled" },
+            },
+        ]
+    },
+    {
+        id: "model",
+        addToGroup: "base",
+        properties: [
+            {
+                label: "Model",
+                type: "string",
+                propertyID: "modelURL",
+            },
+            {
+                label: "Collision Shape",
+                type: "dropdown",
+                options: { "none": "No Collision", "box": "Box", "sphere": "Sphere", "compound": "Compound" , 
+                           "simple-hull": "Basic - Whole model", "simple-compound": "Good - Sub-meshes" , 
+                           "static-mesh": "Exact - All polygons (non-dynamic only)" },
+                propertyID: "shapeType",
+            },
+            {
+                label: "Compound Shape",
+                type: "string",
+                propertyID: "compoundShapeURL",
+            },
+            {
+                label: "Animation",
+                type: "string",
+                propertyID: "animation.url",
+            },
+            {
+                label: "Play Automatically",
+                type: "bool",
+                propertyID: "animation.running",
+            },
+            {
+                label: "Loop",
+                type: "bool",
+                propertyID: "animation.loop",
+            },
+            {
+                label: "Allow Transition",
+                type: "bool",
+                propertyID: "animation.allowTranslation",
+            },
+            {
+                label: "Hold",
+                type: "bool",
+                propertyID: "animation.hold",
+            },
+            {
+                label: "Animation Frame",
+                type: "number",
+                propertyID: "animation.currentFrame",
+            },
+            {
+                label: "First Frame",
+                type: "number",
+                propertyID: "animation.firstFrame",
+            },
+            {
+                label: "Last Frame",
+                type: "number",
+                propertyID: "animation.lastFrame",
+            },
+            {
+                label: "Animation FPS",
+                type: "number",
+                propertyID: "animation.fps",
+            },
+            {
+                label: "Texture",
+                type: "textarea",
+                propertyID: "textures",
+            },
+            {
+                label: "Original Texture",
+                type: "textarea",
+                propertyID: "originalTextures",
+                readOnly: true,
+            },
+        ]
+    },
+    {
+        id: "image",
+        addToGroup: "base",
+        properties: [
+            {
+                label: "Image",
+                type: "string",
+                propertyID: "image",
+            },
+        ]
+    },
+    {
+        id: "web",
+        addToGroup: "base",
+        properties: [
+            {
+                label: "Source",
+                type: "string",
+                propertyID: "sourceUrl",
+            },
+            {
+                label: "Source Resolution",
+                type: "number",
+                propertyID: "dpi",
+            },
+        ]
+    },
+    {
+        id: "light",
+        addToGroup: "base",
+        properties: [
+            {
+                label: "Light Color",
+                type: "color",
+                propertyID: "lightColor",
+                propertyName: "color", // actual entity property name
+            },
+            {
+                label: "Intensity",
+                type: "number",
+                min: 0,
+                step: 0.1,
+                decimals: 1,
+                propertyID: "intensity",
+            },
+            {
+                label: "Fall-Off Radius",
+                type: "number",
+                min: 0,
+                step: 0.1,
+                decimals: 1,
+                unit: "m",
+                propertyID: "falloffRadius",
+            },
+            {
+                label: "Spotlight",
+                type: "bool",
+                propertyID: "isSpotlight",
+            },
+            {
+                label: "Spotlight Exponent",
+                type: "number",
+                step: 0.01,
+                decimals: 2,
+                propertyID: "exponent",
+            },
+            {
+                label: "Spotlight Cut-Off",
+                type: "number",
+                step: 0.01,
+                decimals: 2,
+                propertyID: "cutoff",
+            },
+        ]
+    },
+    {
+        id: "material",
+        addToGroup: "base",
+        properties: [
+            {
+                label: "Material URL",
+                type: "string",
+                propertyID: "materialURL",
+            },
+            {
+                label: "Material Data",
+                type: "textarea",
+                buttons: [ { id: "clear", label: "Clear Material Data", className: "red", onClick: clearMaterialData }, 
+                           { id: "edit", label: "Edit as JSON", className: "blue", onClick: newJSONMaterialEditor },
+                           { id: "save", label: "Save Material Data", className: "black", onClick: saveMaterialData } ],
+                propertyID: "materialData",
+            },
+            {
+                label: "Submesh to Replace",
+                type: "number",
+                min: 0,
+                step: 1,
+                propertyID: "submeshToReplace",
+            },
+            {
+                label: "Material Name to Replace",
+                type: "string",
+                propertyID: "materialNameToReplace",
+            },
+            {
+                label: "Select Submesh",
+                type: "bool",
+                propertyID: "selectSubmesh",
+            },
+            {
+                label: "Priority",
+                type: "number",
+                min: 0,
+                propertyID: "priority",
+            },
+            {
+                label: "Material Position",
+                type: "vec2",
+                vec2Type: "xy",
+                min: 0,
+                max: 1,
+                step: 0.1,
+                decimals: 4,
+                subLabels: [ "x", "y" ],
+                propertyID: "materialMappingPos",
+            },
+            {
+                label: "Material Scale",
+                type: "vec2",
+                vec2Type: "wh",
+                min: 0,
+                step: 0.1,
+                decimals: 4,
+                subLabels: [ "width", "height" ],
+                propertyID: "materialMappingScale",
+            },
+            {
+                label: "Material Rotation",
+                type: "number",
+                step: 0.1,
+                decimals: 2,
+                unit: "deg",
+                propertyID: "materialMappingRot",
+            },
+        ]
+    },
+    {
+        id: "particles",
+        addToGroup: "base",
+        properties: [
+            {
+                label: "Emit",
+                type: "bool",
+                propertyID: "isEmitting",
+            },
+            {
+                label: "Lifespan",
+                type: "slider",
+                unit: "s",
+                min: 0.01,
+                max: 10,
+                step: 0.01,
+                decimals: 2,
+                propertyID: "lifespan",
+            },
+            {
+                label: "Max Particles",
+                type: "slider",
+                min: 1,
+                max: 10000,
+                step: 1,
+                propertyID: "maxParticles",
+            },
+            {
+                label: "Texture",
+                type: "texture",
+                propertyID: "particleTextures",
+                propertyName: "textures", // actual entity property name
+            },
+        ]
+    },
+    {
+        id: "particles_emit",
+        label: "EMIT",
+        properties: [
+            {
+                label: "Emit Rate",
+                type: "slider",
+                min: 1,
+                max: 1000,
+                step: 1,
+                propertyID: "emitRate",
+            },
+            {
+                label: "Emit Speed",
+                type: "slider",
+                min: 0,
+                max: 5,
+                step: 0.01,
+                decimals: 2,
+                propertyID: "emitSpeed",
+            },
+            {
+                label: "Speed Spread",
+                type: "slider",
+                min: 0,
+                max: 5,
+                step: 0.01,
+                decimals: 2,
+                propertyID: "speedSpread",
+            },
+            {
+                label: "Emit Dimension",
+                type: "vec3",
+                vec3Type: "xyz",
+                min: 0,
+                step: 0.01,
+                round: 100,
+                subLabels: [ "x", "y", "z" ],
+                propertyID: "emitDimensions",
+            },
+            {
+                label: "Emit Orientation",
+                type: "vec3",
+                vec3Type: "pyr",
+                step: 0.01,
+                round: 100,
+                subLabels: [ "pitch", "yaw", "roll" ],
+                unit: "deg",
+                propertyID: "emitOrientation",
+            },
+            {
+                label: "Trails",
+                type: "bool",
+                propertyID: "emitterShouldTrail",
+            },
+        ]
+    },
+    {
+        id: "particles_size",
+        label: "SIZE",
+        properties: [
+            {
+                label: "Size",
+                type: "slider",
+                min: 0,
+                max: 4,
+                step: 0.01,
+                decimals: 2,
+                propertyID: "particleRadius",
+            },
+            {
+                label: "Size Spread",
+                type: "slider",
+                min: 0,
+                max: 4,
+                step: 0.01,
+                decimals: 2,
+                propertyID: "radiusSpread",
+            },
+            {
+                label: "Size Start",
+                type: "slider",
+                min: 0,
+                max: 4,
+                step: 0.01,
+                decimals: 2,
+                propertyID: "radiusStart",
+                fallbackProperty: "particleRadius",
+            },
+            {
+                label: "Size Finish",
+                type: "slider",
+                min: 0,
+                max: 4,
+                step: 0.01,
+                decimals: 2,
+                propertyID: "radiusFinish",
+                fallbackProperty: "particleRadius",
+            },
+        ]
+    },
+    {
+        id: "particles_color",
+        label: "COLOR",
+        properties: [
+            {
+                label: "Color",
+                type: "color",
+                propertyID: "particleColor",
+                propertyName: "color", // actual entity property name
+            },
+            {
+                label: "Color Start",
+                type: "color",
+                propertyID: "colorStart",
+                fallbackProperty: "color",
+            },
+            {
+                label: "Color Finish",
+                type: "color",
+                propertyID: "colorFinish",
+                fallbackProperty: "color",
+            },
+            {
+                label: "Color Spread",
+                type: "color",
+                propertyID: "colorSpread",
+            },
+        ]
+    },
+    {
+        id: "particles_alpha",
+        label: "ALPHA",
+        properties: [
+            {
+                label: "Alpha",
+                type: "slider",
+                min: 0,
+                max: 1,
+                step: 0.01,
+                decimals: 2,
+                propertyID: "alpha",
+            },
+            {
+                label: "Alpha Spread",
+                type: "slider",
+                min: 0,
+                max: 1,
+                step: 0.01,
+                decimals: 2,
+                propertyID: "alphaSpread",
+            },
+            {
+                label: "Alpha Start",
+                type: "slider",
+                min: 0,
+                max: 1,
+                step: 0.01,
+                decimals: 2,
+                propertyID: "alphaStart",
+                fallbackProperty: "alpha",
+            },
+            {
+                label: "Alpha Finish",
+                type: "slider",
+                min: 0,
+                max: 1,
+                step: 0.01,
+                decimals: 2,
+                propertyID: "alphaFinish",
+                fallbackProperty: "alpha",
+            },
+        ]
+    },
+    {
+        id: "particles_acceleration",
+        label: "ACCELERATION",
+        properties: [
+            {
+                label: "Emit Acceleration",
+                type: "vec3",
+                vec3Type: "xyz",
+                step: 0.01,
+                round: 100,
+                subLabels: [ "x", "y", "z" ],
+                propertyID: "emitAcceleration",
+            },
+            {
+                label: "Acceleration Spread",
+                type: "vec3",
+                vec3Type: "xyz",
+                step: 0.01,
+                round: 100,
+                subLabels: [ "x", "y", "z" ],
+                propertyID: "accelerationSpread",
+            },
+        ]
+    },
+    {
+        id: "particles_spin",
+        label: "SPIN",
+        properties: [
+            {
+                label: "Spin",
+                type: "slider",
+                min: -360,
+                max: 360,
+                step: 1,
+                decimals: 0,
+                multiplier: DEGREES_TO_RADIANS,
+                unit: "deg",
+                propertyID: "particleSpin",
+            },
+            {
+                label: "Spin Spread",
+                type: "slider",
+                min: 0,
+                max: 360,
+                step: 1,
+                decimals: 0,
+                multiplier: DEGREES_TO_RADIANS,
+                unit: "deg",
+                propertyID: "spinSpread",
+            },
+            {
+                label: "Spin Start",
+                type: "slider",
+                min: -360,
+                max: 360,
+                step: 1,
+                decimals: 0,
+                multiplier: DEGREES_TO_RADIANS,
+                unit: "deg",
+                propertyID: "spinStart",
+                fallbackProperty: "particleSpin",
+            },
+            {
+                label: "Spin Finish",
+                type: "slider",
+                min: -360,
+                max: 360,
+                step: 1,
+                decimals: 0,
+                multiplier: DEGREES_TO_RADIANS,
+                unit: "deg",
+                propertyID: "spinFinish",
+                fallbackProperty: "particleSpin",
+            },
+            {
+                label: "Rotate with Entity",
+                type: "bool",
+                propertyID: "rotateWithEntity",
+            },
+        ]
+    },
+    {
+        id: "particles_constraints",
+        label: "CONSTRAINTS",
+        properties: [
+            {
+                label: "Horizontal Angle Start",
+                type: "slider",
+                min: -180,
+                max: 0,
+                step: 1,
+                decimals: 0,
+                multiplier: DEGREES_TO_RADIANS,
+                unit: "deg",
+                propertyID: "azimuthStart",
+            },
+            {
+                label: "Horizontal Angle Finish",
+                type: "slider",
+                min: 0,
+                max: 180,
+                step: 1,
+                decimals: 0,
+                multiplier: DEGREES_TO_RADIANS,
+                unit: "deg",
+                propertyID: "azimuthFinish",
+            },
+            {
+                label: "Vertical Angle Start",
+                type: "slider",
+                min: 0,
+                max: 180,
+                step: 1,
+                decimals: 0,
+                multiplier: DEGREES_TO_RADIANS,
+                unit: "deg",
+                propertyID: "polarStart",
+            },
+            {
+                label: "Vertical Angle Finish",
+                type: "slider",
+                min: 0,
+                max: 180,
+                step: 1,
+                decimals: 0,
+                multiplier: DEGREES_TO_RADIANS,
+                unit: "deg",
+                propertyID: "polarFinish",
+            },
+        ]
+    },
+    {
+        id: "spatial",
+        label: "SPATIAL",
+        properties: [
+            {
+                label: "Position",
+                type: "vec3",
+                vec3Type: "xyz",
+                decimals: 4,
+                subLabels: [ "x", "y", "z" ],
+                unit: "m",
+                propertyID: "position",
+            },
+            {
+                label: "Rotation",
+                type: "vec3",
+                vec3Type: "pyr",
+                step: 0.1,
+                decimals: 4,
+                subLabels: [ "pitch", "yaw", "roll" ],
+                unit: "deg",
+                propertyID: "rotation",
+            },
+            {
+                label: "Dimension",
+                type: "vec3",
+                vec3Type: "xyz",
+                min: 0,
+                step: 0.1,
+                decimals: 4,
+                subLabels: [ "x", "y", "z" ],
+                unit: "m",
+                propertyID: "dimensions",
+            },
+            {
+                label: "Scale",
+                type: "number",
+                defaultValue: 100,
+                unit: "%",
+                buttons: [ { id: "rescale", label: "Rescale", className: "blue", onClick: rescaleDimensions }, 
+                           { id: "reset", label: "Reset Dimensions", className: "red", onClick: resetToNaturalDimensions } ],
+                propertyID: "scale",
+            },
+            {
+                label: "Pivot",
+                type: "vec3",
+                vec3Type: "xyz",
+                step: 0.1,
+                decimals: 4,
+                subLabels: [ "x", "y", "z" ],
+                unit: "(ratio of dimension)",
+                propertyID: "registrationPoint",
+            },
+            {
+                label: "Align",
+                type: "buttons",
+                buttons: [ { id: "selection", label: "Selection to Grid", className: "black", onClick: moveSelectionToGrid },
+                           { id: "all", label: "All to Grid", className: "black", onClick: moveAllToGrid } ],
+                propertyID: "alignToGrid",
+            },
+        ]
+    },
+    {
+        id: "behavior",
+        label: "BEHAVIOR",
+        properties: [
+            {
+                label: "Grabbable",
+                type: "bool",
+                propertyID: "grab.grabbable",
+            },
+            {
+                label: "Cloneable",
+                type: "bool",
+                propertyID: "cloneable",
+            },
+            {
+                label: "Clone Lifetime",
+                type: "number",
+                unit: "s",
+                propertyID: "cloneLifetime",
+                showPropertyRule: { "cloneable": "true" },
+            },
+            {
+                label: "Clone Limit",
+                type: "number",
+                propertyID: "cloneLimit",
+                showPropertyRule: { "cloneable": "true" },
+            },
+            {
+                label: "Clone Dynamic",
+                type: "bool",
+                propertyID: "cloneDynamic",
+                showPropertyRule: { "cloneable": "true" },
+            },
+            {
+                label: "Clone Avatar Entity",
+                type: "bool",
+                propertyID: "cloneAvatarEntity",
+                showPropertyRule: { "cloneable": "true" },
+            },
+            {
+                label: "Triggerable",
+                type: "bool",
+                propertyID: "grab.triggerable",
+            },
+            {
+                label: "Follow Controller",
+                type: "bool",
+                propertyID: "grab.grabFollowsController",
+            },
+            {
+                label: "Cast shadows",
+                type: "bool",
+                propertyID: "canCastShadow",
+            },
+            {
+                label: "Link",
+                type: "string",
+                propertyID: "href",
+            },
+            {
+                label: "Script",
+                type: "string",
+                buttons: [ { id: "reload", label: "F", className: "glyph", onClick: reloadScripts } ],
+                propertyID: "script",
+            },
+            {
+                label: "Server Script",
+                type: "string",
+                buttons: [ { id: "reload", label: "F", className: "glyph", onClick: reloadServerScripts } ],
+                propertyID: "serverScripts",
+            },
+            {
+                label: "Lifetime",
+                type: "number",
+                unit: "s",
+                propertyID: "lifetime",
+            },
+            {
+                label: "User Data",
+                type: "textarea",
+                buttons: [ { id: "clear", label: "Clear User Data", className: "red", onClick: clearUserData }, 
+                           { id: "edit", label: "Edit as JSON", className: "blue", onClick: newJSONEditor },
+                           { id: "save", label: "Save User Data", className: "black", onClick: saveUserData } ],
+                propertyID: "userData",
+            },
+        ]
+    },
+    {
+        id: "collision",
+        label: "COLLISION",
+        properties: [
+            {
+                label: "Collides",
+                type: "bool",
+                inverse: true,
+                propertyID: "collisionless",
+            },
+            {
+                label: "Collides With",
+                type: "sub-header",
+                propertyID: "collidesWithHeader", // not actually a property but used for naming/storing this element
+                showPropertyRule: { "collisionless": "false" },
+            },
+            {
+                label: "Static Entities",
+                type: "bool",
+                propertyID: "collidesWithStatic",
+                propertyName: "static", // actual subProperty name
+                subPropertyOf: "collidesWith",
+                showPropertyRule: { "collisionless": "false" },
+            },
+            {
+                label: "Kinematic Entities",
+                type: "bool",
+                propertyID: "collidesWithKinematic",
+                propertyName: "kinematic", // actual subProperty name
+                subPropertyOf: "collidesWith",
+                showPropertyRule: { "collisionless": "false" },
+            },
+            {
+                label: "Dynamic Entities",
+                type: "bool",
+                propertyID: "collidesWithDynamic",
+                propertyName: "dynamic", // actual subProperty name
+                subPropertyOf: "collidesWith",
+                showPropertyRule: { "collisionless": "false" },
+            },
+            {
+                label: "My Avatar",
+                type: "bool",
+                propertyID: "collidesWithMyAvatar",
+                propertyName: "myAvatar", // actual subProperty name
+                subPropertyOf: "collidesWith",
+                showPropertyRule: { "collisionless": "false" },
+            },
+            {
+                label: "Other Avatars",
+                type: "bool",
+                propertyID: "collidesWithOtherAvatar",
+                propertyName: "otherAvatar", // actual subProperty name
+                subPropertyOf: "collidesWith",
+                showPropertyRule: { "collisionless": "false" },
+            },
+            {
+                label: "Collision sound URL",
+                type: "string",
+                propertyID: "collisionSoundURL",
+                showPropertyRule: { "collisionless": "false" },
+            },
+            {
+                label: "Dynamic",
+                type: "bool",
+                propertyID: "dynamic",
+            },
+        ]
+    },
+    {
+        id: "physics",
+        label: "PHYSICS",
+        properties: [
+            {
+                label: "Linear Velocity",
+                type: "vec3",
+                vec3Type: "xyz",
+                decimals: 4,
+                subLabels: [ "x", "y", "z" ],
+                unit: "m/s",
+                propertyID: "velocity",
+            },
+            {
+                label: "Linear Damping",
+                type: "number",
+                decimals: 2,
+                propertyID: "damping",
+            },
+            {
+                label: "Angular Velocity",
+                type: "vec3",
+                vec3Type: "pyr",
+                multiplier: DEGREES_TO_RADIANS,
+                decimals: 4,
+                subLabels: [ "pitch", "yaw", "roll" ],
+                unit: "deg/s",
+                propertyID: "angularVelocity",
+            },
+            {
+                label: "Angular Damping",
+                type: "number",
+                decimals: 4,
+                propertyID: "angularDamping",
+            },
+            {
+                label: "Bounciness",
+                type: "number",
+                decimals: 4,
+                propertyID: "restitution",
+            },
+            {
+                label: "Friction",
+                type: "number",
+                decimals: 4,
+                propertyID: "friction",
+            },
+            {
+                label: "Density",
+                type: "number",
+                decimals: 4,
+                propertyID: "density",
+            },
+            {
+                label: "Gravity",
+                type: "vec3",
+                vec3Type: "xyz",
+                subLabels: [ "x", "y", "z" ],
+                unit: "m/s<sup>2</sup>",
+                propertyID: "gravity",
+            },
+            {
+                label: "Acceleration",
+                type: "vec3",
+                vec3Type: "xyz",
+                subLabels: [ "x", "y", "z" ],
+                decimals: 4,
+                unit: "m/s<sup>2</sup>",
+                propertyID: "acceleration",
+            },
+        ]
+    },
+];
+
+const GROUPS_PER_TYPE = {
+  None: [ 'base', 'spatial', 'behavior', 'collision', 'physics' ],
+  Shape: [ 'base', 'shape', 'spatial', 'behavior', 'collision', 'physics' ],
+  Text: [ 'base', 'text', 'spatial', 'behavior', 'collision', 'physics' ],
+  Zone: [ 'base', 'zone', 'spatial', 'behavior', 'collision', 'physics' ],
+  Model: [ 'base', 'model', 'spatial', 'behavior', 'collision', 'physics' ],
+  Image: [ 'base', 'image', 'spatial', 'behavior', 'collision', 'physics' ],
+  Web: [ 'base', 'web', 'spatial', 'behavior', 'collision', 'physics' ],
+  Light: [ 'base', 'light', 'spatial', 'behavior', 'collision', 'physics' ],
+  Material: [ 'base', 'material', 'spatial', 'behavior' ],
+  ParticleEffect: [ 'base', 'particles', 'particles_emit', 'particles_size', 'particles_color', 'particles_alpha', 
+                    'particles_acceleration', 'particles_spin', 'particles_constraints', 'spatial', 'behavior', 'physics' ],
+  Multiple: [ 'base', 'spatial', 'behavior', 'collision', 'physics' ],
 };
 
-var EDITOR_TIMEOUT_DURATION = 1500;
-var KEY_P = 80; // Key code for letter p used for Parenting hotkey.
+const EDITOR_TIMEOUT_DURATION = 1500;
+const DEBOUNCE_TIMEOUT = 125;
+
+const COLOR_MIN = 0;
+const COLOR_MAX = 255;
+const COLOR_STEP = 1;
+
+const KEY_P = 80; // Key code for letter p used for Parenting hotkey.
+
+const MATERIAL_PREFIX_STRING = "mat::";
+
+const PENDING_SCRIPT_STATUS = "[ Fetching status ]";
+const NOT_RUNNING_SCRIPT_STATUS = "Not running";
+const ENTITY_SCRIPT_STATUS = {
+    pending: "Pending",
+    loading: "Loading",
+    error_loading_script: "Error loading script", // eslint-disable-line camelcase
+    error_running_script: "Error running script", // eslint-disable-line camelcase
+    running: "Running",
+    unloaded: "Unloaded"
+};
+
+const PROPERTY_NAME_DIVISION = {
+    GROUP: 0,
+    PROPERTY: 1,
+    SUBPROPERTY: 2,
+};
+
+const VECTOR_ELEMENTS = {
+    X_INPUT: 0,
+    Y_INPUT: 1,
+    Z_INPUT: 2,
+};
+
+const COLOR_ELEMENTS = {
+    COLOR_PICKER: 0,
+    RED_INPUT: 1,
+    GREEN_INPUT: 2,
+    BLUE_INPUT: 3,
+};
+
+const SLIDER_ELEMENTS = {
+    SLIDER: 0,
+    NUMBER_INPUT: 1,
+};
+
+const ICON_ELEMENTS = {
+    ICON: 0,
+    LABEL: 1,
+};
+
+const TEXTURE_ELEMENTS = {
+    IMAGE: 0,
+    TEXT_INPUT: 1,
+};
+
+const JSON_EDITOR_ROW_DIV_INDEX = 2;
+
+var elGroups = {};
+var properties = {};
 var colorPickers = {};
+var particlePropertyUpdates = {};
+var selectedEntityProperties;
 var lastEntityID = null;
 
-var MATERIAL_PREFIX_STRING = "mat::";
-
-var PENDING_SCRIPT_STATUS = "[ Fetching status ]";
-
 function debugPrint(message) {
     EventBridge.emitWebEvent(
         JSON.stringify({
@@ -47,6 +1317,34 @@ function debugPrint(message) {
     );
 }
 
+
+/**
+ * GENERAL PROPERTY/GROUP FUNCTIONS
+ */
+
+function getPropertyInputElement(propertyID) {
+    let property = properties[propertyID];          
+    switch (property.data.type) {
+        case 'string':
+        case 'bool':
+        case 'number':
+        case 'slider':
+        case 'dropdown':
+        case 'textarea':
+        case 'texture':
+            return property.elInput;
+        case 'vec3': 
+        case 'vec2':
+            return { x: property.elInputX, y: property.elInputY, z: property.elInputZ };
+        case 'color':
+            return { red: property.elInputR, green: property.elInputG, blue: property.elInputB };
+        case 'icon':
+            return property.elLabel;
+        default:
+            return undefined;
+    }
+}
+
 function enableChildren(el, selector) {
     var elSelectors = el.querySelectorAll(selector);
     for (var selectorIndex = 0; selectorIndex < elSelectors.length; ++selectorIndex) {
@@ -64,7 +1362,7 @@ function disableChildren(el, selector) {
 function enableProperties() {
     enableChildren(document.getElementById("properties-list"), "input, textarea, checkbox, .dropdown dl, .color-picker");
     enableChildren(document, ".colpick");
-    var elLocked = document.getElementById("property-locked");
+    var elLocked = getPropertyInputElement("locked");
 
     if (elLocked.checked === false) {
         removeStaticUserData();
@@ -72,83 +1370,196 @@ function enableProperties() {
     }
 }
 
-
 function disableProperties() {
     disableChildren(document.getElementById("properties-list"), "input, textarea, checkbox, .dropdown dl, .color-picker");
     disableChildren(document, ".colpick");
     for (var pickKey in colorPickers) {
         colorPickers[pickKey].colpickHide();
     }
-    var elLocked = document.getElementById("property-locked");
+    var elLocked = getPropertyInputElement("locked");
 
     if (elLocked.checked === true) {
-        if ($('#userdata-editor').css('display') === "block") {
+        if ($('#property-userData-editor').css('display') === "block") {
             showStaticUserData();
         }
-        if ($('#materialdata-editor').css('display') === "block") {
+        if ($('#property-materialData-editor').css('display') === "block") {
             showStaticMaterialData();
         }
     }
 }
 
-function showElements(els, show) {
-    for (var i = 0; i < els.length; i++) {
-        els[i].style.display = (show) ? 'table' : 'none';
+function showPropertyElement(propertyID, show) {
+    let elProperty = properties[propertyID].elProperty;
+    elProperty.style.display = show ? "table" : "none";
+}
+
+function resetProperties() {
+    for (let propertyID in properties) { 
+        let property = properties[propertyID];      
+        let propertyData = property.data;
+        
+        switch (propertyData.type) {
+            case 'string': {
+                property.elInput.value = "";
+                break;
+            }
+            case 'bool': {
+                property.elInput.checked = false;
+                break;
+            }
+            case 'number':
+            case 'slider': {
+                if (propertyData.defaultValue !== undefined) {
+                    property.elInput.value = propertyData.defaultValue;
+                } else { 
+                    property.elInput.value = "";
+                }
+                if (property.elSlider !== undefined) {
+                    property.elSlider.value = property.elInput.value;   
+                }
+                break;
+            }
+            case 'vec3': 
+            case 'vec2': {
+                property.elInputX.value = "";
+                property.elInputY.value = "";
+                if (property.elInputZ !== undefined) {
+                    property.elInputZ.value = "";
+                }
+                break;
+            }
+            case 'color': {
+                property.elColorPicker.style.backgroundColor = "rgb(" + 0 + "," + 0 + "," + 0 + ")";
+                property.elInputR.value = "";
+                property.elInputG.value = "";
+                property.elInputB.value = "";
+                break;
+            }
+            case 'dropdown': {
+                property.elInput.value = "";
+                setDropdownText(property.elInput);
+                break;
+            }
+            case 'textarea': {
+                property.elInput.value = "";
+                setTextareaScrolling(property.elInput);
+                break;
+            }
+            case 'icon': {
+                property.elSpan.style.display = "none";
+                property.elLabel.innerHTML = propertyData.label;
+                break;
+            }
+            case 'texture': {
+                property.elInput.value = "";
+                property.elInput.imageLoad(property.elInput.value);
+                break;
+            }
+        }
+        
+        let showPropertyRules = properties[propertyID].showPropertyRules;
+        if (showPropertyRules !== undefined) {
+            for (let propertyToHide in showPropertyRules) {
+                showPropertyElement(propertyToHide, false);
+            }
+        }
+    }
+    
+    let elServerScriptError = document.getElementById("property-serverScripts-error");
+    let elServerScriptStatus = document.getElementById("property-serverScripts-status");
+    elServerScriptError.parentElement.style.display = "none";
+    elServerScriptStatus.innerText = NOT_RUNNING_SCRIPT_STATUS;
+}
+
+function showGroupsForType(type) {
+    if (type === "Box" || type === "Sphere") {
+        type = "Shape";
+    }
+    
+    let typeGroups = GROUPS_PER_TYPE[type];
+
+    for (let groupKey in elGroups) {
+        let elGroup = elGroups[groupKey];
+        if (typeGroups && typeGroups.indexOf(groupKey) > -1) {
+            elGroup.style.display = "block";
+        } else {
+            elGroup.style.display = "none";
+        }
     }
 }
 
-function updateProperty(propertyName, propertyValue) {
-    var properties = {};
-    properties[propertyName] = propertyValue;
-    updateProperties(properties);
+function getPropertyValue(originalPropertyName) {
+    // if this is a compound property name (i.e. animation.running) 
+    // then split it by . up to 3 times to find property value
+    let propertyValue;
+    let splitPropertyName = originalPropertyName.split('.');
+    if (splitPropertyName.length > 1) {
+        let propertyGroupName = splitPropertyName[PROPERTY_NAME_DIVISION.GROUP];
+        let propertyName = splitPropertyName[PROPERTY_NAME_DIVISION.PROPERTY];
+        let groupProperties = selectedEntityProperties[propertyGroupName];
+        if (groupProperties === undefined || groupProperties[propertyName] === undefined) {
+            return undefined;
+        }
+        if (splitPropertyName.length === PROPERTY_NAME_DIVISION.SUBPROPERTY + 1) { 
+            let subPropertyName = splitPropertyName[PROPERTY_NAME_DIVISION.SUBPROPERTY];
+            propertyValue = groupProperties[propertyName][subPropertyName];
+        } else {
+            propertyValue = groupProperties[propertyName];
+        }
+    } else {
+        propertyValue = selectedEntityProperties[originalPropertyName];
+    }
+    return propertyValue;
 }
 
-function updateProperties(properties) {
+
+/**
+ * PROPERTY UPDATE FUNCTIONS
+ */
+
+function updateProperty(originalPropertyName, propertyValue) {
+    let propertyUpdate = {};
+    // if this is a compound property name (i.e. animation.running) then split it by . up to 3 times
+    let splitPropertyName = originalPropertyName.split('.');
+    if (splitPropertyName.length > 1) {
+        let propertyGroupName = splitPropertyName[PROPERTY_NAME_DIVISION.GROUP];
+        let propertyName = splitPropertyName[PROPERTY_NAME_DIVISION.PROPERTY];
+        propertyUpdate[propertyGroupName] = {};
+        if (splitPropertyName.length === PROPERTY_NAME_DIVISION.SUBPROPERTY + 1) { 
+            let subPropertyName = splitPropertyName[PROPERTY_NAME_DIVISION.SUBPROPERTY];
+            propertyUpdate[propertyGroupName][propertyName] = {};
+            propertyUpdate[propertyGroupName][propertyName][subPropertyName] = propertyValue;
+        } else {
+            propertyUpdate[propertyGroupName][propertyName] = propertyValue;
+        }
+    } else {
+        propertyUpdate[originalPropertyName] = propertyValue;
+    }
+    // queue up particle property changes with the debounced sync to avoid  
+    // causing particle emitting to reset each frame when updating values
+    if (properties[originalPropertyName].isParticleProperty) {
+        Object.keys(propertyUpdate).forEach(function (propertyUpdateKey) {
+            particlePropertyUpdates[propertyUpdateKey] = propertyUpdate[propertyUpdateKey];
+        });
+        particleSyncDebounce();
+    } else {
+        updateProperties(propertyUpdate);
+    }
+}
+
+var particleSyncDebounce = _.debounce(function () {
+    updateProperties(particlePropertyUpdates);
+    particlePropertyUpdates = {};
+}, DEBOUNCE_TIMEOUT);
+
+function updateProperties(propertiesToUpdate) {
     EventBridge.emitWebEvent(JSON.stringify({
         id: lastEntityID,
         type: "update",
-        properties: properties
+        properties: propertiesToUpdate
     }));
 }
 
-function createEmitCheckedPropertyUpdateFunction(propertyName) {
-    return function() {
-        updateProperty(propertyName, this.checked);
-    };
-}
-
-function createEmitGroupCheckedPropertyUpdateFunction(group, propertyName) {
-    return function() {
-        var properties = {};
-        properties[group] = {};
-        properties[group][propertyName] = this.checked;
-        updateProperties(properties);
-    };
-}
-
-function createEmitNumberPropertyUpdateFunction(propertyName, decimals) {
-    decimals = ((decimals === undefined) ? 4 : decimals);
-    return function() {
-        var value = parseFloat(this.value).toFixed(decimals);
-        updateProperty(propertyName, value);
-    };
-}
-
-function createEmitGroupNumberPropertyUpdateFunction(group, propertyName) {
-    return function() {
-        var properties = {};
-        properties[group] = {};
-        properties[group][propertyName] = this.value;
-        updateProperties(properties);
-    };
-}
-
-function createImageURLUpdateFunction(propertyName) {
-    return function () {
-        var newTextures = JSON.stringify({ "tex.picture": this.value });
-        updateProperty(propertyName, newTextures);
-    };
-}
 
 function createEmitTextPropertyUpdateFunction(propertyName) {
     return function() {
@@ -156,118 +1567,62 @@ function createEmitTextPropertyUpdateFunction(propertyName) {
     };
 }
 
-function createZoneComponentModeChangedFunction(zoneComponent, zoneComponentModeInherit,
-    zoneComponentModeDisabled, zoneComponentModeEnabled) {
-
+function createEmitCheckedPropertyUpdateFunction(propertyName, inverse) {
     return function() {
-        var zoneComponentMode;
+        updateProperty(propertyName, inverse ? !this.checked : this.checked);
+    };
+}
 
-        if (zoneComponentModeInherit.checked) {
-            zoneComponentMode = 'inherit';
-        } else if (zoneComponentModeDisabled.checked) {
-            zoneComponentMode = 'disabled';
-        } else if (zoneComponentModeEnabled.checked) {
-            zoneComponentMode = 'enabled';
+function createEmitNumberPropertyUpdateFunction(propertyName, multiplier) {
+    return function() {
+        if (multiplier === undefined) {
+            multiplier = 1;
         }
-
-        updateProperty(zoneComponent, zoneComponentMode);
+        let value = parseFloat(this.value) * multiplier;
+        updateProperty(propertyName, value);
     };
 }
 
-function createEmitGroupTextPropertyUpdateFunction(group, propertyName) {
-    return function() {
-        var properties = {};
-        properties[group] = {};
-        properties[group][propertyName] = this.value;
-        updateProperties(properties);
-    };
-}
-
-function createEmitVec2PropertyUpdateFunction(property, elX, elY) {
+function createEmitVec2PropertyUpdateFunction(propertyName, elX, elY, multiplier) {
     return function () {
-        var properties = {};
-        properties[property] = {
-            x: elX.value,
-            y: elY.value
+        if (multiplier === undefined) {
+            multiplier = 1;
+        }
+        let newValue = {
+            x: elX.value * multiplier,
+            y: elY.value * multiplier
         };
-        updateProperties(properties);
+        updateProperty(propertyName, newValue);
     };
 }
 
-function createEmitVec3PropertyUpdateFunction(property, elX, elY, elZ) {
+function createEmitVec3PropertyUpdateFunction(propertyName, elX, elY, elZ, multiplier) {
     return function() {
-        var properties = {};
-        properties[property] = {
-            x: elX.value,
-            y: elY.value,
-            z: elZ.value
-        };
-        updateProperties(properties);
-    };
-}
-
-function createEmitGroupVec3PropertyUpdateFunction(group, property, elX, elY, elZ) {
-    return function() {
-        var properties = {};
-        properties[group] = {};
-        properties[group][property] = {
-            x: elX.value,
-            y: elY.value,
-            z: elZ ? elZ.value : 0
-        };
-        updateProperties(properties);
-    };
-}
-
-function createEmitVec3PropertyUpdateFunctionWithMultiplier(property, elX, elY, elZ, multiplier) {
-    return function() {
-        var properties = {};
-        properties[property] = {
+        if (multiplier === undefined) {
+            multiplier = 1;
+        }
+        let newValue = {
             x: elX.value * multiplier,
             y: elY.value * multiplier,
             z: elZ.value * multiplier
         };
-        updateProperties(properties);
+        updateProperty(propertyName, newValue);
     };
 }
 
-function createEmitColorPropertyUpdateFunction(property, elRed, elGreen, elBlue) {
+function createEmitColorPropertyUpdateFunction(propertyName, elRed, elGreen, elBlue) {
     return function() {
-        emitColorPropertyUpdate(property, elRed.value, elGreen.value, elBlue.value);
+        emitColorPropertyUpdate(propertyName, elRed.value, elGreen.value, elBlue.value);
     };
 }
 
-function emitColorPropertyUpdate(property, red, green, blue, group) {
-    var properties = {};
-    if (group) {
-        properties[group] = {};
-        properties[group][property] = {
-            red: red,
-            green: green,
-            blue: blue
-        };
-    } else {
-        properties[property] = {
-            red: red,
-            green: green,
-            blue: blue
-        };
-    }
-    updateProperties(properties);
-}
-
-
-function createEmitGroupColorPropertyUpdateFunction(group, property, elRed, elGreen, elBlue) {
-    return function() {
-        var properties = {};
-        properties[group] = {};
-        properties[group][property] = {
-            red: elRed.value,
-            green: elGreen.value,
-            blue: elBlue.value
-        };
-        updateProperties(properties);
+function emitColorPropertyUpdate(propertyName, red, green, blue) {
+    let newValue = {
+        red: red,
+        green: green,
+        blue: blue
     };
+    updateProperty(propertyName, newValue);
 }
 
 function updateCheckedSubProperty(propertyName, propertyValue, subPropertyElement, subPropertyString) {
@@ -282,6 +1637,591 @@ function updateCheckedSubProperty(propertyName, propertyValue, subPropertyElemen
     updateProperty(propertyName, propertyValue);
 }
 
+function createImageURLUpdateFunction(propertyName) {
+    return function () {
+        var newTextures = JSON.stringify({ "tex.picture": this.value });
+        updateProperty(propertyName, newTextures);
+    };
+}
+
+
+/**
+ * PROPERTY ELEMENT CREATION FUNCTIONS
+ */
+
+function createStringProperty(property, elProperty, elLabel) {    
+    let propertyName = property.name;
+    let elementID = property.elementID;
+    let propertyData = property.data;
+    
+    elProperty.className = "property text";
+    
+    let elInput = document.createElement('input');
+    elInput.setAttribute("id", elementID);
+    elInput.setAttribute("type", "text"); 
+    if (propertyData.readOnly) {
+        elInput.readOnly = true;
+    }
+    
+    elInput.addEventListener('change', createEmitTextPropertyUpdateFunction(propertyName));
+    
+    elProperty.appendChild(elLabel);
+    elProperty.appendChild(elInput);
+    
+    if (propertyData.buttons !== undefined) {
+        addButtons(elProperty, elementID, propertyData.buttons, false);
+    }
+    
+    return elInput;
+}
+
+function createBoolProperty(property, elProperty, elLabel) {   
+    let propertyName = property.name;
+    let elementID = property.elementID;
+    let propertyData = property.data;
+    
+    elProperty.className = "property checkbox";
+                        
+    if (propertyData.glyph !== undefined) {
+        elLabel.innerText = " " + propertyData.label;
+        let elSpan = document.createElement('span');
+        elSpan.innerHTML = propertyData.glyph;
+        elLabel.insertBefore(elSpan, elLabel.firstChild);
+    }
+    
+    let elInput = document.createElement('input');
+    elInput.setAttribute("id", elementID);
+    elInput.setAttribute("type", "checkbox");
+    
+    elProperty.appendChild(elInput);
+    elProperty.appendChild(elLabel);
+    
+    let subPropertyOf = propertyData.subPropertyOf;
+    if (subPropertyOf !== undefined) {
+        elInput.addEventListener('change', function() {
+            updateCheckedSubProperty(subPropertyOf, selectedEntityProperties[subPropertyOf], elInput, propertyName);
+        });
+    } else {
+        elInput.addEventListener('change', createEmitCheckedPropertyUpdateFunction(propertyName, propertyData.inverse));
+    }
+    
+    return elInput;
+}
+
+function createNumberProperty(property, elProperty, elLabel) { 
+    let propertyName = property.name;
+    let elementID = property.elementID;
+    let propertyData = property.data;
+    
+    elProperty.className = "property number";
+                        
+    addUnit(propertyData.unit, elLabel);
+    
+    let elInput = document.createElement('input');
+    elInput.setAttribute("id", elementID);
+    elInput.setAttribute("type", "number");
+    if (propertyData.min !== undefined) {
+        elInput.setAttribute("min", propertyData.min);
+    }
+    if (propertyData.max !== undefined) {
+        elInput.setAttribute("max", propertyData.max);
+    }
+    if (propertyData.step !== undefined) {
+        elInput.setAttribute("step", propertyData.step);
+    }
+    
+    let defaultValue = propertyData.defaultValue;
+    if (defaultValue !== undefined) {
+        elInput.value = defaultValue;
+    }
+    
+    elInput.addEventListener('change', createEmitNumberPropertyUpdateFunction(propertyName, propertyData.multiplier, propertyData.decimals));
+    
+    elProperty.appendChild(elLabel);
+    elProperty.appendChild(elInput);
+    
+    if (propertyData.buttons !== undefined) {
+        addButtons(elProperty, elementID, propertyData.buttons, true);
+    }
+    
+    return elInput;
+}
+
+function createSliderProperty(property, elProperty, elLabel) {  
+    let propertyData = property.data;
+    
+    elProperty.className = "property range";
+    
+    let elDiv = document.createElement("div");
+    elDiv.className = "slider-wrapper";
+    
+    let elSlider = document.createElement("input");
+    elSlider.setAttribute("type", "range");
+
+    let elInput = document.createElement("input");
+    elInput.setAttribute("type", "number");
+
+    if (propertyData.min !== undefined) {
+        elInput.setAttribute("min", propertyData.min);
+        elSlider.setAttribute("min", propertyData.min);
+    }
+    if (propertyData.max !== undefined) {
+        elInput.setAttribute("max", propertyData.max);
+        elSlider.setAttribute("max", propertyData.max);
+        elSlider.setAttribute("data-max", propertyData.max);
+    }
+    if (propertyData.step !== undefined) {
+        elInput.setAttribute("step", propertyData.step);
+        elSlider.setAttribute("step", propertyData.step);
+    }
+    
+    elInput.onchange = function (event) {
+        let inputValue = event.target.value;
+        elSlider.value = inputValue;
+        if (propertyData.multiplier !== undefined) {
+            inputValue *= propertyData.multiplier;
+        }
+        updateProperty(property.name, inputValue);
+    };
+    elSlider.oninput = function (event) {
+        let sliderValue = event.target.value;
+        if (propertyData.step === 1) {
+            if (sliderValue > 0) {
+                elInput.value = Math.floor(sliderValue);
+            } else {
+                elInput.value = Math.ceil(sliderValue);
+            }
+        } else {
+            elInput.value = sliderValue;
+        }
+        if (propertyData.multiplier !== undefined) {
+            sliderValue *= propertyData.multiplier;
+        }
+        updateProperty(property.name, sliderValue);
+    };
+
+    elDiv.appendChild(elLabel);
+    elDiv.appendChild(elSlider);
+    elDiv.appendChild(elInput);
+    elProperty.appendChild(elDiv);
+    
+    let elResult = [];
+    elResult[SLIDER_ELEMENTS.SLIDER] = elSlider;
+    elResult[SLIDER_ELEMENTS.NUMBER_INPUT] = elInput;
+    return elResult;
+}
+
+function createVec3Property(property, elProperty, elLabel) {
+    let propertyName = property.name;
+    let elementID = property.elementID;
+    let propertyData = property.data;
+
+    elProperty.className = "property " + propertyData.vec3Type + " fstuple";
+    
+    let elTuple = document.createElement('div');
+    elTuple.className = "tuple";
+    
+    addUnit(propertyData.unit, elLabel);
+    
+    elProperty.appendChild(elLabel);
+    elProperty.appendChild(elTuple);
+    
+    let elInputX = createTupleNumberInput(elTuple, elementID, propertyData.subLabels[VECTOR_ELEMENTS.X_INPUT], 
+                                          propertyData.min, propertyData.max, propertyData.step);
+    let elInputY = createTupleNumberInput(elTuple, elementID, propertyData.subLabels[VECTOR_ELEMENTS.Y_INPUT], 
+                                          propertyData.min, propertyData.max, propertyData.step);
+    let elInputZ = createTupleNumberInput(elTuple, elementID, propertyData.subLabels[VECTOR_ELEMENTS.Z_INPUT], 
+                                          propertyData.min, propertyData.max, propertyData.step);
+    
+    let inputChangeFunction = createEmitVec3PropertyUpdateFunction(propertyName, elInputX, elInputY, 
+                                                                   elInputZ, propertyData.multiplier);
+    elInputX.addEventListener('change', inputChangeFunction);
+    elInputY.addEventListener('change', inputChangeFunction);
+    elInputZ.addEventListener('change', inputChangeFunction);
+    
+    let elResult = [];
+    elResult[VECTOR_ELEMENTS.X_INPUT] = elInputX;
+    elResult[VECTOR_ELEMENTS.Y_INPUT] = elInputY;
+    elResult[VECTOR_ELEMENTS.Z_INPUT] = elInputZ;
+    return elResult;
+}
+
+function createVec2Property(property, elProperty, elLabel) {  
+    let propertyName = property.name;
+    let elementID = property.elementID;
+    let propertyData = property.data;
+    
+    elProperty.className = "property " + propertyData.vec2Type + " fstuple";
+                        
+    let elTuple = document.createElement('div');
+    elTuple.className = "tuple";
+    
+    addUnit(propertyData.unit, elLabel);
+    
+    elProperty.appendChild(elLabel);
+    elProperty.appendChild(elTuple);
+    
+    let elInputX = createTupleNumberInput(elTuple, elementID, propertyData.subLabels[VECTOR_ELEMENTS.X_INPUT], 
+                                          propertyData.min, propertyData.max, propertyData.step);
+    let elInputY = createTupleNumberInput(elTuple, elementID, propertyData.subLabels[VECTOR_ELEMENTS.Y_INPUT], 
+                                          propertyData.min, propertyData.max, propertyData.step);
+    
+    let inputChangeFunction = createEmitVec2PropertyUpdateFunction(propertyName, elInputX, 
+                                                                   elInputY, propertyData.multiplier);
+    elInputX.addEventListener('change', inputChangeFunction);
+    elInputY.addEventListener('change', inputChangeFunction);
+    
+    let elResult = [];
+    elResult[VECTOR_ELEMENTS.X_INPUT] = elInputX;
+    elResult[VECTOR_ELEMENTS.Y_INPUT] = elInputY;
+    return elResult;
+}
+
+function createColorProperty(property, elProperty, elLabel) {
+    let propertyName = property.name;
+    let elementID = property.elementID;
+    
+    elProperty.className = "property rgb fstuple";
+    
+    let elColorPicker = document.createElement('div');
+    elColorPicker.className = "color-picker";
+    elColorPicker.setAttribute("id", elementID);
+    
+    let elTuple = document.createElement('div');
+    elTuple.className = "tuple";
+    
+    elProperty.appendChild(elColorPicker);
+    elProperty.appendChild(elLabel);
+    elProperty.appendChild(elTuple);
+    
+    let elInputR = createTupleNumberInput(elTuple, elementID, "red", COLOR_MIN, COLOR_MAX, COLOR_STEP);
+    let elInputG = createTupleNumberInput(elTuple, elementID, "green", COLOR_MIN, COLOR_MAX, COLOR_STEP);
+    let elInputB = createTupleNumberInput(elTuple, elementID, "blue", COLOR_MIN, COLOR_MAX, COLOR_STEP);
+    
+    let inputChangeFunction = createEmitColorPropertyUpdateFunction(propertyName, elInputR, elInputG, elInputB);  
+    elInputR.addEventListener('change', inputChangeFunction);
+    elInputG.addEventListener('change', inputChangeFunction);
+    elInputB.addEventListener('change', inputChangeFunction);
+    
+    let colorPickerID = "#" + elementID;
+    colorPickers[colorPickerID] = $(colorPickerID).colpick({
+        colorScheme: 'dark',
+        layout: 'hex',
+        color: '000000',
+        submit: false, // We don't want to have a submission button
+        onShow: function(colpick) {
+            $(colorPickerID).attr('active', 'true');
+            // The original color preview within the picker needs to be updated on show because
+            // prior to the picker being shown we don't have access to the selections' starting color.
+            colorPickers[colorPickerID].colpickSetColor({
+                "r": elInputR.value,
+                "g": elInputG.value,
+                "b": elInputB.value
+            });
+        },
+        onHide: function(colpick) {
+            $(colorPickerID).attr('active', 'false');
+        },
+        onChange: function(hsb, hex, rgb, el) {
+            $(el).css('background-color', '#' + hex);
+            emitColorPropertyUpdate(propertyName, rgb.r, rgb.g, rgb.b);
+        }
+    });
+    
+    let elResult = [];
+    elResult[COLOR_ELEMENTS.COLOR_PICKER] = elColorPicker;
+    elResult[COLOR_ELEMENTS.RED_INPUT] = elInputR;
+    elResult[COLOR_ELEMENTS.GREEN_INPUT] = elInputG;
+    elResult[COLOR_ELEMENTS.BLUE_INPUT] = elInputB;
+    return elResult;
+}
+
+function createDropdownProperty(property, propertyID, elProperty, elLabel) { 
+    let propertyName = property.name;
+    let elementID = property.elementID;
+    let propertyData = property.data;
+    
+    elProperty.className = "property dropdown";
+                        
+    let elInput = document.createElement('select');
+    elInput.setAttribute("id", elementID);
+    elInput.setAttribute("propertyID", propertyID);
+    
+    for (let optionKey in propertyData.options) {
+        let option = document.createElement('option');
+        option.value = optionKey;
+        option.text = propertyData.options[optionKey];
+        elInput.add(option);
+    }
+    
+    elInput.addEventListener('change', createEmitTextPropertyUpdateFunction(propertyName));
+    
+    elProperty.appendChild(elLabel);
+    elProperty.appendChild(elInput);
+    
+    return elInput;
+}
+
+function createTextareaProperty(property, elProperty, elLabel) {   
+    let propertyName = property.name;
+    let elementID = property.elementID;
+    let propertyData = property.data;
+    
+    elProperty.className = "property textarea";
+                        
+    elProperty.appendChild(elLabel);
+    
+    if (propertyData.buttons !== undefined) {
+        addButtons(elProperty, elementID, propertyData.buttons, true);
+    }
+    
+    let elInput = document.createElement('textarea');
+    elInput.setAttribute("id", elementID);
+    if (propertyData.readOnly) {
+        elInput.readOnly = true;
+    }                   
+    
+    elInput.addEventListener('change', createEmitTextPropertyUpdateFunction(propertyName));
+    
+    elProperty.appendChild(elInput);
+    
+    return elInput;
+}
+
+function createIconProperty(property, elProperty, elLabel) { 
+    let elementID = property.elementID;
+    let propertyData = property.data;
+    
+    elProperty.className = "property value";
+    
+    elLabel.setAttribute("id", elementID);
+    elLabel.innerHTML = " " + propertyData.label;
+    
+    let elSpan = document.createElement('span');
+    elSpan.setAttribute("id", elementID + "-icon");
+
+    elProperty.appendChild(elSpan);
+    elProperty.appendChild(elLabel);
+    
+    let elResult = [];
+    elResult[ICON_ELEMENTS.ICON] = elSpan;
+    elResult[ICON_ELEMENTS.LABEL] = elLabel;
+    return elResult;
+}
+
+function createTextureProperty(property, elProperty, elLabel) { 
+    let elementID = property.elementID;
+    
+    elProperty.className = "property texture";
+    
+    let elDiv = document.createElement("div");
+    let elImage = document.createElement("img");
+    elDiv.className = "texture-image no-texture";
+    elDiv.appendChild(elImage);
+    
+    let elInput = document.createElement('input');
+    elInput.setAttribute("id", elementID);
+    elInput.setAttribute("type", "text"); 
+    
+    let imageLoad = _.debounce(function (url) {
+        if (url.slice(0, 5).toLowerCase() === "atp:/") {
+            elImage.src = "";
+            elImage.style.display = "none";
+            elDiv.classList.remove("with-texture");
+            elDiv.classList.remove("no-texture");
+            elDiv.classList.add("no-preview");
+        } else if (url.length > 0) {
+            elDiv.classList.remove("no-texture");
+            elDiv.classList.remove("no-preview");
+            elDiv.classList.add("with-texture");
+            elImage.src = url;
+            elImage.style.display = "block";
+        } else {
+            elImage.src = "";
+            elImage.style.display = "none";
+            elDiv.classList.remove("with-texture");
+            elDiv.classList.remove("no-preview");
+            elDiv.classList.add("no-texture");
+        }
+    }, DEBOUNCE_TIMEOUT * 2);
+    elInput.imageLoad = imageLoad;
+    elInput.oninput = function (event) {
+        // Add throttle
+        var url = event.target.value;
+        imageLoad(url);
+        updateProperty(property.name, url)
+    };
+    elInput.onchange = elInput.oninput;
+
+    elProperty.appendChild(elLabel);
+    elProperty.appendChild(elDiv);
+    elProperty.appendChild(elInput);
+   
+    let elResult = [];
+    elResult[TEXTURE_ELEMENTS.IMAGE] = elImage;
+    elResult[TEXTURE_ELEMENTS.TEXT_INPUT] = elInput;
+    return elResult;
+}
+
+function createButtonsProperty(property, elProperty, elLabel) {
+    let elementID = property.elementID;
+    let propertyData = property.data;
+    
+    elProperty.className = "property text";
+                        
+    let hasLabel = propertyData.label !== undefined;
+    if (hasLabel) {
+        elProperty.appendChild(elLabel);
+    }
+    
+    if (propertyData.buttons !== undefined) {
+        addButtons(elProperty, elementID, propertyData.buttons, hasLabel);
+    }
+    
+    return elProperty;
+}
+
+function createTupleNumberInput(elTuple, propertyElementID, subLabel, min, max, step) {
+    let elementID = propertyElementID + "-" + subLabel.toLowerCase();
+    
+    let elDiv = document.createElement('div');
+    let elLabel = document.createElement('label');
+    elLabel.innerText = subLabel[0].toUpperCase() + subLabel.slice(1) + ":";
+    elLabel.setAttribute("for", elementID);
+    
+    let elInput = document.createElement('input');
+    elInput.className = subLabel;
+    elInput.setAttribute("id", elementID);
+    elInput.setAttribute("type", "number");
+    elInput.setAttribute("min", min);
+    elInput.setAttribute("max", max);
+    elInput.setAttribute("step", step);
+    
+    elDiv.appendChild(elInput);
+    elDiv.appendChild(elLabel);
+    elTuple.appendChild(elDiv);
+    
+    return elInput;
+}
+
+function addUnit(unit, elLabel) {
+    if (unit !== undefined) {
+        let elSpan = document.createElement('span');
+        elSpan.className = "unit";
+        elSpan.innerHTML = unit;
+        elLabel.appendChild(elSpan);
+    }
+}
+
+function addButtons(elProperty, propertyID, buttons, newRow) {
+    let elDiv = document.createElement('div');
+    elDiv.className = "row";
+    
+    buttons.forEach(function(button) {
+        let elButton = document.createElement('input');
+        elButton.className = button.className;
+        elButton.setAttribute("type", "button");
+        elButton.setAttribute("id", propertyID + "-button-" + button.id);
+        elButton.setAttribute("value", button.label);
+        elButton.addEventListener("click", button.onClick);
+        if (newRow) {
+            elDiv.appendChild(elButton);
+        } else {
+            elProperty.appendChild(elButton);
+        }
+    });
+    
+    if (newRow) {
+        elProperty.appendChild(document.createElement('br'));
+        elProperty.appendChild(elDiv);
+    }
+}
+
+
+/**
+ * BUTTON CALLBACKS
+ */
+
+function rescaleDimensions() {
+    EventBridge.emitWebEvent(JSON.stringify({
+        type: "action",
+        action: "rescaleDimensions",
+        percentage: parseFloat(document.getElementById("property-scale").value)
+    }));
+}
+
+function moveSelectionToGrid() {
+    EventBridge.emitWebEvent(JSON.stringify({
+        type: "action",
+        action: "moveSelectionToGrid"
+    }));
+}
+
+function moveAllToGrid() {
+    EventBridge.emitWebEvent(JSON.stringify({
+        type: "action",
+        action: "moveAllToGrid"
+    }));
+}
+
+function resetToNaturalDimensions() {
+    EventBridge.emitWebEvent(JSON.stringify({
+        type: "action",
+        action: "resetToNaturalDimensions"
+    }));
+}
+
+function reloadScripts() {
+    EventBridge.emitWebEvent(JSON.stringify({
+        type: "action",
+        action: "reloadClientScripts"
+    }));
+}
+
+function reloadServerScripts() {
+    // invalidate the current status (so that same-same updates can still be observed visually)
+    document.getElementById("property-serverScripts-status").innerText = PENDING_SCRIPT_STATUS;
+        EventBridge.emitWebEvent(JSON.stringify({
+        type: "action",
+        action: "reloadServerScripts"
+    }));
+}
+
+function copySkyboxURLToAmbientURL() {
+    let skyboxURL = getPropertyInputElement("skybox.url").value;
+    getPropertyInputElement("ambientLight.ambientURL").value = skyboxURL;
+    updateProperty("ambientLight.ambientURL", skyboxURL);
+}
+
+
+/**
+ * USER DATA FUNCTIONS
+ */
+
+function clearUserData() {
+    let elUserData = getPropertyInputElement("userData");
+    deleteJSONEditor();
+    elUserData.value = "";
+    showUserDataTextArea();
+    showNewJSONEditorButton();
+    hideSaveUserDataButton();
+    updateProperty('userData', elUserData.value);
+}
+
+function newJSONEditor() {
+    deleteJSONEditor();
+    createJSONEditor();
+    var data = {};
+    setEditorJSON(data);
+    hideUserDataTextArea();
+    hideNewJSONEditorButton();
+    showSaveUserDataButton();
+}
+
+function saveUserData() {
+    saveJSONUserData(true);
+}
+
 function setUserDataFromEditor(noUpdate) {
     var json = null;
     try {
@@ -311,11 +2251,11 @@ function setUserDataFromEditor(noUpdate) {
 }
 
 function multiDataUpdater(groupName, updateKeyPair, userDataElement, defaults, removeKeys) {
-    var properties = {};
+    var propertyUpdate = {};
     var parsedData = {};
     var keysToBeRemoved = removeKeys ? removeKeys : [];
     try {
-        if ($('#userdata-editor').css('height') !== "0px") {
+        if ($('#property-userData-editor').css('height') !== "0px") {
             // if there is an expanded, we want to use its json.
             parsedData = getEditorJSON();
         } else {
@@ -355,14 +2295,148 @@ function multiDataUpdater(groupName, updateKeyPair, userDataElement, defaults, r
         delete parsedData[groupName];
     }
     if (Object.keys(parsedData).length > 0) {
-        properties.userData = JSON.stringify(parsedData);
+        propertyUpdate.userData = JSON.stringify(parsedData);
     } else {
-        properties.userData = '';
+        propertyUpdate.userData = '';
     }
 
-    userDataElement.value = properties.userData;
+    userDataElement.value = propertyUpdate.userData;
 
-    updateProperties(properties);
+    updateProperties(propertyUpdate);
+}
+
+var editor = null;
+
+function createJSONEditor() {
+    var container = document.getElementById("property-userData-editor");
+    var options = {
+        search: false,
+        mode: 'tree',
+        modes: ['code', 'tree'],
+        name: 'userData',
+        onModeChange: function() {
+            $('.jsoneditor-poweredBy').remove();
+        },
+        onError: function(e) {
+            alert('JSON editor:' + e);
+        },
+        onChange: function() {
+            var currentJSONString = editor.getText();
+
+            if (currentJSONString === '{"":""}') {
+                return;
+            }
+            $('#property-userData-button-save').attr('disabled', false);
+
+
+        }
+    };
+    editor = new JSONEditor(container, options);
+}
+
+function showSaveUserDataButton() {
+    $('#property-userData-button-save').show();
+}
+
+function hideSaveUserDataButton() {
+    $('#property-userData-button-save').hide();
+}
+
+function disableSaveUserDataButton() {
+    $('#property-userData-button-save').attr('disabled', true);
+}
+
+function showNewJSONEditorButton() {
+    $('#property-userData-button-edit').show();
+}
+
+function hideNewJSONEditorButton() {
+    $('#property-userData-button-edit').hide();
+}
+
+function showUserDataTextArea() {
+    $('#property-userData').show();
+}
+
+function hideUserDataTextArea() {
+    $('#property-userData').hide();
+}
+
+function hideUserDataSaved() {
+    $('#property-userData-saved').hide();
+}
+
+function showStaticUserData() {
+    if (editor !== null) {
+        $('#property-userData-static').show();
+        $('#property-userData-static').css('height', $('#property-userData-editor').height());
+        $('#property-userData-static').text(editor.getText());
+    }
+}
+
+function removeStaticUserData() {
+    $('#property-userData-static').hide();
+}
+
+function setEditorJSON(json) {
+    editor.set(json);
+    if (editor.hasOwnProperty('expandAll')) {
+        editor.expandAll();
+    }
+}
+
+function getEditorJSON() {
+    return editor.get();
+}
+
+function deleteJSONEditor() {
+    if (editor !== null) {
+        editor.destroy();
+        editor = null;
+    }
+}
+
+var savedJSONTimer = null;
+
+function saveJSONUserData(noUpdate) {
+    setUserDataFromEditor(noUpdate);
+    $('#property-userData-saved').show();
+    $('#property-userData-button-save').attr('disabled', true);
+    if (savedJSONTimer !== null) {
+        clearTimeout(savedJSONTimer);
+    }
+    savedJSONTimer = setTimeout(function() {
+        hideUserDataSaved();
+    }, EDITOR_TIMEOUT_DURATION);
+}
+
+
+/**
+ * MATERIAL DATA FUNCTIONS
+ */
+
+function clearMaterialData() {
+    let elMaterialData = getPropertyInputElement("materialData");
+    deleteJSONMaterialEditor();
+    elMaterialData.value = "";
+    showMaterialDataTextArea();
+    showNewJSONMaterialEditorButton();
+    hideSaveMaterialDataButton();
+    updateProperty('materialData', elMaterialData.value);
+}
+
+function newJSONMaterialEditor() {
+    deleteJSONMaterialEditor();
+    createJSONMaterialEditor();
+    var data = {};
+    setMaterialEditorJSON(data);
+    hideMaterialDataTextArea();
+    hideNewJSONMaterialEditorButton();
+    showSaveMaterialDataButton();
+}
+
+function saveMaterialData() {
+    saveJSONMaterialData(true);
 }
 
 function setMaterialDataFromEditor(noUpdate) {
@@ -393,16 +2467,10 @@ function setMaterialDataFromEditor(noUpdate) {
     }
 }
 
-function setTextareaScrolling(element) {
-    var isScrolling = element.scrollHeight > element.offsetHeight;
-    element.setAttribute("scrolling", isScrolling ? "true" : "false");
-}
-
-
 var materialEditor = null;
 
 function createJSONMaterialEditor() {
-    var container = document.getElementById("materialdata-editor");
+    var container = document.getElementById("property-materialData-editor");
     var options = {
         search: false,
         mode: 'tree',
@@ -420,7 +2488,7 @@ function createJSONMaterialEditor() {
             if (currentJSONString === '{"":""}') {
                 return;
             }
-            $('#materialdata-save').attr('disabled', false);
+            $('#property-materialData-button-save').attr('disabled', false);
 
 
         }
@@ -428,40 +2496,48 @@ function createJSONMaterialEditor() {
     materialEditor = new JSONEditor(container, options);
 }
 
-function hideNewJSONMaterialEditorButton() {
-    $('#materialdata-new-editor').hide();
-}
-
 function showSaveMaterialDataButton() {
-    $('#materialdata-save').show();
+    $('#property-materialData-button-save').show();
 }
 
 function hideSaveMaterialDataButton() {
-    $('#materialdata-save').hide();
+    $('#property-materialData-button-save').hide();
+}
+
+function disableSaveMaterialDataButton() {
+    $('#property-materialData-button-save').attr('disabled', true);
 }
 
 function showNewJSONMaterialEditorButton() {
-    $('#materialdata-new-editor').show();
+    $('#property-materialData-button-edit').show();
+}
+
+function hideNewJSONMaterialEditorButton() {
+    $('#property-materialData-button-edit').hide();
 }
 
 function showMaterialDataTextArea() {
-    $('#property-material-data').show();
+    $('#property-materialData').show();
 }
 
 function hideMaterialDataTextArea() {
-    $('#property-material-data').hide();
+    $('#property-materialData').hide();
+}
+
+function hideMaterialDataSaved() {
+    $('#property-materialData-saved').hide();
 }
 
 function showStaticMaterialData() {
     if (materialEditor !== null) {
-        $('#static-materialdata').show();
-        $('#static-materialdata').css('height', $('#materialdata-editor').height());
-        $('#static-materialdata').text(materialEditor.getText());
+        $('#property-materialData-static').show();
+        $('#property-materialData-static').css('height', $('#property-materialData-editor').height());
+        $('#property-materialData-static').text(materialEditor.getText());
     }
 }
 
 function removeStaticMaterialData() {
-    $('#static-materialdata').hide();
+    $('#property-materialData-static').hide();
 }
 
 function setMaterialEditorJSON(json) {
@@ -486,405 +2562,279 @@ var savedMaterialJSONTimer = null;
 
 function saveJSONMaterialData(noUpdate) {
     setMaterialDataFromEditor(noUpdate);
-    $('#materialdata-saved').show();
-    $('#materialdata-save').attr('disabled', true);
+    $('#property-materialData-saved').show();
+    $('#property-materialData-button-save').attr('disabled', true);
     if (savedMaterialJSONTimer !== null) {
         clearTimeout(savedMaterialJSONTimer);
     }
     savedMaterialJSONTimer = setTimeout(function() {
-        $('#materialdata-saved').hide();
-
-    }, EDITOR_TIMEOUT_DURATION);
-}
-
-var editor = null;
-
-function createJSONEditor() {
-    var container = document.getElementById("userdata-editor");
-    var options = {
-        search: false,
-        mode: 'tree',
-        modes: ['code', 'tree'],
-        name: 'userData',
-        onModeChange: function() {
-            $('.jsoneditor-poweredBy').remove();
-        },
-        onError: function(e) {
-            alert('JSON editor:' + e);
-        },
-        onChange: function() {
-            var currentJSONString = editor.getText();
-
-            if (currentJSONString === '{"":""}') {
-                return;
-            }
-            $('#userdata-save').attr('disabled', false);
-
-
-        }
-    };
-    editor = new JSONEditor(container, options);
-}
-
-function hideNewJSONEditorButton() {
-    $('#userdata-new-editor').hide();
-}
-
-function showSaveUserDataButton() {
-    $('#userdata-save').show();
-}
-
-function hideSaveUserDataButton() {
-    $('#userdata-save').hide();
-}
-
-function showNewJSONEditorButton() {
-    $('#userdata-new-editor').show();
-}
-
-function showUserDataTextArea() {
-    $('#property-user-data').show();
-}
-
-function hideUserDataTextArea() {
-    $('#property-user-data').hide();
-}
-
-function showStaticUserData() {
-    if (editor !== null) {
-        $('#static-userdata').show();
-        $('#static-userdata').css('height', $('#userdata-editor').height());
-        $('#static-userdata').text(editor.getText());
-    }
-}
-
-function removeStaticUserData() {
-    $('#static-userdata').hide();
-}
-
-function setEditorJSON(json) {
-    editor.set(json);
-    if (editor.hasOwnProperty('expandAll')) {
-        editor.expandAll();
-    }
-}
-
-function getEditorJSON() {
-    return editor.get();
-}
-
-function deleteJSONEditor() {
-    if (editor !== null) {
-        editor.destroy();
-        editor = null;
-    }
-}
-
-var savedJSONTimer = null;
-
-function saveJSONUserData(noUpdate) {
-    setUserDataFromEditor(noUpdate);
-    $('#userdata-saved').show();
-    $('#userdata-save').attr('disabled', true);
-    if (savedJSONTimer !== null) {
-        clearTimeout(savedJSONTimer);
-    }
-    savedJSONTimer = setTimeout(function() {
-        $('#userdata-saved').hide();
-
+        hideMaterialDataSaved();
     }, EDITOR_TIMEOUT_DURATION);
 }
 
 function bindAllNonJSONEditorElements() {
     var inputs = $('input');
     var i;
-    for (i = 0; i < inputs.length; i++) {
+    for (i = 0; i < inputs.length; ++i) {
         var input = inputs[i];
         var field = $(input);
         // TODO FIXME: (JSHint) Functions declared within loops referencing 
         //             an outer scoped variable may lead to confusing semantics.
         field.on('focus', function(e) {
-            if (e.target.id === "userdata-new-editor" || e.target.id === "userdata-clear" || e.target.id === "materialdata-new-editor" || e.target.id === "materialdata-clear") {
+            if (e.target.id === "property-userData-button-edit" || e.target.id === "property-userData-button-clear" || 
+                e.target.id === "property-materialData-button-edit" || e.target.id === "property-materialData-button-clear") {
                 return;
             } else {
-                if ($('#userdata-editor').css('height') !== "0px") {
-                    saveJSONUserData(true);
+                if ($('#property-userData-editor').css('height') !== "0px") {
+                    saveUserData();
                 }
-                if ($('#materialdata-editor').css('height') !== "0px") {
-                    saveJSONMaterialData(true);
+                if ($('#property-materialData-editor').css('height') !== "0px") {
+                    saveMaterialData();
                 }
             }
         });
     }
 }
 
-function unbindAllInputs() {
-    var inputs = $('input');
-    var i;
-    for (i = 0; i < inputs.length; i++) {
-        var input = inputs[i];
-        var field = $(input);
-        field.unbind();
+
+/**
+ * DROPDOWN FUNCTIONS
+ */
+
+function setDropdownText(dropdown) {
+    let lis = dropdown.parentNode.getElementsByTagName("li");
+    let text = "";
+    for (let i = 0; i < lis.length; ++i) {
+        if (String(lis[i].getAttribute("value")) === String(dropdown.value)) {
+            text = lis[i].textContent;
+        }
     }
+    dropdown.firstChild.textContent = text;
+}
+
+function toggleDropdown(event) {
+    let element = event.target;
+    if (element.nodeName !== "DT") {
+        element = element.parentNode;
+    }
+    element = element.parentNode;
+    let isDropped = element.getAttribute("dropped");
+    element.setAttribute("dropped", isDropped !== "true" ? "true" : "false");
+}
+
+function setDropdownValue(event) {
+    let dt = event.target.parentNode.parentNode.previousSibling;
+    dt.value = event.target.getAttribute("value");
+    dt.firstChild.textContent = event.target.textContent;
+
+    dt.parentNode.setAttribute("dropped", "false");
+
+    let evt = document.createEvent("HTMLEvents");
+    evt.initEvent("change", true, true);
+    dt.dispatchEvent(evt);
+}
+
+
+/**
+ * TEXTAREA / PARENT MATERIAL NAME FUNCTIONS
+ */
+
+function setTextareaScrolling(element) {
+    var isScrolling = element.scrollHeight > element.offsetHeight;
+    element.setAttribute("scrolling", isScrolling ? "true" : "false");
 }
 
 function showParentMaterialNameBox(number, elNumber, elString) {
     if (number) {
-        $('#property-parent-material-id-number-container').show();
-        $('#property-parent-material-id-string-container').hide();
+        $('#property-submeshToReplace').parent().show();
+        $('#property-materialNameToReplace').parent().hide();
         elString.value = "";
     } else {
-        $('#property-parent-material-id-string-container').show();
-        $('#property-parent-material-id-number-container').hide();
+        $('#property-materialNameToReplace').parent().show();
+        $('#property-submeshToReplace').parent().hide();
         elNumber.value = 0;
     }
 }
 
+
+
 function loaded() {
-    openEventBridge(function() {
-
-        var elPropertiesList = document.getElementById("properties-list");
-        var elID = document.getElementById("property-id");
-        var elType = document.getElementById("property-type");
-        var elTypeIcon = document.getElementById("type-icon");
-        var elName = document.getElementById("property-name");
-        var elLocked = document.getElementById("property-locked");
-        var elVisible = document.getElementById("property-visible");
-        var elPositionX = document.getElementById("property-pos-x");
-        var elPositionY = document.getElementById("property-pos-y");
-        var elPositionZ = document.getElementById("property-pos-z");
-        var elMoveSelectionToGrid = document.getElementById("move-selection-to-grid");
-        var elMoveAllToGrid = document.getElementById("move-all-to-grid");
-
-        var elDimensionsX = document.getElementById("property-dim-x");
-        var elDimensionsY = document.getElementById("property-dim-y");
-        var elDimensionsZ = document.getElementById("property-dim-z");
-        var elResetToNaturalDimensions = document.getElementById("reset-to-natural-dimensions");
-        var elRescaleDimensionsPct = document.getElementById("dimension-rescale-pct");
-        var elRescaleDimensionsButton = document.getElementById("dimension-rescale-button");
-
-        var elParentID = document.getElementById("property-parent-id");
-        var elParentJointIndex = document.getElementById("property-parent-joint-index");
-
-        var elRegistrationX = document.getElementById("property-reg-x");
-        var elRegistrationY = document.getElementById("property-reg-y");
-        var elRegistrationZ = document.getElementById("property-reg-z");
-
-        var elRotationX = document.getElementById("property-rot-x");
-        var elRotationY = document.getElementById("property-rot-y");
-        var elRotationZ = document.getElementById("property-rot-z");
-
-        var elLinearVelocityX = document.getElementById("property-lvel-x");
-        var elLinearVelocityY = document.getElementById("property-lvel-y");
-        var elLinearVelocityZ = document.getElementById("property-lvel-z");
-        var elLinearDamping = document.getElementById("property-ldamping");
-
-        var elAngularVelocityX = document.getElementById("property-avel-x");
-        var elAngularVelocityY = document.getElementById("property-avel-y");
-        var elAngularVelocityZ = document.getElementById("property-avel-z");
-        var elAngularDamping = document.getElementById("property-adamping");
-
-        var elRestitution = document.getElementById("property-restitution");
-        var elFriction = document.getElementById("property-friction");
-
-        var elGravityX = document.getElementById("property-grav-x");
-        var elGravityY = document.getElementById("property-grav-y");
-        var elGravityZ = document.getElementById("property-grav-z");
-
-        var elAccelerationX = document.getElementById("property-lacc-x");
-        var elAccelerationY = document.getElementById("property-lacc-y");
-        var elAccelerationZ = document.getElementById("property-lacc-z");
-
-        var elDensity = document.getElementById("property-density");
-        var elCollisionless = document.getElementById("property-collisionless");
-        var elDynamic = document.getElementById("property-dynamic");
-        var elCollideStatic = document.getElementById("property-collide-static");
-        var elCollideDynamic = document.getElementById("property-collide-dynamic");
-        var elCollideKinematic = document.getElementById("property-collide-kinematic");
-        var elCollideMyAvatar = document.getElementById("property-collide-myAvatar");
-        var elCollideOtherAvatar = document.getElementById("property-collide-otherAvatar");
-        var elCollisionSoundURL = document.getElementById("property-collision-sound-url");
-
-        var elGrabbable = document.getElementById("property-grabbable");
-        var elTriggerable = document.getElementById("property-triggerable");
-        var elGrabFollowsController = document.getElementById("property-grab-follows-controller");
-
-        var elCloneable = document.getElementById("property-cloneable");
-        var elCloneableDynamic = document.getElementById("property-cloneable-dynamic");
-        var elCloneableAvatarEntity = document.getElementById("property-cloneable-avatarEntity");
-        var elCloneableGroup = document.getElementById("group-cloneable-group");
-        var elCloneableLifetime = document.getElementById("property-cloneable-lifetime");
-        var elCloneableLimit = document.getElementById("property-cloneable-limit");
-
-        var elLifetime = document.getElementById("property-lifetime");
-        var elScriptURL = document.getElementById("property-script-url");
-        var elScriptTimestamp = document.getElementById("property-script-timestamp");
-        var elReloadScriptsButton = document.getElementById("reload-script-button");
-        var elServerScripts = document.getElementById("property-server-scripts");
-        var elReloadServerScriptsButton = document.getElementById("reload-server-scripts-button");
-        var elServerScriptStatus = document.getElementById("server-script-status");
-        var elServerScriptError = document.getElementById("server-script-error");
-        var elUserData = document.getElementById("property-user-data");
-        var elClearUserData = document.getElementById("userdata-clear");
-        var elSaveUserData = document.getElementById("userdata-save");
-        var elNewJSONEditor = document.getElementById('userdata-new-editor');
-        var elColorControlVariant2 = document.getElementById("property-color-control2");
-        var elColorRed = document.getElementById("property-color-red");
-        var elColorGreen = document.getElementById("property-color-green");
-        var elColorBlue = document.getElementById("property-color-blue");
-
-        var elShape = document.getElementById("property-shape");
-
-        var elCanCastShadow = document.getElementById("property-can-cast-shadow");
-
-        var elLightSpotLight = document.getElementById("property-light-spot-light");
-        var elLightColor = document.getElementById("property-light-color");
-        var elLightColorRed = document.getElementById("property-light-color-red");
-        var elLightColorGreen = document.getElementById("property-light-color-green");
-        var elLightColorBlue = document.getElementById("property-light-color-blue");
-
-        var elLightIntensity = document.getElementById("property-light-intensity");
-        var elLightFalloffRadius = document.getElementById("property-light-falloff-radius");
-        var elLightExponent = document.getElementById("property-light-exponent");
-        var elLightCutoff = document.getElementById("property-light-cutoff");
-
-        var elModelURL = document.getElementById("property-model-url");
-        var elShapeType = document.getElementById("property-shape-type");
-        var elCompoundShapeURL = document.getElementById("property-compound-shape-url");
-        var elModelAnimationURL = document.getElementById("property-model-animation-url");
-        var elModelAnimationPlaying = document.getElementById("property-model-animation-playing");
-        var elModelAnimationFPS = document.getElementById("property-model-animation-fps");
-        var elModelAnimationFrame = document.getElementById("property-model-animation-frame");
-        var elModelAnimationFirstFrame = document.getElementById("property-model-animation-first-frame");
-        var elModelAnimationLastFrame = document.getElementById("property-model-animation-last-frame");
-        var elModelAnimationLoop = document.getElementById("property-model-animation-loop");
-        var elModelAnimationHold = document.getElementById("property-model-animation-hold");
-        var elModelAnimationAllowTranslation = document.getElementById("property-model-animation-allow-translation");
-        var elModelTextures = document.getElementById("property-model-textures");
-        var elModelOriginalTextures = document.getElementById("property-model-original-textures");
-
-        var elMaterialURL = document.getElementById("property-material-url");
-        //var elMaterialMappingMode = document.getElementById("property-material-mapping-mode");
-        var elPriority = document.getElementById("property-priority");
-        var elParentMaterialNameString = document.getElementById("property-parent-material-id-string");
-        var elParentMaterialNameNumber = document.getElementById("property-parent-material-id-number");
-        var elParentMaterialNameCheckbox = document.getElementById("property-parent-material-id-checkbox");
-        var elMaterialMappingPosX = document.getElementById("property-material-mapping-pos-x");
-        var elMaterialMappingPosY = document.getElementById("property-material-mapping-pos-y");
-        var elMaterialMappingScaleX = document.getElementById("property-material-mapping-scale-x");
-        var elMaterialMappingScaleY = document.getElementById("property-material-mapping-scale-y");
-        var elMaterialMappingRot = document.getElementById("property-material-mapping-rot");
-        var elMaterialData = document.getElementById("property-material-data");
-        var elClearMaterialData = document.getElementById("materialdata-clear");
-        var elSaveMaterialData = document.getElementById("materialdata-save");
-        var elNewJSONMaterialEditor = document.getElementById('materialdata-new-editor');
-
-        var elImageURL = document.getElementById("property-image-url");
-
-        var elWebSourceURL = document.getElementById("property-web-source-url");
-        var elWebDPI = document.getElementById("property-web-dpi");
-
-        var elDescription = document.getElementById("property-description");
-
-        var elHyperlinkHref = document.getElementById("property-hyperlink-href");
-
-        var elTextText = document.getElementById("property-text-text");
-        var elTextLineHeight = document.getElementById("property-text-line-height");
-        var elTextTextColor = document.getElementById("property-text-text-color");
-        var elTextFaceCamera = document.getElementById("property-text-face-camera");
-        var elTextTextColorRed = document.getElementById("property-text-text-color-red");
-        var elTextTextColorGreen = document.getElementById("property-text-text-color-green");
-        var elTextTextColorBlue = document.getElementById("property-text-text-color-blue");
-        var elTextBackgroundColor = document.getElementById("property-text-background-color");
-        var elTextBackgroundColorRed = document.getElementById("property-text-background-color-red");
-        var elTextBackgroundColorGreen = document.getElementById("property-text-background-color-green");
-        var elTextBackgroundColorBlue = document.getElementById("property-text-background-color-blue");
-
-        // Key light
-        var elZoneKeyLightModeInherit = document.getElementById("property-zone-key-light-mode-inherit");
-        var elZoneKeyLightModeDisabled = document.getElementById("property-zone-key-light-mode-disabled");
-        var elZoneKeyLightModeEnabled = document.getElementById("property-zone-key-light-mode-enabled");
-
-        var elZoneKeyLightColor = document.getElementById("property-zone-key-light-color");
-        var elZoneKeyLightColorRed = document.getElementById("property-zone-key-light-color-red");
-        var elZoneKeyLightColorGreen = document.getElementById("property-zone-key-light-color-green");
-        var elZoneKeyLightColorBlue = document.getElementById("property-zone-key-light-color-blue");
-        var elZoneKeyLightIntensity = document.getElementById("property-zone-key-intensity");
-        var elZoneKeyLightDirectionX = document.getElementById("property-zone-key-light-direction-x");
-        var elZoneKeyLightDirectionY = document.getElementById("property-zone-key-light-direction-y");
-
-        var elZoneKeyLightCastShadows = document.getElementById("property-zone-key-light-cast-shadows");
-
-        // Skybox
-        var elZoneSkyboxModeInherit = document.getElementById("property-zone-skybox-mode-inherit");
-        var elZoneSkyboxModeDisabled = document.getElementById("property-zone-skybox-mode-disabled");
-        var elZoneSkyboxModeEnabled = document.getElementById("property-zone-skybox-mode-enabled");
-
-        // Ambient light
-        var elCopySkyboxURLToAmbientURL = document.getElementById("copy-skybox-url-to-ambient-url");
-
-        var elZoneAmbientLightModeInherit = document.getElementById("property-zone-ambient-light-mode-inherit");
-        var elZoneAmbientLightModeDisabled = document.getElementById("property-zone-ambient-light-mode-disabled");
-        var elZoneAmbientLightModeEnabled = document.getElementById("property-zone-ambient-light-mode-enabled");
-
-        var elZoneAmbientLightIntensity = document.getElementById("property-zone-key-ambient-intensity");
-        var elZoneAmbientLightURL = document.getElementById("property-zone-key-ambient-url");
-
-        // Haze
-        var elZoneHazeModeInherit = document.getElementById("property-zone-haze-mode-inherit");
-        var elZoneHazeModeDisabled = document.getElementById("property-zone-haze-mode-disabled");
-        var elZoneHazeModeEnabled = document.getElementById("property-zone-haze-mode-enabled");
-
-        var elZoneHazeRange = document.getElementById("property-zone-haze-range");
-        var elZoneHazeColor = document.getElementById("property-zone-haze-color");
-        var elZoneHazeColorRed = document.getElementById("property-zone-haze-color-red");
-        var elZoneHazeColorGreen = document.getElementById("property-zone-haze-color-green");
-        var elZoneHazeColorBlue = document.getElementById("property-zone-haze-color-blue");
-        var elZoneHazeGlareColor = document.getElementById("property-zone-haze-glare-color");
-        var elZoneHazeGlareColorRed = document.getElementById("property-zone-haze-glare-color-red");
-        var elZoneHazeGlareColorGreen = document.getElementById("property-zone-haze-glare-color-green");
-        var elZoneHazeGlareColorBlue = document.getElementById("property-zone-haze-glare-color-blue");
-        var elZoneHazeEnableGlare = document.getElementById("property-zone-haze-enable-light-blend");
-        var elZoneHazeGlareAngle = document.getElementById("property-zone-haze-blend-angle");
+    openEventBridge(function() {    
+        let elPropertiesList = document.getElementById("properties-list");
         
-        var elZoneHazeAltitudeEffect = document.getElementById("property-zone-haze-altitude-effect");
-        var elZoneHazeBaseRef = document.getElementById("property-zone-haze-base");
-        var elZoneHazeCeiling = document.getElementById("property-zone-haze-ceiling");
-
-        var elZoneHazeBackgroundBlend = document.getElementById("property-zone-haze-background-blend");
-
-        // Bloom
-        var elZoneBloomModeInherit = document.getElementById("property-zone-bloom-mode-inherit");
-        var elZoneBloomModeDisabled = document.getElementById("property-zone-bloom-mode-disabled");
-        var elZoneBloomModeEnabled = document.getElementById("property-zone-bloom-mode-enabled");
-
-        var elZoneBloomIntensity = document.getElementById("property-zone-bloom-intensity");
-        var elZoneBloomThreshold = document.getElementById("property-zone-bloom-threshold");
-        var elZoneBloomSize = document.getElementById("property-zone-bloom-size");
-
-        var elZoneSkyboxColor = document.getElementById("property-zone-skybox-color");
-        var elZoneSkyboxColorRed = document.getElementById("property-zone-skybox-color-red");
-        var elZoneSkyboxColorGreen = document.getElementById("property-zone-skybox-color-green");
-        var elZoneSkyboxColorBlue = document.getElementById("property-zone-skybox-color-blue");
-        var elZoneSkyboxURL = document.getElementById("property-zone-skybox-url");
-
-        var elZoneFlyingAllowed = document.getElementById("property-zone-flying-allowed");
-        var elZoneGhostingAllowed = document.getElementById("property-zone-ghosting-allowed");
-        var elZoneFilterURL = document.getElementById("property-zone-filter-url");
-
-        var elVoxelVolumeSizeX = document.getElementById("property-voxel-volume-size-x");
-        var elVoxelVolumeSizeY = document.getElementById("property-voxel-volume-size-y");
-        var elVoxelVolumeSizeZ = document.getElementById("property-voxel-volume-size-z");
-        var elVoxelSurfaceStyle = document.getElementById("property-voxel-surface-style");
-        var elXTextureURL = document.getElementById("property-x-texture-url");
-        var elYTextureURL = document.getElementById("property-y-texture-url");
-        var elZTextureURL = document.getElementById("property-z-texture-url");
+        GROUPS.forEach(function(group) {            
+            let elGroup;
+            if (group.addToGroup !== undefined) {
+                let fieldset = document.getElementById("properties-" + group.addToGroup);
+                elGroup = document.createElement('div');
+                fieldset.appendChild(elGroup);
+            } else {
+                elGroup = document.createElement('fieldset');
+                elGroup.className = "major";
+                elGroup.setAttribute("id", "properties-" + group.id);
+                elPropertiesList.appendChild(elGroup);
+            }       
 
+            if (group.label !== undefined) {
+                let elLegend = document.createElement('legend');
+                elLegend.className = "section-header";
+                elLegend.innerText = group.label;
+                let elSpan = document.createElement('span');
+                elSpan.className = ".collapse-icon";
+                elSpan.innerText = "M";
+                elLegend.appendChild(elSpan);
+                elGroup.appendChild(elLegend);
+            }
+                
+            group.properties.forEach(function(propertyData) {
+                let propertyType = propertyData.type;
+                let propertyID = propertyData.propertyID;               
+                let propertyName = propertyData.propertyName !== undefined ? propertyData.propertyName : propertyID;
+                let propertyElementID = "property-" + propertyID;
+                propertyElementID = propertyElementID.replace('.', '-');
+                
+                let elProperty;
+                if (propertyType === "sub-header") {
+                    elProperty = document.createElement('legend');
+                    elProperty.className = "sub-section-header";
+                    elProperty.innerText = propertyData.label;
+                } else {
+                    elProperty = document.createElement('div');
+                    elProperty.setAttribute("id", "div-" + propertyElementID);
+                }
+                
+                if (group.twoColumn && propertyData.column !== undefined && propertyData.column !== -1) {
+                    let columnName = group.id + "column" + propertyData.column;
+                    let elColumn = document.getElementById(columnName);
+                    if (!elColumn) {
+                        let columnDivName = group.id + "columnDiv";
+                        let elColumnDiv = document.getElementById(columnDivName);
+                        if (!elColumnDiv) {
+                            elColumnDiv = document.createElement('div');
+                            elColumnDiv.className = "two-column";
+                            elColumnDiv.setAttribute("id", group.id + "columnDiv");
+                            elGroup.appendChild(elColumnDiv);
+                        }
+                        elColumn = document.createElement('fieldset');
+                        elColumn.className = "column";
+                        elColumn.setAttribute("id", columnName);
+                        elColumnDiv.appendChild(elColumn);
+                    }
+                    elColumn.appendChild(elProperty);
+                } else {
+                    elGroup.appendChild(elProperty);
+                }
+                
+                let elLabel = document.createElement('label');
+                elLabel.innerText = propertyData.label;
+                elLabel.setAttribute("for", propertyElementID);
+                
+                let property = { 
+                    data: propertyData, 
+                    elementID: propertyElementID, 
+                    name: propertyName,
+                    isParticleProperty: group.id.includes("particles"),
+                    elProperty: elProperty 
+                };
+                properties[propertyID] = property;
+                
+                switch (propertyType) {
+                    case 'string': {
+                        properties[propertyID].elInput = createStringProperty(property, elProperty, elLabel);
+                        break;
+                    }
+                    case 'bool': {
+                        properties[propertyID].elInput = createBoolProperty(property, elProperty, elLabel);
+                        break;
+                    }
+                    case 'number': {
+                        properties[propertyID].elInput = createNumberProperty(property, elProperty, elLabel);
+                        break;
+                    }
+                    case 'slider': {
+                        let elSlider = createSliderProperty(property, elProperty, elLabel);
+                        properties[propertyID].elSlider = elSlider[SLIDER_ELEMENTS.SLIDER];
+                        properties[propertyID].elInput = elSlider[SLIDER_ELEMENTS.NUMBER_INPUT];
+                        break;
+                    }
+                    case 'vec3': {
+                        let elVec3 = createVec3Property(property, elProperty, elLabel);  
+                        properties[propertyID].elInputX = elVec3[VECTOR_ELEMENTS.X_INPUT];
+                        properties[propertyID].elInputY = elVec3[VECTOR_ELEMENTS.Y_INPUT];
+                        properties[propertyID].elInputZ = elVec3[VECTOR_ELEMENTS.Z_INPUT];
+                        break;
+                    }
+                    case 'vec2': {
+                        let elVec2 = createVec2Property(property, elProperty, elLabel);  
+                        properties[propertyID].elInputX = elVec2[VECTOR_ELEMENTS.X_INPUT];
+                        properties[propertyID].elInputY = elVec2[VECTOR_ELEMENTS.Y_INPUT];
+                        break;
+                    }
+                    case 'color': {
+                        let elColor = createColorProperty(property, elProperty, elLabel);  
+                        properties[propertyID].elColorPicker = elColor[COLOR_ELEMENTS.COLOR_PICKER];
+                        properties[propertyID].elInputR = elColor[COLOR_ELEMENTS.RED_INPUT];
+                        properties[propertyID].elInputG = elColor[COLOR_ELEMENTS.GREEN_INPUT];
+                        properties[propertyID].elInputB = elColor[COLOR_ELEMENTS.BLUE_INPUT]; 
+                        break;
+                    }
+                    case 'dropdown': {
+                        properties[propertyID].elInput = createDropdownProperty(property, propertyID, elProperty, elLabel);
+                        break;
+                    }
+                    case 'textarea': {
+                        properties[propertyID].elInput = createTextareaProperty(property, elProperty, elLabel);
+                        break;
+                    }
+                    case 'icon': {
+                        let elIcon = createIconProperty(property, elProperty, elLabel);
+                        properties[propertyID].elSpan = elIcon[ICON_ELEMENTS.ICON];
+                        properties[propertyID].elLabel = elIcon[ICON_ELEMENTS.LABEL];
+                        break;
+                    }
+                    case 'texture': {
+                        let elTexture = createTextureProperty(property, elProperty, elLabel);
+                        properties[propertyID].elImage = elTexture[TEXTURE_ELEMENTS.IMAGE];
+                        properties[propertyID].elInput = elTexture[TEXTURE_ELEMENTS.TEXT_INPUT];
+                        break;
+                    }
+                    case 'buttons': {
+                        properties[propertyID].elProperty = createButtonsProperty(property, elProperty, elLabel);
+                        break;
+                    }
+                    case 'sub-header': {
+                        break;
+                    }
+                    default: {
+                        console.log("EntityProperties - Unknown property type " + 
+                                    propertyType + " set to property " + propertyID);
+                        break;
+                    }
+                }
+                
+                let showPropertyRule = propertyData.showPropertyRule;
+                if (showPropertyRule !== undefined) {
+                    let dependentProperty = Object.keys(showPropertyRule)[0];
+                    let dependentPropertyValue = showPropertyRule[dependentProperty];
+                    if (properties[dependentProperty] === undefined) {
+                        properties[dependentProperty] = {};
+                    }
+                    if (properties[dependentProperty].showPropertyRules === undefined) {
+                        properties[dependentProperty].showPropertyRules = {};
+                    }
+                    properties[dependentProperty].showPropertyRules[propertyID] = dependentPropertyValue;
+                }
+            });
+            
+            elGroups[group.id] = elGroup;
+        });
+        
         if (window.EventBridge !== undefined) {
-            var properties;
             EventBridge.scriptEventReceived.connect(function(data) {
                 data = JSON.parse(data);
                 if (data.type === "server_script_status") {
+                    let elServerScriptError = document.getElementById("property-serverScripts-error");
+                    let elServerScriptStatus = document.getElementById("property-serverScripts-status");
                     elServerScriptError.value = data.errorInfo;
                     // If we just set elServerScriptError's diplay to block or none, we still end up with
                     // it's parent contributing 21px bottom padding even when elServerScriptError is display:none.
@@ -893,231 +2843,34 @@ function loaded() {
                     if (data.statusRetrieved === false) {
                         elServerScriptStatus.innerText = "Failed to retrieve status";
                     } else if (data.isRunning) {
-                        var ENTITY_SCRIPT_STATUS = {
-                            pending: "Pending",
-                            loading: "Loading",
-                            error_loading_script: "Error loading script", // eslint-disable-line camelcase
-                            error_running_script: "Error running script", // eslint-disable-line camelcase
-                            running: "Running",
-                            unloaded: "Unloaded"
-                        };
                         elServerScriptStatus.innerText = ENTITY_SCRIPT_STATUS[data.status] || data.status;
                     } else {
-                        elServerScriptStatus.innerText = "Not running";
+                        elServerScriptStatus.innerText = NOT_RUNNING_SCRIPT_STATUS;
                     }
                 } else if (data.type === "update" && data.selections) {
-
                     if (data.selections.length === 0) {
                         if (lastEntityID !== null) {
                             if (editor !== null) {
-                                saveJSONUserData(true);
+                                saveUserData();
                                 deleteJSONEditor();
                             }
                             if (materialEditor !== null) {
-                                saveJSONMaterialData(true);
+                                saveMaterialData();
                                 deleteJSONMaterialEditor();
                             }
                         }
-
-                        elTypeIcon.style.display = "none";
-                        elType.innerHTML = "<i>No selection</i>";
-                        elPropertiesList.className = '';
-
-                        elID.value = "";
-                        elName.value = "";
-                        elLocked.checked = false;
-                        elVisible.checked = false;
-
-                        elParentID.value = "";
-                        elParentJointIndex.value = "";
-
-                        elColorRed.value = "";
-                        elColorGreen.value = "";
-                        elColorBlue.value = "";
-                        elColorControlVariant2.style.backgroundColor = "rgb(" + 0 + "," + 0 + "," + 0 + ")";
-
-                        elPositionX.value = "";
-                        elPositionY.value = "";
-                        elPositionZ.value = "";
-
-                        elRotationX.value = "";
-                        elRotationY.value = "";
-                        elRotationZ.value = "";
-
-                        elDimensionsX.value = "";
-                        elDimensionsY.value = "";
-                        elDimensionsZ.value = "";   
-
-                        elRegistrationX.value = "";
-                        elRegistrationY.value = "";
-                        elRegistrationZ.value = "";
-
-                        elLinearVelocityX.value = "";
-                        elLinearVelocityY.value = "";
-                        elLinearVelocityZ.value = "";
-                        elLinearDamping.value = "";
-
-                        elAngularVelocityX.value = "";
-                        elAngularVelocityY.value = "";
-                        elAngularVelocityZ.value = "";
-                        elAngularDamping.value = "";
-
-                        elGravityX.value = "";
-                        elGravityY.value = "";
-                        elGravityZ.value = "";
-
-                        elAccelerationX.value = "";
-                        elAccelerationY.value = "";
-                        elAccelerationZ.value = "";
-
-                        elRestitution.value = "";
-                        elFriction.value = "";
-                        elDensity.value = "";
-
-                        elCollisionless.checked = false;
-                        elDynamic.checked = false;
-
-                        elCollideStatic.checked = false;
-                        elCollideKinematic.checked = false;
-                        elCollideDynamic.checked = false;
-                        elCollideMyAvatar.checked = false;
-                        elCollideOtherAvatar.checked = false;
-
-                        elGrabbable.checked = false;
-                        elTriggerable.checked = false;
-                        elGrabFollowsController.checked = false;
-
-                        elCloneable.checked = false;
-                        elCloneableDynamic.checked = false;
-                        elCloneableAvatarEntity.checked = false;
-                        elCloneableGroup.style.display = "none";
-                        elCloneableLimit.value = "";
-                        elCloneableLifetime.value = "";
-
-                        showElements(document.getElementsByClassName('can-cast-shadow-section'), true);
-                        elCanCastShadow.checked = false;
-
-                        elCollisionSoundURL.value = "";
-                        elLifetime.value = "";
-                        elScriptURL.value = "";
-                        elServerScripts.value = "";
-                        elHyperlinkHref.value = "";
-                        elDescription.value = "";
-
+                        
+                        resetProperties();
+                        showGroupsForType("None");
+                
                         deleteJSONEditor();
-                        elUserData.value = "";
+                        getPropertyInputElement("userData").value = "";
                         showUserDataTextArea();
                         showSaveUserDataButton();
                         showNewJSONEditorButton();
 
-                        // Shape Properties
-                        elShape.value = "Cube";
-                        setDropdownText(elShape);
-
-                        // Light Properties
-                        elLightSpotLight.checked = false;
-                        elLightColor.style.backgroundColor = "rgb(" + 0 + "," + 0 + "," + 0 + ")";
-                        elLightColorRed.value = "";
-                        elLightColorGreen.value = "";
-                        elLightColorBlue.value = "";
-                        elLightIntensity.value = "";
-                        elLightFalloffRadius.value = "";
-                        elLightExponent.value = "";
-                        elLightCutoff.value = "";
-
-                        // Model Properties
-                        elModelURL.value = "";
-                        elCompoundShapeURL.value = "";
-                        elShapeType.value = "none";
-                        setDropdownText(elShapeType);
-                        elModelAnimationURL.value = "";
-                        elModelAnimationPlaying.checked = false;
-                        elModelAnimationFPS.value = "";
-                        elModelAnimationFrame.value = "";
-                        elModelAnimationFirstFrame.value = "";
-                        elModelAnimationLastFrame.value = "";
-                        elModelAnimationLoop.checked = false;
-                        elModelAnimationHold.checked = false;
-                        elModelAnimationAllowTranslation.checked = false;
-                        elModelTextures.value = "";
-                        elModelOriginalTextures.value = "";
-
-                        // Zone Properties
-                        elZoneFlyingAllowed.checked = false;
-                        elZoneGhostingAllowed.checked = false;
-                        elZoneFilterURL.value = "";
-                        elZoneKeyLightColor.style.backgroundColor = "rgb(" + 0 + "," + 0 + "," + 0 + ")";
-                        elZoneKeyLightColorRed.value = "";
-                        elZoneKeyLightColorGreen.value = "";
-                        elZoneKeyLightColorBlue.value = "";
-                        elZoneKeyLightIntensity.value = "";
-                        elZoneKeyLightDirectionX.value = "";
-                        elZoneKeyLightDirectionY.value = "";
-                        elZoneKeyLightCastShadows.checked = false;
-                        elZoneAmbientLightIntensity.value = "";
-                        elZoneAmbientLightURL.value = "";
-                        elZoneHazeRange.value = "";
-                        elZoneHazeColor.style.backgroundColor = "rgb(" + 0 + "," + 0 + "," + 0 + ")";
-                        elZoneHazeColorRed.value = "";
-                        elZoneHazeColorGreen.value = "";
-                        elZoneHazeColorBlue.value = "";
-                        elZoneHazeBackgroundBlend.value = 0;
-                        elZoneHazeGlareColor.style.backgroundColor = "rgb(" + 0 + "," + 0 + "," + 0 + ")";
-                        elZoneHazeGlareColorRed.value = "";
-                        elZoneHazeGlareColorGreen.value = "";
-                        elZoneHazeGlareColorBlue.value = "";
-                        elZoneHazeEnableGlare.checked = false;
-                        elZoneHazeGlareAngle.value = "";
-                        elZoneHazeAltitudeEffect.checked = false;
-                        elZoneHazeBaseRef.value = "";
-                        elZoneHazeCeiling.value = "";
-                        elZoneBloomIntensity.value = "";
-                        elZoneBloomThreshold.value = "";
-                        elZoneBloomSize.value = "";
-                        elZoneSkyboxColor.style.backgroundColor = "rgb(" + 0 + "," + 0 + "," + 0 + ")";
-                        elZoneSkyboxColorRed.value = "";
-                        elZoneSkyboxColorGreen.value = "";
-                        elZoneSkyboxColorBlue.value = "";
-                        elZoneSkyboxURL.value = "";
-                        showElements(document.getElementsByClassName('keylight-section'), true);
-                        showElements(document.getElementsByClassName('skybox-section'), true);
-                        showElements(document.getElementsByClassName('ambient-section'), true);
-                        showElements(document.getElementsByClassName('haze-section'), true);
-                        showElements(document.getElementsByClassName('bloom-section'), true);
-
-                        // Text Properties
-                        elTextText.value = "";
-                        elTextLineHeight.value = "";
-                        elTextFaceCamera.checked = false;
-                        elTextTextColor.style.backgroundColor = "rgb(" + 0 + "," + 0 + "," + 0 + ")";
-                        elTextTextColorRed.value = "";
-                        elTextTextColorGreen.value = "";
-                        elTextTextColorBlue.value = "";
-                        elTextBackgroundColor.style.backgroundColor = "rgb(" + 0 + "," + 0 + "," + 0 + ")";
-                        elTextBackgroundColorRed.value = "";
-                        elTextBackgroundColorGreen.value = "";
-                        elTextBackgroundColorBlue.value = "";
-
-                        // Image Properties
-                        elImageURL.value = "";
-
-                        // Web Properties
-                        elWebSourceURL.value = "";
-                        elWebDPI.value = "";
-
-                        // Material Properties
-                        elMaterialURL.value = "";
-                        elParentMaterialNameNumber.value = "";
-                        elParentMaterialNameCheckbox.checked = false;
-                        elPriority.value = "";
-                        elMaterialMappingPosX.value = "";
-                        elMaterialMappingPosY.value = "";
-                        elMaterialMappingScaleX.value = "";
-                        elMaterialMappingScaleY.value = "";
-                        elMaterialMappingRot.value = "";
-
                         deleteJSONMaterialEditor();
-                        elMaterialData.value = "";
+                        getPropertyInputElement("materialData").value = "";
                         showMaterialDataTextArea();
                         showSaveMaterialDataButton();
                         showNewJSONMaterialEditorButton();
@@ -1126,15 +2879,16 @@ function loaded() {
                     } else if (data.selections.length > 1) {
                         deleteJSONEditor();
                         deleteJSONMaterialEditor();
-                        var selections = data.selections;
+                        
+                        let selections = data.selections;
 
-                        var ids = [];
-                        var types = {};
-                        var numTypes = 0;
+                        let ids = [];
+                        let types = {};
+                        let numTypes = 0;
 
-                        for (var i = 0; i < selections.length; i++) {
+                        for (let i = 0; i < selections.length; ++i) {
                             ids.push(selections[i].id);
-                            var currentSelectedType = selections[i].properties.type;
+                            let currentSelectedType = selections[i].properties.type;
                             if (types[currentSelectedType] === undefined) {
                                 types[currentSelectedType] = 0;
                                 numTypes += 1;
@@ -1142,397 +2896,256 @@ function loaded() {
                             types[currentSelectedType]++;
                         }
 
-                        var type = "Multiple";
+                        let type = "Multiple";
                         if (numTypes === 1) {
                             type = selections[0].properties.type;
                         }
-
-                        elType.innerHTML = type + " (" + data.selections.length + ")";
-                        elTypeIcon.innerHTML = ICON_FOR_TYPE[type];
-                        elTypeIcon.style.display = "inline-block";
-                        elPropertiesList.className = '';
-
-                        elID.value = "";
-
+                        
+                        resetProperties();
+                        showGroupsForType(type);
+                        
+                        let typeProperty = properties["type"];
+                        typeProperty.elSpan.innerHTML = typeProperty.data.icons[type];
+                        typeProperty.elSpan.style.display = "inline-block";
+                        typeProperty.elLabel.innerHTML = type + " (" + data.selections.length + ")";
+                        
                         disableProperties();
                     } else {
-
-                        properties = data.selections[0].properties;
-                        if (lastEntityID !== '"' + properties.id + '"' && lastEntityID !== null) {
+                        selectedEntityProperties = data.selections[0].properties;
+                        
+                        if (lastEntityID !== '"' + selectedEntityProperties.id + '"' && lastEntityID !== null) {
                             if (editor !== null) {
-                                saveJSONUserData(true);
+                               saveUserData();
                             }
                             if (materialEditor !== null) {
-                                saveJSONMaterialData(true);
+                                saveMaterialData();
                             }
                         }
 
-                        var doSelectElement = lastEntityID === '"' + properties.id + '"';
+                        let doSelectElement = lastEntityID === '"' + selectedEntityProperties.id + '"';
 
                         // the event bridge and json parsing handle our avatar id string differently.
-                        lastEntityID = '"' + properties.id + '"';
-                        elID.value = properties.id;
+                        lastEntityID = '"' + selectedEntityProperties.id + '"';
 
                         // HTML workaround since image is not yet a separate entity type
-                        var IMAGE_MODEL_NAME = 'default-image-model.fbx';
-                        if (properties.type === "Model") {
-                            var urlParts = properties.modelURL.split('/');
-                            var propsFilename = urlParts[urlParts.length - 1];
+                        let IMAGE_MODEL_NAME = 'default-image-model.fbx';
+                        if (selectedEntityProperties.type === "Model") {
+                            let urlParts = selectedEntityProperties.modelURL.split('/');
+                            let propsFilename = urlParts[urlParts.length - 1];
 
                             if (propsFilename === IMAGE_MODEL_NAME) {
-                                properties.type = "Image";
+                                selectedEntityProperties.type = "Image";
                             }
                         }
 
-                        // Create class name for css ruleset filtering
-                        elPropertiesList.className = properties.type + 'Menu';
-
-                        elType.innerHTML = properties.type;
-                        elTypeIcon.innerHTML = ICON_FOR_TYPE[properties.type];
-                        elTypeIcon.style.display = "inline-block";
-
-                        elLocked.checked = properties.locked;
-
-                        elName.value = properties.name;
-
-                        elVisible.checked = properties.visible;
-
-                        elPositionX.value = properties.position.x.toFixed(4);
-                        elPositionY.value = properties.position.y.toFixed(4);
-                        elPositionZ.value = properties.position.z.toFixed(4);
-
-                        elDimensionsX.value = properties.dimensions.x.toFixed(4);
-                        elDimensionsY.value = properties.dimensions.y.toFixed(4);
-                        elDimensionsZ.value = properties.dimensions.z.toFixed(4);
-
-                        elParentID.value = properties.parentID;
-                        elParentJointIndex.value = properties.parentJointIndex;
-
-                        elRegistrationX.value = properties.registrationPoint.x.toFixed(4);
-                        elRegistrationY.value = properties.registrationPoint.y.toFixed(4);
-                        elRegistrationZ.value = properties.registrationPoint.z.toFixed(4);
-
-                        elRotationX.value = properties.rotation.x.toFixed(4);
-                        elRotationY.value = properties.rotation.y.toFixed(4);
-                        elRotationZ.value = properties.rotation.z.toFixed(4);
-
-                        elLinearVelocityX.value = properties.velocity.x.toFixed(4);
-                        elLinearVelocityY.value = properties.velocity.y.toFixed(4);
-                        elLinearVelocityZ.value = properties.velocity.z.toFixed(4);
-                        elLinearDamping.value = properties.damping.toFixed(2);
-
-                        elAngularVelocityX.value = (properties.angularVelocity.x * RADIANS_TO_DEGREES).toFixed(4);
-                        elAngularVelocityY.value = (properties.angularVelocity.y * RADIANS_TO_DEGREES).toFixed(4);
-                        elAngularVelocityZ.value = (properties.angularVelocity.z * RADIANS_TO_DEGREES).toFixed(4);
-                        elAngularDamping.value = properties.angularDamping.toFixed(4);
-
-                        elRestitution.value = properties.restitution.toFixed(4);
-                        elFriction.value = properties.friction.toFixed(4);
-
-                        elGravityX.value = properties.gravity.x.toFixed(4);
-                        elGravityY.value = properties.gravity.y.toFixed(4);
-                        elGravityZ.value = properties.gravity.z.toFixed(4);
-
-                        elAccelerationX.value = properties.acceleration.x.toFixed(4);
-                        elAccelerationY.value = properties.acceleration.y.toFixed(4);
-                        elAccelerationZ.value = properties.acceleration.z.toFixed(4);
-
-                        elDensity.value = properties.density.toFixed(4);
-                        elCollisionless.checked = properties.collisionless;
-                        elDynamic.checked = properties.dynamic;
-
-                        elCollideStatic.checked = properties.collidesWith.indexOf("static") > -1;
-                        elCollideKinematic.checked = properties.collidesWith.indexOf("kinematic") > -1;
-                        elCollideDynamic.checked = properties.collidesWith.indexOf("dynamic") > -1;
-                        elCollideMyAvatar.checked = properties.collidesWith.indexOf("myAvatar") > -1;
-                        elCollideOtherAvatar.checked = properties.collidesWith.indexOf("otherAvatar") > -1;
-
-                        elGrabbable.checked = properties.grab.grabbable;
-                        elTriggerable.checked = properties.grab.triggerable;
-                        elGrabFollowsController.checked = properties.grab.grabFollowsController;
-
-                        elCloneable.checked = properties.cloneable;
-                        elCloneableDynamic.checked = properties.cloneDynamic;
-                        elCloneableAvatarEntity.checked = properties.cloneAvatarEntity;
-                        elCloneableGroup.style.display = elCloneable.checked ? "block": "none";
-                        elCloneableLimit.value = properties.cloneLimit;
-                        elCloneableLifetime.value = properties.cloneLifetime;
-
-                        elCollisionSoundURL.value = properties.collisionSoundURL;
-                        elLifetime.value = properties.lifetime;
-                        elScriptURL.value = properties.script;
-                        elScriptTimestamp.value = properties.scriptTimestamp;
-                        elServerScripts.value = properties.serverScripts;
-
-                        var json = null;
+                        showGroupsForType(selectedEntityProperties.type);
+                        
+                        for (let propertyID in properties) {
+                            let property = properties[propertyID];
+                            let propertyData = property.data;
+                            let propertyName = property.name;
+                            let propertyValue = getPropertyValue(propertyName);
+                            
+                            let isSubProperty = propertyData.subPropertyOf !== undefined;
+                            if (propertyValue === undefined && !isSubProperty) {
+                                continue;
+                            }
+                            
+                            let isPropertyNotNumber = false;
+                            switch (propertyData.type) {
+                                case 'number':
+                                case 'slider':
+                                    isPropertyNotNumber = isNaN(propertyValue) || propertyValue === null;
+                                    break;
+                                case 'vec3':
+                                case 'vec2':
+                                    isPropertyNotNumber = isNaN(propertyValue.x) || propertyValue.x === null;
+                                    break;
+                                case 'color':
+                                    isPropertyNotNumber = isNaN(propertyValue.red) || propertyValue.red === null;
+                                    break;
+                            }
+                            if (isPropertyNotNumber && propertyData.fallbackProperty !== undefined) {
+                                propertyValue = getPropertyValue(propertyData.fallbackProperty);
+                            }
+                            
+                            switch (propertyData.type) {
+                                case 'string': {
+                                    property.elInput.value = propertyValue;
+                                    break;
+                                }
+                                case 'bool': {
+                                    let inverse = propertyData.inverse !== undefined ? propertyData.inverse : false;
+                                    if (isSubProperty) {
+                                        let propertyValue = selectedEntityProperties[propertyData.subPropertyOf];
+                                        let subProperties = propertyValue.split(",");
+                                        let subPropertyValue = subProperties.indexOf(propertyName) > -1;
+                                        property.elInput.checked = inverse ? !subPropertyValue : subPropertyValue;
+                                    } else {
+                                        property.elInput.checked = inverse ? !propertyValue : propertyValue;
+                                    }
+                                    break;
+                                }
+                                case 'number':
+                                case 'slider': {
+                                    let multiplier = propertyData.multiplier !== undefined ? propertyData.multiplier : 1;
+                                    let value = propertyValue / multiplier;
+                                    if (propertyData.round !== undefined) {
+                                        value = Math.round(value.round) / propertyData.round;
+                                    }
+                                    if (propertyData.decimals !== undefined) {
+                                        property.elInput.value = value.toFixed(propertyData.decimals);
+                                    } else {
+                                        property.elInput.value = value;
+                                    }
+                                    if (property.elSlider !== undefined) {
+                                        property.elSlider.value = property.elInput.value;
+                                    }
+                                    break;
+                                }
+                                case 'vec3':
+                                case 'vec2': {
+                                    let multiplier = propertyData.multiplier !== undefined ? propertyData.multiplier : 1;
+                                    let valueX = propertyValue.x / multiplier;
+                                    let valueY = propertyValue.y / multiplier;
+                                    let valueZ = propertyValue.z / multiplier;
+                                    if (propertyData.round !== undefined) {
+                                        valueX = Math.round(valueX * propertyData.round) / propertyData.round;
+                                        valueY = Math.round(valueY * propertyData.round) / propertyData.round;
+                                        valueZ = Math.round(valueZ * propertyData.round) / propertyData.round;
+                                    }
+                                    if (propertyData.decimals !== undefined) {
+                                        property.elInputX.value = valueX.toFixed(propertyData.decimals);
+                                        property.elInputY.value = valueY.toFixed(propertyData.decimals);
+                                        if (property.elInputZ !== undefined) {
+                                            property.elInputZ.value = valueZ.toFixed(propertyData.decimals);
+                                        }
+                                    } else {
+                                        property.elInputX.value = valueX;
+                                        property.elInputY.value = valueY;
+                                        if (property.elInputZ !== undefined) {
+                                            property.elInputZ.value = valueZ;
+                                        }
+                                    }
+                                    break;
+                                }
+                                case 'color': {
+                                    property.elColorPicker.style.backgroundColor = "rgb(" + propertyValue.red + "," + 
+                                                                                     propertyValue.green + "," + 
+                                                                                     propertyValue.blue + ")";
+                                    property.elInputR.value = propertyValue.red;
+                                    property.elInputG.value = propertyValue.green;
+                                    property.elInputB.value = propertyValue.blue;
+                                    break;
+                                }
+                                case 'dropdown': {
+                                    property.elInput.value = propertyValue;
+                                    setDropdownText(property.elInput);
+                                    break;
+                                }
+                                case 'textarea': {
+                                    property.elInput.value = propertyValue;
+                                    setTextareaScrolling(property.elInput);
+                                    break;
+                                }
+                                case 'icon': {
+                                    property.elSpan.innerHTML = propertyData.icons[propertyValue];
+                                    property.elSpan.style.display = "inline-block";
+                                    property.elLabel.innerHTML = propertyValue;
+                                    break;
+                                }
+                                case 'texture': {
+                                    property.elInput.value = propertyValue;
+                                    property.elInput.imageLoad(property.elInput.value);
+                                    break;
+                                }
+                            }
+                            
+                            let showPropertyRules = property.showPropertyRules;
+                            if (showPropertyRules !== undefined) {
+                                for (let propertyToShow in showPropertyRules) {
+                                    let showIfThisPropertyValue = showPropertyRules[propertyToShow];
+                                    let show = String(propertyValue) === String(showIfThisPropertyValue);
+                                    showPropertyElement(propertyToShow, show);
+                                }
+                            }
+                        }
+                        
+                        if (selectedEntityProperties.type === "Image") {
+                            let imageLink = JSON.parse(selectedEntityProperties.textures)["tex.picture"];
+                            getPropertyInputElement("image").value = imageLink;
+                        } else if (selectedEntityProperties.type === "Material") {
+                            let elParentMaterialNameString = getPropertyInputElement("materialNameToReplace");
+                            let elParentMaterialNameNumber = getPropertyInputElement("submeshToReplace");
+                            let elParentMaterialNameCheckbox = getPropertyInputElement("selectSubmesh");
+                            let parentMaterialName = selectedEntityProperties.parentMaterialName;
+                            if (parentMaterialName.startsWith(MATERIAL_PREFIX_STRING)) {
+                                elParentMaterialNameString.value = parentMaterialName.replace(MATERIAL_PREFIX_STRING, "");
+                                showParentMaterialNameBox(false, elParentMaterialNameNumber, elParentMaterialNameString);
+                                elParentMaterialNameCheckbox.checked = false;
+                            } else {
+                                elParentMaterialNameNumber.value = parseInt(parentMaterialName);
+                                showParentMaterialNameBox(true, elParentMaterialNameNumber, elParentMaterialNameString);
+                                elParentMaterialNameCheckbox.checked = true;
+                            }
+                        }
+                        
+                        let json = null;
                         try {
-                            json = JSON.parse(properties.userData);
+                            json = JSON.parse(selectedEntityProperties.userData);
                         } catch (e) {
                             // normal text
                             deleteJSONEditor();
-                            elUserData.value = properties.userData;
+                            getPropertyInputElement("userData").value = selectedEntityProperties.userData;
                             showUserDataTextArea();
                             showNewJSONEditorButton();
                             hideSaveUserDataButton();
+                            hideUserDataSaved();
                         }
                         if (json !== null) {
                             if (editor === null) {
                                 createJSONEditor();
                             }
-
                             setEditorJSON(json);
                             showSaveUserDataButton();
                             hideUserDataTextArea();
                             hideNewJSONEditorButton();
+                            hideUserDataSaved();
                         }
 
-                        var materialJson = null;
+                        let materialJson = null;
                         try {
-                            materialJson = JSON.parse(properties.materialData);
+                            materialJson = JSON.parse(selectedEntityProperties.materialData);
                         } catch (e) {
                             // normal text
                             deleteJSONMaterialEditor();
-                            elMaterialData.value = properties.materialData;
+                            getPropertyInputElement("materialData").value = selectedEntityProperties.materialData;
                             showMaterialDataTextArea();
                             showNewJSONMaterialEditorButton();
                             hideSaveMaterialDataButton();
+                            hideMaterialDataSaved();
                         }
                         if (materialJson !== null) {
                             if (materialEditor === null) {
                                 createJSONMaterialEditor();
                             }
-
                             setMaterialEditorJSON(materialJson);
                             showSaveMaterialDataButton();
                             hideMaterialDataTextArea();
                             hideNewJSONMaterialEditorButton();
+                            hideMaterialDataSaved();
                         }
-
-                        elHyperlinkHref.value = properties.href;
-                        elDescription.value = properties.description;
-
-
-                        if (properties.type === "Shape" || properties.type === "Box" || properties.type === "Sphere") {
-                            elShape.value = properties.shape;
-                            setDropdownText(elShape);
-                        }
-
-                        if (properties.type === "Shape" || properties.type === "Box" || 
-                                properties.type === "Sphere" || properties.type === "ParticleEffect") {
-                            elColorRed.value = properties.color.red;
-                            elColorGreen.value = properties.color.green;
-                            elColorBlue.value = properties.color.blue;
-                            elColorControlVariant2.style.backgroundColor = "rgb(" + properties.color.red + "," + 
-                                                                     properties.color.green + "," + properties.color.blue + ")";
-                        }
-
-                        if (properties.type === "Model" ||
-                            properties.type === "Shape" || properties.type === "Box" || properties.type === "Sphere") {
-
-                            elCanCastShadow.checked = properties.canCastShadow;
-                        }
-
-                        if (properties.type === "Model") {
-                            elModelURL.value = properties.modelURL;
-                            elShapeType.value = properties.shapeType;
-                            setDropdownText(elShapeType);
-                            elCompoundShapeURL.value = properties.compoundShapeURL;
-                            elModelAnimationURL.value = properties.animation.url;
-                            elModelAnimationPlaying.checked = properties.animation.running;
-                            elModelAnimationFPS.value = properties.animation.fps;
-                            elModelAnimationFrame.value = properties.animation.currentFrame;
-                            elModelAnimationFirstFrame.value = properties.animation.firstFrame;
-                            elModelAnimationLastFrame.value = properties.animation.lastFrame;
-                            elModelAnimationLoop.checked = properties.animation.loop;
-                            elModelAnimationHold.checked = properties.animation.hold;
-                            elModelAnimationAllowTranslation.checked = properties.animation.allowTranslation;
-                            elModelTextures.value = properties.textures;
-                            setTextareaScrolling(elModelTextures);
-                            elModelOriginalTextures.value = properties.originalTextures;
-                            setTextareaScrolling(elModelOriginalTextures);
-                        } else if (properties.type === "Web") {
-                            elWebSourceURL.value = properties.sourceUrl;
-                            elWebDPI.value = properties.dpi;
-                        } else if (properties.type === "Image") {
-                            var imageLink = JSON.parse(properties.textures)["tex.picture"];
-                            elImageURL.value = imageLink;
-                        } else if (properties.type === "Text") {
-                            elTextText.value = properties.text;
-                            elTextLineHeight.value = properties.lineHeight.toFixed(4);
-                            elTextFaceCamera.checked = properties.faceCamera;
-                            elTextTextColor.style.backgroundColor = "rgb(" + properties.textColor.red + "," + 
-                                                                    properties.textColor.green + "," + 
-                                                                    properties.textColor.blue + ")";
-                            elTextTextColorRed.value = properties.textColor.red;
-                            elTextTextColorGreen.value = properties.textColor.green;
-                            elTextTextColorBlue.value = properties.textColor.blue;
-                            elTextBackgroundColor.style.backgroundColor = "rgb(" + properties.backgroundColor.red + "," + 
-                                                                          properties.backgroundColor.green + "," + 
-                                                                          properties.backgroundColor.blue + ")";
-                            elTextBackgroundColorRed.value = properties.backgroundColor.red;
-                            elTextBackgroundColorGreen.value = properties.backgroundColor.green;
-                            elTextBackgroundColorBlue.value = properties.backgroundColor.blue;
-                        } else if (properties.type === "Light") {
-                            elLightSpotLight.checked = properties.isSpotlight;
-
-                            elLightColor.style.backgroundColor = "rgb(" + properties.color.red + "," + 
-                                                                     properties.color.green + "," + properties.color.blue + ")";
-                            elLightColorRed.value = properties.color.red;
-                            elLightColorGreen.value = properties.color.green;
-                            elLightColorBlue.value = properties.color.blue;
-
-                            elLightIntensity.value = properties.intensity.toFixed(1);
-                            elLightFalloffRadius.value = properties.falloffRadius.toFixed(1);
-                            elLightExponent.value = properties.exponent.toFixed(2);
-                            elLightCutoff.value = properties.cutoff.toFixed(2);
-                        } else if (properties.type === "Zone") {
-                            // Key light
-                            elZoneKeyLightModeInherit.checked = (properties.keyLightMode === 'inherit');
-                            elZoneKeyLightModeDisabled.checked = (properties.keyLightMode === 'disabled');
-                            elZoneKeyLightModeEnabled.checked = (properties.keyLightMode === 'enabled');
-
-                            elZoneKeyLightColor.style.backgroundColor = "rgb(" + properties.keyLight.color.red + "," + 
-                                                   properties.keyLight.color.green + "," + properties.keyLight.color.blue + ")";
-                            elZoneKeyLightColorRed.value = properties.keyLight.color.red;
-                            elZoneKeyLightColorGreen.value = properties.keyLight.color.green;
-                            elZoneKeyLightColorBlue.value = properties.keyLight.color.blue;
-                            elZoneKeyLightIntensity.value = properties.keyLight.intensity.toFixed(2);
-                            elZoneKeyLightDirectionX.value = properties.keyLight.direction.x.toFixed(2);
-                            elZoneKeyLightDirectionY.value = properties.keyLight.direction.y.toFixed(2);
-
-                            elZoneKeyLightCastShadows.checked = properties.keyLight.castShadows;
-
-                            // Skybox
-                            elZoneSkyboxModeInherit.checked = (properties.skyboxMode === 'inherit');
-                            elZoneSkyboxModeDisabled.checked = (properties.skyboxMode === 'disabled');
-                            elZoneSkyboxModeEnabled.checked = (properties.skyboxMode === 'enabled');
-
-                            // Ambient light
-                            elZoneAmbientLightModeInherit.checked = (properties.ambientLightMode === 'inherit');
-                            elZoneAmbientLightModeDisabled.checked = (properties.ambientLightMode === 'disabled');
-                            elZoneAmbientLightModeEnabled.checked = (properties.ambientLightMode === 'enabled');
-
-                            elZoneAmbientLightIntensity.value = properties.ambientLight.ambientIntensity.toFixed(2);
-                            elZoneAmbientLightURL.value = properties.ambientLight.ambientURL;
-
-                            // Haze
-                            elZoneHazeModeInherit.checked = (properties.hazeMode === 'inherit');
-                            elZoneHazeModeDisabled.checked = (properties.hazeMode === 'disabled');
-                            elZoneHazeModeEnabled.checked = (properties.hazeMode === 'enabled');
-
-                            elZoneHazeRange.value = properties.haze.hazeRange.toFixed(0);
-                            elZoneHazeColor.style.backgroundColor = "rgb(" + 
-                                properties.haze.hazeColor.red + "," + 
-                                properties.haze.hazeColor.green + "," + 
-                                properties.haze.hazeColor.blue + ")";
-
-                            elZoneHazeColorRed.value = properties.haze.hazeColor.red;
-                            elZoneHazeColorGreen.value = properties.haze.hazeColor.green;
-                            elZoneHazeColorBlue.value = properties.haze.hazeColor.blue;
-                            elZoneHazeBackgroundBlend.value = properties.haze.hazeBackgroundBlend.toFixed(2);
-
-                            elZoneHazeGlareColor.style.backgroundColor = "rgb(" + 
-                                properties.haze.hazeGlareColor.red + "," + 
-                                properties.haze.hazeGlareColor.green + "," + 
-                                properties.haze.hazeGlareColor.blue + ")";
-
-                            elZoneHazeGlareColorRed.value = properties.haze.hazeGlareColor.red;
-                            elZoneHazeGlareColorGreen.value = properties.haze.hazeGlareColor.green;
-                            elZoneHazeGlareColorBlue.value = properties.haze.hazeGlareColor.blue;
-
-                            elZoneHazeEnableGlare.checked = properties.haze.hazeEnableGlare;
-                            elZoneHazeGlareAngle.value = properties.haze.hazeGlareAngle.toFixed(0);
-
-                            elZoneHazeAltitudeEffect.checked = properties.haze.hazeAltitudeEffect;
-                            elZoneHazeBaseRef.value = properties.haze.hazeBaseRef.toFixed(0);
-                            elZoneHazeCeiling.value = properties.haze.hazeCeiling.toFixed(0);
-
-                            elZoneBloomModeInherit.checked = (properties.bloomMode === 'inherit');
-                            elZoneBloomModeDisabled.checked = (properties.bloomMode === 'disabled');
-                            elZoneBloomModeEnabled.checked = (properties.bloomMode === 'enabled');
-
-                            elZoneBloomIntensity.value = properties.bloom.bloomIntensity.toFixed(2);
-                            elZoneBloomThreshold.value = properties.bloom.bloomThreshold.toFixed(2);
-                            elZoneBloomSize.value = properties.bloom.bloomSize.toFixed(2);
-
-                            elShapeType.value = properties.shapeType;
-                            elCompoundShapeURL.value = properties.compoundShapeURL;
-
-                            elZoneSkyboxColor.style.backgroundColor = "rgb(" + properties.skybox.color.red + "," + 
-                                                       properties.skybox.color.green + "," + properties.skybox.color.blue + ")";
-                            elZoneSkyboxColorRed.value = properties.skybox.color.red;
-                            elZoneSkyboxColorGreen.value = properties.skybox.color.green;
-                            elZoneSkyboxColorBlue.value = properties.skybox.color.blue;
-                            elZoneSkyboxURL.value = properties.skybox.url;
-
-                            elZoneFlyingAllowed.checked = properties.flyingAllowed;
-                            elZoneGhostingAllowed.checked = properties.ghostingAllowed;
-                            elZoneFilterURL.value = properties.filterURL;
-
-                            // Show/hide sections as required
-                            showElements(document.getElementsByClassName('skybox-section'),
-                                elZoneSkyboxModeEnabled.checked);
-
-                            showElements(document.getElementsByClassName('keylight-section'),
-                                elZoneKeyLightModeEnabled.checked);
-
-                            showElements(document.getElementsByClassName('ambient-section'),
-                                elZoneAmbientLightModeEnabled.checked);
-
-                            showElements(document.getElementsByClassName('haze-section'),
-                                elZoneHazeModeEnabled.checked);
-
-                            showElements(document.getElementsByClassName('bloom-section'),
-                                elZoneBloomModeEnabled.checked);
-                        } else if (properties.type === "PolyVox") {
-                            elVoxelVolumeSizeX.value = properties.voxelVolumeSize.x.toFixed(2);
-                            elVoxelVolumeSizeY.value = properties.voxelVolumeSize.y.toFixed(2);
-                            elVoxelVolumeSizeZ.value = properties.voxelVolumeSize.z.toFixed(2);
-                            elVoxelSurfaceStyle.value = properties.voxelSurfaceStyle;
-                            setDropdownText(elVoxelSurfaceStyle);
-                            elXTextureURL.value = properties.xTextureURL;
-                            elYTextureURL.value = properties.yTextureURL;
-                            elZTextureURL.value = properties.zTextureURL;
-                        } else if (properties.type === "Material") {
-                            elMaterialURL.value = properties.materialURL;
-                            //elMaterialMappingMode.value = properties.materialMappingMode;
-                            //setDropdownText(elMaterialMappingMode);
-                            elPriority.value = properties.priority;
-                            if (properties.parentMaterialName.startsWith(MATERIAL_PREFIX_STRING)) {
-                                elParentMaterialNameString.value = properties.parentMaterialName.replace(MATERIAL_PREFIX_STRING, "");
-                                showParentMaterialNameBox(false, elParentMaterialNameNumber, elParentMaterialNameString);
-                                elParentMaterialNameCheckbox.checked = false;
-                            } else {
-                                elParentMaterialNameNumber.value = parseInt(properties.parentMaterialName);
-                                showParentMaterialNameBox(true, elParentMaterialNameNumber, elParentMaterialNameString);
-                                elParentMaterialNameCheckbox.checked = true;
-                            }
-                            elMaterialMappingPosX.value = properties.materialMappingPos.x.toFixed(4);
-                            elMaterialMappingPosY.value = properties.materialMappingPos.y.toFixed(4);
-                            elMaterialMappingScaleX.value = properties.materialMappingScale.x.toFixed(4);
-                            elMaterialMappingScaleY.value = properties.materialMappingScale.y.toFixed(4);
-                            elMaterialMappingRot.value = properties.materialMappingRot.toFixed(2);
-                        }
-
-                        // Only these types can cast a shadow
-                        if (properties.type === "Model" ||
-                            properties.type === "Shape" || properties.type === "Box" || properties.type === "Sphere") {
-
-                            showElements(document.getElementsByClassName('can-cast-shadow-section'), true);
-                        } else {
-                            showElements(document.getElementsByClassName('can-cast-shadow-section'), false);
-                        }
-
-                        if (properties.locked) {
+                        
+                        if (selectedEntityProperties.locked) {
                             disableProperties();
-                            elLocked.removeAttribute('disabled');
+                            getPropertyInputElement("locked").removeAttribute('disabled');
                         } else {
                             enableProperties();
-                            elSaveUserData.disabled = true;
-                            elSaveMaterialData.disabled = true;
+                            disableSaveUserDataButton();
+                            disableSaveMaterialDataButton()
                         }
-
-                        var activeElement = document.activeElement;
+                        
+                        let activeElement = document.activeElement;
                         if (doSelectElement && typeof activeElement.select !== "undefined") {
                             activeElement.select();
                         }
@@ -1540,263 +3153,78 @@ function loaded() {
                 }
             });
         }
-
-        elLocked.addEventListener('change', createEmitCheckedPropertyUpdateFunction('locked'));
-        elName.addEventListener('change', createEmitTextPropertyUpdateFunction('name'));
-        elHyperlinkHref.addEventListener('change', createEmitTextPropertyUpdateFunction('href'));
-        elDescription.addEventListener('change', createEmitTextPropertyUpdateFunction('description'));
-        elVisible.addEventListener('change', createEmitCheckedPropertyUpdateFunction('visible'));
-
-        var positionChangeFunction = createEmitVec3PropertyUpdateFunction(
-            'position', elPositionX, elPositionY, elPositionZ);
-        elPositionX.addEventListener('change', positionChangeFunction);
-        elPositionY.addEventListener('change', positionChangeFunction);
-        elPositionZ.addEventListener('change', positionChangeFunction);
-
-        var dimensionsChangeFunction = createEmitVec3PropertyUpdateFunction(
-            'dimensions', elDimensionsX, elDimensionsY, elDimensionsZ);
-        elDimensionsX.addEventListener('change', dimensionsChangeFunction);
-        elDimensionsY.addEventListener('change', dimensionsChangeFunction);
-        elDimensionsZ.addEventListener('change', dimensionsChangeFunction);
-
-        elParentID.addEventListener('change', createEmitTextPropertyUpdateFunction('parentID'));
-        elParentJointIndex.addEventListener('change', createEmitNumberPropertyUpdateFunction('parentJointIndex', 0));
-
-        var registrationChangeFunction = createEmitVec3PropertyUpdateFunction(
-            'registrationPoint', elRegistrationX, elRegistrationY, elRegistrationZ);
-        elRegistrationX.addEventListener('change', registrationChangeFunction);
-        elRegistrationY.addEventListener('change', registrationChangeFunction);
-        elRegistrationZ.addEventListener('change', registrationChangeFunction);
-
-        var rotationChangeFunction = createEmitVec3PropertyUpdateFunction(
-            'rotation', elRotationX, elRotationY, elRotationZ);
-        elRotationX.addEventListener('change', rotationChangeFunction);
-        elRotationY.addEventListener('change', rotationChangeFunction);
-        elRotationZ.addEventListener('change', rotationChangeFunction);
-
-        var velocityChangeFunction = createEmitVec3PropertyUpdateFunction(
-            'velocity', elLinearVelocityX, elLinearVelocityY, elLinearVelocityZ);
-        elLinearVelocityX.addEventListener('change', velocityChangeFunction);
-        elLinearVelocityY.addEventListener('change', velocityChangeFunction);
-        elLinearVelocityZ.addEventListener('change', velocityChangeFunction);
-        elLinearDamping.addEventListener('change', createEmitNumberPropertyUpdateFunction('damping'));
-
-        var angularVelocityChangeFunction = createEmitVec3PropertyUpdateFunctionWithMultiplier(
-            'angularVelocity', elAngularVelocityX, elAngularVelocityY, elAngularVelocityZ, DEGREES_TO_RADIANS);
-        elAngularVelocityX.addEventListener('change', angularVelocityChangeFunction);
-        elAngularVelocityY.addEventListener('change', angularVelocityChangeFunction);
-        elAngularVelocityZ.addEventListener('change', angularVelocityChangeFunction);
-        elAngularDamping.addEventListener('change', createEmitNumberPropertyUpdateFunction('angularDamping'));
-
-        elRestitution.addEventListener('change', createEmitNumberPropertyUpdateFunction('restitution'));
-        elFriction.addEventListener('change', createEmitNumberPropertyUpdateFunction('friction'));
-
-        var gravityChangeFunction = createEmitVec3PropertyUpdateFunction(
-            'gravity', elGravityX, elGravityY, elGravityZ);
-        elGravityX.addEventListener('change', gravityChangeFunction);
-        elGravityY.addEventListener('change', gravityChangeFunction);
-        elGravityZ.addEventListener('change', gravityChangeFunction);
-
-        var accelerationChangeFunction = createEmitVec3PropertyUpdateFunction(
-            'acceleration', elAccelerationX, elAccelerationY, elAccelerationZ);
-        elAccelerationX.addEventListener('change', accelerationChangeFunction);
-        elAccelerationY.addEventListener('change', accelerationChangeFunction);
-        elAccelerationZ.addEventListener('change', accelerationChangeFunction);
-
-        elDensity.addEventListener('change', createEmitNumberPropertyUpdateFunction('density'));
-        elCollisionless.addEventListener('change', createEmitCheckedPropertyUpdateFunction('collisionless'));
-        elDynamic.addEventListener('change', createEmitCheckedPropertyUpdateFunction('dynamic'));
-
-        elCollideDynamic.addEventListener('change', function() {
-            updateCheckedSubProperty("collidesWith", properties.collidesWith, elCollideDynamic, 'dynamic');
+        
+        // Server Script Status
+        let serverScriptProperty = properties["serverScripts"];
+        let elServerScript = serverScriptProperty.elInput;
+        let serverScriptElementID = serverScriptProperty.elementID;
+        let serverScriptStatusElementID = serverScriptElementID + "-status";
+        let elDiv = document.createElement('div');
+        elDiv.className = "property";
+        elDiv.setAttribute("id", "div-" + serverScriptStatusElementID);
+        let elLabel = document.createElement('label');
+        elLabel.setAttribute("for", serverScriptStatusElementID);
+        elLabel.innerText = "Server Script Status";
+        let elServerScriptStatus = document.createElement('span');
+        elServerScriptStatus.setAttribute("id", serverScriptStatusElementID);
+        elDiv.appendChild(elLabel);
+        elDiv.appendChild(elServerScriptStatus);
+        elServerScript.parentNode.appendChild(elDiv);
+        
+        // Server Script Error
+        elDiv = document.createElement('div');
+        elDiv.className = "property";
+        let elServerScriptError = document.createElement('textarea');
+        elServerScriptError.setAttribute("id", serverScriptElementID + "-error");
+        elDiv.appendChild(elServerScriptError);
+        elServerScript.parentNode.appendChild(elDiv);
+        
+        let elScript = getPropertyInputElement("script");
+        elScript.parentNode.className = "property url refresh";
+        elServerScript.parentNode.className = "property url refresh";
+            
+        // User Data
+        let userDataProperty = properties["userData"];
+        let elUserData = userDataProperty.elInput;
+        let userDataElementID = userDataProperty.elementID;
+        elDiv = elUserData.parentNode;
+        let elStaticUserData = document.createElement('div');
+        elStaticUserData.setAttribute("id", userDataElementID + "-static");
+        let elUserDataEditor = document.createElement('div');
+        elUserDataEditor.setAttribute("id", userDataElementID + "-editor");
+        let elUserDataSaved = document.createElement('span');
+        elUserDataSaved.setAttribute("id", userDataElementID + "-saved");
+        elUserDataSaved.innerText = "Saved!";
+        elDiv.childNodes[JSON_EDITOR_ROW_DIV_INDEX].appendChild(elUserDataSaved);
+        elDiv.insertBefore(elStaticUserData, elUserData);
+        elDiv.insertBefore(elUserDataEditor, elUserData);
+        
+        // Material Data
+        let materialDataProperty = properties["materialData"];
+        let elMaterialData = materialDataProperty.elInput;
+        let materialDataElementID = materialDataProperty.elementID;
+        elDiv = elMaterialData.parentNode;
+        let elStaticMaterialData = document.createElement('div');
+        elStaticMaterialData.setAttribute("id", materialDataElementID + "-static");
+        let elMaterialDataEditor = document.createElement('div');
+        elMaterialDataEditor.setAttribute("id", materialDataElementID + "-editor");
+        let elMaterialDataSaved = document.createElement('span');
+        elMaterialDataSaved.setAttribute("id", materialDataElementID + "-saved");
+        elMaterialDataSaved.innerText = "Saved!";
+        elDiv.childNodes[JSON_EDITOR_ROW_DIV_INDEX].appendChild(elMaterialDataSaved);
+        elDiv.insertBefore(elStaticMaterialData, elMaterialData);
+        elDiv.insertBefore(elMaterialDataEditor, elMaterialData);
+        
+        // Special Property Callbacks
+        let elParentMaterialNameString = getPropertyInputElement("materialNameToReplace");
+        let elParentMaterialNameNumber = getPropertyInputElement("submeshToReplace");
+        let elParentMaterialNameCheckbox = getPropertyInputElement("selectSubmesh");
+        elParentMaterialNameString.addEventListener('change', function () { 
+            updateProperty("parentMaterialName", MATERIAL_PREFIX_STRING + this.value); 
         });
-
-        elCollideKinematic.addEventListener('change', function() {
-            updateCheckedSubProperty("collidesWith", properties.collidesWith, elCollideKinematic, 'kinematic');
+        elParentMaterialNameNumber.addEventListener('change', function () { 
+            updateProperty("parentMaterialName", this.value); 
         });
-
-        elCollideStatic.addEventListener('change', function() {
-            updateCheckedSubProperty("collidesWith", properties.collidesWith, elCollideStatic, 'static');
-        });
-        elCollideMyAvatar.addEventListener('change', function() {
-            updateCheckedSubProperty("collidesWith", properties.collidesWith, elCollideMyAvatar, 'myAvatar');
-        });
-        elCollideOtherAvatar.addEventListener('change', function() {
-            updateCheckedSubProperty("collidesWith", properties.collidesWith, elCollideOtherAvatar, 'otherAvatar');
-        });
-
-
-        elGrabbable.addEventListener('change', createEmitGroupCheckedPropertyUpdateFunction('grab', 'grabbable'));
-        elTriggerable.addEventListener('change', createEmitGroupCheckedPropertyUpdateFunction('grab', 'triggerable'));
-        elGrabFollowsController.addEventListener('change',
-                                                 createEmitGroupCheckedPropertyUpdateFunction('grab', 'grabFollowsController'));
-
-        elCloneable.addEventListener('change', createEmitCheckedPropertyUpdateFunction('cloneable'));
-        elCloneableDynamic.addEventListener('change', createEmitCheckedPropertyUpdateFunction('cloneDynamic'));
-        elCloneableAvatarEntity.addEventListener('change', createEmitCheckedPropertyUpdateFunction('cloneAvatarEntity'));
-        elCloneableLifetime.addEventListener('change', createEmitNumberPropertyUpdateFunction('cloneLifetime'));
-        elCloneableLimit.addEventListener('change', createEmitNumberPropertyUpdateFunction('cloneLimit'));
-
-        elCollisionSoundURL.addEventListener('change', createEmitTextPropertyUpdateFunction('collisionSoundURL'));
-
-        elLifetime.addEventListener('change', createEmitNumberPropertyUpdateFunction('lifetime'));
-        elScriptURL.addEventListener('change', createEmitTextPropertyUpdateFunction('script'));
-        elScriptTimestamp.addEventListener('change', createEmitNumberPropertyUpdateFunction('scriptTimestamp'));
-        elServerScripts.addEventListener('change', createEmitTextPropertyUpdateFunction('serverScripts'));
-        elServerScripts.addEventListener('change', function() {
-            // invalidate the current status (so that same-same updates can still be observed visually)
-            elServerScriptStatus.innerText = PENDING_SCRIPT_STATUS;
-        });
-
-        elClearUserData.addEventListener("click", function() {
-            deleteJSONEditor();
-            elUserData.value = "";
-            showUserDataTextArea();
-            showNewJSONEditorButton();
-            hideSaveUserDataButton();
-            updateProperty('userData', elUserData.value);
-        });
-
-        elSaveUserData.addEventListener("click", function() {
-            saveJSONUserData(true);
-        });
-
-        elUserData.addEventListener('change', createEmitTextPropertyUpdateFunction('userData'));
-
-        elNewJSONEditor.addEventListener('click', function() {
-            deleteJSONEditor();
-            createJSONEditor();
-            var data = {};
-            setEditorJSON(data);
-            hideUserDataTextArea();
-            hideNewJSONEditorButton();
-            showSaveUserDataButton();
-        });
-
-        elClearMaterialData.addEventListener("click", function() {
-            deleteJSONMaterialEditor();
-            elMaterialData.value = "";
-            showMaterialDataTextArea();
-            showNewJSONMaterialEditorButton();
-            hideSaveMaterialDataButton();
-            updateProperty('materialData', elMaterialData.value);
-        });
-
-        elSaveMaterialData.addEventListener("click", function() {
-            saveJSONMaterialData(true);
-        });
-
-        elMaterialData.addEventListener('change', createEmitTextPropertyUpdateFunction('materialData'));
-
-        elNewJSONMaterialEditor.addEventListener('click', function() {
-            deleteJSONMaterialEditor();
-            createJSONMaterialEditor();
-            var data = {};
-            setMaterialEditorJSON(data);
-            hideMaterialDataTextArea();
-            hideNewJSONMaterialEditorButton();
-            showSaveMaterialDataButton();
-        });
-
-        var colorChangeFunction = createEmitColorPropertyUpdateFunction(
-            'color', elColorRed, elColorGreen, elColorBlue);
-        elColorRed.addEventListener('change', colorChangeFunction);
-        elColorGreen.addEventListener('change', colorChangeFunction);
-        elColorBlue.addEventListener('change', colorChangeFunction);
-        colorPickers['#property-color-control2'] = $('#property-color-control2').colpick({
-            colorScheme: 'dark',
-            layout: 'hex',
-            color: '000000',
-            submit: false, // We don't want to have a submission button
-            onShow: function(colpick) {
-                $('#property-color-control2').attr('active', 'true');
-                // The original color preview within the picker needs to be updated on show because
-                // prior to the picker being shown we don't have access to the selections' starting color.
-                colorPickers['#property-color-control2'].colpickSetColor({ 
-                    "r": elColorRed.value, 
-                    "g": elColorGreen.value, 
-                    "b": elColorBlue.value});
-            },
-            onHide: function(colpick) {
-                $('#property-color-control2').attr('active', 'false');
-            },
-            onChange: function(hsb, hex, rgb, el) {
-                $(el).css('background-color', '#' + hex);
-                emitColorPropertyUpdate('color', rgb.r, rgb.g, rgb.b);
-            }
-        });
-
-        elLightSpotLight.addEventListener('change', createEmitCheckedPropertyUpdateFunction('isSpotlight'));
-
-        var lightColorChangeFunction = createEmitColorPropertyUpdateFunction(
-            'color', elLightColorRed, elLightColorGreen, elLightColorBlue);
-        elLightColorRed.addEventListener('change', lightColorChangeFunction);
-        elLightColorGreen.addEventListener('change', lightColorChangeFunction);
-        elLightColorBlue.addEventListener('change', lightColorChangeFunction);
-        colorPickers['#property-light-color'] = $('#property-light-color').colpick({
-            colorScheme: 'dark',
-            layout: 'hex',
-            color: '000000',
-            submit: false, // We don't want to have a submission button
-            onShow: function(colpick) {
-                $('#property-light-color').attr('active', 'true');
-                // The original color preview within the picker needs to be updated on show because
-                // prior to the picker being shown we don't have access to the selections' starting color.
-                colorPickers['#property-light-color'].colpickSetColor({
-                    "r": elLightColorRed.value,
-                    "g": elLightColorGreen.value,
-                    "b": elLightColorBlue.value
-                });
-            },
-            onHide: function(colpick) {
-                $('#property-light-color').attr('active', 'false');
-            },
-            onChange: function(hsb, hex, rgb, el) {
-                $(el).css('background-color', '#' + hex);
-                emitColorPropertyUpdate('color', rgb.r, rgb.g, rgb.b);
-            }
-        });
-
-        elLightIntensity.addEventListener('change', createEmitNumberPropertyUpdateFunction('intensity', 1));
-        elLightFalloffRadius.addEventListener('change', createEmitNumberPropertyUpdateFunction('falloffRadius', 1));
-        elLightExponent.addEventListener('change', createEmitNumberPropertyUpdateFunction('exponent', 2));
-        elLightCutoff.addEventListener('change', createEmitNumberPropertyUpdateFunction('cutoff', 2));
-
-        elShape.addEventListener('change', createEmitTextPropertyUpdateFunction('shape'));
-
-        elCanCastShadow.addEventListener('change', createEmitCheckedPropertyUpdateFunction('canCastShadow'));
- 
-        elImageURL.addEventListener('change', createImageURLUpdateFunction('textures'));
-
-        elWebSourceURL.addEventListener('change', createEmitTextPropertyUpdateFunction('sourceUrl'));
-        elWebDPI.addEventListener('change', createEmitNumberPropertyUpdateFunction('dpi', 0));
-
-        elModelURL.addEventListener('change', createEmitTextPropertyUpdateFunction('modelURL'));
-        elShapeType.addEventListener('change', createEmitTextPropertyUpdateFunction('shapeType'));
-        elCompoundShapeURL.addEventListener('change', createEmitTextPropertyUpdateFunction('compoundShapeURL'));
-
-        elModelAnimationURL.addEventListener('change', createEmitGroupTextPropertyUpdateFunction('animation', 'url'));
-        elModelAnimationPlaying.addEventListener('change',createEmitGroupCheckedPropertyUpdateFunction('animation', 'running'));
-        elModelAnimationFPS.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('animation', 'fps'));
-        elModelAnimationFrame.addEventListener('change', 
-            createEmitGroupNumberPropertyUpdateFunction('animation', 'currentFrame'));
-        elModelAnimationFirstFrame.addEventListener('change', 
-            createEmitGroupNumberPropertyUpdateFunction('animation', 'firstFrame'));
-        elModelAnimationLastFrame.addEventListener('change', 
-            createEmitGroupNumberPropertyUpdateFunction('animation', 'lastFrame'));
-        elModelAnimationLoop.addEventListener('change', createEmitGroupCheckedPropertyUpdateFunction('animation', 'loop'));
-        elModelAnimationHold.addEventListener('change', createEmitGroupCheckedPropertyUpdateFunction('animation', 'hold'));
-        elModelAnimationAllowTranslation.addEventListener('change', 
-            createEmitGroupCheckedPropertyUpdateFunction('animation', 'allowTranslation'));
-
-        elModelTextures.addEventListener('change', createEmitTextPropertyUpdateFunction('textures'));
-
-        elMaterialURL.addEventListener('change', createEmitTextPropertyUpdateFunction('materialURL'));
-        //elMaterialMappingMode.addEventListener('change', createEmitTextPropertyUpdateFunction('materialMappingMode'));
-        elPriority.addEventListener('change', createEmitNumberPropertyUpdateFunction('priority', 0));
-
-        elParentMaterialNameString.addEventListener('change', function () { updateProperty("parentMaterialName", MATERIAL_PREFIX_STRING + this.value); });
-        elParentMaterialNameNumber.addEventListener('change', function () { updateProperty("parentMaterialName", this.value); });
         elParentMaterialNameCheckbox.addEventListener('change', function () {
             if (this.checked) {
                 updateProperty("parentMaterialName", elParentMaterialNameNumber.value);
@@ -1806,338 +3234,112 @@ function loaded() {
                 showParentMaterialNameBox(false, elParentMaterialNameNumber, elParentMaterialNameString);
             }
         });
+        
+        getPropertyInputElement("image").addEventListener('change', createImageURLUpdateFunction('textures'));
+        
+        // Collapsible sections
+        let elCollapsible = document.getElementsByClassName("section-header");
 
-        var materialMappingPosChangeFunction = createEmitVec2PropertyUpdateFunction('materialMappingPos', elMaterialMappingPosX, elMaterialMappingPosY);
-        elMaterialMappingPosX.addEventListener('change', materialMappingPosChangeFunction);
-        elMaterialMappingPosY.addEventListener('change', materialMappingPosChangeFunction);
-        var materialMappingScaleChangeFunction = createEmitVec2PropertyUpdateFunction('materialMappingScale', elMaterialMappingScaleX, elMaterialMappingScaleY);
-        elMaterialMappingScaleX.addEventListener('change', materialMappingScaleChangeFunction);
-        elMaterialMappingScaleY.addEventListener('change', materialMappingScaleChangeFunction);
-        elMaterialMappingRot.addEventListener('change', createEmitNumberPropertyUpdateFunction('materialMappingRot', 2));
+        let toggleCollapsedEvent = function(event) {
+            let element = event.target.parentNode.parentNode;
+            let isCollapsed = element.dataset.collapsed !== "true";
+            element.dataset.collapsed = isCollapsed ? "true" : false;
+            element.setAttribute("collapsed", isCollapsed ? "true" : "false");
+            element.getElementsByClassName(".collapse-icon")[0].textContent = isCollapsed ? "L" : "M";
+        };
 
-        elTextText.addEventListener('change', createEmitTextPropertyUpdateFunction('text'));
-        elTextFaceCamera.addEventListener('change', createEmitCheckedPropertyUpdateFunction('faceCamera'));
-        elTextLineHeight.addEventListener('change', createEmitNumberPropertyUpdateFunction('lineHeight'));
-        var textTextColorChangeFunction = createEmitColorPropertyUpdateFunction(
-            'textColor', elTextTextColorRed, elTextTextColorGreen, elTextTextColorBlue);
-        elTextTextColorRed.addEventListener('change', textTextColorChangeFunction);
-        elTextTextColorGreen.addEventListener('change', textTextColorChangeFunction);
-        elTextTextColorBlue.addEventListener('change', textTextColorChangeFunction);
-        colorPickers['#property-text-text-color'] = $('#property-text-text-color').colpick({
-            colorScheme: 'dark',
-            layout: 'hex',
-            color: '000000',
-            submit: false, // We don't want to have a submission button
-            onShow: function(colpick) {
-                $('#property-text-text-color').attr('active', 'true');
-                // The original color preview within the picker needs to be updated on show because
-                // prior to the picker being shown we don't have access to the selections' starting color.
-                colorPickers['#property-text-text-color'].colpickSetColor({
-                    "r": elTextTextColorRed.value,
-                    "g": elTextTextColorGreen.value,
-                    "b": elTextTextColorBlue.value
-                });
-            },
-            onHide: function(colpick) {
-                $('#property-text-text-color').attr('active', 'false');
-            },
-            onChange: function(hsb, hex, rgb, el) {
-                $(el).css('background-color', '#' + hex);
-                $(el).attr('active', 'false');
-                emitColorPropertyUpdate('textColor', rgb.r, rgb.g, rgb.b);
+        for (let collapseIndex = 0, numCollapsibles = elCollapsible.length; collapseIndex < numCollapsibles; ++collapseIndex) {
+            let curCollapsibleElement = elCollapsible[collapseIndex];
+            curCollapsibleElement.getElementsByTagName('span')[0].addEventListener("click", toggleCollapsedEvent, true);
+        }
+        
+        // Textarea scrollbars
+        let elTextareas = document.getElementsByTagName("TEXTAREA");
+
+        let textareaOnChangeEvent = function(event) {
+            setTextareaScrolling(event.target);
+        };
+
+        for (let textAreaIndex = 0, numTextAreas = elTextareas.length; textAreaIndex < numTextAreas; ++textAreaIndex) {
+            let curTextAreaElement = elTextareas[textAreaIndex];
+            setTextareaScrolling(curTextAreaElement);
+            curTextAreaElement.addEventListener("input", textareaOnChangeEvent, false);
+            curTextAreaElement.addEventListener("change", textareaOnChangeEvent, false);
+            /* FIXME: Detect and update textarea scrolling attribute on resize. Unfortunately textarea doesn't have a resize
+            event; mouseup is a partial stand-in but doesn't handle resizing if mouse moves outside textarea rectangle. */
+            curTextAreaElement.addEventListener("mouseup", textareaOnChangeEvent, false);
+        }
+        
+        // Dropdowns
+        // For each dropdown the following replacement is created in place of the original dropdown...
+        // Structure created:
+        //  <dl dropped="true/false">
+        //      <dt name="?" id="?" value="?"><span>display text</span><span>carat</span></dt>
+        //      <dd>
+        //          <ul>
+        //              <li value="??>display text</li>
+        //              <li>...</li>
+        //          </ul>
+        //      </dd>
+        //  </dl>    
+        let elDropdowns = document.getElementsByTagName("select");
+        for (let dropDownIndex = 0; dropDownIndex < elDropdowns.length; ++dropDownIndex) {
+            let elDropdown = elDropdowns[dropDownIndex];
+            let options = elDropdown.getElementsByTagName("option");
+            let selectedOption = 0;
+            for (let optionIndex = 0; optionIndex < options.length; ++optionIndex) {
+                if (options[optionIndex].getAttribute("selected") === "selected") {
+                    selectedOption = optionIndex;
+                    break;
+                }
             }
-        });
+            let div = elDropdown.parentNode;
 
-        var textBackgroundColorChangeFunction = createEmitColorPropertyUpdateFunction(
-            'backgroundColor', elTextBackgroundColorRed, elTextBackgroundColorGreen, elTextBackgroundColorBlue);
+            let dl = document.createElement("dl");
+            div.appendChild(dl);
 
-        elTextBackgroundColorRed.addEventListener('change', textBackgroundColorChangeFunction);
-        elTextBackgroundColorGreen.addEventListener('change', textBackgroundColorChangeFunction);
-        elTextBackgroundColorBlue.addEventListener('change', textBackgroundColorChangeFunction);
-        colorPickers['#property-text-background-color'] = $('#property-text-background-color').colpick({
-            colorScheme: 'dark',
-            layout: 'hex',
-            color: '000000',
-            submit: false, // We don't want to have a submission button
-            onShow: function(colpick) {
-                $('#property-text-background-color').attr('active', 'true');
-                // The original color preview within the picker needs to be updated on show because
-                // prior to the picker being shown we don't have access to the selections' starting color.
-                colorPickers['#property-text-background-color'].colpickSetColor({
-                    "r": elTextBackgroundColorRed.value,
-                    "g": elTextBackgroundColorGreen.value,
-                    "b": elTextBackgroundColorBlue.value
-                });
-            },
-            onHide: function(colpick) {
-                $('#property-text-background-color').attr('active', 'false');
-            },
-            onChange: function(hsb, hex, rgb, el) {
-                $(el).css('background-color', '#' + hex);
-                emitColorPropertyUpdate('backgroundColor', rgb.r, rgb.g, rgb.b);
+            let dt = document.createElement("dt");
+            dt.name = elDropdown.name;
+            dt.id = elDropdown.id;
+            dt.addEventListener("click", toggleDropdown, true);
+            dl.appendChild(dt);
+
+            let span = document.createElement("span");
+            span.setAttribute("value", options[selectedOption].value);
+            span.textContent = options[selectedOption].firstChild.textContent;
+            dt.appendChild(span);
+
+            let spanCaratDown = document.createElement("span");
+            spanCaratDown.textContent = "5"; // caratDn
+            dt.appendChild(spanCaratDown);
+
+            let dd = document.createElement("dd");
+            dl.appendChild(dd);
+
+            let ul = document.createElement("ul");
+            dd.appendChild(ul);
+
+            for (let listOptionIndex = 0; listOptionIndex < options.length; ++listOptionIndex) {
+                let li = document.createElement("li");
+                li.setAttribute("value", options[listOptionIndex].value);
+                li.textContent = options[listOptionIndex].firstChild.textContent;
+                li.addEventListener("click", setDropdownValue);
+                ul.appendChild(li);
             }
-        });
-
-        // Key light
-        var keyLightModeChanged = createZoneComponentModeChangedFunction('keyLightMode',
-            elZoneKeyLightModeInherit, elZoneKeyLightModeDisabled, elZoneKeyLightModeEnabled);
-
-        elZoneKeyLightModeInherit.addEventListener('change', keyLightModeChanged);
-        elZoneKeyLightModeDisabled.addEventListener('change', keyLightModeChanged);
-        elZoneKeyLightModeEnabled.addEventListener('change', keyLightModeChanged);
-
-        colorPickers['#property-zone-key-light-color'] = $('#property-zone-key-light-color').colpick({
-            colorScheme: 'dark',
-            layout: 'hex',
-            color: '000000',
-            submit: false, // We don't want to have a submission button
-            onShow: function(colpick) {
-                $('#property-zone-key-light-color').attr('active', 'true');
-                // The original color preview within the picker needs to be updated on show because
-                // prior to the picker being shown we don't have access to the selections' starting color.
-                colorPickers['#property-zone-key-light-color'].colpickSetColor({
-                    "r": elZoneKeyLightColorRed.value,
-                    "g": elZoneKeyLightColorGreen.value,
-                    "b": elZoneKeyLightColorBlue.value
-                });
-            },
-            onHide: function(colpick) {
-                $('#property-zone-key-light-color').attr('active', 'false');
-            },
-            onChange: function(hsb, hex, rgb, el) {
-                $(el).css('background-color', '#' + hex);
-                emitColorPropertyUpdate('color', rgb.r, rgb.g, rgb.b, 'keyLight');
-            }
-        });
-        var zoneKeyLightColorChangeFunction = createEmitGroupColorPropertyUpdateFunction('keyLight', 'color', 
-            elZoneKeyLightColorRed, elZoneKeyLightColorGreen, elZoneKeyLightColorBlue);
-
-        elZoneKeyLightColorRed.addEventListener('change', zoneKeyLightColorChangeFunction);
-        elZoneKeyLightColorGreen.addEventListener('change', zoneKeyLightColorChangeFunction);
-        elZoneKeyLightColorBlue.addEventListener('change', zoneKeyLightColorChangeFunction);
-        elZoneKeyLightIntensity.addEventListener('change', 
-            createEmitGroupNumberPropertyUpdateFunction('keyLight', 'intensity'));
-
-        var zoneKeyLightDirectionChangeFunction = createEmitGroupVec3PropertyUpdateFunction('keyLight', 'direction', 
-            elZoneKeyLightDirectionX, elZoneKeyLightDirectionY);
-
-        elZoneKeyLightDirectionX.addEventListener('change', zoneKeyLightDirectionChangeFunction);
-        elZoneKeyLightDirectionY.addEventListener('change', zoneKeyLightDirectionChangeFunction);
-
-        elZoneKeyLightCastShadows.addEventListener('change',
-            createEmitGroupCheckedPropertyUpdateFunction('keyLight', 'castShadows'));
-
-        // Skybox
-        var skyboxModeChanged = createZoneComponentModeChangedFunction('skyboxMode',
-            elZoneSkyboxModeInherit, elZoneSkyboxModeDisabled, elZoneSkyboxModeEnabled);
-
-        elZoneSkyboxModeInherit.addEventListener('change', skyboxModeChanged);
-        elZoneSkyboxModeDisabled.addEventListener('change', skyboxModeChanged);
-        elZoneSkyboxModeEnabled.addEventListener('change', skyboxModeChanged);
-
-        // Ambient light
-        elCopySkyboxURLToAmbientURL.addEventListener("click", function () {
-            document.getElementById("property-zone-key-ambient-url").value = properties.skybox.url;
-            properties.ambientLight.ambientURL = properties.skybox.url;
-            updateProperties(properties);
-        });
-
-        var ambientLightModeChanged = createZoneComponentModeChangedFunction('ambientLightMode',
-            elZoneAmbientLightModeInherit, elZoneAmbientLightModeDisabled, elZoneAmbientLightModeEnabled);
-
-        elZoneAmbientLightModeInherit.addEventListener('change', ambientLightModeChanged);
-        elZoneAmbientLightModeDisabled.addEventListener('change', ambientLightModeChanged);
-        elZoneAmbientLightModeEnabled.addEventListener('change', ambientLightModeChanged);
-
-        elZoneAmbientLightIntensity.addEventListener('change',
-            createEmitGroupNumberPropertyUpdateFunction('ambientLight', 'ambientIntensity'));
-
-        elZoneAmbientLightURL.addEventListener('change',
-            createEmitGroupTextPropertyUpdateFunction('ambientLight', 'ambientURL'));
-
-        // Haze
-        var hazeModeChanged = createZoneComponentModeChangedFunction('hazeMode',
-            elZoneHazeModeInherit, elZoneHazeModeDisabled, elZoneHazeModeEnabled);
-
-        elZoneHazeModeInherit.addEventListener('change', hazeModeChanged);
-        elZoneHazeModeDisabled.addEventListener('change', hazeModeChanged);
-        elZoneHazeModeEnabled.addEventListener('change', hazeModeChanged);
-
-        elZoneHazeRange.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('haze', 'hazeRange'));
-
-        colorPickers['#property-zone-haze-color'] = $('#property-zone-haze-color').colpick({
-            colorScheme: 'dark',
-            layout: 'hex',
-            color: '000000',
-            submit: false, // We don't want to have a submission button
-            onShow: function(colpick) {
-                $('#property-zone-haze-color').attr('active', 'true');
-                // The original color preview within the picker needs to be updated on show because
-                // prior to the picker being shown we don't have access to the selections' starting color.
-                colorPickers['#property-zone-haze-color'].colpickSetColor({
-                    "r": elZoneHazeColorRed.value,
-                    "g": elZoneHazeColorGreen.value,
-                    "b": elZoneHazeColorBlue.value
-                });
-            },
-            onHide: function(colpick) {
-                $('#property-zone-haze-color').attr('active', 'false');
-            },
-            onChange: function(hsb, hex, rgb, el) {
-                $(el).css('background-color', '#' + hex);
-                emitColorPropertyUpdate('hazeColor', rgb.r, rgb.g, rgb.b, 'haze');
-            }
-        });
-        var zoneHazeColorChangeFunction = createEmitGroupColorPropertyUpdateFunction('haze', 'hazeColor', 
-            elZoneHazeColorRed, 
-            elZoneHazeColorGreen, 
-            elZoneHazeColorBlue);
-
-        elZoneHazeColorRed.addEventListener('change', zoneHazeColorChangeFunction);
-        elZoneHazeColorGreen.addEventListener('change', zoneHazeColorChangeFunction);
-        elZoneHazeColorBlue.addEventListener('change', zoneHazeColorChangeFunction);
-
-        colorPickers['#property-zone-haze-glare-color'] = $('#property-zone-haze-glare-color').colpick({
-            colorScheme: 'dark',
-            layout: 'hex',
-            color: '000000',
-            submit: false, // We don't want to have a submission button
-            onShow: function(colpick) {
-                $('#property-zone-haze-glare-color').attr('active', 'true');
-                // The original color preview within the picker needs to be updated on show because
-                // prior to the picker being shown we don't have access to the selections' starting color.
-                colorPickers['#property-zone-haze-glare-color'].colpickSetColor({
-                    "r": elZoneHazeGlareColorRed.value,
-                    "g": elZoneHazeGlareColorGreen.value,
-                    "b": elZoneHazeGlareColorBlue.value
-                });
-            },
-            onHide: function(colpick) {
-                $('#property-zone-haze-glare-color').attr('active', 'false');
-            },
-            onChange: function(hsb, hex, rgb, el) {
-                $(el).css('background-color', '#' + hex);
-                emitColorPropertyUpdate('hazeGlareColor', rgb.r, rgb.g, rgb.b, 'haze');
-            }
-        });
-        var zoneHazeGlareColorChangeFunction = createEmitGroupColorPropertyUpdateFunction('haze', 'hazeGlareColor', 
-            elZoneHazeGlareColorRed, 
-            elZoneHazeGlareColorGreen, 
-            elZoneHazeGlareColorBlue);
-
-        elZoneHazeGlareColorRed.addEventListener('change', zoneHazeGlareColorChangeFunction);
-        elZoneHazeGlareColorGreen.addEventListener('change', zoneHazeGlareColorChangeFunction);
-        elZoneHazeGlareColorBlue.addEventListener('change', zoneHazeGlareColorChangeFunction);
-
-        elZoneHazeEnableGlare.addEventListener('change', 
-            createEmitGroupCheckedPropertyUpdateFunction('haze', 'hazeEnableGlare'));
-        elZoneHazeGlareAngle.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('haze', 'hazeGlareAngle'));
-
-        elZoneHazeAltitudeEffect.addEventListener('change', 
-            createEmitGroupCheckedPropertyUpdateFunction('haze', 'hazeAltitudeEffect'));
-        elZoneHazeCeiling.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('haze', 'hazeCeiling'));
-        elZoneHazeBaseRef.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('haze', 'hazeBaseRef'));
-
-        elZoneHazeBackgroundBlend.addEventListener('change', 
-            createEmitGroupNumberPropertyUpdateFunction('haze', 'hazeBackgroundBlend'));
-
-        // Bloom
-        var bloomModeChanged = createZoneComponentModeChangedFunction('bloomMode',
-            elZoneBloomModeInherit, elZoneBloomModeDisabled, elZoneBloomModeEnabled);
-
-        elZoneBloomModeInherit.addEventListener('change', bloomModeChanged);
-        elZoneBloomModeDisabled.addEventListener('change', bloomModeChanged);
-        elZoneBloomModeEnabled.addEventListener('change', bloomModeChanged);
-
-        elZoneBloomIntensity.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('bloom', 'bloomIntensity'));
-        elZoneBloomThreshold.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('bloom', 'bloomThreshold'));
-        elZoneBloomSize.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('bloom', 'bloomSize'));
-
-        var zoneSkyboxColorChangeFunction = createEmitGroupColorPropertyUpdateFunction('skybox', 'color',
-            elZoneSkyboxColorRed, elZoneSkyboxColorGreen, elZoneSkyboxColorBlue);
-        elZoneSkyboxColorRed.addEventListener('change', zoneSkyboxColorChangeFunction);
-        elZoneSkyboxColorGreen.addEventListener('change', zoneSkyboxColorChangeFunction);
-        elZoneSkyboxColorBlue.addEventListener('change', zoneSkyboxColorChangeFunction);
-        colorPickers['#property-zone-skybox-color'] = $('#property-zone-skybox-color').colpick({
-            colorScheme: 'dark',
-            layout: 'hex',
-            color: '000000',
-            submit: false, // We don't want to have a submission button
-            onShow: function(colpick) {
-                $('#property-zone-skybox-color').attr('active', 'true');
-                // The original color preview within the picker needs to be updated on show because
-                // prior to the picker being shown we don't have access to the selections' starting color.
-                colorPickers['#property-zone-skybox-color'].colpickSetColor({
-                    "r": elZoneSkyboxColorRed.value,
-                    "g": elZoneSkyboxColorGreen.value,
-                    "b": elZoneSkyboxColorBlue.value
-                });
-            },
-            onHide: function(colpick) {
-                $('#property-zone-skybox-color').attr('active', 'false');
-            },
-            onChange: function(hsb, hex, rgb, el) {
-                $(el).css('background-color', '#' + hex);
-                emitColorPropertyUpdate('color', rgb.r, rgb.g, rgb.b, 'skybox');
-            }
-        });
-
-        elZoneSkyboxURL.addEventListener('change', createEmitGroupTextPropertyUpdateFunction('skybox', 'url'));
-
-        elZoneFlyingAllowed.addEventListener('change', createEmitCheckedPropertyUpdateFunction('flyingAllowed'));
-        elZoneGhostingAllowed.addEventListener('change', createEmitCheckedPropertyUpdateFunction('ghostingAllowed'));
-        elZoneFilterURL.addEventListener('change', createEmitTextPropertyUpdateFunction('filterURL'));
-
-        var voxelVolumeSizeChangeFunction = createEmitVec3PropertyUpdateFunction(
-            'voxelVolumeSize', elVoxelVolumeSizeX, elVoxelVolumeSizeY, elVoxelVolumeSizeZ);
-        elVoxelVolumeSizeX.addEventListener('change', voxelVolumeSizeChangeFunction);
-        elVoxelVolumeSizeY.addEventListener('change', voxelVolumeSizeChangeFunction);
-        elVoxelVolumeSizeZ.addEventListener('change', voxelVolumeSizeChangeFunction);
-        elVoxelSurfaceStyle.addEventListener('change', createEmitTextPropertyUpdateFunction('voxelSurfaceStyle'));
-        elXTextureURL.addEventListener('change', createEmitTextPropertyUpdateFunction('xTextureURL'));
-        elYTextureURL.addEventListener('change', createEmitTextPropertyUpdateFunction('yTextureURL'));
-        elZTextureURL.addEventListener('change', createEmitTextPropertyUpdateFunction('zTextureURL'));
-
-        elMoveSelectionToGrid.addEventListener("click", function() {
-            EventBridge.emitWebEvent(JSON.stringify({
-                type: "action",
-                action: "moveSelectionToGrid"
-            }));
-        });
-        elMoveAllToGrid.addEventListener("click", function() {
-            EventBridge.emitWebEvent(JSON.stringify({
-                type: "action",
-                action: "moveAllToGrid"
-            }));
-        });
-        elResetToNaturalDimensions.addEventListener("click", function() {
-            EventBridge.emitWebEvent(JSON.stringify({
-                type: "action",
-                action: "resetToNaturalDimensions"
-            }));
-        });
-        elRescaleDimensionsButton.addEventListener("click", function() {
-            EventBridge.emitWebEvent(JSON.stringify({
-                type: "action",
-                action: "rescaleDimensions",
-                percentage: parseFloat(elRescaleDimensionsPct.value)
-            }));
-        });
-        elReloadScriptsButton.addEventListener("click", function() {
-            EventBridge.emitWebEvent(JSON.stringify({
-                type: "action",
-                action: "reloadClientScripts"
-            }));
-        });
-        elReloadServerScriptsButton.addEventListener("click", function() {
-            // invalidate the current status (so that same-same updates can still be observed visually)
-            elServerScriptStatus.innerText = PENDING_SCRIPT_STATUS;
-            EventBridge.emitWebEvent(JSON.stringify({
-                type: "action",
-                action: "reloadServerScripts"
-            }));
-        });
-
+            
+            let propertyID = elDropdown.getAttribute("propertyID");
+            let property = properties[propertyID];
+            property.elInput = dt;
+            dt.addEventListener('change', createEmitTextPropertyUpdateFunction(property.name));
+        }
+        
+        elDropdowns = document.getElementsByTagName("select");
+        while (elDropdowns.length > 0) {
+            var el = elDropdowns[0];
+            el.parentNode.removeChild(el);
+            elDropdowns = document.getElementsByTagName("select");
+        }
+            
         document.addEventListener("keydown", function (keyDown) {
             if (keyDown.keyCode === KEY_P && keyDown.ctrlKey) {
                 if (keyDown.shiftKey) {
@@ -2147,156 +3349,29 @@ function loaded() {
                 }
             }
         });
+        
         window.onblur = function() {
             // Fake a change event
-            var ev = document.createEvent("HTMLEvents");
+            let ev = document.createEvent("HTMLEvents");
             ev.initEvent("change", true, true);
             document.activeElement.dispatchEvent(ev);
         };
-
+        
         // For input and textarea elements, select all of the text on focus
-        var els = document.querySelectorAll("input, textarea");
-        for (var i = 0; i < els.length; i++) {
+        let els = document.querySelectorAll("input, textarea");
+        for (let i = 0; i < els.length; ++i) {
             els[i].onfocus = function (e) {
                 e.target.select();
             };
         }
+        
+        bindAllNonJSONEditorElements(); 
 
-        bindAllNonJSONEditorElements();
+        showGroupsForType("None");
+        resetProperties();
+        disableProperties();        
     });
 
-    // Collapsible sections
-    var elCollapsible = document.getElementsByClassName("section-header");
-
-    var toggleCollapsedEvent = function(event) {
-        var element = event.target.parentNode.parentNode;
-        var isCollapsed = element.dataset.collapsed !== "true";
-        element.dataset.collapsed = isCollapsed ? "true" : false;
-        element.setAttribute("collapsed", isCollapsed ? "true" : "false");
-        element.getElementsByClassName(".collapse-icon")[0].textContent = isCollapsed ? "L" : "M";
-    };
-
-    for (var collapseIndex = 0, numCollapsibles = elCollapsible.length; collapseIndex < numCollapsibles; ++collapseIndex) {
-        var curCollapsibleElement = elCollapsible[collapseIndex];
-        curCollapsibleElement.getElementsByTagName('span')[0].addEventListener("click", toggleCollapsedEvent, true);
-    }
-
-
-    // Textarea scrollbars
-    var elTextareas = document.getElementsByTagName("TEXTAREA");
-
-    var textareaOnChangeEvent = function(event) {
-        setTextareaScrolling(event.target);
-    };
-
-    for (var textAreaIndex = 0, numTextAreas = elTextareas.length; textAreaIndex < numTextAreas; ++textAreaIndex) {
-        var curTextAreaElement = elTextareas[textAreaIndex];
-        setTextareaScrolling(curTextAreaElement);
-        curTextAreaElement.addEventListener("input", textareaOnChangeEvent, false);
-        curTextAreaElement.addEventListener("change", textareaOnChangeEvent, false);
-        /* FIXME: Detect and update textarea scrolling attribute on resize. Unfortunately textarea doesn't have a resize
-        event; mouseup is a partial stand-in but doesn't handle resizing if mouse moves outside textarea rectangle. */
-        curTextAreaElement.addEventListener("mouseup", textareaOnChangeEvent, false);
-    }
-
-    // Dropdowns
-    // For each dropdown the following replacement is created in place of the original dropdown...
-    // Structure created:
-    //  <dl dropped="true/false">
-    //      <dt name="?" id="?" value="?"><span>display text</span><span>carat</span></dt>
-    //      <dd>
-    //          <ul>
-    //              <li value="??>display text</li>
-    //              <li>...</li>
-    //          </ul>
-    //      </dd>
-    //  </dl>
-
-    function setDropdownText(dropdown) {
-        var lis = dropdown.parentNode.getElementsByTagName("li");
-        var text = "";
-        for (var i = 0; i < lis.length; i++) {
-            if (String(lis[i].getAttribute("value")) === String(dropdown.value)) {
-                text = lis[i].textContent;
-            }
-        }
-        dropdown.firstChild.textContent = text;
-    }
-
-    function toggleDropdown(event) {
-        var element = event.target;
-        if (element.nodeName !== "DT") {
-            element = element.parentNode;
-        }
-        element = element.parentNode;
-        var isDropped = element.getAttribute("dropped");
-        element.setAttribute("dropped", isDropped !== "true" ? "true" : "false");
-    }
-
-    function setDropdownValue(event) {
-        var dt = event.target.parentNode.parentNode.previousSibling;
-        dt.value = event.target.getAttribute("value");
-        dt.firstChild.textContent = event.target.textContent;
-
-        dt.parentNode.setAttribute("dropped", "false");
-
-        var evt = document.createEvent("HTMLEvents");
-        evt.initEvent("change", true, true);
-        dt.dispatchEvent(evt);
-    }
-
-    var elDropdowns = document.getElementsByTagName("select");
-    for (var dropDownIndex = 0; dropDownIndex < elDropdowns.length; ++dropDownIndex) {
-        var options = elDropdowns[dropDownIndex].getElementsByTagName("option");
-        var selectedOption = 0;
-        for (var optionIndex = 0; optionIndex < options.length; ++optionIndex) {
-            if (options[optionIndex].getAttribute("selected") === "selected") {
-                selectedOption = optionIndex;
-                // TODO:  Shouldn't there be a break here?
-            }
-        }
-        var div = elDropdowns[dropDownIndex].parentNode;
-
-        var dl = document.createElement("dl");
-        div.appendChild(dl);
-
-        var dt = document.createElement("dt");
-        dt.name = elDropdowns[dropDownIndex].name;
-        dt.id = elDropdowns[dropDownIndex].id;
-        dt.addEventListener("click", toggleDropdown, true);
-        dl.appendChild(dt);
-
-        var span = document.createElement("span");
-        span.setAttribute("value", options[selectedOption].value);
-        span.textContent = options[selectedOption].firstChild.textContent;
-        dt.appendChild(span);
-
-        var spanCaratDown = document.createElement("span");
-        spanCaratDown.textContent = "5"; // caratDn
-        dt.appendChild(spanCaratDown);
-
-        var dd = document.createElement("dd");
-        dl.appendChild(dd);
-
-        var ul = document.createElement("ul");
-        dd.appendChild(ul);
-
-        for (var listOptionIndex = 0; listOptionIndex < options.length; ++listOptionIndex) {
-            var li = document.createElement("li");
-            li.setAttribute("value", options[listOptionIndex].value);
-            li.textContent = options[listOptionIndex].firstChild.textContent;
-            li.addEventListener("click", setDropdownValue);
-            ul.appendChild(li);
-        }
-    }
-
-    elDropdowns = document.getElementsByTagName("select");
-    while (elDropdowns.length > 0) {
-        var el = elDropdowns[0];
-        el.parentNode.removeChild(el);
-        elDropdowns = document.getElementsByTagName("select");
-    }
-
     augmentSpinButtons();
 
     // Disable right-click context menu which is not visible in the HMD and makes it seem like the app has locked
diff --git a/scripts/system/html/js/underscore-min.js b/scripts/system/html/js/underscore-min.js
new file mode 100644
index 0000000000..f01025b7bc
--- /dev/null
+++ b/scripts/system/html/js/underscore-min.js
@@ -0,0 +1,6 @@
+//     Underscore.js 1.8.3
+//     http://underscorejs.org
+//     (c) 2009-2015 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
+//     Underscore may be freely distributed under the MIT license.
+(function(){function n(n){function t(t,r,e,u,i,o){for(;i>=0&&o>i;i+=n){var a=u?u[i]:i;e=r(e,t[a],a,t)}return e}return function(r,e,u,i){e=b(e,i,4);var o=!k(r)&&m.keys(r),a=(o||r).length,c=n>0?0:a-1;return arguments.length<3&&(u=r[o?o[c]:c],c+=n),t(r,e,u,o,c,a)}}function t(n){return function(t,r,e){r=x(r,e);for(var u=O(t),i=n>0?0:u-1;i>=0&&u>i;i+=n)if(r(t[i],i,t))return i;return-1}}function r(n,t,r){return function(e,u,i){var o=0,a=O(e);if("number"==typeof i)n>0?o=i>=0?i:Math.max(i+a,o):a=i>=0?Math.min(i+1,a):i+a+1;else if(r&&i&&a)return i=r(e,u),e[i]===u?i:-1;if(u!==u)return i=t(l.call(e,o,a),m.isNaN),i>=0?i+o:-1;for(i=n>0?o:a-1;i>=0&&a>i;i+=n)if(e[i]===u)return i;return-1}}function e(n,t){var r=I.length,e=n.constructor,u=m.isFunction(e)&&e.prototype||a,i="constructor";for(m.has(n,i)&&!m.contains(t,i)&&t.push(i);r--;)i=I[r],i in n&&n[i]!==u[i]&&!m.contains(t,i)&&t.push(i)}var u=this,i=u._,o=Array.prototype,a=Object.prototype,c=Function.prototype,f=o.push,l=o.slice,s=a.toString,p=a.hasOwnProperty,h=Array.isArray,v=Object.keys,g=c.bind,y=Object.create,d=function(){},m=function(n){return n instanceof m?n:this instanceof m?void(this._wrapped=n):new m(n)};"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=m),exports._=m):u._=m,m.VERSION="1.8.3";var b=function(n,t,r){if(t===void 0)return n;switch(null==r?3:r){case 1:return function(r){return n.call(t,r)};case 2:return function(r,e){return n.call(t,r,e)};case 3:return function(r,e,u){return n.call(t,r,e,u)};case 4:return function(r,e,u,i){return n.call(t,r,e,u,i)}}return function(){return n.apply(t,arguments)}},x=function(n,t,r){return null==n?m.identity:m.isFunction(n)?b(n,t,r):m.isObject(n)?m.matcher(n):m.property(n)};m.iteratee=function(n,t){return x(n,t,1/0)};var _=function(n,t){return function(r){var e=arguments.length;if(2>e||null==r)return r;for(var u=1;e>u;u++)for(var i=arguments[u],o=n(i),a=o.length,c=0;a>c;c++){var f=o[c];t&&r[f]!==void 0||(r[f]=i[f])}return r}},j=function(n){if(!m.isObject(n))return{};if(y)return y(n);d.prototype=n;var t=new d;return d.prototype=null,t},w=function(n){return function(t){return null==t?void 0:t[n]}},A=Math.pow(2,53)-1,O=w("length"),k=function(n){var t=O(n);return"number"==typeof t&&t>=0&&A>=t};m.each=m.forEach=function(n,t,r){t=b(t,r);var e,u;if(k(n))for(e=0,u=n.length;u>e;e++)t(n[e],e,n);else{var i=m.keys(n);for(e=0,u=i.length;u>e;e++)t(n[i[e]],i[e],n)}return n},m.map=m.collect=function(n,t,r){t=x(t,r);for(var e=!k(n)&&m.keys(n),u=(e||n).length,i=Array(u),o=0;u>o;o++){var a=e?e[o]:o;i[o]=t(n[a],a,n)}return i},m.reduce=m.foldl=m.inject=n(1),m.reduceRight=m.foldr=n(-1),m.find=m.detect=function(n,t,r){var e;return e=k(n)?m.findIndex(n,t,r):m.findKey(n,t,r),e!==void 0&&e!==-1?n[e]:void 0},m.filter=m.select=function(n,t,r){var e=[];return t=x(t,r),m.each(n,function(n,r,u){t(n,r,u)&&e.push(n)}),e},m.reject=function(n,t,r){return m.filter(n,m.negate(x(t)),r)},m.every=m.all=function(n,t,r){t=x(t,r);for(var e=!k(n)&&m.keys(n),u=(e||n).length,i=0;u>i;i++){var o=e?e[i]:i;if(!t(n[o],o,n))return!1}return!0},m.some=m.any=function(n,t,r){t=x(t,r);for(var e=!k(n)&&m.keys(n),u=(e||n).length,i=0;u>i;i++){var o=e?e[i]:i;if(t(n[o],o,n))return!0}return!1},m.contains=m.includes=m.include=function(n,t,r,e){return k(n)||(n=m.values(n)),("number"!=typeof r||e)&&(r=0),m.indexOf(n,t,r)>=0},m.invoke=function(n,t){var r=l.call(arguments,2),e=m.isFunction(t);return m.map(n,function(n){var u=e?t:n[t];return null==u?u:u.apply(n,r)})},m.pluck=function(n,t){return m.map(n,m.property(t))},m.where=function(n,t){return m.filter(n,m.matcher(t))},m.findWhere=function(n,t){return m.find(n,m.matcher(t))},m.max=function(n,t,r){var e,u,i=-1/0,o=-1/0;if(null==t&&null!=n){n=k(n)?n:m.values(n);for(var a=0,c=n.length;c>a;a++)e=n[a],e>i&&(i=e)}else t=x(t,r),m.each(n,function(n,r,e){u=t(n,r,e),(u>o||u===-1/0&&i===-1/0)&&(i=n,o=u)});return i},m.min=function(n,t,r){var e,u,i=1/0,o=1/0;if(null==t&&null!=n){n=k(n)?n:m.values(n);for(var a=0,c=n.length;c>a;a++)e=n[a],i>e&&(i=e)}else t=x(t,r),m.each(n,function(n,r,e){u=t(n,r,e),(o>u||1/0===u&&1/0===i)&&(i=n,o=u)});return i},m.shuffle=function(n){for(var t,r=k(n)?n:m.values(n),e=r.length,u=Array(e),i=0;e>i;i++)t=m.random(0,i),t!==i&&(u[i]=u[t]),u[t]=r[i];return u},m.sample=function(n,t,r){return null==t||r?(k(n)||(n=m.values(n)),n[m.random(n.length-1)]):m.shuffle(n).slice(0,Math.max(0,t))},m.sortBy=function(n,t,r){return t=x(t,r),m.pluck(m.map(n,function(n,r,e){return{value:n,index:r,criteria:t(n,r,e)}}).sort(function(n,t){var r=n.criteria,e=t.criteria;if(r!==e){if(r>e||r===void 0)return 1;if(e>r||e===void 0)return-1}return n.index-t.index}),"value")};var F=function(n){return function(t,r,e){var u={};return r=x(r,e),m.each(t,function(e,i){var o=r(e,i,t);n(u,e,o)}),u}};m.groupBy=F(function(n,t,r){m.has(n,r)?n[r].push(t):n[r]=[t]}),m.indexBy=F(function(n,t,r){n[r]=t}),m.countBy=F(function(n,t,r){m.has(n,r)?n[r]++:n[r]=1}),m.toArray=function(n){return n?m.isArray(n)?l.call(n):k(n)?m.map(n,m.identity):m.values(n):[]},m.size=function(n){return null==n?0:k(n)?n.length:m.keys(n).length},m.partition=function(n,t,r){t=x(t,r);var e=[],u=[];return m.each(n,function(n,r,i){(t(n,r,i)?e:u).push(n)}),[e,u]},m.first=m.head=m.take=function(n,t,r){return null==n?void 0:null==t||r?n[0]:m.initial(n,n.length-t)},m.initial=function(n,t,r){return l.call(n,0,Math.max(0,n.length-(null==t||r?1:t)))},m.last=function(n,t,r){return null==n?void 0:null==t||r?n[n.length-1]:m.rest(n,Math.max(0,n.length-t))},m.rest=m.tail=m.drop=function(n,t,r){return l.call(n,null==t||r?1:t)},m.compact=function(n){return m.filter(n,m.identity)};var S=function(n,t,r,e){for(var u=[],i=0,o=e||0,a=O(n);a>o;o++){var c=n[o];if(k(c)&&(m.isArray(c)||m.isArguments(c))){t||(c=S(c,t,r));var f=0,l=c.length;for(u.length+=l;l>f;)u[i++]=c[f++]}else r||(u[i++]=c)}return u};m.flatten=function(n,t){return S(n,t,!1)},m.without=function(n){return m.difference(n,l.call(arguments,1))},m.uniq=m.unique=function(n,t,r,e){m.isBoolean(t)||(e=r,r=t,t=!1),null!=r&&(r=x(r,e));for(var u=[],i=[],o=0,a=O(n);a>o;o++){var c=n[o],f=r?r(c,o,n):c;t?(o&&i===f||u.push(c),i=f):r?m.contains(i,f)||(i.push(f),u.push(c)):m.contains(u,c)||u.push(c)}return u},m.union=function(){return m.uniq(S(arguments,!0,!0))},m.intersection=function(n){for(var t=[],r=arguments.length,e=0,u=O(n);u>e;e++){var i=n[e];if(!m.contains(t,i)){for(var o=1;r>o&&m.contains(arguments[o],i);o++);o===r&&t.push(i)}}return t},m.difference=function(n){var t=S(arguments,!0,!0,1);return m.filter(n,function(n){return!m.contains(t,n)})},m.zip=function(){return m.unzip(arguments)},m.unzip=function(n){for(var t=n&&m.max(n,O).length||0,r=Array(t),e=0;t>e;e++)r[e]=m.pluck(n,e);return r},m.object=function(n,t){for(var r={},e=0,u=O(n);u>e;e++)t?r[n[e]]=t[e]:r[n[e][0]]=n[e][1];return r},m.findIndex=t(1),m.findLastIndex=t(-1),m.sortedIndex=function(n,t,r,e){r=x(r,e,1);for(var u=r(t),i=0,o=O(n);o>i;){var a=Math.floor((i+o)/2);r(n[a])<u?i=a+1:o=a}return i},m.indexOf=r(1,m.findIndex,m.sortedIndex),m.lastIndexOf=r(-1,m.findLastIndex),m.range=function(n,t,r){null==t&&(t=n||0,n=0),r=r||1;for(var e=Math.max(Math.ceil((t-n)/r),0),u=Array(e),i=0;e>i;i++,n+=r)u[i]=n;return u};var E=function(n,t,r,e,u){if(!(e instanceof t))return n.apply(r,u);var i=j(n.prototype),o=n.apply(i,u);return m.isObject(o)?o:i};m.bind=function(n,t){if(g&&n.bind===g)return g.apply(n,l.call(arguments,1));if(!m.isFunction(n))throw new TypeError("Bind must be called on a function");var r=l.call(arguments,2),e=function(){return E(n,e,t,this,r.concat(l.call(arguments)))};return e},m.partial=function(n){var t=l.call(arguments,1),r=function(){for(var e=0,u=t.length,i=Array(u),o=0;u>o;o++)i[o]=t[o]===m?arguments[e++]:t[o];for(;e<arguments.length;)i.push(arguments[e++]);return E(n,r,this,this,i)};return r},m.bindAll=function(n){var t,r,e=arguments.length;if(1>=e)throw new Error("bindAll must be passed function names");for(t=1;e>t;t++)r=arguments[t],n[r]=m.bind(n[r],n);return n},m.memoize=function(n,t){var r=function(e){var u=r.cache,i=""+(t?t.apply(this,arguments):e);return m.has(u,i)||(u[i]=n.apply(this,arguments)),u[i]};return r.cache={},r},m.delay=function(n,t){var r=l.call(arguments,2);return setTimeout(function(){return n.apply(null,r)},t)},m.defer=m.partial(m.delay,m,1),m.throttle=function(n,t,r){var e,u,i,o=null,a=0;r||(r={});var c=function(){a=r.leading===!1?0:m.now(),o=null,i=n.apply(e,u),o||(e=u=null)};return function(){var f=m.now();a||r.leading!==!1||(a=f);var l=t-(f-a);return e=this,u=arguments,0>=l||l>t?(o&&(clearTimeout(o),o=null),a=f,i=n.apply(e,u),o||(e=u=null)):o||r.trailing===!1||(o=setTimeout(c,l)),i}},m.debounce=function(n,t,r){var e,u,i,o,a,c=function(){var f=m.now()-o;t>f&&f>=0?e=setTimeout(c,t-f):(e=null,r||(a=n.apply(i,u),e||(i=u=null)))};return function(){i=this,u=arguments,o=m.now();var f=r&&!e;return e||(e=setTimeout(c,t)),f&&(a=n.apply(i,u),i=u=null),a}},m.wrap=function(n,t){return m.partial(t,n)},m.negate=function(n){return function(){return!n.apply(this,arguments)}},m.compose=function(){var n=arguments,t=n.length-1;return function(){for(var r=t,e=n[t].apply(this,arguments);r--;)e=n[r].call(this,e);return e}},m.after=function(n,t){return function(){return--n<1?t.apply(this,arguments):void 0}},m.before=function(n,t){var r;return function(){return--n>0&&(r=t.apply(this,arguments)),1>=n&&(t=null),r}},m.once=m.partial(m.before,2);var M=!{toString:null}.propertyIsEnumerable("toString"),I=["valueOf","isPrototypeOf","toString","propertyIsEnumerable","hasOwnProperty","toLocaleString"];m.keys=function(n){if(!m.isObject(n))return[];if(v)return v(n);var t=[];for(var r in n)m.has(n,r)&&t.push(r);return M&&e(n,t),t},m.allKeys=function(n){if(!m.isObject(n))return[];var t=[];for(var r in n)t.push(r);return M&&e(n,t),t},m.values=function(n){for(var t=m.keys(n),r=t.length,e=Array(r),u=0;r>u;u++)e[u]=n[t[u]];return e},m.mapObject=function(n,t,r){t=x(t,r);for(var e,u=m.keys(n),i=u.length,o={},a=0;i>a;a++)e=u[a],o[e]=t(n[e],e,n);return o},m.pairs=function(n){for(var t=m.keys(n),r=t.length,e=Array(r),u=0;r>u;u++)e[u]=[t[u],n[t[u]]];return e},m.invert=function(n){for(var t={},r=m.keys(n),e=0,u=r.length;u>e;e++)t[n[r[e]]]=r[e];return t},m.functions=m.methods=function(n){var t=[];for(var r in n)m.isFunction(n[r])&&t.push(r);return t.sort()},m.extend=_(m.allKeys),m.extendOwn=m.assign=_(m.keys),m.findKey=function(n,t,r){t=x(t,r);for(var e,u=m.keys(n),i=0,o=u.length;o>i;i++)if(e=u[i],t(n[e],e,n))return e},m.pick=function(n,t,r){var e,u,i={},o=n;if(null==o)return i;m.isFunction(t)?(u=m.allKeys(o),e=b(t,r)):(u=S(arguments,!1,!1,1),e=function(n,t,r){return t in r},o=Object(o));for(var a=0,c=u.length;c>a;a++){var f=u[a],l=o[f];e(l,f,o)&&(i[f]=l)}return i},m.omit=function(n,t,r){if(m.isFunction(t))t=m.negate(t);else{var e=m.map(S(arguments,!1,!1,1),String);t=function(n,t){return!m.contains(e,t)}}return m.pick(n,t,r)},m.defaults=_(m.allKeys,!0),m.create=function(n,t){var r=j(n);return t&&m.extendOwn(r,t),r},m.clone=function(n){return m.isObject(n)?m.isArray(n)?n.slice():m.extend({},n):n},m.tap=function(n,t){return t(n),n},m.isMatch=function(n,t){var r=m.keys(t),e=r.length;if(null==n)return!e;for(var u=Object(n),i=0;e>i;i++){var o=r[i];if(t[o]!==u[o]||!(o in u))return!1}return!0};var N=function(n,t,r,e){if(n===t)return 0!==n||1/n===1/t;if(null==n||null==t)return n===t;n instanceof m&&(n=n._wrapped),t instanceof m&&(t=t._wrapped);var u=s.call(n);if(u!==s.call(t))return!1;switch(u){case"[object RegExp]":case"[object String]":return""+n==""+t;case"[object Number]":return+n!==+n?+t!==+t:0===+n?1/+n===1/t:+n===+t;case"[object Date]":case"[object Boolean]":return+n===+t}var i="[object Array]"===u;if(!i){if("object"!=typeof n||"object"!=typeof t)return!1;var o=n.constructor,a=t.constructor;if(o!==a&&!(m.isFunction(o)&&o instanceof o&&m.isFunction(a)&&a instanceof a)&&"constructor"in n&&"constructor"in t)return!1}r=r||[],e=e||[];for(var c=r.length;c--;)if(r[c]===n)return e[c]===t;if(r.push(n),e.push(t),i){if(c=n.length,c!==t.length)return!1;for(;c--;)if(!N(n[c],t[c],r,e))return!1}else{var f,l=m.keys(n);if(c=l.length,m.keys(t).length!==c)return!1;for(;c--;)if(f=l[c],!m.has(t,f)||!N(n[f],t[f],r,e))return!1}return r.pop(),e.pop(),!0};m.isEqual=function(n,t){return N(n,t)},m.isEmpty=function(n){return null==n?!0:k(n)&&(m.isArray(n)||m.isString(n)||m.isArguments(n))?0===n.length:0===m.keys(n).length},m.isElement=function(n){return!(!n||1!==n.nodeType)},m.isArray=h||function(n){return"[object Array]"===s.call(n)},m.isObject=function(n){var t=typeof n;return"function"===t||"object"===t&&!!n},m.each(["Arguments","Function","String","Number","Date","RegExp","Error"],function(n){m["is"+n]=function(t){return s.call(t)==="[object "+n+"]"}}),m.isArguments(arguments)||(m.isArguments=function(n){return m.has(n,"callee")}),"function"!=typeof/./&&"object"!=typeof Int8Array&&(m.isFunction=function(n){return"function"==typeof n||!1}),m.isFinite=function(n){return isFinite(n)&&!isNaN(parseFloat(n))},m.isNaN=function(n){return m.isNumber(n)&&n!==+n},m.isBoolean=function(n){return n===!0||n===!1||"[object Boolean]"===s.call(n)},m.isNull=function(n){return null===n},m.isUndefined=function(n){return n===void 0},m.has=function(n,t){return null!=n&&p.call(n,t)},m.noConflict=function(){return u._=i,this},m.identity=function(n){return n},m.constant=function(n){return function(){return n}},m.noop=function(){},m.property=w,m.propertyOf=function(n){return null==n?function(){}:function(t){return n[t]}},m.matcher=m.matches=function(n){return n=m.extendOwn({},n),function(t){return m.isMatch(t,n)}},m.times=function(n,t,r){var e=Array(Math.max(0,n));t=b(t,r,1);for(var u=0;n>u;u++)e[u]=t(u);return e},m.random=function(n,t){return null==t&&(t=n,n=0),n+Math.floor(Math.random()*(t-n+1))},m.now=Date.now||function(){return(new Date).getTime()};var B={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#x27;","`":"&#x60;"},T=m.invert(B),R=function(n){var t=function(t){return n[t]},r="(?:"+m.keys(n).join("|")+")",e=RegExp(r),u=RegExp(r,"g");return function(n){return n=null==n?"":""+n,e.test(n)?n.replace(u,t):n}};m.escape=R(B),m.unescape=R(T),m.result=function(n,t,r){var e=null==n?void 0:n[t];return e===void 0&&(e=r),m.isFunction(e)?e.call(n):e};var q=0;m.uniqueId=function(n){var t=++q+"";return n?n+t:t},m.templateSettings={evaluate:/<%([\s\S]+?)%>/g,interpolate:/<%=([\s\S]+?)%>/g,escape:/<%-([\s\S]+?)%>/g};var K=/(.)^/,z={"'":"'","\\":"\\","\r":"r","\n":"n","\u2028":"u2028","\u2029":"u2029"},D=/\\|'|\r|\n|\u2028|\u2029/g,L=function(n){return"\\"+z[n]};m.template=function(n,t,r){!t&&r&&(t=r),t=m.defaults({},t,m.templateSettings);var e=RegExp([(t.escape||K).source,(t.interpolate||K).source,(t.evaluate||K).source].join("|")+"|$","g"),u=0,i="__p+='";n.replace(e,function(t,r,e,o,a){return i+=n.slice(u,a).replace(D,L),u=a+t.length,r?i+="'+\n((__t=("+r+"))==null?'':_.escape(__t))+\n'":e?i+="'+\n((__t=("+e+"))==null?'':__t)+\n'":o&&(i+="';\n"+o+"\n__p+='"),t}),i+="';\n",t.variable||(i="with(obj||{}){\n"+i+"}\n"),i="var __t,__p='',__j=Array.prototype.join,"+"print=function(){__p+=__j.call(arguments,'');};\n"+i+"return __p;\n";try{var o=new Function(t.variable||"obj","_",i)}catch(a){throw a.source=i,a}var c=function(n){return o.call(this,n,m)},f=t.variable||"obj";return c.source="function("+f+"){\n"+i+"}",c},m.chain=function(n){var t=m(n);return t._chain=!0,t};var P=function(n,t){return n._chain?m(t).chain():t};m.mixin=function(n){m.each(m.functions(n),function(t){var r=m[t]=n[t];m.prototype[t]=function(){var n=[this._wrapped];return f.apply(n,arguments),P(this,r.apply(m,n))}})},m.mixin(m),m.each(["pop","push","reverse","shift","sort","splice","unshift"],function(n){var t=o[n];m.prototype[n]=function(){var r=this._wrapped;return t.apply(r,arguments),"shift"!==n&&"splice"!==n||0!==r.length||delete r[0],P(this,r)}}),m.each(["concat","join","slice"],function(n){var t=o[n];m.prototype[n]=function(){return P(this,t.apply(this._wrapped,arguments))}}),m.prototype.value=function(){return this._wrapped},m.prototype.valueOf=m.prototype.toJSON=m.prototype.value,m.prototype.toString=function(){return""+this._wrapped},"function"==typeof define&&define.amd&&define("underscore",[],function(){return m})}).call(this);
+//# sourceMappingURL=underscore-min.map
\ No newline at end of file