22 files changed, 188 insertions, 1183 deletions

diff --git a/js/components/layout/stage-mode.reel/stage-mode.css b/js/components/converter/node-name-converter.js
index c50679e8..fdca06e5 100755..100644
--- a/js/components/layout/stage-mode.reel/stage-mode.css
+++ b/js/components/converter/node-name-converter.js
@@ -28,22 +28,27 @@ CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
 ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
 POSSIBILITY OF SUCH DAMAGE.
 </copyright> */
-
-.stageMode {
-    width:26px;
-    height:23px;
-    position:absolute;
-    top:5px;
-    right:60px;
-
-    opacity: 0.7;
-    background-repeat:no-repeat;
-}
-
-.editMode {
-    background-image: url('../../../../images/optionsbar/edit_mode.png');
-}
-
-.liveMode {
-    background-image: url('../../../../images/optionsbar/live_mode.png');
-}
+var Montage = require("montage").Montage,
+    Converter = require("montage/core/converter/converter").Converter;
+
+exports.NodeNameConverter = Montage.create(Converter, {
+
+    convert: {
+        value: function(value) {
+            if(value) {
+                if(value.toLowerCase() === "ninja-content") {
+                    value = "DIV";
+                }
+
+                return value;
+            }
+        }
+    },
+
+    revert: {
+        value: function(value) {
+            return value;
+        }
+    }
+
+});
diff --git a/js/components/layout/bread-crumb.reel/bread-crumb.html b/js/components/layout/bread-crumb.reel/bread-crumb.html
index 2c6d941f..2fff245c 100755
--- a/js/components/layout/bread-crumb.reel/bread-crumb.html
+++ b/js/components/layout/bread-crumb.reel/bread-crumb.html
@@ -44,13 +44,17 @@ POSSIBILITY OF SUCH DAMAGE.
                     }
                 },
 
+                "nodeNameConverter": {
+                    "prototype": "js/components/converter/node-name-converter"
+                },
+
                 "breadcrumbButton": {
                     "prototype": "js/components/layout/bread-crumb-button.reel",
                     "properties": {
                         "element": {"#": "breadcrumbButton"}
                     },
                     "bindings": {
-                        "label": {"<-": "@buttonsList.objectAtCurrentIteration.label"},
+                        "label": {"<-": "@buttonsList.objectAtCurrentIteration.label", "converter": {"@": "nodeNameConverter"}},
                         "value": {"<-": "@buttonsList.objectAtCurrentIteration.nodeUuid"}
                     }
                 },
diff --git a/js/components/layout/document-bar.reel/document-bar.css b/js/components/layout/document-bar.reel/document-bar.css
index b86855b7..5eba72e8 100755
--- a/js/components/layout/document-bar.reel/document-bar.css
+++ b/js/components/layout/document-bar.reel/document-bar.css
@@ -75,7 +75,7 @@ POSSIBILITY OF SUCH DAMAGE.
     padding: 0;
     border: none;
     color: #FFF;
-    width: 44px;
+    width: 46px;
     text-transform: uppercase;
     text-align: left;
     float: left;
@@ -83,6 +83,10 @@ POSSIBILITY OF SUCH DAMAGE.
     font-size: 11px;
 }
 
+.preview:focus {
+    -webkit-box-shadow: none;
+}
+
 .documentBar .viewicon {
     background-repeat: no-repeat;
     background-position: center center;
@@ -98,10 +102,15 @@ POSSIBILITY OF SUCH DAMAGE.
 }
 
 .documentBar .viewdesign {
-    background-image: url('../../../../js/panels/Color/colorpanelpopup.reel/img/icon_bitmap.png');
+    background-image: url('../../../../js/panels/color/colorpanelpopup.reel/img/icon_bitmap.png');
     background-size: 90%;
 }
 
+.documentBar .viewPreview {
+    background-image: url('../../../../images/optionsbar/edit_mode.png');
+    background-size: 100%;
+}
+
 .documentBar section.inactive .viewicon{
     opacity: .5;
 }
diff --git a/js/components/layout/document-bar.reel/document-bar.html b/js/components/layout/document-bar.reel/document-bar.html
index 69f8107f..9e5e4eb2 100755
--- a/js/components/layout/document-bar.reel/document-bar.html
+++ b/js/components/layout/document-bar.reel/document-bar.html
@@ -68,6 +68,21 @@ POSSIBILITY OF SUCH DAMAGE.
                         "condition": {"<-": "@owner.disabled"}
                     }
                 },
+
+                "menuItemButton": {
+                    "prototype": "montage/ui/native/button.reel",
+                    "properties": {
+                        "element": {"#": "previewButton"},
+                        "identifier": "preview",
+                        "label": "Preview"
+                    },
+                    "listeners": [
+                        {
+                            "type": "action",
+                            "listener": {"@": "owner"}
+                        }
+                    ]
+                },
     
                 "owner": {
                     "prototype": "js/components/layout/document-bar.reel",
@@ -108,6 +123,14 @@ POSSIBILITY OF SUCH DAMAGE.
                 <button class="btn_view">Code</button>
                 
             </section>
+
+            <section class="inactive">
+
+                <div class="viewicon viewPreview"></div>
+
+                <button data-montage-id="previewButton" class="btn_view preview"></button>
+
+            </section>
         
             <div data-montage-id="disabledCondition" class="panelDisabled"></div>
         
diff --git a/js/components/layout/document-bar.reel/document-bar.js b/js/components/layout/document-bar.reel/document-bar.js
index 248bc8c4..fa0c8788 100755
--- a/js/components/layout/document-bar.reel/document-bar.js
+++ b/js/components/layout/document-bar.reel/document-bar.js
@@ -203,5 +203,11 @@ exports.DocumentBar = Montage.create(Component, {
             this.currentView = event._event.target.id;
             this.application.ninja.documentController.stage.stageView.switchDesignDocViews(event._event.target.id);//switch between design view
         }
+    },
+
+    handlePreviewAction: {
+        value: function(event) {
+            NJevent("executePreview");
+        }
     }
 });
diff --git a/js/components/layout/stage-mode.reel/stage-mode.html b/js/components/layout/stage-mode.reel/stage-mode.html
deleted file mode 100755
index fb6a26b0..00000000
--- a/js/components/layout/stage-mode.reel/stage-mode.html
+++ /dev/null
@@ -1,55 +0,0 @@
-<!DOCTYPE html>
-<!-- <copyright>
-Copyright (c) 2012, Motorola Mobility LLC.
-All Rights Reserved.