From ad81ae4c61eb5857cd444ef0caf5b0b33e8072ba Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Sun, 29 Jan 2012 00:26:20 -0800
Subject: Moved the ninja components out of the Montage folder

Signed-off-by: Valerio Virgillito <rmwh84@motorola.com>
---
 .../ninja-components/effect/desaturate-effect.js   |  25 ++
 node_modules/ninja-components/effect/effect.js     |  15 +
 .../ninja-components/effect/invert-effect.js       |  23 ++
 .../ninja-components/effect/kaliedoscope-effect.js |  17 +
 .../ninja-components/effect/multiply-effect.js     |  23 ++
 .../ninja-components/effect/sepia-effect.js        |  25 ++
 .../flow-controller.reel/flow-controller.html      | 275 ++++++++++++++
 .../flow-controller.reel/flow-controller.js        | 288 ++++++++++++++
 node_modules/ninja-components/flow-offset.js       | 389 +++++++++++++++++++
 .../ninja-components/hottext.reel/hottext.css      |  27 ++
 .../ninja-components/hottext.reel/hottext.html     |  29 ++
 .../ninja-components/hottext.reel/hottext.js       | 376 +++++++++++++++++++
 .../hottextunit.reel/hottextunit.css               |  41 ++
 .../hottextunit.reel/hottextunit.html              |  28 ++
 .../hottextunit.reel/hottextunit.js                | 185 +++++++++
 .../ninja-components/image2.reel/image2.html       |  31 ++
 .../ninja-components/image2.reel/image2.js         |  26 ++
 .../ninja-components/image3d.reel/image3d.html     |  95 +++++
 .../ninja-components/image3d.reel/image3d.js       |  30 ++
 .../photo-editor.reel/photo-editor.css             |  34 ++
 .../photo-editor.reel/photo-editor.html            |  50 +++
 .../photo-editor.reel/photo-editor.js              | 415 +++++++++++++++++++++
 node_modules/ninja-components/slider-base.js       | 278 ++++++++++++++
 23 files changed, 2725 insertions(+)
 create mode 100755 node_modules/ninja-components/effect/desaturate-effect.js
 create mode 100755 node_modules/ninja-components/effect/effect.js
 create mode 100755 node_modules/ninja-components/effect/invert-effect.js
 create mode 100755 node_modules/ninja-components/effect/kaliedoscope-effect.js
 create mode 100755 node_modules/ninja-components/effect/multiply-effect.js
 create mode 100755 node_modules/ninja-components/effect/sepia-effect.js
 create mode 100644 node_modules/ninja-components/flow-controller.reel/flow-controller.html
 create mode 100644 node_modules/ninja-components/flow-controller.reel/flow-controller.js
 create mode 100644 node_modules/ninja-components/flow-offset.js
 create mode 100644 node_modules/ninja-components/hottext.reel/hottext.css
 create mode 100644 node_modules/ninja-components/hottext.reel/hottext.html
 create mode 100644 node_modules/ninja-components/hottext.reel/hottext.js
 create mode 100644 node_modules/ninja-components/hottextunit.reel/hottextunit.css
 create mode 100644 node_modules/ninja-components/hottextunit.reel/hottextunit.html
 create mode 100644 node_modules/ninja-components/hottextunit.reel/hottextunit.js
 create mode 100644 node_modules/ninja-components/image2.reel/image2.html
 create mode 100644 node_modules/ninja-components/image2.reel/image2.js
 create mode 100644 node_modules/ninja-components/image3d.reel/image3d.html
 create mode 100644 node_modules/ninja-components/image3d.reel/image3d.js
 create mode 100755 node_modules/ninja-components/photo-editor.reel/photo-editor.css
 create mode 100755 node_modules/ninja-components/photo-editor.reel/photo-editor.html
 create mode 100755 node_modules/ninja-components/photo-editor.reel/photo-editor.js
 create mode 100644 node_modules/ninja-components/slider-base.js

(limited to 'node_modules/ninja-components')

diff --git a/node_modules/ninja-components/effect/desaturate-effect.js b/node_modules/ninja-components/effect/desaturate-effect.js
new file mode 100755
index 00000000..defa1973
--- /dev/null
+++ b/node_modules/ninja-components/effect/desaturate-effect.js
@@ -0,0 +1,25 @@
+/* <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;
+var Effect = require("effect/effect").Effect;
+
+exports.DesaturateEffect = Montage.create(Effect, {
+
+    applyEffect: {
+        value: function(pixels, pixelCount) {
+            var i = 0,
+                average;
+
+            for (i = 0; i < pixelCount; i += 4) {
+                average = (pixels[i] + pixels[i+1] + pixels[i+2])/ 3;
+                pixels[i] = average;
+                pixels[i+1] = average;
+                pixels[i+2] = average;
+            }
+        }
+    }
+
+});
diff --git a/node_modules/ninja-components/effect/effect.js b/node_modules/ninja-components/effect/effect.js
new file mode 100755
index 00000000..4c5bb52c
--- /dev/null
+++ b/node_modules/ninja-components/effect/effect.js
@@ -0,0 +1,15 @@
+/* <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;
+
+var Effect = exports.Effect = Montage.create(Montage, {
+
+    applyEffect: {
+        enumerable: false,
+        value: null
+    }
+
+});
diff --git a/node_modules/ninja-components/effect/invert-effect.js b/node_modules/ninja-components/effect/invert-effect.js
new file mode 100755
index 00000000..d5a3f7cf
--- /dev/null
+++ b/node_modules/ninja-components/effect/invert-effect.js
@@ -0,0 +1,23 @@
+/* <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;
+var Effect = require("effect/effect").Effect;
+
+exports.InvertEffect = Montage.create(Effect, {
+
+    applyEffect: {
+        value: function(pixels, pixelCount) {
+            var i;
+
+            for (i = 0; i < pixelCount; i += 4) {
+                pixels[i] = 255 - pixels[i];
+                pixels[i+1] = 255 - pixels[i+1];
+                pixels[i+2] = 255 - pixels[i+2];
+            }
+        }
+    }
+
+});
diff --git a/node_modules/ninja-components/effect/kaliedoscope-effect.js b/node_modules/ninja-components/effect/kaliedoscope-effect.js
new file mode 100755
index 00000000..38462602
--- /dev/null
+++ b/node_modules/ninja-components/effect/kaliedoscope-effect.js
@@ -0,0 +1,17 @@
+/* <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;
+var Effect = require("effect/effect").Effect;
+
+exports.KaliedoscopeEffect = Montage.create(Effect, {
+
+    applyEffect: {
+        value: function() {
+            console.log("kaliedoscope")
+        }
+    }
+
+});
diff --git a/node_modules/ninja-components/effect/multiply-effect.js b/node_modules/ninja-components/effect/multiply-effect.js
new file mode 100755
index 00000000..b8599668
--- /dev/null
+++ b/node_modules/ninja-components/effect/multiply-effect.js
@@ -0,0 +1,23 @@
+/* <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;
+var Effect = require("effect/effect").Effect;
+
+exports.MultiplyEffect = Montage.create(Effect, {
+
+    applyEffect: {
+        value: function(pixels, pixelCount, multiplier) {
+            var i = 0;
+
+            for (i = 0; i < pixelCount; i += 4) {
+                pixels[i  ] = pixels[i  ] * multiplier; // red
+                pixels[i+1] = pixels[i+1] * multiplier; // green
+                pixels[i+2] = pixels[i+2] * multiplier; // blue
+            }
+        }
+    }
+
+});
diff --git a/node_modules/ninja-components/effect/sepia-effect.js b/node_modules/ninja-components/effect/sepia-effect.js
new file mode 100755
index 00000000..779074b7
--- /dev/null
+++ b/node_modules/ninja-components/effect/sepia-effect.js
@@ -0,0 +1,25 @@
+/* <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;
+var Effect = require("effect/effect").Effect;
+
+exports.SepiaEffect = Montage.create(Effect, {
+
+    applyEffect: {
+        value: function(pixels, pixelCount) {
+            var i = 0,
+                    average;
+
+            for (i = 0; i < pixelCount; i += 4) {
+                average = (pixels[i  ] + pixels[i+1] + pixels[i+2])/ 3;
+                pixels[i  ] = average + 10; // red
+                pixels[i+1] = average; // green
+                pixels[i+2] = average; // blue
+            }
+        }
+    }
+
+});
diff --git a/node_modules/ninja-components/flow-controller.reel/flow-controller.html b/node_modules/ninja-components/flow-controller.reel/flow-controller.html
new file mode 100644
index 00000000..da2fae62
--- /dev/null
+++ b/node_modules/ninja-components/flow-controller.reel/flow-controller.html
@@ -0,0 +1,275 @@
+<!DOCTYPE html>
+<!-- <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> -->
+<html>
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <script type="text/montage-serialization">
+        {
+            "image1": {
+                "module": "montage/ui/image3d.reel",
+                "name": "Image3D",
+                "properties": {
+                    "element": {"#": "image"}
+                },
+                "bindings": {
+                    "data": {
+                        "boundObject": {"@": "flow1"},
+                        "boundObjectPropertyPath": "objectAtCurrentIteration",
+                        "oneway": true
+                    }
+                }
+            },
+            "scroll1": {
+                "module": "montage/ui/scroll",
+                "name": "Scroll",
+                "properties": {
+                    "pointerSpeedMultiplier": 1,
+                    "component": {"@": "offset"}
+                },
+                "bindings": {
+                    "element": {
+                        "boundObject": {"@": "flow1"},
+                        "boundObjectPropertyPath": "_element",
+                        "oneway": true
+                    },
+                    "maxScrollX": {
+                        "boundObject": {"@": "offset"},
+                        "boundObjectPropertyPath": "length",
+                        "oneway": true
+                    },
+                    "scrollX": {
+                        "boundObject": {"@": "offset"},
+                        "boundObjectPropertyPath": "origin",
+                        "oneway": false
+                    }
+                }
+            },
+            "offset": {
+                "module": "montage/ui/flow-offset",
+                "name": "FlowOffset",
+                "properties": {
+                    "scale": 350,
+                    "component": {"@": "flow1"}
+                },
+                "bindings": {
+                    "numberOfNodes": {
+                        "boundObject": {"@": "flow1"},
+                        "boundObjectPropertyPath": "numberOfNodes",
+                        "oneway": true                    
+                    },
+                    "selectedComponent": {
+                        "boundObject": {"@": "nearest"},
+                        "boundObjectPropertyPath": "nearestNeighborComponent",
+                        "oneway": true  
+                    }
+                }
+            },
+            "nearest": {
+                "module": "montage/ui/nearest-neighbor-component-search",
+                "name": "NearestNeighborComponentSearch",
+                "bindings": {
+                    "componentList": {
+                        "boundObject": {"@": "flow1"},
+                        "boundObjectPropertyPath": "_repetitionComponents",
+                        "oneway": true
+                    },
+                    "pointerPosition": {
+                        "boundObject": {"@": "scroll1"},
+                        "boundObjectPropertyPath": "pointerStartEventPosition",
+                        "oneway": true                    
+                    }
+                }
+            },
+            "flow1": {
+                "module": "montage/ui/flow.reel",
+                "name": "Flow",
+                "properties": {
+                    "element": {"#": "flow"}
+                },
+                "bindings": {
+                    "nodeOffset": {
+                        "boundObject": {"@": "offset"},
+                        "boundObjectPropertyPath": "offset",
+                        "oneway": true
+                    },
+                    "objects": {
+                        "boundObject": {"@": "owner"},
+                        "boundObjectPropertyPath": "images",
+                        "oneway": true
+                    }
+                }
+            },
+            "path1": {
+                "module": "montage/ui/flow-path",
+                "name": "FlowPath",
+                "properties": {
+                    "evalPath": [                        
+                        "path.translateX = slide.time-slide.index*155+50",
+                        "path.translateY = (slide.index%3)*240+50",
+                        "path.translateZ = -slide.time/3",
+                        "path.rotateX = slide.speed/200",
+                        "path.rotateY = 1",
+                        "path.rotateZ = slide.time/500",
+                        "path.style.opacity = 1.2 - slide.time/4000"
+                    ]
+                }
+            },
+            "path2": {
+                "module": "montage/ui/flow-path",
+                "name": "FlowPath",
+                "properties": {
+                    "evalPath": [
+                        "path.translateX = slide.time",
+                        "path.translateZ = ((slide.time-400)*(slide.time-400))/-1500",
+                        "path.rotateX = 0",
+                        "path.rotateY = (slide.time-400)/1200",
+                        "path.rotateZ = slide.speed/1500",
+                        "path.style.opacity = 1"
+                    ]
+                }
+            },
+            "pathLerp1": {
+                "module": "montage/ui/flow-path-lerp",
+                "name": "FlowPathLerp",
+                "bindings": {
+                    "path1": {
+                        "boundObject": {"@": "path1"},
+                        "boundObjectPropertyPath": "path",
+                        "oneway": true
+                    },
+                    "path2": {
+                        "boundObject": {"@": "path2"},
+                        "boundObjectPropertyPath": "path",
+                        "oneway": true
+                    },
+                    "interpolant": {
+                        "boundObject": {"@": "owner"},
+                        "boundObjectPropertyPath": "interpValue"
+                    }
+                }
+            },
+            "path3": {
+                "module": "montage/ui/flow-path",
+                "name": "FlowPath",
+                "properties": {
+                    
+                },
+                "bindings": {
+                    "translateX": {
+                        "boundObject": {"@": "translateX"},
+                        "boundObjectPropertyPath": "path",
+                        "oneway": true
+                    },
+                    "rotateY": {
+                        "boundObject": {"@": "rotateY"},
+                        "boundObjectPropertyPath": "path",
+                        "oneway": true
+                    },
+                    "translateZ": {
+                        "boundObject": {"@": "translateZ"},
+                        "boundObjectPropertyPath": "path",
+                        "oneway": true
+                    }
+                }
+            },
+            "translateX": {
+                "module": "montage/ui/flow-path-sigmoid",
+                "name": "FlowPathSigmoid",
+                "properties": {
+                    "smoothness": 300,
+                    "scale": 0.05,
+                    "width": 10000,
+                    "origin": -8000,
+                    "sigmoidCenter": 8000
+                }
+            },
+            "rotateY": {
+                "module": "montage/ui/flow-path-sigmoid",
+                "name": "FlowPathSigmoid",
+                "properties": {
+                    "smoothness": 300,
+                    "scale": -0.00024,
+                    "width": 10000,
+                    "origin": -8000,
+                    "sigmoidCenter": 8000,
+                    "slope": 0
+                }
+            },
+            "path4": {
+                "module": "montage/ui/flow-path",
+                "name": "FlowPath",
+                "bindings": {
+                    "translateX": {
+                        "boundObject": {"@": "path1TranslateX"},
+                        "boundObjectPropertyPath": "path",
+                        "oneway": true
+                    },
+                    "translateY": {
+                        "boundObject": {"@": "path1TranslateY"},
+                        "boundObjectPropertyPath": "path",
+                        "oneway": true
+                    }
+                }
+            },
+            "path1TranslateX": {
+                "module": "montage/ui/flow-path-linear",
+                "name": "FlowPathLinear",
+                "properties": {
+                    "origin": 0,
+                    "multiplier": 0.5
+                }
+            },
+            "path1TranslateY": {
+                "module": "montage/ui/flow-path-cubic",
+                "name": "FlowPathCubic",
+                "properties": {
+                    "a": 0,
+                    "b": -0.0001,
+                    "c": 0,
+                    "d": 300
+                }
+            },
+            "owner": {
+                "module": "montage/ui/flow-controller.reel",
+                "name": "FlowController",
+                "properties": {
+                    "element": {"#": "flowc"},
+                    "scrollController": {"@": "scroll1"},
+                    "offsetController": {"@": "offset"},
+                    "flowComponent": {"@": "flow1"},
+                    "spacing": 350,
+                    "momentumDuration": 650,
+                    "bouncingDuration": 750,
+                    "animation": {"@": "path2"},
+                    "path1": {"@": "path1"},
+                    "path2": {"@": "path2"},
+                    "path3": {"@": "path3"},
+                    "path4": {"@": "path4"}
+                }
+            }
+        }
+    </script>
+    <style>
+        .flow {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            -webkit-perspective: 800px;
+            /*background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#bbb));            */
+        }
+    </style>
+</head>
+<body>
+    <div id="flowc">
+        <div id="flow" class="flow">
+            <div id="image"></div>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/node_modules/ninja-components/flow-controller.reel/flow-controller.js b/node_modules/ninja-components/flow-controller.reel/flow-controller.js
new file mode 100644
index 00000000..0ce12473
--- /dev/null
+++ b/node_modules/ninja-components/flow-controller.reel/flow-controller.js
@@ -0,0 +1,288 @@
+/* <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;
+
+exports.FlowController = Montage.create(Component, {
+
+    templateDidLoad: {
+        value: function() {
+//            this.spacing = this.offsetController.scale;
+//            this.animation = this.path2;
+//            this.hasMomentum = this.scrollController.hasMomentum;
+        }
+    },
+
+    scrollController: {
+        enumerable: true,
+        serializable: true,
+        value: null
+    },
+
+    offsetController: {
+        enumerable: true,
+        serializable: true,
+        value: null
+    },
+
+    flowComponent: {
+        enumerable: true,
+        serializable: true,
+        value: null
+    },
+
+
+    
+    // ------------------------------------------------------------------------
+    // Forwarding these properties to their equivalents in Scroll
+    _speed: {
+        enumerable: true,
+        serializable: true,
+        value: 1
+    },
+
+    speed: {
+        get: function() {
+            return this._speed;
+        },
+        set: function(value) {
+            if(this._speed !== value)
+            {
+                if( this.scrollController && (this.scrollController.pointerSpeedMultiplier !== value) )
+                {
+                    this._speed = value;
+                    this.scrollController.pointerSpeedMultiplier = value;
+                    this.needsDraw = true;
+                }
+            }
+        }
+    },
+
+    hasMomentum: {
+        get: function() {
+            if(this.scrollController)
+            {
+                return this.scrollController.hasMomentum;
+            }
+        },
+        set: function(value) {
+            if( this.scrollController && (this.scrollController.hasMomentum !== value) )
+            {
+                this.scrollController.hasMomentum = value;
+                this.needsDraw = true;
+            }
+        }
+    },
+
+    hasBouncing: {
+        get: function() {
+            if(this.scrollController)
+            {
+                return this.scrollController.hasBouncing;
+            }
+        },
+        set: function(value) {
+            if( this.scrollController && (this.scrollController.hasBouncing !== value) )
+            {
+                this.scrollController.hasBouncing = value;
+                this.needsDraw = true;
+            }
+        }
+    },
+
+    momentumDuration: {
+        get: function() {
+            if(this.scrollController)
+            {
+                return this.scrollController.momentumDuration;
+            }
+        },
+        set: function(value) {
+            if( this.scrollController && (this.scrollController.momentumDuration !== value) )
+            {
+                this.scrollController.momentumDuration = value;
+                this.needsDraw = true;
+            }
+        }
+    },
+
+    bouncingDuration: {
+        get: function() {
+            if(this.scrollController)
+            {
+                return this.scrollController.bouncingDuration;
+            }
+        },
+        set: function(value) {
+            if( this.scrollController && (this.scrollController.bouncingDuration !== value) )
+            {
+                this.scrollController.bouncingDuration = value;
+                this.needsDraw = true;
+            }
+        }
+    },
+    // ------------------------------------------------------------------------
+
+
+
+    // ------------------------------------------------------------------------
+    // Forwarding these properties to their equivalents in FlowOffset
+    _spacing: {
+        enumerable: true,
+        serializable: true,
+        value: 350
+    },
+
+    spacing: {
+        get: function() {
+            return this._spacing;
+        },
+        set: function(scale) {
+//            if( this.offsetController && (this.offsetController.scale !== scale) )
+//            {
+//                this.offsetController.scale = scale;
+//                this.needsDraw = true;
+//            }
+            if(this._spacing !== scale)
+            {
+                if( this.offsetController && (this.offsetController.scale !== scale) )
+                {
+                    this._spacing = scale;
+                    this.offsetController.scale = scale;
+                    this.needsDraw = true;
+                }
+            }
+        }
+    },
+    // ------------------------------------------------------------------------
+
+
+    
+    // ------------------------------------------------------------------------
+    // Some paths definitions and necessary values
+    interpValue: {
+        enumerable: true,
+        serializable: true,
+        value: 1
+    },
+
+    slideShow: {
+        value: {
+            value: function (slide) {
+                var path={
+                        translateX: 10+slide.time
+                    };
+                return path;
+            }
+        }
+    },
+    // ------------------------------------------------------------------------
+
+
+    
+    // ------------------------------------------------------------------------
+    // Forwarding these properties to their equivalents in Flow
+
+    // TODO - hard-coding values for demo
+    _src: {
+        enumerable: true,
+        serializable: true,
+        value: ""
+    },
+
+    src: {
+        get: function() {
+            return this._src;
+        },
+        set: function(value) {
+            this.images = this.imagesForDemo;
+            this._src = "images";
+            this.needsDraw = true;
+        }
+    },
+
+    images: {
+        enumerable: true,
+        serializable: true,
+        value: []
+    },
+
+    imagesForDemo: {
+        enumerable: true,
+        serializable: true,
+        value: [
+            {"src": "images/0.jpg", "text": "We win together"},
+            {"src": "images/1.jpg", "text": "We do the right thing"},
+            {"src": "images/2.jpg", "text": "We are passionate about what we do"},
+            {"src": "images/3.jpg", "text": "We are obsessed with product superiority"},
+            {"src": "images/4.jpg", "text": "We make things simple"},
+            {"src": "images/5.jpg", "text": "We are customer centric"},
+            {"src": "images/6.jpg", "text": "Lorem Ipsum 0"},
+            {"src": "images/7.jpg", "text": "Lorem Ipsum 1"},
+            {"src": "images/8.jpg", "text": "Lorem Ipsum 2"},
+            {"src": "images/9.jpg", "text": "Lorem Ipsum 3"},
+            {"src": "images/10.jpg", "text": "Lorem Ipsum 4"},
+            {"src": "images/11.jpg", "text": "Lorem Ipsum 5"},
+            {"src": "images/12.jpg", "text": "Lorem Ipsum 6"},
+            {"src": "images/13.jpg", "text": "Lorem Ipsum 7"},
+            {"src": "images/14.jpg", "text": "Lorem Ipsum 8"}
+        ]
+    },
+    
+    _animation: {
+        enumerable: true,
+        serializable: true,
+        value: this.path2
+    },
+
+    animation: {
+        get: function() {
+            return this._animation;
+        },
+        set: function(value) {
+            if(this._animation !== value)
+            {
+                if( this.flowComponent && (this.flowComponent.path !== value) )
+                {
+                    this._animation = value;
+                    switch(value)
+                    {
+                        case "slideshow":
+                            this.flowComponent.path = this.slideShow;
+                            this.offsetController.scale = 350;
+                            this.scrollController.pointerSpeedMultiplier = 1;
+                            break;
+                        case "carousel":
+                            this.flowComponent.path = this.path2.path;
+                            this.offsetController.scale = 320;
+                            this.scrollController.pointerSpeedMultiplier = 1;
+                            break;
+                        case "cover-flow":
+                            this.flowComponent.path = this.path3.path;
+                            this.offsetController.scale = 1000;
+                            this.scrollController.pointerSpeedMultiplier = 3;
+                            break;
+                        case "wave":
+                            this.flowComponent.path = this.path4.path;
+                            this.offsetController.scale = 320;
+                            this.scrollController.pointerSpeedMultiplier = 1;
+                            break;
+                        case "explosion":
+                            this.flowComponent.path = this.path1.path;
+                            this.offsetController.scale = 320;
+                            this.scrollController.pointerSpeedMultiplier = 1;
+                            break;
+                        default:
+                    }
+                    this.flowComponent.needsDraw = true;
+                }
+            }
+        }
+    }
+    // ------------------------------------------------------------------------
+
+});
diff --git a/node_modules/ninja-components/flow-offset.js b/node_modules/ninja-components/flow-offset.js
new file mode 100644
index 00000000..e45a14f3
--- /dev/null
+++ b/node_modules/ninja-components/flow-offset.js
@@ -0,0 +1,389 @@
+/* <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;
+    
+var FlowOffset = exports.FlowOffset = Montage.create(Montage, {
+	
+	hasTemplate: {
+	    value: false
+	},
+
+    isAnimating: {
+        enumerable: false,
+        value: false
+    },
+    
+	component: {
+	    value: null
+	},
+	
+	draw: {
+	    value: function () {
+	        if (this.isAnimating) {
+	            this._interval();
+	        }
+	    }
+	},
+	
+	deserializedFromTemplate: {
+	    value: function () {
+	        var oldComponentDraw = this.component.draw,
+                self = this;
+            
+            this.component.draw = function () {
+                self.draw();
+                oldComponentDraw.call(self.component);
+            };
+	    }
+	},
+	
+	_hasElasticScrolling: {
+	    enumerable: false,
+	    value: true
+	},
+	
+	hasElasticScrolling: {
+	    get: function () {
+	        return this._hasElasticScrolling;
+	    },
+	    set: function (value) {
+	        this._hasElasticScrolling=(value===true)?true:false;
+	    }
+	},
+
+	_selectedSlideIndex: {
+	    enumerable: false,
+	    value: null
+	},
+	
+	selectedSlideIndex: {
+	    get: function () {
+	        return this._selectedSlideIndex;
+	    },
+	    set: function (value) {
+	        this._selectedSlideIndex=value;
+	        if (typeof this.animatingHash[this._selectedSlideIndex] !== "undefined") {
+	            var tmp=this.slide[this._selectedSlideIndex].x;
+	            this.origin+=(this._selectedSlideIndex*this._scale)-tmp;
+            }
+	    }
+	},
+	
+	_selectedComponent: {
+	    enumerable: false,
+	    value: null
+	},
+	
+	selectedComponent: {
+	    get: function () {
+	        return this._selectedComponent;
+	    },
+	    set: function (value) {	    
+	        this._selectedComponent=value;
+	        this.selectedSlideIndex=value;
+	    }
+	},
+	
+    _animating: {
+        enumerable: false,
+        value: null
+    },
+    
+    animating: {
+        enumerable: false,
+        get: function () {
+            if (!this._animating) {
+                this._animating=[];
+            }
+            return this._animating;
+        },
+        set: function () {
+        }
+    },
+    
+    _animatingHash: {
+        enumerable: false,
+        value: null
+    },
+    
+    animatingHash: {
+        enumerable: false,
+        get: function () {
+            if (!this._animatingHash) {
+                this._animatingHash={};
+            }
+            return this._animatingHash;
+        },
+        set: function () {
+        }
+    },
+    
+    _slide: {
+        enumerable: false,
+        value: null
+    },
+    
+    slide: {
+        enumerable: false,
+        get: function () {
+            if (!this._slide) {
+                this._slide={};
+            }
+            return this._slide;
+        },
+        set: function () {
+        }
+    },    
+    
+    startAnimating: {
+        enumerable: false,
+        value: function (index, pos) {
+            if (typeof this.animatingHash[index] === "undefined") {
+                var length=this.animating.length;
+                
+                this.animating[length]=index;
+                this.animatingHash[index]=length;
+                this.slide[index]={
+                    speed: 0,
+                    x: pos
+                };
+            } else {
+                this.slide[index].x=pos;
+            }
+        }
+    },
+
+    stopAnimating: {
+        enumerable: false,    
+        value: function (index) {
+            if (typeof this.animatingHash[index] !== "undefined") {
+                this.animating[this.animatingHash[index]]=this.animating[this.animating.length-1];
+                this.animatingHash[this.animating[this.animating.length-1]]=this.animatingHash[index];
+                this.animating.pop();
+                delete this.animatingHash[index];
+                delete this.slide[index];
+            }
+        }
+    },
+    
+    _range: {
+        value: 15
+    },
+    
+    lastDrawTime: {
+        value: null
+    },
+    
+	_origin: {
+		enumerable: false,
+        value: 0
+    },
+	
+	origin: {
+	    get: function () {
+	        return this._origin;
+	    },
+	    set: function (value) {
+	        if (this._hasElasticScrolling) {
+	        	var i,
+                    n,
+                    min=this._selectedSlideIndex-this._range,
+                    max=this._selectedSlideIndex+this._range+1,
+                    tmp,                    
+                    j,
+                    x,
+                    self=this;
+                
+                tmp=value-this._origin;
+                if (min<0) {
+                    min=0;
+                }          
+
+                if (!this.isAnimating) {
+                    this.lastDrawTime=Date.now();
+                }
+                for (i=min; i<max; i++) {
+                    if (i!=this._selectedSlideIndex) {
+                        if (typeof this.animatingHash[i] === "undefined") {
+                            x=i*this._scale;
+                        } else {            
+                            x=this.slide[i].x;
+                        }
+                        x+=tmp;
+                        if (i<this._selectedSlideIndex) {
+                            if (x<i*this._scale) {
+                                this.startAnimating(i, x);
+                            }
+                        } else {
+                            if (x>i*this._scale) {
+                                this.startAnimating(i, x);
+                            }
+                        }
+                    }
+                }
+                this.stopAnimating(this._selectedSlideIndex);
+                                
+                if (!this.isAnimating) {
+                    this._interval=function () {
+                        var animatingLength=self.animating.length,
+                            n, j, i, _iterations=8,
+                            time=Date.now(),
+                            interval1=self.lastDrawTime?(time-self.lastDrawTime)*0.015:0,
+                            interval=interval1/_iterations,
+                            mW=self._scale, x,
+                            epsilon=.5;
+                                                        
+                        for (n=0; n<_iterations; n++) {
+                            for (j=0; j<animatingLength; j++) {
+                                i=self.animating[j];
+                                if (i<self._selectedSlideIndex) {
+                                    if (typeof self.animatingHash[i+1] === "undefined") {
+                                        x=((i+1)*self._scale);
+                                    } else {            
+                                        x=self.slide[i+1].x;
+                                    }
+                                    self.slide[i].speed=x-self.slide[i].x-mW;
+                                } else {
+                                    if (typeof self.animatingHash[i-1] === "undefined") {
+                                        x=((i-1)*self._scale);
+                                    } else {            
+                                        x=self.slide[i-1].x;
+                                    }
+                                    self.slide[i].speed=x-self.slide[i].x+mW;	
+                                }
+                                self.slide[i].x+=(self.slide[i].speed)*interval;
+                            }
+                        }
+               			j=0;
+                        while (j<animatingLength) {
+                            i=self.animating[j];
+                            if (i<self._selectedSlideIndex) {
+                                if (self.slide[i].x>i*self._scale-epsilon) {
+                                    self.stopAnimating(i);
+                                    animatingLength--;
+                                } else {
+                                    j++;
+                                }
+                            } else {
+                                if (self.slide[i].x<i*self._scale+epsilon) {
+                                    self.stopAnimating(i);
+                                    animatingLength--;						
+                                } else {
+                                    j++;
+                                }
+                            }
+                        }
+                        self.lastDrawTime=time;
+                        if (!animatingLength) {
+                            self.isAnimating=false;
+                        } else {
+                            if (!self.isAnimating) {
+                                self.isAnimating=true;
+                            }
+                        }
+
+                        self.component.needsDraw=true;
+                    }    
+                }
+                if (!this.isAnimating) {
+                    this._interval();
+                }
+	        }
+	        this._origin=value;
+	        if (!this.animating.length) {
+    	        self.component.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);
+	        this.offset=true;
+	    }
+    },
+    
+    _numberOfNodes: {
+        enumerable: false,
+        value: 0
+    },
+    
+    numberOfNodes: {
+        get: function () {
+            return this._numberOfNodes;
+        },
+        set: function (value) {
+            this._numberOfNodes = value;
+            this.length = (value-1) * this._scale;
+            this.component.needsDraw=true;
+        }
+    },
+    
+    _length: {
+        enumerable: false,
+        value: 0
+    },
+    
+    length: {
+        get: function () {
+            return this._length;
+        },
+        set: function (value) {
+            if (value<0) {
+                this._length = 0;
+            } else {
+                this._length = value;
+            }
+        }
+    },
+    
+    _offset: {
+        enumerable: false,
+        value: {
+            value: function (nodeNumber) {
+                return 0;
+            }
+        }
+    },
+    
+    offset: {
+        get: function () {
+            return this._offset;
+        },
+        set: function () {
+            var self = this;
+            
+            this._offset = {
+                value: function (nodeNumber) {
+                    if (typeof self.animatingHash[nodeNumber] === "undefined") {
+                        return {
+                            time: (nodeNumber*self._scale)-self._origin,
+                            speed: 0
+                        }
+                    } else {                        
+                        return {
+                            time: self.slide[nodeNumber].x-self.origin,
+                            speed: self.slide[nodeNumber].speed
+                        }
+                    }
+                }
+            };
+        }
+    }
+    
+});
\ No newline at end of file
diff --git a/node_modules/ninja-components/hottext.reel/hottext.css b/node_modules/ninja-components/hottext.reel/hottext.css
new file mode 100644
index 00000000..34b353f4
--- /dev/null
+++ b/node_modules/ninja-components/hottext.reel/hottext.css
@@ -0,0 +1,27 @@
+/* <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> */
+
+.hottext {
+    cursor: default;
+    border:none;
+    border-bottom:1px dotted white;
+    width:50px;
+    text-align:center;
+    -webkit-user-select:none;
+    outline:none;
+}
+
+.hottext:hover
+{
+    cursor: pointer;
+}
+
+.hottextInput
+{
+    cursor: default;
+    width:50px;
+    text-align:center;
+}
\ No newline at end of file
diff --git a/node_modules/ninja-components/hottext.reel/hottext.html b/node_modules/ninja-components/hottext.reel/hottext.html
new file mode 100644
index 00000000..29912e42
--- /dev/null
+++ b/node_modules/ninja-components/hottext.reel/hottext.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<!-- <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> -->
+<html>
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <link rel="stylesheet" type="text/css" href="hottext.css">
+
+
+    <script type="text/montage-serialization">
+        {
+            "owner": {
+                "module": "montage/ui/hottext.reel",
+                "name": "HotText",
+                "properties": {
+                    "element": {"#": "hottext"}
+                }
+            }
+        }
+    </script>
+    
+</head>
+<body>
+    <input id="hottext" class="hottext"/>
+</body>
+</html>
\ No newline at end of file
diff --git a/node_modules/ninja-components/hottext.reel/hottext.js b/node_modules/ninja-components/hottext.reel/hottext.js
new file mode 100644
index 00000000..b593e175
--- /dev/null
+++ b/node_modules/ninja-components/hottext.reel/hottext.js
@@ -0,0 +1,376 @@
+/* <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,
+    SliderBase = require("ui/slider-base").SliderBase;
+
+var HotText = exports.HotText = Montage.create(SliderBase, {
+    /* Allow users to specify a function to format the display.
+    * For example, the Color Picker can specify a function to map
+    * the numeric hot text value to hex color values.
+     */
+    labelFunction: {
+        serializable: true,
+        enumerable: true,
+        value: null
+    },
+
+    inputFunction: {
+        serializable: true,
+        enumerable: true,
+        value: parseFloat
+    },
+
+    _numValue: {
+        enumerable: false,
+        value: 0
+    },
+
+    numValue: {
+        serializable: false,
+        enumerable: true,
+        get: function() {
+            return this._numValue;
+        },
+        set: function(value) {
+            if (value < this._minValue) {
+                value = this._minValue;
+            }
+            if (value > this._maxValue) {
+                value = this._maxValue;
+            }
+            if (value !== this._numValue) {
+                this._numValue = Math.round(value * this._decimalPlace)/this._decimalPlace;
+            }
+        }
+    },
+
+    _previousValue: {
+        enumerable: false,
+        value: null
+    },
+
+    _stepSize: {
+        enumerable: false,
+        value: 1
+    },
+
+    stepSize: {
+        serializable: true,
+        enumerable: true,
+        get: function() {
+            return this._stepSize;
+        },
+        set: function(value) {
+            if (value !== this._stepSize) {
+                this._stepSize = value;
+                this.needsDraw = true;
+            }
+        }
+    },
+
+    _stepSizeShift: {
+        enumerable: false,
+        value: 10
+    },
+
+    _xStart: {
+        enumerable: false,
+        value: 0
+    },
+
+    _yStart: {
+        enumerable: false,
+        value: 0
+    },
+
+    // Needed to determine when to commit a value change
+    _wasShiftKeyPressed: {
+        enumerable: false,
+        value: false
+    },
+
+    // for ones, use 1
+    // for tenths, use 10
+    // for hundredths, use 100, etc.
+    _decimalPlace: {
+        enumerable: false,
+        value: 1
+    },
+
+    decimalPlace: {
+        serializable: true,
+        enumerable: true,
+        get: function() {
+            return this._decimalPlace;
+        },
+        set: function(value) {
+            if (value !== this._decimalPlace) {
+                this._decimalPlace = value;
+                this.needsDraw = true;
+            }
+        }
+    },
+    
+    value: {
+        serializable: true,
+        enumerable: true,
+        get: function() {
+            return this._value;
+        },
+        set: function(value, fromInput) {
+            if (isNaN(value)) {
+                this._valueSyncedWithInputField = false;
+                this.needsDraw = true;
+                return;
+            }
+
+            if (value < this._minValue) {
+                value = this._minValue;
+                this._valueSyncedWithInputField = false;
+                this.needsDraw = true;
+            }
+            else if (value > this._maxValue) {
+                value = this._maxValue;
+                this._valueSyncedWithInputField = false;
+                this.needsDraw = true;
+            }
+
+            if (value !== this._value) {
+                this._value = this._numValue = Math.round(value * this._decimalPlace)/this._decimalPlace;
+                this._valueSyncedWithInputField = false;
+                this.needsDraw = true;
+                this._dispatchActionEvent();
+            }
+        }
+    },
+
+    _valueSyncedWithInputField: {
+        enumerable: false,
+        value: false
+    },
+
+    // We don't want to handle every input; we only want to handle input from tab or enter
+    // Thus, we don't listen for an input event; we call this from handleKeydown
+    handleInput: {
+        enumerable: false,
+        value: function() {
+            this._setEventFlags("change", false);
+            Object.getPropertyDescriptor(this, "value").set.call(this, this.inputFunction(this.element.value), true);
+        }
+    },
+
+
+    _valueFromPageOffset: {
+        value: function(offset, pageY, isShiftKeyPressed, wasSetByCode) {
+            if(!this._isMouseDown)
+            {
+                this._handleMoveEnd();  // If the user has moused up, check if we should go into input mode
+                return;
+            }
+
+            var clickPoint = webkitConvertPointFromPageToNode(this.element, new WebKitPoint(offset,pageY));
+
+            var dX = clickPoint.x - this._xStart;
+            var dY = clickPoint.y - this._yStart;
+            
+            var dXAbs = Math.abs(dX);
+            var dYAbs = Math.abs(dY);
+
+            if( (dXAbs < 5) && (dYAbs < 5) )
+            {
+                return; // Don't process unless the user moves at least 5 pixels
+            }
+
+            var incrementVal = dXAbs-4;     // otherwise, the first value change will be 5 pixels
+            var multFactor = 1;            
+
+            if(dXAbs > dYAbs)
+            {
+                if(dX < 0)
+                {
+                    multFactor = -1;
+                }
+            }
+            else
+            {
+                if(dY > 0)
+                {
+                    multFactor = -1;
+                }
+                incrementVal = dYAbs-4;
+            }
+
+            if(isShiftKeyPressed)
+            {
+                if(!this._wasShiftKeyPressed)
+                {
+                    this._xStart = clickPoint.x;
+                    this._yStart = clickPoint.y;
+                    this._previousValue = this._numValue;
+                    incrementVal = 1;
+                }
+                this.numValue = this._previousValue + multFactor * incrementVal * this._stepSizeShift;
+                this._wasShiftKeyPressed = true;
+            }
+            else
+            {
+                if(this._wasShiftKeyPressed)
+                {
+                    this._xStart = clickPoint.x;
+                    this._yStart = clickPoint.y;
+                    this._previousValue = this._numValue;
+                    incrementVal = 1;
+                    this._wasShiftKeyPressed = false;
+                }
+                this.numValue = this._previousValue + multFactor * incrementVal * this._stepSize;
+            }
+
+            this.value = this._numValue;
+        }
+    },
+
+    handleKeydown: {
+        enumerable: false,
+        value: function(event) {
+            switch(event.keyCode)
+            {
+                case 9: //tab
+                case 13: // enter
+                    this.handleInput();
+                    break;
+                case 27: // esc
+                    this._valueSyncedWithInputField = false;
+                    this.needsDraw = true;
+                    break;
+                case 38: // up
+                    this._setEventFlags("change", false);
+                    this.value += this._stepSize;
+                    break;
+                case 40: // down
+                    this._setEventFlags("change", false);
+                    this.value -= this._stepSize;
+                    break;
+                default:
+//                    return;
+            }
+        }
+    },
+
+    handleBlur: {
+        enumerable: false,
+        value: function(event) {
+            event.target = this;
+            this._hasFocus = false;
+
+            this.handleInput(); // Check if value has changed when focusing out
+            this.needsDraw = true;
+
+            this.dispatchEvent(event);
+        }
+    },
+
+    handleFocus: {
+        enumerable: false,
+        value: function(event) {
+            event.target = this;
+            this._hasFocus = true;
+            this.dispatchEvent(event);
+        }
+    },
+
+    _handleMoveEnd: {
+        value: function() {
+            // If we don't change value (mouse up on ourself), we should go into text edit mode
+            if(this._numValue === this._previousValue)
+            {
+                this._hasFocus = true;
+            }
+            else
+            {
+                this._hasFocus = false;
+                this._dispatchActionEvent();
+            }
+            this.needsDraw = true;
+        }
+    },
+
+    draw: {
+        enumerable: false,
+        value: function() {
+            if(this._hasFocus)
+            {
+                if(!this._isMouseDown)
+                {
+                    this.element.classList.remove("hottext");
+                    this.element.classList.add("hottextInput");
+
+                    // if element targeted; balancing demands of multitouch
+                    // with traditional single focus model
+                    this.element.addEventListener("keydown", this, false);
+                }
+            }
+            else
+            {
+                this.element.classList.remove("hottextInput");
+                this.element.classList.add("hottext");
+            }
+
+            if (!this._valueSyncedWithInputField)
+            {
+                if(this.labelFunction)
+                {
+                    this.element.value = this.labelFunction(this._value);
+                }
+                else
+                {
+                    this.element.value = this._value;
+                }
+            }
+        }
+    },
+
+    didDraw: {
+        enumerable: false,
+        value: function() {
+            if(!this._isMouseDown && this._hasFocus)
+            {
+                var length = 0;
+                if(this.labelFunction)
+                {
+                    length = this.labelFunction(this._value).length;
+                }
+                else
+                {
+                    length = this._value.toString().length;
+                }
+                this.element.setSelectionRange(0, length);
+            }
+            this._valueSyncedWithInputField = true;
+        }
+    },
+
+    prepareForDraw: {
+        value: function() {
+            if(this._value)
+            {
+                this._numValue = this._value;
+            }
+
+            if(this._enabled)
+            {
+                this.element.addEventListener("blur", this);
+                this.element.addEventListener("focus", this);
+
+                // TODO only install low level event listeners for high level
+                // events others listen to us for
+                this.element.addEventListener("touchstart", this, false);
+                this.element.addEventListener("mousedown", this, false);
+            }
+        }
+    }
+
+});
diff --git a/node_modules/ninja-components/hottextunit.reel/hottextunit.css b/node_modules/ninja-components/hottextunit.reel/hottextunit.css
new file mode 100644
index 00000000..9476415c
--- /dev/null
+++ b/node_modules/ninja-components/hottextunit.reel/hottextunit.css
@@ -0,0 +1,41 @@
+/* <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> */
+
+.hottextunit
+{
+    -webkit-user-select:none;
+    cursor:default;
+    width:50px;
+    float:left;
+}
+
+.hottextunit:hover
+{
+    cursor: pointer;
+}
+
+.hottextunit input
+{
+    width:50px;
+    border:none;
+    padding:0;
+    margin:0;
+}
+
+.underline
+{
+    border-bottom:1px dotted white;
+}
+
+.hide
+{
+    display:none;
+}
+
+.disabled
+{
+    color:#999999;
+}
\ No newline at end of file
diff --git a/node_modules/ninja-components/hottextunit.reel/hottextunit.html b/node_modules/ninja-components/hottextunit.reel/hottextunit.html
new file mode 100644
index 00000000..6a5e913f
--- /dev/null
+++ b/node_modules/ninja-components/hottextunit.reel/hottextunit.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<!-- <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> -->
+<html>
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <link rel="stylesheet" type="text/css" href="hottextunit.css">
+
+    <script type="text/montage-serialization">
+        {
+            "owner": {
+                "module": "montage/ui/hottextunit.reel",
+                "name": "HotTextUnit",
+                "properties": {
+                    "element": {"#": "hottextunit"}
+                }
+            }
+        }
+    </script>
+
+</head>
+<body>
+    <div id="hottextunit" class="hottextunit"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/node_modules/ninja-components/hottextunit.reel/hottextunit.js b/node_modules/ninja-components/hottextunit.reel/hottextunit.js
new file mode 100644
index 00000000..8d468ce8
--- /dev/null
+++ b/node_modules/ninja-components/hottextunit.reel/hottextunit.js
@@ -0,0 +1,185 @@
+/* <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,
+    HotText = require("ui/hottext.reel").HotText;
+
+var HotTextUnit = exports.HotTextUnit = Montage.create(HotText, {
+
+    numericField: {
+        enumerable: false,
+        value:null
+    },
+
+    unitsField: {
+        enumerable: false,
+        value:null
+    },
+
+    inputField: {
+        enumerable: false,
+        value:null
+    },
+
+    _units: {
+        enumerable: false,
+        value: "px"
+    },
+
+    units: {
+        serializable: true,
+        enumerable: true,
+        get: function() {
+            return this._units;
+        },
+        set: function(value) {
+            if (value !== this._units) {
+                if(this._acceptableUnits.indexOf(value) !== -1)
+                {
+                    this._units = value;
+                    this.needsDraw = true;
+
+                    this._setEventFlags("change", false);
+                    this._dispatchActionEvent();
+                }
+            }
+        }
+    },
+
+    // Some controls will only support certain units
+    // For example, Oval would specify an innerRadius with acceptableUnits = ["%"]
+    // and Stroke Size with acceptableUnits = ["px", "pt", "%"]
+    _acceptableUnits: {
+        enumerable: false,
+        value: ["px"]
+    },
+
+
+    acceptableUnits: {
+        serializable: true,
+        enumerable: true,
+        get: function() {
+            return this._acceptableUnits;
+        },
+        set: function(value) {
+            if (value !== this._acceptableUnits) {
+                this._acceptableUnits = value;
+            }
+        }
+    },
+
+    // We don't want to handle every input; we only want to handle input from tab or enter
+    // Thus, we don't listen for an input event; we call this from handleKeydown
+    handleInput: {
+        enumerable: false,
+        value: function() {
+            var inputString = this.inputField.value;
+
+            // Ignore all whitespace, digits, negative sign and "." when looking for units label
+            // The units must come after one or more digits
+            var objRegExp = /(\-*\d+\.*\d*)(\s*)(\w*\%*)/;
+            var unitsString = inputString.replace(objRegExp, "$3");
+            if(unitsString)
+            {
+                var noSpaces = /(\s*)(\S*)(\s*)/;
+                // strip out spaces and convert to lower case
+                var match = (unitsString.replace(noSpaces, "$2")).toLowerCase();
+                if(match)
+                {
+                    Object.getPropertyDescriptor(this, "units").set.call(this, match);
+                }
+            }
+
+            this._setEventFlags("change", false);
+            // Moving this call to after setting the value since value changes are dispatching events before units are set
+            Object.getPropertyDescriptor(this, "value").set.call(this, this.inputFunction(inputString), false);
+        }
+    },
+
+    draw: {
+        enumerable: false,
+        value: function() {
+            this.inputField.value = this._value + " " + this._units;
+            this.numericField.innerText = this._value;
+            this.unitsField.innerText = " " + this._units;
+
+
+            if(this._hasFocus)
+            {
+                this.numericField.classList.add("hide");
+                this.unitsField.classList.add("hide");
+
+                this.inputField.classList.remove("hide");
+
+                // if element targeted; balancing demands of multitouch
+                // with traditional single focus model
+                this.inputField.addEventListener("keydown", this, false);
+            }
+            else
+            {
+                this.numericField.classList.remove("hide");
+                this.unitsField.classList.remove("hide");
+
+                this.inputField.classList.add("hide");
+            }
+        }
+    },
+
+    didDraw: {
+        enumerable: false,
+        value: function() {
+            if(this._hasFocus)
+            {
+                var length = 0;
+                if(this.labelFunction)
+                {
+                    length = this.labelFunction(this._value).length;
+                }
+                else
+                {
+                    length = this.inputField.value.toString().length;
+                }
+                this.inputField.setSelectionRange(0, length);
+            }
+            this._valueSyncedWithInputField = true;
+        }
+    },
+
+    prepareForDraw: {
+        value: function() {
+            this.numericField = document.createElement("span");
+            this.numericField.classList.add("underline");
+            this.numericField.innerText = this._value;
+
+            this.unitsField = document.createElement("span");
+            this.unitsField.innerText = " " + this._units;
+
+            this.inputField = document.createElement("input");
+            this.inputField.value = this._value + " " + this._units;
+            this.inputField.classList.add("hide");
+
+            this.element.appendChild(this.numericField);
+            this.element.appendChild(this.unitsField);
+            this.element.appendChild(this.inputField);
+
+
+            if(this._value)
+            {
+                this._numValue = this._value;
+            }
+
+            if(this._enabled)
+            {
+                this.element.addEventListener("blur", this);
+                this.element.addEventListener("focus", this);
+
+                this.element.addEventListener("touchstart", this, false);
+                this.element.addEventListener("mousedown", this, false);
+            }
+        }
+    }
+
+});
diff --git a/node_modules/ninja-components/image2.reel/image2.html b/node_modules/ninja-components/image2.reel/image2.html
new file mode 100644
index 00000000..8d7329b6
--- /dev/null
+++ b/node_modules/ninja-components/image2.reel/image2.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- <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> -->
+<html>
+<head>
+    <script type="text/montage-serialization">
+        {
+            "owner": {
+                "module": "montage/ui/image2.reel",
+                "name": "Image2",
+                "properties": {
+                    "element": {"#": "Image"}
+                }
+            }
+        }
+    </script>
+</head>
+<style>
+    .Image {
+        width: 320px;
+        height: 320px;
+        border-radius: 18px;
+    }
+</style>
+<body>
+    <div id="Image" class="Image"></div>
+</body>
+</html>
diff --git a/node_modules/ninja-components/image2.reel/image2.js b/node_modules/ninja-components/image2.reel/image2.js
new file mode 100644
index 00000000..750b837a
--- /dev/null
+++ b/node_modules/ninja-components/image2.reel/image2.j