# HG changeset patch
# User Nicholas Jillings <n.g.r.jillings@se14.qmul.ac.uk>
# Date 1452618639 0
# Node ID afbb999e97cb53201ebe14a527413232cddac019
# Parent  e3155b62af12d41e238a6ba98418f4be6ac91d8c
Interfaces properly handle outside reference objects. Better core.js comment box handling. InterfaceDOM return their presented ID rather than assumed index.

diff -r e3155b62af12 -r afbb999e97cb AB.js
--- a/AB.js	Tue Jan 12 14:58:22 2016 +0000
+++ b/AB.js	Tue Jan 12 17:10:39 2016 +0000
@@ -203,6 +203,10 @@
 		this.getValue = function() {
 			return this.value;	
 		};
+		this.getPresentedId = function()
+	{
+		return this.selector.children[0].textContent;
+	};
 	};
 	
 	this.boxHolders = document.getElementById('box-holders');
diff -r e3155b62af12 -r afbb999e97cb ape.js
--- a/ape.js	Tue Jan 12 14:58:22 2016 +0000
+++ b/ape.js	Tue Jan 12 17:10:39 2016 +0000
@@ -346,12 +346,13 @@
 			outsideReferenceHolderspan = document.createElement('span');
 			outsideReferenceHolderspan.textContent = 'Reference';
 			outsideReferenceHolder.appendChild(outsideReferenceHolderspan);
+			outsideReferenceHolder.setAttribute('track-id',index);
 			
 			var audioObject = audioEngineContext.newTrack(element);
 			
 			outsideReferenceHolder.onclick = function(event)
 			{
-				audioEngineContext.play(audioEngineContext.audioObjects.length-1);
+				audioEngineContext.play(event.currentTarget.getAttribute('track-id'));
 				$('.track-slider').removeClass('track-slider-playing');
 	            $('.comment-div').removeClass('comment-box-playing');
 	            if (event.currentTarget.nodeName == 'DIV') {
@@ -362,17 +363,17 @@
 			};
 			
 			document.getElementById('interface-buttons').appendChild(outsideReferenceHolder);
-			return;
+		} else {
+		
+			// Now load each audio sample. First create the new track by passing the full URL
+			var trackURL = audioHolderObject.hostURL + element.url;
+			var audioObject = audioEngineContext.newTrack(element);
+			
+			var node = interfaceContext.createCommentBox(audioObject);
+			// Create a slider per track
+			var sliderNode = new sliderObject(audioObject,interfaceObj);
+			audioObject.bindInterface(sliderNode);
 		}
-		
-		// Now load each audio sample. First create the new track by passing the full URL
-		var trackURL = audioHolderObject.hostURL + element.url;
-		var audioObject = audioEngineContext.newTrack(element);
-		
-		var node = interfaceContext.createCommentBox(audioObject);
-		// Create a slider per track
-		var sliderNode = new sliderObject(audioObject,interfaceObj);
-		audioObject.bindInterface(sliderNode);
 	});
 	
 	// Initialse the interfaceSlider object metrics
@@ -549,7 +550,6 @@
 		trackObj.className = 'track-slider track-slider-disabled track-slider-'+audioObject.id;
 		trackObj.id = 'track-slider-'+this.id+'-'+audioObject.id;
 		trackObj.setAttribute('trackIndex',audioObject.id);
-		trackObj.innerHTML = '<span>'+audioObject.id+'</span>';
 		if (this.name != undefined) {
 			trackObj.setAttribute('interface-name',this.name);
 		} else {
@@ -564,6 +564,7 @@
 		this.canvas.appendChild(trackObj);
 		this.sliders.push(trackObj);
 		this.metrics.push(new metricTracker(this));
+		trackObj.innerHTML = '<span>'+(this.metrics.length-1)+'</span>';
 		this.metrics[this.metrics.length-1].initialise(convSliderPosToRate(trackObj));
 		return trackObj;
 	};
@@ -647,6 +648,10 @@
 	this.getValue = function() {
 		return convSliderPosToRate(this.trackSliderObjects[0]);
 	};
+	this.getPresentedId = function()
+	{
+		return this.trackSliderObjects[0].children[0].textContent;
+	};
 }
 
 function buttonSubmitClick()
diff -r e3155b62af12 -r afbb999e97cb core.js
--- a/core.js	Tue Jan 12 14:58:22 2016 +0000
+++ b/core.js	Tue Jan 12 17:10:39 2016 +0000
@@ -1146,8 +1146,6 @@
 			this.interfaceDOM.enable();
 		}
 		this.onplayGain = decibelToLinear(this.specification.gain)*this.buffer.buffer.playbackGain;
-		
-		this.storeDOM.setAttribute('presentedId',this.id);
 		this.storeDOM.setAttribute('playGain',linearToDecibel(this.onplayGain));
 	};
 	
@@ -1159,6 +1157,7 @@
 		{
 			this.interfaceDOM.enable();
 		}
+		this.storeDOM.setAttribute('presentedId',interfaceObject.getPresentedId());
 	};
     
 	this.loopStart = function() {
@@ -2543,18 +2542,13 @@
 	};
 	
 	this.sortCommentBoxes = function() {
-		var holder = [];
-		while (this.commentBoxes.length > 0) {
-			var node = this.commentBoxes.pop(0);
-			holder[node.id] = node;
-		}
-		this.commentBoxes = holder;
+		this.commentBoxes.sort(function(a,b){return a.id - b.id;});
 	};
 	
 	this.showCommentBoxes = function(inject, sort) {
 		if (sort) {interfaceContext.sortCommentBoxes();}
-		for (var i=0; i<interfaceContext.commentBoxes.length; i++) {
-			inject.appendChild(this.commentBoxes[i].trackComment);
+		for (var box of interfaceContext.commentBoxes) {
+			inject.appendChild(box.trackComment);
 		}
 	};
 	
diff -r e3155b62af12 -r afbb999e97cb mushra.css
--- a/mushra.css	Tue Jan 12 14:58:22 2016 +0000
+++ b/mushra.css	Tue Jan 12 17:10:39 2016 +0000
@@ -10,7 +10,7 @@
 div.pageTitle {
 	width: auto;
 	height: 20px;
-	margin-top: 20px;
+	margin: 10px 0px;
 }
 
 div.pageTitle span{
@@ -73,13 +73,11 @@
 	margin-left: 50px;
 }
 
-div.outside-reference {
+button.outside-reference {
 	width:120px;
-	padding-left: 55px;
-	margin-left: 100px;
 	height:20px;
 	margin-bottom:5px;
-	background-color: rgb(100,200,100);
+	position: absolute;
 }
 
 div.track-slider-playing {
diff -r e3155b62af12 -r afbb999e97cb mushra.js
--- a/mushra.js	Tue Jan 12 14:58:22 2016 +0000
+++ b/mushra.js	Tue Jan 12 17:10:39 2016 +0000
@@ -151,68 +151,57 @@
 	});
 	
 	// Find all the audioElements from the audioHolder
+	var label = 0;
 	$(audioHolderObject.audioElements).each(function(index,element){
 		// Find URL of track
 		// In this jQuery loop, variable 'this' holds the current audioElement.
 		
-		// Check if an outside reference
-		if (index == audioHolderObject.outsideReference)
+		var audioObject = audioEngineContext.newTrack(element);
+		if (element.type == 'outside-reference')
 		{
-			return;
+			var outsideReferenceHolder = document.createElement('button');
+			outsideReferenceHolder.id = 'outside-reference';
+			outsideReferenceHolder.className = 'outside-reference';
+			outsideReferenceHolder.setAttribute('track-id',index);
+			outsideReferenceHolder.textContent = "Play Reference";
+			
+			var audioObject = audioEngineContext.newTrack(element);
+			
+			outsideReferenceHolder.onclick = function(event)
+			{
+				audioEngineContext.play(event.currentTarget.getAttribute('track-id'));
+				$('.track-slider').removeClass('track-slider-playing');
+	            $('.comment-div').removeClass('comment-box-playing');
+	            $(event.currentTarget).addClass('track-slider-playing');
+			};
+			
+			document.getElementById('interface-buttons').appendChild(outsideReferenceHolder);
+		} else {
+			var node = interfaceContext.createCommentBox(audioObject);
+		
+			// Create a slider per track
+			audioObject.bindInterface(new sliderObject(audioObject,label));
+			
+			if (typeof audioHolderObject.initialPosition === "number")
+			{
+				// Set the values
+				audioObject.interfaceDOM.slider.value = audioHolderObject.initalPosition;
+			} else {
+				// Distribute it randomnly
+				audioObject.interfaceDOM.slider.value = Math.random();
+			}
+			sliderBox.appendChild(audioObject.interfaceDOM.holder);
+			audioObject.metric.initialise(audioObject.interfaceDOM.slider.value);
+			label += 1;
 		}
-		
-		var audioObject = audioEngineContext.newTrack(element);
-		
-		var node = interfaceContext.createCommentBox(audioObject);
-		
-		// Create a slider per track
-		audioObject.interfaceDOM = new sliderObject(audioObject);
-		
-		if (typeof audioHolderObject.initialPosition === "number")
-		{
-			// Set the values
-			audioObject.interfaceDOM.slider.value = audioHolderObject.initalPosition;
-		} else {
-			// Distribute it randomnly
-			audioObject.interfaceDOM.slider.value = Math.random();
-		}
-		
-		sliderBox.appendChild(audioObject.interfaceDOM.holder);
-		audioObject.metric.initialise(audioObject.interfaceDOM.slider.value);
         
 	});
 	
 	// Auto-align
 	resizeWindow(null);
-	
-	// Construct outside reference;
-	if (audioHolderObject.outsideReference != null) {
-		var outsideReferenceHolder = document.createElement('div');
-		outsideReferenceHolder.id = 'outside-reference';
-		outsideReferenceHolder.className = 'outside-reference';
-		outsideReferenceHolderspan = document.createElement('span');
-		outsideReferenceHolderspan.textContent = 'Reference';
-		outsideReferenceHolder.appendChild(outsideReferenceHolderspan);
-		
-		var audioObject = audioEngineContext.newTrack(audioHolderObject.audioElements[audioHolderObject.outsideReference]);
-		
-		outsideReferenceHolder.onclick = function(event)
-		{
-			audioEngineContext.play(audioEngineContext.audioObjects.length-1);
-			$('.track-slider').removeClass('track-slider-playing');
-            $('.comment-div').removeClass('comment-box-playing');
-            if (event.currentTarget.nodeName == 'DIV') {
-            	$(event.currentTarget).addClass('track-slider-playing');
-            } else {
-            	$(event.currentTarget.parentElement).addClass('track-slider-playing');
-            }
-		};
-		
-		document.getElementById('interface-buttons').appendChild(outsideReferenceHolder);
-	}
 }
 
-function sliderObject(audioObject)
+function sliderObject(audioObject,label)
 {
 	// Constructs the slider object. We use the HTML5 slider object
 	this.parent = audioObject;
@@ -233,7 +222,7 @@
 	}
 	this.holder.setAttribute('trackIndex',audioObject.id);
 	
-	this.title.textContent = audioObject.id;
+	this.title.textContent = label;
 	this.title.style.width = "100%";
 	this.title.style.float = "left";
 	
@@ -303,6 +292,10 @@
 	{
 		this.enable();
 	}
+	this.getPresentedId = function()
+	{
+		return this.title.textContent;
+	};
 }
 
 function resizeWindow(event)
@@ -310,8 +303,14 @@
 	// Function called when the window has been resized.
 	// MANDATORY FUNCTION
 	
+	var outsideRef = document.getElementById('outside-reference');
+	if(outsideRef != null)
+	{
+		outsideRef.style.left = (window.innerWidth-120)/2 + 'px';
+	}
+	
 	// Auto-align
-	var numObj = audioEngineContext.audioObjects.length;
+	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';
@@ -319,7 +318,9 @@
 	document.getElementById('slider-holder').style.marginLeft = diff + 'px';
 	for (var i in audioEngineContext.audioObjects)
 	{
-		audioEngineContext.audioObjects[i].interfaceDOM.resize(event);
+		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';