1 files changed, 111 insertions, 321 deletions

diff --git a/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js b/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js
index 003724bb..3a141b05 100755
--- a/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js
+++ b/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js
@@ -3,388 +3,178 @@ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
 (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
 </copyright> */
-
+ 
 /*
 Panel Container - A container for other panels
 */
 var Montage         = require("montage/core/core").Montage;
 var Component       = require("montage/ui/component").Component;
-var PropertiesPanel = require("js/panels/Properties/properties-panel").PropertiesPanel;
-var ColorPanel      = require("js/panels/Color/ColorPanel").ColorPanel;
-var CSSPanel        = require("js/panels/CSSPanel/CSSPanel").CSSPanel;
-var ComponentsPanel = require("js/panels/Components/ComponentsPanel").ComponentsPanel;
-var ProjectPanel    = require("js/panels/Project/ProjectPanel").ProjectPanel;
-var MaterialsPanel  = require("js/panels/Materials/MaterialsPanel").MaterialsPanel;
-var PresetsPanel    = require("js/panels/presets/presets-panel").PresetsPanel;
-
+ 
 exports.PanelContainer = Montage.create(Component, {
-    lastOffset: {
-        value:null
-    },
-    _collapsedHeight: {
-        value: 26
-    },
-    _isFirstAdjustableNonCollapsed: {
-        value:true
-    },
-    _spaceAvailable: {
-        value:null
-    },
-    _panelSelected : {
-        value: null
-    },
-    _isFirstDraw: {
-        value: false
-    },
-    _panels: {
-        value: []
-    },
 
-    skipPanelIndex: {
+    panelData: {
         value: null
     },
 
-    initPanelOrder: {
-        value: ['ColorPanel', 'PropertiesPanel','ComponentsPanel','ProjectPanel','CSSPanel','MaterialsPanel','PresetsPanel']
-    },
-
-    panelOrder: {
+    panels: {
         value: []
     },
 
-    deserializedFromTemplate : {
-        value: function() {
-           this.eventManager.addEventListener( "appLoaded", this, false);
+    panelController: {
+        value: null
+    },
 
-        }
+    currentPanelState: {
+        value: {}
     },
 
-    handleAppLoaded: {
+    templateDidLoad: {
         value: function() {
-            //Panels Loading
-            this.lastOffset = this.element.offsetHeight;
-
-            /* Old Settings
-            if( this.application.ninja.settings.getSetting(this.element.id, "panelOrder") != null) {
-                this.initPanelOrder = this.application.ninja.settings.getSetting(this.element.id, "panelOrder")
-            }
-            */
+            var pLen, storedData;
 
-            // if Panels already loaded no need to load again.
-            for(var i = 0; i < this.initPanelOrder.length; i++) {
-                this.addPanel(eval(this.initPanelOrder[i]));
-                this.panelOrder.push(this.initPanelOrder[i]);
+            // Loop through the panels to add to the repetition and get the saved state
+            pLen = this.panelData.panels.length;
 
-//              this.application.ninja.settings.setSetting(this.element.id, "panelOrder", this.panelOrder);
-            }
-
-            var hideSplitter = true;
+            // Get the saved panel state
+            storedData = this.application.localStorage.getItem("panels");
 
-            var that = this;
-            this._panels.forEach(function(obj) {
+            for(var i = 0; i < pLen; i++) {
 
-                var panelMenuName = obj.panelName.substring(0,  obj.panelName.indexOf('/') !== -1 ?  obj.panelName.indexOf('/'):  obj.panelName.length) + "Panel";
+                var p = this.panelData.panels[i];
 
-                that.application.ninja.appModel[panelMenuName] = obj.visible;
+                this.currentPanelState[p.name] = {};
+                this.currentPanelState.version = "1.0";
 
-                if (obj.visible) {
-                    hideSplitter = false;
+                if(storedData && storedData[p.name]) {
+                    p.collapsed = storedData[p.name].collapsed;
                 }
-            });
 
-            if (hideSplitter) {
-                this.panelSplitter.toggle();
-                this.panelSplitter.disabled = true;
-            }
+                this.currentPanelState[p.name].collapsed = p.collapsed;
 
-//            this.needsDraw = true;
+                this.panels.push(p);
+            }
 
-            this.addEventListener("change@appModel.PropertiesPanel", this, false);
-            this.addEventListener("change@appModel.ProjectPanel", this, false);
-            this.addEventListener("change@appModel.ColorPanel", this, false);
-            this.addEventListener("change@appModel.ComponentsPanel", this, false);
-            this.addEventListener("change@appModel.CSSPanel", this, false);
-            this.addEventListener("change@appModel.MaterialsPanel", this, false);
-            this.addEventListener("change@appModel.PresetsPanel", this, false);
+            this.application.localStorage.setItem("panels", this.currentPanelState);
         }
     },
-
-    handleEvent: {
-        value: function(e) {
-            this.togglePanel(e.propertyName);
+ 
+    prepareForDraw: {
+        value: function() {
+            window.addEventListener("resize", this, false);
         }
     },
-    
-    addPanel: {
-        value: function(panel) {
-            if (panel.init) {
-                panel.init();
-            }
-            this._panels.push(panel);
-            if (this.panelSplitter.disabled) {
-                this.panelSplitter.disabled = false;
-                this.panelSplitter.toggle();
-            }
+ 
+    handlePanelResizing: {
+        value: function(e) {
+            this._setPanelsSizes(e.target);
         }
     },
-    handlePanelCollapsed: {
+     
+    handleResize: {
          value: function(e) {
-
-            for(var i=0; i < this._panels.length; i++) {
-                if (e._event.detail.panelBase._uuid == this._panels[i]._uuid) {
-                    this.skipPanelIndex = i;
-                    this.handlePanelResized(i, true);
+            this._setPanelsSizes(null);
                 }
-            }
-        }
     },
-
-    handlePanelResizedStart : {
+ 
+    handleDropped: {
         value: function(e) {
-            for (var i = 0; i < this._panels.length; i++) {
-                if ( e._event.detail.element.parentNode.uuid == this.repeater.childComponents[i].element.uuid) {
-                    this.handlePanelResized(i);
+            var draggedIndex, droppedIndex = 0;
+            for(var i = 0; i< this.repeater.childComponents.length; i++ ) {
+                if (this.repeater.childComponents[i] === e._event.draggedComponent) {
+                    draggedIndex = i;
                 }
-            }
-        }
-    },
 
-    handlePanelResizedEnd : {
-        value: function(e) {
+                if (this.repeater.childComponents[i] === e._event.droppedComponent) {
+                    droppedIndex = i;