1 files changed, 127 insertions, 156 deletions

diff --git a/js/panels/Panel.reel/Panel.js b/js/panels/Panel.reel/Panel.js
index c8dd0456..33f9b3a7 100755
--- a/js/panels/Panel.reel/Panel.js
+++ b/js/panels/Panel.reel/Panel.js
@@ -9,227 +9,198 @@ var Component = require("montage/ui/component").Component;
 
 exports.Panel = Montage.create(Component, {
 
-
-    reelDidLoad: {
-       value: function() {
-       }
+    name: {
+        value: "Panel"
     },
 
-    collapsedHeight: {
-        value:26
+    _collapsed: {
+        value: false
     },
 
-    _isFirstDraw: {
-        value:false
+    _height: {
+        value: 200
     },
 
-    _panelBase: {
-       value: null
+    minHeight: {
+        value: 200
     },
 
-    panelBase: {
-       get: function()
-        {
-            return this._panelBase;
-        },
-        set: function(value)
-        {
-            this._panelBase = value;
-            this.needsDraw = true;
-        }
-    },
-
-    _panelContent: {
+    maxHeight: {
         value: null
     },
 
-    panelContent: {
-        get: function()
-        {
-            return this._panelContent;
-        },
-        set: function(value)
-        {
-            if (this._panelContent === value) {
-                return;
-            }
-            this._panelContent = value;
-            this.needsDraw = true;
-        }
+    flexible: {
+        value: true
     },
 
-    collapseToggle: {
-        value: function() {
-            if (this.panelBase.forcedCollapse) {
-                this.panelBase.forcedCollapse = false;
-                this.panelBase.collapsed = false;
-                this.needsDraw = true;
+    _locked: {
+        value: false
+    },
 
-            } else {
-                this.panelBase.collapsed = !this.panelBase.collapsed;
-                this.needsDraw = true;
-            }
-            NJevent("panelCollapsed", this);
-        }
-},
+    isResizing: {
+        value: false
+    },
 
-    closePanel: {
-        value: function() {
-            NJevent("panelClose", this);
-        }
+    _resizedHeight: {
+        value: 0
     },
 
-    handleMouseover: {
-        value: function() {
-            this.element.draggable = true;
-        }
+    resizer: {
+        value: null
     },
 
-    handleMouseout: {
-        value: function() {
-            this.element.draggable = false;
-        }
+    modulePath: {
+        value: null
     },
 
-    _resizer: {
+    moduleName: {
         value: null
     },
 
-    resizer: {
+    disabled: {
+        value:false
+    },
+
+    collapsed: {
         get: function() {
-            return this._resizer;
+            return this._collapsed;
         },
         set: function(val) {
-            this._resizer = val;
+            if (this._collapsed !== val) {
+                this._collapsed = val;
+                this.needsDraw = true;
+            }
         }
     },
 
-
-    resized: {
-        value: function() {
-            this.panelBase.contentHeight = parseInt(this.element.style.height);
-            this.needsDraw = true;
+    height: {
+        get: function() {
+            if (this._height < this.minHeight) {
+                this._height = this.minHeight;
+            }
+            return this._height;
+        },
+        set: function(val) {
+            if(this._height !== val) {
+                this._height = val;
+                this.needsDraw = true;
+            }
         }
     },
 
-    //TODO: Find out why without This following function drop event wont fire ???
-    handleEvent: {
-        value:function(e) {
-            e.preventDefault();
-            e.stopImmediatePropagation();
-
+    locked: {
+        get: function() {
+            return this._locked;
+        },
+        set: function(val) {
+            if (this.flexible) {
+                this._locked = val;
+                this.needsDraw = true;
+            }
         }
     },
 
-    captureDragover: {
-        value:function(e) {
-            e.preventDefault();
-            e.stopImmediatePropagation();
-            this.element.style.backgroundColor = "#917B56";
+    handleBtnCollapseAction: {
+        value: function() {
+            this.collapsed = !this.collapsed;
+            this.needsDraw = true;
         }
     },
 
-    captureDragleave: {
+    handleBtnCloseAction: {
         value: function() {
-            this.element.style.backgroundColor = "";
+            this.panelContent.content = null;
         }
     },
 
-    handleDrop: {
-        value:function(e) {
-            e.stopPropagation(); // Stops some browsers from redirecting.
-            e.preventDefault();
-            this.element.style.backgroundColor = "";
-            NJevent("panelOrderChanged", this);
-        }
-    },
+    prepareForDraw: {
+        value: function() {
+            if(this.name === "Color") {
+                this.application.ninja.colorController.colorView = this.application.ninja.colorController.colorPanelBase.create();
+            }
 
-    handleDragstart: {
-        value:function(e) {
-            e.dataTransfer.effectAllowed = 'move';
-            e.dataTransfer.setData('text/html', this.element.innerHTML);
-            NJevent("panelSelected", this);
+            if(this.modulePath && this.moduleName) {
+                // Load the slot content
+                var that = this;
+                require.async(this.modulePath)
+                    .then(function(panelContent) {
+                        var componentRequire = panelContent[that.moduleName];
+                        that.panelContent.content = componentRequire.create();
+                    })
+                    .end();
+            }
         }
     },
 
-    handleDragEnter: {
-        value: function(e) {
-            this.element.classList.add("over");
+    handleResizeStart: {
+        value:function(e) {
+            this.isResizing = true;
+            this.needsDraw = true;
         }
     },
 
-    handleDragend: {
-        value:function() {
-
+    handleResizeMove: {
+        value:function(e) {
+            this._resizedHeight = e._event.dY;
+            this.needsDraw = true;
         }
     },
 
-
-    prepareForDraw: {
+    handleResizeEnd: {
+        value: function(e) {