From 526e423e4a2734c2b139af23911e912452a4443f Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Fri, 4 May 2012 14:56:24 -0700
Subject: reverting to v0.8 flow component for the picasa carousel

Signed-off-by: Valerio Virgillito <valerio@motorola.com>
---
 node_modules/montage/ui/flow.reel/flow.html |  38 ++-
 node_modules/montage/ui/flow.reel/flow.js   | 482 +++++++++++++++++++++++-----
 2 files changed, 444 insertions(+), 76 deletions(-)

(limited to 'node_modules/montage')

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.selectedIndexScrollingOffset);
+            }
+        }
+    },
+
+    _timingFunctions: {
+        enumerable: false,
+        value: {
+            "ease": [.25, .1, .25, 1],
+            "linear": [0, 0, 1, 1],
+            "ease-in": [.42, 0, 1, 1],
+            "ease-out": [0, 0, .58, 1],
+            "ease-in-out": [.42, 0, .58, 1]
+        }
+    },
+
+    scrollingTransitionTimingFunction: {
+        get: function () {
+            return this._scrollingTransitionTimingFunction;
+        },
+        set: function (timingFunction) {
+            var string = timingFunction + "";
+
+            if (this._timingFunctions.hasOwnProperty(string)) {
+                this._scrollingTransitionTimingFunction = string;
+                this._scrollingTransitionTimingFunctionBezier = this._timingFunctions[string];
+            } else {
+                if ((string.substr(0, 13) === "cubic-bezier(") && (string.substr(string.length - 1, 1) === ")")) {
+                    var bezier = string.substr(13, string.length - 14).split(","),
+                        i;
+
+                    if (bezier.length === 4) {
+                        for (i = 0; i < 4; i++) {
+                            bezier[i] -= 0;
+                            if (isNaN(bezier[i])) {
+                                return;
+                            }
+                        }
+                        if (bezier[0] < 0) {
+                            bezier[0] = 0;
+                        } else {
+                            if (bezier[0] > 1) {
+                                bezier[0] = 1;
+                            }
+                        }
+                        if (bezier[2] < 0) {
+                            bezier[2] = 0;
+                        } else {
+                            if (bezier[2] > 1) {
+                                bezier[2] = 1;
+                            }
+                        }
+                        // TODO: check it is not the same bezier
+                        this._scrollingTransitionTimingFunction = "cubic-bezier(" + bezier + ")";
+                        this._scrollingTransitionTimingFunctionBezier = bezier;
+                    }
+                }
+            }
+        }
+    },
+
+    _computeCssCubicBezierValue: {
+        enumerable: false,
+        value: function (x, bezier) {
+            var t = .5,
+                step = .25,
+                t2,
+                k,
+                i;
+
+            for (i = 0; i < 20; i++) { // TODO: optimize with Newton's method or similar
+                t2 = t * t;
+                k = 1 - t;
+                if ((3 * (k * k * t * bezier[0] + k * t2 * bezier[2]) + t2 * t) > x) {
+                    t -= step;
+                } else {
+                    t += step;
+                }
+                step *= .5;
+            }
+            t2 = t * t;
+            k = 1 - t;
+            return 3 * (k * k * t * bezier[1] + k * t2 * bezier[3]) + t2 * t;
+        }
+    },
+
+    _isTransitioningScroll: {
+        enumerable: false,
+        value: false
+    },
+
+    stopScrolling: {
+        value: function () {
+            this._isTransitioningScroll = false;
+            // TODO: Fire scrollingTransitionCancel event
+        }
+    },
+
+    startScrollingIndexToOffset: { // TODO: Fire scrollingTransitionStart event
+        value: function (index, offset) {
+            this._scrollingOrigin = this.origin;
+            this._scrollingDestination = index - offset;
+            this._isScrolling = true;
+            this._scrollingStartTime = Date.now();
+            this._isTransitioningScroll = true;
             this.needsDraw = true;
         }
     },
@@ -113,7 +335,7 @@ var Flow = exports.Flow = Montage.create(Component, {
 
     _elementsBoundingSphereRadius: {
         enumerable: false,
-        value: 142
+        value: 150
     },
 
     elementsBoundingSphereRadius: {
@@ -209,9 +431,8 @@ var Flow = exports.Flow = Montage.create(Component, {
 
     _computeVisibleRange: { // TODO: make it a loop, optimize
         enumerable: false,
-        value: function () {
-            var spline = this._splinePath,
-                splineLength = spline.knotsLength - 1,
+        value: function (spline) {
+            var splineLength = spline.knotsLength - 1,
                 planeOrigin = this._cameraPosition,
                 normals = this._computeFrustumNormals(),
                 mod,
@@ -306,9 +527,6 @@ var Flow = exports.Flow = Montage.create(Component, {
         value: function () {
             var self = this;
 
-            if (!this._splinePath) {
-                this.splinePath = Object.create(FlowBezierSpline);
-            }
             this._repetitionComponents = this._repetition._childComponents;
             window.addEventListener("resize", function () {
                 self._isCameraUpdated = true;
@@ -352,23 +570,75 @@ var Flow = exports.Flow = Montage.create(Component, {
         }
     },
 
+    _updateIndexMap2: {
+        enumerable: false,
+        value: function (currentIndexMap, newIndexes) {
+            var indexMap = currentIndexMap.slice(0, currentIndexMap.length),
+                newIndexesHash = {},
+                emptySpaces = [],
+                j,
+                i;
+
+            for (i = 0; i < newIndexes.length; i++) {
+                newIndexesHash[newIndexes[i]] = i;
+            }
+            for (i = 0; i < indexMap.length; i++) {
+                if (newIndexesHash.hasOwnProperty(indexMap[i])) {
+                    newIndexes[newIndexesHash[indexMap[i]]] = null;
+                } else {
+                    emptySpaces.push(i);
+                }
+            }
+            for (i = j = 0; (j < emptySpaces.length) && (i < newIndexes.length); i++) {
+                if (newIndexes[i] !== null) {
+                    indexMap[emptySpaces[j]] = newIndexes[i];
+                    j++;
+                }
+            }
+            for (j = indexMap.length; i < newIndexes.length; i++) {
+                if (newIndexes[i] !== null) {
+                    indexMap[j] = newIndexes[i];
+                    j++;
+                }
+            }
+            return indexMap;
+        }
+    },
+
     willDraw: {
         enumerable: false,
         value: function () {
             var newIndexMap = [],
+                intersections,
                 i,
                 j,
-                intersections = this._computeVisibleRange();
+                tmp;
 
+            if (this._isTransitioningScroll) {
+                var time = (Date.now() - this._scrollingStartTime) / this._scrollingTransitionDurationMiliseconds, // TODO: division by zero
+                    interpolant = this._computeCssCubicBezierValue(time, this._scrollingTransitionTimingFunctionBezier);
+
+                if (time < 1) {
+                    this.origin = this._scrollingOrigin + (this._scrollingDestination - this._scrollingOrigin) * interpolant;
+                } else {
+                    this.origin = this._scrollingDestination;
+                    this._isTransitioningScroll = false;
+                }
+            }
             this._width = this._element.offsetWidth;
             this._height = this._element.offsetHeight;
-
-            for (i = 0; i < intersections.length; i++) {
-                for (j = Math.ceil(intersections[i][0] + this._origin/this._scale); j < intersections[i][1] + this._origin/this._scale; j++) {
-                    newIndexMap.push(j);
+            if (this.splinePaths.length) {
+                intersections = this._computeVisibleRange(this.splinePaths[0]);
+                for (i = 0; i < intersections.length; i++) {
+                    for (j = Math.ceil(intersections[i][0] + this._origin); j < intersections[i][1] + this._origin; j++) {
+                        newIndexMap.push(j);
+                    }
+                }
+                tmp = this._updateIndexMap2(this._repetition.indexMap, newIndexMap);
+                if (this._repetition.indexMap.join("-") !== tmp.join("-")) {
+                    this._repetition.indexMap = tmp;
                 }
             }
-            this._repetition.indexMap = this._updateIndexMap(this._repetition.indexMap, newIndexMap);
         }
     },
 
@@ -385,7 +655,10 @@ var Flow = exports.Flow = Montage.create(Component, {
                 iStyle,
                 pos;
 
-            if (this.isAnimating) {
+            if (this._isTransitioningScroll) {
+                this.needsDraw = true;
+            }
+            if (this.isAnimating) { // move it to willDraw
                 this._animationInterval();
             }
             if (this._isCameraUpdated) {
@@ -399,24 +672,23 @@ var Flow = exports.Flow = Montage.create(Component, {
 
                 tmpZ = vX * -Math.sin(-yAngle) + vZ * Math.cos(-yAngle);
                 xAngle = Math.atan2(-vY, -tmpZ);
-                this._element.style.webkitPerspective = perspective + "px";
+//                this._element.style.webkitPerspective = perspective + "px";
                 this._repetition._element.style.webkitTransform =
                     "translate3d(" + 0 + "px, " + 0 + "px, " + perspective + "px) rotateX(" + xAngle + "rad) rotateY(" + (-yAngle) + "rad) " +
                     "translate3d(" + (-this.cameraPosition[0]) + "px, " + (-this.cameraPosition[1]) + "px, " + (-this.cameraPosition[2]) + "px)";
                 this._isCameraUpdated = false;
             }
-            if (this._splinePath) {
-                this._splinePath._computeDensitySummation(); // TODO: This should not be done per frame
+            if (this.splinePaths.length) { // TODO: implement multiple paths
                 for (i = 0; i < length; i++) {
-                    iStyle = this._repetitionComponents[i].element.style;
                     iOffset = this._offset.value(this._repetition.indexMap[i]);
                     slide.index = this._repetition.indexMap[i];
                     slide.time = iOffset.time;
                     slide.speed = iOffset.speed;
-                    pos = this._splinePath.getPositionAtTime(slide.time / 300);
+                    pos = this._splinePaths[0].getPositionAtTime(slide.time);
                     if (pos) {
-                        if (iStyle.display !== "block") {
-                            iStyle.display = "block";
+                        iStyle = this._repetitionComponents[i].element.parentNode.style;
+                        if (iStyle.opacity == 0) {
+                            iStyle.opacity = 1;
                         }
                         transform = "translate3d(" + pos[0] + "px," + pos[1] + "px," + pos[2] + "px) ";
                         transform += (typeof pos[3].rotateZ !== "undefined") ? "rotateZ(" + pos[3].rotateZ + ") " : "";
@@ -426,14 +698,17 @@ var Flow = exports.Flow = Montage.create(Component, {
                         delete pos[3].rotateX;
                         delete pos[3].rotateY;
                         delete pos[3].rotateZ;
+                        iStyle = this._repetitionComponents[i].element.style;
                         for (j in pos[3]) {
                             if ((pos[3].hasOwnProperty(j)) && (iStyle[j] !== pos[3][j])) {
                                 iStyle[j] = pos[3][j];
                             }
                         }
                     } else {
-                        if (iStyle.display !== "none") {
-                            iStyle.display = "none";
+                        iStyle = this._repetitionComponents[i].element.parentNode.style;
+                        if (iStyle.opacity != 0) {
+                            iStyle.opacity = 0;
+                            iStyle.webkitTransform = "scale3d(0, 0, 0)";
                         }
                     }
                 }
@@ -441,20 +716,63 @@ var Flow = exports.Flow = Montage.create(Component, {
         }
     },
 
-    /////////////////////////////// Almost Copy/Pasted from List ///////////////////////////
+    /////////////////////////////// Repetition ///////////////////////////
 
     _orphanedChildren: {
         enumerable: false,
         value: null
     },
 
+    _selectedIndexesForRepetition: {
+        enumerable: false,
+        value: null
+    },
+
+    selectedIndexes: {
+        get: function () {
+            if (this._repetition) {
+                return this._repetition.selectedIndexes;
+            } else {
+                return this._selectedIndexesForRepetition;
+            }
+        },
+        set: function (value) {
+            if (this._repetition) {
+                this._repetition.selectedIndexes = value;
+            } else {
+                this._selectedIndexesForRepetition = value;
+            }
+        }
+    },
+
+    _activeIndexesForRepetition: {
+        enumerable: false,
+        value: null
+    },
+
+    activeIndexes: {
+        get: function () {
+            if (this._repetition) {
+                return this._repetition.activeIndexes;
+            } else {
+                return this._activeIndexesForRepetition;
+            }
+        },
+        set: function (value) {
+            if (this._repetition) {
+                this._repetition.activeIndexes = value;
+            } else {
+                this._activeIndexesForRepetition = value;
+            }
+        }
+    },
+
     _objectsForRepetition: {
         enumerable: false,
         value: null
     },
 
     objects: {
-        enumerable: false,
         get: function() {
             if (this._repetition) {
                 return this._repetition.objects;
@@ -468,6 +786,7 @@ var Flow = exports.Flow = Montage.create(Component, {
             } else {
                 this._objectsForRepetition = value;
             }
+            this.needsDraw = true;
         }
     },
 
@@ -477,7 +796,6 @@ var Flow = exports.Flow = Montage.create(Component, {
     },
 
     contentController: {
-        enumerable: false,
         get: function() {
             if (this._repetition) {
                 return this._repetition.contentController;
@@ -500,7 +818,6 @@ var Flow = exports.Flow = Montage.create(Component, {
     },
 
     isSelectionEnabled: {
-        enumerable: false,
         get: function() {
             if (this._repetition) {
                 return this._repetition.isSelectionEnabled;
@@ -540,15 +857,29 @@ var Flow = exports.Flow = Montage.create(Component, {
         }
     },
 
+    _repetitionDraw: {
+        enumerable: false,
+        value: function () {
+           // this.needsDraw = true;  // TODO: Review this causing continous redraw
+        }
+    },
+
     templateDidLoad: {
         value: function() {
             var orphanedFragment,
-                currentContentRange = this.element.ownerDocument.createRange();
-
-
+                currentContentRange = this.element.ownerDocument.createRange(),
+                oldRepetitionDraw = this._repetition.draw,
+                wrapper,
+                self = this;
+
+            this._repetition.draw = function () {
+                oldRepetitionDraw.call(self._repetition);
+                self._repetitionDraw();
+            };
             currentContentRange.selectNodeContents(this.element);
             orphanedFragment = currentContentRange.extractContents();
-            this._repetition.element.appendChild(orphanedFragment);
+            wrapper = this._repetition.element.appendChild(document.createElement("div"));
+            wrapper.appendChild(orphanedFragment);
             this._repetition.indexMap = [];
             this._repetition.childComponents = this._orphanedChildren;
             this._repetition.needsDraw = true;
@@ -564,12 +895,25 @@ var Flow = exports.Flow = Montage.create(Component, {
                 this._repetition.isSelectionEnabled = this._isSelectionEnabledForRepetition;
                 this._isSelectionEnabledForRepetition = null;
             }
+            if (this._selectedIndexesForRepetition !== null) {
+                this._repetition.selectedIndexes = this._selectedIndexesForRepetition;
+                this._selectedIndexesForRepetition = null;
+            }
+            if (this._activeIndexesForRepetition !== null) {
+                this._repetition.activeIndexes = this._activeIndexesForRepetition;
+                this._activeIndexesForRepetition = null;
+            }
+            this._repetition.addEventListener("change@selectedIndexes", function (event) {
+                self._handleSelectedIndexesChange.call(self, event);
+            }, false);
         }
     },
 
     ////////////////////// offset /////////////////////////
 
-    isAnimating: {
+    // TODO: rename isAnimating and animationInterval to elasticAnimation
+
+    isAnimating: { 
         enumerable: false,
         value: false
     },
@@ -619,7 +963,7 @@ var Flow = exports.Flow = Montage.create(Component, {
             if (typeof this.animatingHash[this._selectedSlideIndex] !== "undefined") {
                 var tmp = this.slide[this._selectedSlideIndex].x;
 
-                this.origin += (this._selectedSlideIndex * this._scale) - tmp;
+                this.origin += this._selectedSlideIndex - tmp;
             }
         }
     },
@@ -745,17 +1089,17 @@ var Flow = exports.Flow = Montage.create(Component, {
                 for (i = min; i < max; i++) {
                     if (i != this._selectedSlideIndex) {
                         if (typeof this.animatingHash[i] === "undefined") {
-                            x = i * this._scale;
+                            x = i;
                         } else {
                             x = this.slide[i].x;
                         }
                         x += tmp;
                         if (i < this._selectedSlideIndex) {
-                            if (x < i * this._scale) {
+                            if (x < i) {
                                 this.startAnimating(i, x);
                             }
                         } else {
-                            if (x > i * this._scale) {
+                            if (x > i) {
                                 this.startAnimating(i, x);
                             }
                         }
@@ -769,7 +1113,7 @@ var Flow = exports.Flow = Montage.create(Component, {
                             time = Date.now(),
                             interval1 = self.lastDrawTime ? (time - self.lastDrawTime) * 0.015 * this._elasticScrollingSpeed : 0,
                             interval = interval1 / _iterations,
-                            mW = self._scale, x,
+                            x,
                             epsilon = .5;
 
                         for (n = 0; n < _iterations; n++) {
@@ -777,18 +1121,18 @@ var Flow = exports.Flow = Montage.create(Component, {
                                 i = self.animating[j];
                                 if (i < self._selectedSlideIndex) {
                                     if (typeof self.animatingHash[i + 1] === "undefined") {
-                                        x = ((i + 1) * self._scale);
+                                        x = i + 1;
                                     } else {
                                         x = self.slide[i + 1].x;
                                     }
-                                    self.slide[i].speed = x - self.slide[i].x - mW;
+                                    self.slide[i].speed = x - self.slide[i].x - 1;
                                 } else {
                                     if (typeof self.animatingHash[i - 1] === "undefined") {
-                                        x = ((i - 1) * self._scale);
+                                        x = i - 1;
                                     } else {
                                         x = self.slide[i - 1].x;
                                     }
-                                    self.slide[i].speed = x - self.slide[i].x + mW;
+                                    self.slide[i].speed = x - self.slide[i].x + 1;
                                 }
                                 self.slide[i].x += (self.slide[i].speed) * interval;
                             }
@@ -797,14 +1141,14 @@ var Flow = exports.Flow = Montage.create(Component, {
                         while (j < animatingLength) {
                             i = self.animating[j];
                             if (i < self._selectedSlideIndex) {
-                                if (self.slide[i].x > i * self._scale - epsilon) {
+                                if (self.slide[i].x > i - epsilon) {
                                     self.stopAnimating(i);
                                     animatingLength--;
                                 } else {
                                     j++;
                                 }
                             } else {
-                                if (self.slide[i].x < i * self._scale + epsilon) {
+                                if (self.slide[i].x < i + epsilon) {
                                     self.stopAnimating(i);
                                     animatingLength--;
                                 } else {
@@ -828,28 +1172,7 @@ var Flow = exports.Flow = Montage.create(Component, {
                 }
             }
             this._origin = value;
-            this.needsDraw = true;
-        }
-    },
-
-    _scale: {
-        enumerable: false,
-        value: 100
-    },
-
-    scale: {
-        get: function () {
-            return this._scale;
-        },
-        set: function (value) {
-            var oldScale = this._scale;
-
-            this._scale = value;
-            this.length = value * (this._numberOfNodes - 1);
-            if (!this.isAnimating) {
-                this.selectedSlideIndex = null;
-                this.origin = this._origin * value / oldScale;
-            }
+            this._translateComposer.translateX = value * 300; // TODO Remove magic/spartan numbers
             this.needsDraw = true;
         }
     },
@@ -892,7 +1215,7 @@ var Flow = exports.Flow = Montage.create(Component, {
                 value: function (nodeNumber) {
                     if (typeof self.animatingHash[nodeNumber] === "undefined") {
                         return {
-                            time: (nodeNumber * self._scale) - self._origin,
+                            time: nodeNumber - self._origin,
                             speed: 0
                         }
                     } else {
@@ -905,5 +1228,20 @@ var Flow = exports.Flow = Montage.create(Component, {
                 }
             };
         }
+    },
+
+    _translateX: {
+        enumerable: false,
+        value: 0
+    },
+
+    translateX: {
+        get: function () {
+            return this._translateX;
+        },
+        set: function (value) {
+            this._translateX = value;
+            this.origin = this._translateX / 300;
+        }
     }
 });
\ No newline at end of file
-- 
cgit v1.2.3