# HG changeset patch
# User Nicholas Jillings <nicholas.jillings@mail.bcu.ac.uk>
# Date 1464251707 -3600
# Node ID dc13bd68ea34b60f55e2ecb95d8635bbc18dab89
# Parent  dde1f3254762bc29c3fe1a0b2d28a3ad72bde69e
Fix for #93 for all interfaces which have outside-reference (all except ABX)

diff -r dde1f3254762 -r dc13bd68ea34 interfaces/AB.css
--- a/interfaces/AB.css	Thu May 26 09:07:36 2016 +0100
+++ b/interfaces/AB.css	Thu May 26 09:35:07 2016 +0100
@@ -29,11 +29,17 @@
     height: 40px;
 }
 
+div#outside-reference-holder {
+    display: flex;
+    align-content: center;
+    justify-content: center;
+    margin-bottom: 5px;
+}
+
 button.outside-reference {
-	width:120px;
-	height:40px;
-	margin-bottom:5px;
-	position: absolute;
+    height: 40px;
+    position: inherit;
+    margin: 0px 5px;
 }
 
 div.comparator-holder {
diff -r dde1f3254762 -r dc13bd68ea34 interfaces/AB.js
--- a/interfaces/AB.js	Thu May 26 09:07:36 2016 +0100
+++ b/interfaces/AB.js	Thu May 26 09:35:07 2016 +0100
@@ -88,6 +88,10 @@
 	// Global parent for the comment boxes on the page
 	var feedbackHolder = document.createElement('div');
 	feedbackHolder.id = 'feedbackHolder';
+    
+    // Create outside reference holder
+    var outsideRef = document.createElement("div");
+    outsideRef.id = "outside-reference-holder";
 	
 	// Construct the AB Boxes
 	var boxes = document.createElement('div');
@@ -109,6 +113,7 @@
 	testContent.appendChild(title); // Insert the title
 	testContent.appendChild(pagetitle);
 	testContent.appendChild(interfaceButtons);
+    testContent.appendChild(outsideRef);
 	testContent.appendChild(feedbackHolder);
 	testContent.appendChild(submit);
 	interfaceContext.insertPoint.appendChild(testContent);
@@ -128,9 +133,9 @@
 	}
 	interfaceObj = interfaceObj[0];
     
-    // Clear any outside references
-    var outsideReferences = document.getElementsByName("outside-reference");
-    for (var i=0; i<outsideReferences.length; i++) {feedbackHolder.removeChild(outsideReferences[i]);}
+    // Delete outside reference
+	var outsideReferenceHolder = document.getElementById("outside-reference-holder");
+    outsideReferenceHolder.innerHTML = "";
 	
 	if(interfaceObj.title != null)
 	{
@@ -350,7 +355,7 @@
         var audioObject = audioEngineContext.newTrack(element);
 		if (index == audioHolderObject.outsideReference || element.type == 'outside-reference')
 		{
-            var orNode = new interfaceContext.outsideReferenceDOM(audioObject,index,document.getElementById('interface-buttons'));
+            var orNode = new interfaceContext.outsideReferenceDOM(audioObject,index,document.getElementById("outside-reference-holder"));
 			audioObject.bindInterface(orNode);
         } else {
             var label;
diff -r dde1f3254762 -r dc13bd68ea34 interfaces/ape.css
--- a/interfaces/ape.css	Thu May 26 09:07:36 2016 +0100
+++ b/interfaces/ape.css	Thu May 26 09:35:07 2016 +0100
@@ -69,13 +69,20 @@
     border: 1px solid black;
 }
 
+div#outside-reference-holder {
+    display: flex;
+    align-content: center;
+    justify-content: center;
+    margin-bottom: 5px;
+}
+
 div.outside-reference {
 	width:120px;
-	padding-left: 55px;
-	margin-left: 100px;
+    text-align: center;
 	height:20px;
-	margin-bottom:5px;
 	background-color: rgb(100,200,100);
+    position: inherit;
+    margin: 0px 5px;
 }
 
 div.track-slider-disabled {
diff -r dde1f3254762 -r dc13bd68ea34 interfaces/ape.js
--- a/interfaces/ape.js	Thu May 26 09:07:36 2016 +0100
+++ b/interfaces/ape.js	Thu May 26 09:35:07 2016 +0100
@@ -260,6 +260,9 @@
 	var sliderHolder = document.createElement("div");
 	sliderHolder.id = "slider-holder";
 	
+    // Create outside reference holder
+    var outsideRef = document.createElement("div");
+    outsideRef.id = "outside-reference-holder";
 	
 	// Global parent for the comment boxes on the page
 	var feedbackHolder = document.createElement('div');
@@ -271,6 +274,7 @@
 	// Inject into HTML
 	testContent.appendChild(title); // Insert the title
 	testContent.appendChild(interfaceButtons);
+    testContent.appendChild(outsideRef);
 	testContent.appendChild(sliderHolder);
 	testContent.appendChild(feedbackHolder);
 	interfaceContext.insertPoint.appendChild(testContent);
@@ -295,10 +299,7 @@
 	sliderHolder.innerHTML = "";
 	
 	// Delete outside reference
-	var outsideReferenceHolder = document.getElementById('outside-reference');
-	if (outsideReferenceHolder != null) {
-		document.getElementById('interface-buttons').removeChild(outsideReferenceHolder);
-	}
+	document.getElementById("outside-reference-holder").innerHTML = "";
 	
 	var interfaceObj = audioHolderObject.interfaces;
 	for (var k=0; k<interfaceObj.length; k++) {
@@ -361,7 +362,7 @@
 		if (element.type == 'outside-reference')
 		{
 			// Construct outside reference;
-			var orNode = new outsideReferenceDOM(audioObject,index,document.getElementById('interface-buttons'));
+			var orNode = new outsideReferenceDOM(audioObject,index,document.getElementById("outside-reference-holder"));
 			audioObject.bindInterface(orNode);
 		} else {
 			// Create a slider per track
@@ -704,9 +705,9 @@
 		{
 			progress = String(progress);
 			progress = progress.split('.')[0];
-			this.outsideReferenceHolder[0].children[0].textContent = progress+'%';
+			this.outsideReferenceHolder.firstChild.textContent = progress+'%';
 		} else {
-			this.outsideReferenceHolder[0].children[0].textContent = "Play Reference";
+			this.outsideReferenceHolder.firstChild.textContent = "Play Reference";
 		}
 	};
     this.startPlayback = function()
diff -r dde1f3254762 -r dc13bd68ea34 interfaces/discrete.css
--- a/interfaces/discrete.css	Thu May 26 09:07:36 2016 +0100
+++ b/interfaces/discrete.css	Thu May 26 09:35:07 2016 +0100
@@ -86,11 +86,16 @@
 	margin: 9px 0px;
 }
 
+div#outside-reference-holder {
+    display: flex;
+    align-content: center;
+    justify-content: center;
+    margin-bottom: 5px;
+}
+
 button.outside-reference {
-	width:120px;
-	height:20px;
-	margin-bottom:5px;
-	position: absolute;
+    position: inherit;
+    margin: 0px 5px;
 }
 
 div.track-slider-playing {
diff -r dde1f3254762 -r dc13bd68ea34 interfaces/discrete.js
--- a/interfaces/discrete.js	Thu May 26 09:07:36 2016 +0100
+++ b/interfaces/discrete.js	Thu May 26 09:35:07 2016 +0100
@@ -53,6 +53,11 @@
             console.log('Stopped at ' + time); // DEBUG/SAFETY
 		}
 	};
+    
+    // Create outside reference holder
+    var outsideRef = document.createElement("div");
+    outsideRef.id = "outside-reference-holder";
+    
 	// Create Submit (save) button
 	var submit = document.createElement("button");
 	submit.innerHTML = 'Next';
@@ -98,6 +103,7 @@
 	testContent.appendChild(title); // Insert the title
 	testContent.appendChild(pagetitle);
 	testContent.appendChild(interfaceButtons);
+    testContent.appendChild(outsideRef);
 	testContent.appendChild(sliderBox);
 	testContent.appendChild(feedbackHolder);
 	interfaceContext.insertPoint.appendChild(testContent);
@@ -164,10 +170,7 @@
     }
 	
 	// Delete outside reference
-	var outsideReferenceHolder = document.getElementById('outside-reference');
-	if (outsideReferenceHolder != null) {
-		document.getElementById('interface-buttons').removeChild(outsideReferenceHolder);
-	}
+    document.getElementById("outside-reference-holder").innerHTML = "";
 	
 	var sliderBox = document.getElementById('slider-holder');
 	sliderBox.innerHTML = "";
@@ -194,7 +197,7 @@
 		if (element.type == 'outside-reference')
 		{
 			// Construct outside reference;
-			var orNode = new interfaceContext.outsideReferenceDOM(audioObject,index,document.getElementById('interface-buttons'));
+			var orNode = new interfaceContext.outsideReferenceDOM(audioObject,index,document.getElementById("outside-reference-holder"));
 			audioObject.bindInterface(orNode);
 		} else {
 			// Create a slider per track
diff -r dde1f3254762 -r dc13bd68ea34 interfaces/horizontal-sliders.css
--- a/interfaces/horizontal-sliders.css	Thu May 26 09:07:36 2016 +0100
+++ b/interfaces/horizontal-sliders.css	Thu May 26 09:35:07 2016 +0100
@@ -75,12 +75,16 @@
 	height: 94px;
 }
 
+div#outside-reference-holder {
+    display: flex;
+    align-content: center;
+    justify-content: center;
+    margin-bottom: 5px;
+}
 
 button.outside-reference {
-	width:120px;
-	height:20px;
-	margin-bottom:5px;
-	position: absolute;
+    position: inherit;
+    margin: 0px 5px;
 }
 
 div.track-slider-playing {
diff -r dde1f3254762 -r dc13bd68ea34 interfaces/horizontal-sliders.js
--- a/interfaces/horizontal-sliders.js	Thu May 26 09:07:36 2016 +0100
+++ b/interfaces/horizontal-sliders.js	Thu May 26 09:35:07 2016 +0100
@@ -62,6 +62,10 @@
 	// Append the interface buttons into the interfaceButtons object.
 	interfaceButtons.appendChild(playback);
 	interfaceButtons.appendChild(submit);
+    
+    // Create outside reference holder
+    var outsideRef = document.createElement("div");
+    outsideRef.id = "outside-reference-holder";
 	
 	// Create a slider box
 	var sliderBox = document.createElement('div');
@@ -98,6 +102,7 @@
 	testContent.appendChild(title); // Insert the title
 	testContent.appendChild(pagetitle);
 	testContent.appendChild(interfaceButtons);
+    testContent.appendChild(outsideRef);
 	testContent.appendChild(sliderBox);
 	testContent.appendChild(feedbackHolder);
 	interfaceContext.insertPoint.appendChild(testContent);
@@ -165,10 +170,7 @@
     }
     
 	// Delete outside reference
-	var outsideReferenceHolder = document.getElementById('outside-reference');
-	if (outsideReferenceHolder != null) {
-		document.getElementById('interface-buttons').removeChild(outsideReferenceHolder);
-	}
+	document.getElementById("outside-reference-holder").innerHTML = "";
 	
 	var sliderBox = document.getElementById('slider-holder');
 	sliderBox.innerHTML = "";
@@ -194,7 +196,7 @@
 		if (element.type == 'outside-reference')
 		{
 			// Construct outside reference;
-			var orNode = new interfaceContext.outsideReferenceDOM(audioObject,index,document.getElementById('interface-buttons'));
+			var orNode = new interfaceContext.outsideReferenceDOM(audioObject,index,document.getElementById("outside-reference-holder"));
 			audioObject.bindInterface(orNode);
 		} else {
 			// Create a slider per track