1 files changed, 536 insertions, 122 deletions

diff --git a/node_modules/montage/ui/flow.reel/flow.js b/node_modules/montage/ui/flow.reel/flow.js
index c0a6b32f..21556e41 100755
--- a/node_modules/montage/ui/flow.reel/flow.js
+++ b/node_modules/montage/ui/flow.reel/flow.js
@@ -1,18 +1,90 @@
-/* <copyright>
-This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
-No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
-(c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
-</copyright> */
-
 var Montage = require("montage").Montage,
     Component = require("ui/component").Component;
 
 var Flow = exports.Flow = Montage.create(Component, {
-    
+
+    // TODO: Review _externalUpdate
+
+    _externalUpdate: {
+        enumerable: false,
+        value: true
+    },
+
+    _isCameraUpdated: {
+        enumerable: false,
+        value: false
+    },
+
+    // Camera rotation based in CSS3 rotate3D axis/angle system
+
+    _cameraRotationAxisX: {
+        enumerable: false,
+        value: 0
+    },
+
+    _cameraRotationAxisY: {
+        enumerable: false,
+        value: 0
+    },
+
+    _cameraRotationAxisZ: {
+        enumerable: false,
+        value: 1
+    },
+
+    _cameraRotationAngle: {
+        enumerable: false,
+        value: 0
+    },
+
+    cameraRotationAxisX: {
+        get: function () {
+            return this._cameraRotationAxisX;
+        },
+        set: function (value) {
+            this._cameraRotationAxisX = value;
+            this._isCameraUpdated = true;
+            this.needsDraw = true;
+        }
+    },
+
+    cameraRotationAxisY: {
+        get: function () {
+            return this._cameraRotationAxisY;
+        },
+        set: function (value) {
+            this._cameraRotationAxisY = value;
+            this._isCameraUpdated = true;
+            this.needsDraw = true;
+        }
+    },
+
+    cameraRotationAxisZ: {
+        get: function () {
+            return this._cameraRotationAxisZ;
+        },
+        set: function (value) {
+            this._cameraRotationAxisZ = value;
+            this._isCameraUpdated = true;
+            this.needsDraw = true;
+        }
+    },
+
+    cameraRotationAngle: {
+        get: function () {
+            return this._cameraRotationAngle;
+        },
+        set: function (value) {
+            this._cameraRotationAngle = value;
+            this._isCameraUpdated = true;
+            this.needsDraw = true;
+        }
+    },
+
     _path: {
         enumerable: false,
         value: {
-            value: function (slide) {   
+            value: function (slide) {
                 return {
                     translateX: slide.time,
                     translateY: 0,
@@ -29,7 +101,7 @@ var Flow = exports.Flow = Montage.create(Component, {
             }
         }
     },
-    
+
     path: {
         get: function () {
             return this._path;
@@ -39,12 +111,12 @@ var Flow = exports.Flow = Montage.create(Component, {
             this.needsDraw = true;
         }
     },
-    
+
     _rotationOrder: {
         enumerable: false,
         value: "xyz"
     },
-    
+
     rotationOrder: {
         get: function () {
             return this._rotationOrder;
@@ -55,7 +127,7 @@ var Flow = exports.Flow = Montage.create(Component, {
                 case "yxz":
                 case "yzx":
                 case "zxy":
-                case "zyx":                
+                case "zyx":
                     this._rotationOrder=value;
                     break;
                 default:
@@ -65,33 +137,7 @@ var Flow = exports.Flow = Montage.create(Component, {
             this.needsDraw = true;
         }
     },
-    
-    numberOfNodes: {
-        value: null
-    },
-    
-    _nodeOffset: {
-        enumerable: false,
-        value: {
-            value: function (nodeNumber) {
-                return {
-                    time: nodeNumber*100,
-                    speed: 0
-                }
-            }
-        }
-    },
-    
-    nodeOffset: {
-        get: function () {
-            return this._nodeOffset;
-        },
-        set: function (value) {
-            this._nodeOffset = value;
-            this.needsDraw = true;
-        }
-    },
-    
+
     _width: {
         enumerable: false,
         value: null
@@ -101,19 +147,19 @@ var Flow = exports.Flow = Montage.create(Component, {
         enumerable: false,
         value: null
     },
-    
+
     _repetitionComponents: {
         enumerable: false,
         value: null
     },
-    
+
     prepareForDraw: {
         enumerable: false,
         value: function () {
-            this._repetitionComponents=this._repetition._childComponents;
+            this._repetitionComponents = this._repetition._childComponents;
         }
     },
-    
+
     draw: {
         enumerable: false,
         value: function () {
@@ -131,87 +177,96 @@ var Flow = exports.Flow = Montage.create(Component, {
                 jPath,
                 iOffset,
                 iStyle;
-            
-            for (i=0; i<length; i++) {
-                iStyle=this._repetitionComponents[i].element.style;
-                iOffset=this._nodeOffset.value(i);
-                slide.index=i;
-                slide.time=iOffset.time;
-                slide.speed=iOffset.speed;
-                iPath=this._path.value(slide);
-                if (typeof iPath.translateX==="undefined") {
-                    iPath.translateX=0;
-                }
+
+            if (this.isAnimating) {
+                this._animationInterval();
+            }
+            if (this._isCameraUpdated) {
+                this._repetition._element.style.webkitTransform = "rotate3d("+this._cameraRotationAxisX+","+this._cameraRotationAxisY+","+this._cameraRotationAxisZ+","+this._cameraRotationAngle+"rad)";
+                this._isCameraUpdated = false;
+            }
+            //if (this._externalUpdate) {
+                for (i=0; i<length; i++) {
+                    iStyle=this._repetitionComponents[i].element.style;