I am looking to implement a new user interface for my upcoming website which I wish to act kind of like a smartphone interface. Essentially what I require is for there to be a fixed bar at the bottom of the page which stretches across the entire width of the page, along it are 5 icons (much like the ones at the bottom of the iPhone screen). The user can then drag an icon off of the bar into the main part of a page where a subwindow expands out in that location containing a different page, perhaps using iframes. The user can then click a "x" in the top right of the window and it shrinks back down again and the icon reappears on the bottom bar.
For example if the user drags a phone icon off of the bottom bar into the top left corner then a window stretches out containing [url removed, login to view] or whatever, the relevant contact page, in the top left corner. Then if the user drags another window out, say a news icon then [url removed, login to view] appears in that window wherever the icon is dropped and in the other window the contact information still remains. I want all of this to be seamless so when the icon is dragged off of the bar the other icons should smoothly readjust to the centre and when an icon is dropped it should disappear and the window should expand outwards. When the "x" is then pushed the same should happen but in reverse.
So as to better illustrate my point I have included an image explaining what I require.
What I need:
-Logo and design of the interface (not much, not any window content nor any of the icons (dummy ones can be used) but just the window border, the base bar and the background).
-The coding of the layout so it does what was explained above
I have been told by a colleague that it is very simple coding wise and that he could do it in a matter of hours but he cannot do graphics design and I'd rather have it all done at once.
If anyone would like any more information or to provide me with relevant examples then feel free to drop me a message!