# HG changeset patch
# User Nicholas Jillings <n.g.r.jillings@se14.qmul.ac.uk>
# Date 1492942238 -3600
# Node ID b4e91500891a4295cdc5bd1364bb7656779ce5cb
# Parent  1076ac62823f435d975766542aa9a91a44fe2f14
#133 Added individual images to AB

diff -r 1076ac62823f -r b4e91500891a interfaces/AB.css
--- a/interfaces/AB.css	Sun Apr 23 10:39:02 2017 +0100
+++ b/interfaces/AB.css	Sun Apr 23 11:10:38 2017 +0100
@@ -64,6 +64,17 @@
     display: block;
     margin: auto;
 }
+div.comparator-image {
+    background-color: rgba(255,255,255,0);
+}
+img.comparator-image {
+    width: inherit;
+    height: inherit;
+    z-index: -1;
+    position: absolute;
+    display: inline;
+    right: 0px;
+}
 div.disabled {
     background-color: #AAA;
 }
diff -r 1076ac62823f -r b4e91500891a interfaces/AB.js
--- a/interfaces/AB.js	Sun Apr 23 10:39:02 2017 +0100
+++ b/interfaces/AB.js	Sun Apr 23 11:10:38 2017 +0100
@@ -213,6 +213,13 @@
         this.box.id = 'comparator-' + text;
         this.selector = document.createElement('div');
         this.selector.className = 'comparator-selector disabled';
+        if (audioElement.specification.image) {
+            this.selector.className += " comparator-image";
+            var image = document.createElement("img");
+            image.src = audioElement.specification.image;
+            image.className = "comparator-image";
+            this.selector.appendChild(image);
+        }
         var selectorText = document.createElement('span');
         selectorText.textContent = text;
         this.selector.appendChild(selectorText);
@@ -263,7 +270,7 @@
             } else if (event.currentTarget === this.playback) {
                 this.playbackClicked();
             }
-        }
+        };
         this.playback.addEventListener("click", this);
         this.selector.addEventListener("click", this);