28 files changed, 531 insertions, 297 deletions

diff --git a/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js b/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js
index 0c950ffd..ecf0f9cd 100755
--- a/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js
+++ b/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js
@@ -1691,7 +1691,7 @@ NJCSSStyle.prototype.styleChange = function() {
 NJCSSStyle.prototype.getUnits = function(val) {
     if(val.split(/\s/).length > 1) {
         return false;
-    } else if(/px|em|pt|in|cm|mm|ex|pc|%/.test(val)) {
+    } else if(/(px|em|pt|in|cm|mm|ex|pc|%)$/.test(val)) {
         return val.replace(/^.*(px|em|pt|in|cm|mm|ex|pc|%).*/, '$1');
     }
     return null;
@@ -1771,7 +1771,7 @@ NJCSSStyle.prototype.updateValue = function(newValue, bypassUndo) {
         this.styleChange();
         return true;
     }
-    
+
     var IMPORTANT_FLAG = ' !important',
         dec = this.njRule.declaration,        
         acceptAsValid = false,
diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
index b4eec771..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"
@@ -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