9 files changed, 161 insertions, 3 deletions

diff --git a/js/components/checkbox.reel/checkbox.js b/js/components/checkbox.reel/checkbox.js
index f06e5830..be331f4e 100755
--- a/js/components/checkbox.reel/checkbox.js
+++ b/js/components/checkbox.reel/checkbox.js
@@ -58,6 +58,26 @@ exports.Checkbox = Montage.create(Component, {
         }
     },
 
+    _enabled: {
+        enumerable: false,
+        value: true
+    },
+
+    enabled: {
+        enumerable: true,
+        serializable: true,
+        get: function() {
+            return this._enabled;
+        },
+        set: function(value) {
+            if(value !== this._enabled)
+            {
+                this._enabled = value;
+                this.needsDraw = true;
+            }
+        }
+    },
+
     handleChange:
     {
         value:function(event)
@@ -76,6 +96,7 @@ exports.Checkbox = Montage.create(Component, {
     
     draw: {
         value: function() {
+            this.element.disabled = !this._enabled;
             if(!this._valueSyncedWithInputField)
             {
                 this.element.checked = this._checked;
diff --git a/js/components/tools-properties/rect-properties.reel/rect-properties.js b/js/components/tools-properties/rect-properties.reel/rect-properties.js
index b4085eea..f023f4bb 100755
--- a/js/components/tools-properties/rect-properties.reel/rect-properties.js
+++ b/js/components/tools-properties/rect-properties.reel/rect-properties.js
@@ -33,9 +33,9 @@ exports.RectProperties = Montage.create(ToolProperties, {
             this.TRRadiusControl.enabled = this.BLRadiusControl.enabled = this.BRRadiusControl.enabled = !this.lockButton.pressed;
 
             if(this.lockButton.pressed) {
-                this._removeBindings([this.TRRadiusControl, this.BLRadiusControl, this.BRRadiusControl]);
-            } else {
                 this._setBindings([this.TRRadiusControl, this.BLRadiusControl, this.BRRadiusControl]);
+            } else {
+                this._removeBindings([this.TRRadiusControl, this.BLRadiusControl, this.BRRadiusControl]);
             }
 
         }
diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js
index b3ac9ddb..b060b751 100755
--- a/js/controllers/elements/shapes-controller.js
+++ b/js/controllers/elements/shapes-controller.js
@@ -105,6 +105,20 @@ exports.ShapesController = Montage.create(CanvasController, {
                 case "editFillMaterial":
                     NJevent("showMaterialPopup",{materialId : el.elementModel.shapeModel.fillMaterial.getName()});
                     break;
+                case "animate":
+                    if(value)
+                    {
+                        el.elementModel.shapeModel.animate = true;
+                        el.elementModel.shapeModel.GLWorld._previewAnimation = true;
+                        el.elementModel.shapeModel.GLWorld.restartRenderLoop();
+                    }
+                    else
+                    {
+                        el.elementModel.shapeModel.animate = false;
+                        el.elementModel.shapeModel.GLWorld._previewAnimation = false;
+                        el.elementModel.shapeModel.GLWorld._canvas.task.stop();
+                    }
+                    break;
                 default:
                     CanvasController.setProperty(el, p, value);
             }
@@ -123,6 +137,7 @@ exports.ShapesController = Montage.create(CanvasController, {
                 case "border":
                 case "background":
                 case "useWebGl":
+                case "animate":
                     return this.getShapeProperty(el, p);
                 case "strokeMaterial":
                 case "fillMaterial":
diff --git a/js/data/pi/pi-data.js b/js/data/pi/pi-data.js
index 53fec3be..52360302 100755
--- a/js/data/pi/pi-data.js
+++ b/js/data/pi/pi-data.js
@@ -393,6 +393,17 @@ exports.PiData = Montage.create( Montage, {
                     ],
                     [
                         {
+                            type: "checkbox",
+                            id: "animate",
+                            prop: "animate",
+                            defaultValue: true,
+                            value: "Animate",
+                            checked: true,
+                            enabled: { boundObject: "this.controls", boundProperty: "useWebGl" }
+                        }
+                    ],
+                    [
+                        {
                             type: "dropdown",
                             id:   "strokeMaterial",
                             prop:   "strokeMaterial",
@@ -486,6 +497,17 @@ exports.PiData = Montage.create( Montage, {
                     ],
                     [
                         {
+                            type: "checkbox",
+                            id: "animate",
+                            prop: "animate",
+                            defaultValue: true,
+                            value: "Animate",
+                            checked: true,
+                            enabled: { boundObject: "this.controls", boundProperty: "useWebGl" }
+                        }
+                    ],
+                    [
+                        {
                             type: "dropdown",
                             id:   "strokeMaterial",
                             prop:   "strokeMaterial",
@@ -580,6 +602,17 @@ exports.PiData = Montage.create( Montage, {
                     ],
                     [
                         {
+                            type: "checkbox",
+                            id: "animate",
+                            prop: "animate",
+                            defaultValue: true,
+                            value: "Animate",
+                            checked: true,
+                            enabled: { boundObject: "this.controls", boundProperty: "useWebGl" }
+                        }
+                    ],
+                    [
+                        {
                             type: "dropdown",
                             id:   "strokeMaterial",
                             prop:   "strokeMaterial",
diff --git a/js/lib/drawing/world.js b/js/lib/drawing/world.js
index 07a2c3ae..b87c6272 100755
--- a/js/lib/drawing/world.js
+++ b/js/lib/drawing/world.js
@@ -117,6 +117,8 @@ var World = function GLWorld( canvas, use3D, preserveDrawingBuffer ) {
 
         this.getRenderer                        = function()            {  return this.renderer;                        };
 
+    // Flag to play/pause animation at authortime
+    this._previewAnimation = true;
   ////////////////////////////////////////////////////////////////////////////////////
   // RDGE
   // local variables
@@ -475,6 +477,10 @@ World.prototype.restartRenderLoop = function() {
                 if (this._allMapsLoaded) {
                         //console.log( "starting task" );
                         this._canvas.task.start();
+            if(!this._previewAnimation) {
+                //render only once if authortime animation is turned off
+                this._canvas.task.stop();
+            }
                 } else {
                         //console.log( "stopping task" );
                         this._canvas.task.stop();
diff --git a/js/models/shape-model.js b/js/models/shape-model.js
index 58a88fd0..ea8c2cfc 100755
--- a/js/models/shape-model.js
+++ b/js/models/shape-model.js
@@ -10,7 +10,8 @@ var Montage = require("montage/core/core").Montage,
 exports.ShapeModel = Montage.create(Component, {
 
     shapeCount:             { value: 0 },
-    useWebGl:           { value: false },
+    useWebGl:               { value: false },
+    animate:                { value: true },
 
     GLWorld:                { value: null },
     GLGeomObj:              { value: null },
diff --git a/js/ninja.reel/ninja.js b/js/ninja.reel/ninja.js
index 2a6e49f7..c76c7d46 100755
--- a/js/ninja.reel/ninja.js
+++ b/js/ninja.reel/ninja.js
@@ -166,6 +166,27 @@ exports.Ninja = Montage.create(Component, {
             this.currentDocument.documentRoot.elementModel.controller.setProperty(this.currentDocument.documentRoot, "overflow", overflow);
             this.currentDocument.documentRoot.elementModel.controller.changeSelector(this.currentDocument.documentRoot, "transitionStopRule", transitionStopRule);
 
+            this._toggleWebGlAnimation(this.appModel.livePreview);
+        }
+    },
+
+    // Turn on WebGL animation during preview
+    _toggleWebGlAnimation: {
+        value: function(inLivePreview) {
+            var glCanvases = this.currentDocument.iframe.contentWindow.document.querySelectorAll('[data-RDGE-id]'),
+                glShapeModel;
+            if(glCanvases) {