Finish embedded view implementation.

wise-editor/src/main/webapp/js/editor.js

@@ -18,7 +18,7 @@
 
 var designer = null;
 
-function buildDesigner() {
+function buildDesigner(viewMode) {
 
     var container = $('mindplot');
     container.setStyles({
@@ -26,20 +26,22 @@ function buildDesigner() {
         width:  parseInt(screen.width)
     });
 
-    var editorProperties = {zoom:0.85,saveOnLoad:true,collab:collab};
+    var editorProperties = {zoom:0.85,saveOnLoad:true,collab:'standalone',readOnly:viewMode};
     designer = new mindplot.Designer(editorProperties, container);
     designer.setViewPort({
         height: parseInt(window.innerHeight - 70), // Footer and Header
         width:  parseInt(window.innerWidth)
     });
 
-    if ($('toolbar')) {
-        var menu = new mindplot.widget.Menu(designer, 'toolbar', mapId);
+    if (!viewMode) {
+        if ($('toolbar')) {
+            var menu = new mindplot.widget.Menu(designer, 'toolbar', mapId);
 
-        //  If a node has focus, focus can be move to another node using the keys.
-        designer._cleanScreen = function() {
-            menu.clear()
-        };
+            //  If a node has focus, focus can be move to another node using the keys.
+            designer._cleanScreen = function() {
+                menu.clear()
+            };
+        }
     }
     return designer;
 }

wise-editor/src/main/webapp/js/embedded.css

@@ -0,0 +1,135 @@
+html {
+    overflow: hidden;
+}
+
+#waitDialog {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    height: 100px;
+}
+
+#firstHeader {
+    width: 100%;
+}
+
+#subHeader {
+    position: absolute;
+    width: 100%;
+    height: 55px;
+    top: 30px;
+}
+
+#loadingContainer {
+    position: relative;
+    top: 80px;
+    height: 120px; /*background: whitesmoke;*/
+    background: #FEFEFE;
+    opacity: .99;
+    padding: 15px;
+    width: 100%;
+    border: 1px solid;
+    border-color: #a9a9a9;
+
+}
+
+#loadingContainer .loadingText {
+    position: relative;
+    top: 50%;
+    margin-top: -35px;
+    font-size: 30px;
+    font-weight: bold;
+    vertical-align: text-bottom;
+    height: 30px;
+    float: left;
+}
+
+#loadingContainer .loadingIcon {
+    position: relative;
+    background: url(../images/ajax-loader2.gif) no-repeat;
+    top: 25px;
+    height: 100px;
+    width: 70px;
+    float: left;
+    clear: both;
+}
+
+/* ------------- Footer Styles -------------------------*/
+div#embFooter {
+    position: absolute;
+    height: 35px;
+    width: 100%;
+    bottom: 0;
+    left: 0;
+    border-top: 1px solid black;
+    background: #E5E5E5;
+}
+
+div#logo {
+    height: 65px;
+    width: 80px;
+    position: absolute;
+    background: url(../images/logo-small.png) no-repeat right top;
+    right: 10px;
+    top: -10px;
+}
+
+.button {
+    width: 20px;
+    height: 20px;
+    float: left;
+    cursor: pointer;
+    white-space: nowrap;
+    margin: 1px;
+}
+
+.button:hover {
+    float: left;
+    cursor: pointer;
+    border: 1px solid black;
+    border-top-color: white;
+    border-left-color: white;
+    margin: 0px;
+
+}
+
+div#zoomIn {
+    background: url(../images/zoom-in.png) no-repeat left top;
+    margin-top: 10px;
+    margin-left: 10px;
+}
+
+#zoomOut {
+    background: url(../images/zoom-out.png) no-repeat left top;;
+    margin-top: 10px;
+    margin-left: 5px;
+}
+
+div#mindplot {
+    position: relative;
+    top: 0;
+    left: 0;
+    width: 100%;
+}
+
+div#mapContainer {
+    border-bottom: 1px solid black;
+    padding-bottom: 40px;
+    height: 400px;
+    width: 100%;
+}
+
+div#mapDetails {
+    float: right;
+    padding-top: 10px;
+    margin-right: 100px;
+    font-family: arial,serif;
+    font-size: 11px;
+}
+
+div#mapDetails .title {
+    font-weight: bold;
+    margin-left: 10px;
+    margin-right: 3px;
+
+}