SVG javascript UI project (San Francisco)

Hello. Take any old HTML5 browser. Make a basic HTML page with: 1 scalable SVG rectangle 1 SAVE button 1 RESET button 1 RECALL button When you mouse down within the rectangle a small SVG circle appears. You can drag the circle around the rectangle only. When you touch the rectangle again another small SVG circle appears. When you drag this circle around it can partially (but not fully) overlap the other circle so both are visible and either can be dragged. Hit the SAVE button and: a) the relative coordinates, relative size and layer of the circles are saved to a cookie (mimicking saving to a database) b) the rectangle is cleared of any circles -- this is also the function of the RESET button On your desktop computer resize the window to simulate a device with a different screen size. The rectangle should also resize. Hit the RECALL button and read the info from the cookie and insert circles at the same relative coordinates and same relative size and same layering as with the previously sized window. Drag the circles around. Repeat SAVE process. Resize window. RECALL. This needs to be done 2 ways: 1) old school javascript -- no jQuery 2) using [login to view URL] If you are a pro at this and have your own simple methodology -- great. Emphasis on simple. Restrictions: You MUST EASILY be accessible to San Francisco for face to face. We are right in the middle of the city by a MUNI subway stop. Code needs to be well commented. You must assign the rights for the code for payment. This leads to a position developing SVG UI's that work like flash and interact with a SQL Server DB. $100 bonus points if you can do this as a MS Visual Studio (Express for Web is fine also) project (yeah, yeah, I know, but this has to do with Azure) and are experienced in programming apps in this environment. The backend is .NET (please - no rails sermons).