42 files changed, 3271 insertions, 23 deletions

diff --git a/js/components/editable.reel/editable.js b/js/components/editable.reel/editable.js
index 9c8946c4..1ebe33f1 100644
--- a/js/components/editable.reel/editable.js
+++ b/js/components/editable.reel/editable.js
@@ -122,7 +122,7 @@ exports.Editable = Montage.create(Component, {
                 if(this.stopOnBlur) {
                     console.log('adding mousedown event listener');
                     ///// Simulate blur on editable node by listening to the doc
-                    document.addEventListener('mouseup', this, false);
+                    document.addEventListener('mousedown', this, false);
                 }
                 
                 this._sendEvent('start');
@@ -131,11 +131,11 @@ exports.Editable = Montage.create(Component, {
         }
     },
     stop : {
-        value: function() {
+        value: function(eventData) {
             this._isEditable = this._element.contentEditable = false;
             this._element.classList.remove(this.editingClass);
             
-            this._sendEvent('stop');
+            this._sendEvent('stop', eventData);
             
             ///// if value is different than pre-edit val, call onchange method
             if(this._preEditValue !== this.value) {
@@ -174,12 +174,12 @@ exports.Editable = Montage.create(Component, {
         }
     },
     blur : {
-        value : function() {
+        value : function(eventData) {
             if(this._hint) {
                 this.accept();
             }
-            this.stop();
-            document.removeEventListener('mouseup', this, false);
+            this.stop(eventData);
+            document.removeEventListener('mousedown', this, false);
             this._sendEvent('blur');
         }
     },
@@ -202,12 +202,15 @@ exports.Editable = Montage.create(Component, {
             this._sendEvent('input');
         }
     },
-    handleMouseup : {
+    handleMousedown : {
         value : function(e) {
             console.log('handle mouse down');
             ///// Listen for simulated blur event
             if(this.stopOnBlur && e._event.target !== this._element) {
-                this.blur();
+                this.blur({
+                    "originalEventType": "mousedown",
+                    "originalEvent": e
+                });
             }
         }
     },
@@ -221,9 +224,9 @@ exports.Editable = Montage.create(Component, {
         }
     },
     _sendEvent : {
-        value : function(type) {
+        value : function(type, data) {
             var evt = document.createEvent("CustomEvent");
-            evt.initCustomEvent(type, true, true);
+            evt.initCustomEvent(type, true, true, data);
             this.dispatchEvent(evt);
         }
     },
diff --git a/js/components/toolbar.reel/toolbar.css b/js/components/toolbar.reel/toolbar.css
new file mode 100644
index 00000000..e63b043e
--- /dev/null
+++ b/js/components/toolbar.reel/toolbar.css
@@ -0,0 +1,53 @@
+/* <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> */
+
+/*---------------------
+   Toolbar Container
+-----------------------*/
+
+.toolbar-container {
+    background-color: #474747;
+    border-bottom: 1px solid #333;
+    border-top: 1px solid #505050;
+    box-shadow:  0 4px 8px 0px rgba(0,0,0,0.75);
+    height: 22px;
+    overflow: hidden;
+    width: 100%;
+    -webkit-box-flex: 0;
+}
+.toolbar-container ul, .toolbar-container li {
+    margin: 0;
+    padding: 0;
+}
+
+/*---------------------
+   Button Types
+-----------------------*/
+
+.toolbar-add-button {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1%2BjfqAAAACXBIWXMAAAsTAAALEwEAmpwYAAADGGlDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjaY2BgnuDo4uTKJMDAUFBUUuQe5BgZERmlwH6egY2BmYGBgYGBITG5uMAxIMCHgYGBIS8%2FL5UBFTAyMHy7xsDIwMDAcFnX0cXJlYE0wJpcUFTCwMBwgIGBwSgltTiZgYHhCwMDQ3p5SUEJAwNjDAMDg0hSdkEJAwNjAQMDg0h2SJAzAwNjCwMDE09JakUJAwMDg3N%2BQWVRZnpGiYKhpaWlgmNKflKqQnBlcUlqbrGCZ15yflFBflFiSWoKAwMD1A4GBgYGXpf8EgX3xMw8BSMDVQYqg4jIKAUICxE%2BCDEESC4tKoMHJQODAIMCgwGDA0MAQyJDPcMChqMMbxjFGV0YSxlXMN5jEmMKYprAdIFZmDmSeSHzGxZLlg6WW6x6rK2s99gs2aaxfWMPZ9%2FNocTRxfGFM5HzApcj1xZuTe4FPFI8U3mFeCfxCfNN45fhXyygI7BD0FXwilCq0A%2FhXhEVkb2i4aJfxCaJG4lfkaiQlJM8JpUvLS19QqZMVl32llyfvIv8H4WtioVKekpvldeqFKiaqP5UO6jepRGqqaT5QeuA9iSdVF0rPUG9V%2FpHDBYY1hrFGNuayJsym740u2C%2B02KJ5QSrOutcmzjbQDtXe2sHY0cdJzVnJRcFV3k3BXdlD3VPXS8Tbxsfd99gvwT%2F%2FID6wIlBS4N3hVwMfRnOFCEXaRUVEV0RMzN2T9yDBLZE3aSw5IaUNak30zkyLDIzs%2BZmX8xlz7PPryjYVPiuWLskq3RV2ZsK%2FcqSql01jLVedVPrHzbqNdU0n22VaytsP9op3VXUfbpXta%2Bx%2F%2B5Em0mzJ%2F%2BdGj%2Ft8AyNmf2zvs9JmHt6vvmCpYtEFrcu%2BbYsc%2Fm9lSGrTq9xWbtvveWGbZtMNm%2FZarJt%2Bw6rnft3u%2B45uy9s%2F4ODOYd%2BHmk%2FJn58xUnrU%2BfOJJ%2F9dX7SRe1LR68kXv13fc5Nm1t379TfU75%2F4mHeY7En%2B59lvhB5efB1%2Flv5dxc%2BNH0y%2Ffzq64Lv4T8Ffp360%2FrP8f9%2FAA0ADzT6lvFdAAAAIGNIUk0AAHolAACAgwAA%2Bf8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAADPSURBVHjadNC7TQNREIXh75oNCIlWG0JC7BJoAmrAIVAAIkRCog9ThFtwCYTrtS2vBBKbDcG%2BbLD%2F5GpGc885M8nAItZga5YcYx4tD6Fw3ncn40Aa36mLIwM94YRC%2FFHqqkVshCRwCz6QhGRjloZo%2F1nFYygmTlC1ptNsbOTgy7czsJYosq2nLuK1e%2Fx4o0u1Qza7cuMS5s%2BVXC68v4xWmUbZFzkqiUatAWWmtmzPkrpoqC27b82BQoU1NEqfvcXeJV%2FB7mDdvYG7Ie4%2BvwMA%2BFNeHV16KUYAAAAASUVORK5CYII%3D);
+}
+
+/*---------------------
+ Generic button styles
+-----------------------*/
+
+.toolbar-container .toolbar-button {
+    background-color: transparent;
+    background-repeat: no-repeat;
+    border-style: none;
+    border-radius: 4px;
+    height: 16px;
+    margin: 3px 5px 0 0;
+    padding: 0 2px;
+    opacity: .85;
+    text-indent: -9999999px;
+    width: 16px;
+    float: right;
+}
+.left-button {
+    float: left;
+}
\ No newline at end of file
diff --git a/js/components/toolbar.reel/toolbar.html b/js/components/toolbar.reel/toolbar.html
new file mode 100644
index 00000000..53c6627a
--- /dev/null
+++ b/js/components/toolbar.reel/toolbar.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>