3 files changed, 803 insertions, 891 deletions

diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js
index b6623dcd..c46ae8c9 100644
--- a/js/panels/Timeline/Keyframe.reel/Keyframe.js
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js
@@ -133,6 +133,10 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
             this.application.ninja.timeline.playheadmarker.style.left = this.timelinePosition + "px";
             this.application.ninja.timeline.selectedKeyframes.push(this);
 
+            var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80);
+            var currentMillisec = currentMillisecPerPixel * this.timelinePosition;
+            this.application.ninja.timeline.updateTimeText(currentMillisec);
+
             var currentTop = this.animatedProperties["top"] + "px";
             var currentLeft = this.animatedProperties["left"] + "px";
 
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index c21fa22b..6f0b0b58 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -4,51 +4,49 @@ var Layer = require("js/panels/Timeline/Layer.reel").Layer;
 var TimelineTrack = require("js/panels/Timeline/TimelineTrack.reel").TimelineTrack;
 var nj = require("js/lib/NJUtils").NJUtils;
 
-// var Track = require("js/panels/Timeline/Track.reel").Track;
-
 var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
 
-    hasTemplate: {
-        value: true
+    hasTemplate:{
+        value:true
     },
-   
+
     /* === BEGIN: Models === */
-   
+
     // Layer models: arrays for the data and repetition,  current layer number,
-    _arrLayers : {
-        value: []
+    _arrLayers:{
+        value:[]
     },
-    arrLayers: {
-        get: function() {
+    arrLayers:{
+        get:function () {
             return this._arrLayers;
         },
-        set: function(newVal) {
+        set:function (newVal) {
             this._arrLayers = newVal;
         }
     },
-   
-    _layerRepetition: {
-        value: null
+
+    _layerRepetition:{
+        value:null
     },
-    layerRepetition: {
-        get: function() {
+    layerRepetition:{
+        get:function () {
             return this._layerRepetition;
         },
-        set: function(newVal) {
+        set:function (newVal) {
             this._layerRepetition = newVal;
         }
     },
-        _currentLayerNumber: {
-                value: 0
-        },
+    _currentLayerNumber:{
+        value:0
+    },
     currentLayerNumber:{
-        get: function() {
-                return this._currentLayerNumber;
+        get:function () {
+            return this._currentLayerNumber;
         },
-        set: function(newVal) {
-                if (newVal !== this._currentLayerNumber) {
-                        this._currentLayerNumber = newVal;
-                }
+        set:function (newVal) {
+            if (newVal !== this._currentLayerNumber) {
+                this._currentLayerNumber = newVal;
+            }
         }
     },
 
@@ -57,29 +55,29 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
     },
 
     // Track model
-    _arrTracks: {
-        serializable: true,
-        value: []
+    _arrTracks:{
+        serializable:true,
+        value:[]
     },
-    arrTracks: {
-        serializable: true,
-        get: function() {
+    arrTracks:{
+        serializable:true,
+        get:function () {
             return this._arrTracks;
         },
-        set: function(newVal) {
+        set:function (newVal) {
             this._arrTracks = newVal;
         }
     },
-    _trackRepetition: {
-        serializable: true,
-        value: null
+    _trackRepetition:{
+        serializable:true,
+        value:null
     },
-    trackRepetition : {
-        serializable: true,
-        get: function() {
+    trackRepetition:{
+        serializable:true,
+        get:function () {
             return this._trackRepetition;
         },
-        set: function(newVal) {
+        set:function (newVal) {
             this._trackRepetition = newVal;
         }
     },
@@ -100,28 +98,28 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
 
 
     /* === END: Models === */
-   
+
     /* === BEGIN: Draw cycle === */
 
-    prepareForDraw: {
-        value: function() {
+    prepareForDraw:{
+        value:function () {
 
             this.eventManager.addEventListener("deleteLayerClick", this, false);
             this.eventManager.addEventListener("newLayer", this, false);
             this.eventManager.addEventListener("deleteLayer", this, false);
-            this.eventManager.addEventListener( "layerBinding", this, false);
+            this.eventManager.addEventListener("layerBinding", this, false);
             this.eventManager.addEventListener("elementAdded", this, false);
             this.eventManager.addEventListener("elementDeleted", this, false);
             this.eventManager.addEventListener("deleteSelection", this, false);
-            this.hashInstance=this.createLayerHashTable();
-            this.hashTrackInstance=this.createTrackHashTable();
+            this.hashInstance = this.createLayerHashTable();
+            this.hashTrackInstance = this.createTrackHashTable();
             this.hashLayerNumber = this.createLayerNumberHash();
             this.initTimelineView();
         }
     },
 
-    _isLayer: {
-        value: false
+    _isLayer:{
+        value:false
     },
 
     _firstTimeLoaded:{
@@ -134,11 +132,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
         writable:true
     },
 
-    willDraw: {
-        value: function() {
+    willDraw:{
+        value:function () {
             if (this._isLayer) {
                 this.insertLayer();
-                this._isLayer = false;;
+                this._isLayer = false;
             }
         }
     },
@@ -146,21 +144,20 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
     /* === END: Draw cycle === */
 
     /* === BEGIN: Controllers === */
-   
-    // Initialize the timeline
-    initTimelineView : {
+
+    initTimelineView:{
+        value:function () {