21 files changed, 2067 insertions, 1181 deletions

diff --git a/.gitignore b/.gitignore
index 6192b556..42e99c16 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,3 +22,4 @@ compass_app_log.txt
 js/io/ui/cloudpopup.reel/.sass-cache/5fd824121af95f6044b06681535cf0639ffb5db3/cloudpopup.scssc
 scss/.sass-cache/
 js/helper-classes/RDGE/src/tools/compiler.jar
+js/panels/Timeline/TimelinePanel.reel/scss/compass_app_log.txt
diff --git a/images/transparent.png b/images/transparent.png
new file mode 100644
index 00000000..c1411593
--- /dev/null
+++ b/images/transparent.png
diff --git a/js/components/editable.reel/editable.js b/js/components/editable.reel/editable.js
index 9c8946c4..dad93b31 100644
--- a/js/components/editable.reel/editable.js
+++ b/js/components/editable.reel/editable.js
@@ -38,6 +38,7 @@ exports.Editable = Montage.create(Component, {
         set : function(el) {
             this._element = el;
             this._element.addEventListener('keydown', this, false);
+            this._element.addEventListener('keyup', this, false);
             this._element.addEventListener('input', this, false);
             
             if(this.startOnEvent) {
@@ -115,12 +116,15 @@ exports.Editable = Montage.create(Component, {
                 ///// Save the preEditValue
                 this._preEditValue = this.value;
                 
+                // Initialize enteredValue with current value
+                this.enteredValue = this.value;
+                
                 if(this.selectOnStart) {
                     this.selectAll();
                 }
                 
                 if(this.stopOnBlur) {
-                    console.log('adding mousedown event listener');
+                    //console.log('adding mousedown event listener');
                     ///// Simulate blur on editable node by listening to the doc
                     document.addEventListener('mouseup', this, false);
                 }
@@ -189,7 +193,13 @@ exports.Editable = Montage.create(Component, {
     handleKeydown : {
         value : function(e) {
             var k = e.keyCode;
-            console.log('keyCode:  ' + k);
+        }
+    },
+    
+    handleKeyup : {
+        value : function(e) {
+            // Record change in value
+            this.enteredValue = this._element.firstChild.data;
         }
     },
     ///// Text input has changed values
@@ -204,7 +214,7 @@ exports.Editable = Montage.create(Component, {
     },
     handleMouseup : {
         value : function(e) {
-            console.log('handle mouse down');
+            //console.log('handle mouse down');
             ///// Listen for simulated blur event
             if(this.stopOnBlur && e._event.target !== this._element) {
                 this.blur();
@@ -213,7 +223,7 @@ exports.Editable = Montage.create(Component, {
     },
     handleEvent : {
         value : function(e) {
-            console.log("event type : " + e._event.type);
+            //console.log("event type : " + e._event.type);
             ///// If configured, start on specified event
             if(e._event.type === this.startOnEvent) {
                 this.start();
diff --git a/js/components/hintable.reel/hintable.js b/js/components/hintable.reel/hintable.js
index 5ed46b3c..6e3b2aaf 100644
--- a/js/components/hintable.reel/hintable.js
+++ b/js/components/hintable.reel/hintable.js
@@ -90,10 +90,10 @@ exports.Hintable = Montage.create(Editable, {
     hintNext : {
         value : function(e) {
             if(e) { e.preventDefault(); }
-                console.log('next1');
+                //console.log('next1');
             
             if(this._matchIndex < this.matches.length - 1) {
-                console.log('next');
+                //console.log('next');
                 ++this._matchIndex;
                 this.hint = this._getHintDifference();
             }
@@ -102,9 +102,9 @@ exports.Hintable = Montage.create(Editable, {
     hintPrev : {
         value : function(e) {
             if(e) { e.preventDefault(); }
-                console.log('prev1');
+                //console.log('prev1');
             if(this._matchIndex !== 0) {
-                console.log('prev');
+                //console.log('prev');
                 --this._matchIndex;
                 this.hint = this._getHintDifference();
             }
@@ -135,7 +135,7 @@ exports.Hintable = Montage.create(Editable, {
                 /// revert to old value
                 this.value = (this._preEditValue);
                 this._sendEvent('revert');
-                console.log('reverting');
+                //console.log('reverting');
                 
             }
         }
@@ -157,6 +157,14 @@ exports.Hintable = Montage.create(Editable, {
                 
             this._super(arguments);
             
+                        /// Remove the phantom "<BR>" element that is generated when 
+                        /// content editable element is empty
+                        this._children(this._element, function(item) { 
+                            return item.nodeName === 'BR';
+                        }).forEach(function(item) {
+                            this._element.removeChild(item);
+                        }, this);
+            
             if(k === 39) {
                 selection = window.getSelection();
                 text = selection.baseNode.textContent;
@@ -180,7 +188,7 @@ exports.Hintable = Montage.create(Editable, {
             
             var val = this.value,
                  matches, hint;
-            console.log('val = "' + val + '"');
+            //console.log('val = "' + val + '"');
             //// Handle auto-suggest if configured
             if(this.hints instanceof Array) {
 
diff --git a/js/components/layout/bread-crumb.reel/bread-crumb.js b/js/components/layout/bread-crumb.reel/bread-crumb.js
index f35972b6..faf5e2f8 100755
--- a/js/components/layout/bread-crumb.reel/bread-crumb.js
+++ b/js/components/layout/bread-crumb.reel/bread-crumb.js
@@ -23,6 +23,7 @@ exports.Breadcrumb = Montage.create(Component, {
         value: function(){
             if(!this.application.ninja.documentController.activeDocument) {
                 this.disabled = true;
+                this.application.ninja.currentSelectedContainer = this.application.ninja.currentDocument.documentRoot;
             }
         }
     },
@@ -70,7 +71,7 @@ exports.Breadcrumb = Montage.create(Component, {
 
             // This is always the top container which is now hardcoded to body
             this.containerElements.unshift({"node": parentNode, "nodeUuid":parentNode.uuid, "label": "Body"});
-
+            NJevent("breadCrumbBinding",this)
 
 
         }
@@ -79,6 +80,7 @@ exports.Breadcrumb = Montage.create(Component, {
     handleAction: {
         value: function(evt) {
 
+           this.application.ninja.currentDocument.breadCrumbClick=true;
             if(evt.target.value === this.container.uuid) {
                 return;
             }
diff --git a/js/panels/Timeline/DragDrop.js b/js/panels/Timeline/DragDrop.js
new file mode 100644
index 00000000..55ee3ab4
--- /dev/null
+++ b/