nickjillings@1341: /**
nickjillings@1341:  *  ape.js
nickjillings@1341:  *  Create the APE interface
nickjillings@1341:  */
nickjillings@1341: 
nickjillings@1341: 
nickjillings@1341: // Once this is loaded and parsed, begin execution
nickjillings@1341: loadInterface();
nickjillings@1341: 
nickjillings@1341: function loadInterface() {
nicholas@2595: 
nicholas@2595:     // Get the dimensions of the screen available to the page
nicholas@2595:     var width = window.innerWidth;
nicholas@2595:     var height = window.innerHeight;
nicholas@2595: 
nicholas@2595:     // The injection point into the HTML page
nicholas@2595:     interfaceContext.insertPoint = document.getElementById("topLevelBody");
nicholas@2595:     var testContent = document.createElement('div');
nicholas@2595: 
nicholas@2595:     testContent.id = 'testContent';
nicholas@2595: 
nicholas@2595:     // Bindings for interfaceContext
nicholas@2595:     interfaceContext.checkAllPlayed = function () {
nicholas@2595:         hasBeenPlayed = audioEngineContext.checkAllPlayed();
nicholas@2595:         if (hasBeenPlayed.length > 0) // if a fragment has not been played yet
nicholas@2595:         {
nicholas@2595:             var str = "";
nicholas@2595:             if (hasBeenPlayed.length > 1) {
nicholas@2595:                 for (var i = 0; i < hasBeenPlayed.length; i++) {
nicholas@2284:                     var ao_id = audioEngineContext.audioObjects[hasBeenPlayed[i]].interfaceDOM.getPresentedId();
nicholas@2595:                     str = str + ao_id; // start from 1
nicholas@2595:                     if (i < hasBeenPlayed.length - 2) {
nicholas@2595:                         str += ", ";
nicholas@2595:                     } else if (i == hasBeenPlayed.length - 2) {
nicholas@2595:                         str += " or ";
nicholas@2595:                     }
nicholas@2595:                 }
nicholas@2313:                 str = 'You have not played fragments ' + str + ' yet. Please listen, rate and comment all samples before submitting.';
nicholas@2595:             } else {
nicholas@2595:                 str = 'You have not played fragment ' + (audioEngineContext.audioObjects[hasBeenPlayed[0]].interfaceDOM.getPresentedId()) + ' yet. Please listen, rate and comment all samples before submitting.';
nicholas@2595:             }
nicholas@2313:             this.storeErrorNode(str);
nicholas@2595:             interfaceContext.lightbox.post("Message", str);
nicholas@2595:             return false;
nicholas@2595:         }
nicholas@2595:         return true;
nicholas@2595:     };
nicholas@2595: 
nicholas@2595:     interfaceContext.checkAllMoved = function () {
nicholas@2595:         var state = true;
nicholas@2595:         var str = 'You have not moved the following sliders. ';
nicholas@2595:         for (var i = 0; i < this.interfaceSliders.length; i++) {
nicholas@2595:             var interfaceTID = [];
nicholas@2595:             for (var j = 0; j < this.interfaceSliders[i].metrics.length; j++) {
nicholas@2285:                 var ao_id = this.interfaceSliders[i].sliders[j].getAttribute("trackIndex");
nicholas@2595:                 if (this.interfaceSliders[i].metrics[j].wasMoved == false && audioEngineContext.audioObjects[ao_id].interfaceDOM.canMove()) {
nicholas@2595:                     state = false;
nicholas@2595:                     interfaceTID.push(j);
nicholas@2595:                 }
nicholas@2595:             }
nicholas@2595:             if (interfaceTID.length != 0) {
nicholas@2595:                 var interfaceName = this.interfaceSliders[i].interfaceObject.title;
nicholas@2595:                 if (interfaceName == undefined) {
nicholas@2595:                     str += 'On axis ' + String(i + 1) + ' you must move ';
nicholas@2595:                 } else {
nicholas@2595:                     str += 'On axis "' + interfaceName + '" you must move ';
nicholas@2595:                 }
nicholas@2595:                 if (interfaceTID.length == 1) {
nicholas@2595:                     str += 'slider ' + (audioEngineContext.audioObjects[interfaceTID[0]].interfaceDOM.getPresentedId()) + '. '; // start from 1
nicholas@2595:                 } else {
nicholas@2595:                     str += 'sliders ';
nicholas@2595:                     for (var k = 0; k < interfaceTID.length - 1; k++) {
nicholas@2595:                         str += (audioEngineContext.audioObjects[interfaceTID[k]].interfaceDOM.getPresentedId()) + ', '; // start from 1
nicholas@2595:                     }
nicholas@2595:                     str += (audioEngineContext.audioObjects[interfaceTID[interfaceTID.length - 1]].interfaceDOM.getPresentedId()) + '. ';
nicholas@2595:                 }
nicholas@2595:             }
nicholas@2595:         }
nicholas@2595:         if (state != true) {
nicholas@2313:             this.storeErrorNode(str);
nicholas@2595:             interfaceContext.lightbox.post("Message", str);
nicholas@2595:             console.log(str);
nicholas@2595:         }
nicholas@2595:         return state;
nicholas@2595:     };
nicholas@2595: 
nicholas@2595:     Interface.prototype.checkAllCommented = function () {
nicholas@2595:         var audioObjs = audioEngineContext.audioObjects;
nicholas@2595:         var audioHolder = testState.stateMap[testState.stateIndex];
nicholas@2595:         var state = true;
nicholas@2595:         if (audioHolder.elementComments) {
nicholas@2595:             var strNums = [];
nicholas@2595:             for (var i = 0; i < audioObjs.length; i++) {
nicholas@2595:                 if (audioObjs[i].commentDOM.trackCommentBox.value.length == 0) {
nicholas@2595:                     state = false;
nicholas@2595:                     strNums.push(i);
nicholas@2595:                 }
nicholas@2595:             }
nicholas@2595:             if (state == false) {
nicholas@2313:                 var str = "";
nicholas@2595:                 if (strNums.length > 1) {
nicholas@2595: 
nicholas@2595:                     for (var i = 0; i < strNums.length; i++) {
nicholas@2284:                         var ao_id = audioEngineContext.audioObjects[strNums[i]].interfaceDOM.getPresentedId();
nicholas@2595:                         str = str + (ao_id); // start from 1
nicholas@2595:                         if (i < strNums.length - 2) {
nicholas@2595:                             str += ", ";
nicholas@2595:                         } else if (i == strNums.length - 2) {
nicholas@2595:                             str += " or ";
nicholas@2595:                         }
nicholas@2595:                     }
nicholas@2313:                     str = 'You have not commented on fragments ' + str + ' yet. Please listen, rate and comment all samples before submitting.';
nicholas@2595:                 } else {
nicholas@2595:                     str = 'You have not commented on fragment ' + (audioEngineContext.audioObjects[strNums[0]].interfaceDOM.getPresentedId()) + ' yet. Please listen, rate and comment all samples before submitting.';
nicholas@2595:                 }
nicholas@2313:                 this.storeErrorNode(str);
nicholas@2595:                 interfaceContext.lightbox.post("Message", str);
nicholas@2313:                 console.log(str);
nicholas@2595:             }
nicholas@2595:         }
nicholas@2595:         return state;
nicholas@2595:     };
nicholas@2595: 
nicholas@2595:     Interface.prototype.checkScaleRange = function () {
nicholas@2595:         var audioObjs = audioEngineContext.audioObjects;
nicholas@2595:         var audioHolder = testState.stateMap[testState.stateIndex];
nicholas@2595:         var state = true;
nicholas@2595:         var str = '';
nicholas@2595:         for (var i = 0; i < this.interfaceSliders.length; i++) {
nicholas@2595:             var minScale;
nicholas@2595:             var maxScale;
nicholas@2595:             var interfaceObject = interfaceContext.interfaceSliders[0].interfaceObject;
nicholas@2595:             for (var j = 0; j < interfaceObject.options.length; j++) {
nicholas@2595:                 if (interfaceObject.options[j].check == "scalerange") {
nicholas@2595:                     minScale = interfaceObject.options[j].min;
nicholas@2595:                     maxScale = interfaceObject.options[j].max;
nicholas@2595:                     break;
nicholas@2595:                 }
nicholas@2595:             }
nicholas@2595:             var minRanking = convSliderPosToRate(this.interfaceSliders[i].sliders[0]);
nicholas@2595:             var maxRanking = minRanking;
nicholas@2595:             for (var j = 1; j < this.interfaceSliders[i].sliders.length; j++) {
nicholas@2595:                 var ranking = convSliderPosToRate(this.interfaceSliders[i].sliders[j]);
nicholas@2595:                 if (ranking < minRanking) {
nicholas@2595:                     minRanking = ranking;
nicholas@2595:                 } else if (ranking > maxRanking) {
nicholas@2595:                     maxRanking = ranking;
nicholas@2595:                 }
nicholas@2595:             }
nicholas@2595:             if (minRanking > minScale || maxRanking < maxScale) {
nicholas@2595:                 state = false;
nicholas@2595:                 str += 'On axis "' + this.interfaceSliders[i].interfaceObject.title + '" you have not used the full width of the scale. ';
nicholas@2595:             }
nicholas@2595:         }
nicholas@2595:         if (state != true) {
nicholas@2313:             this.storeErrorNode(str);
nicholas@2595:             interfaceContext.lightbox.post("Message", str);
nicholas@2595:             console.log(str);
nicholas@2595:         }
nicholas@2595:         return state;
nicholas@2595:     };
nicholas@2595: 
nicholas@2595:     Interface.prototype.objectSelected = null;
nicholas@2595:     Interface.prototype.objectMoved = false;
nicholas@2595:     Interface.prototype.selectObject = function (object) {
nicholas@2595:         if (this.objectSelected == null) {
nicholas@2595:             this.objectSelected = object;
nicholas@2595:             this.objectMoved = false;
nicholas@2595:         }
nicholas@2595:     };
nicholas@2595:     Interface.prototype.moveObject = function () {
nicholas@2595:         if (this.objectMoved == false) {
nicholas@2595:             this.objectMoved = true;
nicholas@2595:         }
nicholas@2595:     };
nicholas@2595:     Interface.prototype.releaseObject = function () {
nicholas@2595:         this.objectSelected = null;
nicholas@2595:         this.objectMoved = false;
nicholas@2595:     };
nicholas@2595:     Interface.prototype.getSelectedObject = function () {
nicholas@2595:         return this.objectSelected;
nicholas@2595:     };
nicholas@2595:     Interface.prototype.hasSelectedObjectMoved = function () {
nicholas@2595:         return this.objectMoved;
nicholas@2595:     };
nicholas@2595: 
nicholas@2595:     // Bindings for slider interfaces
nicholas@2595:     Interface.prototype.interfaceSliders = [];
nicholas@2595: 
nicholas@2595:     // Bindings for audioObjects
nicholas@2595: 
nicholas@2595:     // Create the top div for the Title element
nicholas@2595:     var titleAttr = specification.title;
nicholas@2595:     var title = document.createElement('div');
nicholas@2595:     title.className = "title";
nicholas@2595:     title.align = "center";
nicholas@2595:     var titleSpan = document.createElement('span');
nicholas@2470:     titleSpan.id = "test-title";
nicholas@2595: 
nicholas@2595:     // Set title to that defined in XML, else set to default
nicholas@2595:     if (titleAttr != undefined) {
nicholas@2595:         titleSpan.textContent = titleAttr;
nicholas@2595:     } else {
nicholas@2595:         titleSpan.textContent = 'Listening test';
nicholas@2595:     }
nicholas@2595:     // Insert the titleSpan element into the title div element.
nicholas@2595:     title.appendChild(titleSpan);
nicholas@2595: 
nicholas@2595:     // Create Interface buttons!
nicholas@2595:     var interfaceButtons = document.createElement('div');
nicholas@2595:     interfaceButtons.id = 'interface-buttons';
nicholas@2595: 
nicholas@2595:     // Create playback start/stop points
nicholas@2595:     var playback = document.createElement("button");
nicholas@2595:     playback.innerHTML = 'Stop';
nicholas@2595:     playback.id = 'playback-button';
nicholas@2595:     // onclick function. Check if it is playing or not, call the correct function in the
nicholas@2595:     // audioEngine, change the button text to reflect the next state.
nicholas@2595:     playback.onclick = function () {
nicholas@2595:         if (audioEngineContext.status == 1) {
nicholas@2595:             audioEngineContext.stop();
nicholas@2595:             this.innerHTML = 'Stop';
nickjillings@1341:             var time = audioEngineContext.timer.getTestTime();
nickjillings@1341:             console.log('Stopped at ' + time); // DEBUG/SAFETY
nicholas@2595:         }
nicholas@2595:     };
nicholas@2595:     // Create Submit (save) button
nicholas@2595:     var submit = document.createElement("button");
nicholas@2595:     submit.innerHTML = 'Next';
nicholas@2595:     submit.onclick = buttonSubmitClick;
nicholas@2595:     submit.id = 'submit-button';
nicholas@2595:     // Append the interface buttons into the interfaceButtons object.
nicholas@2595:     interfaceButtons.appendChild(playback);
nicholas@2595:     interfaceButtons.appendChild(submit);
nicholas@2595: 
nicholas@2595:     var sliderHolder = document.createElement("div");
nicholas@2595:     sliderHolder.id = "slider-holder";
nicholas@2595: 
nicholas@2396:     // Create outside reference holder
nicholas@2396:     var outsideRef = document.createElement("div");
nicholas@2396:     outsideRef.id = "outside-reference-holder";
nicholas@2595: 
nicholas@2595:     // Global parent for the comment boxes on the page
nicholas@2595:     var feedbackHolder = document.createElement('div');
nicholas@2595:     feedbackHolder.id = 'feedbackHolder';
nicholas@2595: 
nicholas@2595:     testContent.style.zIndex = 1;
nicholas@2595:     interfaceContext.insertPoint.innerHTML = ""; // Clear the current schema
nicholas@2595: 
nicholas@2595:     // Inject into HTML
nicholas@2595:     testContent.appendChild(title); // Insert the title
nicholas@2595:     testContent.appendChild(interfaceButtons);
nicholas@2396:     testContent.appendChild(outsideRef);
nicholas@2595:     testContent.appendChild(sliderHolder);
nicholas@2595:     testContent.appendChild(feedbackHolder);
nicholas@2595:     interfaceContext.insertPoint.appendChild(testContent);
nickjillings@1341: 
nicholas@2595:     // Load the full interface
nicholas@2595:     testState.initialise();
nicholas@2595:     testState.advanceState();
nicholas@2595: 
nickjillings@1341: }
nickjillings@1341: 
nicholas@2595: function loadTest(audioHolderObject) {
nicholas@2595:     var width = window.innerWidth;
nicholas@2595:     var height = window.innerHeight;
nicholas@2595:     var id = audioHolderObject.id;
nicholas@2595: 
nicholas@2595:     interfaceContext.interfaceSliders = [];
nicholas@2595: 
nicholas@2595:     var feedbackHolder = document.getElementById('feedbackHolder');
nicholas@2595:     var sliderHolder = document.getElementById('slider-holder');
nicholas@2595:     feedbackHolder.innerHTML = "";
nicholas@2595:     sliderHolder.innerHTML = "";
nicholas@2595: 
nicholas@2596:     // Set labelType if default to number
nicholas@2596:     if (audioHolderObject.label == "default" || audioHolderObject.label == "") {
nicholas@2596:         audioHolderObject.label = "number";
nicholas@2596:     }
nicholas@2596: 
nicholas@2470:     // Set the page title
nicholas@2470:     if (typeof audioHolderObject.title == "string" && audioHolderObject.title.length > 0) {
nicholas@2470:         document.getElementById("test-title").textContent = audioHolderObject.title
nicholas@2470:     }
nicholas@2595: 
nicholas@2595: 
nicholas@2595:     // Delete outside reference
nicholas@2595:     document.getElementById("outside-reference-holder").innerHTML = "";
nicholas@2595: 
nicholas@2595:     var interfaceObj = audioHolderObject.interfaces;
nicholas@2595:     for (var k = 0; k < interfaceObj.length; k++) {
nicholas@2595:         // Create the div box to center align
nicholas@2595:         interfaceContext.interfaceSliders.push(new interfaceSliderHolder(interfaceObj[k]));
nicholas@2595:     }
nicholas@2595: 
nickjillings@1356:     var interfaceList = audioHolderObject.interfaces.concat(specification.interfaces);
nicholas@2595:     for (var k = 0; k < interfaceList.length; k++) {
nicholas@2595:         for (var i = 0; i < interfaceList[k].options.length; i++) {
nicholas@2595:             if (interfaceList[k].options[i].type == 'show' && interfaceList[k].options[i].name == 'playhead') {
nickjillings@1356:                 var playbackHolder = document.getElementById('playback-holder');
nicholas@2595:                 if (playbackHolder == null) {
nickjillings@1356:                     playbackHolder = document.createElement('div');
nickjillings@1356:                     playbackHolder.style.width = "100%";
nickjillings@1356:                     playbackHolder.align = 'center';
nickjillings@1356:                     playbackHolder.appendChild(interfaceContext.playhead.object);
nickjillings@1356:                     feedbackHolder.appendChild(playbackHolder);
nickjillings@1356:                 }
nicholas@2595:             } else if (interfaceList[k].options[i].type == 'show' && interfaceList[k].options[i].name == 'page-count') {
nickjillings@1356:                 var pagecountHolder = document.getElementById('page-count');
nicholas@2595:                 if (pagecountHolder == null) {
nickjillings@1356:                     pagecountHolder = document.createElement('div');
nickjillings@1356:                     pagecountHolder.id = 'page-count';
nickjillings@1356:                 }
nicholas@2595:                 pagecountHolder.innerHTML = '<span>Page ' + (testState.stateIndex + 1) + ' of ' + testState.stateMap.length + '</span>';
nickjillings@1356:                 var inject = document.getElementById('interface-buttons');
nickjillings@1356:                 inject.appendChild(pagecountHolder);
nickjillings@1356:             } else if (interfaceList[k].options[i].type == 'show' && interfaceList[k].options[i].name == 'volume') {
nicholas@2595:                 if (document.getElementById('master-volume-holder') == null) {
nickjillings@1356:                     feedbackHolder.appendChild(interfaceContext.volume.object);
nickjillings@1356:                 }
n@2407:             } else if (interfaceList[k].options[i].type == 'show' && interfaceList[k].options[i].name == 'comments') {
n@2407:                 var commentHolder = document.createElement('div');
n@2407:                 commentHolder.id = 'commentHolder';
n@2407:                 document.getElementById('testContent').appendChild(commentHolder);
nicholas@2595:                 interfaceContext.commentBoxes.showCommentBoxes(feedbackHolder, true);
n@2407:                 break;
nickjillings@1356:             }
nickjillings@1356:         }
nickjillings@1356:     }
nickjillings@1341: 
nicholas@2595:     var commentBoxPrefix = "Comment on fragment";
nicholas@2595: 
nicholas@2595:     var commentShow = audioHolderObject.elementComments;
nicholas@2595: 
nicholas@2595:     var loopPlayback = audioHolderObject.loop;
nicholas@2595: 
nicholas@2595:     currentTestHolder = document.createElement('audioHolder');
nicholas@2595:     currentTestHolder.id = audioHolderObject.id;
nicholas@2595:     currentTestHolder.repeatCount = audioHolderObject.repeatCount;
nicholas@2595: 
nicholas@2595:     // Find all the audioElements from the audioHolder
nicholas@2595:     $(audioHolderObject.audioElements).each(function (index, element) {
nicholas@2595:         // Find URL of track
nicholas@2595:         // In this jQuery loop, variable 'this' holds the current audioElement.
nicholas@2595:         var audioObject = audioEngineContext.newTrack(element);
nicholas@2595:         // Check if an outside reference
nicholas@2595:         if (element.type == 'outside-reference') {
nicholas@2595:             // Construct outside reference;
nicholas@2595:             var orNode = new outsideReferenceDOM(audioObject, index, document.getElementById("outside-reference-holder"));
nicholas@2595:             audioObject.bindInterface(orNode);
nicholas@2595:         } else {
nicholas@2595:             // Create a slider per track
nicholas@2595:             var sliderNode = new sliderObject(audioObject, interfaceObj, index);
nicholas@2595:             audioObject.bindInterface(sliderNode);
nickjillings@2117:             interfaceContext.commentBoxes.createCommentBox(audioObject);
nicholas@2595:         }
nicholas@2595:     });
nicholas@2595: 
nicholas@2595:     // Initialse the interfaceSlider object metrics
nicholas@2595: 
nicholas@2595:     $('.track-slider').mousedown(function (event) {
nicholas@2595:         interfaceContext.selectObject($(this)[0]);
nicholas@2595:     });
nicholas@2595:     $('.track-slider').on('touchstart', null, function (event) {
nicholas@2595:         interfaceContext.selectObject($(this)[0]);
nicholas@2595:     });
nicholas@2595: 
nicholas@2595:     $('.track-slider').mousemove(function (event) {
nicholas@2595:         event.preventDefault();
nicholas@2595:     });
nicholas@2595: 
nicholas@2595:     $('.slider').mousemove(function (event) {
nicholas@2595:         event.preventDefault();
nicholas@2595:         var obj = interfaceContext.getSelectedObject();
nicholas@2595:         if (obj == null) {
nicholas@2595:             return;
nicholas@2595:         }
nicholas@2595:         var move = event.clientX - 6;
nicholas@2459:         var w = $(event.currentTarget).width();
nicholas@2595:         move = Math.max(50, move);
nicholas@2595:         move = Math.min(w + 50, move);
nicholas@2595:         $(obj).css("left", move + "px");
nicholas@2595:         interfaceContext.moveObject();
nicholas@2595:     });
nicholas@2595: 
nicholas@2595:     $('.slider').on('touchmove', null, function (event) {
nicholas@2595:         event.preventDefault();
nicholas@2595:         var obj = interfaceContext.getSelectedObject();
nicholas@2595:         if (obj == null) {
nicholas@2595:             return;
nicholas@2595:         }
nicholas@2595:         var move = event.originalEvent.targetTouches[0].clientX - 6;
nicholas@2459:         var w = $(event.currentTarget).width();
nicholas@2595:         move = Math.max(50, move);
nicholas@2595:         move = Math.min(w + 50, move);
nicholas@2595:         $(obj).css("left", move + "px");
nicholas@2595:         interfaceContext.moveObject();
nicholas@2595:     });
nickjillings@1341: 
nicholas@2595:     $(document).mouseup(function (event) {
nicholas@2595:         event.preventDefault();
nicholas@2595:         var obj = interfaceContext.getSelectedObject();
nicholas@2595:         if (obj == null) {
nicholas@2595:             return;
nicholas@2595:         }
nicholas@2595:         var interfaceID = obj.parentElement.getAttribute("interfaceid");
nicholas@2595:         var trackID = obj.getAttribute("trackindex");
nicholas@2595:         if (interfaceContext.hasSelectedObjectMoved() == true) {
nicholas@2595:             var l = $(obj).css("left");
nicholas@2595:             var id = obj.getAttribute('trackIndex');
nicholas@2595:             var time = audioEngineContext.timer.getTestTime();
nicholas@2595:             var rate = convSliderPosToRate(obj);
nicholas@2595:             audioEngineContext.audioObjects[id].metric.moved(time, rate);
nicholas@2595:             interfaceContext.interfaceSliders[interfaceID].metrics[trackID].moved(time, rate);
nicholas@2595:             console.log("slider " + id + " moved to " + rate + ' (' + time + ')');
nicholas@2595:             obj.setAttribute("slider-value", convSliderPosToRate(obj));
nicholas@2595:         } else {
nicholas@2595:             var id = Number(obj.attributes['trackIndex'].value);
nicholas@2595:             //audioEngineContext.metric.sliderPlayed(id);
nicholas@2595:             audioEngineContext.play(id);
nicholas@2595:         }
nicholas@2595:         interfaceContext.releaseObject();
nicholas@2595:     });
nicholas@2595: 
nicholas@2595:     $('.slider').on('touchend', null, function (event) {
nicholas@2595:         var obj = interfaceContext.getSelectedObject();
nicholas@2595:         if (obj == null) {
nicholas@2595:             return;
nicholas@2595:         }
nicholas@2595:         var interfaceID = obj.parentElement.getAttribute("interfaceid");
nicholas@2595:         var trackID = obj.getAttribute("trackindex");
nicholas@2595:         if (interfaceContext.hasSelectedObjectMoved() == true) {
nicholas@2595:             var l = $(obj).css("left");
nicholas@2595:             var id = obj.getAttribute('trackIndex');
nicholas@2595:             var time = audioEngineContext.timer.getTestTime();
nicholas@2595:             var rate = convSliderPosToRate(obj);
nicholas@2595:             audioEngineContext.audioObjects[id].metric.moved(time, rate);
nicholas@2595:             interfaceContext.interfaceSliders[interfaceID].metrics[trackID].moved(time, rate);
nicholas@2595:             console.log("slider " + id + " moved to " + rate + ' (' + time + ')');
nicholas@2595:         }
nicholas@2595:         interfaceContext.releaseObject();
nicholas@2595:     });
nicholas@2595: 
n@2407:     var interfaceList = audioHolderObject.interfaces.concat(specification.interfaces);
nicholas@2595:     for (var k = 0; k < interfaceList.length; k++) {
nicholas@2595:         for (var i = 0; i < interfaceList[k].options.length; i++) {
nicholas@2595:             if (interfaceList[k].options[i].type == 'show' && interfaceList[k].options[i].name == 'playhead') {
n@2407:                 var playbackHolder = document.getElementById('playback-holder');
nicholas@2595:                 if (playbackHolder == null) {
n@2407:                     playbackHolder = document.createElement('div');
n@2407:                     playbackHolder.id = "playback-holder";
n@2407:                     playbackHolder.style.width = "100%";
n@2407:                     playbackHolder.align = 'center';
n@2407:                     playbackHolder.appendChild(interfaceContext.playhead.object);
n@2407:                     feedbackHolder.appendChild(playbackHolder);
n@2407:                 }
nicholas@2595:             } else if (interfaceList[k].options[i].type == 'show' && interfaceList[k].options[i].name == 'page-count') {
n@2407:                 var pagecountHolder = document.getElementById('page-count');
nicholas@2595:                 if (pagecountHolder == null) {
n@2407:                     pagecountHolder = document.createElement('div');
n@2407:                     pagecountHolder.id = 'page-count';
n@2407:                 }
nicholas@2595:                 pagecountHolder.innerHTML = '<span>Page ' + (testState.stateIndex + 1) + ' of ' + testState.stateMap.length + '</span>';
n@2407:                 var inject = document.getElementById('interface-buttons');
n@2407:                 inject.appendChild(pagecountHolder);
n@2407:             } else if (interfaceList[k].options[i].type == 'show' && interfaceList[k].options[i].name == 'volume') {
nicholas@2595:                 if (document.getElementById('master-volume-holder') == null) {
n@2407:                     feedbackHolder.appendChild(interfaceContext.volume.object);
n@2407:                 }
n@2407:             } else if (interfaceList[k].options[i].type == 'show' && interfaceList[k].options[i].name == 'comments') {
nicholas@2595:                 interfaceContext.commentBoxes.showCommentBoxes(feedbackHolder, true);
n@2407:                 break;
n@2407:             }
n@2407:         }
n@2407:     }
nicholas@2595: 
nicholas@2595:     $(audioHolderObject.commentQuestions).each(function (index, element) {
nicholas@2595:         var node = interfaceContext.createCommentQuestion(element);
nicholas@2595:         feedbackHolder.appendChild(node.holder);
nicholas@2595:     });
nicholas@2595: 
nicholas@2595:     //testWaitIndicator();
nickjillings@1341: }
nickjillings@1341: 
nicholas@2595: function interfaceSliderHolder(interfaceObject) {
nicholas@2595:     this.sliders = [];
nicholas@2595:     this.metrics = [];
nicholas@2595:     this.id = document.getElementsByClassName("sliderCanvasDiv").length;
nicholas@2595:     this.name = interfaceObject.name;
nicholas@2595:     this.interfaceObject = interfaceObject;
nicholas@2595:     this.sliderDOM = document.createElement('div');
nicholas@2595:     this.sliderDOM.className = 'sliderCanvasDiv';
nicholas@2595:     this.sliderDOM.id = 'sliderCanvasHolder-' + this.id;
nicholas@2595: 
nicholas@2595:     var pagetitle = document.createElement('div');
nicholas@2595:     pagetitle.className = "pageTitle";
nicholas@2595:     pagetitle.align = "center";
nicholas@2595:     var titleSpan = document.createElement('span');
nicholas@2595:     titleSpan.id = "pageTitle-" + this.id;
nicholas@2595:     if (interfaceObject.title != undefined && typeof interfaceObject.title == "string") {
nicholas@2595:         titleSpan.textContent = interfaceObject.title;
nicholas@2595:     } else {
nicholas@2595:         titleSpan.textContent = "Axis " + String(this.id + 1);
nicholas@2595:     }
nicholas@2595:     pagetitle.appendChild(titleSpan);
nicholas@2595:     this.sliderDOM.appendChild(pagetitle);
nicholas@2595: 
nicholas@2595:     // Create the slider box to hold the slider elements
nicholas@2595:     this.canvas = document.createElement('div');
nicholas@2595:     if (this.name != undefined)
nicholas@2595:         this.canvas.id = 'slider-' + this.name;
nicholas@2595:     else
nicholas@2595:         this.canvas.id = 'slider-' + this.id;
nicholas@2595:     this.canvas.setAttribute("interfaceid", this.id);
nicholas@2595:     this.canvas.className = 'slider';
nicholas@2595:     this.canvas.align = "left";
nicholas@2595:     this.canvas.addEventListener('dragover', function (event) {
nicholas@2595:         event.preventDefault();
nicholas@2595:         event.dataTransfer.effectAllowed = 'none';
nicholas@2595:         event.dataTransfer.dropEffect = 'copy';
nicholas@2595:         return false;
nicholas@2595:     }, false);
nicholas@2595:     this.sliderDOM.appendChild(this.canvas);
nicholas@2595: 
nicholas@2595:     // Create the div to hold any scale objects
nicholas@2595:     this.scale = document.createElement('div');
nicholas@2595:     this.scale.className = 'sliderScale';
nicholas@2595:     this.scale.id = 'sliderScaleHolder-' + this.id;
nicholas@2595:     this.scale.align = 'left';
nicholas@2595:     this.sliderDOM.appendChild(this.scale);
nicholas@2595:     var positionScale = this.canvas.style.width.substr(0, this.canvas.style.width.length - 2);
nicholas@2595:     var offset = 50;
nickjillings@1317:     var dest = document.getElementById("slider-holder").appendChild(this.sliderDOM);
nicholas@2595:     for (var scaleObj of interfaceObject.scales) {
nicholas@2595:         var position = Number(scaleObj.position) * 0.01;
nicholas@2595:         var pixelPosition = (position * $(this.canvas).width()) + offset;
nicholas@2595:         var scaleDOM = document.createElement('span');
nicholas@2391:         scaleDOM.className = "ape-marker-text";
nicholas@2595:         scaleDOM.textContent = scaleObj.text;
nicholas@2595:         scaleDOM.setAttribute('value', position)
nicholas@2595:         this.scale.appendChild(scaleDOM);
nicholas@2595:         scaleDOM.style.left = Math.floor((pixelPosition - ($(scaleDOM).width() / 2))) + 'px';
nicholas@2595:     }
nicholas@2595: 
nicholas@2595:     this.createSliderObject = function (audioObject, label) {
nicholas@2595:         var trackObj = document.createElement('div');
nickjillings@1317:         trackObj.align = "center";
nicholas@2595:         trackObj.className = 'track-slider track-slider-disabled track-slider-' + audioObject.id;
nicholas@2595:         trackObj.id = 'track-slider-' + this.id + '-' + audioObject.id;
nicholas@2595:         trackObj.setAttribute('trackIndex', audioObject.id);
nicholas@2595:         if (this.name != undefined) {
nicholas@2595:             trackObj.setAttribute('interface-name', this.name);
nicholas@2595:         } else {
nicholas@2595:             trackObj.setAttribute('interface-name', this.id);
nicholas@2595:         }
nicholas@2595:         var offset = 50;
nicholas@2595:         // Distribute it randomnly
nicholas@2595:         var w = window.innerWidth - (offset + 8) * 2;
nicholas@2595:         w = Math.random() * w;
nicholas@2595:         w = Math.floor(w + (offset + 8));
nicholas@2595:         trackObj.style.left = w + 'px';
nicholas@2595:         this.canvas.appendChild(trackObj);
nicholas@2595:         this.sliders.push(trackObj);
nicholas@2595:         this.metrics.push(new metricTracker(this));
nicholas@2595:         var labelHolder = document.createElement("span");
nickjillings@2168:         labelHolder.textContent = label;
nickjillings@2168:         trackObj.appendChild(labelHolder);
nicholas@2391:         var rate = convSliderPosToRate(trackObj);
nicholas@2595:         this.metrics[this.metrics.length - 1].initialise(rate);
nicholas@2595:         trackObj.setAttribute("slider-value", rate);
nicholas@2595:         return trackObj;
nicholas@2595:     };
nicholas@2595: 
nicholas@2595:     this.resize = function (event) {
nicholas@2595:         var width = window.innerWidth;
nicholas@2595:         var sliderDiv = this.canvas;
nicholas@2595:         var sliderScaleDiv = this.scale;
nicholas@2595:         var width = $(sliderDiv).width();
nicholas@2391:         var marginsize = 50;
nicholas@2595:         // Move sliders into new position
nicholas@2595:         for (var index = 0; index < this.sliders.length; index++) {
nicholas@2595:             var pix = Number(this.sliders[index].getAttribute("slider-value")) * width;
nicholas@2595:             this.sliders[index].style.left = (pix + marginsize) + 'px';
nicholas@2595:         }
nicholas@2595: 
nicholas@2595:         // Move scale labels
nicholas@2595:         for (var index = 0; index < this.scale.children.length; index++) {
nicholas@2595:             var scaleObj = this.scale.children[index];
nicholas@2595:             var position = Number(scaleObj.attributes['value'].value);
nicholas@2595:             var pixelPosition = (position * width) + marginsize;
nicholas@2595:             scaleObj.style.left = Math.floor((pixelPosition - ($(scaleObj).width() / 2))) + 'px';
nicholas@2595:         }
nicholas@2595:     };
nickjillings@1341: }
nickjillings@1341: 
nicholas@2595: function sliderObject(audioObject, interfaceObjects, index) {
nicholas@2595:     // Create a new slider object;
nicholas@2595:     this.parent = audioObject;
nicholas@2595:     this.trackSliderObjects = [];
nicholas@2596:     this.label = interfaceContext.getLabel(audioObject.specification.parent.label, index, audioObject.specification.parent.labelStart);
n@2428:     this.playing = false;
nicholas@2595:     for (var i = 0; i < interfaceContext.interfaceSliders.length; i++) {
nicholas@2595:         var trackObj = interfaceContext.interfaceSliders[i].createSliderObject(audioObject, this.label);
nicholas@2595:         this.trackSliderObjects.push(trackObj);
nicholas@2595:     }
nickjillings@1341: 
nicholas@2595:     // Onclick, switch playback to that track
nicholas@2595: 
nicholas@2595:     this.enable = function () {
nicholas@2595:         if (this.parent.state == 1) {
nicholas@2595:             $(this.trackSliderObjects).each(function (i, trackObj) {
nicholas@2595:                 $(trackObj).removeClass('track-slider-disabled');
nicholas@2595:             });
nicholas@2595:         }
nicholas@2595:     };
nicholas@2595:     this.updateLoading = function (progress) {
nicholas@2595:         if (progress != 100) {
nicholas@2595:             progress = String(progress);
nicholas@2595:             progress = progress.split('.')[0];
nicholas@2595:             this.trackSliderObjects[0].children[0].textContent = progress + '%';
nicholas@2595:         } else {
nicholas@2595:             this.trackSliderObjects[0].children[0].textContent = this.label;
nicholas@2595:         }
nicholas@2595:     };
nicholas@2595:     this.startPlayback = function () {
nickjillings@1360:         $('.track-slider').removeClass('track-slider-playing');
nicholas@2595:         var name = ".track-slider-" + this.parent.id;
nickjillings@1360:         $(name).addClass('track-slider-playing');
nickjillings@1360:         $('.comment-div').removeClass('comment-box-playing');
nicholas@2595:         $('#comment-div-' + this.parent.id).addClass('comment-box-playing');
n@2428:         $('.outside-reference').removeClass('track-slider-playing');
n@2428:         this.playing = true;
nicholas@2595: 
n@2428:         if (this.parent.specification.parent.playOne || specification.playOne) {
n@2428:             $('.track-slider').addClass('track-slider-disabled');
n@2428:             $('.outside-reference').addClass('track-slider-disabled');
n@2428:         }
nickjillings@1360:     };
nicholas@2595:     this.stopPlayback = function () {
n@2428:         if (this.playing) {
n@2428:             this.playing = false;
nicholas@2595:             var name = ".track-slider-" + this.parent.id;
n@2428:             $(name).removeClass('track-slider-playing');
nicholas@2595:             $('#comment-div-' + this.parent.id).removeClass('comment-box-playing');
n@2428:             $('.track-slider').removeClass('track-slider-disabled');
n@2428:             $('.outside-reference').removeClass('track-slider-disabled');
n@2428:         }
nickjillings@1360:     };
nicholas@2595:     this.exportXMLDOM = function (audioObject) {
nicholas@2595:         // Called by the audioObject holding this element. Must be present
nicholas@2595:         var obj = [];
nicholas@2595:         $(this.trackSliderObjects).each(function (i, trackObj) {
nicholas@2595:             var node = storage.document.createElement('value');
nicholas@2595:             node.setAttribute("interface-name", trackObj.getAttribute("interface-name"));
nicholas@2595:             node.textContent = convSliderPosToRate(trackObj);
nicholas@2595:             obj.push(node);
nicholas@2595:         });
nicholas@2595: 
nicholas@2595:         return obj;
nicholas@2595:     };
nicholas@2595:     this.getValue = function () {
nicholas@2595:         return convSliderPosToRate(this.trackSliderObjects[0]);
nicholas@2595:     };
nicholas@2595:     this.getPresentedId = function () {
nicholas@2595:         return this.label;
nicholas@2595:     };
nicholas@2595:     this.canMove = function () {
nicholas@2595:         return true;
nicholas@2595:     };
nicholas@2595:     this.error = function () {
nicholas@2595:         // audioObject has an error!!
nickjillings@2113:         this.playback.textContent = "Error";
nickjillings@2113:         $(this.playback).addClass("error-colour");
nickjillings@2113:     }
nickjillings@1341: }
nickjillings@1341: 
nicholas@2595: function outsideReferenceDOM(audioObject, index, inject) {
nicholas@2595:     this.parent = audioObject;
nicholas@2595:     this.outsideReferenceHolder = document.createElement('div');
nicholas@2595:     this.outsideReferenceHolder.id = 'outside-reference';
nicholas@2595:     this.outsideReferenceHolder.className = 'outside-reference track-slider-disabled';
nicholas@2595:     var outsideReferenceHolderspan = document.createElement('span');
nicholas@2595:     outsideReferenceHolderspan.textContent = 'Reference';
nicholas@2595:     this.outsideReferenceHolder.appendChild(outsideReferenceHolderspan);
nicholas@2595:     this.outsideReferenceHolder.setAttribute('track-id', index);
nicholas@2595: 
nicholas@2595:     this.outsideReferenceHolder.onclick = function (event) {
nicholas@2595:         audioEngineContext.play(event.currentTarget.getAttribute('track-id'));
nicholas@2595:         $('.track-slider').removeClass('track-slider-playing');
nickjillings@1341:         $('.comment-div').removeClass('comment-box-playing');
nickjillings@1341:         if (event.currentTarget.nodeName == 'DIV') {
nicholas@2595:             $(event.currentTarget).addClass('track-slider-playing');
nickjillings@1341:         } else {
nicholas@2595:             $(event.currentTarget.parentElement).addClass('track-slider-playing');
nickjillings@1341:         }
nicholas@2595:     };
nicholas@2595:     inject.appendChild(this.outsideReferenceHolder);
nicholas@2595:     this.enable = function () {
nicholas@2595:         if (this.parent.state == 1) {
nicholas@2595:             $(this.outsideReferenceHolder).removeClass('track-slider-disabled');
nicholas@2595:         }
nicholas@2595:     };
nicholas@2595:     this.updateLoading = function (progress) {
nicholas@2595:         if (progress != 100) {
nicholas@2595:             progress = String(progress);
nicholas@2595:             progress = progress.split('.')[0];
nicholas@2595:             this.outsideReferenceHolder.firstChild.textContent = progress + '%';
nicholas@2595:         } else {
nicholas@2595:             this.outsideReferenceHolder.firstChild.textContent = "Play Reference";
nicholas@2595:         }
nicholas@2595:     };
nicholas@2595:     this.startPlayback = function () {
nickjillings@1360:         $('.track-slider').removeClass('track-slider-playing');
nickjillings@1360:         $(this.outsideReferenceHolder).addClass('track-slider-playing');
nickjillings@1360:         $('.comment-div').removeClass('comment-box-playing');
nickjillings@1360:     };
nicholas@2595:     this.stopPlayback = function () {
nickjillings@1360:         $(this.outsideReferenceHolder).removeClass('track-slider-playing');
nickjillings@1360:     };
nicholas@2595:     this.exportXMLDOM = function (audioObject) {
nicholas@2595:         return null;
nicholas@2595:     };
nicholas@2595:     this.getValue = function () {
nicholas@2595:         return 0;
nicholas@2595:     };
nicholas@2595:     this.getPresentedId = function () {
nicholas@2595:         return 'reference';
nicholas@2595:     };
nicholas@2595:     this.canMove = function () {
nicholas@2595:         return false;
nicholas@2595:     };
nicholas@2595:     this.error = function () {
nicholas@2595:         // audioObject has an error!!
nickjillings@2113:         this.outsideReferenceHolder.textContent = "Error";
nickjillings@2113:         $(this.outsideReferenceHolder).addClass("error-colour");
nickjillings@2113:     }
nickjillings@1341: }
nickjillings@1341: 
nicholas@2595: function buttonSubmitClick() {
nicholas@2595:     var checks = [];
nicholas@2595:     checks = checks.concat(testState.currentStateMap.interfaces[0].options);
nicholas@2595:     checks = checks.concat(specification.interfaces.options);
nicholas@2595:     var canContinue = true;
nickjillings@1341: 
nicholas@2595:     // Check that the anchor and reference objects are correctly placed
nicholas@2595:     if (interfaceContext.checkHiddenAnchor() == false) {
nicholas@2595:         return;
nicholas@2595:     }
nicholas@2595:     if (interfaceContext.checkHiddenReference() == false) {
nicholas@2595:         return;
nicholas@2595:     }
nicholas@2595: 
nicholas@2595:     for (var i = 0; i < checks.length; i++) {
nicholas@2595:         if (checks[i].type == 'check') {
nicholas@2595:             switch (checks[i].name) {
nicholas@2595:                 case 'fragmentPlayed':
nicholas@2595:                     // Check if all fragments have been played
nicholas@2595:                     var checkState = interfaceContext.checkAllPlayed();
nicholas@2595:                     if (checkState == false) {
nicholas@2595:                         canContinue = false;
nicholas@2595:                     }
nicholas@2595:                     break;
nicholas@2595:                 case 'fragmentFullPlayback':
nicholas@2595:                     // Check all fragments have been played to their full length
nicholas@2595:                     var checkState = interfaceContext.checkFragmentsFullyPlayed();
nicholas@2595:                     if (checkState == false) {
nicholas@2595:                         canContinue = false;
nicholas@2595:                     }
nicholas@2595:                     break;
nicholas@2595:                 case 'fragmentMoved':
nicholas@2595:                     // Check all fragment sliders have been moved.
nicholas@2595:                     var checkState = interfaceContext.checkAllMoved();
nicholas@2595:                     if (checkState == false) {
nicholas@2595:                         canContinue = false;
nicholas@2595:                     }
nicholas@2595:                     break;
nicholas@2595:                 case 'fragmentComments':
nicholas@2595:                     // Check all fragment sliders have been moved.
nicholas@2595:                     var checkState = interfaceContext.checkAllCommented();
nicholas@2595:                     if (checkState == false) {
nicholas@2595:                         canContinue = false;
nicholas@2595:                     }
nicholas@2595:                     break;
nicholas@2595:                 case 'scalerange':
nicholas@2595:                     // Check the scale is used to its full width outlined by the node
nicholas@2595:                     var checkState = interfaceContext.checkScaleRange();
nicholas@2595:                     if (checkState == false) {
nicholas@2595:                         canContinue = false;
nicholas@2595:                     }
nicholas@2595:                     break;
nicholas@2595:                 default:
nicholas@2595:                     console.log("WARNING - Check option " + checks[i].name + " is not supported on this interface");
nicholas@2595:                     break;
nicholas@2595:             }
nicholas@2595: 
nicholas@2595:         }
nicholas@2595:         if (!canContinue) {
nicholas@2595:             break;
nicholas@2595:         }
nicholas@2595:     }
nicholas@2595: 
nickjillings@1341:     if (canContinue) {
nicholas@2595:         if (audioEngineContext.status == 1) {
nicholas@2595:             var playback = document.getElementById('playback-button');
nicholas@2595:             playback.click();
nicholas@2595:             // This function is called when the submit button is clicked. Will check for any further tests to perform, or any post-test options
nicholas@2595:         } else {
nicholas@2595:             if (audioEngineContext.timer.testStarted == false) {
nicholas@2595:                 interfaceContext.lightbox.post("Warning", 'You have not started the test! Please click a fragment to begin the test!');
nicholas@2595:                 return;
nicholas@2595:             }
nicholas@2595:         }
nicholas@2595:         testState.advanceState();
nicholas@2595:     }
nickjillings@1341: }
nickjillings@1341: 
nicholas@2595: function convSliderPosToRate(trackSlider) {
nicholas@2595:     var slider = trackSlider.parentElement;
nicholas@2595:     var maxPix = $(slider).width();
nicholas@2595:     var marginsize = 50;
nicholas@2595:     var pix = trackSlider.style.left;
nicholas@2595:     pix = pix.substr(0, pix.length - 2);
nicholas@2595:     var rate = (pix - marginsize) / maxPix;
nicholas@2595:     return rate;
nickjillings@1341: }
nickjillings@1341: 
nicholas@2595: function resizeWindow(event) {
nicholas@2595:     // Function called when the window has been resized.
nicholas@2595:     // MANDATORY FUNCTION
nicholas@2595: 
nicholas@2595:     // Resize the slider objects
nicholas@2595:     for (var i = 0; i < interfaceContext.interfaceSliders.length; i++) {
nicholas@2595:         interfaceContext.interfaceSliders[i].resize(event);
nicholas@2595:     }
nickjillings@1341: }
nickjillings@1341: 
nicholas@2595: function pageXMLSave(store, pageSpecification) {
nicholas@2595:     // MANDATORY
nicholas@2595:     // Saves a specific test page
nicholas@2595:     // You can use this space to add any extra nodes to your XML <audioHolder> saves
nicholas@2595:     // Get the current <page> information in store (remember to appendChild your data to it)
nicholas@2595:     // pageSpecification is the current page node configuration
nicholas@2595:     // To create new XML nodes, use storage.document.createElement();
nicholas@2595: 
nicholas@2595:     if (interfaceContext.interfaceSliders.length == 1) {
nicholas@2595:         // If there is only one axis, there only needs to be one metric return
nicholas@2595:         return;
nicholas@2595:     }
nicholas@2595:     var audioelements = store.getElementsByTagName("audioelement");
nicholas@2595:     for (var i = 0; i < audioelements.length; i++) {
nicholas@2595:         // Have to append the metric specific nodes
nicholas@2595:         if (pageSpecification.outsideReference == null || pageSpecification.outsideReference.id != audioelements[i].id) {
nicholas@2595:             var inject = audioelements[i].getElementsByTagName("metric");
nicholas@2595:             if (inject.length == 0) {
nicholas@2595:                 inject = storage.document.createElement("metric");
nicholas@2595:             } else {
nicholas@2595:                 inject = inject[0];
nicholas@2595:             }
nicholas@2595:             for (var k = 0; k < interfaceContext.interfaceSliders.length; k++) {
nicholas@2595:                 var mrnodes = interfaceContext.interfaceSliders[k].metrics[i].exportXMLDOM(inject);
nicholas@2595:                 for (var j = 0; j < mrnodes.length; j++) {
nicholas@2595:                     var name = mrnodes[j].getAttribute("name");
nicholas@2595:                     if (name == "elementTracker" || name == "elementTrackerFull" || name == "elementInitialPosition" || name == "elementFlagMoved") {
nicholas@2595:                         mrnodes[j].setAttribute("interface-name", interfaceContext.interfaceSliders[k].name);
nicholas@2595:                         mrnodes[j].setAttribute("interface-id", k);
nicholas@2595:                         inject.appendChild(mrnodes[j]);
nicholas@2595:                     }
nicholas@2595:                 }
nicholas@2595:             }
nicholas@2595:         }
nicholas@2595:     }
nicholas@2595: }