Minor fixes.

mindplot/src/main/javascript/BrixActionDispatcher.js

@@ -25,15 +25,15 @@ mindplot.BrixActionDispatcher = new Class({
     },
 
     changeTextOnTopic : function(topicsIds, text) {
-        var framework=$wise_collaborationManager.getCollaborativeFramework();
+        var framework = mindplot.collaboration.CollaborationManager.getInstance().getCollaborativeFramework();
         if (!(topicsIds instanceof Array)) {
             topicsIds = [topicsIds];
         }
         var topic = framework.getTopic(topicsIds[0]);
-        var callback = function(event, topic){
+        var callback = function(event, topic) {
             topic.getBrixModel().removeListener("valueChanged", callback);
-            this._actionDispatcher.changeTextOnTopic(topic.getId(),event.getNewValue());
+            this._actionDispatcher.changeTextOnTopic(topic.getId(), event.getNewValue());
-        }.bindWithEvent(this,topic);
+        }.bindWithEvent(this, topic);
         topic.setText(text, true, callback);
     }
 });

mindplot/src/main/javascript/MindmapDesigner.js

@@ -24,7 +24,9 @@ mindplot.MindmapDesigner = new Class({
 
             // Dispatcher manager ...
             var commandContext = new mindplot.CommandContext(this);
-            this._actionDispatcher = new mindplot.BrixActionDispatcher(commandContext);
+//            this._actionDispatcher = new mindplot.BrixActionDispatcher(commandContext);
+            this._actionDispatcher = new mindplot.LocalActionDispatcher(commandContext);
+
             this._actionDispatcher.addEvent("modelUpdate", function(event) {
                 this._fireEvent("modelUpdate", event);
             }.bind(this));

mindplot/src/main/javascript/collaboration/CollaborationManager.js

@@ -1,32 +1,45 @@
 mindplot.collaboration = {};
 mindplot.collaboration.CollaborationManager = new Class({
-    initialize:function(){
+    initialize:function() {
         this.collaborativeModelReady = false;
         this.collaborativeModelReady = null;
         this.wiseReady = false;
     },
-    isCollaborationFrameworkAvailable:function(){
+
-        return $defined(goog.collab.CollaborativeApp);
+    isCollaborationFrameworkAvailable:function() {
+        return (typeof goog != "undefined") && (typeof goog.collab != "undefined");
     },
-    setCollaborativeFramework:function(framework){
+
+    setCollaborativeFramework:function(framework) {
         this._collaborativeFramework = framework;
         this.collaborativeModelReady = true;
-        if(this.wiseReady){
+        if (this.wiseReady) {
             buildCollaborativeMindmapDesigner();
         }
     },
-    setWiseReady:function(ready){
+
-        this.wiseReady=ready;
+    setWiseReady:function(ready) {
+        this.wiseReady = ready;
     },
-    isCollaborativeFrameworkReady:function(){
+
+    isCollaborativeFrameworkReady:function() {
         return this.collaborativeModelReady;
     },
-    buildWiseModel: function(){
+
+    buildWiseModel: function() {
         return this._collaborativeFramework.buildWiseModel();
     },
-    getCollaborativeFramework:function(){
+
+    getCollaborativeFramework:function() {
         return this._collaborativeFramework;
     }
+
 });
 
-$wise_collaborationManager = new mindplot.collaboration.CollaborationManager();
+mindplot.collaboration.CollaborationManager.getInstance = function() {
+    if (!$defined(mindplot.collaboration.CollaborationManager.__collaborationManager)) {
+        mindplot.collaboration.CollaborationManager.__collaborationManager = new mindplot.collaboration.CollaborationManager();
+    }
+    return mindplot.collaboration.CollaborationManager.__collaborationManager;
+}
+mindplot.collaboration.CollaborationManager.getInstance();

mindplot/src/main/javascript/collaboration/frameworks/brix/BrixFramework.js

@@ -1,44 +1,42 @@
-
-
 mindplot.collaboration.frameworks.brix.BrixFramework = new Class({
     Extends: mindplot.collaboration.frameworks.AbstractCollaborativeFramework,
 
-    initialize: function(model, app){
+    initialize: function(model, app) {
         this._app = app;
         var collaborativeModelFactory = new mindplot.collaboration.frameworks.brix.BrixCollaborativeModelFactory(this);
         var cModel = null;
         var root = this.getBrixModel().getRoot();
-        if(!root.isEmpty()){
+        if (!root.isEmpty()) {
             cModel = collaborativeModelFactory.buildCollaborativeModelFor(root.get("mindmap"));
         }
         this.parent(cModel, collaborativeModelFactory);
     },
-    addMindmap:function(model){
+    addMindmap:function(model) {
         var root = this.getBrixModel().getRoot();
-        root.put("mindmap",model);
+        root.put("mindmap", model);
     },
-    getBrixModel:function(){
+    getBrixModel:function() {
         return this._app.getModel();
     },
-    buildWiseModel: function(){
+    buildWiseModel: function() {
         return this.parent();
     }
 });
-instanciated=false;
+instanciated = false;
-mindplot.collaboration.frameworks.brix.BrixFramework.instanciate=function(){
+mindplot.collaboration.frameworks.brix.BrixFramework.instanciate = function() {
-    if($defined(isGoogleBrix) && !instanciated){
+    if ((typeof isGoogleBrix != "undefined") && !instanciated) {
-        instanciated=true;
+        instanciated = true;
         var app = new goog.collab.CollaborativeApp();
         mindplot.collaboration.frameworks.brix.BrixFramework.buildMenu(app);
         app.start();
-        app.addListener('modelLoad', function(model){
+        app.addListener('modelLoad', function(model) {
             var framework = new mindplot.collaboration.frameworks.brix.BrixFramework(model, app);
-            $wise_collaborationManager.setCollaborativeFramework(framework);
+            mindplot.collaboration.CollaborationManager.getInstance().setCollaborativeFramework(framework);
         }.bind(this));
     }
 };
 
-mindplot.collaboration.frameworks.brix.BrixFramework.buildMenu=function(app){
+mindplot.collaboration.frameworks.brix.BrixFramework.buildMenu = function(app) {
     var menuBar = new goog.collab.ui.MenuBar();
 
     // Configure toolbar menu ...

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

@@ -69,6 +69,8 @@ mindplot.widget.IconPanel = new Class({
 
     show:function() {
         this.fireEvent("show");
+        $(this._buttonId).className = 'buttonActive';
+
         if (this.options.state == 'close') {
             if (!$defined(this.options.panel)) {
                 this.init();
@@ -84,7 +86,6 @@ mindplot.widget.IconPanel = new Class({
             this.fireEvent('onStart');
             this.registerClosePanel();
             this.options.state = 'open';
-
         }
     },
 
@@ -94,6 +95,7 @@ mindplot.widget.IconPanel = new Class({
             this.options.panel.setStyles({border: '1px solid transparent', opacity:0});
             this.registerOpenPanel();
             this.options.state = 'close';
+            $(this._buttonId).className = 'button';
         }
     },
 

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

@@ -37,7 +37,9 @@ mindplot.widget.Menu = new Class({
             }
         };
         var fontFamilyPanel = new mindplot.widget.FontFamilyPanel("fontFamily", fontFamilyModel);
-        fontFamilyPanel.addEvent('show',function(){this.clear()}.bind(this));
+        fontFamilyPanel.addEvent('show', function() {
+            this.clear()
+        }.bind(this));
         this._toolbarElems.push(fontFamilyPanel);
 
         var fontSizeModel = {
@@ -53,7 +55,9 @@ mindplot.widget.Menu = new Class({
             }
         };
         var fontSizePanel = new mindplot.widget.FontSizePanel("fontSize", fontSizeModel);
-        fontSizePanel.addEvent('show',function(){this.clear()}.bind(this));
+        fontSizePanel.addEvent('show', function() {
+            this.clear()
+        }.bind(this));
         this._toolbarElems.push(fontSizePanel);
 
         var topicShapeModel = {
@@ -69,7 +73,9 @@ mindplot.widget.Menu = new Class({
             }
         };
         var topicShapePanel = new mindplot.widget.TopicShapePanel("topicShape", topicShapeModel);
-        topicShapePanel.addEvent('show',function(){this.clear()}.bind(this));
+        topicShapePanel.addEvent('show', function() {
+            this.clear()
+        }.bind(this));
         this._toolbarElems.push(topicShapePanel);
 
         // Create icon panel dialog ...
@@ -82,11 +88,13 @@ mindplot.widget.Menu = new Class({
             }
         };
         var iconPanel = new mindplot.widget.IconPanel('topicIcon', topicIconModel);
-        iconPanel.addEvent('show',function(){this.clear()}.bind(this));
+        iconPanel.addEvent('show', function() {
+            this.clear()
+        }.bind(this));
         this._toolbarElems.push(iconPanel);
 
 
-        var topicColorPicker = new MooRainbow('topicColor', {
+        var colorPickerOptions = {
             id: 'topicColor',
             imgPath: '../images/',
             startColor: [255, 255, 255],
@@ -100,7 +108,8 @@ mindplot.widget.Menu = new Class({
             onComplete: function() {
                 this.clear();
             }.bind(this)
-        });
+        };
+        var topicColorPicker = new MooRainbow('topicColor', colorPickerOptions);
         this._colorPickers.push(topicColorPicker);
 
         var borderColorPicker = new MooRainbow('topicBorder', {
@@ -135,6 +144,72 @@ mindplot.widget.Menu = new Class({
             }.bind(this)
         });
         this._colorPickers.push(fontColorPicker);
+
+
+        // Register Events ...
+        $('zoomIn').addEvent('click', function(event) {
+            designer.zoomIn();
+        });
+
+        $('zoomOut').addEvent('click', function(event) {
+            designer.zoomOut();
+        });
+
+        $('undoEdition').addEvent('click', function(event) {
+            designer.undo();
+        });
+
+        $('redoEdition').addEvent('click', function(event) {
+            designer.redo();
+        });
+
+        designer.addEventListener("modelUpdate", function(event) {
+            if (event.undoSteps > 0) {
+                $("undoEdition").setStyle("background-image", "url(../images/file_undo.png)");
+            } else {
+                $("undoEdition").setStyle("background-image", "url(../images/file_undo_dis.png)");
+            }
+
+            if (event.redoSteps > 0) {
+                $("redoEdition").setStyle("background-image", "url(../images/file_redo.png)");
+            } else {
+                $("redoEdition").setStyle("background-image", "url(../images/file_redo_dis.png)");
+            }
+
+        });
+
+        $('addTopic').addEvent('click', function(event) {
+            designer.createSiblingForSelectedNode();
+        });
+
+        $('deleteTopic').addEvent('click', function(event) {
+            designer.deleteCurrentNode();
+        });
+
+
+        $('topicLink').addEvent('click', function(event) {
+            designer.addLink2SelectedNode();
+
+        });
+
+        $('topicRelation').addEvent('click', function(event) {
+            designer.addRelationShip2SelectedNode(event);
+        });
+
+        $('topicNote').addEvent('click', function(event) {
+            designer.addNote2SelectedNode();
+
+        });
+
+        $('fontBold').addEvent('click', function(event) {
+            designer.setWeight2SelectedNode();
+        });
+
+        $('fontItalic').addEvent('click', function(event) {
+            designer.setStyle2SelectedNode();
+        });
+
+
     },
 
     clear : function() {

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

@@ -22,6 +22,7 @@ mindplot.widget.ToolbarPanel = new Class({
         $assert(buttonId, "buttonId can not be null");
         $assert(model, "model can not be null");
         this._model = model;
+        this._buttonId = buttonId;
         this._panelId = this.initPanel(buttonId);
     },
 
@@ -42,10 +43,11 @@ mindplot.widget.ToolbarPanel = new Class({
         // Register on toolbar elements ...
         var menuElems = panelElem.getElements('div');
         menuElems.forEach(function(elem) {
-            elem.addEvent('click', function() {
+            elem.addEvent('click', function(event) {
                 var value = $defined(elem.getAttribute('model')) ? elem.getAttribute('model') : elem.id;
                 this._model.setValue(value);
                 this.hide();
+                event.stopPropagation();
             }.bind(this));
         }.bind(this));
 
@@ -77,10 +79,14 @@ mindplot.widget.ToolbarPanel = new Class({
         });
         $(this._panelId).setStyle('display', 'block');
 
+        // Mark the button as active...
+        $(this._buttonId).className = 'buttonActive';
     },
 
     hide : function() {
         $(this._panelId).setStyle('display', 'none');
+        $(this._buttonId).className = 'button';
+
     },
 
     isVisible : function() {

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

@@ -177,6 +177,27 @@ div#toolbar .button:hover {
     border: 1px solid black;
     border-top-color: white;
     border-left-color: white;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -o-user-select: none;
+    user-select: none;
+}
+
+div#toolbar .buttonActive {
+    width: 32px;
+    height: 36px;
+    float: left;
+    margin: 0 1px;
+    cursor: pointer;
+    border: 1px solid black;
+    border-top-color: white;
+    border-left-color: white;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -o-user-select: none;
+    user-select: none;
 }
 
 div#toolbar .comboButton:hover {
@@ -395,19 +416,13 @@ div#fontColor {
 
 div.toolbarPanelLink {
     cursor: pointer;
-    font-size: 14px;
     color: black;
     font-weight: bold;
     padding: 0 3px 0 4px;
     margin: 1px;
-}
-
-div.toolbarPanelLink {
     cursor: pointer;
     font-size: 12px;
     font-weight: bold;
-    padding: 0 3px 0 4px;
-    margin: 1px;
 }
 
 div.toolbarPanelLink:hover {

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

@@ -14,7 +14,6 @@
 
     <!--<script type='text/javascript' src='../js/wiseLibrary.js'></script>-->
 
-    <!--<script type='text/javascript' src='http://docs.google.com/brix/static/api/js/jsapi.nocache.js'></script>-->
     <script type='text/javascript' src='../js/mootools-core-1.3.2-full-compat.js'></script>
     <script type='text/javascript' src='../js/mootools-more-1.3.2.1-yui.js'></script>
 

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

@@ -181,68 +181,6 @@ function afterMindpotLibraryLoading() {
     $(document).addEvent('keydown', designer.keyEventHandler.bind(designer));
     $("ffoxWorkarroundInput").addEvent('keydown', designer.keyEventHandler.bind(designer));
 
-    // Register toolbar events ...
-    $('zoomIn').addEvent('click', function(event) {
-        designer.zoomIn();
-    });
-
-    $('zoomOut').addEvent('click', function(event) {
-        designer.zoomOut();
-    });
-
-    $('undoEdition').addEvent('click', function(event) {
-        designer.undo();
-    });
-
-    $('redoEdition').addEvent('click', function(event) {
-        designer.redo();
-    });
-
-    designer.addEventListener("modelUpdate", function(event) {
-        if (event.undoSteps > 0) {
-            $("undoEdition").setStyle("background-image", "url(../images/file_undo.png)");
-        } else {
-            $("undoEdition").setStyle("background-image", "url(../images/file_undo_dis.png)");
-        }
-
-        if (event.redoSteps > 0) {
-            $("redoEdition").setStyle("background-image", "url(../images/file_redo.png)");
-        } else {
-            $("redoEdition").setStyle("background-image", "url(../images/file_redo_dis.png)");
-        }
-
-    });
-
-    $('addTopic').addEvent('click', function(event) {
-        designer.createSiblingForSelectedNode();
-    });
-
-    $('deleteTopic').addEvent('click', function(event) {
-        designer.deleteCurrentNode();
-    });
-
-    $('topicLink').addEvent('click', function() {
-        designer.addLink2SelectedNode();
-
-    });
-
-    $('topicRelation').addEvent('click', function(event) {
-        designer.addRelationShip2SelectedNode(event);
-    });
-
-    $('topicNote').addEvent('click', function() {
-        designer.addNote2SelectedNode();
-
-    });
-
-    $('fontBold').addEvent('click', function() {
-        designer.setWeight2SelectedNode();
-    });
-
-    $('fontItalic').addEvent('click', function() {
-        designer.setStyle2SelectedNode();
-    });
-
     // To prevent the user from leaving the page with changes ...
     window.onbeforeunload = function () {
         if (designer.needsSave()) {
@@ -252,7 +190,9 @@ function afterMindpotLibraryLoading() {
     var menu = new mindplot.widget.Menu(designer);
 
     //  If a node has focus, focus can be move to another node using the keys.
-    designer._cleanScreen = function(){menu.clear()};
+    designer._cleanScreen = function() {
+        menu.clear()
+    };
 
 
     // If not problem has arisen, close the dialog ...
@@ -283,7 +223,7 @@ function buildMindmapDesigner() {
     editorProperties.height = screenHeight;
     designer = new mindplot.MindmapDesigner(editorProperties, container);
 
-    if($wise_collaborationManager.isCollaborationFrameworkAvailable()){
+    if(mindplot.collaboration.CollaborationManager.getInstance().isCollaborationFrameworkAvailable()){
         buildCollaborativeMindmapDesigner();
     }else{
         buildStandaloneMindmapDesigner();
@@ -295,10 +235,11 @@ function buildStandaloneMindmapDesigner(){
 }
 
 function buildCollaborativeMindmapDesigner(){
-    if($wise_collaborationManager.isCollaborativeFrameworkReady()){
+    var collaborationManager = mindplot.collaboration.CollaborationManager.getInstance();
-        designer.loadFromCollaborativeModel($wise_collaborationManager);
+    if(collaborationManager.isCollaborativeFrameworkReady()){
+        designer.loadFromCollaborativeModel(collaborationManager);
     }else{
-        $wise_collaborationManager.setWiseReady(true);
+        collaborationManager.setWiseReady(true);
     }
 }
 

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

@@ -157,8 +157,6 @@ Tabs.Init();
 // Hide the content while waiting for the onload event to trigger.
 var contentId = window.location.hash || "#Introduction";
 
-var iconPanel = null;
-
 function afterMindpotLibraryLoading() {
     buildMindmapDesigner();
 
@@ -184,125 +182,11 @@ function afterMindpotLibraryLoading() {
         });
     }
 
-    // Crate icon panel dialog ...
-    iconPanel = new mindplot.widget.IconPanel({button:$('topicIcon'), onStart:cleanScreenEvent});
-    iconPanel.addEvent("selected", function(event) {
-        designer.addIconType2SelectedNode(event.iconType);
-    });
-
     // Register Events ...
     $(document).addEvent('keydown', designer.keyEventHandler.bindWithEvent(designer));
     $("ffoxWorkarroundInput").addEvent('keydown', designer.keyEventHandler.bindWithEvent(designer));
-    //
-    $('zoomIn').addEvent('click', function(event) {
-        designer.zoomIn();
-    });
 
-    $('zoomOut').addEvent('click', function(event) {
-        designer.zoomOut();
-    });
 
-    $('undoEdition').addEvent('click', function(event) {
-        designer.undo();
-    });
-
-    $('redoEdition').addEvent('click', function(event) {
-        designer.redo();
-    });
-
-    designer.addEventListener("modelUpdate", function(event) {
-        if (event.undoSteps > 0) {
-            $("undoEdition").setStyle("background-image", "url(../images/file_undo.png)");
-        } else {
-            $("undoEdition").setStyle("background-image", "url(../images/file_undo_dis.png)");
-        }
-
-        if (event.redoSteps > 0) {
-            $("redoEdition").setStyle("background-image", "url(../images/file_redo.png)");
-        } else {
-            $("redoEdition").setStyle("background-image", "url(../images/file_redo_dis.png)");
-        }
-
-    });
-
-    $('addTopic').addEvent('click', function(event) {
-        designer.createSiblingForSelectedNode();
-    });
-
-    $('deleteTopic').addEvent('click', function(event) {
-        designer.deleteCurrentNode();
-    });
-
-    var context = this;
-    var colorPicker1 = new MooRainbow('topicColor', {
-        id: 'topicColor',
-        imgPath: '../images/',
-        startColor: [255, 255, 255],
-        onInit: function(color) {
-            cleanScreenEvent.bind(context).attempt();
-            setCurrentColorPicker.attempt(colorPicker1, context);
-        },
-        onChange: function(color) {
-            designer.setBackColor2SelectedNode(color.hex);
-        },
-        onComplete: function(color) {
-            removeCurrentColorPicker.attempt(colorPicker1, context);
-        }
-    });
-
-    var colorPicker2 = new MooRainbow('topicBorder', {
-        id: 'topicBorder',
-        imgPath: '../images/',
-        startColor: [255, 255, 255],
-        onInit: function(color) {
-            cleanScreenEvent.bind(context).attempt();
-            setCurrentColorPicker.attempt(colorPicker2, context);
-        },
-        onChange: function(color) {
-            designer.setBorderColor2SelectedNode(color.hex);
-        },
-        onComplete: function(color) {
-            removeCurrentColorPicker.attempt(colorPicker2, context);
-        }
-    });
-
-    $('topicLink').addEvent('click', function(event) {
-        designer.addLink2SelectedNode();
-
-    });
-
-    $('topicRelation').addEvent('click', function(event) {
-        designer.addRelationShip2SelectedNode(event);
-    });
-
-    $('topicNote').addEvent('click', function(event) {
-        designer.addNote2SelectedNode();
-
-    });
-
-    $('fontBold').addEvent('click', function(event) {
-        designer.setWeight2SelectedNode();
-    });
-
-    $('fontItalic').addEvent('click', function(event) {
-        designer.setStyle2SelectedNode();
-    });
-
-    var colorPicker3 = new MooRainbow('fontColor', {
-        id: 'fontColor',
-        imgPath: '../images/',
-        startColor: [255, 255, 255],
-        onInit: function(color) {
-            cleanScreenEvent.bind(context).attempt();
-            setCurrentColorPicker.attempt(colorPicker3, context);
-        },
-        onChange: function(color) {
-            designer.setFontColor2SelectedNode(color.hex);
-        },
-        onComplete: function(color) {
-            removeCurrentColorPicker.attempt(colorPicker3, context);
-        }
-    });
 
     // Save event handler ....
     var saveButton = $('saveButton');
@@ -402,10 +286,11 @@ function afterMindpotLibraryLoading() {
             }
         }
     }
-    // Build panels ...
+
-    var fontPanel = new mindplot.widget.FontFamilyPanel();
+    var menu = new mindplot.widget.Menu(designer);
-//    shapeTypePanel();
+
-//    fontSizePanel();
+    //  If a node has focus, focus can be move to another node using the keys.
+    designer._cleanScreen = function(){menu.clear()};
 
     // If not problem has occured, I close the dialod ...
     var closeDialog = function() {
@@ -416,14 +301,6 @@ function afterMindpotLibraryLoading() {
     }.delay(500);
 }
 
-function setCurrentColorPicker(colorPicker) {
-    this.currentColorPicker = colorPicker;
-}
-
-function removeCurrentColorPicker(colorPicker) {
-    $clear(this.currentColorPicker);
-}
-
 function buildMindmapDesigner() {
 
     // Initialize message logger ...
@@ -448,10 +325,6 @@ function buildMindmapDesigner() {
     designer = new mindplot.MindmapDesigner(editorProperties, container);
     designer.loadFromXML(mapId, mapXml);
 
-    // If a node has focus, focus can be move to another node using the keys.
-    designer._cleanScreen = cleanScreenEvent.bind(this);
-
-
     // Save map on load ....
     if (editorProperties.saveOnLoad) {
         var saveOnLoad = function() {
@@ -462,114 +335,3 @@ function buildMindmapDesigner() {
 
 };
 
-function createColorPalette(container, onSelectFunction, event) {
-    cleanScreenEvent();
-    _colorPalette = new core.ColorPicker();
-    _colorPalette.onSelect = function(color) {
-        onSelectFunction.call(this, color);
-        cleanScreenEvent();
-    };
-
-    //    dojo.event.kwConnect({srcObj: this._colorPalette,srcFunc:"onColorSelect",targetObj:this._colorPalette, targetFunc:"onSelect", once:true});
-    var mouseCoords = core.Utils.getMousePosition(event);
-    var colorPaletteElement = $("colorPalette");
-    colorPaletteElement.setStyle('left', (mouseCoords.x - 80) + "px");
-    colorPaletteElement.setStyle('display', "block");
-}
-;
-
-function cleanScreenEvent() {
-    if (this.currentColorPicker) {
-        this.currentColorPicker.hide();
-    }
-    $("fontFamilyPanel").setStyle('display', "none");
-    $("fontSizePanel").setStyle('display', "none");
-    $("topicShapePanel").setStyle('display', "none");
-    iconPanel.close();
-}
-
-function shapeTypePanel() {
-    var shapeTypePanel = ['rectagle','rounded_rectagle','line','elipse'];
-    var updateFunction = function(value) {
-        designer.setShape2SelectedNode(value.replace('_', ' '));
-    };
-
-    var onFocusValue = function(selectedNode) {
-
-        return selectedNode.getShapeType().replace(' ', '_');
-    };
-
-    buildPanel('topicShape', 'topicShapePanel', shapeTypePanel, updateFunction, onFocusValue);
-}
-
-function fontSizePanel() {
-    var shapeTypePanel = ['small','normal','large','huge'];
-    var map = {small:'6',normal:'8',large:'10',huge:'15'};
-    var updateFunction = function(value) {
-        var nodes = designer.getSelectedNodes();
-        var value = map[value];
-        designer.setFontSize2SelectedNode(value);
-    };
-
-    var onFocusValue = function(selectedNode) {
-        var fontSize = selectedNode.getFontSize();
-        var result = "";
-        if (fontSize <= 6) {
-            result = 'small';
-        } else if (fontSize <= 8) {
-            result = 'normal';
-        } else if (fontSize <= 10) {
-            result = 'large';
-        } else if (fontSize >= 15) {
-            result = 'huge';
-        }
-        return result;
-    };
-    buildPanel('fontSize', 'fontSizePanel', shapeTypePanel, updateFunction, onFocusValue);
-}
-
-function buildPanel(buttonElemId, elemLinksContainer, elemLinkIds, updateFunction, onFocusValue) {
-    // Font family event handling ....
-    $(buttonElemId).addEvent('click', function(event) {
-        var container = $(elemLinksContainer);
-        var isRendered = container.getStyle('display') == 'block';
-        cleanScreenEvent();
-
-        // Restore default css.
-        for (var i = 0; i < elemLinkIds.length; i++) {
-            var elementId = elemLinkIds[i];
-            $(elementId).className = 'toolbarPanelLink';
-        }
-
-        // Select current element ...
-        var nodes = designer.getSelectedNodes();
-        var lenght = nodes.length;
-        if (lenght == 1) {
-            var selectedNode = nodes[0];
-            var selectedElementId = onFocusValue(selectedNode);
-            selectedElementId = selectedElementId.toLowerCase();
-            var selectedElement = $(selectedElementId);
-            selectedElement.className = 'toolbarPanelLinkSelectedLink';
-        }
-
-        container.setStyle('display', 'block');
-
-        var mouseCoords = core.Utils.getMousePosition(event);
-        if (!isRendered) {
-            container.setStyle('left', (mouseCoords.x - 10) + "px");
-        }
-
-    });
-
-    var fontOnClick = function(event) {
-        var value = this.getAttribute('id');
-        updateFunction(value);
-        cleanScreenEvent();
-    };
-
-    // Register event listeners on elements ...
-    for (var i = 0; i < elemLinkIds.length; i++) {
-        var elementId = elemLinkIds[i];
-        $(elementId).addEvent('click', fontOnClick.bind($(elementId)));
-    }
-}