7 files changed, 92 insertions, 28 deletions

diff --git a/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js b/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js
index 3cbd4369..003724bb 100755
--- a/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js
+++ b/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js
@@ -45,7 +45,7 @@ exports.PanelContainer = Montage.create(Component, {
     },
 
     initPanelOrder: {
-        value: ['PropertiesPanel','ColorPanel','ComponentsPanel','ProjectPanel','CSSPanel','MaterialsPanel','PresetsPanel']
+        value: ['ColorPanel', 'PropertiesPanel','ComponentsPanel','ProjectPanel','CSSPanel','MaterialsPanel','PresetsPanel']
     },
 
     panelOrder: {
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 6d23453d..ec9555fe 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -795,7 +795,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             if(this.currentLayerSelected.elementsList[0]!==undefined){
                 if(this.currentTrackSelected.isTrackAnimated){
                     this.application.ninja.stage.clearDrawingCanvas();
-                    alert("cannot add elements to a layer with animated element");/* check how to clear the canvas*/
+                    console.log("cannot add elements to a layer with animated element");
                     return;
                 }else{
                     this.hashElementMapToLayer.setItem(event.detail.uuid, event.detail,this.currentLayerSelected);
@@ -805,12 +805,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                 this.hashElementMapToLayer.setItem(event.detail.uuid, event.detail,this.currentLayerSelected);
                 this.currentLayerSelected.elementsList.push(event.detail);
             }
-
         }
     },
 
     handleElementDeleted:{
         value:function (event) {
+
             var length;
             this.deleteElement = event.detail;
             length = this.currentLayerSelected.elementsList.length - 1;
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index bf97c0fd..f8f4f6b8 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -459,7 +459,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
 
     retrieveStoredTweens:{
         value:function () {
-            var percentValue, fraction, splitValue,offsetAttribute,topOffSetAttribute,leftOffsetAttribute, i = 0;
+            var percentValue, fraction, splitValue,offsetAttribute,topOffSetAttribute,leftOffsetAttribute
+            var animationTiming,trackTiming,currentMilliSec,currentMilliSecPerPixel,clickPosition,i = 0;
 
             var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID);
             this.application.ninja.timeline.arrLayers[selectedIndex].created=true;
@@ -467,23 +468,24 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
             if(this.animatedElement!==undefined){
                 this.animationName = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-name");
                 if(this.animationName){
-                    this.animationDuration = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-duration");
-                    this.trackDuration = this.animationDuration.split("s");
-                    this.currentMilliSec = this.trackDuration[0] * 1000;
-                    this.currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80);
-                    this.clickPos = this.currentMilliSec / this.currentMillisecPerPixel;
+                    animationTiming = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-duration");
+                    trackTiming = animationTiming.split("s");
+                    currentMilliSec = trackTiming[0] * 1000;
+                    currentMilliSecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80);
+                    clickPosition = currentMilliSec / currentMilliSecPerPixel;
                     this.nextKeyframe = 0;
 
                     this.currentKeyframeRule = this.application.ninja.stylesController.getAnimationRuleWithName(this.animationName, this.application.ninja.currentDocument._document);
-                    while (this.currentKeyframeRule[i]) {
+
+                    for (i =0; this.currentKeyframeRule[i] ;i++) {
                         var newTween = {};
 
                         offsetAttribute = this.currentKeyframeRule[i].cssText.split(" ");
                         topOffSetAttribute = offsetAttribute[3].split("px");
                         leftOffsetAttribute = offsetAttribute[5].split("px");
 
-                        parseInt(topOffSetAttribute[0]);
-                        parseInt(leftOffsetAttribute[0]);
+                        var tempTopOffset = parseInt(topOffSetAttribute[0]);
+                        var tempLeftOffset =parseInt(leftOffsetAttribute[0]);
 
                         if (this.currentKeyframeRule[i].keyText === "0%") {
                             newTween.spanWidth = 0;
@@ -492,8 +494,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
                             newTween.tweenID = 0;
                             newTween.spanPosition = 0;
                             newTween.tweenedProperties = [];
-                            newTween.tweenedProperties["top"] = topOffSetAttribute[0];
-                            newTween.tweenedProperties["left"] = leftOffsetAttribute[0];
+                            newTween.tweenedProperties["top"] = tempTopOffset;
+                            newTween.tweenedProperties["left"] = tempLeftOffset;
                             this.tweens.push(newTween);
 
                         }
@@ -501,30 +503,26 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
                             percentValue = this.currentKeyframeRule[i].keyText;
                             splitValue = percentValue.split("%");
                             fraction = splitValue[0] / 100;
-                            this.currentMilliSec = fraction * this.trackDuration[0] * 1000;
-                            this.currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80);
-                            this.clickPos = this.currentMilliSec / this.currentMillisecPerPixel;
-                            newTween.spanWidth = this.clickPos - this.tweens[this.tweens.length - 1].keyFramePosition;
-                            newTween.keyFramePosition = this.clickPos;
-                            newTween.keyFrameMillisec = this.currentMilliSec;
+                            currentMilliSec = fraction * trackTiming[0] * 1000;
+                            currentMilliSecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80);
+                            clickPosition = currentMilliSec / currentMilliSecPerPixel;
+                            newTween.spanWidth = clickPosition - this.tweens[this.tweens.length - 1].keyFramePosition;
+                            newTween.keyFramePosition = clickPosition;
+                            newTween.keyFrameMillisec = currentMilliSec;
                             newTween.tweenID = this.nextKeyframe;
-                            newTween.spanPosition = this.clickPos - newTween.spanWidth;
+                            newTween.spanPosition =clickPosition - newTween.spanWidth;
                             newTween.tweenedProperties=[];
-                            newTween.tweenedProperties["top"] = topOffSetAttribute[0];
-                            newTween.tweenedProperties["left"] = leftOffsetAttribute[0];
+                            newTween.tweenedProperties["top"] = tempTopOffset;
+                            newTween.tweenedProperties["left"] = tempLeftOffset;
                             this.tweens.push(newTween);
 
 
                         }
-                        i++;
                         this.nextKeyframe += 1;
                     }
                     this.isTrackAnimated = true;
                 }
             }
-            else{
-                return;
-            }
         }
     },
 
diff --git a/js/panels/properties/content.reel/content.js b/js/panels/properties/content.reel/content.js
index 8fa33a75..72c02ffd 100755
--- a/js/panels/properties/content.reel/content.js
+++ b/js/panels/properties/content.reel/content.js
@@ -55,6 +55,7 @@ exports.Content = Montage.create(Component, {
             }
 
             this.eventManager.addEventListener("openDocument", this, false);
+            this.eventManager.addEventListener("switchDocument", this, false);
         }
     },
 
@@ -74,6 +75,21 @@ exports.Content = Montage.create(Component, {
         }
     },
 
+    handleSwitchDocument: {
+        value: function(){
+            // For now always assume that the stage is selected by default
+            if(this.application.ninja.selectedElements.length === 0) {
+                this.displayStageProperties();
+            }else {
+                if(this.application.ninja.selectedElements.length === 1) {
+                    this.displayElementProperties(this.application.ninja.selectedElements[0]._element);
+                } else {
+                    this.displayGroupProperties(this.application.ninja.selectedElements);
+                }