5 files changed, 350 insertions, 140 deletions

diff --git a/js/panels/Components/Components.xml b/js/panels/Components/Components.xml
deleted file mode 100644
index b3056330..00000000
--- a/js/panels/Components/Components.xml
+++ /dev/null
@@ -1,28 +0,0 @@
-<?xml version="1.0" encoding="ISO-8859-1"?>
-<tree id="Components">
-    <folder id="montageComponents" label="Montage Components">
-        <leaf id="Button" label="Button" />
-        <leaf id="Checkbox" label="Checkbox" />
-        <leaf id="DynamicText" label="Dynamic Text" />
-        <leaf id="FlowController" label="FlowController" />
-        <leaf id="HotText" label="HotText" />
-        <leaf id="HotTextUnit" label="HotTextUnit" />
-        <leaf id="ImageContainer" label="Image Container" />
-        <leaf id="Progress" label="Progress" />
-        <leaf id="Scrollview" label="Scrollview" />
-        <leaf id="Slider" label="Slider" />
-        <leaf id="TextArea" label="TextArea" />
-        <leaf id="Textfield" label="Textfield" />
-        <leaf id="Toggle" label="Toggle" />
-    </folder>
-    <folder id="metaComponents" label="Meta Components">
-        <leaf id="Condition" label="Condition" />
-        <leaf id="Repetition" label="Repetition" />
-        <leaf id="Slot" label="Slot" />
-        <leaf id="Substitution" label="Substitution" />
-    </folder>
-    <folder id="htmlPresets" label="HTML Components">
-        <leaf id="html_button" label="Button" />
-        <leaf id="html_input" label="Text Input" />
-    </folder>
-</tree>
\ No newline at end of file
diff --git a/js/panels/Components/ComponentsPanel.js b/js/panels/Components/ComponentsPanel.js
index df1d74bb..df1d74bb 100644..100755
--- a/js/panels/Components/ComponentsPanel.js
+++ b/js/panels/Components/ComponentsPanel.js
diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.css b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.css
index ac250c83..ac250c83 100644..100755
--- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.css
+++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.css
diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html
index df104ecc..6d7c8a2c 100644..100755
--- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html
+++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html
@@ -15,8 +15,41 @@
                 "module": "js/panels/Components/ComponentsPanelBase.reel",
                 "name": "ComponentsPanelBase",
                 "properties": {
-                    "element": {"#": "components_panel"}
+                    "element": {"#": "components_panel"},
+                    "controller": {"@": "componentsTree"}
                 }
+            },
+
+            "componentsController" : {
+                "module": "js/components/controllers/tree-controller",
+                "name": "TreeController",
+                "properties" : {
+                    "branchKey" : "children",
+                    "labelKey" : "text",
+                    "delegate": {"@": "owner" }
+                },
+                "bindings": {
+                    "content": {
+                        "boundObject": {"@": "owner"},
+                        "boundObjectPropertyPath": "components"
+                    }
+                }
+            },
+
+            "componentsTree" : {
+                "module" : "js/components/treeview/treeview.reel",
+                "name" : "Treeview",
+                "properties" : {
+                    "element" : {"#": "componentsContainer"},
+                    "branchComponent" : {"@": "branch" },
+                    "contentController": {"@": "componentsController"},
+                    "showRoot" : false
+                }
+            },
+
+            "branch" : {
+                "module" : "js/components/treeview/ninja-branch.reel",
+                "name" : "Branch"
             }
         }
         </script>
@@ -25,9 +58,7 @@
         <body>
     
         <div id="components_panel" class="components_panel">
-            <div class="treeHolder">
-                <ul id="comp_tree"></ul>
-            </div>
+           <div id="componentsContainer"></div>
         </div>
 
     </body>
diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
index 41afefa5..b4eec771 100644..100755
--- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
+++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
@@ -4,142 +4,349 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
 </copyright> */
 
-var Montage = require("montage/core/core").Montage,
-    Component = require("montage/ui/component").Component,
-    NJUtils = require("js/lib/NJUtils").NJUtils;
+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() {
+    return this.charAt(0).toUpperCase() + this.slice(1);
+};
 
-var treeControlModule = require("js/components/tree.reel");
 
 var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component, {
-    _hasFocus: {
-        enumerable: false,
-        value: false
+
+    components: {
+        value: {
+            "text": "styles",
+            "children": [
+                {
+                    "text": "Montage Components",
+                    "children": [
+                        {
+                            "text": "Anchor",
+                            "dataFile" : "node_modules/components-data/anchor.json",
+                            "component": "anchor"
+                        },
+                        {
+                            "text": "Button",
+                            "dataFile" : "node_modules/components-data/button.json",
+                            "component": "button"
+                        },
+                        {
+                            "text": "Checkbox",
+                            "dataFile" : "node_modules/components-data/checkbox.json",
+                            "component": "checkbox"
+                        },
+                        {
+                            "text": "Image Component",
+                            "dataFile" : "node_modules/components-data/image.json",
+                            "component": "imageComponent"
+                        },
+                        {
+                            "text": "NumberInput",
+                            "dataFile" : "node_modules/components-data/number-input.json",
+                            "component": "numberInput"
+                        },
+                        {
+                            "text": "Select Input",
+                            "dataFile" : "node_modules/components-data/select.json",
+                            "component": "select"
+                        },
+                        {
+                            "text": "Radio Button",
+                            "dataFile" : "node_modules/components-data/radio-button.json",
+                            "component": "radioButton"
+                        },
+                        {
+                            "text": "Range Input",
+                            "dataFile" : "node_modules/components-data/range-input.json",
+                            "component": "rangeInput"
+                        },
+                        {
+                            "text": "TextArea",
+                            "dataFile" : "node_modules/components-data/textarea.json",
+                            "component": "textarea"
+                        },
+                        {
+                            "text": "Textfield",
+                            "dataFile" : "node_modules/components-data/textfield.json",
+                            "component": "textfield"
+                        },
+                        {
+                            "text": "Toogle Button",
+                            "dataFile" : "node_modules/components-data/toggle-button.json",
+                            "component": "toggleButton"
+                        }
+                    ]
+                }
+            ]
+        }
+    },
+
+    componentsData: {
+        value: {}
+    },
+
+    componentsToLoad: {
+        value: null
+    },