6 files changed, 60 insertions, 34 deletions

diff --git a/css/ninja.css b/css/ninja.css
index 605951e4..650f3b08 100755
--- a/css/ninja.css
+++ b/css/ninja.css
@@ -80,7 +80,7 @@ body { position: absolute; margin: 0px; width: 100%; height: 100%; background-co
 
 #topPanelContainer { overflow: hidden; margin-bottom: 2px; height: 32px; }
 
-.timelinePanel { background: transparent; height: 150px; min-height: 46px; max-height: 50%; overflow: auto; }
+.timelinePanel { background: transparent; height: 150px; min-height: 46px; max-height: 50%; overflow: auto; -webkit-transition: all 0.15s linear; }
 
 .panelContainer { display: -webkit-box; -webkit-box-orient: vertical; position: relative; }
 
@@ -604,7 +604,7 @@ button.panel-button { -webkit-appearance: none; font-size: 9px; color: white; ba
 
 .pp_strokelabel { border: none; margin: -1px 8px 0px 27px; }
 
-.pp_filllabel { border-width: none; margin: -1px 8px 0px 34px; }
+.pp_filllabel { border: none; margin: -1px 8px 0px 34px; }
 
 .panels { display: -webkit-box; position: absolute; -webkit-box-orient: vertical; -webkit-box-align: stretch; height: 100%; width: 100%; overflow: hidden; }
 
diff --git a/js/ninja.reel/ninja.js b/js/ninja.reel/ninja.js
index 9cbbc9b9..9b5081dd 100755
--- a/js/ninja.reel/ninja.js
+++ b/js/ninja.reel/ninja.js
@@ -25,7 +25,7 @@ exports.Ninja = Montage.create(Component, {
     },
 
     _isResizing: {
-        value: false
+        value: null
     },
     _resizedHeight : {
         value: 0
@@ -36,11 +36,18 @@ exports.Ninja = Montage.create(Component, {
 
     height: {
         get: function() {
+            if(this._height === null) {
+                var storedData = this.application.localStorage.getItem("timelinePanel");
+                if(storedData && storedData.value) {
+                    this._height = storedData.value;
+                }
+            }
             return this._height;
         },
         set: function(val) {
             if(this._height != val) {
                 this._height = val;
+                this.application.localStorage.setItem("timelinePanel", {"version": this.version, "value": val});
                 this.needsDraw = true;
             }
 
@@ -56,11 +63,18 @@ exports.Ninja = Montage.create(Component, {
 
     width: {
         get: function() {
+            if(this._width === null) {
+                var storedData = this.application.localStorage.getItem("rightPanelsContainer");
+                if(storedData && storedData.value) {
+                    this._width = storedData.value;
+                }
+            }
             return this._width;
         },
         set: function(val) {
             if(this._width != val) {
                 this._width = val;
+                this.application.localStorage.setItem("rightPanelsContainer", {"version": this.version, "value": val});
                 this.needsDraw = true;
             }
 
@@ -72,6 +86,8 @@ exports.Ninja = Montage.create(Component, {
             this.isResizing = true;
             this.height = parseInt(this.timeline.element.offsetHeight);
             this.width = parseInt(this.rightPanelContainer.offsetWidth);
+            this.rightPanelContainer.classList.add("disableTransition");
+            this.timeline.element.classList.add("disableTransition");
             this.needsDraw = true;
         }
     },
@@ -80,7 +96,6 @@ exports.Ninja = Montage.create(Component, {
         value:function(e) {
             this._resizedHeight = e._event.dY;
             this._resizedWidth = e._event.dX;
-            console.log("resizing");
             this.stage.resizeCanvases = true;
             this.needsDraw = true;
         }
@@ -88,13 +103,17 @@ exports.Ninja = Montage.create(Component, {
 
     handleResizeEnd: {
         value: function(e) {
-            this.height -= this._resizedHeight;
-            this.width -= this._resizedWidth;
+//            this.height -= this._resizedHeight;
+//            this.width -= this._resizedWidth;
             this.stage.resizeCanvases = true;
             this._resizedHeight = 0;
             this._resizedWidth = 0;
             this.isResizing = false;
             this.needsDraw = true;
+            this.rightPanelContainer.classList.remove("disableTransition");
+            this.timeline.element.classList.remove("disableTransition");
+            this.height = this.timeline.element.offsetHeight;
+            this.width = this.rightPanelContainer.offsetWidth;
         }
     },
 
@@ -104,9 +123,10 @@ exports.Ninja = Montage.create(Component, {
             this.height = 140;
             this._resizedHeight = 0;
             this._resizedWidth = 0;
-            this.needsDraw = true;
             this.timelineSplitter.collapsed = false;
             this.panelSplitter.collapsed = false;
+            this.stage.resizeCanvases = true;
+            this.needsDraw = true;
         }
     },
 
@@ -167,30 +187,28 @@ exports.Ninja = Montage.create(Component, {
 
     willDraw: {
         value: function() {
-            if (this.height === null) {
-                this.height = parseInt(this.timeline.element.offsetHeight);
-            }
-            if (this.width === null) {
-                this.width = parseInt(this.rightPanelContainer.offsetWidth);
-            }
+
         }
     },
 
     draw: {
         value: function() {
-            if (this.height - this._resizedHeight < 46) {
-                this.timelineSplitter.collapsed = true;
-            } else {
-                this.timelineSplitter.collapsed = false;
-            }
-            if (this.width - this._resizedWidth < 30) {
-                this.panelSplitter.collapsed = true;
-            } else {
-                this.panelSplitter.collapsed = false;
-            }
+            if(this.isResizing) {
+                if (this.height - this._resizedHeight < 46) {
+                    this.timelineSplitter.collapsed = true;
+                } else {
+                    this.timelineSplitter.collapsed = false;
+                }
 
-            this.timeline.element.style.height = (this.height - this._resizedHeight) + "px";
-            this.rightPanelContainer.style.width = (this.width - this._resizedWidth) + "px";
+                if (this.width - this._resizedWidth < 30) {
+                    this.panelSplitter.collapsed = true;
+                } else {
+                    this.panelSplitter.collapsed = false;
+                }
+
+            }
+                this.rightPanelContainer.style.width = (this.width - this._resizedWidth) + "px";
+                this.timeline.element.style.height = (this.height - this._resizedHeight) + "px";
         }
     },
 
@@ -200,10 +218,7 @@ exports.Ninja = Montage.create(Component, {
     
     didDraw: {
         value: function() {
-            if (!this.isResizing) {
-                this.height = this.timeline.element.offsetHeight;
-                this.width = this.rightPanelContainer.offsetWidth;
-            }
+
             if(!this._didDraw) {
                 if (!this.application.ninja.coreIoApi.ioServiceDetected) {
                         var check = this.application.ninja.coreIoApi.cloudAvailable();
diff --git a/js/panels/Splitter.js b/js/panels/Splitter.js
index 6791e0d5..ac45b4ba 100755
--- a/js/panels/Splitter.js
+++ b/js/panels/Splitter.js
@@ -94,7 +94,11 @@ exports.Splitter = Montage.create(Component, {
     handleClick : {
         value: function() {
             if (!this.disabled) {
-                this.panel.addEventListener("webkitTransitionEnd", this, false);
+                if(this.panel.element) {
+                    this.panel.element.addEventListener("webkitTransitionEnd", this, false);
+                } else {
+                    this.panel.addEventListener("webkitTransitionEnd", this, false);
+                }
                 this.collapsed = !this.collapsed;
                 this.needsDraw = true;
             }
@@ -103,7 +107,12 @@ exports.Splitter = Montage.create(Component, {
 
     handleWebkitTransitionEnd: {
         value: function() {
-            this.panel.removeEventListener("webkitTransitionEnd", this, false);
+            if(this.panel.element) {
+                this.panel.element.removeEventListener("webkitTransitionEnd", this, false);
+            } else {
+                this.panel.removeEventListener("webkitTransitionEnd", this, false);
+            }
+
             this.application.ninja.stage.resizeCanvases = true;
         }
     },
diff --git a/js/panels/drag-drop-composer.js b/js/panels/drag-drop-composer.js
index b36c8334..4791bd6d 100644
--- a/js/panels/drag-drop-composer.js
+++ b/