2 files changed, 444 insertions, 76 deletions

diff --git a/node_modules/montage/ui/flow.reel/flow.html b/node_modules/montage/ui/flow.reel/flow.html
index 52edb7e5..8a9603bf 100644
--- a/node_modules/montage/ui/flow.reel/flow.html
+++ b/node_modules/montage/ui/flow.reel/flow.html
@@ -9,7 +9,7 @@
     <title></title>
     <script type="text/montage-serialization">
         {
-            "repetition1": {
+            "repetition": {
                 "prototype": "montage/ui/repetition.reel",
                 "properties": {
                     "element": {
@@ -17,6 +17,17 @@
                     }
                 }
             },
+            "translateComposer": {
+                "prototype": "montage/ui/composer/translate-composer",
+                "properties": {
+                    "component": {"@": "owner"},
+                    "maxTranslateX": 250000,
+                    "invertAxis": true
+                },
+                "bindings": {
+                    "element": {"<-": "@owner._element"}
+                }
+            },
             "owner": {
                 "prototype": "montage/ui/flow.reel",
                 "properties": {
@@ -24,7 +35,17 @@
                         "#": "montage-flow"
                     },
                     "_repetition": {
-                        "@": "repetition1"
+                        "@": "repetition"
+                    },
+                    "_translateComposer": {
+                        "@": "translateComposer"
+                    }
+                },
+                "bindings": {
+                    "translateX": {"<-": "@translateComposer.translateX"},
+                    "isSelectionEnabled": {
+                        "boundObject": {"@": "repetition"},
+                        "boundObjectPropertyPath": "isSelectionEnabled"
                     }
                 }
             }
@@ -45,8 +66,17 @@
             -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>
diff --git a/node_modules/montage/ui/flow.reel/flow.js b/node_modules/montage/ui/flow.reel/flow.js
index fa676a67..2137f782 100644
--- a/node_modules/montage/ui/flow.reel/flow.js
+++ b/node_modules/montage/ui/flow.reel/flow.js
@@ -10,6 +10,74 @@ var Montage = require("montage").Montage,
 
 var Flow = exports.Flow = Montage.create(Component, {
 
+    _splinePaths: {
+        enumerable: false,
+        value: null
+    },
+
+    splinePaths: {
+        enumerable: false,
+        get: function () {
+            if (!this._splinePaths) {
+                this._splinePaths = [];
+            }
+            return this._splinePaths;
+        },
+        set: function (value) {
+            this._splinePaths = value;
+        }
+    },
+
+    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: null
+    },
+
+    paths: { // TODO: listen for changes?
+        get: function () {
+            return this._paths;
+        },
+        set: function (value) {
+            var length = value.length,
+                i;
+
+            if (length) {
+                this._paths = [];
+                for (i = 0; i < length; i++) {
+                    this.appendPath(value[i]);
+                }
+            }
+        }
+    },
+
     _cameraPosition: {
         enumerable: false,
         value: [0, 0, 800]
@@ -76,17 +144,171 @@ var Flow = exports.Flow = Montage.create(Component, {
         }
     },
 
-    _splinePath: {
+    _scrollingTransitionDurationMiliseconds: {
         enumerable: false,
-        value: null
+        value: 500
+    },
+
+    _scrollingTransitionDuration: {
+        enumerable: false,
+        value: "500ms"
     },
 
-    splinePath: {
+    scrollingTransitionDuration: { // TODO: think about using the Date Converter
         get: function () {
-            return this._splinePath;
+            return this._scrollingTransitionDuration;
         },
-        set: function (value) {
-            this._splinePath = value;
+        set: function (duration) {
+            var durationString = duration + "",
+                length = durationString.length,
+                value;
+
+            if ((length >= 2) && (durationString[length - 1] === "s")) {
+                if ((length >= 3) && (durationString[length - 2] === "m")) {
+                    value = durationString.substr(0, length - 2) - 0;
+                } else {
+                    value = durationString.substr(0, length - 1) * 1000;
+                }
+            } else {
+                value = durationString - 0;
+                durationString += "ms";
+            }
+            if (!isNaN(value) && (this._scrollingTransitionDurationMiliseconds !== value)) {
+                this._scrollingTransitionDurationMiliseconds = value;
+                this._scrollingTransitionDuration = durationString;
+            }
+        }
+    },
+
+    _scrollingTransitionTimingFunctionBezier: {
+        enumerable: false,
+        value: [.25, .1, .25, 1]
+    },
+
+    _scrollingTransitionTimingFunction: {
+        enumerable: false,
+        value: "ease"
+    },
+
+    hasSelectedIndexScrolling: {
+        enumerable: false,
+        value: false
+    },
+
+    selectedIndexScrollingOffset: {
+        enumerable: false,
+        value: 0
+    },
+
+    _handleSelectedIndexesChange: {
+        enumerable: false,
+        value: function (event) {
+            if (this.hasSelectedIndexScrolling && event._plus) {
+                this.startScrollingIndexToOffset(event._plus[0], this.selectedIndexSc