5 files changed, 80 insertions, 22 deletions

diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js
index 65d26bdd..ac14def4 100755
--- a/js/controllers/elements/element-controller.js
+++ b/js/controllers/elements/element-controller.js
@@ -12,6 +12,9 @@ var ElementController = exports.ElementController = Montage.create(NJComponent,
     addElement: {
         value: function(el, styles) {
             this.application.ninja.currentDocument.documentRoot.appendChild(el);
+            // Nested elements -
+            // TODO make sure the CSS is correct before nesting elements
+            // this.application.ninja.currentSelectedContainer.appendChild(el);
             this.application.ninja.stylesController.setElementStyles(el, styles);
         }
     },
diff --git a/js/controllers/selection-controller.js b/js/controllers/selection-controller.js
index 833e6f04..fed9affd 100755
--- a/js/controllers/selection-controller.js
+++ b/js/controllers/selection-controller.js
@@ -20,6 +20,27 @@ exports.SelectionController = Montage.create(Component, {
         }
     },
 
+    /*
+     * Bound property to the ninja currentSelectedContainer
+     */
+    _selectionContainer: {
+        value: null
+    },
+
+    selectionContainer: {
+        get: function() {
+            return this._selectionContainer
+        },
+        set: function(value) {
+            if(this._selectionContainer && this._selectionContainer !== value) {
+                console.log("setting container in the selection tool");
+                this.executeSelectElement();
+            }
+
+            this._selectionContainer = value;
+        }
+    },
+
     deserializedFromTemplate: {
         value: function() {
             this.eventManager.addEventListener("openDocument", this, false);
@@ -53,7 +74,9 @@ exports.SelectionController = Montage.create(Component, {
                 }
             }
 
-            this.dispatchEvent(selectionEvent.event);
+            //
+            this._selectionContainer = this.application.ninja.currentSelectedContainer;
+
         }
     },
 
@@ -66,13 +89,10 @@ exports.SelectionController = Montage.create(Component, {
     handleElementDeleted: {
         value: function(event) {
             if(!this._isDocument) {
-
                 if(this.findSelectedElement(event.detail) !== -1) {
                     this.executeSelectElement();
                 }
-
             }
-
         }
     },
 
@@ -130,12 +150,17 @@ exports.SelectionController = Montage.create(Component, {
                     this.executeSelectElement();    // Else execute selection with no item
                 } else {
 
-                    if(item.parentNode.id == "UserContent") {
+//                    if(item.parentNode.id === "UserContent") {
+                    if(item.parentNode.uuid === this.selectionContainer.uuid) {
                         this.executeSelectElement(item);
                     } else {
                         var outerElement = item.parentNode;
 
-                        while(outerElement.parentNode && outerElement.parentNode.id !== "UserContent") {
+                        while(outerElement.parentNode && outerElement.parentNode.uuid !== this.selectionContainer.uuid) {
+                        //while(outerElement.parentNode && outerElement.parentNode.id !== "UserContent") {
+                            // If element is higher up than current container then return
+                            if(outerElement.id === "UserContent") return;
+                            // else keep going up the chain
                             outerElement = outerElement.parentNode;
                         }
 
diff --git a/js/ninja.reel/ninja.html b/js/ninja.reel/ninja.html
index c9f17e3b..65cbfc28 100755
--- a/js/ninja.reel/ninja.html
+++ b/js/ninja.reel/ninja.html
@@ -228,7 +228,15 @@
 
             "selectionController1": {
                 "module": "js/controllers/selection-controller",
-                "name": "SelectionController"
+                "name": "SelectionController",
+                "bindings" : {
+                    "selectionContainer": {
+                        "boundObject": {"@": "owner"},
+                        "boundObjectPropertyPath": "currentSelectedContainer",
+                        "oneway": true
+                    }
+                }
+
             },
 
             "documentController1": {
diff --git a/js/stage/layout.js b/js/stage/layout.js
index 1a491210..56bb70bf 100755
--- a/js/stage/layout.js
+++ b/js/stage/layout.js
@@ -195,11 +195,30 @@ exports.Layout = Montage.create(Component, {
                 bounds3D[j] = tmpPt;
             }
 
-            // Draw the Item ouline
-            this._dashedLine(bounds3D[3][0] - 0.5,bounds3D[3][1]- 0.5,bounds3D[0][0] + 2.5, bounds3D[0][1] - 0.5,[5,5]);
-            this._dashedLine(bounds3D[0][0] - 0.5, bounds3D[0][1] - 0.5, bounds3D[1][0]- 0.5, bounds3D[1][1] + 0.5, [5,5] );
-            this._dashedLine(bounds3D[1][0] - 0.5 , bounds3D[1][1] + 0.5, bounds3D[2][0]+ 0.5, bounds3D[2][1] + 0.5, [5,5] );
-            this._dashedLine(bounds3D[2][0] + 0.5, bounds3D[2][1] + 0.5, bounds3D[3][0] + 0.5, bounds3D[3][1] - 0.5, [5,5] );
+            if(item.uuid === this.application.ninja.currentSelectedContainer.uuid) {
+                this.ctx.save();
+                this.ctx.strokeStyle = "#C61F00";
+
+                this.ctx.beginPath();
+
+                this.ctx.moveTo( bounds3D[3][0] + 0.5 ,  bounds3D[3][1] - 0.5 );
+
+                this.ctx.lineTo( bounds3D[0][0] - 0.5 ,  bounds3D[0][1] - 0.5 );
+                this.ctx.lineTo( bounds3D[1][0] - 0.5 ,  bounds3D[1][1] + 0.5 );
+                this.ctx.lineTo( bounds3D[2][0] + 0.5  ,  bounds3D[2][1] + 0.5 );
+                this.ctx.lineTo( bounds3D[3][0] + 0.5  ,  bounds3D[3][1] + 0.5 );
+
+                this.ctx.closePath();
+                this.ctx.stroke();
+
+                this.ctx.restore();
+            } else {
+                // Draw the Item ouline
+                this._dashedLine(bounds3D[3][0] - 0.5,bounds3D[3][1]- 0.5,bounds3D[0][0] + 2.5, bounds3D[0][1] - 0.5,[5,5]);
+                this._dashedLine(bounds3D[0][0] - 0.5, bounds3D[0][1] - 0.5, bounds3D[1][0]- 0.5, bounds3D[1][1] + 0.5, [5,5] );
+                this._dashedLine(bounds3D[1][0] - 0.5 , bounds3D[1][1] + 0.5, bounds3D[2][0]+ 0.5, bounds3D[2][1] + 0.5, [5,5] );
+                this._dashedLine(bounds3D[2][0] + 0.5, bounds3D[2][1] + 0.5, bounds3D[3][0] + 0.5, bounds3D[3][1] - 0.5, [5,5] );
+            }
 
             // Draw the Label is all mode
             if(this.layoutView === "layoutAll") {
diff --git a/js/tools/SelectionTool.js b/js/tools/SelectionTool.js
index f76a6d85..37029e8c 100755
--- a/js/tools/SelectionTool.js
+++ b/js/tools/SelectionTool.js
@@ -183,18 +183,21 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, {
         }
     },
 
+    /**
+     * Double click handler
+     *
+     * Sets the currentSelectionContainer to the current selected element. If no elements are selected set the
+     * currentSelectionContainer to the userDocument div.
+     */
     HandleDoubleClick: {
-            value: function(event) {
-
-                // Temporary Code for Breadcrumb
-                if(this.application.ninja.selectedElements.length > 0) {
-                    this.application.ninja.currentSelectedContainer = this.application.ninja.selectedElements[0]._element;
-                } else {
-                    this.application.ninja.currentSelectedContainer = this.application.ninja.currentDocument.documentRoot;
-                }
-
+        value: function(event) {
+            if(this.application.ninja.selectedElements.length > 0) {
+                this.application.ninja.currentSelectedContainer = this.application.ninja.selectedElements[0]._element;
+            } else {
+                this.application.ninja.currentSelectedContainer = this.application.ninja.currentDocument.documentRoot;
             }
-        },
+        }
+    },
 
     HandleKeyPress: {
         value: function(event){