From 0a500496236bedbdd9fbbcb3d841a195b3e5fc0f Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Thu, 1 Mar 2012 13:38:44 -0800
Subject: stage and elements fixes

- Resizing the iframe container when resizing the stage
- Removing 3d rules from elements when adding them
- Adding a name property in the pi

Signed-off-by: Valerio Virgillito <valerio@motorola.com>
---
 js/panels/properties/content.reel/content.html | 21 +++++++++++++++++
 js/panels/properties/content.reel/content.js   | 31 +++++++++++++++++++++-----
 2 files changed, 47 insertions(+), 5 deletions(-)

(limited to 'js/panels')

diff --git a/js/panels/properties/content.reel/content.html b/js/panels/properties/content.reel/content.html
index ab485323..bf11e215 100755
--- a/js/panels/properties/content.reel/content.html
+++ b/js/panels/properties/content.reel/content.html
@@ -58,6 +58,22 @@
                 }
             },
 
+            "elementNameAttribute": {
+                "module": "montage/ui/textfield.reel",
+                "name": "Textfield",
+                "properties": {
+                    "element": {"#": "elementNameAttribute"},
+                    "readOnly": false
+                },
+                "bindings": {
+                    "value": {
+                        "boundObject": {"@": "owner"},
+                        "boundObjectPropertyPath": "nameAttribute",
+                        "oneway": false
+                    }
+                }
+            },
+
 
             "PosSizeSection": {
                 "module": "js/panels/properties/section.reel",
@@ -128,6 +144,7 @@
                     "element":              {"#": "propertiesPanel"},
                     "elementNameInput":     {"@": "elementNameInput1"},
                     "elementId":            {"@": "elementID"},
+                    "elementNameAttribute": {"@": "elementNameAttribute"},
                     "positionSize":         {"@": "PosSize"},
                     "threeD":               {"@": "threeDProperties"}
                 }
@@ -150,6 +167,10 @@
                 <label id="lblClass">Class:</label>
                 <article class="fieldRow"><input type="text" id="elementClassName" class="nj-skinned" /></article>
             </section>
+            <section class="fieldCol">
+                <label id="lblName">Name:</label>
+                <article class="fieldRow"><input type="text" id="elementNameAttribute" class="nj-skinned" /></article>
+            </section>
         </section>
         <section id="PosSize"></section>
         <section id="customSections">
diff --git a/js/panels/properties/content.reel/content.js b/js/panels/properties/content.reel/content.js
index 72c02ffd..d4b0edc4 100755
--- a/js/panels/properties/content.reel/content.js
+++ b/js/panels/properties/content.reel/content.js
@@ -25,6 +25,10 @@ exports.Content = Montage.create(Component, {
         value: null
     },
 
+    nameAttribute: {
+        value: null
+    },
+
     customSections: {
         value: []
     },
@@ -72,6 +76,9 @@ exports.Content = Montage.create(Component, {
 
             this.elementId.element.addEventListener("blur", this, false);
             this.elementId.element.addEventListener("keyup", this, false);
+
+            this.elementNameAttribute.element.addEventListener("blur", this, false);
+            this.elementNameAttribute.element.addEventListener("keyup", this, false);
         }
     },
 
@@ -95,10 +102,18 @@ exports.Content = Montage.create(Component, {
      */
     handleBlur: {
         value: function(event) {
-            if(this.application.ninja.selectedElements.length) {
-                ElementsMediator.setAttribute(this.application.ninja.selectedElements[0], "id", this.elementId.value, "Change", "pi");
-            } else {
-                ElementsMediator.setAttribute(this.application.ninja.currentDocument.documentRoot, "id", this.elementId.value, "Change", "pi", this.application.ninja.currentDocument.documentRoot.elementModel.id);
+            console.log(event.target);
+            if(event.target.id === "elementID") {
+                if(this.application.ninja.selectedElements.length) {
+                    ElementsMediator.setAttribute(this.application.ninja.selectedElements[0], "id", this.elementId.value, "Change", "pi");
+                } else {
+                    ElementsMediator.setAttribute(this.application.ninja.currentDocument.documentRoot, "id", this.elementId.value, "Change", "pi", this.application.ninja.currentDocument.documentRoot.elementModel.id);
+                }
+            } else if(event.target.id === "elementNameAttribute") {
+                if(this.application.ninja.selectedElements.length) {
+                    //ElementsMediator.setAttribute(this.application.ninja.selectedElements[0], "name", this.elementNameAttribute.value, "Change", "pi");
+                    this.application.ninja.selectedElements[0]._element.setAttribute("name", this.elementNameAttribute.value);
+                }
             }
         }
     },
@@ -106,7 +121,11 @@ exports.Content = Montage.create(Component, {
     handleKeyup: {
         value: function(event) {
             if(event.keyCode === 13) {
-                this.elementId.element.blur();
+                if(event.target === "elementID") {
+                    this.elementId.element.blur();
+                } else if(event.target === "elementNameAttribute") {
+                    this.elementNameAttribute.element.blur();
+                }
             }      
         }
     },
@@ -164,6 +183,7 @@ exports.Content = Montage.create(Component, {
             this.elementName = "Stage";
             this.elementId.value = stage.elementModel.id;
             this.elementClassName = "";
+            this.nameAttribute = "";
 
             this.positionSize.disablePosition = true;
             this.threeD.disableTranslation = true;
@@ -226,6 +246,7 @@ exports.Content = Montage.create(Component, {
             this.elementName = el.elementModel.selection;
             this.elementId.value = el.getAttribute("id") || "";
             this.elementClassName = el.getAttribute("class");
+            this.nameAttribute = el.getAttribute("name") || "";
 
             this.positionSize.disablePosition = false;
             this.threeD.disableTranslation = false;
-- 
cgit v1.2.3


From 42d78d11764dca5df6c7d01f3221f398bee17152 Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Thu, 1 Mar 2012 15:00:48 -0800
Subject: Squashed commit of the workspace-bugs

- Panels fixes.

Signed-off-by: Valerio Virgillito <valerio@motorola.com>
---
 js/panels/Color/colorpanel.js                      |  11 +-
 .../Color/colorpanelbase.reel/colorpanelbase.js    |  13 +
 js/panels/Panel.reel/Panel.html                    | 116 +++++-
 js/panels/Panel.reel/Panel.js                      | 279 ++++++-------
 .../PanelContainer.reel/PanelContainer.html        | 116 +++++-
 .../PanelContainer.reel/PanelContainer.js          | 432 ++++++---------------
 js/panels/Resizer.js                               |  10 +-
 js/panels/Timeline/Layer.reel/Layer.js             |   2 +-
 js/panels/drag-drop-composer.js                    | 136 +++++++
 js/panels/properties.reel/properties.css           | 299 ++++++++++++++
 js/panels/properties.reel/properties.html          | 161 ++++++++
 js/panels/properties.reel/properties.js            | 394 +++++++++++++++++++
 .../properties.reel/section.reel/section.html      |  50 +++
 js/panels/properties.reel/section.reel/section.js  |  30 ++
 .../color-select.reel/color-select.html            |  53 +++
 .../custom-rows/color-select.reel/color-select.js  |  83 ++++
 .../custom-rows/dual-row.reel/dual-row.html        |  67 ++++
 .../sections/custom-rows/dual-row.reel/dual-row.js |  53 +++
 .../custom-rows/single-row.reel/single-row.html    |  47 +++
 .../custom-rows/single-row.reel/single-row.js      |  50 +++
 .../sections/custom.reel/custom.html               |  61 +++
 .../properties.reel/sections/custom.reel/custom.js | 356 +++++++++++++++++
 .../position-and-size.reel/position-and-size.css   |  14 +
 .../position-and-size.reel/position-and-size.html  | 142 +++++++
 .../position-and-size.reel/position-and-size.js    | 264 +++++++++++++
 .../sections/three-d-view.reel/three-d-view.html   | 348 +++++++++++++++++
 .../sections/three-d-view.reel/three-d-view.js     | 265 +++++++++++++
 js/panels/properties/content.reel/content.css      | 299 --------------
 js/panels/properties/content.reel/content.html     | 161 --------
 js/panels/properties/content.reel/content.js       | 394 -------------------
 js/panels/properties/properties-panel.js           |  15 -
 js/panels/properties/section.reel/section.html     |  50 ---
 js/panels/properties/section.reel/section.js       |  30 --
 .../color-select.reel/color-select.html            |  53 ---
 .../custom-rows/color-select.reel/color-select.js  |  83 ----
 .../custom-rows/dual-row.reel/dual-row.html        |  67 ----
 .../sections/custom-rows/dual-row.reel/dual-row.js |  53 ---
 .../custom-rows/single-row.reel/single-row.html    |  47 ---
 .../custom-rows/single-row.reel/single-row.js      |  50 ---
 .../properties/sections/custom.reel/custom.html    |  61 ---
 .../properties/sections/custom.reel/custom.js      | 356 -----------------
 .../position-and-size.reel/position-and-size.css   |  14 -
 .../position-and-size.reel/position-and-size.html  | 142 -------
 .../position-and-size.reel/position-and-size.js    | 264 -------------
 .../sections/three-d-view.reel/three-d-view.html   | 348 -----------------
 .../sections/three-d-view.reel/three-d-view.js     | 265 -------------
 js/panels/resize-composer.js                       | 121 ++++++
 47 files changed, 3439 insertions(+), 3286 deletions(-)
 create mode 100644 js/panels/drag-drop-composer.js
 create mode 100755 js/panels/properties.reel/properties.css
 create mode 100755 js/panels/properties.reel/properties.html
 create mode 100755 js/panels/properties.reel/properties.js
 create mode 100755 js/panels/properties.reel/section.reel/section.html
 create mode 100755 js/panels/properties.reel/section.reel/section.js
 create mode 100755 js/panels/properties.reel/sections/custom-rows/color-select.reel/color-select.html
 create mode 100755 js/panels/properties.reel/sections/custom-rows/color-select.reel/color-select.js
 create mode 100755 js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.html
 create mode 100755 js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.js
 create mode 100755 js/panels/properties.reel/sections/custom-rows/single-row.reel/single-row.html
 create mode 100755 js/panels/properties.reel/sections/custom-rows/single-row.reel/single-row.js
 create mode 100755 js/panels/properties.reel/sections/custom.reel/custom.html
 create mode 100755 js/panels/properties.reel/sections/custom.reel/custom.js
 create mode 100755 js/panels/properties.reel/sections/position-and-size.reel/position-and-size.css
 create mode 100755 js/panels/properties.reel/sections/position-and-size.reel/position-and-size.html
 create mode 100755 js/panels/properties.reel/sections/position-and-size.reel/position-and-size.js
 create mode 100755 js/panels/properties.reel/sections/three-d-view.reel/three-d-view.html
 create mode 100755 js/panels/properties.reel/sections/three-d-view.reel/three-d-view.js
 delete mode 100755 js/panels/properties/content.reel/content.css
 delete mode 100755 js/panels/properties/content.reel/content.html
 delete mode 100755 js/panels/properties/content.reel/content.js
 delete mode 100755 js/panels/properties/properties-panel.js
 delete mode 100755 js/panels/properties/section.reel/section.html
 delete mode 100755 js/panels/properties/section.reel/section.js
 delete mode 100755 js/panels/properties/sections/custom-rows/color-select.reel/color-select.html
 delete mode 100755 js/panels/properties/sections/custom-rows/color-select.reel/color-select.js
 delete mode 100755 js/panels/properties/sections/custom-rows/dual-row.reel/dual-row.html
 delete mode 100755 js/panels/properties/sections/custom-rows/dual-row.reel/dual-row.js
 delete mode 100755 js/panels/properties/sections/custom-rows/single-row.reel/single-row.html
 delete mode 100755 js/panels/properties/sections/custom-rows/single-row.reel/single-row.js
 delete mode 100755 js/panels/properties/sections/custom.reel/custom.html
 delete mode 100755 js/panels/properties/sections/custom.reel/custom.js
 delete mode 100755 js/panels/properties/sections/position-and-size.reel/position-and-size.css
 delete mode 100755 js/panels/properties/sections/position-and-size.reel/position-and-size.html
 delete mode 100755 js/panels/properties/sections/position-and-size.reel/position-and-size.js
 delete mode 100755 js/panels/properties/sections/three-d-view.reel/three-d-view.html
 delete mode 100755 js/panels/properties/sections/three-d-view.reel/three-d-view.js
 create mode 100644 js/panels/resize-composer.js

(limited to 'js/panels')

diff --git a/js/panels/Color/colorpanel.js b/js/panels/Color/colorpanel.js
index 4858be68..3a603e98 100755
--- a/js/panels/Color/colorpanel.js
+++ b/js/panels/Color/colorpanel.js
@@ -38,7 +38,7 @@ exports.ColorPanel = Montage.create(PanelBase, {
             ////////////////////////////////////////////////////////////
             ////////////////////////////////////////////////////////////
             //TODO: Remove and add via toolbar draw loop
-            this.application.ninja.colorController.createToolbar();
+
             ////////////////////////////////////////////////////////////
             ////////////////////////////////////////////////////////////
 
@@ -47,14 +47,7 @@ exports.ColorPanel = Montage.create(PanelBase, {
     },
     ////////////////////////////////////////////////////////////////////
     //Applying default colors only on first draw
-    handleFirstDraw: {
-    	enumerable: true,
-    	value: function (e) {
-    		//
-    		this.content.applyDefaultColors();
-    		this.content.removeEventListener('firstDraw', this, false);
-    	}
-    }
+
     ////////////////////////////////////////////////////////////////////
     ////////////////////////////////////////////////////////////////////
 });
\ No newline at end of file
diff --git a/js/panels/Color/colorpanelbase.reel/colorpanelbase.js b/js/panels/Color/colorpanelbase.reel/colorpanelbase.js
index ff738bbe..af62dd07 100755
--- a/js/panels/Color/colorpanelbase.reel/colorpanelbase.js
+++ b/js/panels/Color/colorpanelbase.reel/colorpanelbase.js
@@ -117,10 +117,23 @@ exports.ColorPanelBase = Montage.create(Component, {
     	enumerable: false,
     	value: function() {
     		//TODO: Remove temporary hack, color history should be initilized
+            this.addEventListener('firstDraw', this, false);
+            this.application.ninja.colorController.colorView = this;
     		this.colorManager.colorHistory.fill = [{m: 'nocolor', c: {}, a: 1}];
     		this.colorManager.colorHistory.stroke = [{m: 'nocolor', c: {}, a: 1}];
     	}
     },
+
+    handleFirstDraw: {
+        enumerable: true,
+        value: function (e) {
+            //
+            this.application.ninja.colorController.createToolbar();
+            this.applyDefaultColors();
+            this.removeEventListener('firstDraw', this, false);
+        }
+    },
+
     ////////////////////////////////////////////////////////////////////
     //Assigning values and binding
     willDraw: {
diff --git a/js/panels/Panel.reel/Panel.html b/js/panels/Panel.reel/Panel.html
index 7556952c..04e2930a 100755
--- a/js/panels/Panel.reel/Panel.html
+++ b/js/panels/Panel.reel/Panel.html
@@ -8,22 +8,86 @@
 <head>
     <script type="text/montage-serialization">
         {
-            "resizer1": {
-                "module": "js/panels/Resizer",
-                "name": "Resizer",
+            "Resizer": {
+                "module": "js/panels/resize-composer",
+                "name": "ResizeComposer",
                 "properties": {
                     "element": {"#": "resizeBar"},
-                    "panel": {"#": "panel"},
-                    "isVertical": true,
-                    "willSave": false
+                    "component": {"@": "owner"}
                 },
-                "bindings": {
-                    "ownerId": {
-                        "boundObject": {"@": "owner"},
-                        "boundObjectPropertyPath": "panelBase.panelName",
-                        "oneway": true
+                "listeners": [
+                    {
+                        "type": "resizeStart",
+                        "listener": {"@": "owner"}
+                    },
+                    {
+                        "type": "resizeMove",
+                        "listener": {"@": "owner"}
+                    },
+                    {
+                        "type": "resizeEnd",
+                        "listener": {"@": "owner"}
                     }
-                }
+                ]
+            },
+
+            "DragDrop": {
+                "module": "js/panels/drag-drop-composer",
+                "name": "DragDropComposer",
+                "properties": {
+                    "element": {"@": "panelTitle"},
+                    "component": {"@": "owner"}
+                },
+                "listeners": [
+                    {
+                        "type": "dragStart",
+                        "listener": {"@": "owner"}
+                    },
+                    {
+                        "type": "dropHover",
+                        "listener": {"@": "owner"}
+                    },
+                    {
+                        "type": "dropped",
+                        "listener": {"@": "owner"}
+                    },
+                    {
+                        "type": "dropEnd",
+                        "listener": {"@": "owner"}
+                    }
+                ]
+            },
+
+            "btnCollapse": {
+                "module": "montage/ui/toggle-button.reel",
+                "name": "ToggleButton",
+                "properties": {
+                    "element": {"#": "btnCollapse"},
+                    "pressedClass": "hide",
+                    "identifier": "btnCollapse"
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner"}
+                    }
+                ]
+            },
+
+            "btnClose": {
+                "module": "montage/ui/button.reel",
+                "name": "Button",
+                "properties": {
+                    "element": {"#": "btnClose"},
+                    "pressedClass": "hide",
+                    "identifier": "btnClose"
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner"}
+                    }
+                ]
             },
 
             "slot1": {
@@ -34,14 +98,28 @@
                 }
             },
 
+            "panelTitle": {
+                "module": "montage/ui/dynamic-text.reel",
+                "name": "DynamicText",
+                "properties": {
+                    "element": {"#": "panelTitle"}
+                },
+                "bindings": {
+                    "value": {
+                        "boundObject": {"@": "owner"},
+                        "boundObjectPropertyPath": "name",
+                        "oneway": true
+                    }
+                }
+            },
+
             "owner": {
                 "module": "js/panels/Panel.reel",
                 "name": "Panel",
                 "properties": {
                     "element": {"#": "panel"},
-                    "resizer": {"@": "resizer1"},
+                    "resizer": {"@": "Resizer"},
                     "panelContent": {"@": "slot1"}
-
                 }
             }
         }
@@ -50,11 +128,11 @@
 	</head>
 <body>
 
-<article id="panel">
+<article id="panel" class="panel" draggable="draggable">
     <div id="head" class="head">
-        <span class="arrowIcon"></span>
-        <span class="panelTitle">Panel</span>
-        <span class="closeBtn"></span>
+        <span id="btnCollapse" class="arrowIcon"></span>
+        <span id="panelTitle" class="panelTitle">Panel</span>
+        <span id="btnClose" class="closeBtn"></span>
     </div>
     <div class="panelBody">
         <div class="panelBodyContent">
@@ -63,7 +141,7 @@
             </div>
         </div>
     </div>
-    <div data-montage-id="resizeBar" class="resizeBar"></div>
+    <div id="resizeBar" class="resizeBar"></div>
 </article>
 
 </body>
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.element.addEventListener("dragenter", this, false);
-                this.element.addEventListener("dragstart", this, false);
-                
-                // Handle Functionality
-                this.element.getElementsByClassName("panelTitle")[0].addEventListener("mouseover", this, false);
-                this.element.getElementsByClassName("panelTitle")[0].addEventListener("mouseout", this, false);
-                // Arrow Collapse Button Initiate
-                this.element.getElementsByClassName("arrowIcon")[0].addEventListener("click", this.collapseToggle.bind(this), false);
-                // Close Button
-                this.element.getElementsByClassName("closeBtn")[0].addEventListener("click", this.closePanel.bind(this), false);
-                //Resized Event
-                if(typeof this.resizer.value == "number") this.panelBase.contentHeight = this.resizer.value;
-                this.resizer.element.addEventListener("mouseup",this.resized.bind(this),false);
-
-                this.panelContent.content = this.panelBase.content;
-            }
+            this.height += this._resizedHeight;
+            this._resizedHeight = 0;
+            this.isResizing = false;
+            this.needsDraw = true;
         }
     },
 
     draw: {
         value: function() {
-            //If the panel is set not to be visible. We dont bother doing anything else to it. till the next draw cycle that its set visible true
-            // Actually thinking about it now. this might not work.
-            if (!this.panelBase.visible) this.element.style.display = "none";
-            else this.element.style.display = null;
+            if(this.isResizing) {
+                this.element.style.webkitBoxFlex = "0.1";
+            } else if (this.locked) {
+                this.element.style.webkitBoxFlex = "0";
+            } else {
+                this.element.style.webkitBoxFlex = null;
+            }
 
-            //Draw if collapsed or not
-            if(this.panelBase.collapsed || this.panelBase.forcedCollapse) {
+            if (this.collapsed) {
                 this.element.classList.add("collapsed");
-                this.element.style.height = this.panelBase.collapsedHeight + "px";
-            }
-            else {
+            } else if (!this.flexible) {
+                this.resizer.enabled = false;
                 this.element.classList.remove("collapsed");
-                this.element.style.height = this.panelBase.contentHeight + "px";
-            }
-
-            var pContentDiv = this.element.getElementsByClassName("panelObjects")[0];
-
-            //Figure out Heights (min, max, and current)
-            if (this.panelBase.isStatic || this.panelBase.isLocked) {
-                this.element.style.minHeight = this.panelBase.contentHeight + "px";
-                this.element.style.maxHeight = this.panelBase.contentHeight + "px";
-                this.resizer.element.style.cursor = "default";
+                this.element.style.minHeight = this.height + "px";
+                this.element.style.maxHeight = this.height + "px";
+                this.element.style.height = this.height + "px";
+                this.panelContent.element.style.overflowY = "hidden";
             } else {
-                this.element.style.minHeight = this.panelBase.minHeight + "px";
-                this.element.style.maxHeight = "";
-                this.resizer.element.style.cursor = null;
+                this.panelContent.element.style.overflowY = "auto";
+                this.resizer.enabled = true;
+                this.element.classList.remove("collapsed");
+                this.element.style.minHeight = this.minHeight + "px";
+                this.element.style.height = (this.height + this._resizedHeight) + "px";
+                if (this.maxHeight !== null) {
+                    this.element.style.maxHeight = this.maxHeight  + "px";
+                } else {
+                    this.element.style.maxHeight = null;
+                }
             }
+        }
+    },
 
-            if (this.panelBase.scrollable) pContentDiv.style.overflow = "auto";
-            else pContentDiv.style.overflow = "hidden";
-            this.element.getElementsByClassName("panelTitle")[0].innerHTML = this.panelBase.panelName;
-            //pContentDiv.appendChild(this.panelBase.content);
-            //this.panelContent.content = this.panelBase.content;
+    didDraw: {
+        value: function() {
+            if(this.flexible && !this.isResizing) {
+                this.height = this.element.offsetHeight;
+            }
 
+            if (this.isResizing) {
+                var actionEvent = document.createEvent("CustomEvent");
+                actionEvent.initCustomEvent("panelResizing", true, true, null);
+                actionEvent.type = "panelResizing";
+                this.dispatchEvent(actionEvent);
+            }
         }
     }
 });
\ No newline at end of file
diff --git a/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.html b/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.html
index 5c6ac227..76f6b9c4 100755
--- a/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.html
+++ b/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.html
@@ -9,35 +9,103 @@
 
     <script type="text/montage-serialization">
         {
-            "panel": {
-                "module": "js/panels/Panel.reel",
-                "name": "Panel",
+            "panelData": {
+                "module": "js/data/panels-data",
+                "name": "PanelsData"
+            },
+
+            "PanelController": {
+                "module": "montage/ui/controller/array-controller",
+                "name"  : "ArrayController",
                 "properties": {
-                    "element": {"#": "panel"}
+                    "automaticallyOrganizeObjects": true
                 },
                 "bindings": {
-                    "panelBase": {
-                        "boundObject": {"@": "repetition1"},
-                        "boundObjectPropertyPath": "objectAtCurrentIteration",
+                    "content": {
+                        "boundObject": {"@": "owner"},
+                        "boundObjectPropertyPath": "panels",
                         "oneway": true
                     }
                 }
             },
 
-
             "repetition1": {
                 "module": "montage/ui/repetition.reel",
                 "name": "Repetition",
                 "properties": {
-                    "element": {"#": "panels"}
+                    "element": {"#": "panels"},
+                    "contentController": {"@" : "PanelController"}
+                }
+            },
+
+            "panel": {
+                "module": "js/panels/Panel.reel",
+                "name": "Panel",
+                "properties": {
+                    "element": {"#": "panel"},
+                    "identifier" : "panels"
                 },
                 "bindings": {
-                    "objects": {
-                        "boundObject": {"@": "owner"},
-                        "boundObjectPropertyPath": "_panels",
+                    "name": {
+                        "boundObject": {"@": "repetition1"},
+                        "boundObjectPropertyPath": "objectAtCurrentIteration.name",
+                        "oneway": true
+                    },
+                    "height": {
+                        "boundObject": {"@": "repetition1"},
+                        "boundObjectPropertyPath": "objectAtCurrentIteration.height",
+                        "oneway": false
+                    },
+                    "minHeight": {
+                        "boundObject": {"@": "repetition1"},
+                        "boundObjectPropertyPath": "objectAtCurrentIteration.minHeight",
+                        "oneway": true
+                    },
+                    "maxHeight": {
+                        "boundObject": {"@": "repetition1"},
+                        "boundObjectPropertyPath": "objectAtCurrentIteration.maxHeight",
+                        "oneway": true
+                    },
+                    "flexible": {
+                        "boundObject": {"@": "repetition1"},
+                        "boundObjectPropertyPath": "objectAtCurrentIteration.flexible",
+                        "oneway": true
+                    },
+                    "collapsed": {
+                        "boundObject": {"@": "repetition1"},
+                        "boundObjectPropertyPath": "objectAtCurrentIteration.collapsed",
+                        "oneway": false
+                    },
+                    "modulePath": {
+                        "boundObject": {"@": "repetition1"},
+                        "boundObjectPropertyPath": "objectAtCurrentIteration.modulePath",
                         "oneway": true
+                    },
+                    "moduleName": {
+                        "boundObject": {"@": "repetition1"},
+                        "boundObjectPropertyPath": "objectAtCurrentIteration.moduleName",
+                        "oneway": true
+                    },
+                    "contentComponent": {
+                        "boundObject": {"@": "repetition1"},
+                        "boundObjectPropertyPath": "objectAtCurrentIteration.contentComponent",
+                        "oneway": false
                     }
-                }
+                },
+                "listeners": [
+                    {
+                        "type": "resizeStart",
+                        "listener": {"@": "owner"}
+                    },
+                    {
+                        "type": "resizeMove",
+                        "listener": {"@": "owner"}
+                    },
+                    {
+                        "type": "resizeEnd",
+                        "listener": {"@": "owner"}
+                    }
+                ]
             },
 
             "owner": {
@@ -45,8 +113,24 @@
                 "name": "PanelContainer",
                 "properties": {
                     "element": {"#": "panelContainer"},
-                    "repeater": {"@": "repetition1"}
-                }
+                    "repeater": {"@": "repetition1"},
+                    "panelData": {"@": "panelData" },
+                    "panelController" : {"@" : "PanelController"}
+                },
+                "listeners": [
+                    {
+                        "type": "panelResizing",
+                        "listener": {"@": "owner"}
+                    },
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner"}
+                    },
+                    {
+                        "type": "dropped",
+                        "listener": {"@": "owner"}
+                    }
+                ]
             }
         }
     </script>
@@ -55,7 +139,7 @@
 <body>
     <section id="panelContainer">
 		<article id="panels" class="panels">
-            <article id="panel" class="panel"></article>
+            <article id="panel"></article>
 		</article>
     </section>
 </body>
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) {
-            for (var i = 0; i < this._panels.length; i++) {
-                if ( e._event.detail.element.parentNode.uuid == this.repeater.childComponents[i].element.uuid) {
-                    this.handlePanelResized();
+                if (this.repeater.childComponents[i] === e._event.droppedComponent) {
+                    droppedIndex = i;
                 }
             }
+
+            var panelRemoved = this.panelController.content.splice(draggedIndex,1);
+            this.panelController.content.splice(droppedIndex,0, panelRemoved[0]);
+            //console.log(draggedIndex, droppedIndex);
+            this._setPanelsSizes(null);
         }
     },
+ 
+    _setPanelsSizes: {
+        value: function(panelActivated) {
+            var setLocked = true;
+            this.repeater.childComponents.forEach(function(obj) {
+                if (obj === panelActivated || panelActivated === null) {
+                    setLocked = false;
+                }
 
-    handlePanelResizing: {
-        value:function(e) {
-            this.resizedRedraw();
+                obj.locked = setLocked;
+                obj.needsDraw = true;
+            });
         }
     },
 
-    canFlex: {
-        value: function(panel) {
-            if (panel.isStatic) {
-                return false;
+    _redrawPanels: {
+        value: function(panelActivated, unlockPanels) {
+            var maxHeight = this.element.offsetHeight;
+            var setLocked = true;
+            if(unlockPanels === true) {
+                setLocked = false;
             }
 
-            return !(panel.collapsed || panel.forcedCollapse);
+            var childrensMinHeights = ((this.repeater.childComponents.length - 1) * 26) + panelActivated.minHeight;
 
-        }
-    },
-
-    handlePanelResized: {
-        value: function(selectedPanelIndex, collapsing) {
-            minHeights = 0;
-            needsLocks = true;
-
-            if (collapsing) {
-                if (this._panels.length -1 == selectedPanelIndex) {
-                    needsLocks = false;
-                } else {
-                    needsLocks = false;
-                    for (var i = 0; i < this._panels.length; i++) {
-                        if ( i > selectedPanelIndex) {
-                            if (this.canFlex(this._panels[i])) {
-                                needsLocks = true;
-                            }
-                        }
-                    }
-                }
-            }
-            for (var i = 0; i < this._panels.length; i++) {
-                if (this._panels[i].collapsed || this._panels[i].forcedCollapse) {
-                    minHeights += this._collapsedHeight;
+            this.repeater.childComponents.forEach(function(obj) {
+                if(obj === panelActivated) {
+                    setLocked = false;
+                } else if(obj.collapsed) {
+                    //Collapsed Ignore the rest of the code
                 } else {
-                        if (i < selectedPanelIndex && needsLocks) {
-                            this._panels[i].isLocked = true;
-                            this.repeater.childComponents[i].needsDraw = true;
-                            minHeights += this.repeater.childComponents[i].element.offsetHeight;
+                    if (setLocked) {
+                        if((maxHeight - childrensMinHeights) - obj.height > 0 ) {
+                            childrensMinHeights += obj.height - 26;
                         } else {
-                            this._panels[i].isLocked = false;
-                            if(this.repeater.childComponents[i]) this.repeater.childComponents[i].needsDraw = true;
-                            minHeights += this._panels[i].minHeight;
+                            this.currentPanelState[obj.name].collapsed = obj.collapsed = true;
+                            this.application.localStorage.setItem("panels", this.currentPanelState);
                         }
-                }
-            }
-            // Theres got to be a better way to do this. Look into initiating a redraw when flex box is done redrawing its element sizes. Set them as offset height
-            // Look into new css possibilities as flex box gets better integrated.
-
-            setTimeout(this.resizedRedraw.bind(this), 300);
-            while( minHeights > this.element.children[0].offsetHeight) {
-                var panelCount = this._panels.length;
-                var lastPanel = null;
-                for( var i = 0; i < panelCount; i++ ) {
-                    if (i != this.skipPanelIndex) {
-                        if (!this._panels[i].forcedCollapse && !this._panels[i].collapsed) {
-                            lastPanel = i;
-                        }
-                    }
-                }
-                minHeights -= this._panels[lastPanel].minHeight - this._collapsedHeight;
-                this._panels[lastPanel].collapsed = true;
-                //this.repeater.childComponents[lastPanel].needsDraw = true;
-
-
-            }
-            this.skipPanelIndex = null;
-        }
-    },
-
-    resizedRedrawTimer: {
-        value: null
-    },
-
-    resizedRedraw: {
-        value:function() {
-            for (var i = 0; i < this._panels.length; i++) {
-                var rptEl = this.repeater.childComponents[i].element;
-                var offset = rptEl.offsetHeight;
-                this._panels[i].contentHeight = offset;
-                rptEl.style.height = offset;
-                this.repeater.childComponents[i].needsDraw = true;
-            }
-        }
-    },
-
-    togglePanel: {
-        value: function(e) {
-            var panelName = e._event ? e._event.detail : e;
-            for(var i=0; i < this.panelOrder.length; i++) {
-                if (this.panelOrder[i] == panelName) {
-                    if(this._panels[i].visible) {
-                        this.hidePanel(i);
                     } else {
-                        this._panels[i].visible = true;
-                        this.repeater.childComponents[i].needsDraw = true;
-//                        NJevent("panelAdded",this._panels[i]);
-                        if (this.panelSplitter.disabled) {
-                            this.panelSplitter.disabled = false;
-                            this.panelSplitter.toggle();
+                        if ((maxHeight - childrensMinHeights) - obj.minHeight > 0 ) {
+                            childrensMinHeights += obj.minHeight - 26;
+                        } else {
+                            this.currentPanelState[obj.name].collapsed = obj.collapsed = true;
+                            this.application.localStorage.setItem("panels", this.currentPanelState);
                         }
                     }
                 }
-            }
-            this.handlePanelResized();
+                obj.locked = setLocked;
+            }, this);
         }
     },
-
-    handlePanelSelected: {
+ 
+    handleAction: {
         value: function(e) {
-            this._panelSelected = e._event.detail;
-        }
-    },
-
-    handlePanelClose: {
-        value:function(e) {
-            if( e._event.detail != null) {
-                for(var i=0; i < this._panels.length; i++) {
-                    if (e._event.detail._panelBase._uuid == this._panels[i]._uuid) {
-                        var panelMenuName = this._panels[i].panelName.substring(0,  this._panels[i].panelName.indexOf('/') !== -1 ?  this._panels[i].panelName.indexOf('/'):  this._panels[i].panelName.length) + "Panel";
-                        this.application.ninja.appModel[panelMenuName] = false;
-                        this.hidePanel(i);
-                    }
-                }
-            }
-        }
-    },
-
-    hidePanel: {
-        value: function(panelIndex) {
-            var panel = this._panels[panelIndex];
-            distHeight = 0;
-            if (panel.collapsed || panel.forcedCollapse) distHeight = this._collapsedHeight;
-            else distHeight = panel.contentHeight;
-            this._spaceAvailable += distHeight;
-//            NJevent("panelClosed", panel.panelName);
-            panel.visible = false;
-            this.repeater.childComponents[panelIndex].needsDraw = true;
-
-            //Validate all panels are closed
-            var hideSplitter = true;
-            this._panels.forEach(function(obj) {
-                if (obj.visible) {
-                    hideSplitter = false;
-                }
-            })
-            if (hideSplitter) {
-                this.panelSplitter.toggle();
-                this.panelSplitter.disabled = true;
-            }
-        }
-    },
-
-    handlePanelOrderChanged: {
-        value:function(e) {
-            overed = null;
-            selected = null;
-            for(var i=0; i < this._panels.length; i++) {
-                if (e._event.detail.panelBase._uuid == this._panels[i]._uuid) {
-                    overed = i;
-                }
-                if (this._panelSelected.panelBase._uuid == this._panels[i]._uuid) {
-                    selected = i;
-                }
-            }
-            if (overed != selected) {
-                var panelRemoved = this._panels.splice(selected,1);
-                this._panels.splice(overed,0, panelRemoved[0]);
-                var panelOrderRemoved = this.panelOrder.splice(selected,1);
-                this.panelOrder.splice(overed,0, panelOrderRemoved[0]);
-
-                //this.application.ninja.settings.setSetting(this.element.id, "panelOrder", this.panelOrder);
-            }
-        }
-    },
-
-    prepareForDraw: {
-        value: function() {
-            //console.log("drawing:" + this._panels.length);
-            if (!this._isFirstDraw) {
-                this._isFirstDraw = true;
-                this.eventManager.addEventListener("panelOrderChanged", this, false);
-                this.eventManager.addEventListener("panelClose", this, false);
-                this.eventManager.addEventListener("panelCollapsed", this, false);
-                this.eventManager.addEventListener("panelSelected", this, false);
-
-                this.eventManager.addEventListener("panelResizing", this, false);
-                this.eventManager.addEventListener("panelResizedStart", this, false);
-                this.eventManager.addEventListener("panelResizedEnd", this, false);
-                window.addEventListener("resize", this.handlePanelResized.bind(this), false);
+            var unlockPanels = true;
+            var afterPanel = false;
+            var panelName = e.target.parentComponent.name;
+            switch(e.target.identifier) {
+                case "btnCollapse":
+                    this.currentPanelState[e.target.parentComponent.name].collapsed = e.target.parentComponent.collapsed;
+                    this.application.localStorage.setItem("panels", this.currentPanelState);
+                    this._setPanelsSizes(e.target.parentComponent);
+                    this._redrawPanels(e.target.parentComponent, unlockPanels);
+                    break;
+                case "btnClose":
+                    this.panelController.content.forEach(function(obj) {
+                        if(afterPanel) {
+                            if(obj.flexible) {
+                                unlockPanels = false;
+                            }
+                        }
+                        if (obj.name === panelName) {
+                            afterPanel = true;
+                            this.panelController.removeObjects(obj);
+                        }
+                    });
+                    this._redrawPanels(e.target.parentComponent, unlockPanels);
+                    break;
             }
         }
-    },
-
-    didDraw: {
-        value: function() {
-            this.handlePanelResized();
-        }
-    },
-    //External Objects
-    _repeater: {
-        value:null
-    },
-    repeater: {
-        get: function() {
-            return this._repeater;
-        },
-        set: function(val) {
-            this._repeater = val;
-        }
-    },
-    _panelSplitter: {
-        value:null
-    },
-    panelSplitter: {
-        get: function() {
-            return this._panelSplitter;
-        },
-        set: function(val) {
-            this._panelSplitter = val;
-        }
     }
-
+ 
 });
\ No newline at end of file
diff --git a/js/panels/Resizer.js b/js/panels/Resizer.js
index ca6ed062..0252c4fb 100755
--- a/js/panels/Resizer.js
+++ b/js/panels/Resizer.js
@@ -90,16 +90,22 @@ exports.Resizer = Montage.create(Component, {
             return this._panel;
         },
         set: function(val) {
-            this._panel = val
+            this._panel = val;
+            if(val._element) this._panel = val._element;
         }
     },
+
+    height: {
+        value: null
+    },
  
     handleClick: {
         value: function() {
  
         }
     },
- 
+
+
     handleMousedown: {
         value: function(e) {
             e.preventDefault();
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index d50360e6..e3897bbf 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -491,7 +491,7 @@ var Layer = exports.Layer = Montage.create(Component, {
     },
     draw: {
     	value: function() {
-    		
+
     		// Coordinate the collapsers
             if (this.mainCollapser.isCollapsed !== this.isMainCollapsed) {
             	this.mainCollapser.bypassAnimation = true;
diff --git a/js/panels/drag-drop-composer.js b/js/panels/drag-drop-composer.js
new file mode 100644
index 00000000..e09f601d
--- /dev/null
+++ b/js/panels/drag-drop-composer.js
@@ -0,0 +1,136 @@
+/* <copyright>
+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> */
+
+var Montage = require("montage/core/core").Montage;
+var Composer = require("montage/ui/composer/composer").Composer;
+
+exports.DragDropComposer = Montage.create(Composer, {
+
+    draggable: {
+        value: false // TODO: Turning this off until color Panel bug fixes are in
+    },
+
+    droppable: {
+        value: true
+    },
+
+    identifier: {
+        value: "generic"
+    },
+
+    _dragover: {
+        value: false
+    },
+
+    load: {
+        value: function() {
+            //TODO: to make this work even better check to see if this is a component or not
+            //right now it does not support data-montage id's
+            this.element.element.addEventListener("mouseover", this, true);
+            this.element.element.addEventListener("mouseout", this, true);
+            this.component.element.addEventListener("dragenter", this, true);
+            this.component.element.addEventListener("dragleave", this, true);
+            this.component.element.addEventListener("dragend", this, true);
+            this.component.element.addEventListener("drop", this, true);
+            this.component.element.addEventListener("dragover", this, true);
+            this.component.element.addEventListener("dragstart", this, true);
+        }
+    },
+
+    unload: {
+        value: function() {
+            this.element.element.removeEventListener("mouseover", this, true);
+            this.element.element.removeEventListener("mouseout", this, true);
+            this.component.element.removeEventListener("dragenter", this, true);
+            this.component.element.removeEventListener("dragleave", this, true);
+            this.component.element.removeEventListener("dragend", this, true);
+            this.component.element.removeEventListener("drop", this, true);
+            this.component.element.removeEventListener("dragover", this, true);
+            this.component.element.removeEventListener("dragstart", this, true);
+        }
+    },
+
+    captureMouseover: {
+        value: function(e) {
+            if(this.draggable) {
+                this.component.element.draggable = true;
+            }
+        }
+    },
+
+    captureMouseout: {
+        value: function(e) {
+            this.component.element.draggable = false;
+        }
+    },
+
+    /* ------ Drag Drop Events ------- */
+
+    // This Function will determine what is being moved
+    captureDragstart: {
+        value:function(e) {
+            e.dataTransfer.effectAllowed = 'move';
+            e.dataTransfer.setData('Text', this.identifier);
+            this.component.element.classList.add("dragging");
+            this.component.application.ninja.componentBeingDragged = this.component;
+        }
+    },
+
+    captureDragenter: {
+        value: function(e) {
+
+        }
+    },
+
+    captureDragover: {
+        value:function(e) {
+            e.preventDefault();
+            e.stopImmediatePropagation();
+            if (!this._dragover) {
+                this._dragover = true;
+                this.component.element.classList.add("dragOver");
+            }
+        }
+    },
+
+    captureDragleave: {
+        value: function(e) {
+            if (this._dragover) {
+                this._dragover = false;
+                this.component.element.classList.remove("dragOver");
+            }
+        }
+    },
+
+    captureDrop: {
+        value:function(e) {
+            e.stopPropagation(); // Stops some browsers from redirecting.
+            e.preventDefault();
+            if (this._dragover) {
+                this._dragover = false;
+                this.component.element.classList.remove("dragOver");
+                if (this.identifier === e.dataTransfer.getData("Text")) {
+                    if(this.component.application.ninja.componentBeingDragged !== this.component) {
+                        dropEvent = document.createEvent("CustomEvent");
+                        dropEvent.initCustomEvent("dropped", true, false, null);
+                        dropEvent.draggedComponent = this.component.application.ninja.componentBeingDragged;
+                        dropEvent.droppedComponent = this.component;
+                        this.component.dispatchEvent(dropEvent);
+                    }
+                }
+                this.component.application.ninja.componentBeingDragged = null;
+            }
+
+        }
+    },
+
+    captureDragend: {
+        value:function(e) {
+            this.component.element.classList.remove("dragging");
+        }
+    }
+
+});
\ No newline at end of file
diff --git a/js/panels/properties.reel/properties.css b/js/panels/properties.reel/properties.css
new file mode 100755
index 00000000..f8d37984
--- /dev/null
+++ b/js/panels/properties.reel/properties.css
@@ -0,0 +1,299 @@
+/* <copyright>
+ 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> */
+
+.propertiesPanel {
+    color:#FFF;
+    overflow-x: hidden;
+}
+
+.propertiesPanel .fieldCol {
+    display: -webkit-box;
+    -webkit-box-orient:horizontal;
+    position:relative;
+}
+
+.propertiesPanel .fieldCol > label {
+    -webkit-box-flex:0;
+    text-align: right;
+    width:46px;
+    display:block;
+    padding: 4px 2px 4px 5px;
+    height:16px;
+    line-height: 1