20 files changed, 325 insertions, 150 deletions

diff --git a/js/controllers/elements/component-controller.js b/js/controllers/elements/component-controller.js
index 83450d0f..260ee8a0 100755
--- a/js/controllers/elements/component-controller.js
+++ b/js/controllers/elements/component-controller.js
@@ -11,6 +11,8 @@ exports.ComponentController = Montage.create(ElementController, {
 
     getProperty: {
         value: function(el, prop) {
+            var component = el.controller || this.application.ninja.currentDocument.getComponentFromElement(el);
+
             switch(prop) {
                 case "id":
                 case "class":
@@ -19,18 +21,20 @@ exports.ComponentController = Montage.create(ElementController, {
                 case "width":
                 case "height":
                     if(el.nodeName === "IMG" && (prop === "width" || prop === "height")) {
-                        return this.application.ninja.currentDocument.getComponentFromElement(el)[prop];
+                        return component[prop];
                     } else {
                         return ElementController.getProperty(el, prop, true);
                     }
                 default:
-                    return this.application.ninja.currentDocument.getComponentFromElement(el)[prop];
+                    return component[prop];
             }
         }
     },
 
     setProperty: {
         value: function(el, p, value) {
+            var component = el.controller || this.application.ninja.currentDocument.getComponentFromElement(el);
+
             switch(p) {
                 case "id":
                 case "class":
@@ -39,15 +43,14 @@ exports.ComponentController = Montage.create(ElementController, {
                 case "width":
                 case "height":
                     if(el.nodeName === "IMG" && (p === "width" || p === "height")) {
-                        this.application.ninja.currentDocument.getComponentFromElement(el)[p] = value;
+                        component[p] = value;
                     } else {
                         ElementController.setProperty(el, p, value);
                     }
                     break;
                 default:
                     if(p === "min" || p === "max") value = parseFloat(value);
-
-                    this.application.ninja.currentDocument.getComponentFromElement(el)[p] = value;
+                    component[p] = value;
                     break;
 
             }
diff --git a/js/controllers/selection-controller.js b/js/controllers/selection-controller.js
index 154fb7f8..fa82d4cc 100755
--- a/js/controllers/selection-controller.js
+++ b/js/controllers/selection-controller.js
@@ -6,7 +6,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 
 
 var Montage = require("montage/core/core").Montage,
-    Component = require("montage/ui/component").Component;
+    Component = require("montage/ui/component").Component,
+    NJUtils     = require("js/lib/NJUtils").NJUtils;
 
 exports.SelectionController = Montage.create(Component, {
 
@@ -154,6 +155,28 @@ exports.SelectionController = Montage.create(Component, {
                 this._isDocument = true;
             }
 
+            if(item && item.controller && !item.elementModel.isComponent) {
+                var componentInfo = Montage.getInfoForObject(item.controller);
+                var componentName = componentInfo.objectName.toLowerCase();
+                switch(componentName) {
+                    case "feedreader":
+                        NJUtils.makeElementModel(item, "Feed Reader", "component", false);
+                        item.elementModel.pi = "FeedReaderPi";
+                        item.elementModel.isComponent = true;
+                        break;
+                    case "map":
+                        NJUtils.makeElementModel(item, "Map", "component", false);
+                        item.elementModel.pi = "MapPi";
+                        item.elementModel.isComponent = true;
+                        break;
+                    case "youtubechannel":
+                        NJUtils.makeElementModel(item, "Youtube Channel", "component", false);
+                        item.elementModel.pi = "YoutubeChannelPi";
+                        item.elementModel.isComponent = true;
+                        break;
+                }
+            }
+
             NJevent("selectionChange", {"elements": this.application.ninja.selectedElements, "isDocument": this._isDocument} );
 
         }
diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
index dcb69255..599eeda3 100755
--- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
+++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
@@ -159,15 +159,19 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
     _loadComponents: {
         value: function() {
 
-            this.componentsToLoad = this.components.children[0].children.length;
-
-            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();
+            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();
+                }
+
             }
         }
     },
@@ -287,6 +291,13 @@ 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];
+                    }
+                }
+
                 that.application.ninja.currentDocument.setComponentInstance(instance, element);
 
                 NJevent("elementAdding", {"el": element, "data":styles});
diff --git a/node_modules/components-data/map.json b/node_modules/components-data/map.json
index 796b2fad..655d222d 100644
--- a/node_modules/components-data/map.json
+++ b/node_modules/components-data/map.json
@@ -8,8 +8,8 @@
     "properties": [
         {
             "name": "category",
-            "type": "string",
-            "default": "",
+            "type": "select",
+            "default": "restaurant",
             "possibleValues": ["restaurant", "hospital", "cafe", "museum"]
         },
         {
@@ -18,5 +18,11 @@
             "default": ""
         }
 
-    ]
+    ],
+
+    "defaultStyles":  {
+        "width": "280px",
+        "height": "280px"
+    }
+
 }
\ No newline at end of file
diff --git a/node_modules/components-data/youtube-channel.json b/node_