var Mat = require("./mat.js");
var Sequence = require("./sequence.js");

/**
 * An object representing a complete routine
 * 
 * @param {HTMLCanvasElement} canvas A canvas element representing the routine mat
 * @param {array} data An array of all the data points making up the routine
 * @returns {Routine}
 */
function Routine(canvas, data) {
	var mat = new Mat(canvas);
	var sequence = new Sequence(data);
	var bpm = 70;

	// Work out the bars per millisecond based on the beats per minute;
	var barspermillisec = (bpm / 60000) / 8;

	/**
	 * Render the correct actions for a given time in the routine
	 */
	function renderTime(time) {
		var actions = sequence.getActionsByTime(time);
		mat.renderActions(actions);
	}

	var startTimestamp = null;
	var maxtime = sequence.getMaxTime();
	function renderFrame(timestamp) {
		var progress;
		if (startTimestamp === null) start = timestamp;
		progress = timestamp - startTimestamp;

		// Convert the progress from milliseconds to bars
		progress = progress * barspermillisec;
		renderTime(progress);
		if (progress <= maxtime) {
			window.requestAnimationFrame(renderFrame);
		} else {
			startTimestamp = null;
		}
	}

	/**
	 * Starts animating the routine
	 * @returns {boolean} Whether the routine was started (true) or it was already running (false)
	 */
	function start() {
		if (startTimestamp !== null) return false;
		window.requestAnimationFrame(renderFrame);
		return true;
	}
	this.start = start;

	// Begin with showing the opening positions
	renderTime(0);
}




module.exports = Routine;
@@ -781,16 +781,58 @@
 Time();%0A
+%09var slider = null;%0A%09var playing = false;%0A
 %09functio
@@ -874,16 +874,40 @@
 ogress;%0A
+%09%09if (!playing) return;%0A
 %09%09if (st
@@ -1223,16 +1223,596 @@
 ll;%0A%09%09%7D%0A
+%09%09if (slider) slider.value = progress;%0A%09%7D%0A%0A%09/**%0A%09 * Adds controls for playing the routine%0A%09 * @param %7BDOMElement%7D container A DOM element to put all the relevant controls in.%0A%09 */%0A%09function addControls(container) %7B%0A%09%09slider = document.createElement('input');%0A%09%09slider.type = %22range%22;%0A%09%09slider.min = 0;%0A%09%09slider.max = maxtime;%0A%09%09slider.step = %22any%22;%0A%09%09slider.addEventListener(%22change%22, sliderMoved);%0A%09%09container.appendChild(slider);%0A%09%7D%0A%09this.addControls = addControls;%0A%0A%09function sliderMoved(event) %7B%0A%09%09pause();%0A%09%09renderTime(this.value);%0A%09%7D%0A%0A%09function pause() %7B%0A%09%09playing = false;%0A
 %09%7D%0A%0A%09/**
@@ -1976,44 +1976,46 @@
 if (
-startTimestamp !== null) return fals
+playing) return false;%0A%09%09playing = tru
 e;%0A%09

add slider for specifying how far through the routine to look at