2 files changed, 212 insertions, 36 deletions

diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html
index df104ecc..1e040e35 100644
--- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html
+++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html
@@ -11,6 +11,17 @@
 
         <script type="text/montage-serialization">
         {
+            "componentController": {
+                "module": "montage/ui/controller/array-controller",
+                "name": "ArrayController",
+                "bindings": {
+                    "content": {
+                        "boundObject": {"@": "owner"},
+                        "boundObjectPropertyPath": "components"
+                    }
+                }
+            },
+
             "owner": {
                 "module": "js/panels/Components/ComponentsPanelBase.reel",
                 "name": "ComponentsPanelBase",
diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
index 41afefa5..51822150 100644
--- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
+++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
@@ -4,17 +4,122 @@ 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 treeControlModule   = require("js/components/tree.reel");
+var PIData              = require("js/data/pi/pi-data").PiData;
 
 var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component, {
-    _hasFocus: {
-        enumerable: false,
-        value: false
+
+    components: {
+        value: null
+    },
+
+    _testButtonJson: {
+        value: {
+            "component": "button",
+
+            "module": "montage/ui/button.reel",
+
+            "name": "Button",
+
+            "properties": [
+                {
+                    "name": "label",
+                    "type": "string",
+                    "default": "Button"
+                },
+                {
+                    "name": "enabled",
+                    "type": "boolean",
+                    "default": "true"
+                }
+            ]
+        }
+    },
+
+    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();
+
+        }
+    },
+
+    _loadComponents: {
+        value: function() {
+            this.components = [
+                {name: "Button", data: "node_modules/components-data/button.json"},
+                {name: "Textfield", data: "node_modules/components-data/textfield.json"}
+            ];
+
+            // Build the PI objects for each component
+            for(var i = 0, component; component = this.components[i]; i++) {
+                var req = new XMLHttpRequest();
+                //req.identifier = "searchRequest";
+                req.open("GET", component.data);
+                req.addEventListener("load", this, false);
+                req.addEventListener("error", this, false);
+                req.send();
+
+/*
+                var piIdentifier = component.name + "Pi";
+                var piObj = [];
+                var section = {};
+
+
+                section.label = component.name + " Properties";
+                section.Section = [];
+
+                for(var j = 0, props; props = this._testButtonJson.properties[j]; j++) {
+                    var row = {};
+                    row.type = this.getControlType(props.type);
+                    row.id = props.name;
+                    row.prop = props.name;
+                    row.defaultValue = props["default"];
+                    row.label = props.name;
+
+                    section.Section.push([row]);
+                }
+
+                PIData[piIdentifier] = [];
+                PIData[piIdentifier].push(section);
+                */
+
+            }
+
+        }
+    },
+
+    handleLoad: {
+        value: function(evt) {
+            var response = JSON.parse(evt.target.responseText);
+            console.log(response);
+
+        }
+    },
+
+    getControlType: {
+        value: function(type) {
+            switch(type) {
+                case "string":
+                    return "textbox";
+                case "boolean":
+                    return "checkbox";
+                default:
+                    alert("Conversion not implemented for ", type);
+            }
+        }
     },
+
     prepareForDraw: {
         enumerable: false,
         value: function() {
@@ -27,18 +132,6 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
             this.eventManager.addEventListener( "executeAddComponent", this, false);
         }
     },
-    willDraw: {
-        enumerable: false,
-        value: function() {
-
-        }
-    },
-    draw: {
-        enumerable: false,
-        value: function() {
-
-        }
-    },
 
     _loadXMLDoc: {
         value:function(dname) {
@@ -51,23 +144,88 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
         }
     },
 
+    _stash: {
+        value: {}
+    },
+
     handleExecuteAddComponent: {
         value: function(evt) {
-            this.addComponentToStage(evt.detail.component, evt.detail.dropX, evt.detail.dropY)
+            //var component = evt.detail.component;
+            // Get the data from the event detail component
+            var component = this._testButtonJson;
+            this._stash.dropx = evt.detail.dropX;
+            this._stash.dropy = evt.detail.dropY;
+            this.addComponentToStage(component);// evt.detail.dropX, evt.detail.dropY);
+        }
+    },
+
+    /**
+     * Send a request to add a component to the user document and waits for a callback to continue