5 files changed, 64 insertions, 19 deletions

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/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 45353a08..3d31a50b 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -1217,8 +1217,21 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                         arrCurrentElementsSelected = [];
             var matchedValues = 0;
 
-            for(i=0;i<arrSelectedIndexesLength;i++){
-                for(j=0;j<currentLayersSelectedLength;j++){
+                /*
+            if (arrSelectedIndexesLength !== 0) {
+                    for(i=0;i<arrSelectedIndexesLength;i++){
+                        for(j=0;j<currentLayersSelectedLength;j++){
+        
+                            if(this.arrLayers[arrSelectedIndexes[i]] === this.arrLayers[this.currentLayerSelected[j]]){
+                                matchedValues+=1;
+                            }
+                        }
+                    }
+        
+                    if(matchedValues === arrSelectedIndexesLength){
+                        return;
+                    }
+            } 
 
                     if(this.arrLayers[arrSelectedIndexes[i]] === this.arrLayers[this.currentLayersSelected[j]]){
                         matchedValues+=1;
@@ -1226,11 +1239,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                 }
             }
 
-            if(matchedValues === arrSelectedIndexesLength){
-                return;
-            }
 
-                /*
                  // TODO: this should probably check to see if it actually needs to run.
 
                                         console.log(arrSelectedIndexes);
@@ -1266,6 +1275,21 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                         if (arrSelectedIndexes.indexOf(i) < 0) {
                                                 this.arrLayers[i].layerData.isSelected = false;
                                 this.triggerLayerBinding(i);
+                                
+                                // Check to see if this layer, that we're deselecting, has
+                                // any selected keyframes associated with it.  If it does, deselect them.
+                                for (var j = 0; j < this.selectedTweens.length; j++) {
+                                        var currentStageElement;
+                                        if (typeof(this.selectedTweens[j].parentComponent.parentComponent.trackType) === "undefined") {
+                                                currentStageElement = this.selectedTweens[j].parentComponent.parentComponent.stageElement; 
+                                        } else {
+                                                currentStageElement = this.selectedTweens[j].parentComponent.parentComponent.parentComponent.parentComponent.parentComponent.parentComponent.stageElement;
+                                        }
+                                        if (this.arrLayers[i].layerData.stageElement === currentStageElement) {
+                                                this.selectedTweens[j].deselectTween();
+                                                this.selectedTweens.splice(j, 1);
+                                        }
+                                }
                         }
                 }
             }
@@ -1273,8 +1297,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                 this.currentLayersSelected = false;
             }
 
-            // Deselect any tweens
-                this.deselectTweens();
+            // Deselect tweens
+            //this.deselectTweens();
 
             
             // If we are actually going to be selecting things, create an empty array to use
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, {
     },
     handlePropertyChange : {
         value: function(rule, property, value, oldProperty, style) {
-            var browserValue;
+            var declaration = style.parentComponent.parentComponent,
+                browserValue;
 
             if(style.editingNewStyle) {
                 if(property === '') {
@@ -187,14 +188,17 @@ exports.StylesViewDelegate = Montage.create(Component, {
 
             if(property === '') {
                 style.deleting = true;
-                style.parentComponent.parentComponent.removeStyle(style.source);
-                this._dispatchChange(oldProperty, browserValue);
+                declaration.removeStyle(style.source);
+                this._dispatchChange(oldProperty);
                 return false;
             }
 
             // now add new property
             browserValue = this.stylesController.setStyle(rule, property, value);
 
+            //// Update the css text so it knows when to update
+            declaration.cssText = rule.style.cssText;
+
             ///// Mark style as invalid if the browser doesn't accept it
             style.invalid = (browserValue === null);
 
@@ -203,13 +207,18 @@ exports.StylesViewDelegate = Montage.create(Component, {
     },
     handleValueChange : {
         value: function(rule, property, value, style) {
-            var browserValue, units;
+            var declaration = style.parentComponent.parentComponent,
+                browserValue, units;
 
             if(value === '') {
                 ///// Remove old property
                 style.deleting = true;
                 this.stylesController.deleteStyle(rule, property);
-                style.parentComponent.parentComponent.removeStyle(style.source);
+                declaration.removeStyle(style.source);
+
+                //// Update the css text so it knows when to update
+                declaration.cssText = rule.style.cssText;
+
                 this._dispatchChange(property, browserValue);
                 return false;
             }
@@ -218,6 +227,9 @@ exports.StylesViewDelegate = Montage.create(Component, {
             browserValue = this.stylesController.setStyle(rule, property, value);
             style.browserValue = browserValue;
 
+            //// Update the css text so it knows when to update
+            declaration.cssText = rule.style.cssText;
+
             ///// Mark style as invalid if the browser doesn't accept it
             style.invalid = (browserValue === null);
 
diff --git a/js/panels/properties.reel/properties.css b/js/panels/properties.reel/properties.css
index d1aa750a..786eb57a 100755
--- a/js/panels/properties.reel/properties.css
+++ b/js/panels/properties.reel/properties.css
@@ -314,11 +314,11 @@ input label {
     width:45px;
 }
 
-.propertiesPanel div.montage-button:disabled {
+.propertiesPanel div[type=button]:disabled {
     opacity: 0.4;
 }
 
-.propertiesPanel div.montage-button {
+.propertiesPanel div[type=