# HG changeset patch
# User Nicholas Jillings <nicholas.jillings@mail.bcu.ac.uk>
# Date 1493114892 -3600
# Node ID 3a2dbff86da92480de78706d42f72041994211de
# Parent  d5d374b399cbde8c47e37ac87c307a4ef4210e5c
#138 Added timeline specific images

diff -r d5d374b399cb -r 3a2dbff86da9 interfaces/timeline.css
--- a/interfaces/timeline.css	Tue Apr 25 10:55:39 2017 +0100
+++ b/interfaces/timeline.css	Tue Apr 25 11:08:12 2017 +0100
@@ -10,7 +10,6 @@
     padding: 20px;
 }
 div.timeline-element-canvas-holder {
-    display: flex;
     width: inherit;
     height: 160px;
     margin: auto;
@@ -37,6 +36,12 @@
     background-color: gray;
 }
 div.timeline-element-comment-holder {}
+img.timeline-element-image {
+    height: 150px;
+    max-width: 20%;
+    display: inline-block;
+    float: right;
+}
 div.comment-entry {
     border: 1px solid #444444;
     max-width: 600px;
diff -r d5d374b399cb -r 3a2dbff86da9 interfaces/timeline.js
--- a/interfaces/timeline.js	Tue Apr 25 10:55:39 2017 +0100
+++ b/interfaces/timeline.js	Tue Apr 25 11:08:12 2017 +0100
@@ -98,9 +98,7 @@
         document.getElementById("page-title").textContent = interfaceObj.title;
     }
 
-    if (interfaceObj.image !== undefined || page.audioElements.some(function (elem) {
-            return elem.image !== undefined;
-        })) {
+    if (interfaceObj.image !== undefined) {
         document.getElementById("timeline-test-content").parentElement.insertBefore(interfaceContext.imageHolder.root, document.getElementById("timeline-test-content"));
         interfaceContext.imageHolder.setImage(interfaceObj.image);
     }
@@ -375,18 +373,30 @@
     this.canvas.layer2.className = "timeline-element-canvas canvas-layer2";
     this.canvas.layer3.className = "timeline-element-canvas canvas-layer3";
     this.canvas.layer4.className = "timeline-element-canvas canvas-layer3";
-    this.canvas.layer1.height = "150";
-    this.canvas.layer2.height = "150";
-    this.canvas.layer3.height = "150";
-    this.canvas.layer4.height = "150";
-    canvasHolder.appendChild(this.canvas.layer1);
-    canvasHolder.appendChild(this.canvas.layer2);
-    canvasHolder.appendChild(this.canvas.layer3);
-    canvasHolder.appendChild(this.canvas.layer4);
+    this.canvas.layer1.height = "160";
+    this.canvas.layer2.height = "160";
+    this.canvas.layer3.height = "160";
+    this.canvas.layer4.height = "160";
+    var canvasDiv = document.createElement("div");
+    canvasDiv.appendChild(this.canvas.layer1);
+    canvasDiv.appendChild(this.canvas.layer2);
+    canvasDiv.appendChild(this.canvas.layer3);
+    canvasDiv.appendChild(this.canvas.layer4);
+    canvasHolder.appendChild(canvasDiv);
     this.canvas.layer1.addEventListener("mousemove", this.canvas);
     this.canvas.layer1.addEventListener("mouseleave", this.canvas);
     this.canvas.layer1.addEventListener("click", this.canvas);
 
+    if (audioObject.specification.image) {
+        canvasDiv.style.width = "80%";
+        var image = document.createElement("img");
+        image.src = audioObject.specification.image;
+        image.className = "timeline-element-image";
+        canvasHolder.appendChild(image);
+    } else {
+        canvasDiv.style.width = "100%";
+    }
+
     var canvasIntervalID = null;
 
     this.playButton = {
diff -r d5d374b399cb -r 3a2dbff86da9 tests/examples/timeline.xml
--- a/tests/examples/timeline.xml	Tue Apr 25 10:55:39 2017 +0100
+++ b/tests/examples/timeline.xml	Tue Apr 25 11:08:12 2017 +0100
@@ -30,8 +30,8 @@
                     <scalelabel position="100">(5) Inaudible</scalelabel>
                 </scales>
             </interface>
-            <audioelement url="0.wav" id="track-1" />
-            <audioelement url="1.wav" id="track-2" />
+            <audioelement url="0.wav" id="track-1" image="https://upload.wikimedia.org/wikipedia/commons/0/0a/Drumkit-icon.png" />
+            <audioelement url="1.wav" id="track-2" image="https://upload.wikimedia.org/wikipedia/commons/0/0a/Drumkit-icon.png" />
             <commentquestions>
                 <commentradio id="preference">
                     <statement>Please enter your overall preference</statement>
@@ -61,8 +61,8 @@
                     <scalelabel position="100">(5) Inaudible</scalelabel>
                 </scales>
             </interface>
-            <audioelement url="0.wav" id="track-3" />
-            <audioelement url="1.wav" id="track-4" />
+            <audioelement url="0.wav" id="track-3" image="https://upload.wikimedia.org/wikipedia/commons/0/0a/Drumkit-icon.png" />
+            <audioelement url="1.wav" id="track-4" image="https://upload.wikimedia.org/wikipedia/commons/0/0a/Drumkit-icon.png" />
             <commentquestions>
                 <commentradio id="preference1">
                     <statement>Please enter your overall preference</statement>