Editor working .

wise-webapp/src/main/webapp/css/editor2.css

@@ -0,0 +1,699 @@
+@import "widget/lightbox.css";
+@import "libraries/moodialog/css/MooDialog.css";
+
+
+
+/* Common Default Style */
+html {
+    overflow: hidden;
+}
+
+body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
+    margin: 0;
+    padding: 0;
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+fieldset, img {
+    border: 0;
+}
+
+address, caption, cite, code, dfn, em, strong, th, var {
+    font-style: normal;
+    font-weight: normal;
+}
+
+ol, ul {
+    list-style: none;
+}
+
+caption, th {
+    text-align: left;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-size: 100%;
+    font-weight: normal;
+}
+
+q:before, q:after {
+    content: '';
+}
+
+abbr, acronym {
+    border: 0;
+}
+
+/**
+ * Percents could work for IE, but for backCompat purposes, we are using keywords.
+ * x-small is for IE6/7 quirks mode.
+ *
+ */
+body {
+    font: 13px arial, helvetica, clean, sans-serif;
+    font-size: small;
+    font: x-small;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -o-user-select: none;
+    user-select: none;
+}
+
+table {
+    font-size: inherit;
+    font-size: 100%;
+}
+
+/**
+ * 99% for safari; 100% is too large
+ */
+select, input, textarea {
+    font: 99% arial, helvetica, clean, sans-serif;
+}
+
+/**
+ * Bump up !IE to get to 13px equivalent
+ */
+pre, code {
+    font: 115% monospace;
+    font-size: 100%;
+}
+
+/**
+ * Default line-height based on font-size rather than "computed-value"
+ * see: http://www.w3.org/TR/CSS21/visudet.html#line-height
+ */
+
+body * {
+    line-height: 1.22em;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font: normal 80% "trebuchet ms", verdana, arial, helvetica, sans-serif;
+    background-color: #fff;
+}
+
+img {
+    border: 0;
+}
+
+form {
+    padding: 0;
+    margin: 0;
+}
+
+p {
+    margin: 5px 0 5px 0;
+}
+
+ul {
+    list-style-position: inside;
+}
+
+a:link, a:visited {
+    font: bold 100%;
+    text-decoration: underline;
+    color: black;
+}
+
+a:hover, a:active {
+    font: bold 100%;
+    text-decoration: underline;
+    color: black;
+}
+
+h2 {
+    font-size: 160%;
+    color: #8e9181;
+}
+
+h1 {
+    font-style: normal;
+    font-size: 180%;
+    color: white;
+    padding-bottom: 2px;
+}
+
+h3 {
+    /* use as subhead on main body */
+    clear: left;
+    font-style: normal;
+    font-size: 130%;
+    color: #6b6f5b;
+}
+
+h4 {
+    /* use as headers in footer */
+    font-weight: bold;
+    font-size: 120%;
+    border-bottom: 1px solid #8e9181;
+    color: #e2e3dd;
+    padding-bottom: 10px;
+    width: 400px;
+}
+
+/**********************************************************/
+/* End: Common Default Style */
+/**********************************************************/
+
+/**********************************************************/
+/* Error Dialog ... */
+/**********************************************************/
+
+#waitDialog {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    height: 200px;
+}
+
+#waitingContainer, #errorContainer {
+    position: relative;
+    top: 80px;
+    height: 120px; /*background: whitesmoke;*/
+    background: #FEFEFE;
+    opacity: .99;
+    padding: 15px;
+    width: 100%;
+    border: 1px solid;
+    border-color: #a9a9a9;
+
+}
+
+#errorContainer {
+    width: 400px;
+    border: 1px solid red;
+}
+
+#waitingContainer .loadingText {
+    position: relative;
+    top: 50%;
+    margin-top: -35px;
+    font-size: 30px;
+    font-weight: bold;
+    vertical-align: text-bottom;
+    height: 30px;
+    float: left;
+}
+
+#errorContainer .loadingText {
+    position: relative;
+    top: 50%;
+    margin-top: -80px;
+    font-size: 15px;
+    font-weight: bold;
+    vertical-align: text-bottom;
+    height: 30px;
+    float: right;
+    padding-left: 120px;
+}
+
+#waitingContainer .loadingIcon {
+    position: relative;
+    background: url(../images/loadingIcon.gif) no-repeat;
+    top: 50%;
+    margin-top: -65px;
+    height: 100px;
+    width: 121px;
+    float: left;
+    clear: both;
+}
+
+#errorContainer .loadingIcon {
+    position: relative;
+    background: url(../images/errorIcon.png) no-repeat;
+    top: 50%;
+    margin-top: -65px;
+    height: 100px;
+    width: 121px;
+    float: left;
+    clear: both;
+}
+
+/********************************************************************************/
+/* Toolbar Styles */
+/********************************************************************************/
+
+div#header {
+    width: 100%;
+    height: 75px;
+    background: #393939; /* Old browsers */
+    background: -moz-linear-gradient(top, #393939 0%, #000000 100%); /* FF3.6+ */
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #393939), color-stop(100%, #000000)); /* Chrome,Safari4+ */
+    background: -webkit-linear-gradient(top, #393939 0%, #000000 100%); /* Chrome10+,Safari5.1+ */
+    background: -o-linear-gradient(top, #393939 0%, #000000 100%); /* Opera11.10+ */
+    background: -ms-linear-gradient(top, #393939 0%, #000000 100%); /* IE10+ */
+    background: linear-gradient(top, #393939 0%, #000000 100%); /* W3C */
+}
+
+div#headerLogo {
+    background: url(../nicons/logo-small.png) no-repeat center top;
+    height: 40px;
+    width: 80px;
+    float: left;
+}
+
+div#headerInfo {
+    width: 100%;
+    height: 45px;
+    color: white;
+}
+
+div#headerActions {
+    text-align: right;
+    margin-top: 13px;
+    padding-right: 10px;
+    color: white;
+    float: right;
+}
+
+div#headerActions span {
+    border-bottom: 3px solid rgb(247, 201, 49);
+}
+
+div#headerActions a {
+    color: white;
+    text-decoration: none;
+}
+
+div#headerMapTitle {
+    width: 200px;
+    height:(45 ) - 13;
+    text-align: left;
+    padding-top: 13px;
+    padding-left: 50px;
+    color: white;
+    float: left;
+    font-style: italic;
+}
+
+div#headerMapTitle span {
+    padding: 4px 50px;
+    border: 1px solid rgb(90, 90, 90);
+    background-color: rgb(45, 45, 45);
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
+}
+
+div#toolbar {
+    width: 100%;
+    height: 35px;
+    background-image: linear-gradient(bottom, rgb(229, 227, 209) 47%, rgb(252, 250, 237) 87%);
+    background-image: -o-linear-gradient(bottom, rgb(229, 227, 209) 47%, rgb(252, 250, 237) 87%);
+    background-image: -moz-linear-gradient(bottom, rgb(229, 227, 209) 47%, rgb(252, 250, 237) 87%);
+    background-image: -webkit-linear-gradient(bottom, rgb(229, 227, 209) 47%, rgb(252, 250, 237) 87%);
+    background-image: -ms-linear-gradient(bottom, rgb(229, 227, 209) 47%, rgb(252, 250, 237) 87%);
+
+    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.47, rgb(229, 227, 209)), color-stop(0.87, rgb(252, 250, 237)));
+    border-bottom: 3px double rgb(190, 190, 190);
+    border-top: 1px solid rgb(190, 190, 190);
+}
+
+div#toolbar .buttonContainer {
+    height: 35px;
+    float: left;
+    /*color: black;*/
+    /*border: 1px solid #BBB4D6;*/
+    margin-left: 5px;
+}
+
+/******************************************************************************************/
+/* Buttons*/
+/******************************************************************************************/
+
+div#toolbar .buttonOn, div#toolbar .buttonOff, div#toolbar .buttonActive, div#toolbar .buttonOn:hover {
+    width: 28px;
+    height: 28px;
+    float: left;
+    text-align: center;
+    z-index: 4;
+    margin-top: 3px;
+    padding-top: 2px;
+    padding-left: 2px;
+}
+
+div#toolbar .buttonOn:hover {
+    cursor: pointer;
+    opacity: 1;
+    background: url(../nicons/btn-bg-hover.png) no-repeat center top;
+}
+
+div#toolbar .buttonOn {
+    opacity: 0.8;
+    background: url(../nicons/btn-bg-normal.png) no-repeat center top;
+}
+
+div#toolbar .buttonOff {
+    opacity: 0.4;
+    background: url(../nicons/btn-bg-normal.png) no-repeat center top;
+}
+
+div#exportAnchor {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+}
+
+div#toolbar .buttonExtOn, div#toolbar .buttonExtOff, div#toolbar .buttonExtActive, div#toolbar .buttonExtOn:hover {
+    width: 40px;
+    height: 28px;
+    float: left;
+    text-align: left;
+    z-index: 4;
+    margin-top: 3px;
+    padding-top: 2px;
+    padding-left: 5px;
+}
+
+div#toolbar .buttonExtOn:hover {
+    opacity: 1;
+    background: url(../nicons/btne-bg-hover.png) no-repeat center top;
+
+}
+
+div#toolbar .buttonExtActive {
+    opacity: 1;
+    background: url(../nicons/btne-bg-selected.png) no-repeat center top;
+
+}
+
+div#toolbar .buttonExtOn {
+    opacity: 0.8;
+    background: url(../nicons/btne-bg-normal.png) no-repeat center top;
+}
+
+div#toolbar .buttonExtOff {
+    opacity: 0.4;
+    background: url(../nicons/btne-bg-normal.png) no-repeat center top;
+}
+
+div#exportAnchor {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+}
+
+/*div#saveButton {*/
+/*background: url(../nicons/save.png) no-repeat center top;*/
+/*}*/
+
+/*div#undoEdition {*/
+/*background: url(../nicons/undo.png) no-repeat center top;*/
+/*}*/
+
+/*div#redoEdition {*/
+/*background: url(../nicons/redo.png) no-repeat center top;*/
+/*}*/
+
+/*div#export {*/
+/*background: url(../nicons/export.png) no-repeat center top;*/
+/*}*/
+
+/*div#zoomIn {*/
+/*background: url(../nicons/zoom-in.png) no-repeat center top;*/
+/*}*/
+
+/*div#zoomOut {*/
+/*background: url(../nicons/zoom-out.png) no-repeat center top;*/
+/*}*/
+
+/*div#addTopic {*/
+/*background: url(../nicons/topic-add.png) no-repeat center top;*/
+/*}*/
+
+/*div#deleteTopic {*/
+/*background: url(../nicons/topic-delete.png) no-repeat center top;*/
+/*}*/
+
+/*div#topicColor {*/
+/*background: url(../nicons/topic-color.png) no-repeat center top;*/
+/*}*/
+
+/*div#topicIcon {*/
+/*background: url(../nicons/topic-icon.png) no-repeat center top;*/
+/*}*/
+
+/*div#topicNote {*/
+/*background: url(../nicons/note.png) no-repeat center top;*/
+/*}*/
+
+/*div#topicNote {*/
+/*background: url(../nicons/topic-icon.png) no-repeat center top;*/
+/*z-index: 4;*/
+/*}*/
+
+/*div#topicLink {*/
+/*background: url(../nicons/topic-link.png) no-repeat center top;*/
+/*z-index: 4;*/
+/*}*/
+
+/*div#topicNote {*/
+/*background-image: url(../nicons/note.png);*/
+/*z-index: 4;*/
+/*}*/
+
+/*div#topicBorder {*/
+/*background: url(../nicons/topic-border.png) no-repeat center top;*/
+/*}*/
+
+/*div#fontFamily {*/
+/*background: url(../nicons/font-type.png) no-repeat center top;*/
+/*}*/
+
+/*div#topicShape {*/
+/*background: url(../nicons/topic-shape.png) no-repeat center top;*/
+/*}*/
+
+/*div#fontBold {*/
+/*background: url(../nicons/font-bold.png) no-repeat center top;*/
+/*}*/
+
+/*div#fontItalic {*/
+/*background: url(../nicons/font-italic.png) no-repeat center top;*/
+/*}*/
+
+/*div#fontColor {*/
+/*background: url(../nicons/font-color.png) no-repeat center top;*/
+/*}*/
+
+/*div#fontSize {*/
+/*background: url(../nicons/font-size.png) no-repeat center top;*/
+/*}*/
+
+/*div#shareIt {*/
+/*background: url(../nicons/share.png) no-repeat center top;*/
+/*}*/
+
+/*div#publishIt {*/
+/*background: url(../nicons/publish.png) no-repeat center top;*/
+/*}*/
+
+/*div#tagIt {*/
+/*background: url(../nicons/tag.png) no-repeat center top;*/
+/*}*/
+
+div#topicRelation {
+    width: 56px;
+    background: url(../nicons/topic-relation.png) no-repeat center top;
+    z-index: 4;
+}
+
+div#colorPalette {
+    border: 1px solid #bbb4d6;
+    display: none;
+    position: absolute;
+    z-index: 4;
+    width: 160px;
+    top: 89px;
+}
+
+/*.toolbarPanel {*/
+/*z-index: 4;*/
+/*top: 75px;*/
+/*-moz-transition: opacity 0.218s ease 0s;*/
+/*background: none repeat scroll 0 0 #FFFFFF;*/
+/*border: 1px solid rgba(0, 0, 0, 0.2);*/
+/*box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);*/
+/*cursor: default;*/
+/*font-size: 13px;*/
+/*margin: 0;*/
+/*outline: medium none;*/
+/*padding: 0 0 6px;*/
+/*position: absolute;*/
+/*}*/
+
+div.toolbarPanelLink, div.toolbarPanelLinkSelectedLink {
+    cursor: pointer;
+    color: black;
+    margin: 1px;
+    cursor: pointer;
+    font-size: 12px;
+    padding: 5px 15px;
+}
+
+div.toolbarPanelLink:hover, div.toolbarPanelLinkSelectedLink {
+    cursor: pointer;
+    background-color: #efefef;
+}
+
+div#mindplot {
+    position: relative;
+    top: 0;
+    left: 0;
+    width: 100%;
+    border: 0;
+}
+
+div#workspaceContainer {
+    /*background: url(../images/grid.gif) bottom left repeat !important;*/
+}
+
+div#small_error_icon {
+    padding-left: 18px;
+    min-height: 16px;
+    background: url(../images/error_icon.png) bottom left no-repeat !important;
+}
+
+.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);
+}
+
+.toolbarPaneTip {
+    background-color: rgb(228, 226, 210);
+    padding: 5px 5px;
+    color: #f5f5f5;
+    /*font-weight: bold;*/
+    /*width: 100px;*/
+    font-size: 11px;
+    -moz-border-radius: 60px;
+    -webkit-border-radius: 6px;
+    border-radius: 6px;
+    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
+    border: 3px double rgb(190, 190, 190);
+}
+
+.toolbarTip {
+    background-color: #000000;
+    padding: 5px 5px;
+    color: #f5f5f5;
+    /*font-weight: bold;*/
+    /*width: 100px;*/
+    font-size: 11px;
+}
+
+/* */
+.btn-primary {
+    cursor: pointer;
+    display: inline-block;
+    padding: 5px 14px 6px;
+    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
+    color: #333;
+    font-size: 13px;
+    line-height: normal;
+    border: 1px solid #ccc;
+    border-bottom-color: #bbb;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+    -webkit-transition: 0.1s linear all;
+    -moz-transition: 0.1s linear all;
+    -ms-transition: 0.1s linear all;
+    -o-transition: 0.1s linear all;
+    transition: 0.1s linear all;
+    color: #ffffff;
+    background-color: #0064cd;
+    background-repeat: repeat-x;
+    background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));
+    background-image: -moz-linear-gradient(top, #049cdb, #0064cd);
+    background-image: -ms-linear-gradient(top, #049cdb, #0064cd);
+    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));
+    background-image: -webkit-linear-gradient(top, #049cdb, #0064cd);
+    background-image: -o-linear-gradient(top, #049cdb, #0064cd);
+    background-image: linear-gradient(top, #049cdb, #0064cd);
+    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+    border-color: #0064cd #0064cd #003f81;
+    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+}
+
+.btn-primary:hover {
+    background-position: 0 -15px;
+    text-decoration: none;
+}
+
+.btn-secondary {
+    cursor: pointer;
+    display: inline-block;
+    background-color: #e6e6e6;
+    background-repeat: no-repeat;
+    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
+    background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
+    background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
+    background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
+    background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
+    background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
+    padding: 5px 14px 6px;
+    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
+    color: #333;
+    font-size: 13px;
+    line-height: normal;
+    border: 1px solid #ccc;
+    border-bottom-color: #bbb;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+    -webkit-transition: 0.1s linear all;
+    -moz-transition: 0.1s linear all;
+    -ms-transition: 0.1s linear all;
+    -o-transition: 0.1s linear all;
+    transition: 0.1s linear all;
+    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+}
+
+.btn-secondary:hover {
+    background-position: 0 -15px;
+    text-decoration: none;
+}

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

@@ -25,164 +25,10 @@ Asset.javascript('../js/mindplot-min.js', {
 var designer = null;
 /* JavaScript tabs changer */
 
-// CSS helper functions
-CSS = {
-    // Adds a class to an element.
-    AddClass: function (e, c) {
-        if (!e.className.match(new RegExp("\\b" + c + "\\b", "i")))
-            e.className += (e.className ? " " : "") + c;
-    },
-
-    // Removes a class from an element.
-    RemoveClass: function (e, c) {
-        e.className = e.className.replace(new RegExp(" \\b" + c + "\\b|\\b" + c + "\\b ?", "gi"), "");
-    }
-};
-
-// Functions for handling tabs.
-Tabs = {
-    // Changes to the tab with the specified ID.
-    GoTo: function (contentId, skipReplace) {
-        // This variable will be true if a tab for the specified
-        // content ID was found.
-        var foundTab = false;
-
-        // Get the TOC element.
-        var toc = $("toc");
-        if (toc) {
-            var lis = toc.getElementsByTagName("li");
-            for (var j = 0; j < lis.length; j++) {
-                var li = lis[j];
-
-                // Give the current tab link the class "current" and
-                // remove the class from any other TOC links.
-                var anchors = li.getElementsByTagName("a");
-                var anchors = li.getElementsByTagName("a");
-                for (var k = 0; k < anchors.length; k++) {
-                    if (anchors[k].hash == "#" + contentId) {
-                        CSS.AddClass(li, "current");
-                        foundTab = true;
-                        break;
-                    } else {
-                        CSS.RemoveClass(li, "current");
-                    }
-                }
-            }
-        }
-
-        // Show the content with the specified ID.
-        var divsToHide = [];
-        var divs = document.getElementsByTagName("div");
-        for (var i = 0; i < divs.length; i++) {
-            var div = divs[i];
-
-            if (div.className.match(/\btabContent\b/i)) {
-                if (div.id == "_" + contentId)
-                    div.style.display = "block";
-                else {
-                    divsToHide.push(div);
-                }
-            }
-        }
-
-        // Hide the other content boxes.
-        for (var i = 0; i < divsToHide.length; i++)
-            divsToHide[i].style.display = "none";
-
-        // Change the address bar.
-        if (!skipReplace) window.location.replace("#" + contentId);
-    },
-
-    OnClickHandler: function (e) {
-        // Stop the event (to stop it from scrolling or
-        // making an entry in the history).
-        if (!e) e = window.event;
-        if (e.preventDefault) e.preventDefault(); else e.returnValue = false;
-
-        // Get the name of the anchor of the link that was clicked.
-        Tabs.GoTo(this.hash.substring(1));
-    },
-
-    Init: function () {
-        if (!document.getElementsByTagName) {
-            return;
-        }
-
-        // Attach an onclick event to all the anchor links on the page.
-        var anchors = document.getElementsByTagName("a");
-        for (var i = 0; i < anchors.length; i++) {
-            var a = anchors[i];
-            if (a.hash) {
-                a.onclick = Tabs.OnClickHandler;
-            }
-        }
-
-        var contentId;
-        if (window.location.hash)
-            contentId = window.location.hash.substring(1);
-
-        var divs = document.getElementsByTagName("div");
-        for (var i = 0; i < divs.length; i++) {
-            var div = divs[i];
-
-            if (div.className.match(/\btabContent\b/i)) {
-                if (!contentId) contentId = div.id;
-                div.id = "_" + div.id;
-            }
-        }
-
-        if (contentId)
-            Tabs.GoTo(contentId, true);
-    }
-};
-
-if (document.createStyleSheet) {
-    var style = document.createStyleSheet();
-    style.addRule("div.tabContent", "display: none;");
-    style.addRule("div" + contentId, "display: block;");
-} else {
-    var head = document.getElementsByTagName("head")[0];
-    if (head) {
-        var style = document.createElement("style");
-        style.setAttribute("type", "text/css");
-        style.appendChild(document.createTextNode("div.tabContent { display: none; }"));
-        style.appendChild(document.createTextNode("div" + contentId + " { display: block; }"));
-        head.appendChild(style);
-    }
-}
-
-// Hook up the OnLoad event to the tab initialization function.
-Tabs.Init();
-
-// Hide the content while waiting for the onload event to trigger.
-var contentId = window.location.hash || "#Introduction";
-
 function setUpToolbar(designer, isTryMode) {
 
     var menu = new mindplot.widget.Menu(designer, 'toolbar');
 
-    if ($('helpButton') != null) {
-        var helpPanel = new Panel({panelButton:$('helpButton'), backgroundColor:'black'});
-        helpPanel.setContent(Help.buildHelp(helpPanel));
-    }
-
-    if ($('helpButtonFirstSteps') != null) {
-        var firstStepsPanel = $('helpButtonFirstSteps')
-        firstStepsPanel.addEvent('click', function(event) {
-            var firstStepWindow = window.open("firststeps.htm", "WiseMapping", "width=100px, height=100px");
-            firstStepWindow.focus();
-            firstStepWindow.moveTo(0, 0);
-            firstStepWindow.resizeTo(screen.availWidth, screen.availHeight);
-        });
-    }
-
-    if ($('helpButtonKeyboard') != null) {
-        var keyboardPanel = $('helpButtonKeyboard')
-        keyboardPanel.addEvent('click', function(event) {
-            MOOdalBox.open('keyboard.htm', 'KeyBoard Shortcuts', '500px 400px', false)
-        });
-    }
-
     // Autosave ...
     if (!isTryMode) {
         (function() {
@@ -210,7 +56,6 @@ function setUpToolbar(designer, isTryMode) {
 
 }
 
-
 function buildDesigner(editorProperties, isTryMode) {
     $assert(editorProperties, "editorProperties can not be null");
 

wise-webapp/src/main/webapp/jsp/mindmapEditor.jsp

@@ -13,14 +13,16 @@
     <!--[if lt IE 9]>
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <![endif]-->
-
-    <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
     <title><spring:message code="SITE.TITLE"/> - ${mindmap.title} </title>
-    <link rel="stylesheet" type="text/css" href="../css/editor.css"/>
+    <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
+
+    <script type='text/javascript' src='../js/less-1.1.3.min.js'></script>
+    <link rel="stylesheet" type="text/css" href="../css/editor2.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='../js/libraries/mootools/mootools-more-1.3.2.1-yui.js'></script>
+
     <script type="text/javascript" src="../dwr/engine.js"></script>
     <script type="text/javascript" src="../dwr/interface/LoggerService.js"></script>
     <script type='text/javascript' src='../js/core.js'></script>
@@ -60,9 +62,6 @@
 
 </head>
 <body>
-<jsp:include page="editorHeader.jsp">
-    <jsp:param name="onlyActionHeader" value="true"/>
-</jsp:include>
 
 <form method="post" id="printForm" name="printForm" action='<c:url value="export.htm"/>' style="height:100%;"
       target="${mindmap.title}">
@@ -75,7 +74,7 @@
     <div id="waitingContainer">
         <div class="loadingIcon"></div>
         <div class="loadingText">
-            <spring:message code="EDITOR.LOADING"/>
+            Loading ...
         </div>
     </div>
 </div>
@@ -84,7 +83,7 @@
     <div id="errorContainer">
         <div class="loadingIcon"></div>
         <div class="loadingText">
-            <spring:message code="EDITOR.ERROR_LOADING"/>
+            Unexpected error loading your map :(
         </div>
     </div>
 </div>
@@ -119,223 +118,110 @@
     <div id="paletteHeader"></div>
 </div>
 
-<div id="toolbar">
-    <div id="editTab" class="tabContent">
-        <div id="file" class="buttonContainer" title="<spring:message code="FILE"/>">
-            <fieldset>
-                <legend>
-                    <spring:message code="FILE"/>
-                </legend>
-                <div id="saveButton" class="buttonOn" title="<spring:message code="SAVE"/>">
-                    <div class="toolbarLabel"><p><spring:message code="SAVE"/></p></div>
-                </div>
-                <div id="discardButton" class="buttonOn" title="<spring:message code="CLOSE"/>">
-                    <div class="toolbarLabel"><p><spring:message code="CLOSE"/></p></div>
-                </div>
-                <div id="undoEdition" class="buttonOn" title="<spring:message code="UNDO_EDITION"/>">
-                    <div class="toolbarLabel"><p><spring:message code="UNDO"/></p></div>
-                </div>
-                <div id="redoEdition" class="buttonOn" title="<spring:message code="REDO_EDITION"/>">
-                    <div class="toolbarLabel"><p><spring:message code="REDO"/></p></div>
-                </div>
+<div id="header">
+    <div id="headerInfo">
+        <div id="headerActions">
 
-                <div id="print" class="buttonOn" title="<spring:message code="PRINT"/>" onclick="printMap();">
-                    <div class="toolbarLabel"><p><spring:message code="PRINT"/></p></div>
-                </div>
-
-                <div id="export" class="buttonOn" title="<spring:message code="EXPORT"/>">
-                    <div class="toolbarLabel"><p><spring:message code="EXPORT"/></p></div>
-                    <a id="exportAnchor" href="export.htm?mapId=${mindmap.id}" rel="moodalbox 600px 400px"
-                       title="<spring:message code="EXPORT_DETAILS"/>">
-                    </a>
-                </div>
-            </fieldset>
+            <spring:message code="WELCOME"/>, ${principal.firstname}|<span><a
+                href="${pageContext.request.contextPath}/c/mymaps.htm"><spring:message code="MY_WISEMAPS"/></a></span> |
+            <span><a href="${pageContext.request.contextPath}/c/settings.htm" rel="moodalbox 400px 250px wizard"
+                     title="<spring:message code="SETTINGS_DETAIL"/>"><spring:message code="SETTINGS"/></a></span>
+            | <span><a href="${pageContext.request.contextPath}/c/logout.htm" title="<spring:message code="LOGOUT"/>">
+            <spring:message code="LOGOUT"/>
+        </a></span>
         </div>
-        <div id="zoom" class="buttonContainer" title="Zoom In">
-            <fieldset>
-                <legend>
-                    <spring:message code="ZOOM"/>
-                </legend>
-                <div id="zoomIn" class="buttonOn" title="<spring:message code="ZOOM_IN"/>">
-                    <div class="toolbarLabel"><p><spring:message code="IN"/></p></div>
-                </div>
-                <div id="zoomOut" class="buttonOn" title="<spring:message code="ZOOM_OUT"/>">
-                    <div class="toolbarLabel"><p><spring:message code="OUT"/></p></div>
-                </div>
-            </fieldset>
+        <div id="headerLogo"></div>
+        <div id="headerMapTitle">Title: <span>Hola</span></div>
+    </div>
+    <div id="toolbar">
+        <div id="persist" class="buttonContainer">
+            <div id="save" class="buttonOn" title="Save">
+                <img src="../nicons/save.png"/>
+            </div>
+            <div id="discart" class="buttonOn" title="Discart">
+                <img src="../nicons/discart.png"/>
+            </div>
         </div>
-        <div id="node" class="buttonContainer" title="Node Properties">
-            <fieldset>
-                <legend>
-                    <spring:message code="TOPIC"/>
-                </legend>
-                <div id="topicShape" class="buttonOn" title="<spring:message code="TOPIC_SHAPE"/>">
-                    <div class="toolbarLabel"><p><spring:message code="SHAPE"/></p></div>
-                </div>
-                <div id="addTopic" class="buttonOn" title="<spring:message code="TOPIC_ADD"/>">
-                    <div class="toolbarLabel"><p><spring:message code="ADD"/></p></div>
-                </div>
-                <div id="deleteTopic" class="buttonOn" title="<spring:message code="TOPIC_DELETE"/>">
-                    <div class="toolbarLabel"><p><spring:message code="DELETE"/></p></div>
-                </div>
-                <div id="topicBorder" class="buttonOn" title="<spring:message code="TOPIC_BORDER_COLOR"/>">
-                    <div class="toolbarLabel"><p><spring:message code="BORDER"/></p></div>
-                </div>
-                <div id="topicColor" class="buttonOn" title="<spring:message code="TOPIC_BACKGROUND_COLOR"/>">
-                    <div class="toolbarLabel"><p><spring:message code="COLOR"/></p></div>
-                </div>
-                <div id="topicIcon" class="buttonOn" title="<spring:message code="TOPIC_ICON"/>">
-                    <div class="toolbarLabel"><p><spring:message code="ICON"/></p></div>
-                </div>
-                <div id="topicNote" class="buttonOn" title="<spring:message code="TOPIC_NOTE"/>">
-                    <div class="toolbarLabel"><p><spring:message code="NOTE"/></p></div>
-                </div>
-                <div id="topicLink" class="buttonOn" title="<spring:message code="TOPIC_LINK"/>">
-                    <div class="toolbarLabel"><p><spring:message code="LINK"/></p></div>
-                </div>
-                <div id="topicRelation" class="topicRelation buttonOn"
-                     title="<spring:message code="TOPIC_RELATIONSHIP"/>">
-                    <div class="relationshiplabel toolbarLabel"><p><spring:message code="TOPIC_RELATIONSHIP"/></p></div>
-                </div>
-            </fieldset>
+        <div id="edit" class="buttonContainer">
+            <div id="undoEdition" class="buttonOn" title="Undo Edition">
+                <img src="../nicons/undo.png"/>
+            </div>
+            <div id="redoEdition" class="buttonOn" title="Redo Edition">
+                <img src="../nicons/redo.png"/>
+            </div>
         </div>
-        <div id="font" class="buttonContainer" title="Font Properties">
-            <fieldset>
-                <legend>
-                    <spring:message code="FONT"/>
-                </legend>
-                <div id="fontFamily" class="buttonOn" title="<spring:message code="FONT_TYPE"/>">
-                    <div class="toolbarLabel"><p><spring:message code="TYPE"/></p></div>
-                </div>
-                <div id="fontSize" class="buttonOn" title="<spring:message code="FONT_SIZE"/>">
-                    <div class="toolbarLabel"><p><spring:message code="SIZE"/></p></div>
-                </div>
-                <div id="fontBold" class="buttonOn" title="<spring:message code="FONT_BOLD"/>">
-                    <div class="toolbarLabel"><p><spring:message code="BOLD"/></p></div>
-                </div>
-                <div id="fontItalic" class="buttonOn" title="<spring:message code="FONT_ITALIC"/>">
-                    <div class="toolbarLabel"><p><spring:message code="ITALIC"/></p></div>
-                </div>
-                <div id="fontColor" class="buttonOn" title="<spring:message code="FONT_COLOR"/>">
-                    <div class="toolbarLabel"><p><spring:message code="COLOR"/></p></div>
-                </div>
-            </fieldset>
+        <div id="zoom" class="buttonContainer">
+            <div id="zoomIn" class="buttonOn" title="Zoom In">
+                <img src="../nicons/zoom-in.png"/>
+            </div>
+            <div id="zoomOut" class="buttonOn" title="Zoom Out">
+                <img src="../nicons/zoom-out.png"/>
+            </div>
         </div>
-        <div id="share" class="buttonContainer" title="Share Properties">
-            <c:choose>
-                <c:when test="${editorTryMode==false}">
-                    <fieldset>
-                        <legend>
-                            <spring:message code="COLLABORATION"/>
-                        </legend>
-                        <a id="tagAnchor" href="tags.htm?mapId=${mindmap.id}" rel="moodalbox 400px 200px wizard"
-                           title="<spring:message code="TAGS_DETAILS"/>">
-                            <div id="tagIt" class="buttonOn" title="<spring:message code="TAG"/>">
-                                <div class="toolbarLabel"><p><spring:message code="TAG"/></p></div>
-                            </div>
-                        </a>
-                        <c:choose>
-                            <c:when test="${mindmap.owner==user}">
-                                <a id="shareAnchor" href="<c:out value="${shareMap}"/>&amp;mapId=${mindmap.id}"
-                                   rel="moodalbox 780px 530px wizard" title="<spring:message code="SHARE_DETAILS"/>">
-                                    <div id="shareIt" class="buttonOn" title="<spring:message code="COLLABORATION"/>">
-                                        <div class="toolbarLabel"><p><spring:message code="SHARE"/></p></div>
-                                    </div>
-                                </a>
-                                <a id="publishAnchor" href="publish.htm?mapId=${mindmap.id}"
-                                   rel="moodalbox 600px 400px wizard"
-                                   title="<spring:message code="PUBLISH_MSG"/>">
-                                    <div id="publishIt" class="buttonOn" title="<spring:message code="PUBLISH"/>">
-                                        <div class="toolbarLabel"><p><spring:message code="PUBLISH"/></p></div>
-                                    </div>
-                                </a>
-                            </c:when>
-                        </c:choose>
-                        <a id="historyAnchor" href="history.htm?action=list&amp;mapId=${mindmap.id}"
-                           rel="moodalbox 600px 400px wizard" title="<spring:message code="HISTORY_MSG"/>">
-                            <div id="history" class="buttonOn" title="<spring:message code="HISTORY_MSG"/>">
-                                <div class="toolbarLabel"><p><spring:message code="HISTORY"/></p></div>
-                            </div>
-                        </a>
-                    </fieldset>
-                </c:when>
-                <c:otherwise>
-                    <fieldset>
-                        <legend>
-                            <spring:message code="COLLABORATION"/>
-                        </legend>
-                        <div id="tagIt" class="buttonOn" title="<spring:message code="TAG"/>">
-                            <div class="toolbarLabel"><p><spring:message code="TAG"/></p></div>
-                        </div>
-                        <div id="shareIt" class="buttonOn" title="<spring:message code="COLLABORATE"/>">
-                            <div class="toolbarLabel"><p><spring:message code="SHARE"/></p></div>
-                        </div>
-                        <div id="publishIt" class="buttonOn" title="<spring:message code="PUBLISH"/>">
-                            <div class="toolbarLabel"><p><spring:message code="PUBLISH"/></p></div>
-                        </div>
-                        <div id="history" class="buttonOn" title="<spring:message code="HISTORY_MSG"/>">
-                            <div class="toolbarLabel"><p><spring:message code="HISTORY"/></p></div>
-                        </div>
-                    </fieldset>
-                </c:otherwise>
-            </c:choose>
+        <div id="node" class="buttonContainer">
+            <div id="topicShape" class="buttonExtOn" title="Topic Shape">
+                <img src="../nicons/topic-shape.png"/>
+            </div>
+            <div id="addTopic" class="buttonOn" title="Add Topic">
+                <img src="../nicons/topic-add.png"/>
+            </div>
+            <div id="deleteTopic" class="buttonOn" title="Delete">
+                <img src="../nicons/topic-delete.png"/>
+            </div>
+            <div id="topicBorder" class="buttonOn" title="Border Color">
+                <img src="../nicons/topic-border.png"/>
+            </div>
+            <div id="topicColor" class="buttonExtOn" title="Background Color">
+                <img src="../nicons/topic-color.png"/>
+            </div>
+            <div id="topicIcon" class="buttonExtOn" title="Add Icon">
+                <img src="../nicons/topic-icon.png"/>
+            </div>
+            <div id="topicNote" class="buttonOn" title="Add Note">
+                <img src="../nicons/topic-note.png"/>
+            </div>
+            <div id="topicLink" class="buttonOn" title="Add Link">
+                <img src="../nicons/topic-link.png"/>
+            </div>
+            <div id="topicRelation" class="buttonOn" title="Add Relationship">
+                <img src="../nicons/topic-relation.png"/>
+            </div>
+        </div>
+        <div id="font" class="buttonContainer">
+            <div id="fontFamily" class="buttonOn" title="Font Style">
+                <img src="../nicons/font-type.png"/>
+            </div>
+            <div id="fontSize" class="buttonExtOn" title="Font Size">
+                <img src="../nicons/font-size.png"/>
+            </div>
+            <div id="fontBold" class="buttonOn" title="Bold Style">
+                <img src="../nicons/topic-border.png"/>
+            </div>
+            <div id="fontItalic" class="buttonOn" title="Italic Style">
+                <img src="../nicons/font-italic.png"/>
+            </div>
+            <div id="fontColor" class="buttonExtOn" title="Fond Color">
+                <img src="../nicons/font-color.png"/>
+            </div>
+        </div>
+           <div id="collaboration" class="buttonContainer">
+            <div id="tag" class="buttonOn" title="Tag">
+                <img src="../nicons/tag.png"/>
+            </div>
+            <div id="share" class="buttonExtOn" title="Share">
+                <img src="../nicons/share.png"/>
+            </div>
+            <div id="publish" class="buttonOn" title="Publish">
+                <img src="../nicons/public.png"/>
+            </div>
+            <div id="history" class="buttonOn" title="History">
+                <img src="../nicons/history.png"/>
+            </div>
         </div>
     </div>
 </div>
 
 <div id="mindplot"></div>
-
-<div id="footerEditor">
-    <div style="position:absolute; top:0px; width:100%">
-        <a href="${pageContext.request.contextPath}/c/home.htm">
-            <div id="logo"></div>
-        </a>
-
-        <div id='msgLoggerContainer' class="msgLoggerContainer">
-            <div id="msgStart"></div>
-            <div id='msgLogger'></div>
-            <div id="msgEnd"></div>
-        </div>
-    </div>
-    <div id="helpButtonKeyboard"
-         style="text-align:center; width:100px; height:20px; background-color:#f5f5f5; border: 1px solid #BBB6D6; cursor:pointer; padding-left:5px; margin-left:3px;float:left;">
-        <div style="float:left; position:relative; top:50%; margin-top:-8px; margin-left:5px;"><img
-                src="../images/help.png"/></div>
-        <div style="float:left; position:relative; top:50%; margin-top:-8px; margin-left:4px;">Shortcuts</div>
-    </div>
-</div>
-<c:if test="${editorTryMode==true}">
-    <div id="tryEditorWarning" class="sb">
-        <div class="close" id="tryClose"
-             style="position:absolute;">
-        </div>
-        <div>
-            <h1>Warning</h1>
-            This is a demo editor. That's why you won't be able to save your changes.
-            If you want to start creating your maps, <a href="userRegistration.htm">
-            <spring:message code="JOIN_NOW"/></a>. Registration is free and takes just a moment.
-        </div>
-    </div>
-    <script type="text/javascript">
-        // Register close event ...
-        var tryElem = $('tryEditorWarning');
-        tryElem.addClass('drag').makeDraggable();
-        $('tryClose').addEvent('click', function(event) {
-            tryElem.setStyle('visibility', 'hidden');
-        });
-
-    </script>
-</c:if>
-<div id="ffoxworkarround" style="display:none;"><input id="ffoxWorkarroundInput" type="text"></div>
-<c:if test="${editorTryMode==false}">
-    <script type="text/javascript" src="../dwr/interface/MapEditorService.js"></script>
-</c:if>
 <script type="text/javascript" src="../js/editor.js"></script>
-<%--<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
-</script>
-<script type="text/javascript">
-    _uacct = "UA-2347723-1";
-    urchinTracker();
-</script>--%>
 </body>
 </html>