# HG changeset patch
# User Nicholas Jillings <nicholas.jillings@mail.bcu.ac.uk>
# Date 1492786244 -3600
# Node ID c59bcb6986842331377b82854c068e897794e973
# Parent  9c031a976321e9b8ad829523f475eef8b0c653b4
#138 Added page fixed images to ABX, discrete, horizontal and mushra

diff -r 9c031a976321 -r c59bcb698684 interfaces/ABX.js
--- a/interfaces/ABX.js	Fri Apr 21 15:17:02 2017 +0100
+++ b/interfaces/ABX.js	Fri Apr 21 15:50:44 2017 +0100
@@ -129,6 +129,11 @@
         document.getElementById("pageTitle").textContent = interfaceObj.title;
     }
 
+    if (interfaceObj.image !== undefined) {
+        feedbackHolder.insertBefore(interfaceContext.imageHolder.root, document.getElementById("box-holders"));
+        interfaceContext.imageHolder.setImage(interfaceObj.image);
+    }
+
     interfaceContext.comparator = new comparator(page);
 
     var interfaceOptions = interfaceObj.options;
diff -r 9c031a976321 -r c59bcb698684 interfaces/discrete.js
--- a/interfaces/discrete.js	Fri Apr 21 15:17:02 2017 +0100
+++ b/interfaces/discrete.js	Fri Apr 21 15:50:44 2017 +0100
@@ -137,6 +137,11 @@
         document.getElementById("pageTitle").textContent = interfaceObj.title;
     }
 
+    if (interfaceObj.image !== undefined) {
+        document.getElementById("testContent").insertBefore(interfaceContext.imageHolder.root, document.getElementById("slider"));
+        interfaceContext.imageHolder.setImage(interfaceObj.image);
+    }
+
     // Delete outside reference
     document.getElementById("outside-reference-holder").innerHTML = "";
 
diff -r 9c031a976321 -r c59bcb698684 interfaces/horizontal-sliders.js
--- a/interfaces/horizontal-sliders.js	Fri Apr 21 15:17:02 2017 +0100
+++ b/interfaces/horizontal-sliders.js	Fri Apr 21 15:50:44 2017 +0100
@@ -137,6 +137,11 @@
         document.getElementById("pageTitle").textContent = interfaceObj.title;
     }
 
+    if (interfaceObj.image !== undefined) {
+        document.getElementById("testContent").insertBefore(interfaceContext.imageHolder.root, document.getElementById("slider"));
+        interfaceContext.imageHolder.setImage(interfaceObj.image);
+    }
+
     // Delete outside reference
     document.getElementById("outside-reference-holder").innerHTML = "";
 
diff -r 9c031a976321 -r c59bcb698684 interfaces/mushra.js
--- a/interfaces/mushra.js	Fri Apr 21 15:17:02 2017 +0100
+++ b/interfaces/mushra.js	Fri Apr 21 15:50:44 2017 +0100
@@ -137,6 +137,11 @@
         document.getElementById("pageTitle").textContent = interfaceObj.title;
     }
 
+    if (interfaceObj.image !== undefined) {
+        document.getElementById("testContent").insertBefore(interfaceContext.imageHolder.root, document.getElementById("slider"));
+        interfaceContext.imageHolder.setImage(interfaceObj.image);
+    }
+
     // Delete outside reference
     var outsideReferenceHolder = document.getElementById("outside-reference-holder");
     outsideReferenceHolder.innerHTML = "";
@@ -360,8 +365,12 @@
     };
 
     this.resize = function (event) {
-        this.holder.style.height = window.innerHeight - 200 + 'px';
-        this.slider.style.height = window.innerHeight - 250 + 'px';
+        var imgHeight = 0;
+        if (document.getElementById("imageController")) {
+            imgHeight = $(interfaceContext.imageHolder.root).height();
+        }
+        this.holder.style.height = window.innerHeight - 200 - imgHeight + 'px';
+        this.slider.style.height = window.innerHeight - 250 - imgHeight + 'px';
     };
     this.updateLoading = function (progress) {
         progress = String(progress);
@@ -389,7 +398,11 @@
     // Function called when the window has been resized.
     // MANDATORY FUNCTION
 
-    var outsideRef = document.getElementById('outside-reference');
+    var outsideRef = document.getElementById('outside-reference'),
+        imageHeight = 0;
+    if (document.getElementById("imageController")) {
+        imgHeight = $(interfaceContext.imageHolder.root).height();
+    }
     if (outsideRef !== null) {
         outsideRef.style.left = (window.innerWidth - 120) / 2 + 'px';
     }
@@ -398,7 +411,7 @@
     var numObj = document.getElementsByClassName('track-slider').length;
     var totalWidth = (numObj - 1) * 150 + 100;
     var diff = (window.innerWidth - totalWidth) / 2;
-    document.getElementById('slider').style.height = window.innerHeight - 180 + 'px';
+    document.getElementById('slider').style.height = window.innerHeight - 180 - imgHeight + 'px';
     if (diff <= 0) {
         diff = 0;
     }
@@ -409,7 +422,7 @@
         }
     }
     document.getElementById('scale-holder').style.marginLeft = (diff - 100) + 'px';
-    document.getElementById('scale-text-holder').style.height = window.innerHeight - 194 + 'px';
+    document.getElementById('scale-text-holder').style.height = window.innerHeight - imgHeight - 194 + 'px';
     // Cheers edge for making me delete a canvas every resize.
     var canvas = document.getElementById('scale-canvas');
     var new_canvas = document.createElement("canvas");
@@ -417,7 +430,7 @@
     canvas.parentElement.appendChild(new_canvas);
     canvas.parentElement.removeChild(canvas);
     new_canvas.width = totalWidth;
-    new_canvas.height = window.innerHeight - 194;
+    new_canvas.height = window.innerHeight - 194 - imgHeight;
     drawScale();
 }