From 1f6dd0bbf73318a14a1cfd87fbf9b423328df952 Mon Sep 17 00:00:00 2001
From: Alex de Mulder <alexdemulder@gmail.com>
Date: Wed, 12 Nov 2014 16:34:11 +0100
Subject: [PATCH] removed div ids from manipulation

---
 dist/vis.js                             | 215 ++++++++++++++++--------
 lib/network/mixins/ManipulationMixin.js | 212 ++++++++++++++++-------
 lib/network/mixins/MixinLoader.js       |   3 -
 3 files changed, 296 insertions(+), 134 deletions(-)

diff --git a/dist/vis.js b/dist/vis.js
index 698f008c..ae07b426 100644
--- a/dist/vis.js
+++ b/dist/vis.js
@@ -28256,7 +28256,6 @@ return /******/ (function(modules) { // webpackBootstrap
       if (this.manipulationDiv === undefined) {
         this.manipulationDiv = document.createElement('div');
         this.manipulationDiv.className = 'network-manipulationDiv';
-        this.manipulationDiv.id = 'network-manipulationDiv';
         if (this.editMode == true) {
           this.manipulationDiv.style.display = "block";
         }
@@ -28269,7 +28268,6 @@ return /******/ (function(modules) { // webpackBootstrap
       if (this.editModeDiv === undefined) {
         this.editModeDiv = document.createElement('div');
         this.editModeDiv.className = 'network-manipulation-editMode';
-        this.editModeDiv.id = 'network-manipulation-editMode';
         if (this.editMode == true) {
           this.editModeDiv.style.display = "none";
         }
@@ -28282,7 +28280,6 @@ return /******/ (function(modules) { // webpackBootstrap
       if (this.closeDiv === undefined) {
         this.closeDiv = document.createElement('div');
         this.closeDiv.className = 'network-manipulation-closeDiv';
-        this.closeDiv.id = 'network-manipulation-closeDiv';
         this.closeDiv.style.display = this.manipulationDiv.style.display;
         this.frame.appendChild(this.closeDiv);
       }
@@ -32113,6 +32110,7 @@ return /******/ (function(modules) { // webpackBootstrap
     while (this.manipulationDiv.hasChildNodes()) {
       this.manipulationDiv.removeChild(this.manipulationDiv.firstChild);
     }
+    this.manipulationDOM = {};
 
     this._manipulationReleaseOverload = function () {};
     delete this.sectors['support']['nodes']['targetNode'];
@@ -32142,9 +32140,9 @@ return /******/ (function(modules) { // webpackBootstrap
    */
   exports._toggleEditMode = function() {
     this.editMode = !this.editMode;
-    var toolbar = document.getElementById("network-manipulationDiv");
-    var closeDiv = document.getElementById("network-manipulation-closeDiv");
-    var editModeDiv = document.getElementById("network-manipulation-editMode");
+    var toolbar = this.manipulationDiv;
+    var closeDiv = this.closeDiv;
+    var editModeDiv = this.editModeDiv;
     if (this.editMode == true) {
       toolbar.style.display="block";
       closeDiv.style.display="block";
@@ -32189,68 +32187,110 @@ return /******/ (function(modules) { // webpackBootstrap
     // reset global variables
     this.blockConnectingEdgeSelection = false;
     this.forceAppendSelection = false;
+    this.manipulationDOM = {};
 
     if (this.editMode == true) {
       while (this.manipulationDiv.hasChildNodes()) {
         this.manipulationDiv.removeChild(this.manipulationDiv.firstChild);
       }
 
-      // add the icons to the manipulator div
-      this.manipulationDiv.innerHTML = "" +
-        "<span class='network-manipulationUI add' id='network-manipulate-addNode'>" +
-          "<span class='network-manipulationLabel'>"+locale['addNode'] +"</span></span>" +
-        "<div class='network-seperatorLine'></div>" +
-        "<span class='network-manipulationUI connect' id='network-manipulate-connectNode'>" +
-          "<span class='network-manipulationLabel'>"+locale['addEdge'] +"</span></span>";
+      this.manipulationDOM['addNodeSpan'] = document.createElement('span');
+      this.manipulationDOM['addNodeSpan'].className = 'network-manipulationUI add';
+      this.manipulationDOM['addNodeLabelSpan'] = document.createElement('span');
+      this.manipulationDOM['addNodeLabelSpan'].className = 'network-manipulationLabel';
+      this.manipulationDOM['addNodeLabelSpan'].innerHTML = locale['addNode'];
+      this.manipulationDOM['addNodeSpan'].appendChild(this.manipulationDOM['addNodeLabelSpan']);
+
+      this.manipulationDOM['seperatorLineDiv1'] = document.createElement('div');
+      this.manipulationDOM['seperatorLineDiv1'].className = 'network-seperatorLine';
+
+      this.manipulationDOM['addEdgeSpan'] = document.createElement('span');
+      this.manipulationDOM['addEdgeSpan'].className = 'network-manipulationUI connect';
+      this.manipulationDOM['addEdgeLabelSpan'] = document.createElement('span');
+      this.manipulationDOM['addEdgeLabelSpan'].className = 'network-manipulationLabel';
+      this.manipulationDOM['addEdgeLabelSpan'].innerHTML = locale['addEdge'];
+      this.manipulationDOM['addEdgeSpan'].appendChild(this.manipulationDOM['addEdgeLabelSpan']);
+
+      this.manipulationDiv.appendChild(this.manipulationDOM['addNodeSpan']);
+      this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv1']);
+      this.manipulationDiv.appendChild(this.manipulationDOM['addEdgeSpan']);
+
       if (this._getSelectedNodeCount() == 1 && this.triggerFunctions.edit) {
-        this.manipulationDiv.innerHTML += "" +
-          "<div class='network-seperatorLine'></div>" +
-          "<span class='network-manipulationUI edit' id='network-manipulate-editNode'>" +
-            "<span class='network-manipulationLabel'>"+locale['editNode'] +"</span></span>";
+        this.manipulationDOM['seperatorLineDiv2'] = document.createElement('div');
+        this.manipulationDOM['seperatorLineDiv2'].className = 'network-seperatorLine';
+
+        this.manipulationDOM['editNodeSpan'] = document.createElement('span');
+        this.manipulationDOM['editNodeSpan'].className = 'network-manipulationUI edit';
+        this.manipulationDOM['editNodeLabelSpan'] = document.createElement('span');
+        this.manipulationDOM['editNodeLabelSpan'].className = 'network-manipulationLabel';
+        this.manipulationDOM['editNodeLabelSpan'].innerHTML = locale['editNode'];
+        this.manipulationDOM['editNodeSpan'].appendChild(this.manipulationDOM['editNodeLabelSpan']);
+
+        this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv2']);
+        this.manipulationDiv.appendChild(this.manipulationDOM['editNodeSpan']);
       }
       else if (this._getSelectedEdgeCount() == 1 && this._getSelectedNodeCount() == 0) {
-        this.manipulationDiv.innerHTML += "" +
-          "<div class='network-seperatorLine'></div>" +
-          "<span class='network-manipulationUI edit' id='network-manipulate-editEdge'>" +
-          "<span class='network-manipulationLabel'>"+locale['editEdge'] +"</span></span>";
+        this.manipulationDOM['seperatorLineDiv3'] = document.createElement('div');
+        this.manipulationDOM['seperatorLineDiv3'].className = 'network-seperatorLine';
+
+        this.manipulationDOM['editEdgeSpan'] = document.createElement('span');
+        this.manipulationDOM['editEdgeSpan'].className = 'network-manipulationUI edit';
+        this.manipulationDOM['editEdgeLabelSpan'] = document.createElement('span');
+        this.manipulationDOM['editEdgeLabelSpan'].className = 'network-manipulationLabel';
+        this.manipulationDOM['editEdgeLabelSpan'].innerHTML = locale['editEdge'];
+        this.manipulationDOM['editEdgeSpan'].appendChild(this.manipulationDOM['editEdgeLabelSpan']);
+
+        this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv3']);
+        this.manipulationDiv.appendChild(this.manipulationDOM['editEdgeSpan']);
       }
       if (this._selectionIsEmpty() == false) {
-        this.manipulationDiv.innerHTML += "" +
-          "<div class='network-seperatorLine'></div>" +
-          "<span class='network-manipulationUI delete' id='network-manipulate-delete'>" +
-            "<span class='network-manipulationLabel'>"+locale['del'] +"</span></span>";
+        this.manipulationDOM['seperatorLineDiv4'] = document.createElement('div');
+        this.manipulationDOM['seperatorLineDiv4'].className = 'network-seperatorLine';
+
+        this.manipulationDOM['deleteSpan'] = document.createElement('span');
+        this.manipulationDOM['deleteSpan'].className = 'network-manipulationUI delete';
+        this.manipulationDOM['deleteLabelSpan'] = document.createElement('span');
+        this.manipulationDOM['deleteLabelSpan'].className = 'network-manipulationLabel';
+        this.manipulationDOM['deleteLabelSpan'].innerHTML = locale['del'];
+        this.manipulationDOM['deleteSpan'].appendChild(this.manipulationDOM['deleteLabelSpan']);
+
+        this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv4']);
+        this.manipulationDiv.appendChild(this.manipulationDOM['deleteSpan']);
       }
 
 
       // bind the icons
-      var addNodeButton = document.getElementById("network-manipulate-addNode");
-      addNodeButton.onclick = this._createAddNodeToolbar.bind(this);
-      var addEdgeButton = document.getElementById("network-manipulate-connectNode");
-      addEdgeButton.onclick = this._createAddEdgeToolbar.bind(this);
+      this.manipulationDOM['addNodeSpan'].onclick = this._createAddNodeToolbar.bind(this);
+      this.manipulationDOM['addEdgeSpan'].onclick = this._createAddEdgeToolbar.bind(this);
       if (this._getSelectedNodeCount() == 1 && this.triggerFunctions.edit) {
-        var editButton = document.getElementById("network-manipulate-editNode");
-        editButton.onclick = this._editNode.bind(this);
+        this.manipulationDOM['editNodeSpan'].onclick = this._editNode.bind(this);
       }
       else if (this._getSelectedEdgeCount() == 1 && this._getSelectedNodeCount() == 0) {
-        var editButton = document.getElementById("network-manipulate-editEdge");
-        editButton.onclick = this._createEditEdgeToolbar.bind(this);
+        this.manipulationDOM['editEdgeSpan'].onclick = this._createEditEdgeToolbar.bind(this);
       }
       if (this._selectionIsEmpty() == false) {
-        var deleteButton = document.getElementById("network-manipulate-delete");
-        deleteButton.onclick = this._deleteSelected.bind(this);
+        this.manipulationDOM['deleteSpan'].onclick = this._deleteSelected.bind(this);
       }
-      var closeDiv = document.getElementById("network-manipulation-closeDiv");
-      closeDiv.onclick = this._toggleEditMode.bind(this);
+      this.closeDiv.onclick = this._toggleEditMode.bind(this);
 
       this.boundFunction = this._createManipulatorBar.bind(this);
       this.on('select', this.boundFunction);
     }
     else {
-      this.editModeDiv.innerHTML = "" +
-        "<span class='network-manipulationUI edit editmode' id='network-manipulate-editModeButton'>" +
-        "<span class='network-manipulationLabel'>" + locale['edit'] + "</span></span>";
-      var editModeButton = document.getElementById("network-manipulate-editModeButton");
-      editModeButton.onclick = this._toggleEditMode.bind(this);
+      while (this.editModeDiv.hasChildNodes()) {
+        this.editModeDiv.removeChild(this.editModeDiv.firstChild);
+      }
+
+      this.manipulationDOM['editModeSpan'] = document.createElement('span');
+      this.manipulationDOM['editModeSpan'].className = 'network-manipulationUI edit editmode';
+      this.manipulationDOM['editModeLabelSpan'] = document.createElement('span');
+      this.manipulationDOM['editModeLabelSpan'].className = 'network-manipulationLabel';
+      this.manipulationDOM['editModeLabelSpan'].innerHTML = locale['edit'];
+      this.manipulationDOM['editModeSpan'].appendChild(this.manipulationDOM['editModeLabelSpan']);
+
+      this.editModeDiv.appendChild(this.manipulationDOM['editModeSpan']);
+
+      this.manipulationDOM['editModeSpan'].onclick = this._toggleEditMode.bind(this);
     }
   };
 
@@ -32270,17 +32310,30 @@ return /******/ (function(modules) { // webpackBootstrap
 
     var locale = this.constants.locales[this.constants.locale];
 
-    // create the toolbar contents
-    this.manipulationDiv.innerHTML = "" +
-      "<span class='network-manipulationUI back' id='network-manipulate-back'>" +
-      "<span class='network-manipulationLabel'>" + locale['back'] + " </span></span>" +
-      "<div class='network-seperatorLine'></div>" +
-      "<span class='network-manipulationUI none' id='network-manipulate-back'>" +
-      "<span id='network-manipulatorLabel' class='network-manipulationLabel'>" + locale['addDescription'] + "</span></span>";
+    this.manipulationDOM = {};
+    this.manipulationDOM['backSpan'] = document.createElement('span');
+    this.manipulationDOM['backSpan'].className = 'network-manipulationUI back';
+    this.manipulationDOM['backLabelSpan'] = document.createElement('span');
+    this.manipulationDOM['backLabelSpan'].className = 'network-manipulationLabel';
+    this.manipulationDOM['backLabelSpan'].innerHTML = locale['back'];
+    this.manipulationDOM['backSpan'].appendChild(this.manipulationDOM['backLabelSpan']);
+
+    this.manipulationDOM['seperatorLineDiv1'] = document.createElement('div');
+    this.manipulationDOM['seperatorLineDiv1'].className = 'network-seperatorLine';
+
+    this.manipulationDOM['descriptionSpan'] = document.createElement('span');
+    this.manipulationDOM['descriptionSpan'].className = 'network-manipulationUI none';
+    this.manipulationDOM['descriptionLabelSpan'] = document.createElement('span');
+    this.manipulationDOM['descriptionLabelSpan'].className = 'network-manipulationLabel';
+    this.manipulationDOM['descriptionLabelSpan'].innerHTML = locale['addDescription'];
+    this.manipulationDOM['descriptionSpan'].appendChild(this.manipulationDOM['descriptionLabelSpan']);
+
+    this.manipulationDiv.appendChild(this.manipulationDOM['backSpan']);
+    this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv1']);
+    this.manipulationDiv.appendChild(this.manipulationDOM['descriptionSpan']);
 
     // bind the icon
-    var backButton = document.getElementById("network-manipulate-back");
-    backButton.onclick = this._createManipulatorBar.bind(this);
+    this.manipulationDOM['backSpan'].onclick = this._createManipulatorBar.bind(this);
 
     // we use the boundFunction so we can reference it when we unbind it from the "select" event.
     this.boundFunction = this._addNode.bind(this);
@@ -32309,16 +32362,30 @@ return /******/ (function(modules) { // webpackBootstrap
     this.forceAppendSelection = false;
     this.blockConnectingEdgeSelection = true;
 
-    this.manipulationDiv.innerHTML = "" +
-      "<span class='network-manipulationUI back' id='network-manipulate-back'>" +
-        "<span class='network-manipulationLabel'>" + locale['back'] + " </span></span>" +
-      "<div class='network-seperatorLine'></div>" +
-      "<span class='network-manipulationUI none' id='network-manipulate-back'>" +
-        "<span id='network-manipulatorLabel' class='network-manipulationLabel'>" + locale['edgeDescription'] + "</span></span>";
+    this.manipulationDOM = {};
+    this.manipulationDOM['backSpan'] = document.createElement('span');
+    this.manipulationDOM['backSpan'].className = 'network-manipulationUI back';
+    this.manipulationDOM['backLabelSpan'] = document.createElement('span');
+    this.manipulationDOM['backLabelSpan'].className = 'network-manipulationLabel';
+    this.manipulationDOM['backLabelSpan'].innerHTML = locale['back'];
+    this.manipulationDOM['backSpan'].appendChild(this.manipulationDOM['backLabelSpan']);
+
+    this.manipulationDOM['seperatorLineDiv1'] = document.createElement('div');
+    this.manipulationDOM['seperatorLineDiv1'].className = 'network-seperatorLine';
+
+    this.manipulationDOM['descriptionSpan'] = document.createElement('span');
+    this.manipulationDOM['descriptionSpan'].className = 'network-manipulationUI none';
+    this.manipulationDOM['descriptionLabelSpan'] = document.createElement('span');
+    this.manipulationDOM['descriptionLabelSpan'].className = 'network-manipulationLabel';
+    this.manipulationDOM['descriptionLabelSpan'].innerHTML = locale['edgeDescription'];
+    this.manipulationDOM['descriptionSpan'].appendChild(this.manipulationDOM['descriptionLabelSpan']);
+
+    this.manipulationDiv.appendChild(this.manipulationDOM['backSpan']);
+    this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv1']);
+    this.manipulationDiv.appendChild(this.manipulationDOM['descriptionSpan']);
 
     // bind the icon
-    var backButton = document.getElementById("network-manipulate-back");
-    backButton.onclick = this._createManipulatorBar.bind(this);
+    this.manipulationDOM['backSpan'].onclick = this._createManipulatorBar.bind(this);
 
     // we use the boundFunction so we can reference it when we unbind it from the "select" event.
     this.boundFunction = this._handleConnect.bind(this);
@@ -32357,16 +32424,30 @@ return /******/ (function(modules) { // webpackBootstrap
 
     var locale = this.constants.locales[this.constants.locale];
 
-    this.manipulationDiv.innerHTML = "" +
-      "<span class='network-manipulationUI back' id='network-manipulate-back'>" +
-      "<span class='network-manipulationLabel'>" + locale['back'] + " </span></span>" +
-      "<div class='network-seperatorLine'></div>" +
-      "<span class='network-manipulationUI none' id='network-manipulate-back'>" +
-      "<span id='network-manipulatorLabel' class='network-manipulationLabel'>" + locale['editEdgeDescription'] + "</span></span>";
+    this.manipulationDOM = {};
+    this.manipulationDOM['backSpan'] = document.createElement('span');
+    this.manipulationDOM['backSpan'].className = 'network-manipulationUI back';
+    this.manipulationDOM['backLabelSpan'] = document.createElement('span');
+    this.manipulationDOM['backLabelSpan'].className = 'network-manipulationLabel';
+    this.manipulationDOM['backLabelSpan'].innerHTML = locale['back'];
+    this.manipulationDOM['backSpan'].appendChild(this.manipulationDOM['backLabelSpan']);
+
+    this.manipulationDOM['seperatorLineDiv1'] = document.createElement('div');
+    this.manipulationDOM['seperatorLineDiv1'].className = 'network-seperatorLine';
+
+    this.manipulationDOM['descriptionSpan'] = document.createElement('span');
+    this.manipulationDOM['descriptionSpan'].className = 'network-manipulationUI none';
+    this.manipulationDOM['descriptionLabelSpan'] = document.createElement('span');
+    this.manipulationDOM['descriptionLabelSpan'].className = 'network-manipulationLabel';
+    this.manipulationDOM['descriptionLabelSpan'].innerHTML = locale['editEdgeDescription'];
+    this.manipulationDOM['descriptionSpan'].appendChild(this.manipulationDOM['descriptionLabelSpan']);
+
+    this.manipulationDiv.appendChild(this.manipulationDOM['backSpan']);
+    this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv1']);
+    this.manipulationDiv.appendChild(this.manipulationDOM['descriptionSpan']);
 
     // bind the icon
-    var backButton = document.getElementById("network-manipulate-back");
-    backButton.onclick = this._createManipulatorBar.bind(this);
+    this.manipulationDOM['backSpan'].onclick = this._createManipulatorBar.bind(this);
 
     // temporarily overload functions
     this.cachedFunctions["_handleTouch"]      = this._handleTouch;
diff --git a/lib/network/mixins/ManipulationMixin.js b/lib/network/mixins/ManipulationMixin.js
index 5fb58dbf..8e8fe0fb 100644
--- a/lib/network/mixins/ManipulationMixin.js
+++ b/lib/network/mixins/ManipulationMixin.js
@@ -11,6 +11,7 @@ exports._clearManipulatorBar = function() {
   while (this.manipulationDiv.hasChildNodes()) {
     this.manipulationDiv.removeChild(this.manipulationDiv.firstChild);
   }
+  this.manipulationDOM = {};
 
   this._manipulationReleaseOverload = function () {};
   delete this.sectors['support']['nodes']['targetNode'];
@@ -40,9 +41,9 @@ exports._restoreOverloadedFunctions = function() {
  */
 exports._toggleEditMode = function() {
   this.editMode = !this.editMode;
-  var toolbar = document.getElementById("network-manipulationDiv");
-  var closeDiv = document.getElementById("network-manipulation-closeDiv");
-  var editModeDiv = document.getElementById("network-manipulation-editMode");
+  var toolbar = this.manipulationDiv;
+  var closeDiv = this.closeDiv;
+  var editModeDiv = this.editModeDiv;
   if (this.editMode == true) {
     toolbar.style.display="block";
     closeDiv.style.display="block";
@@ -87,68 +88,110 @@ exports._createManipulatorBar = function() {
   // reset global variables
   this.blockConnectingEdgeSelection = false;
   this.forceAppendSelection = false;
+  this.manipulationDOM = {};
 
   if (this.editMode == true) {
     while (this.manipulationDiv.hasChildNodes()) {
       this.manipulationDiv.removeChild(this.manipulationDiv.firstChild);
     }
 
-    // add the icons to the manipulator div
-    this.manipulationDiv.innerHTML = "" +
-      "<span class='network-manipulationUI add' id='network-manipulate-addNode'>" +
-        "<span class='network-manipulationLabel'>"+locale['addNode'] +"</span></span>" +
-      "<div class='network-seperatorLine'></div>" +
-      "<span class='network-manipulationUI connect' id='network-manipulate-connectNode'>" +
-        "<span class='network-manipulationLabel'>"+locale['addEdge'] +"</span></span>";
+    this.manipulationDOM['addNodeSpan'] = document.createElement('span');
+    this.manipulationDOM['addNodeSpan'].className = 'network-manipulationUI add';
+    this.manipulationDOM['addNodeLabelSpan'] = document.createElement('span');
+    this.manipulationDOM['addNodeLabelSpan'].className = 'network-manipulationLabel';
+    this.manipulationDOM['addNodeLabelSpan'].innerHTML = locale['addNode'];
+    this.manipulationDOM['addNodeSpan'].appendChild(this.manipulationDOM['addNodeLabelSpan']);
+
+    this.manipulationDOM['seperatorLineDiv1'] = document.createElement('div');
+    this.manipulationDOM['seperatorLineDiv1'].className = 'network-seperatorLine';
+
+    this.manipulationDOM['addEdgeSpan'] = document.createElement('span');
+    this.manipulationDOM['addEdgeSpan'].className = 'network-manipulationUI connect';
+    this.manipulationDOM['addEdgeLabelSpan'] = document.createElement('span');
+    this.manipulationDOM['addEdgeLabelSpan'].className = 'network-manipulationLabel';
+    this.manipulationDOM['addEdgeLabelSpan'].innerHTML = locale['addEdge'];
+    this.manipulationDOM['addEdgeSpan'].appendChild(this.manipulationDOM['addEdgeLabelSpan']);
+
+    this.manipulationDiv.appendChild(this.manipulationDOM['addNodeSpan']);
+    this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv1']);
+    this.manipulationDiv.appendChild(this.manipulationDOM['addEdgeSpan']);
+
     if (this._getSelectedNodeCount() == 1 && this.triggerFunctions.edit) {
-      this.manipulationDiv.innerHTML += "" +
-        "<div class='network-seperatorLine'></div>" +
-        "<span class='network-manipulationUI edit' id='network-manipulate-editNode'>" +
-          "<span class='network-manipulationLabel'>"+locale['editNode'] +"</span></span>";
+      this.manipulationDOM['seperatorLineDiv2'] = document.createElement('div');
+      this.manipulationDOM['seperatorLineDiv2'].className = 'network-seperatorLine';
+
+      this.manipulationDOM['editNodeSpan'] = document.createElement('span');
+      this.manipulationDOM['editNodeSpan'].className = 'network-manipulationUI edit';
+      this.manipulationDOM['editNodeLabelSpan'] = document.createElement('span');
+      this.manipulationDOM['editNodeLabelSpan'].className = 'network-manipulationLabel';
+      this.manipulationDOM['editNodeLabelSpan'].innerHTML = locale['editNode'];
+      this.manipulationDOM['editNodeSpan'].appendChild(this.manipulationDOM['editNodeLabelSpan']);
+
+      this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv2']);
+      this.manipulationDiv.appendChild(this.manipulationDOM['editNodeSpan']);
     }
     else if (this._getSelectedEdgeCount() == 1 && this._getSelectedNodeCount() == 0) {
-      this.manipulationDiv.innerHTML += "" +
-        "<div class='network-seperatorLine'></div>" +
-        "<span class='network-manipulationUI edit' id='network-manipulate-editEdge'>" +
-        "<span class='network-manipulationLabel'>"+locale['editEdge'] +"</span></span>";
+      this.manipulationDOM['seperatorLineDiv3'] = document.createElement('div');
+      this.manipulationDOM['seperatorLineDiv3'].className = 'network-seperatorLine';
+
+      this.manipulationDOM['editEdgeSpan'] = document.createElement('span');
+      this.manipulationDOM['editEdgeSpan'].className = 'network-manipulationUI edit';
+      this.manipulationDOM['editEdgeLabelSpan'] = document.createElement('span');
+      this.manipulationDOM['editEdgeLabelSpan'].className = 'network-manipulationLabel';
+      this.manipulationDOM['editEdgeLabelSpan'].innerHTML = locale['editEdge'];
+      this.manipulationDOM['editEdgeSpan'].appendChild(this.manipulationDOM['editEdgeLabelSpan']);
+
+      this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv3']);
+      this.manipulationDiv.appendChild(this.manipulationDOM['editEdgeSpan']);
     }
     if (this._selectionIsEmpty() == false) {
-      this.manipulationDiv.innerHTML += "" +
-        "<div class='network-seperatorLine'></div>" +
-        "<span class='network-manipulationUI delete' id='network-manipulate-delete'>" +
-          "<span class='network-manipulationLabel'>"+locale['del'] +"</span></span>";
+      this.manipulationDOM['seperatorLineDiv4'] = document.createElement('div');
+      this.manipulationDOM['seperatorLineDiv4'].className = 'network-seperatorLine';
+
+      this.manipulationDOM['deleteSpan'] = document.createElement('span');
+      this.manipulationDOM['deleteSpan'].className = 'network-manipulationUI delete';
+      this.manipulationDOM['deleteLabelSpan'] = document.createElement('span');
+      this.manipulationDOM['deleteLabelSpan'].className = 'network-manipulationLabel';
+      this.manipulationDOM['deleteLabelSpan'].innerHTML = locale['del'];
+      this.manipulationDOM['deleteSpan'].appendChild(this.manipulationDOM['deleteLabelSpan']);
+
+      this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv4']);
+      this.manipulationDiv.appendChild(this.manipulationDOM['deleteSpan']);
     }
 
 
     // bind the icons
-    var addNodeButton = document.getElementById("network-manipulate-addNode");
-    addNodeButton.onclick = this._createAddNodeToolbar.bind(this);
-    var addEdgeButton = document.getElementById("network-manipulate-connectNode");
-    addEdgeButton.onclick = this._createAddEdgeToolbar.bind(this);
+    this.manipulationDOM['addNodeSpan'].onclick = this._createAddNodeToolbar.bind(this);
+    this.manipulationDOM['addEdgeSpan'].onclick = this._createAddEdgeToolbar.bind(this);
     if (this._getSelectedNodeCount() == 1 && this.triggerFunctions.edit) {
-      var editButton = document.getElementById("network-manipulate-editNode");
-      editButton.onclick = this._editNode.bind(this);
+      this.manipulationDOM['editNodeSpan'].onclick = this._editNode.bind(this);
     }
     else if (this._getSelectedEdgeCount() == 1 && this._getSelectedNodeCount() == 0) {
-      var editButton = document.getElementById("network-manipulate-editEdge");
-      editButton.onclick = this._createEditEdgeToolbar.bind(this);
+      this.manipulationDOM['editEdgeSpan'].onclick = this._createEditEdgeToolbar.bind(this);
     }
     if (this._selectionIsEmpty() == false) {
-      var deleteButton = document.getElementById("network-manipulate-delete");
-      deleteButton.onclick = this._deleteSelected.bind(this);
+      this.manipulationDOM['deleteSpan'].onclick = this._deleteSelected.bind(this);
     }
-    var closeDiv = document.getElementById("network-manipulation-closeDiv");
-    closeDiv.onclick = this._toggleEditMode.bind(this);
+    this.closeDiv.onclick = this._toggleEditMode.bind(this);
 
     this.boundFunction = this._createManipulatorBar.bind(this);
     this.on('select', this.boundFunction);
   }
   else {
-    this.editModeDiv.innerHTML = "" +
-      "<span class='network-manipulationUI edit editmode' id='network-manipulate-editModeButton'>" +
-      "<span class='network-manipulationLabel'>" + locale['edit'] + "</span></span>";
-    var editModeButton = document.getElementById("network-manipulate-editModeButton");
-    editModeButton.onclick = this._toggleEditMode.bind(this);
+    while (this.editModeDiv.hasChildNodes()) {
+      this.editModeDiv.removeChild(this.editModeDiv.firstChild);
+    }
+
+    this.manipulationDOM['editModeSpan'] = document.createElement('span');
+    this.manipulationDOM['editModeSpan'].className = 'network-manipulationUI edit editmode';
+    this.manipulationDOM['editModeLabelSpan'] = document.createElement('span');
+    this.manipulationDOM['editModeLabelSpan'].className = 'network-manipulationLabel';
+    this.manipulationDOM['editModeLabelSpan'].innerHTML = locale['edit'];
+    this.manipulationDOM['editModeSpan'].appendChild(this.manipulationDOM['editModeLabelSpan']);
+
+    this.editModeDiv.appendChild(this.manipulationDOM['editModeSpan']);
+
+    this.manipulationDOM['editModeSpan'].onclick = this._toggleEditMode.bind(this);
   }
 };
 
@@ -168,17 +211,30 @@ exports._createAddNodeToolbar = function() {
 
   var locale = this.constants.locales[this.constants.locale];
 
-  // create the toolbar contents
-  this.manipulationDiv.innerHTML = "" +
-    "<span class='network-manipulationUI back' id='network-manipulate-back'>" +
-    "<span class='network-manipulationLabel'>" + locale['back'] + " </span></span>" +
-    "<div class='network-seperatorLine'></div>" +
-    "<span class='network-manipulationUI none' id='network-manipulate-back'>" +
-    "<span id='network-manipulatorLabel' class='network-manipulationLabel'>" + locale['addDescription'] + "</span></span>";
+  this.manipulationDOM = {};
+  this.manipulationDOM['backSpan'] = document.createElement('span');
+  this.manipulationDOM['backSpan'].className = 'network-manipulationUI back';
+  this.manipulationDOM['backLabelSpan'] = document.createElement('span');
+  this.manipulationDOM['backLabelSpan'].className = 'network-manipulationLabel';
+  this.manipulationDOM['backLabelSpan'].innerHTML = locale['back'];
+  this.manipulationDOM['backSpan'].appendChild(this.manipulationDOM['backLabelSpan']);
+
+  this.manipulationDOM['seperatorLineDiv1'] = document.createElement('div');
+  this.manipulationDOM['seperatorLineDiv1'].className = 'network-seperatorLine';
+
+  this.manipulationDOM['descriptionSpan'] = document.createElement('span');
+  this.manipulationDOM['descriptionSpan'].className = 'network-manipulationUI none';
+  this.manipulationDOM['descriptionLabelSpan'] = document.createElement('span');
+  this.manipulationDOM['descriptionLabelSpan'].className = 'network-manipulationLabel';
+  this.manipulationDOM['descriptionLabelSpan'].innerHTML = locale['addDescription'];
+  this.manipulationDOM['descriptionSpan'].appendChild(this.manipulationDOM['descriptionLabelSpan']);
+
+  this.manipulationDiv.appendChild(this.manipulationDOM['backSpan']);
+  this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv1']);
+  this.manipulationDiv.appendChild(this.manipulationDOM['descriptionSpan']);
 
   // bind the icon
-  var backButton = document.getElementById("network-manipulate-back");
-  backButton.onclick = this._createManipulatorBar.bind(this);
+  this.manipulationDOM['backSpan'].onclick = this._createManipulatorBar.bind(this);
 
   // we use the boundFunction so we can reference it when we unbind it from the "select" event.
   this.boundFunction = this._addNode.bind(this);
@@ -207,16 +263,30 @@ exports._createAddEdgeToolbar = function() {
   this.forceAppendSelection = false;
   this.blockConnectingEdgeSelection = true;
 
-  this.manipulationDiv.innerHTML = "" +
-    "<span class='network-manipulationUI back' id='network-manipulate-back'>" +
-      "<span class='network-manipulationLabel'>" + locale['back'] + " </span></span>" +
-    "<div class='network-seperatorLine'></div>" +
-    "<span class='network-manipulationUI none' id='network-manipulate-back'>" +
-      "<span id='network-manipulatorLabel' class='network-manipulationLabel'>" + locale['edgeDescription'] + "</span></span>";
+  this.manipulationDOM = {};
+  this.manipulationDOM['backSpan'] = document.createElement('span');
+  this.manipulationDOM['backSpan'].className = 'network-manipulationUI back';
+  this.manipulationDOM['backLabelSpan'] = document.createElement('span');
+  this.manipulationDOM['backLabelSpan'].className = 'network-manipulationLabel';
+  this.manipulationDOM['backLabelSpan'].innerHTML = locale['back'];
+  this.manipulationDOM['backSpan'].appendChild(this.manipulationDOM['backLabelSpan']);
+
+  this.manipulationDOM['seperatorLineDiv1'] = document.createElement('div');
+  this.manipulationDOM['seperatorLineDiv1'].className = 'network-seperatorLine';
+
+  this.manipulationDOM['descriptionSpan'] = document.createElement('span');
+  this.manipulationDOM['descriptionSpan'].className = 'network-manipulationUI none';
+  this.manipulationDOM['descriptionLabelSpan'] = document.createElement('span');
+  this.manipulationDOM['descriptionLabelSpan'].className = 'network-manipulationLabel';
+  this.manipulationDOM['descriptionLabelSpan'].innerHTML = locale['edgeDescription'];
+  this.manipulationDOM['descriptionSpan'].appendChild(this.manipulationDOM['descriptionLabelSpan']);
+
+  this.manipulationDiv.appendChild(this.manipulationDOM['backSpan']);
+  this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv1']);
+  this.manipulationDiv.appendChild(this.manipulationDOM['descriptionSpan']);
 
   // bind the icon
-  var backButton = document.getElementById("network-manipulate-back");
-  backButton.onclick = this._createManipulatorBar.bind(this);
+  this.manipulationDOM['backSpan'].onclick = this._createManipulatorBar.bind(this);
 
   // we use the boundFunction so we can reference it when we unbind it from the "select" event.
   this.boundFunction = this._handleConnect.bind(this);
@@ -255,16 +325,30 @@ exports._createEditEdgeToolbar = function() {
 
   var locale = this.constants.locales[this.constants.locale];
 
-  this.manipulationDiv.innerHTML = "" +
-    "<span class='network-manipulationUI back' id='network-manipulate-back'>" +
-    "<span class='network-manipulationLabel'>" + locale['back'] + " </span></span>" +
-    "<div class='network-seperatorLine'></div>" +
-    "<span class='network-manipulationUI none' id='network-manipulate-back'>" +
-    "<span id='network-manipulatorLabel' class='network-manipulationLabel'>" + locale['editEdgeDescription'] + "</span></span>";
+  this.manipulationDOM = {};
+  this.manipulationDOM['backSpan'] = document.createElement('span');
+  this.manipulationDOM['backSpan'].className = 'network-manipulationUI back';
+  this.manipulationDOM['backLabelSpan'] = document.createElement('span');
+  this.manipulationDOM['backLabelSpan'].className = 'network-manipulationLabel';
+  this.manipulationDOM['backLabelSpan'].innerHTML = locale['back'];
+  this.manipulationDOM['backSpan'].appendChild(this.manipulationDOM['backLabelSpan']);
+
+  this.manipulationDOM['seperatorLineDiv1'] = document.createElement('div');
+  this.manipulationDOM['seperatorLineDiv1'].className = 'network-seperatorLine';
+
+  this.manipulationDOM['descriptionSpan'] = document.createElement('span');
+  this.manipulationDOM['descriptionSpan'].className = 'network-manipulationUI none';
+  this.manipulationDOM['descriptionLabelSpan'] = document.createElement('span');
+  this.manipulationDOM['descriptionLabelSpan'].className = 'network-manipulationLabel';
+  this.manipulationDOM['descriptionLabelSpan'].innerHTML = locale['editEdgeDescription'];
+  this.manipulationDOM['descriptionSpan'].appendChild(this.manipulationDOM['descriptionLabelSpan']);
+
+  this.manipulationDiv.appendChild(this.manipulationDOM['backSpan']);
+  this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv1']);
+  this.manipulationDiv.appendChild(this.manipulationDOM['descriptionSpan']);
 
   // bind the icon
-  var backButton = document.getElementById("network-manipulate-back");
-  backButton.onclick = this._createManipulatorBar.bind(this);
+  this.manipulationDOM['backSpan'].onclick = this._createManipulatorBar.bind(this);
 
   // temporarily overload functions
   this.cachedFunctions["_handleTouch"]      = this._handleTouch;
diff --git a/lib/network/mixins/MixinLoader.js b/lib/network/mixins/MixinLoader.js
index 8354f0c3..2545e6ee 100644
--- a/lib/network/mixins/MixinLoader.js
+++ b/lib/network/mixins/MixinLoader.js
@@ -116,7 +116,6 @@ exports._loadManipulationSystem = function () {
     if (this.manipulationDiv === undefined) {
       this.manipulationDiv = document.createElement('div');
       this.manipulationDiv.className = 'network-manipulationDiv';
-      this.manipulationDiv.id = 'network-manipulationDiv';
       if (this.editMode == true) {
         this.manipulationDiv.style.display = "block";
       }
@@ -129,7 +128,6 @@ exports._loadManipulationSystem = function () {
     if (this.editModeDiv === undefined) {
       this.editModeDiv = document.createElement('div');
       this.editModeDiv.className = 'network-manipulation-editMode';
-      this.editModeDiv.id = 'network-manipulation-editMode';
       if (this.editMode == true) {
         this.editModeDiv.style.display = "none";
       }
@@ -142,7 +140,6 @@ exports._loadManipulationSystem = function () {
     if (this.closeDiv === undefined) {
       this.closeDiv = document.createElement('div');
       this.closeDiv.className = 'network-manipulation-closeDiv';
-      this.closeDiv.id = 'network-manipulation-closeDiv';
       this.closeDiv.style.display = this.manipulationDiv.style.display;
       this.frame.appendChild(this.closeDiv);
     }