24 files changed, 715 insertions, 145 deletions

diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
index b6bee37d..3505393c 100755
--- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
+++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
@@ -23,6 +23,36 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
             "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": [
                         {
@@ -50,7 +80,7 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
                             "dataFile" : "node_modules/components-data/number-input.json",
                             "component": "numberInput"
                         },
-                        {
+                       {
                             "text": "Select Input",
                             "dataFile" : "node_modules/components-data/select.json",
                             "component": "select"
@@ -118,7 +148,7 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
     didCreate: {
         value: function() {
             // Setup the drop delegate
-//            this.application.ninja.dragDropMediator.dropDelegate = this;
+            this.application.ninja.dragDropMediator.dropDelegate = this;
             // Loop through the component and load the JSON data for them
             this._loadComponents();
         }
@@ -129,15 +159,19 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
     _loadComponents: {
         value: function() {
 
-            this.componentsToLoad = this.components.children[0].children.length;
+            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();
+                }
 
-            for(var i = 0, component; component = this.components.children[0].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();
             }
         }
     },
@@ -257,6 +291,15 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
                     '-webkit-transform' : 'perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
                 };
 
+                var defaultStyles = component.defaultStyles;
+                if(defaultStyles) {
+                    for(var n in defaultStyles) {
+                        styles[n] = defaultStyles[n];
+                    }
+                }
+                
+                instance.addEventListener('firstDraw', that, false);
+
                 that.application.ninja.currentDocument.setComponentInstance(instance, element);
 
                 NJevent("elementAdding", {"el": element, "data":styles});
@@ -264,6 +307,12 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
 
         }
     },
+    
+    handleFirstDraw: {
+        value: function (e) {
+                NJevent("addComponentFirstDraw");
+        }
+    },
 
     makeComponent: {
         value: function(name) {
@@ -313,6 +362,7 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
                     el.setAttribute("type", "range");
                     break;
                 case "textfield":
+                case "searchfield":
                     el = NJUtils.makeNJElement("input", "Textfield", "component");
                     el.elementModel.pi = "TextfieldPi";
                     el.setAttribute("type", "text");
@@ -326,6 +376,27 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
                     el.elementModel.pi = "ToggleButtonPi";
                     el.innerHTML = "Off";
                     break;
+                case "map":
+                    el = NJUtils.makeNJElement("div", "Map", "component");
+                    el.elementModel.pi = "MapPi";
+                    el.elementModel.isComponent = true;
+                    break;
+                case "feedreader":
+                    el = NJUtils.makeNJElement("div", "Feed Reader", "component");
+                    el.elementModel.pi = "FeedReaderPi";
+                    el.elementModel.isComponent = true;
+                    break;
+                case "picasa-carousel":
+                    el = NJUtils.makeNJElement("div", "Picasa Carousel", "component");
+                    el.elementModel.pi = "PicasaCarouselPi";
+                    el.elementModel.isComponent = true;
+                    break;
+                case "youtube-channel":
+                    el = NJUtils.makeNJElement("div", "Youtube Channel", "component");
+                    el.elementModel.pi = "YoutubeChannelPi";