comparison interfaces/mushra.js @ 2781:c59bcb698684

#138 Added page fixed images to ABX, discrete, horizontal and mushra

 
     if (interfaceObj.title !== null) {
         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 = "";
 
     var sliderBox = document.getElementById('slider-holder');

     this.getValue = function () {
         return this.slider.value;
     };
 
     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);
         progress = progress.substr(0, 5);
         this.play.textContent = "Loading: " + progress + "%";

 
 function resizeWindow(event) {
     // 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';
     }
 
     // Auto-align
     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;
     }
     document.getElementById('slider-holder').style.marginLeft = diff + 'px';
     for (var i in audioEngineContext.audioObjects) {
         if (audioEngineContext.audioObjects[i].specification.type != 'outside-reference') {
             audioEngineContext.audioObjects[i].interfaceDOM.resize(event);
         }
     }
     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");
     new_canvas.id = 'scale-canvas';
     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();
 }
 
 function drawScale() {
     var interfaceObj = testState.currentStateMap.interfaces[0];