8 files changed, 141 insertions, 71 deletions

diff --git a/js/controllers/selection-controller.js b/js/controllers/selection-controller.js
index 5091f99a..9b0e638a 100755
--- a/js/controllers/selection-controller.js
+++ b/js/controllers/selection-controller.js
@@ -155,33 +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;
-                    case "picasacarousel":
-                        NJUtils.makeElementModel(item, "Picasa Carousel", "component", false);
-                        item.elementModel.pi = "PicasaCarouselPi";
-                        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/node_modules/components-data/feed-reader.json b/node_modules/components-data/feed-reader.json
index 6caf768d..aa9bf340 100644
--- a/node_modules/components-data/feed-reader.json
+++ b/node_modules/components-data/feed-reader.json
@@ -11,5 +11,9 @@
             "type": "string",
             "default": null
         }
-    ]
+    ],
+    "defaultStyles":  {
+        "width":"350px",
+        "height":"250px"
+    }
 }
\ No newline at end of file
diff --git a/node_modules/montage/examples/feed-reader/main.reel/main.html b/node_modules/montage/examples/feed-reader/main.reel/main.html
index 50bac601..1313219f 100644
--- a/node_modules/montage/examples/feed-reader/main.reel/main.html
+++ b/node_modules/montage/examples/feed-reader/main.reel/main.html
@@ -45,8 +45,8 @@
         "name": "FeedReader",
         "properties": {
             "element": {"#": "feed-reader"},
-            "feedDisplayMode": "timed",
-            "interval": "5"
+            "feedDisplayMode": "animation",
+            "interval": "3"
         }
     },
     
@@ -170,6 +170,7 @@
             margin-top: 10px;
         }
         
+        
         /*
         .feed-reader .feed-entry {
             visibility:hidden;
@@ -182,7 +183,42 @@
             transition-delay:0s;
         }
         */
+        
+        @-webkit-keyframes rotateWithAlphaKeyframes {
+            0% {
+                    opacity: 0;
+                    -webkit-transform: perspective(1000) rotateY(95deg);
+            }
+            1% {
+                    opacity: 0;
+                    -webkit-transform: perspective(1000) rotateY(-90deg);
+            }
+            15% {
+                    opacity: 1;
+                    -webkit-transform: perspective(1000) rotateY(0deg);
+            }
+            85% {
+                    opacity: 1;
+                    -webkit-transform: perspective(1000) rotateY(0deg);
+            }
+            100% {
+                    opacity: 0;
+                    -webkit-transform: perspective(1000) rotateY(95deg);
+            }
+        }
+        
+        .rotateWithAlphaAnimation {
+                -webkit-animation-name: rotateWithAlphaKeyframes;
+                -webkit-animation-duration: 5s;
+                -webkit-animation-iteration-count: infinite;
+                -webkit-animation-direction: normal;
+                -webkit-animation-timing-function: ease-out;
+                -webkit-transform-origin: 200% 50%;
+                -webkit-transform-style: preserve-3d;
+                -webkit-transform: perspective(1000);
+        }
 
+    
     </style>
 
 
@@ -201,7 +237,7 @@
                         <input type="button" id="btn-go" class="btn primary" value="OK"></button>
                     </form>
                 </div>
-                <div class="feed-reader" id="feed-reader"></div>
+                <div class="feed-reader rotateWithAlphaAnimation" id="feed-reader" ></div>
             </section>
             
             <section class="map-container">
diff --git a/node_modules/montage/ui/feed-reader/feed-reader.reel/feed-reader.html b/node_modules/montage/ui/feed-reader/feed-reader.reel/feed-reader.html
index e5251e0a..21f3d4ee 100644
--- a/node_modules/montage/ui/feed-reader/feed-reader.reel/feed-reader.html
+++ b/node_modules/montage/ui/feed-reader/feed-reader.reel/feed-reader.html
@@ -52,7 +52,9 @@
 
     <style>
        div.feed-reader  {
-           padding: 10px;          
+           padding: 10px; 
+           height: 250px;
+           width: 350px;        
        }
        
        .feed-entry {
diff --git a/node_modules/montage/ui/feed-reader/feed-reader.reel/feed-reader.js b/node_modules/montage/ui/feed-reader/feed-reader.reel/feed-reader.js
index 8fd9ae22..0d5d7bb1 100644
--- a/node_modules/montage/ui/feed-reader/feed-reader.reel/feed-reader.js
+++ b/node_modules/montage/ui/feed-reader/feed-reader.reel/feed-reader.js
@@ -40,35 +40,39 @@ exports.FeedReader = Montage.create(Component, {
             this._fetchFeed();
         }