3 files changed, 49 insertions, 38 deletions

diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index d65d031f..e561e45d 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -82,8 +82,8 @@ var Layer = exports.Layer = Montage.create(Component, {
                 if (newVal !== this._layerName) {
                         this._layerEditable.value = newVal;
                         this._layerName = newVal;
-                        this._layerEditable.needsDraw = true;
-                        this.needsDraw = true;
+                        //this._layerEditable.needsDraw = true;
+                        //this.needsDraw = true;
                 }
                 
         }
@@ -119,7 +119,7 @@ var Layer = exports.Layer = Montage.create(Component, {
         set:function(value){
                 if (this._dtextPositionX !== value) {
                         this._dtextPositionX = value;
-                        this.needsDraw = true;
+                        //this.needsDraw = true;
                 }
             
         }
@@ -138,7 +138,7 @@ var Layer = exports.Layer = Montage.create(Component, {
         set:function(value){
                 if (this._dtextPositionY !== value) {
                         this._dtextPositionY = value;
-                        this.needsDraw = true;
+                        //this.needsDraw = true;
                 }
             
         }
@@ -157,7 +157,7 @@ var Layer = exports.Layer = Montage.create(Component, {
         set:function(value){
                 if (this._dtextScaleX !== value) {
                         this._dtextScaleX = value;
-                        this.needsDraw = true;
+                        //this.needsDraw = true;
                 }
             
         }
@@ -176,7 +176,7 @@ var Layer = exports.Layer = Montage.create(Component, {
         set:function(value){
                 if (this._dtextScaleY !== value) {
                         this._dtextScaleY = value;
-                        this.needsDraw = true;
+                        //this.needsDraw = true;
                 }
             
         }
@@ -195,7 +195,7 @@ var Layer = exports.Layer = Montage.create(Component, {
         set:function(value){
                 if (this._dtextSkewX !== value) {
                         this._dtextSkewX = value;
-                        this.needsDraw = true;
+                        //this.needsDraw = true;
                 }
             
         }
@@ -214,7 +214,7 @@ var Layer = exports.Layer = Montage.create(Component, {
         set:function(value){
                 if (this._dtextSkewY !== value) {
                         this._dtextSkewY = value;
-                        this.needsDraw = true;
+                        //this.needsDraw = true;
                 }
             
         }
@@ -233,7 +233,7 @@ var Layer = exports.Layer = Montage.create(Component, {
         set:function(value){
                 if (this._dtextRotate !== value) {
                         this._dtextRotate = value;
-                        this.needsDraw = true;
+                        //this.needsDraw = true;
                 }
             
         }
@@ -259,7 +259,7 @@ var Layer = exports.Layer = Montage.create(Component, {
                                 this.selectStyle(false);
                         }
                         this._isSelected = value;
-                        this.needsDraw = true;
+                        //this.needsDraw = true;
                 }
             
         }
@@ -332,7 +332,7 @@ var Layer = exports.Layer = Montage.create(Component, {
         set: function(newVal) {
                 if (newVal !== this._isTransformCollapsed) {
                         this._isTransformCollapsed = newVal;
-                        this.needsDraw = true;
+                        //this.needsDraw = true;
                 }
         }
     },
@@ -349,7 +349,7 @@ var Layer = exports.Layer = Montage.create(Component, {
         set: function(newVal) {
                 if (newVal !== this._isPositionCollapsed) {
                         this._isPositionCollapsed = newVal;
-                        this.needsDraw = true;
+                        //this.needsDraw = true;
                 }
         }
     },
@@ -366,7 +366,7 @@ var Layer = exports.Layer = Montage.create(Component, {
         set: function(newVal) {
                 if (newVal !== this._isStyleCollapsed) {
                         this._isStyleCollapsed = newVal;
-                        this.needsDraw = true;
+                        //this.needsDraw = true;
                 }
         }
     },
@@ -422,6 +422,7 @@ var Layer = exports.Layer = Montage.create(Component, {
             this.dtextScaleX = this.layerData.dtextScaleX;
             this.dtextScaleY = this.layerData.dtextScaleY;
             this.dtextRotate = this.layerData.dtextRotate;
+            this.needsDraw = true;
         }
     },
 
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index b12183f2..0185d448 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -276,6 +276,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false);
             this.user_layers.addEventListener("scroll", this.updateLayerScroll.bind(this), false);
             this.end_hottext.addEventListener("changing", this.updateTrackContainerWidth.bind(this), false);
+            this.playhead.addEventListener("mousedown", this.startPlayheadTracking.bind(this), false);
+            this.playhead.addEventListener("mouseup", this.stopPlayheadTracking.bind(this), false);
+            this.time_markers.addEventListener("click", this.updatePlayhead.bind(this), false);
                 }
         },
         
@@ -410,6 +413,29 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
         }
     },
 
+    startPlayheadTracking:{
+        value:function(){
+            this.time_markers.onmousemove = this.updatePlayhead.bind(this);
+        }
+    },
+
+    stopPlayheadTracking:{
+        value:function () {
+            this.time_markers.onmousemove = null;
+        }
+    },
+
+    updatePlayhead:{
+        value:function (event) {
+            var clickedPosition = event.target.offsetLeft + event.offsetX;
+            this.playhead.style.left = (clickedPosition - 2) + "px";
+            this.playheadmarker.style.left = clickedPosition + "px";
+            var currentMillisecPerPixel = Math.floor(this.millisecondsOffset / 80);
+            var currentMillisec = currentMillisecPerPixel * clickedPosition;
+            this.updateTimeText(currentMillisec);
+        }
+    },
+
     handleSelectionChange:{
         value:function(){
             var key , switchSelectedLayer,layerIndex;
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index 17e50789..18df20c2 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -27,7 +27,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
         },
         set:function (value) {
             this._trackID = value;
-            this.needsDraw = true;
+            //this.needsDraw = true;
         }
     },
 
@@ -114,7 +114,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
         },
         set: function(newVal) {
                 this._arrStyleTracks = newVal;
-                this.needsDraw = true;
+                //this.needsDraw = true;
         }
     },
     _styleTracksRepetition: {
@@ -128,7 +128,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {