nickjillings@1341: /**
nickjillings@1341:  *  ape.js
nickjillings@1341:  *  Create the APE interface
nickjillings@1341:  */
nickjillings@1341: 
nicholas@2696: /*globals window,interfaceContext, document, audioEngineContext, console, $, Interface, testState, storage, specification */
n@3094: /*globals metricTracker, module, randomiseOrder */
nickjillings@1341: // Once this is loaded and parsed, begin execution
nickjillings@1341: loadInterface();
nickjillings@1341: 
nickjillings@1341: function loadInterface() {
nicholas@2538: 
nicholas@2538:     // Get the dimensions of the screen available to the page
nicholas@2538:     var width = window.innerWidth;
nicholas@2538:     var height = window.innerHeight;
nicholas@2538: 
nicholas@2538:     // The injection point into the HTML page
nicholas@2538:     interfaceContext.insertPoint = document.getElementById("topLevelBody");
nicholas@2538:     var testContent = document.createElement('div');
nicholas@2538: 
nicholas@2538:     testContent.id = 'testContent';
nicholas@2538: 
nicholas@2538:     // Bindings for interfaceContext
nicholas@2538: 
nicholas@2538:     interfaceContext.checkAllMoved = function () {
n@3011:         return module.checkAllMoved();
nicholas@2538:     };
nicholas@2703: 
nicholas@2698:     interfaceContext.checkScaleRange = function () {
n@3011:         return module.checkScaleRange();
nicholas@2538:     };
nicholas@2538: 
nicholas@2538:     // Bindings for audioObjects
nicholas@2538: 
nicholas@2538:     // Create the top div for the Title element
nicholas@2538:     var titleAttr = specification.title;
nicholas@2538:     var title = document.createElement('div');
nicholas@2538:     title.className = "title";
nicholas@2538:     title.align = "center";
nicholas@2538:     var titleSpan = document.createElement('span');
nicholas@2470:     titleSpan.id = "test-title";
nicholas@2538: 
nicholas@2538:     // Set title to that defined in XML, else set to default
nicholas@2696:     if (titleAttr !== undefined) {
nicholas@2538:         titleSpan.textContent = titleAttr;
nicholas@2538:     } else {
nicholas@2538:         titleSpan.textContent = 'Listening test';
nicholas@2538:     }
nicholas@2538:     // Insert the titleSpan element into the title div element.
nicholas@2538:     title.appendChild(titleSpan);
nicholas@2538: 
nicholas@2538:     // Create Interface buttons!
nicholas@2538:     var interfaceButtons = document.createElement('div');
nicholas@2538:     interfaceButtons.id = 'interface-buttons';
nicholas@2538: 
nicholas@2538:     // Create playback start/stop points
nicholas@2538:     var playback = document.createElement("button");
nicholas@2538:     playback.innerHTML = 'Stop';
nicholas@2538:     playback.id = 'playback-button';
nicholas@2538:     // onclick function. Check if it is playing or not, call the correct function in the
nicholas@2538:     // audioEngine, change the button text to reflect the next state.
nicholas@2538:     playback.onclick = function () {
nicholas@2538:         if (audioEngineContext.status == 1) {
nicholas@2538:             audioEngineContext.stop();
nicholas@2538:             this.innerHTML = 'Stop';
nickjillings@1341:             var time = audioEngineContext.timer.getTestTime();
nickjillings@1341:             console.log('Stopped at ' + time); // DEBUG/SAFETY
nicholas@2538:         }
nicholas@2538:     };
nicholas@2538:     // Create Submit (save) button
nicholas@2538:     var submit = document.createElement("button");
nicholas@2538:     submit.innerHTML = 'Next';
nicholas@2538:     submit.onclick = buttonSubmitClick;
nicholas@2538:     submit.id = 'submit-button';
nicholas@2538:     // Append the interface buttons into the interfaceButtons object.
nicholas@2538:     interfaceButtons.appendChild(playback);
nicholas@2538:     interfaceButtons.appendChild(submit);
nicholas@2538: 
nicholas@2538:     var sliderHolder = document.createElement("div");
nicholas@2538:     sliderHolder.id = "slider-holder";
nicholas@2538: 
nicholas@2396:     // Create outside reference holder
nicholas@2396:     var outsideRef = document.createElement("div");
nicholas@2396:     outsideRef.id = "outside-reference-holder";
nicholas@2538: 
nicholas@2538:     // Global parent for the comment boxes on the page
nicholas@2538:     var feedbackHolder = document.createElement('div');
nicholas@2538:     feedbackHolder.id = 'feedbackHolder';
nicholas@2538: 
nicholas@2538:     testContent.style.zIndex = 1;
nicholas@2538:     interfaceContext.insertPoint.innerHTML = ""; // Clear the current schema
nicholas@2538: 
nicholas@2538:     // Inject into HTML
nicholas@2538:     testContent.appendChild(title); // Insert the title
nicholas@2538:     testContent.appendChild(interfaceButtons);
nicholas@2396:     testContent.appendChild(outsideRef);
nicholas@2538:     testContent.appendChild(sliderHolder);
nicholas@2538:     testContent.appendChild(feedbackHolder);
nicholas@2538:     interfaceContext.insertPoint.appendChild(testContent);
nickjillings@1341: 
nicholas@2538:     // Load the full interface
n@3010:     window.module = new ape();
nicholas@2538:     testState.initialise();
nicholas@2538:     testState.advanceState();
nickjillings@1341: }
nickjillings@1341: 
nicholas@2538: function loadTest(audioHolderObject) {
n@3010:     module.clear();
nicholas@2538:     var width = window.innerWidth;
nicholas@2538:     var height = window.innerHeight;
nicholas@2538:     var id = audioHolderObject.id;
nicholas@2538: 
nicholas@2538:     interfaceContext.interfaceSliders = [];
nicholas@2538: 
nicholas@2538:     var feedbackHolder = document.getElementById('feedbackHolder');
nicholas@2538:     var sliderHolder = document.getElementById('slider-holder');
nicholas@2538:     feedbackHolder.innerHTML = "";
nicholas@2538:     sliderHolder.innerHTML = "";
nicholas@2538: 
nicholas@2596:     // Set labelType if default to number
nicholas@2696:     if (audioHolderObject.label === "default" || audioHolderObject.label === "") {
nicholas@2596:         audioHolderObject.label = "number";
nicholas@2596:     }
nicholas@2470:     // Set the page title
nicholas@2470:     if (typeof audioHolderObject.title == "string" && audioHolderObject.title.length > 0) {
nicholas@2696:         document.getElementById("test-title").textContent = audioHolderObject.title;
nicholas@2470:     }
nicholas@2538: 
nicholas@2538:     // Delete outside reference
nicholas@2538:     document.getElementById("outside-reference-holder").innerHTML = "";
nicholas@2538: 
nicholas@2651:     var interfaceObj = interfaceContext.getCombinedInterfaces(audioHolderObject);
nicholas@2651:     interfaceObj.forEach(function (interface) {
nicholas@2696:         interface.options.forEach(function (option) {
nicholas@2651:             if (option.type == "show") {
nicholas@2651:                 switch (option.name) {
nicholas@2651:                     case "playhead":
nicholas@2651:                         var playbackHolder = document.getElementById('playback-holder');
nicholas@2696:                         if (playbackHolder === null) {
nicholas@2651:                             playbackHolder = document.createElement('div');
nicholas@2651:                             playbackHolder.style.width = "100%";
nicholas@2651:                             playbackHolder.align = 'center';
nicholas@2651:                             playbackHolder.appendChild(interfaceContext.playhead.object);
nicholas@2651:                             feedbackHolder.insertBefore(playbackHolder, feedbackHolder.firstElementChild);
nicholas@2651:                         }
nicholas@2651:                         break;
nicholas@2651:                     case "page-count":
nicholas@2651:                         var pagecountHolder = document.getElementById('page-count');
nicholas@2696:                         if (pagecountHolder === null) {
nicholas@2651:                             pagecountHolder = document.createElement('div');
nicholas@2651:                             pagecountHolder.id = 'page-count';
nicholas@2651:                         }
nicholas@2651:                         pagecountHolder.innerHTML = '<span>Page ' + (testState.stateIndex + 1) + ' of ' + testState.stateMap.length + '</span>';
nicholas@2651:                         var inject = document.getElementById('interface-buttons');
nicholas@2651:                         inject.appendChild(pagecountHolder);
nicholas@2651:                         break;
nicholas@2651:                     case "volume":
nicholas@2696:                         if (document.getElementById('master-volume-holder') === null) {
nicholas@2651:                             feedbackHolder.appendChild(interfaceContext.volume.object);
nicholas@2651:                         }
nicholas@2651:                         break;
nicholas@2651:                     case "comments":
nicholas@2651:                         interfaceContext.commentBoxes.showCommentBoxes(feedbackHolder, true);
nicholas@2651:                         break;
nickjillings@1356:                 }
nickjillings@1356:             }
nicholas@2696:         });
nicholas@2651:     });
nickjillings@1341: 
nicholas@2538:     var commentBoxPrefix = "Comment on fragment";
nicholas@2538: 
nicholas@2538:     var commentShow = audioHolderObject.elementComments;
nicholas@2538: 
nicholas@2538:     var loopPlayback = audioHolderObject.loop;
nicholas@2538: 
n@3010:     module.initialisePage(audioHolderObject);
nicholas@2538: 
n@2407:     var interfaceList = audioHolderObject.interfaces.concat(specification.interfaces);
nicholas@2538:     for (var k = 0; k < interfaceList.length; k++) {
nicholas@2538:         for (var i = 0; i < interfaceList[k].options.length; i++) {
nicholas@2538:             if (interfaceList[k].options[i].type == 'show' && interfaceList[k].options[i].name == 'playhead') {
n@2407:                 var playbackHolder = document.getElementById('playback-holder');
nicholas@2696:                 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@2538:             } else if (interfaceList[k].options[i].type == 'show' && interfaceList[k].options[i].name == 'page-count') {
n@2407:                 var pagecountHolder = document.getElementById('page-count');
nicholas@2696:                 if (pagecountHolder === null) {
n@2407:                     pagecountHolder = document.createElement('div');
n@2407:                     pagecountHolder.id = 'page-count';
n@2407:                 }
nicholas@2538:                 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@2696:                 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@2538:                 interfaceContext.commentBoxes.showCommentBoxes(feedbackHolder, true);
n@2407:                 break;
n@2407:             }
n@2407:         }
n@2407:     }
nicholas@2538: 
nicholas@2538:     $(audioHolderObject.commentQuestions).each(function (index, element) {
nicholas@2538:         var node = interfaceContext.createCommentQuestion(element);
nicholas@2538:         feedbackHolder.appendChild(node.holder);
nicholas@2538:     });
nicholas@2538: 
nicholas@2538:     //testWaitIndicator();
nicholas@3041:     module.resize();
nickjillings@1341: }
nickjillings@1341: 
n@3009: function ape() {
n@3094:     var axis = [];
n@3009:     var DOMRoot = document.getElementById("slider-holder");
n@3009:     var AOIs = [];
n@3094:     var page;
n@3009: 
n@3009:     function audioObjectInterface(audioObject, parent) {
n@3009:         // The audioObject communicates with this object
n@3009:         var playing = false;
n@3009:         var sliders = [];
n@3009:         this.enable = function () {
n@3009:             sliders.forEach(function (s) {
n@3009:                 s.enable();
nicholas@3019:             });
n@3094:         };
n@3009: 
n@3009:         this.updateLoading = function (p) {
n@3009:             sliders.forEach(function (s) {
n@3009:                 s.updateLoading(p);
nicholas@3019:             });
n@3094:         };
n@3009: 
n@3009:         this.startPlayback = function () {
n@3009:             playing = true;
n@3009:             sliders.forEach(function (s) {
n@3009:                 s.playing();
n@3009:             });
n@3094:         };
n@3009: 
n@3009:         this.stopPlayback = function () {
n@3009:             playing = false;
n@3009:             sliders.forEach(function (s) {
n@3009:                 s.stopped();
n@3009:             });
n@3094:         };
n@3009: 
n@3009:         this.getValue = function () {
nicholas@3041:             return sliders[0].value;
n@3094:         };
n@3009: 
n@3009:         this.getPresentedId = function () {
n@3009:             return sliders[0].label;
n@3094:         };
n@3009: 
n@3009:         this.canMove = function () {
n@3009:             return true;
n@3094:         };
n@3009: 
n@3009:         this.exportXMLDOM = function (audioObject) {
n@3009:             var elements = [];
n@3009:             sliders.forEach(function (s) {
n@3009:                 elements.push(s.exportXMLDOM());
n@3009:             });
n@3009:             return elements;
n@3094:         };
n@3009: 
n@3009:         this.error = function () {
n@3009:             sliders.forEach(function (s) {
n@3009:                 s.error();
n@3009:             });
n@3094:         };
n@3009: 
n@3009:         this.addSlider = function (s) {
n@3009:             sliders.push(s);
n@3094:         };
n@3009: 
n@3009:         this.clicked = function (event) {
n@3009:             if (!playing) {
n@3009:                 audioEngineContext.play(audioObject.id);
n@3009:             } else {
n@3009:                 audioEngineContext.stop();
n@3009:             }
n@3009:             playing = !playing;
n@3094:         };
n@3009: 
n@3009:         this.pageXMLSave = function (store) {
n@3009:             var inject = audioObject.storeDOM.getElementsByTagName("metric")[0];
n@3009:             sliders.forEach(function (s) {
n@3009:                 s.pageXMLSave(inject);
n@3009:             });
n@3094:         };
n@3009: 
n@3009:     }
n@3009: 
n@3009:     function axisObject(interfaceObject, parent) {
n@3009: 
n@3009:         function sliderInterface(AOI, axisInterface) {
n@3009:             var trackObj = document.createElement('div');
n@3009:             var labelHolder = document.createElement("span");
n@3009:             var label = "";
n@3009:             var metric = new metricTracker(this);
nicholas@3041:             var value = Math.random();
n@3009:             trackObj.align = "center";
n@3009:             trackObj.className = 'track-slider track-slider-disabled';
n@3009:             trackObj.appendChild(labelHolder);
n@3009:             axisInterface.sliderRail.appendChild(trackObj);
n@3009:             metric.initialise(this.value);
n@3009:             this.setLabel = function (s) {
n@3009:                 label = s;
n@3094:             };
n@3009:             this.resize = function (event) {
n@3009:                 var width = $(axisInterface.sliderRail).width();
nicholas@3041:                 var w = Number(value * width);
n@3009:                 trackObj.style.left = String(w) + "px";
n@3094:             };
n@3009:             this.playing = function () {
n@3009:                 trackObj.classList.add("track-slider-playing");
n@3094:             };
n@3009:             this.stopped = function () {
n@3009:                 trackObj.classList.remove("track-slider-playing");
n@3094:             };
n@3009:             this.enable = function () {
n@3009:                 trackObj.addEventListener("mousedown", this);
n@3009:                 trackObj.addEventListener("mouseup", this);
n@3009:                 trackObj.classList.remove("track-slider-disabled");
n@3009:                 labelHolder.textContent = label;
n@3094:             };
n@3009:             this.updateLoading = function (progress) {
n@3009:                 labelHolder.textContent = progress + "%";
n@3094:             };
n@3009:             this.exportXMLDOM = function () {
n@3009:                 var node = storage.document.createElement('value');
n@3094:                 node.setAttribute("interface-name", axisInterface.name);
nicholas@3063:                 node.textContent = this.value;
n@3009:                 return node;
n@3094:             };
n@3009:             this.error = function () {
n@3009:                 trackObj.classList.add("error-colour");
n@3009:                 trackObj.removeEventListener("mousedown");
n@3009:                 trackObj.removeEventListener("mouseup");
n@3094:             };
n@3094:             var timing;
n@3009:             this.handleEvent = function (e) {
n@3009:                 // This is only for the mousedown / touchdown
n@3009:                 if (e.preventDefault) {
n@3009:                     e.preventDefault();
n@3009:                 }
n@3072:                 if (e.type == "mousedown") {
n@3009:                     axisInterface.mousedown(this);
n@3069:                 } else if (e.type == "mouseup" || e.type == "touchend" || e.type == "touchcancel") {
n@3009:                     axisInterface.mouseup(this);
nicholas@3064:                     metric.moved(audioEngineContext.timer.getTestTime(), this.value);
nicholas@3064:                     console.log("Slider " + label + " on axis " + axisInterface.name + " moved to " + this.value);
n@3009:                 }
n@3094:             };
n@3009:             this.clicked = function (e) {
n@3009:                 AOI.clicked();
n@3094:             };
n@3009:             this.pageXMLSave = function (inject) {
n@3009:                 var nodes = metric.exportXMLDOM(inject);
n@3009:                 nodes.forEach(function (elem) {
n@3009:                     var name = elem.getAttribute("name");
n@3009:                     if (name == "elementTracker" || name == "elementTrackerFull" || name == "elementInitialPosition" || name == "elementFlagMoved") {
n@3011:                         elem.setAttribute("interface-name", axisInterface.name);
n@3011:                     } else {
n@3011:                         inject.removeChild(elem);
n@3009:                     }
n@3009:                 });
n@3094:             };
n@3010:             this.hasMoved = function () {
n@3010:                 return metric.wasMoved;
n@3094:             };
n@3009:             Object.defineProperties(this, {
n@3009:                 "DOM": {
n@3009:                     "value": trackObj
n@3009:                 },
n@3009:                 "value": {
nicholas@3041:                     "get": function () {
nicholas@3041:                         return value;
nicholas@3041:                     },
nicholas@3041:                     "set": function (v) {
nicholas@3041:                         if (v >= 0 && v <= 1) {
nicholas@3041:                             value = v;
nicholas@3041:                         }
nicholas@3041:                         this.resize();
nicholas@3041:                         return value;
n@3009:                     }
n@3009:                 },
n@3009:                 "label": {
n@3009:                     "get": function () {
n@3009:                         return label;
n@3009:                     },
n@3009:                     "set": function () {}
nicholas@3063:                 },
nicholas@3063:                 "metric": {
nicholas@3063:                     "value": metric
n@3009:                 }
n@3009:             });
n@3009:         }
n@3009: 
nicholas@3041:         function drawTick(position) {
nicholas@3041:             var context = tickCanvas.getContext("2d"),
nicholas@3041:                 w = tickCanvas.width,
nicholas@3041:                 h = tickCanvas.height;
nicholas@3041:             context.beginPath();
nicholas@3041:             context.setLineDash([1, 2]);
nicholas@3041:             context.moveTo(position * w, 0);
nicholas@3041:             context.lineTo(position * w, h);
nicholas@3041:             context.closePath();
nicholas@3041:             context.stroke();
nicholas@3041:         }
nicholas@3041: 
nicholas@3041:         function clearTicks() {
nicholas@3041:             var c = tickCanvas.getContext("2d"),
nicholas@3041:                 w = tickCanvas.width,
nicholas@3041:                 h = tickCanvas.height;
nicholas@3041:             c.clearRect(0, 0, w, h);
nicholas@3041:         }
nicholas@3041: 
n@3009:         function createScaleMarkers(interfaceObject, root, w) {
nicholas@3041:             var ticks = interfaceObject.options.findIndex(function (a) {
nicholas@3041:                 return (a.type == "show" && a.name == "ticks");
nicholas@3041:             });
nicholas@3041:             ticks = (ticks >= 0);
nicholas@3041:             clearTicks();
n@3009:             interfaceObject.scales.forEach(function (scaleObj) {
n@3009:                 var position = Number(scaleObj.position) * 0.01;
n@3009:                 var pixelPosition = (position * w) + 50;
n@3009:                 var scaleDOM = document.createElement('span');
n@3009:                 scaleDOM.className = "ape-marker-text";
n@3009:                 scaleDOM.textContent = scaleObj.text;
n@3009:                 scaleDOM.setAttribute('value', position);
n@3009:                 root.appendChild(scaleDOM);
n@3009:                 scaleDOM.style.left = Math.floor((pixelPosition - ($(scaleDOM).width() / 2))) + 'px';
nicholas@3041:                 if (ticks) {
nicholas@3041:                     drawTick(position);
nicholas@3041:                 }
n@3009:             }, this);
n@3009:         }
n@3009:         var sliders = [];
n@3009:         var UI = {
n@3009:             selected: undefined,
n@3009:             startTime: undefined
n@3094:         };
n@3009:         this.name = interfaceObject.name;
n@3009:         var DOMRoot = document.createElement("div");
n@3010:         parent.getDOMRoot().appendChild(DOMRoot);
n@3009:         DOMRoot.className = "sliderCanvasDiv";
n@3009:         DOMRoot.id = "sliderCanvasHolder-" + this.name;
n@3009: 
n@3009:         var axisTitle = document.createElement("div");
n@3009:         axisTitle.className = "pageTitle";
n@3009:         axisTitle.align = "center";
n@3009:         var titleSpan = document.createElement('span');
n@3009:         titleSpan.id = "pageTitle-" + this.name;
n@3009:         if (interfaceObject.title !== undefined && typeof interfaceObject.title == "string") {
n@3009:             titleSpan.textContent = interfaceObject.title;
n@3009:         } else {
n@3009:             titleSpan.textContent = "Axis " + String(this.id + 1);
n@3009:         }
n@3009:         axisTitle.appendChild(titleSpan);
n@3009:         DOMRoot.appendChild(axisTitle);
n@3009: 
n@3009:         var imageHolder = (function () {
n@3009:             var imageController = {};
n@3009:             imageController.root = document.createElement("div");
n@3009:             imageController.root.className = "imageController";
n@3009:             imageController.img = document.createElement("img");
n@3009:             imageController.root.appendChild(imageController.img);
n@3009:             imageController.setImage = function (src) {
n@3009:                 imageController.img.src = "";
n@3009:                 if (typeof src !== "string" || src.length === undefined) {
n@3009:                     return;
n@3009:                 }
n@3009:                 imageController.img.src = src;
n@3009:             };
n@3009:             return imageController;
n@3009:         })();
n@3009:         if (interfaceObject.image !== undefined || page.audioElements.some(function (a) {
n@3009:                 return a.image !== undefined;
n@3009:             })) {
n@3009:             DOMRoot.appendChild(imageHolder.root);
n@3009:             imageHolder.setImage(interfaceObject.image);
n@3009:         }
n@3009: 
n@3009:         // Now create the slider box to hold the fragment sliders
n@3009:         var sliderRail = document.createElement("div");
n@3009:         sliderRail.id = "sliderrail-" + this.name;
n@3009:         sliderRail.className = "slider";
n@3009:         sliderRail.align = "left";
n@3009:         DOMRoot.appendChild(sliderRail);
n@3009: 
nicholas@3041:         // Canvas for the markers
nicholas@3041:         var tickCanvas = document.createElement("canvas");
nicholas@3041:         tickCanvas.id = "ticks-" + this.name;
nicholas@3041:         tickCanvas.className = "tick-canvas";
nicholas@3041:         tickCanvas.height = 150;
nicholas@3041:         tickCanvas.width = $(sliderRail).width() - 100;
nicholas@3041:         tickCanvas.style.width = ($(sliderRail).width() - 100) + "px";
nicholas@3041:         sliderRail.appendChild(tickCanvas);
nicholas@3041: 
n@3009:         // Create the div to hold any scale objects
n@3009:         var scale = document.createElement("div");
n@3009:         scale.className = "sliderScale";
n@3009:         scale.id = "slider-scale-holder-" + this.name;
n@3009:         scale.slign = "left";
n@3009:         DOMRoot.appendChild(scale);
n@3009:         createScaleMarkers(interfaceObject, scale, $(sliderRail).width());
n@3009: 
n@3009:         this.resize = function (event) {
n@3009:             var w = $(sliderRail).width();
n@3009:             var marginsize = 50;
n@3009:             sliders.forEach(function (s) {
n@3009:                 s.resize();
n@3009:             });
n@3009:             scale.innerHTML = "";
nicholas@3041:             tickCanvas.width = $(sliderRail).width();
nicholas@3041:             tickCanvas.style.width = tickCanvas.width + "px";
n@3009:             createScaleMarkers(interfaceObject, scale, $(sliderRail).width());
n@3094:         };
n@3009:         this.playing = function (id) {
n@3009:             var node = audioEngineContext.audioObjects.find(function (a) {
n@3009:                 return a.id == id;
n@3009:             });
n@3009:             if (node === undefined) {
n@3009:                 this.imageHolder.setImage(interfaceObject.image || "");
nicholas@2782:                 return;
nicholas@2782:             }
n@3009:             var imgurl = node.specification.image || interfaceObject.image || "";
n@3009:             this.imageHolder.setImage(imgurl);
n@2795:         };
n@3009:         this.stopped = function () {
n@3009:             var imgurl = interfaceObject.image || "";
n@3009:             this.imageHolder.setImage(imgurl);
n@3094:         };
n@3009:         this.addSlider = function (aoi) {
n@3009:             var node = new sliderInterface(aoi, this);
n@3009:             sliders.push(node);
n@3009:             return node;
n@3094:         };
n@3009:         this.mousedown = function (sliderUI) {
n@3009:             UI.selected = sliderUI;
n@3009:             UI.startTime = new Date();
n@3094:         };
n@3076:         this.mouseup = function (event) {
n@3009:             var delta = new Date() - UI.startTime;
n@3009:             if (delta < 200) {
n@3009:                 UI.selected.clicked();
n@3077:             } else if (event.type == "touchend" || event.type == "touchcancel") {
n@3077:                 UI.selected.handleEvent(event);
n@3009:             }
n@3009:             UI.selected = undefined;
n@3009:             UI.startTime = undefined;
n@3094:         };
n@3009:         this.handleEvent = function (event) {
n@3095:             // TODO: Functionalise and scope
n@3072:             function getTargetSlider(target) {
n@3072:                 return sliders.find(function (a) {
n@3072:                     return a.DOM == target;
n@3072:                 });
n@3072:             }
nicholas@3063:             var time = audioEngineContext.timer.getTestTime();
n@3095:             var move, w;
n@3009:             if (event.preventDefault) {
n@3009:                 event.preventDefault();
n@3009:             }
n@3072:             if (event.type == "touchstart") {
n@3072:                 var selected = getTargetSlider(event.target);
n@3072:                 if (typeof selected != "object") {
n@3072:                     return;
n@3072:                 }
n@3075:                 UI.startTime = new Date();
n@3072:                 UI.selected = selected;
n@3072:             }
n@3073:             if (UI.selected === undefined) {
n@3073:                 return;
n@3073:             }
n@3009:             if (event.type == "mousemove") {
n@3095:                 move = event.clientX - 6;
n@3095:                 w = $(sliderRail).width();
n@3009:                 move = Math.max(50, move);
nicholas@3041:                 move = Math.min(w, move);
nicholas@3041:                 UI.selected.value = (move / w);
n@3009:             } else if (event.type == "touchmove") {
n@3072:                 if (UI.selected == getTargetSlider(event.target)) {
n@3072:                     if (event.targetTouches) {
n@3072:                         move = event.targetTouches[0].clientX - 6;
n@3072:                     } else if (event.originalEvent.targetTouches) {
n@3072:                         move = event.originalEvent.targetTouches[0].clientX - 6;
n@3072:                     } else {
n@3072:                         return;
n@3072:                     }
n@3095:                     w = $(event.currentTarget).width();
n@3072:                     move = Math.max(50, move);
n@3072:                     move = Math.min(w, move);
n@3072:                     UI.selected.value = (move / w);
n@3067:                 }
n@3072:             } else if (event.type == "touchend" || event.type == "touchcancel") {
n@3072:                 if (UI.selected == getTargetSlider(event.target)) {
n@3076:                     this.mouseup(event);
n@3072:                 }
nicholas@2825:             }
n@3094:         };
n@3010:         this.checkAllMoved = function () {
n@3010:             var notMoved = sliders.filter(function (s) {
n@3010:                 return !s.hasMoved();
n@3010:             });
n@3010:             if (notMoved.length !== 0) {
n@3010:                 var ls = [];
n@3010:                 notMoved.forEach(function (s) {
n@3010:                     ls.push(s.label);
n@3094:                 });
n@3010:                 var str = "On axis \"" + interfaceObject.title + "\", ";
n@3010:                 if (ls.length == 1) {
n@3010:                     str += "slider " + ls[0];
n@3010:                 } else {
n@3010:                     str += "sliders " + [ls.slice(0, ls.length - 1).join(", ")].concat(ls[ls.length - 1]).join(" and ");
n@3010:                 }
n@3010:                 str += ".";
n@3010:                 return str;
n@3010:             } else {
n@3010:                 return "";
n@3010:             }
n@3094:         };
n@3010:         this.checkScaleRange = function () {
n@3010:             var scaleRange = interfaceObject.options.find(function (a) {
n@3010:                 return a.name == "scalerange";
n@3010:             });
n@3010:             if (scaleRange === undefined) {
n@3010:                 return "";
n@3010:             }
n@3010:             var scales = {
n@3010:                 min: scaleRange.min,
n@3010:                 max: scaleRange.max
n@3010:             };
n@3010:             var maxSlider = sliders.reduce(function (a, b) {
n@3010:                 return Math.max(a, b.value);
n@3010:             }, 0);
n@3010:             var minSlider = sliders.reduce(function (a, b) {
n@3010:                 return Math.min(a, b.value);
n@3010:             }, 100);
n@3010:             if (minSlider >= scales.min || maxSlider <= scales.max) {
n@3010:                 return "On axis \"" + interfaceObject.title + "\", you have not used the required width of the scales";
n@3010:             }
n@3010:             return "";
n@3094:         };
n@3009:         sliderRail.addEventListener("mousemove", this);
n@3072:         sliderRail.addEventListener("touchstart", this);
n@3071:         sliderRail.addEventListener("touchmove", this);
n@3072:         sliderRail.addEventListener("touchend", this);
n@3072:         sliderRail.addEventListener("touchcancel", this);
n@3009:         Object.defineProperties(this, {
n@3009:             "sliderRail": {
n@3009:                 "value": sliderRail
nicholas@2825:             }
nicholas@2825:         });
n@3009:     }
n@3009:     this.getDOMRoot = function () {
n@3009:         return DOMRoot;
n@3094:     };
n@3009:     this.getPage = function () {
n@3009:         return page;
n@3094:     };
n@3009:     this.clear = function () {
n@3009:         page = undefined;
n@3009:         axis = [];
n@3009:         AOIs = [];
n@3009:         DOMRoot.innerHTML = "";
n@3094:     };
n@3009:     this.initialisePage = function (page_init) {
n@3009:         this.clear();
n@3009:         page = page_init;
nicholas@3062:         var randomiseAxisOrder;
nicholas@3062:         if (page.randomiseAxisOrder !== undefined) {
nicholas@3062:             randomiseAxisOrder = page.randomiseAxisOrder;
nicholas@3062:         } else {
nicholas@3062:             randomiseAxisOrder = page.parent.randomiseAxisOrder;
nicholas@3062:         }
nicholas@3019:         var commentBoxes = false;
n@3009:         // Create each of the interface axis
nicholas@3062:         if (randomiseAxisOrder) {
nicholas@3062:             page.interfaces = randomiseOrder(page.interfaces);
nicholas@3062:         }
nicholas@3062:         var interfaceObj = interfaceContext.getCombinedInterfaces(page);
n@3009:         interfaceObj.forEach(function (i) {
n@3009:             var node = new axisObject(i, this);
n@3009:             axis.push(node);
nicholas@3019:             i.options.forEach(function (o) {
nicholas@3019:                 if (o.type == "show" && o.name == "comments") {
nicholas@3019:                     commentBoxes = true;
nicholas@3019:                 }
nicholas@3019:             });
n@3009:         }, this);
nicholas@2538: 
n@3009:         // Create the audioObject interface objects for each aO.
n@3009:         page.audioElements.forEach(function (element, index) {
n@3009:             var audioObject = audioEngineContext.newTrack(element);
n@3009:             if (element.type == 'outside-reference') {
n@3009:                 // Construct outside reference;
n@3009:                 var orNode = new outsideReferenceDOM(audioObject, index, document.getElementById("outside-reference-holder"));
n@3009:                 audioObject.bindInterface(orNode);
n@3009:             } else {
n@3009:                 var aoi = new audioObjectInterface(audioObject, this);
n@3011:                 AOIs.push(aoi);
n@3009:                 var label = interfaceContext.getLabel(page.label, index, page.labelStart);
n@3009:                 axis.forEach(function (a) {
n@3009:                     var node = a.addSlider(aoi);
n@3009:                     node.setLabel(label);
n@3009:                     aoi.addSlider(node);
n@3009:                 });
nicholas@3060:                 audioObject.bindInterface(aoi);
nicholas@3060:                 if (commentBoxes) {
nicholas@3060:                     interfaceContext.commentBoxes.createCommentBox(audioObject);
nicholas@3060:                 }
n@3009:             }
n@3009:         });
n@3094:     };
n@3010:     this.checkAllMoved = function () {
n@3094:         var str = "You have not moved the following sliders. ";
n@3010:         var cont = true;
n@3010:         axis.forEach(function (a) {
n@3010:             var msg = a.checkAllMoved();
n@3010:             if (msg.length > 0) {
n@3010:                 cont = false;
n@3010:                 str += msg;
n@3010:             }
n@3010:         });
n@3010:         if (!cont) {
n@3010:             interfaceContext.lightbox.post("Error", str);
n@3010:             interfaceContext.storeErrorNode(str);
n@3010:             console.log(str);
nicholas@2538:         }
n@3010:         return cont;
nicholas@2538:     };
n@3010:     this.checkScaleRange = function () {
n@3010:         var str = "";
n@3010:         var cont = true;
n@3010:         axis.forEach(function (a) {
n@3010:             var msg = a.checkScaleRange();
n@3010:             if (msg.length > 0) {
n@3010:                 cont = false;
n@3010:                 str += msg;
n@3010:             }
nicholas@2696:         });
n@3010:         if (!cont) {
n@3010:             interfaceContext.lightbox.post("Error", str);
n@3010:             interfaceContext.storeErrorNode(str);
n@3010:             console.log(str);
nicholas@2538:         }
n@3010:         return cont;
nicholas@2538:     };
n@3009:     this.pageXMLSave = function (store, pageSpecification) {
n@3011:         if (axis.length > 1) {
n@3011:             AOIs.forEach(function (ao) {
n@3011:                 ao.pageXMLSave(store);
nicholas@2538:             });
nicholas@2538:         }
nicholas@2538:     };
nicholas@3041:     this.resize = function (event) {
nicholas@3041:         axis.forEach(function (a) {
nicholas@3041:             a.resize(event);
nicholas@2538:         });
nicholas@2696:     };
nickjillings@1341: }
nickjillings@1341: 
nicholas@2538: function outsideReferenceDOM(audioObject, index, inject) {
nicholas@2538:     this.parent = audioObject;
nicholas@2538:     this.outsideReferenceHolder = document.createElement('div');
nicholas@2538:     this.outsideReferenceHolder.id = 'outside-reference';
nicholas@2538:     this.outsideReferenceHolder.className = 'outside-reference track-slider-disabled';
nicholas@2538:     var outsideReferenceHolderspan = document.createElement('span');
nicholas@2538:     outsideReferenceHolderspan.textContent = 'Reference';
nicholas@2538:     this.outsideReferenceHolder.appendChild(outsideReferenceHolderspan);
nicholas@2538:     this.outsideReferenceHolder.setAttribute('track-id', index);
nicholas@2538: 
nicholas@2696:     this.handleEvent = function (event) {
nicholas@2696:         audioEngineContext.play(audioObject.id);
nicholas@2538:         $('.track-slider').removeClass('track-slider-playing');
nickjillings@1341:         $('.comment-div').removeClass('comment-box-playing');
nicholas@2696:         $(this.outsideReferenceHolder).addClass('track-slider-playing');
nicholas@2538:     };
nicholas@2696:     this.outsideReferenceHolder.addEventListener("click", this.handleEvent);
nicholas@2538:     inject.appendChild(this.outsideReferenceHolder);
nicholas@2538:     this.enable = function () {
nicholas@2538:         if (this.parent.state == 1) {
nicholas@2538:             $(this.outsideReferenceHolder).removeClass('track-slider-disabled');
nicholas@2538:         }
nicholas@2538:     };
nicholas@2538:     this.updateLoading = function (progress) {
nicholas@2538:         if (progress != 100) {
nicholas@2538:             progress = String(progress);
nicholas@2538:             progress = progress.split('.')[0];
nicholas@2538:             this.outsideReferenceHolder.firstChild.textContent = progress + '%';
nicholas@2538:         } else {
nicholas@2538:             this.outsideReferenceHolder.firstChild.textContent = "Play Reference";
nicholas@2538:         }
nicholas@2538:     };
nicholas@2538:     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@2538:     this.stopPlayback = function () {
nickjillings@1360:         $(this.outsideReferenceHolder).removeClass('track-slider-playing');
nickjillings@1360:     };
nicholas@2538:     this.exportXMLDOM = function (audioObject) {
nicholas@2538:         return null;
nicholas@2538:     };
nicholas@2538:     this.getValue = function () {
nicholas@2538:         return 0;
nicholas@2538:     };
nicholas@2538:     this.getPresentedId = function () {
nicholas@2538:         return 'reference';
nicholas@2538:     };
nicholas@2538:     this.canMove = function () {
nicholas@2538:         return false;
nicholas@2538:     };
nicholas@2538:     this.error = function () {
nicholas@2538:         // audioObject has an error!!
nickjillings@2113:         this.outsideReferenceHolder.textContent = "Error";
nickjillings@2113:         $(this.outsideReferenceHolder).addClass("error-colour");
nicholas@2696:     };
nickjillings@1341: }
nickjillings@1341: 
nicholas@2538: function buttonSubmitClick() {
nicholas@2651:     var checks = testState.currentStateMap.interfaces[0].options,
nicholas@2651:         canContinue = true;
nickjillings@1341: 
nicholas@2538:     // Check that the anchor and reference objects are correctly placed
nicholas@2696:     if (interfaceContext.checkHiddenAnchor() === false) {
nicholas@2538:         return;
nicholas@2538:     }
nicholas@2696:     if (interfaceContext.checkHiddenReference() === false) {
nicholas@2538:         return;
nicholas@2538:     }
nicholas@2825:     if (interfaceContext.checkFragmentMinPlays() === false) {
nicholas@2825:         return;
nicholas@2825:     }
nicholas@3035:     if (interfaceContext.checkCommentQuestions() === false) {
nicholas@3035:         return;
nicholas@3035:     }
nicholas@2538: 
nicholas@2538:     for (var i = 0; i < checks.length; i++) {
n@2795:         var checkState = true;
nicholas@2538:         if (checks[i].type == 'check') {
nicholas@2538:             switch (checks[i].name) {
nicholas@2538:                 case 'fragmentPlayed':
nicholas@2538:                     // Check if all fragments have been played
n@2790:                     checkState = interfaceContext.checkAllPlayed(checks[i].errorMessage);
nicholas@2538:                     break;
nicholas@2538:                 case 'fragmentFullPlayback':
nicholas@2538:                     // Check all fragments have been played to their full length
n@2790:                     checkState = interfaceContext.checkFragmentsFullyPlayed(checks[i].errorMessage);
nicholas@2538:                     break;
nicholas@2538:                 case 'fragmentMoved':
nicholas@2538:                     // Check all fragment sliders have been moved.
n@2790:                     checkState = interfaceContext.checkAllMoved(checks[i].errorMessage);
nicholas@2538:                     break;
nicholas@2538:                 case 'fragmentComments':
nicholas@2538:                     // Check all fragment sliders have been moved.
n@2790:                     checkState = interfaceContext.checkAllCommented(checks[i].errorMessage);
nicholas@2538:                     break;
nicholas@2538:                 case 'scalerange':
nicholas@2538:                     // Check the scale is used to its full width outlined by the node
n@2790:                     checkState = interfaceContext.checkScaleRange(checks[i].errorMessage);
nicholas@2538:                     break;
nicholas@2538:                 default:
nicholas@2538:                     console.log("WARNING - Check option " + checks[i].name + " is not supported on this interface");
nicholas@2538:                     break;
nicholas@2538:             }
nicholas@2538: 
nicholas@2538:         }
nicholas@2703:         if (checkState === false) {
nicholas@2703:             canContinue = false;
nicholas@2538:             break;
nicholas@2538:         }
nicholas@2538:     }
nicholas@2538: 
nickjillings@1341:     if (canContinue) {
nicholas@2538:         if (audioEngineContext.status == 1) {
nicholas@2538:             var playback = document.getElementById('playback-button');
nicholas@2538:             playback.click();
nicholas@2538:             // This function is called when the submit button is clicked. Will check for any further tests to perform, or any post-test options
nicholas@2538:         } else {
nicholas@2696:             if (audioEngineContext.timer.testStarted === false) {
nicholas@2538:                 interfaceContext.lightbox.post("Warning", 'You have not started the test! Please click a fragment to begin the test!');
nicholas@2538:                 return;
nicholas@2538:             }
nicholas@2538:         }
nicholas@2538:         testState.advanceState();
nicholas@2538:     }
nickjillings@1341: }
nickjillings@1341: 
nicholas@2538: function convSliderPosToRate(trackSlider) {
nicholas@2538:     var slider = trackSlider.parentElement;
nicholas@2538:     var maxPix = $(slider).width();
nicholas@2538:     var marginsize = 50;
nicholas@2538:     var pix = trackSlider.style.left;
nicholas@2538:     pix = pix.substr(0, pix.length - 2);
nicholas@2538:     var rate = (pix - marginsize) / maxPix;
nicholas@2538:     return rate;
nickjillings@1341: }
nickjillings@1341: 
nicholas@2538: function resizeWindow(event) {
nicholas@2538:     // Function called when the window has been resized.
nicholas@2538:     // MANDATORY FUNCTION
nicholas@2538: 
nicholas@2538:     // Resize the slider objects
nicholas@3041:     window.module.resize(event);
nickjillings@1341: }
nickjillings@1341: 
nicholas@2538: function pageXMLSave(store, pageSpecification) {
nicholas@2538:     // MANDATORY
nicholas@2538:     // Saves a specific test page
nicholas@2538:     // You can use this space to add any extra nodes to your XML <audioHolder> saves
nicholas@2538:     // Get the current <page> information in store (remember to appendChild your data to it)
nicholas@2538:     // pageSpecification is the current page node configuration
nicholas@2538:     // To create new XML nodes, use storage.document.createElement();
nicholas@2538: 
n@3010:     module.pageXMLSave(store, pageSpecification);
nicholas@2538: }