Java Script Task

I need a JavaScript page with the following features. Layout (nothing fancy): 1. On top there should be a div containing 5 buttons. 2. Below it another div. Ideally 700px wide and 500px tall. This is the drawing area. Functionality: Overview: The idea is to be able to draw DIVs and resize them by dragging one of the corners. Details. Button 1: ADD DIV. When the user clicks on Button 1 and then clicks on the drawing area, a relatively positioned div must be placed at the point where the user clicked. Give it default attributes like "border:1px solid black". Button 2: RESIZE DIV When the user clicks this and then clicks on the DIV, the DIV colour should change to BLUE from the default. Ideally, if you can have 4 cursor types as the user moves the mouse pointer to each corner of the div it will be great. Then when the user 'drags' the mouse in a direction, it must resize the div. On releasing the mouse, the dimensions should be updated automatically. It should also turn border color back to its original. i.e., if it was black, it must go back to it. Button 3: MOVE. Once clicked, when the user 'drags' a DIV, it should move to a new location. Also the mouse pointer while dragging must be a 4-sided arrow. Button 4: REMOVE Div. When clicked, the next div within the drawing area that is clicked must be removed. Button 5: SAVE On clicking this, the divs in the drawing area need to be saved. I really don't want to save it. Rather, if the whole thing can be echoed into a text area, showing the html behind it, this would be sufficient. IMPORTANT: 1. I need this done in 2 days 2. You must NOT use any third-party libary (eg: JQUERY). 3. You must NOT use any copyrighted material - not even open source. 4. This must be your own work. 5. The code becomes my property and all rights to it become mine. 6. The code must be well commented with good indenting and meaningful variable names. 7. It must work on all major browsers - eg: IE6 and above, FF, Opera, Chrome Thank you!