7 files changed, 226 insertions, 19 deletions

diff --git a/js/components/ui/color-chip.reel/color-chip.js b/js/components/ui/color-chip.reel/color-chip.js
index 5bef7020..e51bdd8a 100755
--- a/js/components/ui/color-chip.reel/color-chip.js
+++ b/js/components/ui/color-chip.reel/color-chip.js
@@ -9,32 +9,80 @@ var Montage = require("montage/core/core").Montage,
 
 var ColorChip = exports.ColorChip = Montage.create(Component, {
 
+    chip: {
+        value: false
+    },
+
     hasIcon: {
         value: true
     },
 
+    iconType: {
+        value: null
+    },
+
     mode: {
         value: "stroke"
     },
 
-    prepareForDraw: {
-        value: function() {
-//            this.colorButton.props = {side: 'right', align: 'bottom', wheel: true, palette: true, gradient: true, image: true, offset: 20};
-//            this.application.ninja.colorController.addButton('chip', this.colorButton);
+    offset: {
+        value: 20
+    },
 
+    initialColor: {
+        value: false
+    },
 
+    changeDelegate: {
+        value: null
+    },
+
+    prepareForDraw: {
+        value: function() {
             this.addEventListener("firstDraw", this, false);
         }
     },
 
     draw: {
         value: function() {
+            if(this.hasIcon) {
+                var icon = this.iconType || this.mode + "Icon";
+                this.application.ninja.colorController.addButton(icon, this.icon);
+            }
 
-            if(this.hasIcon) this.application.ninja.colorController.addButton(this.mode + 'Icon', this.icon);
-
-//            this.application.ninja.colorController.addButton(this.mode, this.chipBtn);
-            this.chipBtn.props = {side: 'right', align: 'top', wheel: true, palette: true, gradient: true, image: true, offset: 20};
+            this.chipBtn.props = {side: 'right', align: 'top', wheel: true, palette: true, gradient: true, image: true, offset: this.offset};
             this.application.ninja.colorController.addButton(this.mode, this.chipBtn);
+
+        }
+    },
+
+    handleFirstDraw: {
+        value: function(evt) {
+            if(this.chip) {
+                // This is a single chip - Not related to the color panel -- Set the initial color if found
+                var mode = "rgb", r = 0, g = 0, b = 0, a = 1, css = "rgb(255,0,0)";
+
+                if(this.initialColor) {
+                    var colorObj = this.application.ninja.colorController.getColorObjFromCss(this.initialColor);
+                    mode = colorObj.mode;
+                    r = colorObj.value.r;
+                    g = colorObj.value.g;
+                    b = colorObj.value.b;
+                    a = colorObj.value.a;
+                    css = colorObj.css;
+                }
+
+                this.chipBtn.color(mode, {wasSetByCode: true, type: 'change', color: {r: r, g: g, b: b}, css: css});
+                this.chipBtn.addEventListener("change", this, false);
+            }
+        }
+    },
+
+    handleChange: {
+        value: function(evt) {
+            if(this.changeDelegate && typeof(this.changeDelegate === "function")) {
+                this.changeDelegate(evt);
+            }
         }
     }
 
diff --git a/js/controllers/elements/stage-controller.js b/js/controllers/elements/stage-controller.js
index b8170826..af7c4858 100755
--- a/js/controllers/elements/stage-controller.js
+++ b/js/controllers/elements/stage-controller.js
@@ -75,6 +75,8 @@ exports.StageController = Montage.create(ElementController, {
     getProperty: {
         value: function(el, p) {
             switch(p) {
+                case "background" :
+                    return el.elementModel.stageBackground.style.getProperty(p);
                 case "border":
                     return el.elementModel.stageView.style.getProperty(p);
                 case "height":
@@ -92,7 +94,7 @@ exports.StageController = Montage.create(ElementController, {
         value: function(el, p, value) {
             switch(p) {
                 case "background":
-                    el.elementModel.body.style.setProperty(p, value);
+                    el.elementModel.stageBackground.style.setProperty(p, value);
                     break;
                 case "overflow":
                     el.elementModel.viewPort.style.setProperty(p, value);
diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js
index 44e0e798..44ca50e1 100755
--- a/js/controllers/styles-controller.js
+++ b/js/controllers/styles-controller.js
@@ -128,7 +128,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
                 } else {
                     this._defaultStylesheet = sheets[lastIndex];
                 }
-                
+
             }
         }
     },
@@ -179,14 +179,14 @@ var stylesController = exports.StylesController = Montage.create(Component, {
             this.styleSheetModified(stylesheet);
             
             rule = stylesheet.rules[index];
-            
+
             ///// attach specificity to rule object
-            // if rule is css keyframes, return rule and don't attach specificity
+            ///// if rule is css keyframes, return rule and don't attach specificity
             if (rule instanceof WebKitCSSKeyframesRule) {
                 return rule;
             }
             rule[this.CONST.SPECIFICITY_KEY] = this.getSpecificity(rule.selectorText);
-            
+
             ///// return the rule we just inserted
             return rule;
         }
@@ -844,6 +844,61 @@ var stylesController = exports.StylesController = Montage.create(Component, {
         }
     },
 
+    ///// Get Animation Rule With Name
+    ///// Returns the CSSKeyframesRule with given name
+
+    getAnimationRuleWithName : {
+        value: function(name, document) {
+            var doc = document || this._activeDocument._document,
+                animRules = this.getDocumentAnimationRules(doc),
+                rule, i;
+
+            for(i = 0; i < animRules.length; i++) {
+                rule = animRules[i];
+                if(rule.name === name) {
+                    return rule;
+                }
+            }
+
+            return;
+        }
+    },
+
+    ///// Get Document Animation Rules
+    ///// Returns all CSSKeyframesRules in active document, or in
+    ///// optionally passed-in document
+    ///// If none are found, returns an empty array
+
+    getDocumentAnimationRules : {
+        value: function(document) {
+            var sheets = (document) ? document.styleSheets : this._activeDocument._document.styleSheets,
+                rules = [];
+
+            nj.toArray(sheets).forEach(function(sheet) {
+                rules = rules.concat(this.getStyleSheetAnimationRules(sheet));
+            }, this);
+
+            return rules;
+        }
+    },
+
+    ///// Get Style Sheet Animation Rules
+    ///// Returns all CSSKeyframesRules from the given stylesheet
+    ///// If none are found, returns an empty array
+
+    getStyleSheetAnimationRules : {
+        value: function(sheet) {
+            var rules = [];
+
+            if(sheet.rules) {
+                rules = rules.concat(nj.toArray(sheet.rules).filter(function(rule) {
+                    return rule instanceof WebKitCSSKeyframesRule;
+                }));
+            }
+
+            return rules;