Thinking out the visualized timeline

As of late, I've been diving into some of the popcorn.js to see what the best of way working out the visualized timeline would be.

I've come up with an idea of how it should work.



-Create variables to hold array of event tracks, and number of event tracks. Put number of event tracks into a safe state (0)


-When popcorn gets its media element, load the timeline data object with references to the media element (current and time), as well as a reference to the event tracks array and number of event tracks


-Draw a base for the visualized timeline that will have a current time cursor layer and event tracks layer on top


-When the current time changes, clear the layer containing the current time cursor, and add it back on at the appropriate spot.
(I'm a little worried this might be slow as every time the time changing, a removal and creation must happen)


-Whenever addTrackEvent is called, add that track into the track events array existing in the plugin, and add that track event onto the visualized timeline in the track event layer.
(This allows the plugin to keep track of track events that are created on the fly)


-A good idea would be to create a mouseover event to display a popup div with relevant data about a track event

Object for holding timeline data:
{
current: (current time in video - references video element's currentTime property)
time: (full video time - references video element's duration property)
tracks: (array holding event track objects - references a static array in the visualized timeline plugin)
nTracks: (number of tracks - references a static variables holdings number of even tracks in visualized timeline plugin)
}




So I have to figure out:
-How to get the media object upon popcorn instance creation
-How to have my plugin be notified upon track event creation/grab that track event to hold onto

I was a little worried about firing events at variable changes but I found a nice stackoverflow article showing how to create an object.watch method for the object prototype: http://stackoverflow.com/questions/1759987/detect-variable-change-in-javascript

The next few days should be interesting indeed.