11 files changed, 250 insertions, 11 deletions

diff --git a/js/panels/Panel.reel/Panel.js b/js/panels/Panel.reel/Panel.js
index 33f9b3a7..613bef4b 100755
--- a/js/panels/Panel.reel/Panel.js
+++ b/js/panels/Panel.reel/Panel.js
@@ -125,7 +125,10 @@ exports.Panel = Montage.create(Component, {
                 require.async(this.modulePath)
                     .then(function(panelContent) {
                         var componentRequire = panelContent[that.moduleName];
-                        that.panelContent.content = componentRequire.create();
+                        var componentInstance = componentRequire.create();
+
+                        componentInstance.ownerComponent = that.ownerComponent;
+                        that.panelContent.content = componentInstance;
                     })
                     .end();
             }
diff --git a/js/panels/PanelContainer.reel/PanelContainer.html b/js/panels/PanelContainer.reel/PanelContainer.html
index 251e86e4..d3673105 100755
--- a/js/panels/PanelContainer.reel/PanelContainer.html
+++ b/js/panels/PanelContainer.reel/PanelContainer.html
@@ -62,6 +62,13 @@
                 }
             },
 
+            "panel_6": {
+                "prototype": "js/panels/Panel.reel",
+                "properties": {
+                    "element": {"#": "panel_6"}
+                }
+            },
+
             "owner": {
                 "module": "js/panels/PanelContainer.reel",
                 "name": "PanelContainer",
@@ -74,7 +81,8 @@
                     "panel_2":          {"@": "panel_2"},
                     "panel_3":          {"@": "panel_3"},
                     "panel_4":          {"@": "panel_4"},
-                    "panel_5":          {"@": "panel_5"}
+                    "panel_5":          {"@": "panel_5"},
+                    "panel_6":          {"@": "panel_6"}
                 },
                 "listeners": [
                     {
@@ -104,6 +112,7 @@
             <article data-montage-id="panel_3"></article>
             <article data-montage-id="panel_4"></article>
             <article data-montage-id="panel_5"></article>
+            <article data-montage-id="panel_6"></article>
                 </article>
     </section>
 </body>
diff --git a/js/panels/PanelContainer.reel/PanelContainer.js b/js/panels/PanelContainer.reel/PanelContainer.js
index c40bbc21..8d1d6a5e 100755
--- a/js/panels/PanelContainer.reel/PanelContainer.js
+++ b/js/panels/PanelContainer.reel/PanelContainer.js
@@ -45,6 +45,7 @@ exports.PanelContainer = Montage.create(Component, {
                 this['panel_'+i].minHeight= p.minHeight;
                 this['panel_'+i].maxHeight = p.maxHeight;
                 this['panel_'+i].flexible = p.flexible;
+                this['panel_'+i].collapsed = p.collapsed;
                 this['panel_'+i].modulePath = p.modulePath;
                 this['panel_'+i].moduleName = p.moduleName;
                 this['panel_'+i].disabled = true;
diff --git a/js/panels/components-panel.reel/components-panel.js b/js/panels/components-panel.reel/components-panel.js
index acbf702f..79eac37b 100755
--- a/js/panels/components-panel.reel/components-panel.js
+++ b/js/panels/components-panel.reel/components-panel.js
@@ -8,7 +8,6 @@ var Montage     = require("montage/core/core").Montage,
     Component   = require("montage/ui/component").Component,
     NJUtils     = require("js/lib/NJUtils").NJUtils;
 
-var treeControlModule   = require("js/components/tree.reel");
 var PIData              = require("js/data/pi/pi-data").PiData;
 
 String.prototype.capitalizeFirstChar = function() {
@@ -286,9 +285,7 @@ exports.ComponentsPanel = Montage.create(Component, {
                 var styles = {
                     'position': 'absolute',
                     'left'      : that.dragPosition[0] + 'px',
-                    'top'       : that.dragPosition[1] + 'px',
-                    '-webkit-transform-style' : 'preserve-3d',
-                    '-webkit-transform' : 'perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+                    'top'       : that.dragPosition[1] + 'px'
                 };
 
                 var defaultStyles = component.defaultStyles;
@@ -369,7 +366,7 @@ exports.ComponentsPanel = Montage.create(Component, {
                     break;
                 case "textarea":
                     el = NJUtils.makeNJElement("textarea", "TextArea", "component");
-                    el.elementModel.pi = "TextAreaPi";
+                    el.elementModel.pi = "TextareaPi";
                     break;
                 case "toggleButton":
                     el = NJUtils.makeNJElement("button", "Toggle Button", "component");
diff --git a/js/panels/history-panel/history-item.reel/history-item.css b/js/panels/history-panel/history-item.reel/history-item.css
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/js/panels/history-panel/history-item.reel/history-item.css
diff --git a/js/panels/history-panel/history-item.reel/history-item.html b/js/panels/history-panel/history-item.reel/history-item.html
new file mode 100644
index 00000000..2db27846
--- /dev/null
+++ b/js/panels/history-panel/history-item.reel/history-item.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<!-- <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> -->
+<html lang="en">
+        <head>
+        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+        <link rel="stylesheet" type="text/css" href="history-item.css">
+
+        <script type="text/montage-serialization">
+        {
+            "owner": {
+                "prototype": "js/panels/history-panel/history-item.reel",
+                "properties": {
+                    "element": {"#": "history_item"}
+                }
+            }
+        }
+        </script>
+
+        </head>
+        <body>
+
+        <li data-montage-id="history_item"></li>
+
+    </body>
+</html>
\ No newline at end of file
diff --git a/js/panels/history-panel/history-item.reel/history-item.js b/js/panels/history-panel/history-item.reel/history-item.js
new file mode 100644
index 00000000..8a6e7654
--- /dev/null
+++ b/js/panels/history-panel/history-item.reel/history-item.js
@@ -0,0 +1,32 @@
+/* <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,
+    Component   = require("montage/ui/component").Component;
+
+exports.HistoryItem = Montage.create(Component, {
+    _title: {
+        value: null
+    },
+
+    title: {
+        get: function() {
+            return this._title;
+        },
+        set: function(value) {
+            if(value !== this._title) {
+                this._title = value;
+                this.needsDraw = true;
+            }
+        }
+    },
+
+    draw: {
+        value: function() {
+            this.element.innerHTML = this.title;
+        }
+    }
+});
\ No newline at end of file
diff --git a/js/panels/history-panel/history.reel/history.css b/js/panels/history-panel/history.reel/history.css
new file mode 100644
index 00000000..44c4c74b
--- /dev/null
+++ b/js/panels/history-panel/history.reel/history.css
@@ -0,0 +1,34 @@
+.history_panel {
+    height: 100%;
+    overflow: hidden;
+}
+
+.scroller {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+.history_panel ul {
+    padding: 0;
+    margin: 0;
+}
+
+.history_panel li {
+    padding: 10px 15px;
+    list-style: none;