6 files changed, 143 insertions, 127 deletions

diff --git a/css/ninja.css b/css/ninja.css
index 4d450208..f085f6be 100755
--- a/css/ninja.css
+++ b/css/ninja.css
@@ -212,6 +212,10 @@ body { position: absolute; margin: 0px; width: 100%; height: 100%; background-co
 
 #mainContent .CodeMirror-scroll { height: 100%; overflow: scroll; overflow-x: auto; overflow-y: auto; }
 
+.montage-editor-frame { position: absolute; z-index: 7; top: 0; left: 0; display: none; -webkit-user-select: initial; }
+
+.montage-editor { padding: 0px; word-wrap: normal; }
+
 .panelContainer { margin: 0px; padding: 0px 0px; position: relative; overflow: auto; }
 
 .panelDisclosureIcon { background-image: url("../images/panels/panelDisclosureIcon.png"); background-repeat: no-repeat; width: 16px; height: 16px; float: left; -webkit-transition-property: rotate; -webkit-transition-duration: 0.2s; -webkit-transition-timing-function: linear; padding-right: 2px; }
@@ -888,49 +892,34 @@ input[type="radio"]:disabled { opacity: .3; background: #282828; border-width: 1
 /*width: 26px;*/
 /*opacity: 0.7;*/
 /*}*/
-/*//  Selection Tool Options  */
-/*.topAlignUp {*/
-/*@include background-pos(8,2,26px,23px);*/
-/*}*/
-/*.rightAlignUp {*/
-/*@include background-pos(9,2,26px,23px);*/
-/*}*/
-/*.bottomAlignUp {*/
-/*@include background-pos(10,2,26px,23px);*/
-/*}*/
-/*.verticalLeftUp {*/
-/*@include background-pos(11,2,26px,23px);*/
-/*}*/
-/*.verticalCenterUp {*/
-/*@include background-pos(12,2,26px,23px);*/
-/*}*/
-/*.verticalRightUp {*/
-/*@include background-pos(13,2,26px,23px);*/
-/*}*/
-/*.distRightUp {*/
-/*@include background-pos(0,3,26px,23px);*/
-/*}*/
-/*.distLeftUp {*/
-/*@include background-pos(14,2,26px,23px);*/
-/*}*/
-/*.distCenterUp {*/
-/*@include background-pos(2,3,26px,23px);*/
-/*}*/
-/*.distTopUp {*/
-/*@include background-pos(1,3,26px,23px);*/
-/*}*/
-/*.distBottomUp {*/
-/*@include background-pos(3,3,26px,23px);*/
-/*}*/
-/*.distVCenterUp {*/
-/*@include background-pos(15,2,26px,23px);*/
-/*}*/
-/*.bucketToolUp {*/
-/*@include background-pos(11,0,26px,23px);*/
-/*}*/
-/*.pencilToolUp {*/
-/*@include background-pos(9,1,26px,23px);*/
-/*}*/
+.topAlignUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -240px -54px; background-repeat: no-repeat; height: 23px; width: 26px; }
+
+.rightAlignUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -270px -54px; background-repeat: no-repeat; height: 23px; width: 26px; }
+
+.bottomAlignUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -300px -54px; background-repeat: no-repeat; height: 23px; width: 26px; }
+
+.verticalLeftUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -330px -54px; background-repeat: no-repeat; height: 23px; width: 26px; }
+
+.verticalCenterUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -360px -54px; background-repeat: no-repeat; height: 23px; width: 26px; }
+
+.verticalRightUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -390px -54px; background-repeat: no-repeat; height: 23px; width: 26px; }
+
+.distRightUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: 0px -81px; background-repeat: no-repeat; height: 23px; width: 26px; }
+
+.distLeftUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -420px -54px; background-repeat: no-repeat; height: 23px; width: 26px; }
+
+.distCenterUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -60px -81px; background-repeat: no-repeat; height: 23px; width: 26px; }
+
+.distTopUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -30px -81px; background-repeat: no-repeat; height: 23px; width: 26px; }
+
+.distBottomUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -90px -81px; background-repeat: no-repeat; height: 23px; width: 26px; }
+
+.distVCenterUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -450px -54px; background-repeat: no-repeat; height: 23px; width: 26px; }
+
+.bucketToolUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -330px 0px; background-repeat: no-repeat; height: 23px; width: 26px; }
+
+.pencilToolUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -270px -27px; background-repeat: no-repeat; height: 23px; width: 26px; }
+
 .blueDiv { background: blue; opacity: 0.2; }
 
 ::-webkit-scrollbar { width: 11px; height: 11px; }
diff --git a/js/controllers/document-controller.js b/js/controllers/document-controller.js
index fa611de4..1c9d9d59 100755
--- a/js/controllers/document-controller.js
+++ b/js/controllers/document-controller.js
@@ -84,8 +84,13 @@ var DocumentController = exports.DocumentController = Montage.create(Component,
         //
     handleAppLoaded: {
         value: function() {
-            //Adding an intercept to resources loaded to ensure user assets load from cloud simulator
-            if (window.chrome.app.isInstalled) {
+            //Checking for app to be loaded through extension
+            var check;
+            if (chrome && chrome.app) {
+                check = chrome.app.getDetails();
+            }
+            if (check !== null) {
+                //Adding an intercept to resources loaded to ensure user assets load from cloud simulator
                 chrome.webRequest.onBeforeRequest.addListener(this.handleWebRequest.bind(this), {urls: ["<all_urls>"]}, ["blocking"]);
             }
         }
diff --git a/js/mediators/keyboard-mediator.js b/js/mediators/keyboard-mediator.js
index 0282060f..a4bf9baa 100755
--- a/js/mediators/keyboard-mediator.js
+++ b/js/mediators/keyboard-mediator.js
@@ -162,15 +162,17 @@ exports.KeyboardMediator = Montage.create(Component, {
                     return;
                 }
 
+                // Hand tool
                 if(evt.keyCode === Keyboard.H ) {
                     evt.preventDefault();
-                    this.application.ninja.handleSelectTool({"detail": this.application.ninja.toolsData.defaultToolsData[15]});
+                    this.application.ninja.handleSelectTool({"detail": this.application.ninja.toolsData.defaultToolsData[13]});
                     return;
                 }
 
+                // Zoom tool
                 if(evt.keyCode === Keyboard.Z ) {
                     evt.preventDefault();
-                    this.application.ninja.handleSelectTool({"detail": this.application.ninja.toolsData.defaultToolsData[16]});
+                    this.application.ninja.handleSelectTool({"detail": this.application.ninja.toolsData.defaultToolsData[14]});
                     return;
                 }
 
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index fddfd170..61da9e36 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -358,9 +358,11 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
 
     didDraw:{
         value:function () {
-            if (this._openDocRedrawCheck) {
-                this.retrieveStoredTweens();
-                this._openDocRedrawCheck = false;
+            if(this.application.ninja.currentDocument.documentRoot.children[0]){
+                if (this._openDocRedrawCheck) {
+                    this.retrieveStoredTweens();
+                    this._openDocRedrawCheck = false;
+                }
             }
         }
     },
@@ -459,42 +461,48 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
             this.animatedElement = this.application.ninja.timeline.arrLayers[this.trackID - 1].elementsList[0];
             this.animationName = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-name");
             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;
-            this.nextKeyframe = 0;
-
-            this.currentKeyframeRule = this.application.ninja.stylesController.getAnimationRuleWithName(this.animationName, this.application.ninja.currentDocument._document);
-            while (this.currentKeyframeRule[i]) {
-                var newTween = {};
-                if (this.currentKeyframeRule[i].keyText === "0%") {
-                    newTween.spanWidth = 0;
-                    newTween.keyFramePosition = 0;
-                    newTween.keyFrameMillisec = 0;
-                    newTween.tweenID = 0;
-                    newTween.spanPosition = 0;
-                    this.tweens.push(newTween);
+            if(this.animationDuration){
+                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;
+                this.nextKeyframe = 0;
+
+                this.currentKeyframeRule = this.application.ninja.stylesController.getAnimationRuleWithName(this.animationName, this.application.ninja.currentDocument._document);
+                while (this.currentKeyframeRule[i]) {
+                    var newTween = {};
+
+                    if (this.currentKeyframeRule[i].keyText === "0%") {
+                        newTween.spanWidth = 0;
+                        newTween.keyFramePosition = 0;
+                        newTween.keyFrameMillisec = 0;
+                        newTween.tweenID = 0;
+                        newTween.spanPosition = 0;
+                        this.tweens.push(newTween);
 
-                }
-                else {
-                    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;
-                    newTween.tweenID = this.nextKeyframe;
-                    newTween.spanPosition = this.clickPos - newTween.spanWidth;
-                    this.tweens.push(newTween);
+                    }
+                    else {
+                        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;
+                        newTween.tweenID = this.nextKeyframe;
+                        newTween.spanPosition = this.clickPos - newTween.spanWidth;
+                        this.tweens.push(newTween);
 
 
+                    }
+                    i++;