12 files changed, 154 insertions, 20 deletions

diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js
index b0db1b6a..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
     },
@@ -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;
@@ -1475,6 +1516,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
 
                 ///// Mark for removal for i/o
                 sheetEl.setAttribute('data-ninja-remove', 'true');
+                sheetEl.removeAttribute('data-ninja-node');
 
                 NJevent('removeStyleSheet', sheet);
             }
@@ -1504,6 +1546,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 +1575,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/lib/NJUtils.js b/js/lib/NJUtils.js
index cfb7ef07..bca9b05b 100755
--- a/js/lib/NJUtils.js
+++ b/js/lib/NJUtils.js
@@ -241,6 +241,7 @@ exports.NJUtils = Montage.create(Component, {
     // 100px will return the following array: [100, px]
     getValueAndUnits: {
         value: function(input) {
+            if (!input) return [null, null];
             var numberValue = parseFloat(input);
 
             // Ignore all whitespace, digits, negative sign and "." when looking for units label
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
index 0d769c23..8a4073c9 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <!-- <copyright>
 Copyright (c) 2012, Motorola Mobility LLC.
 All Rights Reserved.
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 521c315d..7581d15a 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -527,7 +527,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
         set:function (newVal) {
             if (newVal !== this._millisecondsOffset) {
 
-                this.tempValue  = newVal;
+                this.zoomValue  = newVal;
                 var tempValue = (1/newVal) * 1000000;
                 newVal = tempValue;
 
@@ -1130,8 +1130,13 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                 this.currentLayersSelected = this.application.ninja.currentDocument.tlCurrentLayersSelected;
                 this.currentElementsSelected = this.application.ninja.currentDocument.tlCurrentElementsSelected;
                 this._currentDocumentUuid = this.application.ninja.currentDocument.uuid;
-
-
+//                if(this.application.ninja.currentDocument.tlZoomSliderValue){
+//                this.millisecondsOffset = this.application.ninja.currentDocument.tlZoomSliderValue ;
+//                    if(this.zoom_slider){
+//                        this.zoom_slider.value = this.application.ninja.currentDocument.tlZoomSliderValue;
+//                    }
+//
+//                }
                 // Are we only showing animated layers?
                                 if (this.application.ninja.currentDocument.boolShowOnlyAnimated) {
                                         // Fake a click.
@@ -1706,12 +1711,17 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
     zoomTrackContainerWidthChange:{
         value:function () {
 
-            this.tempValue = this.tempValue/1000;
-            this.tempValue *= 30;
+            if(this.application.ninja.currentDocument && this.zoomValue){
+                this.application.ninja.currentDocument.tlZoomSliderValue = this.zoomValue;
+
+            }
 
-            this.container_tracks.style.width = (this.tempValue * 80) + "px";
-            this.master_track.style.width = (this.tempValue * 80) + "px";
-            this.time_markers.style.width = (this.tempValue * 80) + "px";
+            this.zoomValue = this.zoomValue/1000;
+            this.zoomValue *= 30;
+
+            this.container_tracks.style.width = (this.zoomValue * 80) + "px";
+            this.master_track.style.width = (this.zoomValue * 80) + "px";
+            this.time_markers.style.width = (this.zoomValue * 80) + "px";
             if (this.timeMarkerHolder) {