Squashed commit of the following:

commit 2054551bfb01a0f4ca2e138b9d724835462d45cd
Merge: 765c2da 616a853
Author: Valerio Virgillito <valerio@motorola.com>
Date:   Wed Apr 18 13:48:21 2012 -0700

    Merge branch 'refs/heads/master' into integration

commit 765c2da8e1aa03550caf42b2bd5f367555ad2843
Author: Valerio Virgillito <valerio@motorola.com>
Date:   Tue Apr 17 15:29:41 2012 -0700

    updating the picasa carousel

    Signed-off-by: Valerio Virgillito <valerio@motorola.com>

commit 9484f1c82b81e27edf2dc0a1bcc1fa3b12077406
Merge: d27f2df cacb4a2
Author: Valerio Virgillito <valerio@motorola.com>
Date:   Tue Apr 17 15:03:50 2012 -0700

    Merge branch 'refs/heads/master' into integration

commit d27f2df4d846064444263d7832d213535962abe7
Author: Valerio Virgillito <valerio@motorola.com>
Date:   Wed Apr 11 10:39:36 2012 -0700

    integrating new picasa carousel component

    Signed-off-by: Valerio Virgillito <valerio@motorola.com>

commit 6f98384c9ecbc8abe55ccfe1fc25a0c7ce22c493
Author: Valerio Virgillito <valerio@motorola.com>
Date:   Tue Apr 10 14:33:00 2012 -0700

    fixed the text area case issue

    Text area was renamed from TextArea to Textarea

    Signed-off-by: Valerio Virgillito <valerio@motorola.com>

commit 1e83e26652266136802bc7af930379c1ecd631a6
Author: Valerio Virgillito <valerio@motorola.com>
Date:   Mon Apr 9 22:10:45 2012 -0700

    integrating montage v0.8 into ninja.

    Signed-off-by: Valerio Virgillito <valerio@motorola.com>

Signed-off-by: Valerio Virgillito <valerio@motorola.com>

2 files changed, 778 insertions, 272 deletions

diff --git a/node_modules/montage/ui/flow.reel/flow.html b/node_modules/montage/ui/flow.reel/flow.html
index 646c87f8..8a9603bf 100644
--- a/node_modules/montage/ui/flow.reel/flow.html
+++ b/node_modules/montage/ui/flow.reel/flow.html
@@ -9,24 +9,43 @@
     <title></title>
     <script type="text/montage-serialization">
         {
-            "repetition1": {
-                "module": "montage/ui/repetition.reel",
-                "name": "Repetition",
+            "repetition": {
+                "prototype": "montage/ui/repetition.reel",
                 "properties": {
                     "element": {
                         "#": "montage-flow-repetition"
                     }
                 }
             },
+            "translateComposer": {
+                "prototype": "montage/ui/composer/translate-composer",
+                "properties": {
+                    "component": {"@": "owner"},
+                    "maxTranslateX": 250000,
+                    "invertAxis": true
+                },
+                "bindings": {
+                    "element": {"<-": "@owner._element"}
+                }
+            },
             "owner": {
-                "module": "montage/ui/flow.reel",
-                "name": "Flow",
+                "prototype": "montage/ui/flow.reel",
                 "properties": {
                     "element": {
                         "#": "montage-flow"
                     },
                     "_repetition": {
-                        "@": "repetition1"
+                        "@": "repetition"
+                    },
+                    "_translateComposer": {
+                        "@": "translateComposer"
+                    }
+                },
+                "bindings": {
+                    "translateX": {"<-": "@translateComposer.translateX"},
+                    "isSelectionEnabled": {
+                        "boundObject": {"@": "repetition"},
+                        "boundObjectPropertyPath": "isSelectionEnabled"
                     }
                 }
             }
@@ -47,14 +66,23 @@
             -webkit-transform-style: preserve-3d;
             -webkit-transform: translateZ(0);
         }
-        .montage-flow-repetition > * {
-            position: absolute !important;
+        .montage-flow-repetition > div {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 0;
+            height: 0;
+            -webkit-transform: translateZ(0);
+            -webkit-transform-style: preserve-3d;
+        }
+        .montage-flow-pointer-events-none {
+            pointer-events: none;
         }
     </style>
 </head>
 <body>
-    <div id="montage-flow" class="montage-flow">
-        <div id="montage-flow-repetition" class="montage-flow-repetition"></div>
+    <div data-montage-id="montage-flow" class="montage-flow">
+        <div data-montage-id="montage-flow-repetition" class="montage-flow-repetition"></div>
     </div>
 </body>
 </html>
diff --git a/node_modules/montage/ui/flow.reel/flow.js b/node_modules/montage/ui/flow.reel/flow.js
index 089353a8..929e61b8 100644
--- a/node_modules/montage/ui/flow.reel/flow.js
+++ b/node_modules/montage/ui/flow.reel/flow.js
@@ -5,145 +5,319 @@
  </copyright> */
 
 var Montage = require("montage").Montage,
-    Component = require("ui/component").Component;
+    Component = require("ui/component").Component,
+    FlowBezierSpline = require("ui/flow-bezier-spline").FlowBezierSpline;
 
 var Flow = exports.Flow = Montage.create(Component, {
 
-    // TODO: Review _externalUpdate
+    _splinePaths: {
+        enumerable: false,
+        value: null
+    },
 
-    _externalUpdate: {
+    splinePaths: {
         enumerable: false,
-        value: true
+        get: function () {
+            if (!this._splinePaths) {
+                this._splinePaths = [];
+            }
+            return this._splinePaths;
+        },
+        set: function (value) {
+            this._splinePaths = value;
+        }
     },
 
-    _isCameraUpdated: {
+    appendPath: {
+        value: function (path) {
+            var splinePath = Object.create(FlowBezierSpline),
+                pathKnots = path.knots,
+                length = path.knots.length,
+                knots = [],
+                nextHandlers = [],
+                previousHandlers = [],
+                densities = [],
+                i;
+
+            for (i = 0; i < length; i++) {
+                knots[i] = pathKnots[i].knotPosition;
+                previousHandlers[i] = pathKnots[i].previousHandlerPosition;
+                nextHandlers[i] = pathKnots[i].nextHandlerPosition;
+                densities[i] = pathKnots[i].previousDensity; // TODO: implement previous/next density
+                // TODO: add rotations, arbitrary CSS and units
+            }
+            splinePath.knots = knots;
+            splinePath.previousHandlers = previousHandlers;
+            splinePath.nextHandlers = nextHandlers;
+            splinePath.densities = densities;
+            splinePath._computeDensitySummation();
+            this.splinePaths.push(splinePath);
+            this._paths.push(path);
+        }
+    },
+
+    _paths: {
         enumerable: false,
-        value: false
+        value: null
     },
 
-    // Camera rotation based in CSS3 rotate3D axis/angle system
+    paths: { // TODO: listen for changes?
+        get: function () {
+            return this._paths;
+        },
+        set: function (value) {
+            var length = value.length,
+                i;
 
-    _cameraRotationAxisX: {
+            if (length) {
+                this._paths = [];
+                for (i = 0; i < length; i++) {
+                    this.appendPath(value[i]);
+                }
+            }
+        }
+    },
+
+    _cameraPosition: {
         enumerable: false,
-        value: 0
+        value: [0, 0, 800]
     },
 
-    _cameraRotationAxisY: {
+    _cameraTargetPoint: {
         enumerable: false,
-        value: 0
+        value: [0, 0, 0]
     },
 
-    _cameraRotationAxisZ: {
+    _cameraFov: {
         enumerable: false,
-        value: 1
+        value: 50
     },
 
-    _cameraRotationAngle: {
+    // TODO: Implement camera roll
+
+    _cameraRoll: {
         enumerable: false,
         value: 0
     },
 
-    cameraRotationAxisX: {
+    cameraPosition: {