6 files changed, 167 insertions, 99 deletions

diff --git a/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js b/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js
index 0c950ffd..ecf0f9cd 100755
--- a/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js
+++ b/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js
@@ -1691,7 +1691,7 @@ NJCSSStyle.prototype.styleChange = function() {
 NJCSSStyle.prototype.getUnits = function(val) {
     if(val.split(/\s/).length > 1) {
         return false;
-    } else if(/px|em|pt|in|cm|mm|ex|pc|%/.test(val)) {
+    } else if(/(px|em|pt|in|cm|mm|ex|pc|%)$/.test(val)) {
         return val.replace(/^.*(px|em|pt|in|cm|mm|ex|pc|%).*/, '$1');
     }
     return null;
@@ -1771,7 +1771,7 @@ NJCSSStyle.prototype.updateValue = function(newValue, bypassUndo) {
         this.styleChange();
         return true;
     }
-    
+
     var IMPORTANT_FLAG = ' !important',
         dec = this.njRule.declaration,        
         acceptAsValid = false,
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index 300462ee..679b88f3 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -67,10 +67,7 @@ var Layer = exports.Layer = Montage.create(Component, {
 
         /* Layer models: the name, ID, and selected and animation booleans for the layer */
     _layerName:{
-        serializable: true,
-        value:null,
-        writable:true,
-        enumerable:true
+        value: "Default Layer Name"
     },
     
     layerName:{
@@ -79,20 +76,17 @@ var Layer = exports.Layer = Montage.create(Component, {
             return this._layerName;
         },
         set:function(newVal){
-                if (newVal !== this._layerName) {
-                        this._layerEditable.value = newVal;
-                        this._layerName = newVal;
-                        this.layerData.layerName = newVal;
-                        this.log('layerName setter: ' + newVal)
-                }
-                
+
+                        this._layerEditable.value = newVal;
+                this._layerName = newVal;
+                this.layerData.layerName = newVal;
+                if (typeof(this.dynamicLayerName) !== "undefined") {
+                        this.dynamicLayerName.value = newVal;
+                }
         }
     },
     _layerID:{
-        value:null,
-        writable:true,
-        serializable: true,
-        enumerable:true
+        value: "Default Layer ID"
     },
 
     layerID:{
@@ -385,7 +379,7 @@ var Layer = exports.Layer = Montage.create(Component, {
                 return this._bypassAnimation;
         },
         set: function(newVal) {
-                if (newVal !== this._bypassAnimation) {
+                if ((newVal !== this._bypassAnimation) && (typeof(this.layerData) !== "undefined")) {
                         this._bypassAnimation = newVal;
                         this.layerData.bypassAnimation = newVal;        
                 }
@@ -410,16 +404,25 @@ var Layer = exports.Layer = Montage.create(Component, {
         set:function(val){
             this._layerData = val;
             if(this._layerData){
-                this.setData();
+                this.setData(true);
             }
         }
     },
 
     setData:{
-        value:function(){
-                if (typeof(this.layerData) === "undefined") {
+        value:function(boolNeedsDraw){
+                if (typeof(this._layerData) === "undefined")  {
+                        return;
+                } 
+                
+                if (typeof(this._layerData.layerName) === "undefined") {
                         return;
                 }
+                
+                if (typeof(boolNeedsDraw) === "undefined") {
+                        boolNeedsDraw = false;
+                }
+                
             this.layerName = this.layerData.layerName;
             this.layerID = this.layerData.layerID;
             this.arrLayerStyles = this.layerData.arrLayerStyles;
@@ -438,7 +441,7 @@ var Layer = exports.Layer = Montage.create(Component, {
             this.dtextScaleY = this.layerData.dtextScaleY;
             this.dtextRotate = this.layerData.dtextRotate;
             this._isFirstDraw = this.layerData._isFirstDraw;
-            this.needsDraw = true;
+            this.needsDraw = boolNeedsDraw;
         }
     },
     
@@ -455,7 +458,7 @@ var Layer = exports.Layer = Montage.create(Component, {
         set: function(newVal) {
                 if (newVal !== this._bindingPoint) {
                         this._bindingPoint = newVal;
-                        this.setData();
+                        this.setData(true);
                 }
         }
     },
@@ -478,8 +481,6 @@ var Layer = exports.Layer = Montage.create(Component, {
                 // Initialize myself
                         this.init();
                         
-                var that = this;
-
                 // Make it editable!
                 this._layerEditable = Hintable.create();
                 this._layerEditable.element = this.titleSelector;
@@ -495,7 +496,7 @@ var Layer = exports.Layer = Montage.create(Component, {
                 }, false);
                 this._layerEditable.editingClass = "editable2";
                 this._layerEditable.value = this.layerName;
-                this._layerEditable.needsDraw = true;
+                //this._layerEditable.needsDraw = true;
 
             this.mainCollapser.clicker.addEventListener("click", this.handleMainCollapserClick.bind(this), false);
             this.positionCollapser.clicker.addEventListener("click", this.handlePositionCollapserClick.bind(this), false);
@@ -511,7 +512,7 @@ var Layer = exports.Layer = Montage.create(Component, {
             this.element.addEventListener("mousedown", this, false);
             this.element.addEventListener("click", this, false);
             
-                        // Drag and drop event hanlders
+                        // Drag and drop event handlers
                         this.element.addEventListener("mouseover", this.handleMouseover.bind(this), false);
                         this.element.addEventListener("mouseout", this.handleMouseout.bind(this), false);
                         this.element.addEventListener("dragover", this.handleDragover.bind(this), false);
@@ -713,10 +714,6 @@ var Layer = exports.Layer = Montage.create(Component, {
                         this.deleteStyle();
                 }
         },
-        handleSelectorEditableClick: {
-                value: function(event) {
-                }
-        },
         handleSelectorEditableBlur : {
                 value: function(event) {
                 this.titleSelector.scrollLeft = 0;
@@ -724,7 +721,12 @@ var Layer = exports.Layer = Montage.create(Component, {
         },
         handleSelectorEditableChange: {
                 value: function(event) {
-                        this.layerName = this.dynamicLayerName.value;
+                        var newVal = "ONTD";
+                        if (this._layerEditable.value !== "") {
+                                newVal = this._layerEditable.value;
+                        }
+                        this.dynamicLayerName.value = newVal;
+                        this.layerName = newVal;
                         this.needsDraw = true;
                 }
         },
diff --git a/js/panels/Timeline/Layer.reel/css/Layer.css b/js/panels/Timeline/Layer.reel/css/Layer.css
index 8e36c2db..1aae8d67 100644
--- a/js/panels/Timeline/Layer.reel/css/Layer.css
+++ b/js/panels/Timeline/Layer.reel/css/Layer.css
@@ -139,7 +139,12 @@
   font-size: 11px;
 }
 
-/* line 130, ../scss/Layer.scss */
+/* line 132, ../scss/Layer.scss */
+.lab