6 files changed, 90 insertions, 9 deletions

diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js
index b0db1b6a..11d53ac0 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
     },
@@ -1440,7 +1477,8 @@ var stylesController = exports.StylesController = Montage.create(Component, {
                 rel   : 'stylesheet',
                 id    : id || "",
                 media : 'screen',
-                title : 'Temp'
+                title : 'Temp',
+                'data-ninja-node' : 'true'
             });
 
             doc.head.appendChild(sheetElement);
@@ -1467,6 +1505,9 @@ var stylesController = exports.StylesController = Montage.create(Component, {
                 sheetEl.disabled = true;
                 this.userStyleSheets.splice(this.userStyleSheets.indexOf(sheet), 1);
 
+                ///// Make sure cached rules from this stylesheet are not used
+                this._clearCache();
+
                 ///// Check to see if we're removing the default style sheet
                 if(sheet === this._defaultStylesheet) {
                     sheetCount = this.userStyleSheets.length;
@@ -1504,6 +1545,18 @@ var stylesController = exports.StylesController = Montage.create(Component, {
         }
     },
 
+    setMediaAttribute : {
+        value: function(sheet, mediaString) {
+            if(sheet.media.mediaText === mediaString) { return false; }
+
+            sheet.ownerNode.setAttribute('media', mediaString);
+
+            this._clearCache();
+
+            this.styleSheetModified(sheet);
+        }
+    },
+
     ///// Style Sheet Modified
     ///// Method to call whenever a stylesheet change is made
     ///// Dispatches an event, and keeps list of dirty style sheets
@@ -1521,6 +1574,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
             ///// If the sheet doesn't already exist in the list of modified
             ///// sheets, dispatch dirty event and add the sheet to the list
             if(sheetSearch.length === 0) {
+                NJevent('styleSheetDirty', eventData);
                 this.dirtyStyleSheets.push({
                     document : sheet.ownerNode.ownerDocument,
                     stylesheet : sheet
diff --git a/js/panels/css-panel/rule-list.reel/rule-list.js b/js/panels/css-panel/rule-list.reel/rule-list.js
index ae0c4611..b9dc2b95 100644
--- a/js/panels/css-panel/rule-list.reel/rule-list.js
+++ b/js/panels/css-panel/rule-list.reel/rule-list.js
@@ -106,7 +106,7 @@ exports.RuleList = Montage.create(Component, {
                     // found rule in our component list, or it's the inline rule
                     ruleComponent.update();
                     foundIndices.push(index);
-                } else if(!ruleComponent.applied) { /// remove rule (unless unapplied)
+                } else if(ruleComponent.applied) { /// remove rule (unless unapplied)
                     this.rulesToRemove.push(ruleComponent);
                 }
             }, this);
diff --git a/js/panels/css-panel/style-sheet.reel/style-sheet.html b/js/panels/css-panel/style-sheet.reel/style-sheet.html
index 035bc760..01b5f20c 100644
--- a/js/panels/css-panel/style-sheet.reel/style-sheet.html
+++ b/js/panels/css-panel/style-sheet.reel/style-sheet.html
@@ -62,6 +62,9 @@ POSSIBILITY OF SUCH DAMAGE.
                 "prototype": "js/components/textfield.reel[TextField]",
                 "properties": {
                     "element": {"#": "media-input"}
+                },
+                "bindings": {
+                    "value": {"<->": "@owner.mediaText"}
                 }
             },
             "editButton": {
diff --git a/js/panels/css-panel/style-sheet.reel/style-sheet.js b/js/panels/css-panel/style-sheet.reel/style-sheet.js
index b7df05a7..3a0060b2 100644
--- a/js/panels/css-panel/style-sheet.reel/style-sheet.js
+++ b/js/panels/css-panel/style-sheet.reel/style-sheet.js
@@ -71,6 +71,9 @@ exports.StyleSheet = Montage.create(Component, {
     prepareForDraw : {
         value: function() {
             this.nameText.element.addEventListener('click', this, false);
+
+            //// Set the initial media text value
+            this.mediaText = this._source.media.mediaText;
         }
     },
 
@@ -89,8 +92,6 @@ exports.StyleSheet = Montage.create(Component, {
         value: function() {
             var transStr = '-webkit-transform';
 
-            this.mediaInput.value = this._source.media.mediaText;
-
             if(this.editing) {
                 this.editView.classList.add('expanded');
                 this.editView.style.setProperty(transStr, 'translate3d(-'+ this._translateDistance + 'px,0,0)');
@@ -194,6 +195,21 @@ exports.StyleSheet = Montage.create(Component, {
             this._name = text;
         }
     },
+
+    _mediaText : { value: null },
+    mediaText : {
+        get : function() { return this._mediaText; },
+        set : function(value) {
+            if(value === this._mediaText) { return; }
+
+            this.application.ninja.stylesController.setMediaAttribute(this._source, value);
+            
+            this._mediaText = value;
+
+            this.needsDraw = true;
+        }
+    },
+
     _dirty : {
         value: null
     },
diff --git a/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.js b/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.js
index cd86261c..fd559b24 100644
--- a/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.js
+++ b/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.js
@@ -96,13 +96,16 @@ exports.StyleSheetsView = Montage.create(Component, {
 
             var sheetComponent, oldDefaultSheet;
 
+            ///// Mark the appropriate component as the default, un-mark the previous default
             if(this.styleSheetList) {
                 sheetComponent = this.styleSheetList.childComponents[this.styleSheets.indexOf(sheet)];
                 if(sheetComponent) {
                     sheetComponent['default'] = true;
                     if(this._defaultStyleSheet) {
                         oldDefaultSheet = this.styleSheetList.childComponents[this.styleSheets.indexOf(this._defaultStyleSheet)];