7 files changed, 98 insertions, 55 deletions

diff --git a/js/controllers/objects-controller.js b/js/controllers/objects-controller.js
index 543aa96f..5bab9eab 100644
--- a/js/controllers/objects-controller.js
+++ b/js/controllers/objects-controller.js
@@ -8,46 +8,79 @@ var Montage = require("montage/core/core").Montage,
     Component        = require("montage/ui/component").Component;
 
 var objectsController = exports.ObjectsController = Montage.create(Component, {
-    objects : {
-        value: []
-    },
-
-    handleAppLoaded : {
-        value: function() {
-            ///// Bind app's activeDocument property to
-            ///// objects controller's _activeDocument property
-        }
-    },
-
-    deserializedFromTemplate : {
-        value: function() {
-            this.eventManager.addEventListener( "appLoaded", this, false);
-        },
-        enumerable : false
-    },
 
     _activeDocument : {
         value : null,
         enumerable : false
     },
-
     activeDocument : {
         get : function() {
             return this._activeDocument;
         },
-        set : function(document) {
-            ///// If the document is null set default stylesheets to null
-            if(!document) { return false; }
+        set : function(doc) {
+            if(!doc) { return false; }
 
+            // TODO: remove setTimeout when timing of montage initialization is done
             setTimeout(function() {
-                this.objects = document._document.application._template._deserializer.getObjectsFromLastDeserialization();
+                this.bindToModelObjects();
             }.bind(this), 1000);
 
-
-            ///// setting document via binding
-            this._activeDocument = document;
+            this._activeDocument = doc;
         },
         enumerable : false
+    },
+
+    objects : {
+        value: []
+    },
+
+    _isBoundToModelObjects : {
+        value: null
+    },
+    bindToModelObjects : {
+        value: function() {
+            //// Remove any previous bindings if previously bound
+            if(!this._isBoundToModelObjects) {
+                Object.deleteBinding(this, 'objects');
+                this._isBoundToModelObjects = true;
+            }
+
+            Object.defineBinding(this, 'objects', {
+                boundObject: this.activeDocument.model,
+                boundObjectPropertyPath: 'objects',
+                oneway: false
+            });
+        }
+    },
+    
+    /* --------------------------
+          Binding Methods
+    ----------------------------- */
+    
+    addBinding : {
+        value: function(bindingDescriptor) {
+            if(!bindingDescriptor.sourceObject || !bindingDescriptor.sourceObjectPropertyPath || !bindingDescriptor) { return; }
+
+            Object.defineBinding(bindingDescriptor.sourceObject, bindingDescriptor.sourceObjectPropertyPath, bindingDescriptor);
+        }
+    },
+
+    removeBinding : {
+        value: function(bindingDescriptor) {
+            if(!bindingDescriptor) { return; }
+
+            Object.deleteBinding(bindingDescriptor.sourceObject, bindingDescriptor.sourceObjectPropertyBindingPath);
+        }
+    },
+
+    editBindingPropertyPath : {
+        value: function(bindingDescriptor, newPropertyPath) {
+            this.removeBinding(bindingDescriptor);
+
+            //this.addBinding()
+
+
+        }
     }
 
 });
\ No newline at end of file
diff --git a/js/document/models/html.js b/js/document/models/html.js
index fd42d4de..a93faa9e 100755
--- a/js/document/models/html.js
+++ b/js/document/models/html.js
@@ -74,6 +74,7 @@ exports.HtmlDocumentModel = Montage.create(BaseDocumentModel, {
     setComponentInstance: {
         value: function(instance, el) {
             this.userComponents[el.uuid] = instance;
+            this.objects.push(instance);
         }
     },
     ////////////////////////////////////////////////////////////////////
@@ -86,6 +87,10 @@ exports.HtmlDocumentModel = Montage.create(BaseDocumentModel, {
                 return null;
             }
         }
+    },
+    ////////////////////////////////////////////////////////////////////
+    objects : {
+        value: null
     }
         ////////////////////////////////////////////////////////////////////
         ////////////////////////////////////////////////////////////////////
diff --git a/js/document/templates/app/main.js b/js/document/templates/app/main.js
index a406abdb..91c46fda 100644
--- a/js/document/templates/app/main.js
+++ b/js/document/templates/app/main.js
@@ -29,6 +29,7 @@ exports.Main = Montage.create(Component, {
                         var componentRequire = component[data.name];
                         var componentInstance = componentRequire.create();
 
+                        componentInstance._montage_metadata.label = data.name;
                         componentInstance.element = element;
 
                         componentInstance.needsDraw = true;
diff --git a/js/document/views/design.js b/js/document/views/design.js
index d772aa86..826b4058 100755
--- a/js/document/views/design.js
+++ b/js/document/views/design.js
@@ -397,11 +397,15 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
     initMontage: {
         value: function (scripttags) {
                 //
+            //debugger;
                 this.iframe.contentWindow.document.body.addEventListener('mjsTemplateReady', function () {
                         //Initializing template with user's seriliazation
                         var template = this.iframe.contentWindow.mjsTemplate.create();
+
                         template.initWithDocument(this.iframe.contentWindow.document);
-                        template.instantiateWithOwnerAndDocument(null, this.iframe.contentWindow.document, function (e){/*Nothing just a required extra parameter*/});
+                        template.instantiateWithOwnerAndDocument(null, this.iframe.contentWindow.document, function (e){
+                    this.model.objects = template.deserializer.getObjectsFromLastDeserialization();
+                }.bind(this));
                 }.bind(this), false);
         }
     },
diff --git a/js/panels/objects/object.reel/object.html b/js/panels/objects/object.reel/object.html
index efc66d79..a072ab5e 100644
--- a/js/panels/objects/object.reel/object.html
+++ b/js/panels/objects/object.reel/object.html
@@ -38,7 +38,7 @@
 <body>
 
 
-<li data-montage-id="object">
+<li data-montage-id="object" draggable="true">
     <div class="object-icon"></div>
     <span data-montage-id="label" class="object-label"></span>
 </li>
diff --git a/js/panels/objects/object.reel/object.js b/js/panels/objects/object.reel/object.js
index 953c1baf..43abafad 100644
--- a/js/panels/objects/object.reel/object.js
+++ b/js/panels/objects/object.reel/object.js
@@ -57,41 +57,19 @@ exports.Object = Montage.create(Component, {
         get: function() {
             return this._montageLabel;
         },
-        set: function(value) {
-            if(this._montageMetaData === value) { return false; }
+        set: function(data) {
+            if(this._montageMetaData === data) { return false; }
 
-            this._montageMetaData = value;
+            this._montageMetaData = data;
 
-            if(!this.identifier && value.label) {
-                this.label = value.label;
+            if(!this.identifier && data.label) {
+                this.label = data.label;
                 this.needsDraw = true;
             }
         }
 
     },
 
-    templateDidLoad: {
-        value: function() {
-            console.log('object loaded');
-        }
-    },
-
-    prepareForDraw : {