9 files changed, 449 insertions, 66 deletions

diff --git a/js/stage/layout.js b/js/stage/layout.js
index 1a491210..56bb70bf 100644..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/stage/stage-deps.js b/js/stage/stage-deps.js
index 7c6d58b4..d46e2b81 100644..100755
--- a/js/stage/stage-deps.js
+++ b/js/stage/stage-deps.js
@@ -4,18 +4,15 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
 </copyright> */
 
-var Montage = require("montage/core/core").Montage,
-    Component = require("montage/ui/component").Component;
-
-var snapManager = require("js/helper-classes/3D/snap-manager").SnapManager;
-var viewUtils = require("js/helper-classes/3D/view-utils").ViewUtils;
-var drawUtils = require("js/helper-classes/3D/draw-utils").DrawUtils;
-var ElementPlanes = require("js/helper-classes/3D/element-planes").ElementPlanes;
-var MathUtilsClass = require("js/helper-classes/3D/math-utils").MathUtilsClass;
-var VecUtils = require("js/helper-classes/3D/vec-utils").VecUtils;
-
-//TODO : This dependency needs to be reworked
-var DrawingToolBase = require("js/tools/drawing-tool-base").DrawingToolBase;
+var Montage =                   require("montage/core/core").Montage,
+    Component =                 require("montage/ui/component").Component,
+    snapManager =               require("js/helper-classes/3D/snap-manager").SnapManager,
+    viewUtils =                 require("js/helper-classes/3D/view-utils").ViewUtils,
+    drawUtils =                 require("js/helper-classes/3D/draw-utils").DrawUtils,
+    ElementPlanes =     require("js/helper-classes/3D/element-planes").ElementPlanes,
+    MathUtilsClass =    require("js/helper-classes/3D/math-utils").MathUtilsClass,
+    VecUtils =                  require("js/helper-classes/3D/vec-utils").VecUtils,
+    DrawingToolBase =   require("js/tools/drawing-tool-base").DrawingToolBase;
 
 exports.StageDeps = Montage.create(Component, {
     viewUtils: {
diff --git a/js/stage/stage-view.reel/stage-view.css b/js/stage/stage-view.reel/stage-view.css
new file mode 100755
index 00000000..ce7072c7
--- /dev/null
+++ b/js/stage/stage-view.reel/stage-view.css
@@ -0,0 +1,37 @@
+/* <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> */
+
+.codeViewContainer {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  margin: 0px;
+  padding: 0px;
+  background-color: #ffffff;
+  width: 100%;
+  height: 100%;
+  overflow:auto;
+  /*display: none;*/
+}
+
+/* OLD CSS for reference
+#mainContent #codeMirror_1 {
+    height:100%;
+}
+*/
+
+.CodeMirror {
+    width: 100%;
+    height: 100%;
+    background: white;
+}
+
+.CodeMirror .CodeMirror-scroll {
+    height: 100%;
+    overflow: scroll;
+    overflow-x: auto;
+    overflow-y: auto;
+}
diff --git a/js/stage/stage-view.reel/stage-view.html b/js/stage/stage-view.reel/stage-view.html
new file mode 100755
index 00000000..ee8fa315
--- /dev/null
+++ b/js/stage/stage-view.reel/stage-view.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- <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> -->
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <link rel="stylesheet" type="text/css" href="stage-view.css">
+
+    <script type="text/montage-serialization">
+        {
+            "owner": {
+                "module": "js/stage/stage-view.reel",
+                "name": "StageView",
+                "properties": {
+                    "element": {"#": "codeViewContainer"}
+                }
+            }
+        }
+    </script>
+
+</head>
+<body>
+
+
+    <section id="codeViewContainer" class="codeViewContainer"></section>
+
+</body>
+</html>
diff --git a/js/stage/stage-view.reel/stage-view.js b/js/stage/stage-view.reel/stage-view.js
new file mode 100755
index 00000000..dc9980f0
--- /dev/null
+++ b/js/stage/stage-view.reel/stage-view.js
@@ -0,0 +1,246 @@
+/* <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> */
+
+/**
+@requires montage/core/core
+@requires montage/ui/component
+*/
+var Montage = require("montage/core/core").Montage,
+    Component = require("montage/ui/component").Component;
+
+exports.StageView = Montage.create(Component, {
+    _documents: {
+        value : []
+    },
+
+    docs: {
+        get: function() {
+            return this._documents;
+        },
+        set: function(value) {
+            //console.log(value);
+        }
+    },
+
+    templateDidLoad: {
+        value: function() {
+            this.eventManager.addEventListener("appLoaded", this, false);
+        }
+    },
+
+    didDraw:{
+        value: function() {
+            if(!this.application.ninja.documentController._textHolder) this.application.ninja.documentController._textHolder = this.element;
+        }
+    },
+
+    handleAppLoaded: {
+        value: function() {
+
+            // Don't bind for now
+            /*
+            Object.defineBinding(this, "docs", {
+              boundObject: this.application.ninja.documentController,
+              boundObjectPropertyPath: "_documents"
+            });
+            */
+
+        }
+    },
+
+    /**
+     * Creates a text area which will contain the content of the opened text document.
+     */
+    createTextAreaElement: {
+        value: function(uuid) {
+
+
+            var codeMirrorDiv = document.createElement("div");
+            codeMirrorDiv.id = "codeMirror_"  + uuid;
+            codeMirrorDiv.style.display = "block";
+            this.element.appendChild(codeMirrorDiv);
+
+            var textArea = document.createElement("textarea");
+            textArea.id = "code";
+            textArea.name = "code";
+
+            codeMirrorDiv.appendChild(textArea);
+
+            return textArea;
+        }
+    },
+
+    // Temporary function to create a Codemirror text view
+    createTextView: {
+        value: function(doc) {
+            this.application.ninja.documentController._hideCurrentDocument();
+            this.hideOtherDocuments(doc.uuid);
+            var type;
+            switch(doc.documentType) {
+                case  "css" :
+                    type = "css";
+                    break;