12 files changed, 295 insertions, 90 deletions

diff --git a/js/controllers/objects-controller.js b/js/controllers/objects-controller.js
index fd9b12f4..386ef683 100644
--- a/js/controllers/objects-controller.js
+++ b/js/controllers/objects-controller.js
@@ -7,6 +7,10 @@
 var Montage = require("montage/core/core").Montage,
     Component        = require("montage/ui/component").Component;
 
+var CATEGORIES  = {
+
+};
+
 var objectsController = exports.ObjectsController = Montage.create(Component, {
 
     _currentDocument : {
@@ -62,6 +66,7 @@ var objectsController = exports.ObjectsController = Montage.create(Component, {
             if(!bindingArgs.sourceObject || !bindingArgs.sourceObjectPropertyPath || !bindingArgs) { return; }
 
             Object.defineBinding(bindingArgs.sourceObject, bindingArgs.sourceObjectPropertyPath, bindingArgs);
+            this.currentObjectBindings = this.getObjectBindings(value);
         }
     },
 
@@ -72,6 +77,7 @@ var objectsController = exports.ObjectsController = Montage.create(Component, {
 
 
             Object.deleteBinding(bindingArgs.sourceObject, bindingArgs.sourceObjectPropertyPath);
+            this.currentObjectBindings = this.getObjectBindings(value);
         }
     },
 
@@ -88,6 +94,7 @@ var objectsController = exports.ObjectsController = Montage.create(Component, {
             }
 
             this.addBinding(bindingArgs);
+
         }
     },
     
@@ -119,20 +126,11 @@ var objectsController = exports.ObjectsController = Montage.create(Component, {
         }
     },
 
-    /* ---- Bindable Properties ---- */
+    /* ---- Get Bindable Properties ---- */
 
     getPropertyList : {
         value: function(object, excludeUnderscoreProperties) {
-            var object_i = object,
-                prototypes = [object_i];
-
-            ///// Collect prototypes
-            while(Object.getPrototypeOf(object_i)) {
-                object_i = Object.getPrototypeOf(object_i);
-                prototypes.push(object_i);
-            }
-
-            return prototypes.map(function(proto) {
+            return this.getPrototypes(object).map(function(proto) {
 
                 var metadata = proto._montage_metadata,
                     objectName = (metadata) ? metadata.objectName : "Object";
@@ -166,6 +164,44 @@ var objectsController = exports.ObjectsController = Montage.create(Component, {
         }
     },
 
+    getPrototypes : {
+        value: function(object) {
+            var object_i = object,
+                prototypes = [object_i];
+
+            ///// Collect prototypes
+            while(Object.getPrototypeOf(object_i)) {
+                object_i = Object.getPrototypeOf(object_i);
+                prototypes.push(object_i);
+            }
+
+            return prototypes;
+        }
+    },
+
+    /* ----- Category properties ----- */
+
+    getObjectCategory : {
+        value: function(object) {
+            if(this._hasPrototype(object, 'Component')) {
+                return 'Component';
+            }
+
+            return null;
+        }
+    },
+
+    _hasPrototype : {
+        value: function(object, prototypeName) {
+            var prototypes = this.getPrototypes(object).map(function(proto) {
+                var metadata = proto._montage_metadata;
+                return (metadata) ? metadata.objectName : "Object";
+            });
+
+            return prototypes.indexOf(prototypeName) !== -1;
+        }
+    },
+
     /* ---- Bindable controller properties ---- */
 
     currentObjectBindings : {
diff --git a/js/panels/binding-panel.reel/binding-panel.css b/js/panels/binding-panel.reel/binding-panel.css
index a1d5be0f..787cf114 100644
--- a/js/panels/binding-panel.reel/binding-panel.css
+++ b/js/panels/binding-panel.reel/binding-panel.css
@@ -20,3 +20,8 @@
 .binding-panel-toolbar-container {
     -webkit-box-flex: 0;
 }
+
+.binding-panel .edit-view-docked {
+    left: 0;
+    -webkit-transition-duration: 0;
+}
\ No newline at end of file
diff --git a/js/panels/binding-panel.reel/binding-panel.js b/js/panels/binding-panel.reel/binding-panel.js
index 0641ecf5..45fa4005 100644
--- a/js/panels/binding-panel.reel/binding-panel.js
+++ b/js/panels/binding-panel.reel/binding-panel.js
@@ -6,6 +6,19 @@ exports.BindingPanel = Montage.create(Component, {
 
     bindings : { value: null },
     editView : { value: null },
+
+    _dockEditView : { value: null },
+    dockEditView : {
+        get : function() { return this._dockEditView; },
+        set : function(value) {
+            if(value === this._dockEditView) { return; }
+
+            this._dockEditView = value;
+
+            this.needsDraw = true;
+        }
+    },
+
     _editing: { value: null },
     editing: {
         get: function() {
@@ -14,6 +27,11 @@ exports.BindingPanel = Montage.create(Component, {
         set: function(value) {
             if(value === this._editing) { return; }
             this._editing = value;
+
+            if(!value) {
+                this.dockEditView = false;
+            }
+
             this.needsDraw = true;
         }
     },
@@ -29,6 +47,18 @@ exports.BindingPanel = Montage.create(Component, {
     },
 
     /* -------------------------
+       Event handlers
+     ------------------------- */
+
+    handleWebkitTransitionEnd : {
+        value: function(e) {
+            console.log("trans end");
+
+            this.dockEditView = this.editing;
+        }
+    },
+
+    /* -------------------------
      Toolbar Button Actions
      ------------------------- */
 
@@ -54,8 +84,16 @@ exports.BindingPanel = Montage.create(Component, {
         }
     },
 
+    prepareForDraw : {
+        value: function() {
+
+        }
+    },
+
     willDraw: {
         value: function() {
+            this.editView.element.addEventListener('webkitTransitionEnd', this, false);
+
             if(this.editing) {
                 this._translateDistance = this.element.offsetWidth;
             }
@@ -64,15 +102,21 @@ exports.BindingPanel = Montage.create(Component, {