From 2e2364e03fdd60f11a35b870b2c4e83ff74a2df2 Mon Sep 17 00:00:00 2001
From: Nissim Hadar <nissim@highfidelity.io>
Date: Thu, 5 Oct 2017 13:20:21 -0700
Subject: [PATCH] WIP - adding haze blend out colour

---
 scripts/system/html/entityProperties.html  | 21 +++++++++--
 scripts/system/html/js/entityProperties.js | 42 ++++++++++++++++++++++
 2 files changed, 60 insertions(+), 3 deletions(-)

diff --git a/scripts/system/html/entityProperties.html b/scripts/system/html/entityProperties.html
index 84d1e4748f..73dba453c0 100644
--- a/scripts/system/html/entityProperties.html
+++ b/scripts/system/html/entityProperties.html
@@ -567,9 +567,24 @@
                     <div class="color-picker" id="property-zone-haze-blend-in-color"></div>
                     <legend>Haze Blend In Color</legend>
                     <div class="tuple">
-                        <div><input type="number" class="red" id="property-zone-haze-blend-in-color-red"><label for="property-zone-haze-blend-in-color-red">Red:</label></div>
-                        <div><input type="number" class="green" id="property-zone-haze-blend-in-color-green"><label for="property-zone-haze-blend-in-color-green">Green:</label></div>
-                        <div><input type="number" class="blue" id="property-zone-haze-blend-in-color-blue"><label for="property-zone-haze-blend-in-color-blue">Blue:</label></div>
+                        <div><input type="number" class="red" id="property-zone-haze-blend-in-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-blend-in-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-blend-in-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 rgb fstuple">
+                    <div class="color-picker" id="property-zone-haze-blend-out-color"></div>
+                    <legend>Haze Blend Out Color</legend>
+                    <div class="tuple">
+                        <div><input type="number" class="red" id="property-zone-haze-blend-out-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-blend-out-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-blend-out-color-blue" min="0" max="255" step="1">
+                          <label for="property-zone-haze-blend-out-color-blue">Blue:</label></div>
                     </div>
                 </fieldset>
             </fieldset>
diff --git a/scripts/system/html/js/entityProperties.js b/scripts/system/html/js/entityProperties.js
index 28f3d5896f..a6a9d532e5 100644
--- a/scripts/system/html/js/entityProperties.js
+++ b/scripts/system/html/js/entityProperties.js
@@ -664,6 +664,10 @@ function loaded() {
         var elZoneHazeBlendInColorRed = document.getElementById("property-zone-haze-blend-in-color-red");
         var elZoneHazeBlendInColorGreen = document.getElementById("property-zone-haze-blend-in-color-green");
         var elZoneHazeBlendInColorBlue = document.getElementById("property-zone-haze-blend-in-color-blue");
+        var elZoneHazeBlendOutColor = document.getElementById("property-zone-haze-blend-out-color");
+        var elZoneHazeBlendOutColorRed = document.getElementById("property-zone-haze-blend-out-color-red");
+        var elZoneHazeBlendOutColorGreen = document.getElementById("property-zone-haze-blend-out-color-green");
+        var elZoneHazeBlendOutColorBlue = document.getElementById("property-zone-haze-blend-out-color-blue");
         var elZoneHazeBackgroundBlend = document.getElementById("property-zone-haze-background-blend");
         
         var elZoneHazeAltitude = document.getElementById("property-zone-haze-altitude");
@@ -1019,6 +1023,17 @@ function loaded() {
                             elZoneHazeBlendInColorBlue.value = properties.haze.hazeBlendInColor.blue;
                             elZoneHazeBackgroundBlend.value = properties.haze.hazeBackgroundBlend.toFixed(2);
 
+                            elZoneHazeBlendOutColor.style.backgroundColor = "rgb(" + 
+                                properties.haze.hazeBlendOutColor.red + "," + 
+                                properties.haze.hazeBlendOutColor.green + "," + 
+                                properties.haze.hazeBlendOutColor.blue + ")";
+
+                            elZoneHazeBlendOutColorRed.value = properties.haze.hazeBlendOutColor.red;
+                            elZoneHazeBlendOutColorGreen.value = properties.haze.hazeBlendOutColor.green;
+                            elZoneHazeBlendOutColorBlue.value = properties.haze.hazeBlendOutColor.blue;
+
+                            elZoneHazeBackgroundBlend.value = properties.haze.hazeBackgroundBlend.toFixed(2);
+
                             elZoneHazeAltitude.value = properties.haze.hazeAltitude.toFixed(0);
 
                             elZoneStageLatitude.value = properties.stage.latitude.toFixed(2);
@@ -1418,6 +1433,7 @@ function loaded() {
         elZoneHazeMode.addEventListener('change', createEmitTextPropertyUpdateFunction('hazeMode'));
 
         elZoneHazeRange.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('haze', 'hazeRange'));
+
         colorPickers.push($('#property-zone-haze-blend-in-color').colpick({
             colorScheme: 'dark',
             layout: 'hex',
@@ -1442,6 +1458,32 @@ function loaded() {
         elZoneHazeBlendInColorRed.addEventListener('change', zoneHazeBlendInColorChangeFunction);
         elZoneHazeBlendInColorGreen.addEventListener('change', zoneHazeBlendInColorChangeFunction);
         elZoneHazeBlendInColorBlue.addEventListener('change', zoneHazeBlendInColorChangeFunction);
+
+        colorPickers.push($('#property-zone-haze-blend-out-color').colpick({
+            colorScheme: 'dark',
+            layout: 'hex',
+            color: '000000',
+            onShow: function(colpick) {
+                $('#property-zone-haze-blend-out-color').attr('active', 'true');
+            },
+            onHide: function(colpick) {
+                $('#property-zone-haze-blend-out-color').attr('active', 'false');
+            },
+            onSubmit: function(hsb, hex, rgb, el) {
+                $(el).css('background-color', '#' + hex);
+                $(el).colpickHide();
+                emitColorPropertyUpdate('color', rgb.r, rgb.g, rgb.b, 'hazeBlendOutColor');
+            }
+        }));
+        var zoneHazeBlendOutColorChangeFunction = createEmitGroupColorPropertyUpdateFunction('haze', 'hazeBlendOutColor', 
+            elZoneHazeBlendOutColorRed, 
+            elZoneHazeBlendOutColorGreen, 
+            elZoneHazeBlendOutColorBlue);
+
+        elZoneHazeBlendOutColorRed.addEventListener('change', zoneHazeBlendOutColorChangeFunction);
+        elZoneHazeBlendOutColorGreen.addEventListener('change', zoneHazeBlendOutColorChangeFunction);
+        elZoneHazeBlendOutColorBlue.addEventListener('change', zoneHazeBlendOutColorChangeFunction);
+
         elZoneHazeBackgroundBlend.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('haze', 'hazeBackgroundBlend'));
 
         elZoneHazeAltitude.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('haze', 'hazeAltitude'));