jQuery record/play mouse moves

Question

demo

How it works:

Press the "record" button and start clicking in the red div, the black box will start to follow your clicks, use the mouse wheel inside the black box only to resize it. When you are done, press the play button. The reset button resets the coordinates and the counter.

It is not perfect, I'm a beginner in jQuery, but at least it works...

I'm writing this question because I want to implement some kind of a timer, that counts in milliseconds and every millisecond is stored in an array. And in that array, for every millisecond, the current coordinates and size of the box are stored, so when you run it, it will move and resize the box after the exact time interval in which you "recorded it".

Ex:

00:00 - top:0px, left:0px, width:50px, height:50px
00:10 - top:0px, left:0px, width:50px, height:50px
00:20 - top:0px, left:0px, width:50px, height:50px
00:30 - top:0px, left:0px, width:50px, height:50px
00:40 - top:110px, left:20px, width:50px, height:50px
...
01:40 - top:110px, left:20px, width:70px, height:70px
01:50 - top:310px, left:250px, width:70px, height:70px
...
04:20 - top:17px, left:231px, width:10px, height:10px
...
10:50 - top:502px, left:354px, width:100px, height:100px

I hope I explained it well..

Answer 1

Here you go: http://jsfiddle.net/markasoftware/dEXpY/26/ Sorry, no comments in the code, so you'll have to figure it out yourself. I also fixed the resizing bug that I said in the comment on your question, and I also made it so that when you click start the text in the record button changes back to record.