1 files changed, 740 insertions, 262 deletions

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: {
         get: function () {
-            return this._cameraRotationAxisX;
+            return this._cameraPosition;
         },
         set: function (value) {
-            this._cameraRotationAxisX = value;
+            this._cameraPosition = value;
             this._isCameraUpdated = true;
             this.needsDraw = true;
         }
     },
 
-    cameraRotationAxisY: {
+    cameraTargetPoint: {
         get: function () {
-            return this._cameraRotationAxisY;
+            return this._cameraTargetPoint;
         },
         set: function (value) {
-            this._cameraRotationAxisY = value;
+            this._cameraTargetPoint = value;
             this._isCameraUpdated = true;
             this.needsDraw = true;
         }
     },
 
-    cameraRotationAxisZ: {
+    cameraFov: {
         get: function () {
-            return this._cameraRotationAxisZ;
+            return this._cameraFov;
         },
         set: function (value) {
-            this._cameraRotationAxisZ = value;
+            this._cameraFov = value;
             this._isCameraUpdated = true;
             this.needsDraw = true;
         }
     },
 
-    cameraRotationAngle: {
+    cameraRoll: {
         get: function () {
-            return this._cameraRotationAngle;
+            return this._cameraRoll;
         },
         set: function (value) {
-            this._cameraRotationAngle = value;
+            this._cameraRoll = value;
             this._isCameraUpdated = true;
             this.needsDraw = true;
         }
     },
 
-    _path: {
+    _scrollingTransitionDurationMiliseconds: {
         enumerable: false,
-        value: {
-            value: function (slide) {
-                return {
-                    translateX: slide.time,
-                    translateY: 0,
-                    translateZ: 0,
-                    scale: 1,
-                    rotateX: 0,
-                    rotateY: 0,
-                    rotateZ: 0,
-                    transformOriginX: 0,
-                    transformOriginY: 0,
-                    transformOriginZ: 0,
-                    style: {}
-                };
-            }
-        }
+        value: 500
+    },
+
+    _scrollingTransitionDuration: {
+        enumerable: false,
+        value: "500ms"
     },
 
-    path: {
+    scrollingTransitionDuration: { // TODO: think about using the Date Converter
         get: function () {
-            return this._path;
+            return this._scrollingTransitionDuration;
         },
-        set: function (value) {
-            this._path = value;
+        set: function (duration) {
+