2 files changed, 131 insertions, 33 deletions

diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html
index 1e040e35..a9dda673 100644
--- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html
+++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html
@@ -11,7 +11,7 @@
 
         <script type="text/montage-serialization">
         {
-            "componentController": {
+            "componentControllerArrayTemp": {
                 "module": "montage/ui/controller/array-controller",
                 "name": "ArrayController",
                 "bindings": {
@@ -28,6 +28,38 @@
                 "properties": {
                     "element": {"#": "components_panel"}
                 }
+            },
+
+            "componentsController" : {
+                "module": "js/components/controllers/tree-controller",
+                "name": "TreeController",
+                "properties" : {
+                    "branchKey" : "children",
+                    "labelKey" : "text",
+                    "delegate": {"@": "owner" }
+                },
+                "bindings": {
+                    "content": {
+                        "boundObject": {"@": "owner"},
+                        "boundObjectPropertyPath": "data2"
+                    }
+                }
+            },
+
+            "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>
@@ -37,8 +69,9 @@
     
         <div id="components_panel" class="components_panel">
             <div class="treeHolder">
-                <ul id="comp_tree"></ul>
+               <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 51822150..338e7e0d 100644
--- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
+++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
@@ -11,12 +11,74 @@ var Montage     = require("montage/core/core").Montage,
 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 ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component, {
 
     components: {
         value: null
     },
 
+    componentsToLoad: {
+        value: null
+    },
+
+    componentsLoaded: {
+        value: 0
+    },
+
+    data2: {
+            value: {
+                "text": "styles",
+                "children": [{
+                    "text": "Box Styles",
+                    "children": [
+                        {
+                            "text": "Border-Radius",
+                            "classNameBase" : "border-radius",
+                            "styles" : {
+                                "border-radius": "100px",
+                                "border" : "1px solid #333"
+                            }
+                        },
+                        {
+                            "text": "Drop Shadow",
+                            "classNameBase" : "drop-shadow",
+                            "styles" : {
+                                "box-shadow": "2px 2px 50px rgba(0,0,0,0.5)",
+                                "border" : "1px solid #CCC"
+                            }
+                        },
+                        {
+                            "text": "Fancy Box",
+                            "classNameBase" : "fancy-box",
+                            "styles" : {
+                                "box-shadow": "inset 0 0 0 1px #666, inset 0 0 0 2px rgba(225, 225, 225, 0.4), 0 0 20px -10px #333",
+                                "border" : "1px solid #FFF",
+                                "border-radius": "30px",
+                                "background-color": "#7db9e8",
+                                "background-image": "-webkit-linear-gradient(top, rgba(255,255,255,0.74) 0%,rgba(255,255,255,0) 100%)"
+                            }
+                        }]
+                }, {
+                    "text": "Text Styles",
+                    "children": [
+                        { "text": "Italic" },
+                        { "text": "Text Shadow" },
+                        { "text": "Text Color" } ]
+                }, {
+                    "text": "Color Styles",
+                    "children": [
+                        { "text": "Background Gradient" },
+                        { "text": "Background Color" },
+                        { "text": "Text Highlight" } ]
+                }]
+            }
+        },
+
     _testButtonJson: {
         value: {
             "component": "button",
@@ -42,14 +104,8 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
 
     didCreate: {
         value: function() {
-            this._loadComponents();
 
-//            var req = new XMLHttpRequest();
-//            req.identifier = "searchRequest";
-//            req.open("GET", url);
-//            req.addEventListener("load", this, false);
-//            req.addEventListener("error", this, false);
-//            req.send();
+            this._loadComponents();
 
         }
     },
@@ -61,6 +117,8 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
                 {name: "Textfield", data: "node_modules/components-data/textfield.json"}
             ];
 
+            this.componentsToLoad = this.components.length;
+
             // Build the PI objects for each component
             for(var i = 0, component; component = this.components[i]; i++) {
                 var req = new XMLHttpRequest();
@@ -70,39 +128,44 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
                 req.addEventListener("error", this, false);
                 req.send();
 
-/*
-                var piIdentifier = component.name + "Pi";
-                var piObj = [];
-                var section = {};
+            }
+
+        }
+    },
+
+    handleLoad: {
+        value: function(evt) {
+            var response = JSON.parse(evt.target.responseText);
 
+            var component = response.component.capitalizeFirstChar();
 
-                section.label = component.name + " Properties";
+            var piIdentifier = component + "Pi";