1 files changed, 423 insertions, 0 deletions

diff --git a/js/panels/components-panel.reel/components-panel.js b/js/panels/components-panel.reel/components-panel.js
new file mode 100755
index 00000000..9252b7b8
--- /dev/null
+++ b/js/panels/components-panel.reel/components-panel.js
@@ -0,0 +1,423 @@
+/* <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,
+    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);
+};
+
+
+exports.ComponentsPanel = Montage.create(Component, {
+
+    components: {
+        value: {
+            "text": "styles",
+            "children": [
+                {
+                    "text": "Widgets",
+                    "children": [
+                        {
+                            "text": "Feed Reader",
+                            "dataFile" : "node_modules/components-data/feed-reader.json",
+                            "component": "feedreader"
+                        },
+                        {
+                            "text": "Map",
+                            "dataFile" : "node_modules/components-data/map.json",
+                            "component": "map"
+                        },
+                        {
+                            "text": "Picasa Carousel",
+                            "dataFile" : "node_modules/components-data/picasa-carousel.json",
+                            "component": "picasa-carousel"
+                        },
+                        {
+                            "text": "Search Bar",
+                            "dataFile" : "node_modules/components-data/searchfield.json",
+                            "component": "searchfield"
+                        },
+                        {
+                            "text": "Youtube Channel",
+                            "dataFile" : "node_modules/components-data/youtube-channel.json",
+                            "component": "youtube-channel"
+                        }
+                    ]
+                },
+                {
+                    "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
+    },
+
+    componentsLoaded: {
+        value: 0
+    },
+
+    dragComponent: {
+        value: null
+    },
+
+    dragPosition: {
+        value: null
+    },
+
+    centerStage: {
+        value: null
+    },
+
+
+    /*********************************************************************
+     * Components Tree and Model Creation
+     *********************************************************************/
+
+    didCreate: {
+        value: function() {
+            // Setup the drop delegate
+            this.application.ninja.dragDropMediator.dropDelegate = this;
+            // Loop through the component and load the JSON data for them
+            this._loadComponents();
+        }
+    },
+
+    // Load all the data files for each component
+    // TODO: Implement the error case
+    _loadComponents: {
+        value: function() {
+
+            for(var cat in this.components.children) {
+
+                this.componentsToLoad += this.components.children[cat].children.length;
+
+                for(var i = 0, component; component = this.components.children[cat].children[i]; i++) {
+                    var req = new XMLHttpRequest();
+                    //req.identifier = "searchRequest";
+                    req.open("GET", component.dataFile);
+                    req.addEventListener("load", this, false);
+                    req.addEventListener("error", this, false);
+                    req.send();
+                }
+
+            }
+        }
+    },
+
+    handleLoad: {
+        value: function(evt) {
+            var componentData, component, piID, piObj, section;
+
+            componentData = JSON.parse(evt.target.responseText);
+
+            component = componentData.name;
+
+            // Build the PI data and create a new object for Ninja PI
+            piID = component + "Pi";
+            piObj = [];
+            section = {};
+            section.label = component + " Properties";
+            section.Section = [];
+
+            for(var j = 0, props; props = componentData.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;
+                row.items = props.possibleValues;
+
+                section.Section.push([row]);
+            }
+
+            PIData[piID] = [];
+            PIData[piID].push(section);
+
+            // Setup the component hash object to store references to each component data
+            this.componentsData[componentData.component] = componentData;
+
+            this.componentsLoaded++;
+
+            if(this.componentsLoaded === this.componentsToLoad) {
+                // console.log("all loaded");
+                // Here we need to stop some sort of loading animation
+            }
+
+        }