1 files changed, 265 insertions, 35 deletions

diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
index 41afefa5..338e7e0d 100644
--- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
+++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
@@ -4,20 +4,189 @@ 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: 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",
+
+            "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();
+
+        }
     },
+
+    _loadComponents: {
+        value: function() {
+            this.components = [
+                {name: "Button", data: "node_modules/components-data/button.json"},
+                {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();
+                //req.identifier = "searchRequest";
+                req.open("GET", component.data);
+                req.addEventListener("load", this, false);
+                req.addEventListener("error", this, false);
+                req.send();
+
+            }
+
+        }
+    },
+
+    handleLoad: {
+        value: function(evt) {
+            var response = JSON.parse(evt.target.responseText);
+
+            var component = response.component.capitalizeFirstChar();
+
+            var piIdentifier = component + "Pi";
+            var piObj = [];
+            var section = {};
+
+
+            section.label = component + " Properties";
+            section.Section = [];
+
+            for(var j = 0, props; props = response.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);
+
+            this.componentsLoaded++;
+
+            if(this.componentsLoaded === this.componentsToLoad) {
+                console.log("all loaded");
+            }
+
+        }
+    },
+
+    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() {
+
             var treeHolderDiv = document.getElementById("comp_tree");
             var componentsTree = treeControlModule.Tree.create();
             componentsTree.element = treeHolderDiv;
@@ -25,17 +194,6 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component