adding play, pause, speed

clients/anim/index.html

@@ -61,29 +61,71 @@
 			}
 			#slider {
 				position: absolute;
-				top: 530px;
-				left: 60px;
-				width: 920px;
+				width: 980px;
 				height: 50px;
-				border-top: 1px solid #aaa;
-				border-bottom: 1px solid #aaa;
+				top: 530px;
+				left: 0px;
+			}
+			#play {
+				top: 0px;
+				left: 0px;
+				width: 50px;
+				height: 50px;
+				background: #eee;
+				border: 1px solid #aaa;
+				font-size: 12px;
+				text-align: center;
+				line-height: 15px;
+				border-radius: 10px;
+				background-image: url(play-pause.png);
+				background-repeat: no-repeat;
+				background-position: -50px 0px;
+				cursor: pointer;
+			}
+			#play.pause {
+				background-position: 0px 0px;
+			}
+			.speed {
+				width: 35px;
+				height: 13px;
+				position: absolute;
+				background: #eee;
+				color: #888;
+				border: 1px solid #aaa;
+				font-size: 11px;
+				left: 55px;
+				padding-top: 1px;
+				top: 0px;
+				text-align: center;
+				border-radius: 5px;
+				cursor: pointer;
+			}
+			.speed.active {
+				color: #000;
 			}
 			#sliderWrapper {
-				width: 920px;
+				width: 883px;
 				height: 50px;
+				border-radius: 10px;
 				overflow: hidden;
 				position: absolute;
+				top: 0px;
+				left: 95px;
+				border: 1px solid #aaa;
+				cursor: pointer;
 			}
 			#sliderInner {
 				width: 6140px;
 				height: 50px;
 				position: relative;
 				left: -420px;
+				top: 0px;
 			}
 			.marker {
 				position: absolute;
-				left: 480px;
-				border-left:  3px solid rgba(0,0,0,0.5);
+				left: 537px;
+				top: 1px;
+				border-left:  2px solid rgba(0,0,0,0.5);
 				height: 50px;
 			}
 			.hour {
@@ -140,6 +182,12 @@
 			</div>
 			<div id="timer"></div>
 			<div id="slider">
+				<div id="play"></div>
+
+				<div id="speed1" class="speed" style="top: 0px">250</div>
+				<div id="speed2" class="speed" style="top:18px">500</div>
+				<div id="speed3" class="speed" style="top:36px">1000</div>
+
 				<div id="sliderWrapper">
 					<div id="sliderInner">
 						<div class="hour n" style="left:900px"><span>15:00</span></div>

clients/anim/main.js

@@ -1,4 +1,4 @@
-var startTime = (24*1 +  9)*60;
+var startTime = (24*1 + 14)*60;
 var minTime =   (24*0 + 12)*60;
 var maxTime =   (24*4 + 22)*60;
 
@@ -11,8 +11,8 @@ var height = 490;
 var gridSize = 3;
 var nearFieldRadius = 30;
 
-var timeStep = 500/1500; (250, 500, 1000)
-var decay = Math.pow(0.8, 1/timeStep);
+var timeStep = 1000/1500; (250, 500, 1000)
+var decay = Math.pow(0.8, 5);
 var stepSize = 50*timeStep;
 var frameDuration = 40;
 var radius = 1.4;
@@ -31,18 +31,35 @@ for (var x = -nearFieldGridRadius; x < width/gridSize+nearFieldGridRadius; x++)
 
 $(function () {
 	init();
-	start();
-	//setTimeout(stop, 60000);
+	setSpeed(2);
+	startPlay();
+	//update();
+	setTimeout(stopPlay, 10000);
 })
 
+function setSpeed(speed) {
+	timeStep = Math.pow(2, speed)*125/1500;
+	stepSize = 50*timeStep;
+	stepGridRadius = Math.ceil(stepSize/gridSize);
+	nearFieldGridRadius = Math.ceil(nearFieldRadius/gridSize);
+
+	$('.speed').removeClass('active');
+	$('#speed'+speed).addClass('active');
+}
+
 function init() {
 	context = $('#canvas')[0].getContext('2d');
 	clients = [];
 	data.matrix.forEach(function (times, index) {
-		clients[index] = {point:undefined, x:0, y:0, r:0, x0:0, y0:0, r0:0, index:index, lastEvent:0};
+		clients[index] = { point:undefined, x:0, y:0, r:0, x0:0, y0:0, r0:0, index:index, lastEvent:0 };
 		random[index] = Math.random();
 	});
 
+	$('#play').click(togglePlay);
+	$('#speed1').click(function () { setSpeed(1); });
+	$('#speed2').click(function () { setSpeed(2); });
+	$('#speed3').click(function () { setSpeed(3); });
+
 	var index = -1;
 	for (var time = -60; time <= (4*24+1)*60; time++) {
 		while (data.times[index+1] <= time) index++;
@@ -77,27 +94,33 @@ function init() {
 	})
 }
 
-function start() {
-	if (!interval) interval = setInterval(update, frameDuration);
+function startPlay() {
+	if (!interval) {
+		interval = setInterval(update, frameDuration);
+		$('#play').removeClass('pause');
+	}
 }
 
-function stop() {
+function stopPlay() {
 	if (interval) {
 		clearInterval(interval);
 		interval = false;
+		$('#play').addClass('pause');
 	}
 }
 
+function togglePlay() {
+	if (interval) stopPlay(); else startPlay();
+}
+
 function update() {
 	currentTime += timeStep;
 	if (currentTime > maxTime) {
 		currentTime = maxTime;
-		stop();
+		stopPlay();
 	}
 
-	if (currentTime < minTime) {
-		currentTime = minTime;
-	}
+	if (currentTime < minTime) currentTime = minTime;
 
 	renderTime();
 	updateData();
@@ -113,7 +136,7 @@ function renderTime() {
 	m = (m+100+'').substr(1);
 	$('#timer').html('Tag '+d+' - '+h+':'+m);
 
-	$('#sliderInner').css('left', -(currentTime-8*60));
+	$('#sliderInner').css('left', -(currentTime-441));
 }
 
 function updateData() {