 			stop: dragger
 			cancel: false
 			stack: ".curve-pointer"
+
+		$(canvas).on 'mousemove', (e) => @timeDelay e
+
 
 		@plotCurve()
 

		]

	timeDelay : (e) ->
		@context.font = "14px times"
		@context.fillStyle = "rgba(0, 0, 0, 0.4)"
		mx = e and (e.offsetX or e.clientX - $(e.target).offset().left)
		my = e and (e.offsetY or e.clientY - $(e.target).offset().top)
		w = @context.canvas.width
		h = @context.canvas.height
		adj = (h - w) / 2
		if not e or e.type isnt "mousemove" or not mx or not my
			@context.fillText "DURATION", w / 3.5, w + adj + 30
			@context.fillText "TRANSITION", w / 3.5, adj - 10
		else
			ah = h - 2.0 * adj
			parent = $("#cubic-bezier").parent()
			pdh = parent.outerHeight(true) - parent.innerHeight()
			transition = parseInt((+(((ah - (my - pdh - adj)) / ah).toFixed(2))) * 100)
			delay = parseInt(Math.ceil(mx / w * 100))
			@context.fillText "DURATION(" + delay + "%)", w / 3.5, w + adj + 30
			@context.fillText "TRANSITION(" + transition + "%)", w / 3.5, adj - 10

	drawPoints : (points) ->
		throw "Invalid points: " + points  if not points or points.length isnt 4

		y1 = +(((ah - (p0.y - pdh - adj)) / ah).toFixed(2))
		x2 = +(((p1.x - pdw) * 1.0 / w).toFixed(2))
		y2 = +(((ah - (p1.y - pdh - adj)) / ah).toFixed(2))

		fph = $("#FP0").height() - 2
		fpw = $("#FP0").width() - 2

