# HG changeset patch
# User Nicholas Jillings <nicholas.jillings@mail.bcu.ac.uk>
# Date 1464250056 -3600
# Node ID dde1f3254762bc29c3fe1a0b2d28a3ad72bde69e
# Parent  3d47c5ae0159b2e9b19b15c35be06f8b398f9464
#93: MUSHRA / vertical-slider support multiple references auto-aligned to the center. Will need to adjust all the other interface schemas

diff -r 3d47c5ae0159 -r dde1f3254762 interfaces/mushra.css
--- a/interfaces/mushra.css	Thu May 26 08:41:46 2016 +0100
+++ b/interfaces/mushra.css	Thu May 26 09:07:36 2016 +0100
@@ -61,11 +61,16 @@
 	margin-left: 50px;
 }
 
+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 3d47c5ae0159 -r dde1f3254762 interfaces/mushra.js
--- a/interfaces/mushra.js	Thu May 26 08:41:46 2016 +0100
+++ b/interfaces/mushra.js	Thu May 26 09:07:36 2016 +0100
@@ -68,6 +68,11 @@
 	// 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');
@@ -100,6 +105,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,8 @@
     }
 	
 	// Delete outside reference
-	var outsideReferenceHolder = document.getElementById('outside-reference');
-	if (outsideReferenceHolder != null) {
-		document.getElementById('interface-buttons').removeChild(outsideReferenceHolder);
-	}
+	var outsideReferenceHolder = document.getElementById("outside-reference-holder");
+    outsideReferenceHolder.innerHTML = "";
 	
 	var sliderBox = document.getElementById('slider-holder');
 	sliderBox.innerHTML = "";
@@ -192,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,outsideReferenceHolder);
 			audioObject.bindInterface(orNode);
 		} else {
 			// Create a slider per track
diff -r 3d47c5ae0159 -r dde1f3254762 js/core.js
--- a/js/core.js	Thu May 26 08:41:46 2016 +0100
+++ b/js/core.js	Thu May 26 09:07:36 2016 +0100
@@ -2485,7 +2485,6 @@
     {
         this.parent = audioObject;
         this.outsideReferenceHolder = document.createElement('button');
-        this.outsideReferenceHolder.id = 'outside-reference';
         this.outsideReferenceHolder.className = 'outside-reference';
         this.outsideReferenceHolder.setAttribute('track-id',index);
         this.outsideReferenceHolder.textContent = "Play Reference";