Develop html5 based page with 3 separate containers - 13/12/2017 12:10 EST

Javascript based HTML5 page, no special libraries. Need simple area with 3 containers. Initiate with all containers expanded. (See [login to view URL]) Three containers as follows: Left container needs to be a functioning explorer Both right and bottom/right containers are empty Right container will be tab based and will open tabs as selected from explorer All containers can be adjusted by dragging “channel” separating them, which would increase/decrease area and decrease/adjoining area. (See [login to view URL]) All containers need to have elevators to scroll to show full different parts of container Minimize buttons will minimize container to a "ribbon" ([login to view URL]) Maximize button will take the full space, minimizing the area containers (See [login to view URL]) Restore button will open container without impacting whatever size the other containers are ———————————— For explorer container Each element will have two icons - for folder items, the first icon will be either a triangle pointing right or pointing down, depending on state of folder, the second icon will be a closed or open folder depending on state of folder - for chart items, the first icon is a spacer icon, and the second icon is a simple icon. (I should be able to specify what icons to put in all places) Click on arrow once click to expand folder and changes arrow from pointing to the right to pointing down. Click on text of folder two clicks to expand folder and changes arrow from pointing to the right to pointing down. Double Click on Chart to open If Open, activate tab for that selected item Hover over tab text shows entire path (No image) Explorer container is populated with Ajax calls that will return json as follows: example 1 Uri: http://domain/api/map/explorer?path= {“”:[ {“name”:”amcolumn”,”type”:”folder”}, {“name”:”amline”,”type”:”folder”} ] } example 2 Uri: http://domain/api/map/explorer?path=amline {“amline”:[ {“name”:”amcolumn”,”type”:”folder”}, {“name”:”amline”,”type”:”folder”}, {“name”:”ampie”,”type”:”folder”}, {“name”:”amxy”,”type”:”folder”}, {“name”:”amxy”,”type”:”folder”}, {“name”:”amcolumn”,”type”:”folder”}, {“name”:”amline”,”type”:”folder”}, {“name”:”ampie”,”type”:”folder”}, {“name”:”amxy”,”type”:”folder”}, {“name”:”amxy”,”type”:”folder”}, {“name”:”amcolumn”,”type”:”folder”}, {“name”:”amline”,”type”:”folder”}, {“name”:”Chart 9”,”type”:”folder”} ] example 3 Uri: http://domain/api/map/explorer?path=amline|amxy|pdci|amchart {“amline|amxy|pdci|amchart”:[ {“name”:”amcolumn”,”type”:”folder”}, {“name”:”amline”,”type”:”folder”}, {“name”:”amxy”,”type”:”folder”}, {“name”:”amxy”,”type”:”folder”}, {“name”:”Chart”,”type”:”folder”} {“name”:”Chart 2”,”type”:”folder”} {“name”:”Chart 3”,”type”:”folder”} {“name”:”Chart 4”,”type”:”folder”} {“name”:”Chart 5”,”type”:”folder”} {“name”:”Chart 6”,”type”:”folder”} {“name”:”Chart 7”,”type”:”folder”} ] } —————————— For second container will contain tabs for opened items: When Too Many open tabs an >> icon is added a counter is kept of items not visible (see [login to view URL]) When Too Many tabs open and >> icons clicked, dropdown appears (See [login to view URL]) —————————— Must be responsive (I should be able to view this through a mobile device)