Write some Software

Job description - A reasonably simple, but adaptive graphical timeline element needs to be created, that can be inserted into the top (or bottom) of an otherwise very complex online, Web-based sound editor. No functionality is needed, only the visualization. The Timeline element (Canvas, Div, etc) pixel size (Horizental x Vertical pixelsize) must be resizeable at any time, by simple Javacript / JQuery calls. There will be other interactive elements on top of the timeline, so it must be in the background (its Z-index must be freely set). The Timeline Starting Time, and the Timeline Ending Time must also be changable any time by Javascript / Jquery calls. Starting/Ending position will be given in (Float) Seconds. The Timeline should display different -increasingly emphasized - markings for Seconds, 5 Second, 10 Second, 30 Seconds an 1 Minute and 5 minute, etc. time intervals. (Please see the example attached) Timestamp Text titles should be drawn automatically, depending on the physical Pixel Width and the actual (Full) Time Interval covered by the timeline, with the following approximate (or advised) 'rules' - as an example - If the Timeline's interval length is A) 0-1 Minutes, All seconds should have their text title, but only the Second part (:ss). All 5, 10, and 30 second Markings and Texts should be larger, in this order and magnitude. All 10-Seconds and 30 Second markings should show the Full timecode (mm:ss) B) 1-5 Minutes, Second markings do not have Title Text, and markings are faint (5-second markings are stronger, but no text either). ALL 10 seconds should have their text title, but only the Second part (:ss). All 30 second and 1 minute Markings and their Texts should be larger, in this order and magnitude. All 30-Seconds and 1 Minute markings should show the Full timecode (mm:ss) C) 5-30 Minutes, Second and 5-second markings are not shown. 10 second markings are shown, but faint, and do not have Title Text. 10 second markings are stronger, but still no text. All 30 seconds and 1 Minute should have their text title, but 30 second markings only show the Seconds part (:ss). All 1 minute and 5 minute Markings and their Texts should be larger, in this order and magnitude. All 5 Minute markings should show the Full timecode (mm:ss). D) Above 30 Minutes the same applies, but only 5-minute markings have the full mm:ss text (Minutes only have the mm part) E) Above 1 hour, the same applies, but only 5 minute, 10 minute, 30 minute and 1 hour marking are shown, and only every 10-minutes, 30 minutes and hour markings have their full text (the latest in hh:mm:ss format) (Note that the above are NOT absolutely fixed rules, only describe he basic idea on how to change the timeline as it widens/shortens in time. It should simply look good, with dinamically adaptive markings and their texts sown, if there is enough pixel space.) The attached Jpeg file shows the basic idea for markings, their relative height, line width and text size / width. Pretty self-explinatory. The task can be realized in WebGL, or simply by any reasonable Javascript technique, but it MUST NOT contain tens or hunderds of sub-elements (this would cause a huge load on the user's browser). A very simple documentation - ie. a few explainatory lines must be provided for the programmers of the external Music Editor itself on how to Insert the Timeline code, how to call its Resize function, and well as how to change the Starting / Ending time position (and redraw) the changes as the users navigate in the editor. The project should be realized in max. 30 days. Happy bidding, thank You!