30 files changed, 694 insertions, 239 deletions

diff --git a/js/controllers/selection-controller.js b/js/controllers/selection-controller.js
index fa82d4cc..9b0e638a 100755
--- a/js/controllers/selection-controller.js
+++ b/js/controllers/selection-controller.js
@@ -155,28 +155,6 @@ 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/lib/NJUtils.js b/js/lib/NJUtils.js
index 4f1082f9..904aa41e 100755
--- a/js/lib/NJUtils.js
+++ b/js/lib/NJUtils.js
@@ -96,15 +96,45 @@ exports.NJUtils = Object.create(Object.prototype, {
         value: function(el, selection, controller, isShape) {
             var p3d = Montage.create(Properties3D).init(el);
             var shapeProps = null;
+            var pi = controller + "Pi";
+
             if(isShape) {
                 shapeProps = Montage.create(ShapeModel);
             }
 
+            if(el.controller) {
+
+                var componentInfo = Montage.getInfoForObject(el.controller);
+                var componentName = componentInfo.objectName.toLowerCase();
+
+                controller  = "component";
+                isShape = false;
+
+                switch(componentName) {
+                    case "feedreader":
+                        selection = "Feed Reader";
+                        pi = "FeedReaderPi";
+                        break;
+                    case "map":
+                        selection = "Map";
+                        pi = "MapPi";
+                        break;
+                    case "youtubechannel":
+                        selection = "Youtube Channel";
+                        pi = "YoutubeChannelPi";
+                        break;
+                    case "picasacarousel":
+                        selection = "Picasa Carousel";
+                        pi = "PicasaCarouselPi";
+                        break;
+                }
+            }
+
             el.elementModel = Montage.create(ElementModel, {
                     type:       { value: el.nodeName},
                     selection:  { value: selection},
                     controller: { value: ControllerFactory.getController(controller)},
-                    pi:         { value: controller + "Pi"},
+                    pi:         { value: pi},
                     props3D:    { value: p3d},
                     shapeModel: { value: shapeProps}
             });
diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
index 87c68a52..599eeda3 100755
--- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
+++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
@@ -291,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/js/panels/presets/default-animation-presets.js b/js/panels/presets/default-animation-presets.js
index 10a3e906..2e656e86 100644
--- a/js/panels/presets/default-animation-presets.js
+++ b/js/panels/presets/default-animation-presets.js
@@ -18,23 +18,23 @@ exports.animationPresets = {
                         "-webkit-animation": "border-morph 2s infinite"
                     }
                 },
-                {
-                    "isKeyFrameRule": true,
-                    "keys" : [{
-                        "keyText": "0%",
-                        "styles": { "border-radius": "0" }
-                    }, {
-                        "keyText": "50%",
-                        "styles": {
-                            "border-radius": "100%"
-                        }
-                    }, {
-                        "keyText": "100%",
-                        "styles": {
-                            "border-radius": "0%"
-                        }
+                    {
+                        "isKeyFrameRule": true,
+                        "keys" : [{
+                            "keyText": "0%",
+                            "styles": { "border-radius": "0" }
+                        }, {
+                            "keyText": "50%",
+                            "styles": {
+                                "border-radius": "100%"
+                            }
+                        }, {
+                            "keyText": "100%",
+                            "styles": {
+                                "border-radius": "0%"
+                            }
+                        }]
                     }]
-                }]
             }]
     }, {
         "text": "3D Animations",
@@ -50,7 +50,7 @@ exports.animationPresets = {
                         "-webkit-animation-iteration-count": "infinite",
                         "-webkit-animation-direction": "normal",
                         "-webkit-animation-timing-function": "ease-out",
-                        "-webkit-transform-origin": "200% 50%",
+                        "-webkit-transform-origin": "100% 50%",
                         "-webkit-transform-style": "preserve-3d",
                         "-webkit-transform": "perspective(1000)",
                         "-webkit-animation-delay": "0s"
@@ -89,6 +89,51 @@ exports.animationPresets = {
                         }
                     }]
                 }]
+            },
+            {
+                "text": "Rotate with Fade In",
+                "selectorBase" : "rotate-with-fade-in",
+                "rules" : [{
+                    "selectorSuffix" : "",
+                    "styles" : {
+                        "-webkit-animation-name": "rotate-with-fade-in",