Finish embedded view implementation.

core-js/pepe.txy

@@ -1 +0,0 @@
-s

distribution/assembly/standalone-editor.xml

@@ -30,7 +30,8 @@
                 <include>js/editor.js</include>
                 <include>js/less*.js</include>
                 <include>js/mootools*.js</include>
-                <include>html/*</include>
+                <include>html/editor.html</include>
+                <include>html/viewmode.html</include>
             </includes>
         </fileSet>
     </fileSets>

mindplot/src/main/javascript/Designer.js

@@ -18,14 +18,16 @@
 
 mindplot.Designer = new Class({
         Extends: Events,
-        initialize: function(profile, divElement) {
+        initialize: function(options, divElement) {
-            $assert(profile, "profile must be defined");
+            $assert(options, "options must be defined");
-            $assert(profile.zoom, "zoom must be defined");
+            $assert(options.zoom, "zoom must be defined");
             $assert(divElement, "divElement must be defined");
 
+            this._options = options;
+
             // Dispatcher manager ...
             var commandContext = new mindplot.CommandContext(this);
-            if (profile.collab == 'standalone') {
+            if (options.collab == 'standalone') {
                 this._actionDispatcher = new mindplot.StandaloneActionDispatcher(commandContext);
             } else {
                 this._actionDispatcher = new mindplot.BrixActionDispatcher(commandContext);
@@ -36,7 +38,7 @@ mindplot.Designer = new Class({
             }.bind(this));
 
             mindplot.ActionDispatcher.setInstance(this._actionDispatcher);
-            this._model = new mindplot.DesignerModel(profile);
+            this._model = new mindplot.DesignerModel(options);
 
             // Init Screen manager..
             var screenManager = new mindplot.ScreenManager(divElement);
@@ -46,7 +48,7 @@ mindplot.Designer = new Class({
             this._eventBussDispatcher = new mindplot.layout.EventBusDispatcher(this.getModel());
 
             // Register events
-            if (!profile.readOnly) {
+            if (!this.isReadOnly()) {
                 this._registerEvents();
                 this._dragManager = this._buildDragManager(this._workspace);
             }
@@ -151,17 +153,17 @@ mindplot.Designer = new Class({
             this._workspace.setZoom(model.getZoom(), true);
         },
 
-        _buildNodeGraph : function(model) {
+        _buildNodeGraph : function(model, readOnly) {
             var workspace = this._workspace;
 
             // Create node graph ...
-            var topic = mindplot.NodeGraph.create(model);
+            var topic = mindplot.NodeGraph.create(model, {readOnly:readOnly});
 
             // Append it to the workspace ...
             this.getModel().addTopic(topic);
 
             // Add Topic events ...
-            if (!this._readOnly) {
+            if (!readOnly) {
                 // If a node had gained focus, clean the rest of the nodes ...
                 topic.addEvent('mousedown', function(event) {
                     this.onObjectFocusEvent(topic, event);
@@ -171,8 +173,7 @@ mindplot.Designer = new Class({
                 if (topic.getType() != mindplot.model.INodeModel.CENTRAL_TOPIC_TYPE) {
 
                     // Central Topic doesn't support to be dragged
-                    var dragger = this._dragManager;
+                    this._dragManager.add(topic);
-                    dragger.add(topic);
                 }
             }
 
@@ -464,6 +465,10 @@ mindplot.Designer = new Class({
             this._actionDispatcher._actionRunner.redo();
         },
 
+        isReadOnly : function() {
+            return this._options.readOnly;
+        },
+
         _nodeModelToNodeGraph : function(nodeModel, isVisible) {
             $assert(nodeModel, "Node model can not be null");
             var children = nodeModel.getChildren().slice();
@@ -471,7 +476,7 @@ mindplot.Designer = new Class({
                 return a.getOrder() - b.getOrder()
             });
 
-            var nodeGraph = this._buildNodeGraph(nodeModel);
+            var nodeGraph = this._buildNodeGraph(nodeModel, this.isReadOnly());
 
             if (isVisible) {
                 nodeGraph.setVisibility(isVisible);

mindplot/src/main/javascript/MainTopic.js

@@ -244,5 +244,3 @@ mindplot.MainTopic = new Class({
     }
 
 });
-
-mindplot.MainTopic.DEFAULT_MAIN_TOPIC_HEIGHT = 18;

mindplot/src/main/javascript/Topic.js

@@ -19,8 +19,8 @@
 
 mindplot.Topic = new Class({
     Extends:mindplot.NodeGraph,
-    initialize : function(model) {
+    initialize : function(model, options) {
-        this.parent(model);
+        this.parent(model, options);
         this._textEditor = new mindplot.MultilineTextEditor(this);
 
         this._children = [];
@@ -35,15 +35,12 @@ mindplot.Topic = new Class({
             this.setPosition(pos);
         }
 
-        // @Todo: Hack to remove ...
         // Register events for the topic ...
-        if (!designer._readOnly) {
+        if (!options.readOnly) {
-
             this._registerEvents();
         }
     },
 
-
     _registerEvents : function() {
 
         this.setMouseEventsEnabled(true);

mindplot/src/main/javascript/widget/Menu.js

@@ -403,10 +403,13 @@ mindplot.widget.Menu = new Class({
 
     _addButton:function (buttonId, topic, rel, fn) {
         // Register Events ...
+        if ($(buttonId)) {
+
             var button = new mindplot.widget.ToolbarItem(buttonId, function(event) {
                 fn(event);
                 this.clear();
             }.bind(this), {topicAction:topic,relAction:rel});
             this._toolbarElems.push(button);
         }
+    }
 });

wise-editor/pom.xml

@@ -80,7 +80,6 @@
                         </overlay>
                     </overlays>
                 </configuration>
-
             </plugin>
         </plugins>
     </build>

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

@@ -112,13 +112,6 @@ div#mindplot {
     width: 100%;
 }
 
-div#mapContainer {
-    border-bottom: 1px solid black;
-    padding-bottom: 40px;
-    height: 400px;
-    width: 100%;
-}
-
 div#mapDetails {
     float: right;
     padding-top: 10px;
@@ -131,3 +124,30 @@ div#mapDetails .title {
     margin-left: 10px;
     margin-right: 3px;
 }
+
+.notesTip {
+    background-color: #dfcf3c;
+    padding: 5px 15px;
+    color: #666666;
+    /*font-weight: bold;*/
+    /*width: 100px;*/
+    font-size: 13px;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
+}
+
+.linkTip {
+    background-color: #dfcf3c;
+    padding: 5px 15px;
+    color: #666666;
+    /*font-weight: bold;*/
+    /*width: 100px;*/
+    font-size: 13px;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
+}
+

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

@@ -14,17 +14,19 @@
     <script type='text/javascript' src='../js/core.js'></script>
     <script type='text/javascript' src='../js/less-1.1.3.min.js'></script>
 
+    <link rel="icon" href="../images/favicon.ico" type="image/x-icon">
+    <link rel="shortcut icon" href="../images/favicon.ico" type="image/x-icon">
+
     <script type="text/javascript">
 
         var mapId = 'welcome';
         var mindReady = false;
-        var collab = 'standalone';
+        var viewMode = false;
-
         $(document).addEvent('loadcomplete', function(resource) {
             mindReady = resource == 'mind' ? true : mindReady;
 
             if (mindReady) {
-                designer = buildDesigner(collab);
+                designer = buildDesigner(viewMode);
 
                 // Configure default persistence manager ...
                 mindplot.PersitenceManager.init(new mindplot.LocalStorageManager());
@@ -48,9 +50,6 @@
         });
 
     </script>
-
-    <link rel="icon" href="../images/favicon.ico" type="image/x-icon">
-    <link rel="shortcut icon" href="../images/favicon.ico" type="image/x-icon">
 </head>
 <body>
 
@@ -94,11 +93,9 @@
 <div id="header">
 
     <div id="headerInfo">
-        <div id="headerActions">
+        <div id="headerActions"></div>
-            <span>MyWiseMappigs</span> | <span>Settings</span> | <span>Logout</span>
-        </div>
         <div id="headerLogo"></div>
-        <div id="headerMapTitle">Title: <span>Hola</span></div>
+        <div id="headerMapTitle">Title: <span>Welcome</span></div>
     </div>
     <div id="toolbar">
         <div id="editTab" class="tabContent">
@@ -109,12 +106,6 @@
                 <div id="discart" class="buttonOn" title="Discard">
                     <img src="../images/discard.png"/>
                 </div>
-                <div id="print" class="buttonOn" title="Print">
-                    <img src="../images/print.png"/>
-                </div>
-                <div id="export" class="buttonOn" title="Export">
-                    <img src="../images/export.png"/>
-                </div>
             </div>
             <div id="edit" class="buttonContainer">
                 <div id="undoEdition" class="buttonOn" title="Undo Edition">
@@ -179,20 +170,6 @@
 
                 </div>
             </div>
-            <div id="collaboration" class="buttonContainer">
-                <div id="tagIt" class="buttonOn" title="Tag">
-                    <img src="../images/tag.png"/>
-                </div>
-                <div id="shareIt" class="buttonOn" title="Share">
-                    <img src="../images/share.png"/>
-                </div>
-                <div id="publishIt" class="buttonOn" title="Publish">
-                    <img src="../images/public.png"/>
-                </div>
-                <div id="history" class="buttonOn" title="History">
-                    <img src="../images/history.png"/>
-                </div>
-            </div>
         </div>
     </div>
     <div id="headerNotifier"></div>

wise-editor/src/main/webapp/html/embedded.htm

@@ -1,111 +0,0 @@
-<!DOCTYPE HTML>
-
-<%@ include file="/jsp/init.jsp" %>
-
-<html>
-<head>
-    <title>WiseMapping - Editor </title>
-    <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
-    <!--[if lt IE 9]>
-    <meta http-equiv="X-UA-Compatible" content="chrome=1">
-    <![endif]-->
-    <!--<script type="text/javascript" src="http://docs.google.com/brix/static/api/js/jsapi.nocache.js"></script>-->
-    <script type='text/javascript' src='../js/less-1.1.3.min.js'></script>
-    <link rel="stylesheet" type="text/css" href="../css/embedded.css"/>
-
-    <script type='text/javascript'
-            src='https://ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools-yui-compressed.js'></script>
-
-    <script type='text/javascript'
-            src='/mindplot/src/main/javascript/libraries/mootools/mootools-more-1.3.2.1-yui.js'></script>
-    <script type='text/javascript' src='/core-js/target/classes/core.js'></script>
-
-
-    <script type="text/javascript">
-        var mapId = '${mindmap.id}';
-        var mapXml = '<map name="38298" version="pela"><topic central="true" text="test\nThis is working ?" id="1"/></map>';
-        var mindReady = false;
-        $(document).addEvent('loadcomplete', function(resource) {
-            mindReady = resource == 'mind' ? true : mindReady;
-            if (mindReady) {
-
-                collab = 'standalone';
-                //var editorProperties = {zoom:0.85,saveOnLoad:true,collab:'standalone'};
-
-                var isTryMode = false;
-                designer = buildDesigner();
-
-                var domDocument = core.Utils.createDocumentFromText(mapXml);
-                var serializer = mindplot.XMLMindmapSerializerFactory.getSerializerFromDocument(domDocument);
-                var mindmap = serializer.loadFromDom(domDocument, mapId);
-
-                // Now, load the map ...
-                designer.loadMap(mindmap);
-
-                // If not problem has arisen, close the dialog ...
-                if (!window.hasUnexpectedErrors) {
-                    waitDialog.deactivate();
-                }
-
-                $('zoomIn').addEvent('click', function() {
-                    designer.zoomIn();
-                });
-
-                $('zoomOut').addEvent('click', function() {
-                    designer.zoomOut();
-                });
-            }
-        });
-    </script>
-</head>
-<body>
-
-<div id="waitDialog" style="display:none">
-    <div id="waitingContainer">
-        <div class="loadingIcon"></div>
-        <div class="loadingText">
-            Loading ...
-        </div>
-    </div>
-</div>
-
-<div id="errorDialog" style="display:none">
-    <div id="errorContainer">
-        <div class="loadingIcon"></div>
-        <div class="loadingText">
-            Unexpected error loading your map :(
-        </div>
-    </div>
-</div>
-
-<script type="text/javascript">
-
-    var waitDialog = new core.WaitDialog();
-    waitDialog.activate(true, $("waitDialog"));
-    $(window).addEvent("error", function(event) {
-
-        // Show error dialog ...
-        waitDialog.changeContent($("errorDialog"), false);
-        return false;
-    });
-</script>
-
-
-<div id="mapContainer">
-    <div id="mindplot"></div>
-    <div id="embFooter">
-        <a href="${pageContext.request.contextPath}/c/home.htm" target="new">
-            <div id="logo"></div>
-        </a>
-
-        <div id="zoomIn" class="button"></div>
-        <div id="zoomOut" class="button"></div>
-        <div id="mapDetails">
-            <span class="title"><spring:message code="CREATOR"/>:</span><span>${mindmap.creator}</span>
-            <span class="title"><spring:message code="DESCRIPTION"/>:</span><span>${mindmap.description}</span>
-        </div>
-    </div>
-</div>
-<script type="text/javascript" src="../js/editor.js"></script>
-</body>
-</html>

wise-editor/src/main/webapp/html/fulleditor.html

@@ -0,0 +1,203 @@
+<!DOCTYPE HTML>
+
+<html>
+<head>
+    <title>WiseMapping - Editor </title>
+    <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
+    <!--[if lt IE 9]>
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <![endif]-->
+    <link rel="stylesheet/less" type="text/css" href="../css/editor.less"/>
+
+    <script type='text/javascript' src='../js/mootools-core-1.3.2.js'></script>
+    <script type='text/javascript' src='../js/mootools-more-1.3.2.js'></script>
+    <script type='text/javascript' src='../js/core.js'></script>
+    <script type='text/javascript' src='../js/less-1.1.3.min.js'></script>
+
+    <link rel="icon" href="../images/favicon.ico" type="image/x-icon">
+    <link rel="shortcut icon" href="../images/favicon.ico" type="image/x-icon">
+
+    <script type="text/javascript">
+
+        var mapId = 'welcome';
+        var mindReady = false;
+        var viewMode = false;
+        $(document).addEvent('loadcomplete', function(resource) {
+            mindReady = resource == 'mind' ? true : mindReady;
+
+            if (mindReady) {
+                designer = buildDesigner(viewMode);
+
+                // Configure default persistence manager ...
+                mindplot.PersitenceManager.init(new mindplot.LocalStorageManager());
+
+                // Load map from XML ...
+                var persitence = mindplot.PersitenceManager.getInstance();
+                var mindmap;
+                try {
+                    mindmap = persitence.load(mapId);
+                } catch(e) {
+                    // If the map could not be loaded, create a new empty map...
+                    mindmap = mindplot.model.Mindmap.buildEmpty(mapId);
+                }
+                designer.loadMap(mindmap);
+
+                // If not problem has arisen, close the dialog ...
+                if (!window.hasUnexpectedErrors) {
+                    waitDialog.deactivate();
+                }
+            }
+        });
+
+    </script>
+</head>
+<body>
+
+<form method="post" id="printForm" name="printForm" action='' style="height:100%;" target="${mindmap.title}">
+    <input type="hidden" name="action" value="print">
+    <input type="hidden" name="mapId" value="${mindmap.id}">
+    <input type="hidden" name="mapSvg" value="">
+</form>
+
+<div id="waitDialog" style="display:none">
+    <div id="waitingContainer">
+        <div class="loadingIcon"></div>
+        <div class="loadingText">
+            Loading ...
+        </div>
+    </div>
+</div>
+
+<div id="errorDialog" style="display:none">
+    <div id="errorContainer">
+        <div class="loadingIcon"></div>
+        <div class="loadingText">
+            Unexpected error loading your map :(
+        </div>
+    </div>
+</div>
+
+<script type="text/javascript">
+
+    var waitDialog = new core.WaitDialog();
+    waitDialog.activate(true, $("waitDialog"));
+    $(window).addEvent("error", function(event) {
+
+        // Show error dialog ...
+        waitDialog.changeContent($("errorDialog"), false);
+        return false;
+    });
+</script>
+
+
+<div id="header">
+
+    <div id="headerInfo">
+        <div id="headerActions">
+            <span>MyWiseMappigs</span> | <span>Settings</span> | <span>Logout</span>
+        </div>
+        <div id="headerLogo"></div>
+        <div id="headerMapTitle">Title: <span>Welcome</span></div>
+    </div>
+    <div id="toolbar">
+        <div id="editTab" class="tabContent">
+            <div id="persist" class="buttonContainer">
+                <div id="save" class="buttonOn" title="Save">
+                    <img src="../images/save.png"/>
+                </div>
+                <div id="discart" class="buttonOn" title="Discard">
+                    <img src="../images/discard.png"/>
+                </div>
+                <div id="print" class="buttonOn" title="Print">
+                    <img src="../images/print.png"/>
+                </div>
+                <div id="export" class="buttonOn" title="Export">
+                    <img src="../images/export.png"/>
+                </div>
+            </div>
+            <div id="edit" class="buttonContainer">
+                <div id="undoEdition" class="buttonOn" title="Undo Edition">
+                    <img src="../images/undo.png"/>
+                </div>
+                <div id="redoEdition" class="buttonOn" title="Redo Edition">
+                    <img src="../images/redo.png"/>
+                </div>
+            </div>
+            <div id="zoom" class="buttonContainer">
+                <div id="zoomIn" class="buttonOn" title="Zoom In">
+                    <img src="../images/zoom-in.png"/>
+                </div>
+                <div id="zoomOut" class="buttonOn" title="Zoom Out">
+                    <img src="../images/zoom-out.png"/>
+                </div>
+            </div>
+            <div id="node" class="buttonContainer">
+                <div id="topicShape" class="buttonExtOn" title="Topic Shape">
+                    <img src="../images/topic-shape.png"/>
+                </div>
+                <div id="addTopic" class="buttonOn" title="Add Topic">
+                    <img src="../images/topic-add.png"/>
+                </div>
+                <div id="deleteTopic" class="buttonOn" title="Delete">
+                    <img src="../images/topic-delete.png"/>
+                </div>
+                <div id="topicBorder" class="buttonOn" title="Border Color">
+                    <img src="../images/topic-border.png"/>
+                </div>
+                <div id="topicColor" class="buttonExtOn" title="Background Color">
+                    <img src="../images/topic-color.png"/>
+                </div>
+                <div id="topicIcon" class="buttonExtOn" title="Add Icon">
+                    <img src="../images/topic-icon.png"/>
+                </div>
+                <div id="topicNote" class="buttonOn" title="Add Note">
+                    <img src="../images/topic-note.png"/>
+                </div>
+                <div id="topicLink" class="buttonOn" title="Add Link">
+                    <img src="../images/topic-link.png"/>
+                </div>
+                <div id="topicRelation" class="buttonOn" title="Add Relationship">
+                    <img src="../images/topic-relation.png"/>
+                </div>
+            </div>
+            <div id="font" class="buttonContainer">
+                <div id="fontFamily" class="buttonOn" title="Font Style">
+                    <img src="../images/font-type.png"/>
+                </div>
+                <div id="fontSize" class="buttonExtOn" title="Font Size">
+                    <img src="../images/font-size.png"/>
+                </div>
+                <div id="fontBold" class="buttonOn" title="Bold Style">
+                    <img src="../images/font-bold.png"/>
+                </div>
+                <div id="fontItalic" class="buttonOn" title="Italic Style">
+                    <img src="../images/font-italic.png"/>
+                </div>
+                <div id="fontColor" class="buttonExtOn" title="Fond Color" style="padding-top:4px">
+                    <img src="../images/font-color.png"/>
+
+                </div>
+            </div>
+            <div id="collaboration" class="buttonContainer">
+                <div id="tagIt" class="buttonOn" title="Tag">
+                    <img src="../images/tag.png"/>
+                </div>
+                <div id="shareIt" class="buttonOn" title="Share">
+                    <img src="../images/share.png"/>
+                </div>
+                <div id="publishIt" class="buttonOn" title="Publish">
+                    <img src="../images/public.png"/>
+                </div>
+                <div id="history" class="buttonOn" title="History">
+                    <img src="../images/history.png"/>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div id="headerNotifier"></div>
+</div>
+
+<div id="mindplot"></div>
+<script type="text/javascript" src="../js/editor.js"></script>
+</body>
+</html>

wise-editor/src/main/webapp/html/viewmode.html

@@ -0,0 +1,74 @@
+<!DOCTYPE HTML>
+
+
+<html>
+<head>
+    <title>WiseMapping - View </title>
+    <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
+    <!--[if lt IE 9]>
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <![endif]-->
+    <link rel="stylesheet" type="text/css" href="../css/embedded.css"/>
+    <script type='text/javascript' src='../js/mootools-core-1.3.2.js'></script>
+    <script type='text/javascript' src='../js/mootools-more-1.3.2.js'></script>
+    <script type='text/javascript' src='../js/core.js'></script>
+
+    <link rel="icon" href="../images/favicon.ico" type="image/x-icon">
+    <link rel="shortcut icon" href="../images/favicon.ico" type="image/x-icon">
+
+    <script type="text/javascript">
+
+        var mapId = 'welcome';
+        var viewMode = true;
+
+        var mindReady = false;
+        $(document).addEvent('loadcomplete', function(resource) {
+            mindReady = resource == 'mind' ? true : mindReady;
+
+            if (mindReady) {
+                designer = buildDesigner(viewMode);
+
+                // Configure default persistence manager ...
+                mindplot.PersitenceManager.init(new mindplot.LocalStorageManager());
+
+                // Load map from XML ...
+                var persitence = mindplot.PersitenceManager.getInstance();
+                var mindmap;
+                try {
+                    mindmap = persitence.load(mapId);
+                } catch(e) {
+                    // If the map could not be loaded, create a new empty map...
+                    mindmap = mindplot.model.Mindmap.buildEmpty(mapId);
+                }
+                designer.loadMap(mindmap);
+            }
+
+            $('zoomIn').addEvent('click', function() {
+                designer.zoomIn();
+            });
+
+            $('zoomOut').addEvent('click', function() {
+                designer.zoomOut();
+            });
+        });
+
+
+    </script>
+</head>
+<body>
+
+<div id="mapContainer">
+    <div id="mindplot"></div>
+    <div id="embFooter">
+        <div id="logo"></div>
+        <div id="zoomIn" class="button"></div>
+        <div id="zoomOut" class="button"></div>
+        <div id="mapDetails">
+            <span class="title">Author: </span> Paulo Veiga
+            <span class="title">Description: </span>View Mode
+        </div>
+    </div>
+</div>
+<script type="text/javascript" src="../js/editor.js"></script>
+</body>
+</html>

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,13 +26,14 @@ 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 (!viewMode) {
         if ($('toolbar')) {
             var menu = new mindplot.widget.Menu(designer, 'toolbar', mapId);
 
@@ -41,6 +42,7 @@ function buildDesigner() {
                 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;
+
+}