Online IDE - layout ui only

The Project The project is to design a desktop style UI using ExtJS or jQuery or another framework. I would like the functionality to be very similar to the Netbeans IDE skeleton. This includes: - MDI window - Pinning windows around the MDI container including north,south,east and west - Each window around MDI container will contain tabs. Each tab will have individual content and must be accessible via API - Tabs can be dragged/dropped to other windows. - Dragging a tab to an area with no window created will cause a new window to be created when dropped. While dragging the tab near the edge of the IDE (either north south east or west) a border outline will show for the purpose of notifying the user that the tab can be dropped. - Individual tabs can be shrunk to a band (around 20px in width or height depending on where the band is - north/south or west/east) on the edge of the IDE. - Windows will be able to be resized horizontally and vertically. - Windows will be able to be floated but also docked into the IDE. - Windows will be able to be removed and created as necessary. (See screenshots for example) - There must be an easy to use API to add new toolbox windows or activate a tab on an existing window. - It will be callback event driven, example, dropped tab into tab group, clicked close on a document window, floated window, docked window, undocked window (I am open to how this can work let me know your thoughts) Some ideas that I like [login to view URL] - [login to view URL] The windows that open in the ExtJS example -> [login to view URL] (Obviously with alot more extended functionality) This project is the Layout interface only. You do not need to worry about the content of each of the windows. I don't think this is a significantly time consuming task. Most of the functionality is already in built to the extjs framework. It just needs to be all connected together. Other Notes Like most IDE's you have the ability to remove or minimise a toolbox window to give you more space for editing your document in the main MDI window. I would like the ability to be able to click a button on the toolbox tab and to have it minimise to a vertical bar/horizontal bar on the side of the window. ExtJS i believe has the ability to do this by default, it just may need a little bit of extending. Lets say I have 2 toolbox tabs within a window and they take up the left hand side of the screen. If I click the button that will minimise the tab, it will create a vertical bar on the left hand side of the screen approx 20px in width (or whatever the default width is). The tab will disappear and its title will be displayed in the vertical bar that was just created. The text of the tab when displayed on the vertical bar should be Vertical also. (Is that possible with js/extjs). Now we are left with 1 Tab in a window that is visible and the other tab has been minimised to the vertical bar. If I now minimise the other tab in the window, it will add the title of that tab to the existing vertical bar that has been created and remove the tab from the window. When this happens, there will be no more tabs in the window, so the window will close as well. This will give the MDI are more space. (See [login to view URL], [login to view URL], [login to view URL]) This also has to work for windows aligned top and bottom. In the case a horizontal bar will be create the displays along the top of the main container window. this only has to be approx 20px in height but be the full width of the container. That will also have to work in the case where there is more than 1 window aligned to the current region - (top, right, bottom, left) (I have attached screenshots [login to view URL], [login to view URL],[login to view URL]) All ideas have been dropped down to screen shots. Please note, only post a proposal if you have exceptional English skills. This is the SKELETON LAYOUT ONLY. No code formatting functionality or anything else along those lines is necessary. It is just the layout functions.