16 files changed, 226 insertions, 115 deletions

diff --git a/js/components/layout/stage-mode.reel/stage-mode.js b/js/components/layout/stage-mode.reel/stage-mode.js
index cb42276b..b772d688 100755
--- a/js/components/layout/stage-mode.reel/stage-mode.js
+++ b/js/components/layout/stage-mode.reel/stage-mode.js
@@ -9,17 +9,17 @@ var Montage = require("montage/core/core").Montage,
 
 exports.StageMode = Montage.create(Component, {
 
-    _livePreview: {
+    _chromePreview: {
         value: null
     },
 
-    livePreview: {
+    chromePreview: {
         get: function() {
-            return this._livePreview;
+            return this._chromePreview;
         },
         set: function(value) {
-            if(value !== this._livePreview) {
-                this._livePreview = value;
+            if(value !== this._chromePreview) {
+                this._chromePreview = value;
                 this.needsDraw = true;
             }
         }
@@ -46,7 +46,7 @@ exports.StageMode = Montage.create(Component, {
 
     handleClick: {
         value: function(event) {
-            this.livePreview = !this.livePreview;
+            this.chromePreview = !this.chromePreview;
         }
     }
 });
\ No newline at end of file
diff --git a/js/controllers/objects-controller.js b/js/controllers/objects-controller.js
index 6557c14e..6ca869ba 100644
--- a/js/controllers/objects-controller.js
+++ b/js/controllers/objects-controller.js
@@ -27,7 +27,7 @@ var objectsController = exports.ObjectsController = Montage.create(Montage, {
             setTimeout(function() {
                 this.bindToModelObjects();
             }.bind(this), 1000);
-
+            this.currentObjectBindings = [];
             this._currentDocument = doc;
         },
         enumerable : false
@@ -150,9 +150,9 @@ var objectsController = exports.ObjectsController = Montage.create(Montage, {
             var properties = [];
 
             for(var key in object) {
-                if(object.hasOwnProperty(key)) {
+                //if(object.hasOwnProperty(key)) {
                         properties.push(key);
-                }
+                //}
             }
 
             if(excludeUnderscoreProperties) {
diff --git a/js/controllers/presets-controller.js b/js/controllers/presets-controller.js
index 4c177189..65a56a74 100644
--- a/js/controllers/presets-controller.js
+++ b/js/controllers/presets-controller.js
@@ -53,6 +53,8 @@ exports.PresetsController = Montage.create(Component, {
             //// TODO: replace this hack when webkit supports transitionStart event (see above)
             window.clearTimeout(el.njTimeout);
 
+            this._dispatchChange();
+
             el.classList.remove(this.transitionClass);
             el.removeEventListener("webkitTransitionEnd", this, true);
         }
@@ -107,6 +109,10 @@ exports.PresetsController = Montage.create(Component, {
                 }
             }, this);
 
+            if(!useTransition) {
+                this._dispatchChange();
+            }
+
         }
     },
 
@@ -126,5 +132,19 @@ exports.PresetsController = Montage.create(Component, {
 
             return keysString;
         }
+    },
+
+    _dispatchChange : {
+        value: function(property, value) {
+            this.application.ninja.stage.updatedStage = true;
+            NJevent('elementChange', {
+                type : 'presetChange',
+                data: {
+                    "prop": property,
+                    "value": value
+                },
+                redraw: null
+            });
+        }
     }
 });
\ No newline at end of file
diff --git a/js/ninja.reel/ninja.html b/js/ninja.reel/ninja.html
index 5429e7d0..1ebf8413 100755
--- a/js/ninja.reel/ninja.html
+++ b/js/ninja.reel/ninja.html
@@ -163,7 +163,7 @@
                     "element": {"#": "stageMode"}
                 },
                 "bindings" : {
-                    "livePreview": {"<->": "@appModel.livePreview"}
+                    "chromePreview": {"<->": "@appModel.chromePreview"}
                 }
             },
 
diff --git a/js/ninja.reel/ninja.js b/js/ninja.reel/ninja.js
index 859268a0..94f69ed8 100755
--- a/js/ninja.reel/ninja.js
+++ b/js/ninja.reel/ninja.js
@@ -511,25 +511,17 @@ exports.Ninja = Montage.create(Component, {
 
     executeLivePreview: {
         value: function() {
-            var background, overflow, transitionStopRule;
-            this.stage.hideCanvas(this.appModel.livePreview);
+            var transitionStopRule;
+//            this.stage.hideCanvas(this.appModel.livePreview);
 
-            // TODO: Remove marker for old template: NINJA-STAGE-REWORK
             if(this.appModel.livePreview) {
-//                background =  "#000000";
-//                overflow = "hidden";
                 transitionStopRule = "nj-css-garbage-selector";
+                this.stage.bindingView.hide = true;
             } else {
-//                background =  "#808080";
-//                overflow = "visible";
                 transitionStopRule = "*"
+                this.stage.bindingView.hide = false;
             }
 
-            // TODO: Remove marker for old template: NINJA-STAGE-REWORK
-//            this.currentDocument.model.documentRoot.elementModel.controller.setProperty(this.currentDocument.model.documentRoot, "body-background", background);
-//            this.currentDocument.model.documentRoot.elementModel.controller.setProperty(this.currentDocument.model.documentRoot, "overflow", overflow);
-//            this.currentDocument.model.documentRoot.elementModel.controller.changeSelector(this.currentDocument.model.documentRoot, "transitionStopRule", transitionStopRule);
-
             this.application.ninja.stylesController._stageStylesheet.rules[0].selectorText = transitionStopRule;
 
             this._toggleWebGlAnimation(this.appModel.livePreview);
diff --git a/js/panels/CSSPanel/css-shorthand-map.js b/js/panels/CSSPanel/css-shorthand-map.js
index d469e2a1..e38627f7 100755
--- a/js/panels/CSSPanel/css-shorthand-map.js
+++ b/js/panels/CSSPanel/css-shorthand-map.js
@@ -68,7 +68,15 @@ exports.CSS_SHORTHAND_MAP = {
     'padding-left' : ['padding'],
     'padding-right' : ['padding'],
     'padding-top' : ['padding'],
-    
+
+    '-webkit-animation-name'            : ['-webkit-animation'],
+    '-webkit-animation-duration'        : ['-webkit-animation'],
+    '-webkit-animation-timing-function' : ['-webkit-animation'],
+    '-webkit-animation-delay'           : ['-webkit-animation'],
+    '-webkit-animation-iteration-count' : ['-webkit-animation'],
+    '-webkit-animation-direction'       : ['-webkit-animation'],
+    '-webkit-animation-fill-mode'       : ['-webkit-animation'],
+
     '-webkit-transition-property' : ['-webkit-transition'],
     '-webkit-transition-duration' : ['-webkit-transition'],
     '-webkit-transition-timing-function' : ['-webkit-transition'],
@@ -91,6 +99,7 @@ exports.CSS_SHORTHAND_TO_SUBPROP_MAP = {
     'list' : ["list-style-type", "list-style-image", "list-style-position"],
     'margin' : ["margin-top", "margin-right", "margin-bottom", "margin-left"],
     'padding' : ["padding-top", "padding-right", "padding-bottom", "padding-left"],
+    '-webkit-animation': ["webkit-animation-name", "webkit-animation-duration", "webkit-animation-timing-function", "webkit-animation-delay", "webkit-animation-iteration-count", "webkit-animation-direction", "webkit-animation-fill-mode"],
     '-webkit-transition' : ["-webkit-transition-property", "-webkit-transition-duration",
                             "-webkit-transition-timing-function", "-webkit-transition-delay"]
 };
\ No newline at end of file
diff --git a/js/panels/css-panel/styles-view-delegate.js b/js/panels/css-panel/styles-view-delegate.js
index a7c1f0d9..4f41ff12 100644
--- a/js/panels/css-panel/styles-view-delegate.js
+++ b/js/panels/css-panel/styles-view-delegate.js
@@ -171,7 +171,8 @@ exports.StylesViewDelegate = Montage.create(Component, {
     },