This is getting really close.

controllers/scrubber.js

@@ -28,10 +28,12 @@ GUI.Scrubber = function(controller, timer) {
 	}
 	
 	this.controller.addChangeListener(function(newVal) {
+
+
 	if (!_this.playing) {
 		if (_this.timer.activePoint == null) {
-			console.log(_this, _this.timer.playhead, newVal);
 			_this.timer.activePoint = new GUI.ScrubberPoint(_this, _this.timer.playhead, newVal);
+			_this.add(_this.timer.activePoint);
 			_this.render();
 		} else { 
 			_this.timer.activePoint.value = newVal;
@@ -51,6 +53,8 @@ GUI.Scrubber = function(controller, timer) {
 	var position;
 	var height;
 	
+	var mx, pmx;
+	
 	this.__defineGetter__("width", function() {
 		return width;
 	});
@@ -61,7 +65,6 @@ GUI.Scrubber = function(controller, timer) {
 	
 	controller.domElement.insertBefore(this.domElement, controller.propertyNameElement.nextSibling);
 	
-	
 	this.render = function() {
 	
 		// TODO: if visible ...
@@ -100,7 +103,30 @@ GUI.Scrubber = function(controller, timer) {
 	
 	var scrub = function(e) {
 		var t = GUI.map(e.pageX, position.left, position.left+width, _this.timer.windowMin, _this.timer.windowMin+_this.timer.windowWidth);
+
+		
 		_this.timer.playhead = t;
+		
+		/*
+		if (t < _this.timer.windowMin + _this.timer.windowWidth/5) {
+			_this.timer.windowMin = _this.timer.playhead -_this.timer.windowWidth/5;
+		}
+		
+		if (t > _this.timer.windowMin + _this.timer.windowWidth - _this.timer.windowWidth/5) {
+			_this.timer.windowMin = _this.timer.playhead +_this.timer.windowWidth/5-_this.timer.windowWidth;
+		}*/
+		
+	}
+	
+	var dragActive = function(e) {
+	
+		mx = e.pageX;
+		var t = GUI.map(mx - pmx, 0, width, 0, _this.timer.windowWidth);		
+		_this.timer.activePoint.time += t;		
+		pmx = mx;
+		_this.sort();
+		_this.timer.playhead += t;
+		
 	}
 	
 	canvas.addEventListener('mousedown', function(e) {
@@ -108,10 +134,13 @@ GUI.Scrubber = function(controller, timer) {
 
 			_this.timer.activePoint = _this.timer.hoverPoint;
 			_this.timer.playhead = _this.timer.activePoint.time;
-
+			pmx = mx = e.pageX;
+			document.addEventListener("mousemove", dragActive, false);
+			
 		} else { 
 		
 			_this.timer.activePoint = null;
+			_this.timer.hoverPoint = null;
 			scrub(e);
 			document.body.style.cursor = "text";
 			document.addEventListener('mousemove', scrub, false);
@@ -134,6 +163,7 @@ GUI.Scrubber = function(controller, timer) {
 	
 	document.addEventListener('mouseup', function() {
 		document.body.style.cursor = "auto";
+		document.removeEventListener("mousemove", dragActive, false);
 		document.removeEventListener('mousemove', scrub, false);
 	}, false);
 	
@@ -161,20 +191,21 @@ GUI.Scrubber = function(controller, timer) {
 				}
 			}
 			
-			if (closestToLeft == null || closestToLeft.time > curTime) return;
+			if (closestToLeft != null && closestToLeft.time <= curTime) {
-			
-			var n = closestToLeft.next;
-			if (n != null) {
 				
-				// Interpolate.
+				var n = closestToLeft.next;
-				var t = GUI.map(curTime, closestToLeft.time, n.time, 0, 1);
+				if (n != null) {
-				t = closestToLeft.tween(t);
+					
-				var val = GUI.map(t, 0, 1, closestToLeft.value, n.value);
+					// Interpolate.
-				_this.controller.setValue(val);
+					var t = GUI.map(curTime, closestToLeft.time, n.time, 0, 1);
+					t = closestToLeft.tween(t);
+					var val = GUI.map(t, 0, 1, closestToLeft.value, n.value);
+					_this.controller.setValue(val);
+					
+				}
 				
 			}
 			
-			
 		} else { 
 			
 			for (var i = 0; i < _this.points.length; i++) {
@@ -221,8 +252,9 @@ GUI.Scrubber = function(controller, timer) {
 
 GUI.ScrubberPoint = function(scrubber, time, value) {
 	
-	var _this = this;
 	
+	
+	var _this = this;
 		
 	var g = scrubber.g;
 	var timer = scrubber.timer;
@@ -243,6 +275,11 @@ GUI.ScrubberPoint = function(scrubber, time, value) {
 		return t;
 	};
 	
+	this.remove = function() {
+		scrubber.points.splice(scrubber.points.indexOf(this), 1);
+		scrubber.render();
+	};
+	
 	this.isHovering = function(xx) {
 		return xx >= x-rectSize/2 && xx <= x+rectSize/2;
 	};
@@ -264,6 +301,9 @@ GUI.ScrubberPoint = function(scrubber, time, value) {
 	this.__defineGetter__("time", function() {
 		return time;
 	});
+	this.__defineSetter__("time", function(s) {
+		time = s;
+	});
 	
 	this.render = function() {
 	
@@ -271,10 +311,20 @@ GUI.ScrubberPoint = function(scrubber, time, value) {
 
 		if (x >= 0 && x <= 1) {
 			x = Math.round(GUI.map(x, 0, 1, 0, scrubber.width));
+		} else { 
+			return;
 		}
 		
 		y = scrubber.height/2;
 
+		if (scrubber.timer.activePoint == this) {
+			g.fillStyle = "#fff"; //
+		} else if (scrubber.timer.hoverPoint == this) {
+			g.fillStyle = "#ddd";
+		} else { 
+			g.fillStyle = "#ccc";
+		}
+		
 		switch (type) {
 		
 			case "number":
@@ -297,12 +347,11 @@ GUI.ScrubberPoint = function(scrubber, time, value) {
 					g.lineTo(x, y);
 					g.stroke();
 					
-					
 				}		
 				
 				g.translate(x, y);
 				g.rotate(Math.PI/4);
-				g.fillStyle = c1;
+			//	g.fillStyle = c1;
 				g.fillRect(-rectSize/2, -rectSize/2, rectSize, rectSize);
 				g.restore();
 						
@@ -311,13 +360,6 @@ GUI.ScrubberPoint = function(scrubber, time, value) {
 			default:	
 				g.save();
 				g.translate(x-barSize/2, 0);
-				if (scrubber.timer.activePoint == this) {
-					g.fillStyle = "red"; //
-				} else if (scrubber.timer.hoverPoint == this) {
-					g.fillStyle = "green";
-				} else { 
-					g.fillStyle = "blue";
-				}
 				//g.fillStyle = c1;
 				g.fillRect(0, 0, barSize/2, scrubber.height-1);
 				//g.fillStyle = c2;

controllers/slider.js

@@ -17,7 +17,6 @@ GUI.Slider = function(numberController, min, max, step, initValue) {
 	
 	this.domElement.appendChild(this.fg);
 	
-	
 	this.__defineSetter__('value', function(e) {
 		var pct = GUI.map(e, min, max, 0, 100);
 		this.fg.style.width = pct+"%";
@@ -39,7 +38,6 @@ GUI.Slider = function(numberController, min, max, step, initValue) {
 		onDrag(e);
 	}, false);
 	
-	
 	document.addEventListener('mouseup', function(e) {
 		_this.domElement.setAttribute('class', 'guidat-slider-bg');
 		_this.fg.setAttribute('class', 'guidat-slider-fg');
@@ -50,4 +48,4 @@ GUI.Slider = function(numberController, min, max, step, initValue) {
 	
 	this.value = initValue;	
 		
-}
+}

controllers/timer.js

@@ -29,6 +29,24 @@ GUI.Timer = function(gui) {
 		return d.getTime();
 	}
 	
+	window.addEventListener("keyup", function(e) {
+		switch (e.keyCode) {
+			case 32:
+				_this.playPause();
+				break;
+			case 13: 
+				_this.stop();
+				break;
+			case 8: 
+				if (_this.activePoint != null) {
+					_this.activePoint.remove();
+					_this.activePoint = null;
+				}
+				break;
+		}
+		console.log(e.keyCode);
+	}, false);
+	
 	this.__defineGetter__("windowMin", function() {
 		return windowMin;
 	});
@@ -59,6 +77,9 @@ GUI.Timer = function(gui) {
 	this.__defineSetter__("playhead", function(t) {
 		lastPlayhead = playhead;
 		playhead = t;
+		if (playing) {
+			windowMin += ((playhead-windowWidth/2)-windowMin)*0.3;
+		}
 		for (var i = 0; i < playListeners.length; i++) {
 			playListeners[i].call(this, playhead, lastPlayhead);
 		}
@@ -96,10 +117,10 @@ GUI.Timer = function(gui) {
 		}
 	}
 	
-	
 	this.stop = function() {
 		this.pause();
 		this.playhead = 0;
+		this.windowMin = 0;	
 	};
 	
 	this.addPlayListener = function(fnc) {

index.html

@@ -49,9 +49,9 @@
                            .at(3000, "shit");
                         
                         // Sliders with min and max
-                       // gui.add(fizzyText, "maxSize", 0.5, 7);
+                       	gui.add(fizzyText, "maxSize", 0.5, 7);
-                        //gui.add(fizzyText, "growthSpeed", 0.01, 1);
+                        gui.add(fizzyText, "growthSpeed", 0.01, 1);
-                        //gui.add(fizzyText, "speed", 0.1, 2);
+                        gui.add(fizzyText, "speed", 0.1, 2);
 
                         // Sliders with min, max and increment.
                         gui.add(fizzyText, "noiseStrength", 10, 100, 5).