3 files changed, 114 insertions, 18 deletions

diff --git a/js/controllers/clipboard-controller.js b/js/controllers/clipboard-controller.js
index d2173e31..3eba1bec 100644
--- a/js/controllers/clipboard-controller.js
+++ b/js/controllers/clipboard-controller.js
@@ -80,9 +80,11 @@ var ClipboardController = exports.ClipboardController = Montage.create(Component
                 return;
             }//for design view only
 
-            // Don't do anything if an input or other control is focused
+            // Don't do anything if an input or other control is focused except the copy menu button
             if(document.activeElement.nodeName !== "BODY") {
-                return;
+                if(!(document.activeElement.getAttribute("data-montage-id") === "menuItemButton")) {
+                    return;
+                }
             }
 
             if(this.clipboardContext === "stage"){
@@ -99,7 +101,9 @@ var ClipboardController = exports.ClipboardController = Montage.create(Component
 
             // Don't do anything if an input or other control is focused
             if(document.activeElement.nodeName !== "BODY") {
-                return;
+                if(!(document.activeElement.getAttribute("data-montage-id") === "menuItemButton")) {
+                    return;
+                }
             }
 
             if(this.clipboardContext === "stage"){
@@ -123,7 +127,9 @@ var ClipboardController = exports.ClipboardController = Montage.create(Component
 
             // Don't do anything if an input or other control is focused
             if(document.activeElement.nodeName !== "BODY") {
-                return;
+                if(!(document.activeElement.getAttribute("data-montage-id") === "menuItemButton")) {
+                    return;
+                }
             }
 
             //TODO: return if stage is not focussed
diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js
index 1d945066..6dabff47 100755
--- a/js/controllers/elements/shapes-controller.js
+++ b/js/controllers/elements/shapes-controller.js
@@ -841,10 +841,10 @@ exports.ShapesController = Montage.create(CanvasController, {
                                         child.strokeMat = "Linear Gradient";
                                     }
                                 }
-                                else if( (child.strokeMat === "Radial Gradient") ||
+                                else if( !child.strokeMat || (child.strokeMat === "Radial Gradient") ||
                                          (child.strokeMat === "Linear Gradient") )
                                 {
-                                    // Set Flat Material for children geometry if color has been changed to solid
+                                    // Set Flat Material for children geometry if no material defined or color has been changed to solid
                                     child.strokeMat = "Flat";
                                 }
                             }
@@ -863,10 +863,10 @@ exports.ShapesController = Montage.create(CanvasController, {
                                         child.fillMat = "Linear Gradient";
                                     }
                                 }
-                                else if( (child.fillMat === "Radial Gradient") ||
+                                else if( !child.fillMat || (child.fillMat === "Radial Gradient") ||
                                          (child.fillMat === "Linear Gradient") )
                                 {
-                                    // Set Flat Material for children geometry if color has been changed to solid
+                                    // Set Flat Material for children geometry if no material defined or color has been changed to solid
                                     child.fillMat = "Flat";
                                 }
                             }
diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js
index 89a389a4..21321f6d 100755
--- a/js/controllers/styles-controller.js
+++ b/js/controllers/styles-controller.js
@@ -106,7 +106,17 @@ var stylesController = exports.StylesController = Montage.create(Component, {
             this.defaultStylesheet = this.getSheetFromElement(this.CONST.DEFAULT_SHEET_ID);
 
             this.userStyleSheets = nj.toArray(document.model.views.design.document.styleSheets).filter(function(sheet) {
-                return sheet !== this._stageStylesheet;
+                if(sheet === this._stageStylesheet) { return false; }
+
+                var media = sheet.ownerNode.getAttribute('media');
+
+                ///// If the media attribute contains a query, we'll watch for changes in media
+                if(/\([0-9A-Za-z-: ]+\)/.test(media)) {
+                    this.watchMedia(media);
+                }
+
+                return true;
+
             }, this);
 
             this.initializeRootStyles();
@@ -115,6 +125,33 @@ var stylesController = exports.StylesController = Montage.create(Component, {
         },
         enumerable : false
     },
+
+    _mediaList : {
+        value: []
+    },
+
+    watchMedia : {
+        value: function(mediaQuery, doc) {
+            var _doc = doc || this._currentDocument.model.views.design.document;
+
+            ///// Set a listener for media changes
+            _doc.defaultView.matchMedia(mediaQuery).addListener(function(e) {
+                this.handleMediaChange(e);
+            }.bind(this));
+        }
+    },
+
+    handleMediaChange : {
+        value: function(query) {
+            this._clearCache();
+
+            NJevent('mediaChange', {
+                query: query,
+                source: "stylesController"
+            });
+        }
+    },
+
     userStyleSheets : {
         value : null
     },
@@ -1292,33 +1329,68 @@ var stylesController = exports.StylesController = Montage.create(Component, {
 
     ///// Get Matrix From Element
     ///// Returns the matrix from an element's -webkit-transform
-    //// TODO - This routine should eventually check for other transform styles, i.e., rotateX, translateZ, etc.
 
     getMatrixFromElement : {
         value: function(element, isStage) {
             isStage = false;
             var xformStr = this.getElementStyle(element, "-webkit-transform", true, isStage),
-                mat;
+                mat,
+                index1,
+                index2,
+                substr,
+                numArray,
+                nNums,
+                i;
 
             if (xformStr) {
-                var index1 = xformStr.indexOf( "matrix3d(");
+                // Check for 3d matrix
+                index1 = xformStr.indexOf( "matrix3d(");
+                // If style does not contain 'matrix3d', try computed matrix/matrix3d from rotateY, translateZ, etc.
+                if((index1 === -1) && element.ownerDocument.defaultView) {
+                    xformStr = element.ownerDocument.defaultView.getComputedStyle(element).getPropertyValue("-webkit-transform");
+                    index1 = xformStr.indexOf( "matrix3d(");
+                }
                 if (index1 >= 0) {
                     index1 += 9;    // do not include 'matrix3d('
-                    var index2 = xformStr.indexOf( ")", index1 );
+                    index2 = xformStr.indexOf( ")", index1 );
                     if (index2 >= 0) {
-                        var substr = xformStr.substr( index1, (index2-index1));
+                        substr = xformStr.substr( index1, (index2-index1));
                         if (substr && (substr.length > 0)) {
-                            var numArray = substr.split(',');
-                            var nNums = numArray.length;
+                            numArray = substr.split(',');
+                            nNums = numArray.length;
                             if (nNums == 16) {
                                 // gl-matrix wants row order
                                 mat = numArray;
-                                for (var i=0;  i<16;  i++) {
+                                for (i=0;  i<16;  i++) {
                                     mat[i] = Number( mat[i] );
                                 }
                             }
                         }
                     }
+                } else {
+                    // Check for 2d matrix
+                    index1 = xformStr.indexOf( "matrix(");
+                    if (index1 >= 0) {
+                        index1 += 7;    // do not include 'matrix('
+                        index2 = xformStr.indexOf( ")", index1 );
+                        if (index2 >= 0) {
+                            substr = xformStr.substr( index1, (index2-index1));
+                            if (substr && (substr.length > 0)) {
+                                numArray = substr.split(',');
+                                nNums = numArray.length;
+                                if (nNums === 6) {
+                                    // gl-matrix wants row order
+                                    mat = Matrix.I(4);
+                                    mat[0] = Number(numArray[0]);
+                                    mat[1] = Number(numArray[1]);
+                                    mat[4] = Number(numArray[2]);
+                                    mat[5] = Number(numArray[3]);
+                                    mat[12] = Number(numArray[4]);
+                                    mat[13] = Number(numArray[5]);
+                                }