# HG changeset patch
# User Nicholas Jillings <nicholas.jillings@eecs.qmul.ac.uk>
# Date 1449829347 0
# Node ID 1e176e95ef33b10a2f26888e8c63a66ffb0461c1
# Parent  0ec386b7392167315f54a1c8399ab9cb6216f850# Parent  18dc725bb5c222e67a50610c09eeb8d44e7d4add
Merge

diff -r 18dc725bb5c2 -r 1e176e95ef33 ape.js
--- a/ape.js	Tue Dec 08 22:13:14 2015 +0100
+++ b/ape.js	Fri Dec 11 10:22:27 2015 +0000
@@ -18,39 +18,6 @@
 	var testContent = document.createElement('div');
 	
 	testContent.id = 'testContent';
-
-	
-	// Create APE specific metric functions
-	audioEngineContext.metric.initialiseTest = function()
-	{
-	};
-	
-	audioEngineContext.metric.sliderMoved = function()
-	{
-		var id = this.data;
-		this.data = -1;
-		var position = convSliderPosToRate(id);
-        console.log('slider ' + id + ': '+ position + ' (' + time + ')'); // DEBUG/SAFETY: show position and slider id
-		if (audioEngineContext.timer.testStarted)
-		{
-			audioEngineContext.audioObjects[id].metric.moved(time,position);
-		}
-	};
-	
-	audioEngineContext.metric.sliderPlayed = function(id)
-	{
-		var time = audioEngineContext.timer.getTestTime();
-		if (audioEngineContext.timer.testStarted)
-		{
-			if (this.lastClicked >= 0)
-			{
-				audioEngineContext.audioObjects[this.lastClicked].metric.listening(time);
-			}
-			this.lastClicked = id;
-			audioEngineContext.audioObjects[id].metric.listening(time);
-		}
-        console.log('slider ' + id + ' played (' + time + ')'); // DEBUG/SAFETY: show played slider id
-	};
 	
 	// Bindings for interfaceContext
 	Interface.prototype.checkAllPlayed = function()
@@ -206,6 +173,9 @@
 		return this.objectMoved;
 	};
 	
+	// Bindings for slider interfaces
+	Interface.prototype.interfaceSliders = [];
+	
 	// Bindings for audioObjects
 	
 	// Create the top div for the Title element
@@ -281,6 +251,8 @@
 	var height = window.innerHeight;
 	var id = audioHolderObject.id;
 	
+	interfaceContext.interfaceSliders = [];
+	
 	var feedbackHolder = document.getElementById('feedbackHolder');
 	var sliderHolder = document.getElementById('slider-holder');
 	feedbackHolder.innerHTML = null;
@@ -289,66 +261,7 @@
 	var interfaceObj = audioHolderObject.interfaces;
 	for (var k=0; k<interfaceObj.length; k++) {
 		// Create the div box to center align
-		var sliderBox = document.createElement('div');
-		sliderBox.className = 'sliderCanvasDiv';
-		sliderBox.id = 'sliderCanvasHolder-'+k;
-		
-		var pagetitle = document.createElement('div');
-		pagetitle.className = "pageTitle";
-		pagetitle.align = "center";
-		var titleSpan = document.createElement('span');
-		titleSpan.id = "pageTitle-"+k;
-		if (interfaceObj[k].title != undefined && typeof interfaceObj[k].title == "string")
-		{
-			titleSpan.textContent = interfaceObj[k].title;
-		}
-		pagetitle.appendChild(titleSpan);
-		sliderBox.appendChild(pagetitle);
-		
-		// Create the slider box to hold the slider elements
-		var canvas = document.createElement('div');
-		if (interfaceObj[k].name != undefined)
-			canvas.id = 'slider-'+interfaceObj[k].name;
-		else
-			canvas.id = 'slider-'+k;
-		canvas.className = 'slider';
-		canvas.align = "left";
-		canvas.addEventListener('dragover',function(event){
-			event.preventDefault();
-			event.dataTransfer.effectAllowed = 'none';
-			event.dataTransfer.dropEffect = 'copy';
-			return false;
-		},false);
-		var sliderMargin = document.createAttribute('marginsize');
-		sliderMargin.nodeValue = 42; // Set default margins to 42px either side
-		// Must have a known EXACT width, as this is used later to determine the ratings
-		var w = (Number(sliderMargin.nodeValue)+8)*2;
-		canvas.style.width = width - w +"px";
-		canvas.style.marginLeft = sliderMargin.nodeValue +'px';
-		canvas.setAttributeNode(sliderMargin);
-		sliderBox.appendChild(canvas);
-		
-		// Create the div to hold any scale objects
-		var scale = document.createElement('div');
-		scale.className = 'sliderScale';
-		scale.id = 'sliderScaleHolder';
-		scale.align = 'left';
-		sliderBox.appendChild(scale);
-		sliderHolder.appendChild(sliderBox);
-		var positionScale = canvas.style.width.substr(0,canvas.style.width.length-2);
-		var offset = Number(canvas.attributes['marginsize'].value);
-		$(interfaceObj[k].scale).each(function(index,scaleObj){
-			var value = document.createAttribute('value');
-			var position = Number(scaleObj[0])*0.01;
-			value.nodeValue = position;
-			var pixelPosition = (position*positionScale)+offset;
-			var scaleDOM = document.createElement('span');
-			scaleDOM.textContent = scaleObj[1];
-			scale.appendChild(scaleDOM);
-			scaleDOM.style.left = Math.floor((pixelPosition-($(scaleDOM).width()/2)))+'px';
-			scaleDOM.setAttributeNode(value);
-		});
-		
+		interfaceContext.interfaceSliders.push(new interfaceSliderHolder(interfaceObj[k]));
 		for (var i=0; i<interfaceObj[k].options.length; i++)
 		{
 			if (interfaceObj[k].options[i].type == 'option' && interfaceObj[k].options[i].name == 'playhead')
@@ -427,6 +340,8 @@
 		event.preventDefault();
 		var obj = interfaceContext.getSelectedObject();
 		if (obj == null) {return;}
+		var interfaceID = obj.parentElement.getAttribute("interfaceid");
+		var trackID = obj.getAttribute("trackindex");
 		if (interfaceContext.hasSelectedObjectMoved() == true)
 		{
 			var l = $(obj).css("left");
@@ -434,6 +349,7 @@
 			var time = audioEngineContext.timer.getTestTime();
 			var rate = convSliderPosToRate(obj);
 			audioEngineContext.audioObjects[id].metric.moved(time,rate);
+			interfaceContext.interfaceSliders[interfaceID].metrics[trackID].moved(time,rate);
 			console.log("slider "+id+" moved to "+rate+' ('+time+')');
 		} else {
 			var id = Number(obj.attributes['trackIndex'].value);
@@ -441,7 +357,6 @@
 			audioEngineContext.play(id);
 	        // Currently playing track red, rest green
 	        
-	        
 	        $('.track-slider').removeClass('track-slider-playing');
 	        var name = ".track-slider-"+obj.getAttribute("trackindex");
 	        $(name).addClass('track-slider-playing');
@@ -493,31 +408,144 @@
 	//testWaitIndicator();
 }
 
-function sliderObject(audioObject,interfaceObjects) {
-	// Create a new slider object;
-	this.parent = audioObject;
-	this.trackSliderObjects = [];
-	for (var i=0; i<interfaceObjects.length; i++)
+function interfaceSliderHolder(interfaceObject)
+{
+	this.sliders = [];
+	this.metrics = [];
+	this.id = document.getElementsByClassName("sliderCanvasDiv").length;
+	this.name = interfaceObject.name;
+	this.interfaceObject = interfaceObject;
+	this.sliderDOM = document.createElement('div');
+	this.sliderDOM.className = 'sliderCanvasDiv';
+	this.sliderDOM.id = 'sliderCanvasHolder-'+this.id;
+	
+	var pagetitle = document.createElement('div');
+	pagetitle.className = "pageTitle";
+	pagetitle.align = "center";
+	var titleSpan = document.createElement('span');
+	titleSpan.id = "pageTitle-"+this.id;
+	if (interfaceObject.title != undefined && typeof interfaceObject.title == "string")
+	{
+		titleSpan.textContent = interfaceObject.title;
+	}
+	pagetitle.appendChild(titleSpan);
+	this.sliderDOM.appendChild(pagetitle);
+	
+	// Create the slider box to hold the slider elements
+	this.canvas = document.createElement('div');
+	if (this.name != undefined)
+		this.canvas.id = 'slider-'+this.name;
+	else
+		this.canvas.id = 'slider-'+this.id;
+	this.canvas.setAttribute("interfaceid",this.id);
+	this.canvas.className = 'slider';
+	this.canvas.align = "left";
+	this.canvas.addEventListener('dragover',function(event){
+		event.preventDefault();
+		event.dataTransfer.effectAllowed = 'none';
+		event.dataTransfer.dropEffect = 'copy';
+		return false;
+	},false);
+	var sliderMargin = document.createAttribute('marginsize');
+	sliderMargin.nodeValue = 42; // Set default margins to 42px either side
+	// Must have a known EXACT width, as this is used later to determine the ratings
+	var w = (Number(sliderMargin.nodeValue)+8)*2;
+	this.canvas.style.width = window.innerWidth - w +"px";
+	this.canvas.style.marginLeft = sliderMargin.nodeValue +'px';
+	this.canvas.setAttributeNode(sliderMargin);
+	this.sliderDOM.appendChild(this.canvas);
+	
+	// Create the div to hold any scale objects
+	this.scale = document.createElement('div');
+	this.scale.className = 'sliderScale';
+	this.scale.id = 'sliderScaleHolder-'+this.id;
+	this.scale.align = 'left';
+	this.sliderDOM.appendChild(this.scale);
+	var positionScale = this.canvas.style.width.substr(0,this.canvas.style.width.length-2);
+	var offset = Number(this.canvas.attributes['marginsize'].value);
+	for (var index=0; index<interfaceObject.scale.length; index++)
+	{
+		var scaleObj = interfaceObject.scale[index];
+		var value = document.createAttribute('value');
+		var position = Number(scaleObj[0])*0.01;
+		value.nodeValue = position;
+		var pixelPosition = (position*positionScale)+offset;
+		var scaleDOM = document.createElement('span');
+		scaleDOM.textContent = scaleObj[1];
+		this.scale.appendChild(scaleDOM);
+		scaleDOM.style.left = Math.floor((pixelPosition-($(scaleDOM).width()/2)))+'px';
+		scaleDOM.setAttributeNode(value);
+	}
+	
+	var dest = document.getElementById("slider-holder");
+	dest.appendChild(this.sliderDOM);
+	
+	this.createSliderObject = function(audioObject)
 	{
 		var trackObj = document.createElement('div');
 		trackObj.className = 'track-slider track-slider-disabled track-slider-'+audioObject.id;
-		trackObj.id = 'track-slider-'+i+'-'+audioObject.id;
+		trackObj.id = 'track-slider-'+this.id+'-'+audioObject.id;
 		trackObj.setAttribute('trackIndex',audioObject.id);
 		trackObj.innerHTML = '<span>'+audioObject.id+'</span>';
-		if (interfaceObjects[i].name != undefined) {
-			trackObj.setAttribute('interface-name',interfaceObjects[i].name);
+		if (this.name != undefined) {
+			trackObj.setAttribute('interface-name',this.name);
 		} else {
-			trackObj.setAttribute('interface-name',i);
+			trackObj.setAttribute('interface-name',this.id);
 		}
-		this.trackSliderObjects.push(trackObj);
-		var slider = document.getElementById("slider-"+trackObj.getAttribute("interface-name"));
-		var offset = Number(slider.attributes['marginsize'].value);
+		var offset = Number(this.canvas.attributes['marginsize'].value);
 		// Distribute it randomnly
 		var w = window.innerWidth - (offset+8)*2;
 		w = Math.random()*w;
 		w = Math.floor(w+(offset+8));
 		trackObj.style.left = w+'px';
-		slider.appendChild(trackObj);
+		this.canvas.appendChild(trackObj);
+		this.sliders.push(trackObj);
+		this.metrics.push(new metricTracker(this));
+		this.metrics[this.metrics.length-1].initialPosition = convSliderPosToRate(trackObj);
+		return trackObj;
+	};
+	
+	this.resize = function(event)
+	{
+		var holdValues = [];
+		for (var index = 0; index < this.sliders.length; index++)
+		{
+			holdValues.push(convSliderPosToRate(this.sliders[index])); 
+		}
+		var width = event.target.innerWidth;
+		var sliderDiv = this.canvas;
+		var sliderScaleDiv = this.scale;
+		var marginsize = Number(sliderDiv.attributes['marginsize'].value);
+		var w = (marginsize+8)*2;
+		sliderDiv.style.width = width - w + 'px';
+		var width = width - w;
+		// Move sliders into new position
+		for (var index = 0; index < this.sliders.length; index++)
+		{
+			var pos = holdValues[index];
+			var pix = pos * width;
+			this.sliders[index].style.left = pix+marginsize+'px';
+		}
+		
+		// Move scale labels
+		for (var index = 0; index < this.scale.children.length; index++)
+		{
+			var scaleObj = this.scale.children[index];
+			var position = Number(scaleObj.attributes['value'].value);
+			var pixelPosition = (position*width)+marginsize;
+			scaleObj.style.left = Math.floor((pixelPosition-($(scaleObj).width()/2)))+'px';
+		}
+	}
+}
+
+function sliderObject(audioObject,interfaceObjects) {
+	// Create a new slider object;
+	this.parent = audioObject;
+	this.trackSliderObjects = [];
+	for (var i=0; i<interfaceContext.interfaceSliders.length; i++)
+	{
+		var trackObj = interfaceContext.interfaceSliders[i].createSliderObject(audioObject);
+		this.trackSliderObjects.push(trackObj);
 	}
 
 	// Onclick, switch playback to that track
@@ -625,38 +653,29 @@
 	// Function called when the window has been resized.
 	// MANDATORY FUNCTION
 	
-	// Store the slider marker values
-	var holdValues = [];
-	$(".track-slider").each(function(index,sliderObj){
-		holdValues.push(convSliderPosToRate(sliderObj));
-	});
-	
-	var width = event.target.innerWidth;
-	var canvas = document.getElementById('sliderCanvasHolder');
-	var sliderDiv = canvas.children[0];
-	var sliderScaleDiv = canvas.children[1];
-	var marginsize = Number(sliderDiv.attributes['marginsize'].value);
-	var w = (marginsize+8)*2;
-	sliderDiv.style.width = width - w + 'px';
-	var width = width - w;
-	// Move sliders into new position
-	$(".track-slider").each(function(index,sliderObj){
-		var pos = holdValues[index];
-		var pix = pos * width;
-		sliderObj.style.left = pix+marginsize+'px';
-	});
-	
-	// Move scale labels
-	$(sliderScaleDiv.children).each(function(index,scaleObj){
-		var position = Number(scaleObj.attributes['value'].value);
-		var pixelPosition = (position*width)+marginsize;
-		scaleObj.style.left = Math.floor((pixelPosition-($(scaleObj).width()/2)))+'px';
-	});
+	// Resize the slider objects
+	for (var i=0; i<interfaceContext.interfaceSliders.length; i++)
+	{
+		interfaceContext.interfaceSliders[i].resize(event);
+	}
 }
 
 function pageXMLSave(store, testXML)
 {
 	// MANDATORY
 	// Saves a specific test page
-	// You can use this space to add any extra nodes to your XML saves
+	// You can use this space to add any extra nodes to your XML <audioHolder> saves
+	// Get the current <audioHolder> information in store (remember to appendChild your data to it)
+	var audioelements = store.getElementsByTagName("audioelement");
+	for (var i=0; i<audioelements.length; i++)
+	{
+		// Have to append the metric specific nodes
+		for (var k=0; k<interfaceContext.interfaceSliders.length; k++)
+		{
+			var node = interfaceContext.interfaceSliders[k].metrics[i].exportXMLDOM();
+			node.setAttribute("interface-name",interfaceContext.interfaceSliders[k].name);
+			node.setAttribute("interfaceid",interfaceContext.interfaceSliders[k].id);
+			audioelements[i].appendChild(node);
+		}
+	}
 }
\ No newline at end of file