# HG changeset patch
# User Nicholas Jillings <nicholas.jillings@mail.bcu.ac.uk>
# Date 1492253961 -3600
# Node ID 9c01d5dd22a205c886124a7e4a7b102648d08710
# Parent  a684dc7a5327cf336eb7eb46a481f060bc68016c
#163. Made comment box highlighting a core function

diff -r a684dc7a5327 -r 9c01d5dd22a2 interfaces/horizontal-sliders.css
--- a/interfaces/horizontal-sliders.css	Sat Apr 15 11:35:59 2017 +0100
+++ b/interfaces/horizontal-sliders.css	Sat Apr 15 11:59:21 2017 +0100
@@ -7,19 +7,23 @@
     /* Set the background colour (note US English spelling) to grey*/
     background-color: #ddd
 }
+
 div.pageTitle {
     width: auto;
     height: 20px;
     margin: 10px 0px;
 }
+
 div.pageTitle span {
     font-size: 1.5em;
 }
+
 button {
     /* Specify any button structure or style */
     min-width: 20px;
     background-color: #ddd
 }
+
 div#slider-holder {
     height: inherit;
     position: absolute;
@@ -27,24 +31,29 @@
     z-index: 3;
     margin-top: 25px;
 }
+
 div#scale-holder {
     height: inherit;
     position: absolute;
     left: 0px;
     z-index: 2;
 }
+
 div#scale-text-holder {
     position: relative;
     float: left;
 }
+
 div.scale-text {
     position: absolute;
     font-size: 1.2em;
 }
+
 canvas#scale-canvas {
     position: relative;
     float: left;
 }
+
 div.track-slider {
     float: left;
     height: 94px;
@@ -55,44 +64,53 @@
     margin-left: 94px;
     margin-bottom: 25px;
 }
+
 div.track-slider-title {
     float: left;
     padding-top: 40px;
     width: 100px;
 }
+
 button.track-slider-button {
     float: left;
     width: 100px;
     height: 94px;
 }
+
 div#outside-reference-holder {
     display: flex;
     align-content: center;
     justify-content: center;
     margin-bottom: 5px;
 }
+
 button.outside-reference {
     position: inherit;
     margin: 0px 5px;
 }
+
 div.track-slider-playing {
     background-color: #FFDDDD;
 }
+
 input.track-slider-range {
     float: left;
     margin: 2px 10px;
 }
+
 input[type=range] {
     height: 94px;
     padding: 0px;
     color: rgb(255, 144, 144);
 }
+
 input[type=range]::-webkit-slider-runnable-track {
     cursor: pointer;
     background: #fff;
     border-radius: 4px;
     border: 1px solid #000;
 }
+
 input[type=range]::-moz-range-track {
     height: 8px;
     cursor: pointer;
@@ -100,18 +118,26 @@
     border-radius: 4px;
     border: 1px solid #000;
 }
+
 input.track-slider-not-moved[type=range]::-webkit-slider-runnable-track {
     background: #aaa;
 }
+
 input.track-slider-not-moved[type=range]::-moz-range-track {
     background: #aaa;
 }
+
 div#page-count {
     float: left;
     margin: 0px 5px;
 }
+
 div#master-volume-holder {
     position: absolute;
     top: 10px;
     left: 120px;
 }
+
+div.comment-box-playing {
+    background-color: #FFDDDD;
+}
diff -r a684dc7a5327 -r 9c01d5dd22a2 interfaces/horizontal-sliders.js
--- a/interfaces/horizontal-sliders.js	Sat Apr 15 11:35:59 2017 +0100
+++ b/interfaces/horizontal-sliders.js	Sat Apr 15 11:59:21 2017 +0100
@@ -296,11 +296,18 @@
         if (outsideReference !== null) {
             $(outsideReference).removeClass('track-slider-playing');
         }
+        interfaceContext.commentBoxes.highlightById(audioObject.id);
     };
     this.stopPlayback = function () {
         // Called when playback has stopped. This gets called even if playback never started!
         this.play.setAttribute("playstate", "ready");
         $(this.holder).removeClass('track-slider-playing');
+        var box = interfaceContext.commentBoxes.boxes.find(function (a) {
+            return a.id === audioObject.id;
+        });
+        if (box) {
+            box.highlight(false);
+        }
     };
     this.getValue = function () {
         // Return the current value of the object. If there is no value, return 0
diff -r a684dc7a5327 -r 9c01d5dd22a2 js/core.js
--- a/js/core.js	Sat Apr 15 11:35:59 2017 +0100
+++ b/js/core.js	Sat Apr 15 11:59:21 2017 +0100
@@ -2454,6 +2454,13 @@
                 this.trackCommentBox.style.width = boxwidth - 6 + "px";
             };
             this.resize();
+            this.highlight = function (state) {
+                if (state === true) {
+                    $(this.trackComment).addClass("comment-box-playing");
+                } else {
+                    $(this.trackComment).removeClass("comment-box-playing");
+                }
+            };
         };
         commentBoxes.createCommentBox = function (audioObject) {
             var node = new this.elementCommentBox(audioObject);
@@ -2486,6 +2493,19 @@
             }
             this.boxes = [];
         };
+        commentBoxes.highlightById = function (id) {
+            if (id === undefined || typeof id !== "number" || id >= this.boxes.length) {
+                console.log("Error - Invalid id");
+                id = -1;
+            }
+            this.boxes.forEach(function (a) {
+                if (a.id === id) {
+                    a.highlight(true);
+                } else {
+                    a.highlight(false);
+                }
+            });
+        };
         return commentBoxes;
     })();
 
@@ -3669,7 +3689,7 @@
                 return value;
             }
         }
-    })
+    });
 }
 
 var window_depedancy_callback;