1 files changed, 113 insertions, 166 deletions

diff --git a/js/panels/Panel.reel/Panel.js b/js/panels/Panel.reel/Panel.js
index c8dd0456..e0bf3f18 100755
--- a/js/panels/Panel.reel/Panel.js
+++ b/js/panels/Panel.reel/Panel.js
@@ -9,227 +9,174 @@ var Component = require("montage/ui/component").Component;
 
 exports.Panel = Montage.create(Component, {
 
-
-    reelDidLoad: {
-       value: function() {
-       }
-    },
-
-    collapsedHeight: {
-        value:26
-    },
-
-    _isFirstDraw: {
-        value:false
-    },
-
-    _panelBase: {
-       value: null
-    },
-
-    panelBase: {
-       get: function()
-        {
-            return this._panelBase;
+    name: { value: "Panel" },
+    collapsedHeight: {value: 26},
+    _collapsed: {value: false},
+    _height: { value: 200 },
+    minHeight: {value: 200 },
+    maxHeight: { value: null},
+    flexible: {value: true},
+    _locked: { value: false},
+    isResizing: {value: false },
+    resizer: {value: null },
+    modulePath: {value: null},
+    moduleName: {value: null},
+    _contentComponent: {value: null},
+
+    contentComponent: {
+        get: function() {
+            return this._contentComponent;
         },
-        set: function(value)
-        {
-            this._panelBase = value;
-            this.needsDraw = true;
+        set: function(val) {
+            if (val !== null && val !== this._contentComponent) {
+                this.panelContent.content = val;
+                this.panelContent.needsDraw = true;
+                this._contentComponent = val;
+            }
         }
     },
 
-    _panelContent: {
-        value: null
-    },
-
-    panelContent: {
-        get: function()
-        {
-            return this._panelContent;
+    collapsed: {
+        get: function() {
+            return this._collapsed;
         },
-        set: function(value)
-        {
-            if (this._panelContent === value) {
-                return;
+        set: function(val) {
+            if (this._collapsed !== val) {
+                this._collapsed = val;
+                this.needsDraw = true;
             }
-            this._panelContent = value;
-            this.needsDraw = true;
         }
     },
 
-    collapseToggle: {
-        value: function() {
-            if (this.panelBase.forcedCollapse) {
-                this.panelBase.forcedCollapse = false;
-                this.panelBase.collapsed = false;
-                this.needsDraw = true;
-
-            } else {
-                this.panelBase.collapsed = !this.panelBase.collapsed;
+    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;
             }
-            NJevent("panelCollapsed", this);
-        }
-},
-
-    closePanel: {
-        value: function() {
-            NJevent("panelClose", this);
-        }
-    },
-
-    handleMouseover: {
-        value: function() {
-            this.element.draggable = true;
-        }
-    },
-
-    handleMouseout: {
-        value: function() {
-            this.element.draggable = false;
         }
     },
 
-    _resizer: {
-        value: null
+    _resizedHeight: {
+        value: 0
     },
 
-    resizer: {
+    locked: {
         get: function() {
-            return this._resizer;
+            return this._locked;
         },
         set: function(val) {
-            this._resizer = val;
+            if (this.flexible) {
+                this._locked = val;
+                this.needsDraw = true;
+            }
         }
     },
 
-
-    resized: {
+    handleBtnCollapseAction: {
         value: function() {
-            this.panelBase.contentHeight = parseInt(this.element.style.height);
+            this.collapsed = !this.collapsed;
             this.needsDraw = true;
         }
     },
 
-    //TODO: Find out why without This following function drop event wont fire ???
-    handleEvent: {
-        value:function(e) {
-            e.preventDefault();
-            e.stopImmediatePropagation();
-
-        }
-    },
-
-    captureDragover: {
-        value:function(e) {
-            e.preventDefault();
-            e.stopImmediatePropagation();
-            this.element.style.backgroundColor = "#917B56";
+    handleBtnCloseAction: {
+        value: function() {
+            this.panelContent.content = null;
         }
     },
 
-    captureDragleave: {
+    prepareForDraw: {
         value: function() {
-            this.element.style.backgroundColor = "";
+            //TODO: This line should not be here this line hits each time a panel is loaded. Will Need to move to instance call;
+            this.application.ninja.colorController.colorView = this.application.ninja.colorController.colorPanelBase.create();
+            var myContent;
+            var that = this;
+
+            myContent = require.async(this.modulePath)
+                .then(function(panelContent) {
+                    var componentRequire = panelContent[that.moduleName];
+                    that.contentComponent = componentRequire.create();
+                })
+                .end();
         }
     },
 
-    handleDrop: {
+    handleResizeStart: {
         value:function(e) {
-            e.stopPropagation(); // Stops some browsers from redirecting.
-            e.preventDefault();
-            this.element.style.backgroundColor = "";
-            NJevent("panelOrderChanged", this);
+            this.isResizing = true;
+            this.needsDraw = true;
         }
     },
 
-    handleDragstart: {
+    handleResizeMove: {
         value:function(e) {
-            e.dataTransfer.effectAllowed = 'move';
-            e.dataTransfer.setData('text/html', this.element.innerHTML);
-            NJevent("panelSelected", this);
+            this._resizedHeight = e._event.dY;
+            this.needsDraw = true;
         }
     },
 
-    handleDragEnter: {
+    handleResizeEnd: {
         value: function(e) {
-            this.element.classList.add("over");
-        }
-    },
-
-    handleDragend: {
-        value:function() {
-
-        }
-    },
-
-
-    prepareForDraw: {
-        value:function() {
-            if (!this._isFirstDraw) {
-                this._isFirstDraw = true;
-
-                // Initialize Panel
-                // Drag Drop Functions
-                this.element.addEventListener("drop", this, false);
-                this.element.addEventListener("dragover", this, true);
-                this.element.addEventListener("dragleave", this, true);
+            this.height += this._resizedHeight;
+            this._resizedHeight = 0;
+            this.isResizing = false;
+            this.needsDraw = true;