diff --git a/app/assets/images/ui-bg_flat_0_aaaaaa_40x100.png b/app/assets/images/images/ui-bg_flat_0_aaaaaa_40x100.png
similarity index 100%
rename from app/assets/images/ui-bg_flat_0_aaaaaa_40x100.png
rename to app/assets/images/images/ui-bg_flat_0_aaaaaa_40x100.png
diff --git a/app/assets/images/ui-bg_flat_75_ffffff_40x100.png b/app/assets/images/images/ui-bg_flat_75_ffffff_40x100.png
similarity index 100%
rename from app/assets/images/ui-bg_flat_75_ffffff_40x100.png
rename to app/assets/images/images/ui-bg_flat_75_ffffff_40x100.png
diff --git a/app/assets/images/ui-bg_glass_55_fbf9ee_1x400.png b/app/assets/images/images/ui-bg_glass_55_fbf9ee_1x400.png
similarity index 100%
rename from app/assets/images/ui-bg_glass_55_fbf9ee_1x400.png
rename to app/assets/images/images/ui-bg_glass_55_fbf9ee_1x400.png
diff --git a/app/assets/images/ui-bg_glass_65_ffffff_1x400.png b/app/assets/images/images/ui-bg_glass_65_ffffff_1x400.png
similarity index 100%
rename from app/assets/images/ui-bg_glass_65_ffffff_1x400.png
rename to app/assets/images/images/ui-bg_glass_65_ffffff_1x400.png
diff --git a/app/assets/images/ui-bg_glass_75_dadada_1x400.png b/app/assets/images/images/ui-bg_glass_75_dadada_1x400.png
similarity index 100%
rename from app/assets/images/ui-bg_glass_75_dadada_1x400.png
rename to app/assets/images/images/ui-bg_glass_75_dadada_1x400.png
diff --git a/app/assets/images/ui-bg_glass_75_e6e6e6_1x400.png b/app/assets/images/images/ui-bg_glass_75_e6e6e6_1x400.png
similarity index 100%
rename from app/assets/images/ui-bg_glass_75_e6e6e6_1x400.png
rename to app/assets/images/images/ui-bg_glass_75_e6e6e6_1x400.png
diff --git a/app/assets/images/ui-bg_glass_95_fef1ec_1x400.png b/app/assets/images/images/ui-bg_glass_95_fef1ec_1x400.png
similarity index 100%
rename from app/assets/images/ui-bg_glass_95_fef1ec_1x400.png
rename to app/assets/images/images/ui-bg_glass_95_fef1ec_1x400.png
diff --git a/app/assets/images/ui-bg_highlight-soft_75_cccccc_1x100.png b/app/assets/images/images/ui-bg_highlight-soft_75_cccccc_1x100.png
similarity index 100%
rename from app/assets/images/ui-bg_highlight-soft_75_cccccc_1x100.png
rename to app/assets/images/images/ui-bg_highlight-soft_75_cccccc_1x100.png
diff --git a/app/assets/images/ui-icons_2e83ff_256x240.png b/app/assets/images/images/ui-icons_2e83ff_256x240.png
similarity index 100%
rename from app/assets/images/ui-icons_2e83ff_256x240.png
rename to app/assets/images/images/ui-icons_2e83ff_256x240.png
diff --git a/app/assets/images/ui-icons_454545_256x240.png b/app/assets/images/images/ui-icons_454545_256x240.png
similarity index 100%
rename from app/assets/images/ui-icons_454545_256x240.png
rename to app/assets/images/images/ui-icons_454545_256x240.png
diff --git a/app/assets/images/ui-icons_888888_256x240.png b/app/assets/images/images/ui-icons_888888_256x240.png
similarity index 100%
rename from app/assets/images/ui-icons_888888_256x240.png
rename to app/assets/images/images/ui-icons_888888_256x240.png
diff --git a/app/assets/images/ui-icons_cd0a0a_256x240.png b/app/assets/images/images/ui-icons_cd0a0a_256x240.png
similarity index 100%
rename from app/assets/images/ui-icons_cd0a0a_256x240.png
rename to app/assets/images/images/ui-icons_cd0a0a_256x240.png
diff --git a/app/assets/images/snow.png b/app/assets/images/snow.png
deleted file mode 100644
index ab53fc0c..00000000
Binary files a/app/assets/images/snow.png and /dev/null differ
diff --git a/app/assets/images/snow_@2X.png b/app/assets/images/snow_@2X.png
deleted file mode 100644
index 4c0db0f9..00000000
Binary files a/app/assets/images/snow_@2X.png and /dev/null differ
diff --git a/app/assets/images/ui-icons_222222_256x240.png b/app/assets/images/ui-icons_222222_256x240.png
deleted file mode 100644
index b273ff11..00000000
Binary files a/app/assets/images/ui-icons_222222_256x240.png and /dev/null differ
diff --git a/app/assets/javascripts/Jit/find.js b/app/assets/javascripts/Jit/filter.js
similarity index 100%
rename from app/assets/javascripts/Jit/find.js
rename to app/assets/javascripts/Jit/filter.js
diff --git a/app/assets/javascripts/Jit/graphsettings-event-handlers.js b/app/assets/javascripts/Jit/graphsettings-event-handlers.js
index ee49e522..0730e7f3 100644
--- a/app/assets/javascripts/Jit/graphsettings-event-handlers.js
+++ b/app/assets/javascripts/Jit/graphsettings-event-handlers.js
@@ -1,544 +1,543 @@
 function selectEdgeOnClickHandler(adj, e) {
-  if (Mconsole.busy) return;
-  
-  // catch right click on mac, which is often like ctrl+click
-  if (navigator.platform.indexOf("Mac")!=-1 && e.ctrlKey) {
-    selectEdgeOnRightClickHandler(adj, e)
-    return;
-  }
-  
-  if (synapseWasDoubleClicked()) {
-    synapseDoubleClickHandler(adj, e);
-    return;
-  }
+    if (Mconsole.busy) return;
 
-  var edgeIsSelected = MetamapsModel.selectedEdges.indexOf(adj);
-  if (edgeIsSelected == -1) edgeIsSelected = false;
-  else if (edgeIsSelected != -1) edgeIsSelected = true;
-  
-  if (edgeIsSelected && e.shiftKey) {
-    //deselecting an edge with shift
-    deselectEdge(adj);
-  } else if (!edgeIsSelected && e.shiftKey) {
-    //selecting an edge with shift
-    selectEdge(adj);
-  } else if (edgeIsSelected && !e.shiftKey) {
-    //deselecting an edge without shift - unselect all
-    deselectAllEdges();
-  } else if (!edgeIsSelected && !e.shiftKey) {
-    //selecting an edge without shift - unselect all but new one
-    deselectAllEdges();
-    selectEdge(adj);
-  }
+    // catch right click on mac, which is often like ctrl+click
+    if (navigator.platform.indexOf("Mac") != -1 && e.ctrlKey) {
+        selectEdgeOnRightClickHandler(adj, e)
+        return;
+    }
 
-  Mconsole.plot();
-}//selectEdgeOnClickHandler
+    if (synapseWasDoubleClicked()) {
+        synapseDoubleClickHandler(adj, e);
+        return;
+    }
+
+    var edgeIsSelected = MetamapsModel.selectedEdges.indexOf(adj);
+    if (edgeIsSelected == -1) edgeIsSelected = false;
+    else if (edgeIsSelected != -1) edgeIsSelected = true;
+
+    if (edgeIsSelected && e.shiftKey) {
+        //deselecting an edge with shift
+        deselectEdge(adj);
+    } else if (!edgeIsSelected && e.shiftKey) {
+        //selecting an edge with shift
+        selectEdge(adj);
+    } else if (edgeIsSelected && !e.shiftKey) {
+        //deselecting an edge without shift - unselect all
+        deselectAllEdges();
+    } else if (!edgeIsSelected && !e.shiftKey) {
+        //selecting an edge without shift - unselect all but new one
+        deselectAllEdges();
+        selectEdge(adj);
+    }
+
+    Mconsole.plot();
+} //selectEdgeOnClickHandler
 
 function selectEdgeOnRightClickHandler(adj, e) {
     // the 'node' variable is a JIT node, the one that was clicked on
     // the 'e' variable is the click event
-    
+
     e.preventDefault();
     e.stopPropagation();
-    
+
     if (Mconsole.busy) return;
-    
+
     selectEdge(adj);
-    
+
     // delete old right click menu
     $('.rightclickmenu').remove();
     // create new menu for clicked on node
     var rightclickmenu = document.createElement("div");
     rightclickmenu.className = "rightclickmenu";
-    
+
     // add the proper options to the menu
     var menustring = '<ul>';
-    
+
     if (userid != null) menustring += '<li class="rc-delete">Delete</li>';
     if (mapid && userid != null) menustring += '<li class="rc-remove">Remove from map</li>';
     menustring += '<li class="rc-hide">Hide until refresh</li>';
     if (userid) {
-      var options = '<ul><li class="changeP toCommons">commons</li> \
+        var options = '<ul><li class="changeP toCommons">commons</li> \
                          <li class="changeP toPublic">public</li> \
                          <li class="changeP toPrivate">private</li> \
                      </ul>';
-      
-      menustring += '<li class="rc-permission">Change permissions' + options + '</li>';
+
+        menustring += '<li class="rc-permission">Change permissions' + options + '</li>';
     }
-    
+
     menustring += '</ul>';
     rightclickmenu.innerHTML = menustring;
-    
+
     // position the menu where the click happened
     $(rightclickmenu).css({
-      left: e.clientX,
-      top: e.clientY
+        left: e.clientX,
+        top: e.clientY
     });
     //add the menu to the page
     $('#center-container').append(rightclickmenu);
-    
-    
+
+
     // attach events to clicks on the list items
-    
+
     // delete the selected things from the database
-    $('.rc-delete').click(function() {
-      $('.rightclickmenu').remove();
-      var n = MetamapsModel.selectedNodes.length;
-      var e = MetamapsModel.selectedEdges.length;
-      var ntext = n == 1 ? "1 topic" : n + " topics";
-      var etext = e == 1 ? "1 synapse" : e + " synapses";
-      var text = "You have " + ntext + " and " + etext + " selected. ";
-      
-      var r=confirm(text + "Are you sure you want to permanently delete them all? This will remove them from all maps they appear on."); 
-      if (r == true) {
-        deleteSelectedEdges();
-        deleteSelectedNodes();
-      }
+    $('.rc-delete').click(function () {
+        $('.rightclickmenu').remove();
+        var n = MetamapsModel.selectedNodes.length;
+        var e = MetamapsModel.selectedEdges.length;
+        var ntext = n == 1 ? "1 topic" : n + " topics";
+        var etext = e == 1 ? "1 synapse" : e + " synapses";
+        var text = "You have " + ntext + " and " + etext + " selected. ";
+
+        var r = confirm(text + "Are you sure you want to permanently delete them all? This will remove them from all maps they appear on.");
+        if (r == true) {
+            deleteSelectedEdges();
+            deleteSelectedNodes();
+        }
     });
-    
+
     // remove the selected things from the map
-    $('.rc-remove').click(function() {
-      $('.rightclickmenu').remove();
-      removeSelectedEdges();
-      removeSelectedNodes();
+    $('.rc-remove').click(function () {
+        $('.rightclickmenu').remove();
+        removeSelectedEdges();
+        removeSelectedNodes();
     });
-    
+
     // hide selected nodes and synapses until refresh
-    $('.rc-hide').click(function() {
-      $('.rightclickmenu').remove();
-      hideSelectedEdges();
-      hideSelectedNodes();
+    $('.rc-hide').click(function () {
+        $('.rightclickmenu').remove();
+        hideSelectedEdges();
+        hideSelectedNodes();
     });
-    
+
     // change the permission of all the selected nodes and synapses that you were the originator of
-    $('.rc-permission li').click(function() {
-      $('.rightclickmenu').remove();
-      // $(this).text() will be 'commons' 'public' or 'private'
-      updateSelectedPermissions( $(this).text() );
+    $('.rc-permission li').click(function () {
+        $('.rightclickmenu').remove();
+        // $(this).text() will be 'commons' 'public' or 'private'
+        updateSelectedPermissions($(this).text());
     });
-      
-  } //selectEdgeOnRightClickHandler
+
+} //selectEdgeOnRightClickHandler
 
 
 function synapseDoubleClickHandler(adj, e) {
-  editEdge(adj, e);
+    editEdge(adj, e);
 }
 
 /*
  * Returns a boolean saying if the synapse was double clicked in our understanding of the word
  */
 function synapseWasDoubleClicked() {
-   //grab the timestamp of the click 
-   var storedTime = MetamapsModel.lastSynapseClick;
-   var now = Date.now(); //not compatible with IE8 FYI 
-   MetamapsModel.lastSynapseClick = now;
- 
-   if (now - storedTime < MetamapsModel.DOUBLE_CLICK_TOLERANCE) { 
-     return true;
-   } else {
-     return false;
-   }
-}//synapseWasDoubleClicked;
+    //grab the timestamp of the click 
+    var storedTime = MetamapsModel.lastSynapseClick;
+    var now = Date.now(); //not compatible with IE8 FYI 
+    MetamapsModel.lastSynapseClick = now;
+
+    if (now - storedTime < MetamapsModel.DOUBLE_CLICK_TOLERANCE) {
+        return true;
+    } else {
+        return false;
+    }
+} //synapseWasDoubleClicked;
 
 function nodeDoubleClickHandler(node, e) {
-  openNodeShowcard(node);
+    openNodeShowcard(node);
 }
 
 function enterKeyHandler(event) {
-  
-  //var selectedNodesCopy = MetamapsModel.selectedNodes.slice(0);
-  //var len = selectedNodesCopy.length;
-  //for (var i = 0; i < len; i += 1) { 
-  //  n = selectedNodesCopy[i]; 
-  //  keepFromCommons(n);
-  //}//for
-  //Mconsole.plot();
-}//enterKeyHandler
+
+    //var selectedNodesCopy = MetamapsModel.selectedNodes.slice(0);
+    //var len = selectedNodesCopy.length;
+    //for (var i = 0; i < len; i += 1) { 
+    //  n = selectedNodesCopy[i]; 
+    //  keepFromCommons(n);
+    //}//for
+    //Mconsole.plot();
+} //enterKeyHandler
 
 function escKeyHandler() {
-  deselectAllEdges();
-  deselectAllNodes();
-}//escKeyHandler
+    deselectAllEdges();
+    deselectAllNodes();
+} //escKeyHandler
 
 /*
  * Make a node "in the commons" (with a green circle) lose its
  * green circle so it stays on the console/map/...
  */
 function keepFromCommons(event, id) {
-  if (userid == null) {
-    return;
-  }
+    if (userid == null) {
+        return;
+    }
 
-  $('#topic_addSynapse').val("false");
-  $('#topic_x').val(0); 
-  $('#topic_y').val(0); 
-  $('#topic_grabTopic').val(id);
-	$('.new_topic').submit();
-  
-  event.preventDefault();
-  event.stopPropagation();
-  return false;
-}//doubleClickNodeHandler
+    $('#topic_addSynapse').val("false");
+    $('#topic_x').val(0);
+    $('#topic_y').val(0);
+    $('#topic_grabTopic').val(id);
+    $('.new_topic').submit();
+
+    event.preventDefault();
+    event.stopPropagation();
+    return false;
+} //doubleClickNodeHandler
 
 /*
  * Returns a boolean saying if the node was double clicked in our understanding of the word
  */
 function nodeWasDoubleClicked() {
-   //grab the timestamp of the click 
-   var storedTime = MetamapsModel.lastNodeClick;
-   var now = Date.now(); //not compatible with IE8 FYI 
-   MetamapsModel.lastNodeClick = now;
- 
-   if (now - storedTime < MetamapsModel.DOUBLE_CLICK_TOLERANCE) { 
-     return true;
-   } else {
-     return false;
-   }
-}//nodeWasDoubleClicked;
+    //grab the timestamp of the click 
+    var storedTime = MetamapsModel.lastNodeClick;
+    var now = Date.now(); //not compatible with IE8 FYI 
+    MetamapsModel.lastNodeClick = now;
+
+    if (now - storedTime < MetamapsModel.DOUBLE_CLICK_TOLERANCE) {
+        return true;
+    } else {
+        return false;
+    }
+} //nodeWasDoubleClicked;
 
 function selectNodeOnClickHandler(node, e) {
-  if (Mconsole.busy) return;
-  
-  // catch right click on mac, which is often like ctrl+click
-  if (navigator.platform.indexOf("Mac")!=-1 && e.ctrlKey) {
-    selectNodeOnRightClickHandler(node, e)
-    return;
-  }
+    if (Mconsole.busy) return;
 
-  var check = nodeWasDoubleClicked();
-  if (check) {
-    nodeDoubleClickHandler(node, e);
-    return;
-  } else {
-    // wait a certain length of time, then check again, then run this code
-    setTimeout(function() {
-      if (!nodeWasDoubleClicked()) {
-        if (!e.shiftKey) {
-            Mconsole.graph.eachNode(function (n) {
-              if (n.id != node.id) {
-                deselectNode(n);
-              }
-            });
-        }
-        if (node.selected) {
-          deselectNode(node);
-        } else {
-          selectNode(node);
-        }
-        //trigger animation to final styles
-        Mconsole.fx.animate({
-          modes: ['edge-property:lineWidth:color:alpha'],
-          duration: 500
-        });
-        Mconsole.plot();
-      }
-    }, MetamapsModel.DOUBLE_CLICK_TOLERANCE);
-  }
-}//selectNodeOnClickHandler
+    // catch right click on mac, which is often like ctrl+click
+    if (navigator.platform.indexOf("Mac") != -1 && e.ctrlKey) {
+        selectNodeOnRightClickHandler(node, e)
+        return;
+    }
 
-  function selectNodeOnRightClickHandler(node, e) {
+    var check = nodeWasDoubleClicked();
+    if (check) {
+        nodeDoubleClickHandler(node, e);
+        return;
+    } else {
+        // wait a certain length of time, then check again, then run this code
+        setTimeout(function () {
+            if (!nodeWasDoubleClicked()) {
+                if (!e.shiftKey) {
+                    Mconsole.graph.eachNode(function (n) {
+                        if (n.id != node.id) {
+                            deselectNode(n);
+                        }
+                    });
+                }
+                if (node.selected) {
+                    deselectNode(node);
+                } else {
+                    selectNode(node);
+                }
+                //trigger animation to final styles
+                Mconsole.fx.animate({
+                    modes: ['edge-property:lineWidth:color:alpha'],
+                    duration: 500
+                });
+                Mconsole.plot();
+            }
+        }, MetamapsModel.DOUBLE_CLICK_TOLERANCE);
+    }
+} //selectNodeOnClickHandler
+
+function selectNodeOnRightClickHandler(node, e) {
     // the 'node' variable is a JIT node, the one that was clicked on
     // the 'e' variable is the click event
-    
+
     e.preventDefault();
     e.stopPropagation();
-    
+
     if (Mconsole.busy) return;
-    
+
     selectNode(node);
-    
+
     // delete old right click menu
     $('.rightclickmenu').remove();
     // create new menu for clicked on node
     var rightclickmenu = document.createElement("div");
     rightclickmenu.className = "rightclickmenu";
-    
+
     // add the proper options to the menu
     var menustring = '<ul>';
-    
+
     if (userid != null) menustring += '<li class="rc-delete">Delete</li>';
     if (mapid && userid != null) menustring += '<li class="rc-remove">Remove from map</li>';
     menustring += '<li class="rc-hide">Hide until refresh</li>';
-    
+
     if (!mapid) menustring += '<li class="rc-center">Center this topic</li>';
     menustring += '<li class="rc-popout">Open in new tab</li>';
     if (userid) {
-      var options = '<ul><li class="changeP toCommons">commons</li> \
+        var options = '<ul><li class="changeP toCommons">commons</li> \
                          <li class="changeP toPublic">public</li> \
                          <li class="changeP toPrivate">private</li> \
                      </ul>';
-      
-      menustring += '<li class="rc-permission">Change permissions' + options + '</li>';
+
+        menustring += '<li class="rc-permission">Change permissions' + options + '</li>';
     }
-    
+
     menustring += '</ul>';
     rightclickmenu.innerHTML = menustring;
-    
+
     // position the menu where the click happened
     $(rightclickmenu).css({
-      left: e.clientX,
-      top: e.clientY
+        left: e.clientX,
+        top: e.clientY
     });
     //add the menu to the page
     $('#center-container').append(rightclickmenu);
-    
-    
+
+
     // attach events to clicks on the list items
-    
+
     // delete the selected things from the database
-    $('.rc-delete').click(function() {
-      $('.rightclickmenu').remove();
-      var n = MetamapsModel.selectedNodes.length;
-      var e = MetamapsModel.selectedEdges.length;
-      var ntext = n == 1 ? "1 topic" : n + " topics";
-      var etext = e == 1 ? "1 synapse" : e + " synapses";
-      var text = "You have " + ntext + " and " + etext + " selected. ";
-      
-      var r=confirm(text + "Are you sure you want to permanently delete them all? This will remove them from all maps they appear on."); 
-      if (r == true) {
-        deleteSelectedEdges();
-        deleteSelectedNodes();
-      }
+    $('.rc-delete').click(function () {
+        $('.rightclickmenu').remove();
+        var n = MetamapsModel.selectedNodes.length;
+        var e = MetamapsModel.selectedEdges.length;
+        var ntext = n == 1 ? "1 topic" : n + " topics";
+        var etext = e == 1 ? "1 synapse" : e + " synapses";
+        var text = "You have " + ntext + " and " + etext + " selected. ";
+
+        var r = confirm(text + "Are you sure you want to permanently delete them all? This will remove them from all maps they appear on.");
+        if (r == true) {
+            deleteSelectedEdges();
+            deleteSelectedNodes();
+        }
     });
-    
+
     // remove the selected things from the map
-    $('.rc-remove').click(function() {
-      $('.rightclickmenu').remove();
-      removeSelectedEdges();
-      removeSelectedNodes();
+    $('.rc-remove').click(function () {
+        $('.rightclickmenu').remove();
+        removeSelectedEdges();
+        removeSelectedNodes();
     });
-    
+
     // hide selected nodes and synapses until refresh
-    $('.rc-hide').click(function() {
-      $('.rightclickmenu').remove();
-      hideSelectedEdges();
-      hideSelectedNodes();
+    $('.rc-hide').click(function () {
+        $('.rightclickmenu').remove();
+        hideSelectedEdges();
+        hideSelectedNodes();
     });
-    
+
     // when in radial, center on the topic you picked
-    $('.rc-center').click(function() {
-      $('.rightclickmenu').remove();
-      centerOn(node.id);
+    $('.rc-center').click(function () {
+        $('.rightclickmenu').remove();
+        centerOn(node.id);
     });
-    
+
     // open the entity in a new tab
-    $('.rc-popout').click(function() {
-      $('.rightclickmenu').remove();
-      var win=window.open('/topics/' + node.id, '_blank');
-      win.focus();
+    $('.rc-popout').click(function () {
+        $('.rightclickmenu').remove();
+        var win = window.open('/topics/' + node.id, '_blank');
+        win.focus();
     });
-    
+
     // change the permission of all the selected nodes and synapses that you were the originator of
-    $('.rc-permission li').click(function() {
-      $('.rightclickmenu').remove();
-      // $(this).text() will be 'commons' 'public' or 'private'
-      updateSelectedPermissions( $(this).text() );
+    $('.rc-permission li').click(function () {
+        $('.rightclickmenu').remove();
+        // $(this).text() will be 'commons' 'public' or 'private'
+        updateSelectedPermissions($(this).text());
     });
-      
-  } //selectNodeOnRightClickHandler
 
-function canvasDoubleClickHandler(canvasLoc,e) { 
+} //selectNodeOnRightClickHandler
 
-   //grab the location and timestamp of the click 
-   var storedTime = MetamapsModel.lastCanvasClick;
-   var now = Date.now(); //not compatible with IE8 FYI 
-   MetamapsModel.lastCanvasClick = now;
- 
-   // if on a public map, disable topic creation
-   if (userid && (mapperm || !mapid) ) {
-     if (now - storedTime < MetamapsModel.DOUBLE_CLICK_TOLERANCE) {  
-        //pop up node creation :) 
-        $('#topic_grabTopic').val("null"); 
-        $('#topic_addSynapse').val("false"); 
-        $('#new_topic').css('left', e.clientX + "px"); 
-        $('#new_topic').css('top', e.clientY + "px"); 
-        $('#topic_x').val(canvasLoc.x); 
-        $('#topic_y').val(canvasLoc.y);      
-        $('#new_topic').fadeIn('fast');
-        $('#topic_name').typeahead('setQuery','').focus(); 
-        return;
-     }
+function canvasDoubleClickHandler(canvasLoc, e) {
+
+    //grab the location and timestamp of the click 
+    var storedTime = MetamapsModel.lastCanvasClick;
+    var now = Date.now(); //not compatible with IE8 FYI 
+    MetamapsModel.lastCanvasClick = now;
+
+    // if on a public map, disable topic creation
+    if (userid && (mapperm || !mapid)) {
+        if (now - storedTime < MetamapsModel.DOUBLE_CLICK_TOLERANCE) {
+            //pop up node creation :) 
+            $('#topic_grabTopic').val("null");
+            $('#topic_addSynapse').val("false");
+            $('#new_topic').css('left', e.clientX + "px");
+            $('#new_topic').css('top', e.clientY + "px");
+            $('#topic_x').val(canvasLoc.x);
+            $('#topic_y').val(canvasLoc.y);
+            $('#new_topic').fadeIn('fast');
+            $('#topic_name').typeahead('setQuery', '').focus();
+            return;
+        }
     }
-    
+
     if (!MetamapsModel.didPan) {
-      $('#new_topic').fadeOut('fast'); 
-      $('#new_synapse').fadeOut('fast'); 
-      $('.rightclickmenu').remove();
-      // reset the draw synapse positions to false
-      MetamapsModel.synapseStartCoord = false;
-      MetamapsModel.synapseEndCoord = false;
-      deselectAllNodes();
-      tempInit = false; 
-      tempNode = null; 
-      tempNode2 = null; 
-      Mconsole.plot(); 
+        $('#new_topic').fadeOut('fast');
+        $('#new_synapse').fadeOut('fast');
+        $('.rightclickmenu').remove();
+        // reset the draw synapse positions to false
+        MetamapsModel.synapseStartCoord = false;
+        MetamapsModel.synapseEndCoord = false;
+        deselectAllNodes();
+        tempInit = false;
+        tempNode = null;
+        tempNode2 = null;
+        Mconsole.plot();
     }
-}//canvasDoubleClickHandler 
+} //canvasDoubleClickHandler 
 
 function handleSelectionBeforeDragging(node, e) {
-  // four cases:
-  // 1 nothing is selected, so pretend you aren't selecting
-  // 2 others are selected only and shift, so additionally select this one
-  // 3 others are selected only, no shift: drag only this one
-  // 4 this node and others were selected, so drag them (just return false)
-  //return value: deselect node again after?
-  if (MetamapsModel.selectedNodes.length == 0) {
-    selectNode(node);
-    return 'deselect';
-  }
-  if (MetamapsModel.selectedNodes.indexOf(node) == -1) {
-    if (e.shiftKey) {
-      selectNode(node);
-      return 'nothing';
-    } else {
-      return 'only-drag-this-one';
+    // four cases:
+    // 1 nothing is selected, so pretend you aren't selecting
+    // 2 others are selected only and shift, so additionally select this one
+    // 3 others are selected only, no shift: drag only this one
+    // 4 this node and others were selected, so drag them (just return false)
+    //return value: deselect node again after?
+    if (MetamapsModel.selectedNodes.length == 0) {
+        selectNode(node);
+        return 'deselect';
     }
-  }
-  return 'nothing'; //case 4?
+    if (MetamapsModel.selectedNodes.indexOf(node) == -1) {
+        if (e.shiftKey) {
+            selectNode(node);
+            return 'nothing';
+        } else {
+            return 'only-drag-this-one';
+        }
+    }
+    return 'nothing'; //case 4?
 }
 
 function onDragMoveTopicHandler(node, eventInfo, e) {
     if (node && !node.nodeFrom) {
-       $('#new_synapse').fadeOut('fast');
-       $('#new_topic').fadeOut('fast');
-       var pos = eventInfo.getPos();
-       // if it's a left click, or a touch, move the node
-       if ( e.touches || (e.button == 0 && !e.altKey && (e.buttons == 0 || e.buttons == 1 || e.buttons == undefined))) {
-           //if the node dragged isn't already selected, select it
-           var whatToDo = handleSelectionBeforeDragging(node, e);
-           if (whatToDo == 'only-drag-this-one' || whatToDo == 'deselect') {
-             if (gType == "centered") {
-               var rho = Math.sqrt(pos.x * pos.x + pos.y * pos.y);
-               var theta = Math.atan2(pos.y, pos.x);
-               node.pos.setp(theta, rho);
-             }
-             else {
-               node.pos.setc(pos.x,pos.y);
-               node.setData('xloc', pos.x);
-               node.setData('yloc', pos.y);
-             }
-           } else {
-             var len = MetamapsModel.selectedNodes.length;
+        $('#new_synapse').fadeOut('fast');
+        $('#new_topic').fadeOut('fast');
+        var pos = eventInfo.getPos();
+        var newPosComplex = new $jit.Complex(pos.x, pos.y);
+        // if it's a left click, or a touch, move the node
+        if (e.touches || (e.button == 0 && !e.altKey && (e.buttons == 0 || e.buttons == 1 || e.buttons == undefined))) {
+            //if the node dragged isn't already selected, select it
+            var whatToDo = handleSelectionBeforeDragging(node, e);
+            if (whatToDo == 'only-drag-this-one' || whatToDo == 'deselect') {
+                if (gType == "centered") {
+                    var rho = Math.sqrt(pos.x * pos.x + pos.y * pos.y);
+                    var theta = Math.atan2(pos.y, pos.x);
+                    node.pos.setp(theta, rho);
+                } else {
+                    node.setPos(newPosComplex, 'start');
+                    node.setPos(newPosComplex, 'current');
+                    node.setPos(newPosComplex, 'end');
+                    node.setData('xloc', pos.x);
+                    node.setData('yloc', pos.y);
+                }
+            } else {
+                var len = MetamapsModel.selectedNodes.length;
 
-             //first define offset for each node
-             var xOffset = new Array();
-             var yOffset = new Array();
-             for (var i = 0; i < len; i += 1) {
-               var n = MetamapsModel.selectedNodes[i];
-               if (gType == "centered") {
-                 xOffset[i] = n.pos.toComplex().x - node.pos.toComplex().x;
-                 yOffset[i] = n.pos.toComplex().y - node.pos.toComplex().y;
-               }
-               else {
-                 xOffset[i] = n.pos.x - node.pos.x;
-                 yOffset[i] = n.pos.y - node.pos.y;
-               }
-             }//for
+                //first define offset for each node
+                var xOffset = new Array();
+                var yOffset = new Array();
+                for (var i = 0; i < len; i += 1) {
+                    var n = MetamapsModel.selectedNodes[i];
+                    if (gType == "centered") {
+                        xOffset[i] = n.pos.toComplex().x - node.pos.toComplex().x;
+                        yOffset[i] = n.pos.toComplex().y - node.pos.toComplex().y;
+                    } else {
+                        xOffset[i] = n.pos.x - node.pos.x;
+                        yOffset[i] = n.pos.y - node.pos.y;
+                    }
+                } //for
 
-             for (var i = 0; i < len; i += 1) {
-               var n = MetamapsModel.selectedNodes[i];
-               if (gType == "centered") {
-                 var x = pos.x + xOffset[i];
-                 var y = pos.y + yOffset[i];
-                 var rho = Math.sqrt(x * x + y * y);
-                 var theta = Math.atan2(y, x);
-                 n.pos.setp(theta, rho);
-               }
-               else {
-                 var x = pos.x + xOffset[i];
-                 var y = pos.y + yOffset[i];
-                 n.pos.setc(x,y);
-                 n.setData('xloc', pos.x);
-                 n.setData('yloc', pos.y);
-               }
-               n.setData('xloc', x);
-               n.setData('yloc', y);
-             }//for
-           }//if
+                for (var i = 0; i < len; i += 1) {
+                    var n = MetamapsModel.selectedNodes[i];
+                    if (gType == "centered") {
+                        var x = pos.x + xOffset[i];
+                        var y = pos.y + yOffset[i];
+                        var rho = Math.sqrt(x * x + y * y);
+                        var theta = Math.atan2(y, x);
+                        n.pos.setp(theta, rho);
+                    } else {
+                        newPosComplex = new $jit.Complex(pos.x + xOffset[i], pos.y + yOffset[i]);
+                        n.setPos(newPosComplex, 'start');
+                        n.setPos(newPosComplex, 'current');
+                        n.setPos(newPosComplex, 'end');
+                        n.setData('xloc', pos.x + xOffset[i]);
+                        n.setData('yloc', pos.y + yOffset[i]);
+                    }
+                } //for
+            } //if
 
-           if (whatToDo == 'deselect') {
-             deselectNode(node);
-           }
-           dragged = node.id;
-           Mconsole.plot();
-       }
-       // if it's a right click or holding down alt, start synapse creation  ->third option is for firefox
-       else if ((e.button == 2 || (e.button == 0 && e.altKey) || e.buttons == 2) && userid != null) {
-       
-           // if on a public map, disable synapse creation
-           if (mapid && !mapperm) return;
-       
-           if (tempInit == false) {
-              tempNode = node;
-              tempInit = true;
-              // set the draw synapse start position
-              MetamapsModel.synapseStartCoord = {
-                x: node.pos.getc().x,
-                y: node.pos.getc().y
-              };
-           }
-           //
-           temp = eventInfo.getNode();
-           if (temp != false && temp.id != node.id) { // this means a Node has been returned
-              tempNode2 = temp;
-              
-              // set the draw synapse end position
-              MetamapsModel.synapseEndCoord = {
-                x: temp.pos.getc().x,
-                y: temp.pos.getc().y
-              };
-              
-              Mconsole.plot();
-              
-              // before making the highlighted one bigger, make sure all the others are regular size
-              Mconsole.graph.eachNode(function (n) {
-                  n.setData('dim', 25, 'current');
-              });
-              temp.setData('dim',35,'current');
-              Mconsole.fx.plotNode(tempNode, Mconsole.canvas);
-              Mconsole.fx.plotNode(temp, Mconsole.canvas);
-           } else if (!temp) {
-               tempNode2 = null;
-               Mconsole.graph.eachNode(function (n) {
-                  n.setData('dim', 25, 'current');
-               });
-               //pop up node creation :)
-              $('#topic_grabTopic').val("null");
-              var myX = e.clientX - 110;
-              var myY = e.clientY - 30;
-              $('#new_topic').css('left',myX + "px");
-              $('#new_topic').css('top',myY + "px");
-              $('#new_synapse').css('left',myX + "px");
-              $('#new_synapse').css('top',myY + "px");
-              $('#topic_x').val(eventInfo.getPos().x);
-              $('#topic_y').val(eventInfo.getPos().y);
-              // set the draw synapse end position
-              MetamapsModel.synapseEndCoord = {
-                x: eventInfo.getPos().x,
-                y: eventInfo.getPos().y
-              };
-              Mconsole.plot();
-              Mconsole.fx.plotNode(tempNode, Mconsole.canvas);
-           }
-       }
-   }
+            if (whatToDo == 'deselect') {
+                deselectNode(node);
+            }
+            dragged = node.id;
+            Mconsole.plot();
+        }
+        // if it's a right click or holding down alt, start synapse creation  ->third option is for firefox
+        else if ((e.button == 2 || (e.button == 0 && e.altKey) || e.buttons == 2) && userid != null) {
+
+            // if on a public map, disable synapse creation
+            if (mapid && !mapperm) return;
+
+            if (tempInit == false) {
+                tempNode = node;
+                tempInit = true;
+                // set the draw synapse start position
+                MetamapsModel.synapseStartCoord = {
+                    x: node.pos.getc().x,
+                    y: node.pos.getc().y
+                };
+            }
+            //
+            temp = eventInfo.getNode();
+            if (temp != false && temp.id != node.id) { // this means a Node has been returned
+                tempNode2 = temp;
+
+                // set the draw synapse end position
+                MetamapsModel.synapseEndCoord = {
+                    x: temp.pos.getc().x,
+                    y: temp.pos.getc().y
+                };
+
+                Mconsole.plot();
+
+                // before making the highlighted one bigger, make sure all the others are regular size
+                Mconsole.graph.eachNode(function (n) {
+                    n.setData('dim', 25, 'current');
+                });
+                temp.setData('dim', 35, 'current');
+                Mconsole.fx.plotNode(tempNode, Mconsole.canvas);
+                Mconsole.fx.plotNode(temp, Mconsole.canvas);
+            } else if (!temp) {
+                tempNode2 = null;
+                Mconsole.graph.eachNode(function (n) {
+                    n.setData('dim', 25, 'current');
+                });
+                //pop up node creation :)
+                $('#topic_grabTopic').val("null");
+                var myX = e.clientX - 110;
+                var myY = e.clientY - 30;
+                $('#new_topic').css('left', myX + "px");
+                $('#new_topic').css('top', myY + "px");
+                $('#new_synapse').css('left', myX + "px");
+                $('#new_synapse').css('top', myY + "px");
+                $('#topic_x').val(eventInfo.getPos().x);
+                $('#topic_y').val(eventInfo.getPos().y);
+                // set the draw synapse end position
+                MetamapsModel.synapseEndCoord = {
+                    x: eventInfo.getPos().x,
+                    y: eventInfo.getPos().y
+                };
+                Mconsole.plot();
+                Mconsole.fx.plotNode(tempNode, Mconsole.canvas);
+            }
+        }
+    }
 }
 
 var lastDist = 0;
 
 function getDistance(p1, p2) {
-  return Math.sqrt(Math.pow((p2.x - p1.x), 2) + Math.pow((p2.y - p1.y), 2));
+    return Math.sqrt(Math.pow((p2.x - p1.x), 2) + Math.pow((p2.y - p1.y), 2));
 }
 
 function touchPanZoomHandler(eventInfo, e) {
     if (e.touches.length == 1) {
-        var thispos = touchPos, 
-        currentPos = eventInfo.getPos(),
-        canvas = Mconsole.canvas,
-        ox = canvas.translateOffsetX,
-        oy = canvas.translateOffsetY,
-        sx = canvas.scaleOffsetX,
-        sy = canvas.scaleOffsetY;
+        var thispos = touchPos,
+            currentPos = eventInfo.getPos(),
+            canvas = Mconsole.canvas,
+            ox = canvas.translateOffsetX,
+            oy = canvas.translateOffsetY,
+            sx = canvas.scaleOffsetX,
+            sy = canvas.scaleOffsetY;
         currentPos.x *= sx;
         currentPos.y *= sy;
         currentPos.x += ox;
@@ -548,80 +547,79 @@ function touchPanZoomHandler(eventInfo, e) {
         var x = currentPos.x - thispos.x,
             y = currentPos.y - thispos.y;
         touchPos = currentPos;
-        Mconsole.canvas.translate(x * 1/sx, y * 1/sy);
-    }
-    else if (e.touches.length == 2) {
+        Mconsole.canvas.translate(x * 1 / sx, y * 1 / sy);
+    } else if (e.touches.length == 2) {
         var touch1 = e.touches[0];
         var touch2 = e.touches[1];
 
-          var dist = getDistance({
+        var dist = getDistance({
             x: touch1.clientX,
             y: touch1.clientY
-          }, {
+        }, {
             x: touch2.clientX,
             y: touch2.clientY
-          });
-    
-          if(!lastDist) {
-            lastDist = dist;
-          }
-    
-          var scale = dist / lastDist;
-            
-          console.log(scale);
-          
-            if (8 >= Mconsole.canvas.scaleOffsetX*scale && Mconsole.canvas.scaleOffsetX*scale >= 1) {
-              Mconsole.canvas.scale(scale, scale);
-            }
-            if (Mconsole.canvas.scaleOffsetX < 0.5) {
-                Mconsole.canvas.viz.labels.hideLabels(true);
-            }
-            else if (Mconsole.canvas.scaleOffsetX > 0.5) {
-                Mconsole.canvas.viz.labels.hideLabels(false);
-            }
+        });
+
+        if (!lastDist) {
             lastDist = dist;
+        }
+
+        var scale = dist / lastDist;
+
+        console.log(scale);
+
+        if (8 >= Mconsole.canvas.scaleOffsetX * scale && Mconsole.canvas.scaleOffsetX * scale >= 1) {
+            Mconsole.canvas.scale(scale, scale);
+        }
+        if (Mconsole.canvas.scaleOffsetX < 0.5) {
+            Mconsole.canvas.viz.labels.hideLabels(true);
+        } else if (Mconsole.canvas.scaleOffsetX > 0.5) {
+            Mconsole.canvas.viz.labels.hideLabels(false);
+        }
+        lastDist = dist;
     }
-    
+
 }
 
 function updateSelectedPermissions(permission) {
-  
-  
-  if ( $('.notice.metamaps').length == 0 ) {
-    $('body').prepend('<div class="notice metamaps" />');
-  }
-  $('.notice.metamaps').hide().html('Working...').fadeIn('fast');
-  
-  // variables to keep track of how many nodes and synapses you had the ability to change the permission of
-  var nCount = 0, sCount = 0;
-  
-  // change the permission of the selected synapses, if logged in user is the original creator
-  var l = MetamapsModel.selectedEdges.length;
-  for (var i = l-1; i >= 0; i -= 1) {
-    var edge = MetamapsModel.selectedEdges[i];
-    
-    if (edge.getData('userid') == userid) {
-      updateSynapsePermission(edge,permission);
-      sCount++;
+
+
+    if ($('.notice.metamaps').length == 0) {
+        $('body').prepend('<div class="notice metamaps" />');
     }
-  }
-  
-  // change the permission of the selected topics, if logged in user is the original creator
-  var l = MetamapsModel.selectedNodes.length;
-  for (var i = l-1; i >= 0; i -= 1) {
-    var node = MetamapsModel.selectedNodes[i];
-    
-    if (node.getData('userid') == userid) {
-      updateTopicPermission(node,permission);
-      nCount++;
+    $('.notice.metamaps').hide().html('Working...').fadeIn('fast');
+
+    // variables to keep track of how many nodes and synapses you had the ability to change the permission of
+    var nCount = 0,
+        sCount = 0;
+
+    // change the permission of the selected synapses, if logged in user is the original creator
+    var l = MetamapsModel.selectedEdges.length;
+    for (var i = l - 1; i >= 0; i -= 1) {
+        var edge = MetamapsModel.selectedEdges[i];
+
+        if (edge.getData('userid') == userid) {
+            updateSynapsePermission(edge, permission);
+            sCount++;
+        }
     }
-  }
-  
-  var nString = nCount == 1 ? (nCount.toString() + ' topic and ') : (nCount.toString() + ' topics and ');
-  var sString = sCount == 1 ? (sCount.toString() + ' synapse') : (sCount.toString() + ' synapses');
-  
-  $('.notice.metamaps').html(nString + sString + ' you created updated to ' + permission)
-  setTimeout( function() {
-    $('.notice.metamaps').fadeOut('fast');
-  }, 8000);
-}
+
+    // change the permission of the selected topics, if logged in user is the original creator
+    var l = MetamapsModel.selectedNodes.length;
+    for (var i = l - 1; i >= 0; i -= 1) {
+        var node = MetamapsModel.selectedNodes[i];
+
+        if (node.getData('userid') == userid) {
+            updateTopicPermission(node, permission);
+            nCount++;
+        }
+    }
+
+    var nString = nCount == 1 ? (nCount.toString() + ' topic and ') : (nCount.toString() + ' topics and ');
+    var sString = sCount == 1 ? (sCount.toString() + ' synapse') : (sCount.toString() + ' synapses');
+
+    $('.notice.metamaps').html(nString + sString + ' you created updated to ' + permission)
+    setTimeout(function () {
+        $('.notice.metamaps').fadeOut('fast');
+    }, 8000);
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/Jit/graphsettings-model.js b/app/assets/javascripts/Jit/graphsettings-model.js
index 1939e738..3416be8c 100644
--- a/app/assets/javascripts/Jit/graphsettings-model.js
+++ b/app/assets/javascripts/Jit/graphsettings-model.js
@@ -9,6 +9,18 @@ var MetamapsModel = new Object();
 
 MetamapsModel.embed = false;
 
+
+MetamapsModel.metacodeScrollerInit = false; // indicates whether the scrollbar in the custom metacode set space has been init
+
+MetamapsModel.selectedMetacodeSet = null;
+MetamapsModel.selectedMetacodeSetIndex = null;
+
+MetamapsModel.selectedMetacodeNames = new Array();
+MetamapsModel.newSelectedMetacodeNames = new Array();
+
+MetamapsModel.selectedMetacodes = new Array();
+MetamapsModel.newSelectedMetacodes = new Array();
+
 //array of all selected edges, same for nodes
 MetamapsModel.selectedEdges = new Array();
 MetamapsModel.selectedNodes = new Array();
diff --git a/app/assets/javascripts/Jit/graphsettings.js b/app/assets/javascripts/Jit/graphsettings.js
index 7614f32f..2593586c 100644
--- a/app/assets/javascripts/Jit/graphsettings.js
+++ b/app/assets/javascripts/Jit/graphsettings.js
@@ -6,561 +6,601 @@
  */
 
 function graphSettings(type, embed) {
-   var t = {
-     //id of the visualization container
-     injectInto: 'infovis',
-     //Enable zooming and panning
-     //by scrolling and DnD
-     Navigation: {
-       enable: true,
-       //Enable panning events only if we're dragging the empty
-       //canvas (and not a node).
-       panning: 'avoid nodes',
-       zooming: 28 //zoom speed. higher is more sensible
-    },
-    // Change node and edge styles such as
-    // color and width.
-    // These properties are also set per node
-    // with dollar prefixed data-properties in the
-    // JSON structure.
-    Node: {
-       overridable: true,
-       color: '#2D6A5D',
-       type: 'customNode',
-       dim: 25
-    },
-    Edge: {
-       overridable: true,
-       color: '#222222',
-       type: 'customEdge',
-       lineWidth: 2,
-       alpha: 0.4
-    },
-    //Native canvas text styling
-    Label: {
-       type: 'Native', //Native or HTML
-       size: 20,
-       family: 'arial',
-       textBaseline: 'hanging',
-       color:'#DDD'
-       //style: 'bold'
-    },
-    //Add Tips
-    Tips: {
-       enable: false,
-       onShow: function (tip, node) {}
-    },
-    // Add node events
-    Events: {
-      enable: true,
-      enableForEdges: true,
-      onMouseMove: function(node, eventInfo, e) {
-        onMouseMoveHandler(node, eventInfo, e);
-      },
-      //Update node positions when dragged
-      onDragMove: function (node, eventInfo, e) {
-        onDragMoveTopicHandler(node, eventInfo, e); 
-      },
-      onDragEnd: function(node, eventInfo, e) {
-        onDragEndTopicHandler(node, eventInfo, e, false);
-      },
-      onDragCancel: function(node, eventInfo, e) {
-        onDragCancelHandler(node, eventInfo, e, false);
-      },
-      //Implement the same handler for touchscreens
-      onTouchStart: function (node, eventInfo, e) {
-        //$jit.util.event.stop(e); //stop default touchmove event
-        //Mconsole.events.onMouseDown(e, null, eventInfo);
-        Mconsole.events.touched = true;
-        touchPos = eventInfo.getPos();
-        var canvas = Mconsole.canvas,
-        ox = canvas.translateOffsetX;
-        oy = canvas.translateOffsetY,
-        sx = canvas.scaleOffsetX,
-        sy = canvas.scaleOffsetY;
-        touchPos.x *= sx;
-        touchPos.y *= sy;
-        touchPos.x += ox;
-        touchPos.y += oy;
-          
-        touchDragNode = node;
-      },
-      //Implement the same handler for touchscreens
-      onTouchMove: function (node, eventInfo, e) {
-        if (touchDragNode) onDragMoveTopicHandler(touchDragNode, eventInfo, e);
-        else {
-          touchPanZoomHandler(eventInfo, e); 
-          Mconsole.labels.hideLabel(Mconsole.graph.getNode(MetamapsModel.showcardInUse));
-        }
-      },
-      //Implement the same handler for touchscreens
-      onTouchEnd: function (node, eventInfo, e) {
-        
-      },
-      //Implement the same handler for touchscreens
-      onTouchCancel: function (node, eventInfo, e) {
-        
-      },
-      //Add also a click handler to nodes
-      onClick: function (node, eventInfo, e) {
-        if (MetamapsModel.boxStartCoordinates) {
-          Mconsole.busy = false;
-          MetamapsModel.boxEndCoordinates = eventInfo.getPos();
-          selectNodesWithBox();
-          return;
-        }
-        
-        if (e.target.id != "infovis-canvas") return false;
+    var t = {
+        //id of the visualization container
+        injectInto: 'infovis',
+        //Enable zooming and panning
+        //by scrolling and DnD
+        Navigation: {
+            enable: true,
+            //Enable panning events only if we're dragging the empty
+            //canvas (and not a node).
+            panning: 'avoid nodes',
+            zooming: 28 //zoom speed. higher is more sensible
+        },
+        // Change node and edge styles such as
+        // color and width.
+        // These properties are also set per node
+        // with dollar prefixed data-properties in the
+        // JSON structure.
+        Node: {
+            overridable: true,
+            color: '#2D6A5D',
+            type: 'customNode',
+            dim: 25
+        },
+        Edge: {
+            overridable: true,
+            color: '#222222',
+            type: 'customEdge',
+            lineWidth: 2,
+            alpha: 0.4
+        },
+        //Native canvas text styling
+        Label: {
+            type: 'Native', //Native or HTML
+            size: 20,
+            family: 'arial',
+            textBaseline: 'hanging',
+            color: '#DDD'
+            //style: 'bold'
+        },
+        //Add Tips
+        Tips: {
+            enable: false,
+            onShow: function (tip, node) {}
+        },
+        // Add node events
+        Events: {
+            enable: true,
+            enableForEdges: true,
+            onMouseMove: function (node, eventInfo, e) {
+                onMouseMoveHandler(node, eventInfo, e);
+            },
+            //Update node positions when dragged
+            onDragMove: function (node, eventInfo, e) {
+                onDragMoveTopicHandler(node, eventInfo, e);
+            },
+            onDragEnd: function (node, eventInfo, e) {
+                onDragEndTopicHandler(node, eventInfo, e, false);
+            },
+            onDragCancel: function (node, eventInfo, e) {
+                onDragCancelHandler(node, eventInfo, e, false);
+            },
+            //Implement the same handler for touchscreens
+            onTouchStart: function (node, eventInfo, e) {
+                //$jit.util.event.stop(e); //stop default touchmove event
+                //Mconsole.events.onMouseDown(e, null, eventInfo);
+                Mconsole.events.touched = true;
+                touchPos = eventInfo.getPos();
+                var canvas = Mconsole.canvas,
+                    ox = canvas.translateOffsetX;
+                oy = canvas.translateOffsetY,
+                sx = canvas.scaleOffsetX,
+                sy = canvas.scaleOffsetY;
+                touchPos.x *= sx;
+                touchPos.y *= sy;
+                touchPos.x += ox;
+                touchPos.y += oy;
 
-        //clicking on a edge, node, or clicking on blank part of canvas?
-        if (node.nodeFrom) {
-          selectEdgeOnClickHandler(node, e);  
-        } else if (node && !node.nodeFrom) {
-          selectNodeOnClickHandler(node, e);
-        } else {
-          //topic and synapse editing cards
-          if (!MetamapsModel.didPan) {
-            hideCards();
-          }
-          canvasDoubleClickHandler(eventInfo.getPos(), e);
-        }//if
-      },
-      onRightClick: function (node, eventInfo, e) {
-        e.preventDefault();
-        e.stopPropagation();
-      
-        if (node && !node.nodeFrom) { 
-          selectNodeOnRightClickHandler(node, e);
-        }
-        else if (node && node.nodeFrom) { // the variable 'node' is actually an edge/adjacency
-          // open right click menu
-          selectEdgeOnRightClickHandler(node, e);
-        }
-        else {
-          // right click on open canvas, options here?
-        }
-      }
-    },
-    //Number of iterations for the FD algorithm
-    iterations: 200,
-    //Edge length
-    levelDistance: 200
-  };
+                touchDragNode = node;
+            },
+            //Implement the same handler for touchscreens
+            onTouchMove: function (node, eventInfo, e) {
+                if (touchDragNode) onDragMoveTopicHandler(touchDragNode, eventInfo, e);
+                else {
+                    touchPanZoomHandler(eventInfo, e);
+                    Mconsole.labels.hideLabel(Mconsole.graph.getNode(MetamapsModel.showcardInUse));
+                }
+            },
+            //Implement the same handler for touchscreens
+            onTouchEnd: function (node, eventInfo, e) {
 
-  if (embed) {
-    t.Edge.type = 'customEdgeEmbed';
-  }
-  
-  if (type == "centered") {
-    t.background  = {
-      CanvasStyles: {
-        strokeStyle: '#333',
-        lineWidth: 1.5
-      }
-    };
-    t.levelDistance = 280;
-    t.Events.enableForEdges = true;
-    t.Events.onDragEnd = function(node, eventInfo, e) {
-      //different because we can't go realtime
-      onDragEndTopicHandler(node, eventInfo, e, false);
-    };
-    t.Events.onDragCancel = function(node, eventInfo, e) {
-      //different because we're centred
-      onDragCancelHandler(node, eventInfo, e, true);
-    };
-  }//if
+            },
+            //Implement the same handler for touchscreens
+            onTouchCancel: function (node, eventInfo, e) {
 
-  return t;
-}//graphSettings
+            },
+            //Add also a click handler to nodes
+            onClick: function (node, eventInfo, e) {
+                if (MetamapsModel.boxStartCoordinates) {
+                    Mconsole.busy = false;
+                    MetamapsModel.boxEndCoordinates = eventInfo.getPos();
+                    selectNodesWithBox();
+                    return;
+                }
+
+                if (e.target.id != "infovis-canvas") return false;
+
+                //clicking on a edge, node, or clicking on blank part of canvas?
+                if (node.nodeFrom) {
+                    selectEdgeOnClickHandler(node, e);
+                } else if (node && !node.nodeFrom) {
+                    selectNodeOnClickHandler(node, e);
+                } else {
+                    //topic and synapse editing cards
+                    if (!MetamapsModel.didPan) {
+                        hideCards();
+                    }
+                    canvasDoubleClickHandler(eventInfo.getPos(), e);
+                } //if
+            },
+            onRightClick: function (node, eventInfo, e) {
+                e.preventDefault();
+                e.stopPropagation();
+
+                if (node && !node.nodeFrom) {
+                    selectNodeOnRightClickHandler(node, e);
+                } else if (node && node.nodeFrom) { // the variable 'node' is actually an edge/adjacency
+                    // open right click menu
+                    selectEdgeOnRightClickHandler(node, e);
+                } else {
+                    // right click on open canvas, options here?
+                }
+            }
+        },
+        //Number of iterations for the FD algorithm
+        iterations: 200,
+        //Edge length
+        levelDistance: 200
+    };
+
+    if (embed) {
+        t.Edge.type = 'customEdgeEmbed';
+    }
+
+    if (type == "centered") {
+        t.background = {
+            CanvasStyles: {
+                strokeStyle: '#333',
+                lineWidth: 1.5
+            }
+        };
+        t.levelDistance = 280;
+        t.Events.enableForEdges = true;
+        t.Events.onDragEnd = function (node, eventInfo, e) {
+            //different because we can't go realtime
+            onDragEndTopicHandler(node, eventInfo, e, false);
+        };
+        t.Events.onDragCancel = function (node, eventInfo, e) {
+            //different because we're centred
+            onDragCancelHandler(node, eventInfo, e, true);
+        };
+    } //if
+
+    return t;
+} //graphSettings
 
 function hideCards() {
-  $('#edit_synapse').hide();
-  MetamapsModel.edgecardInUse = null;
-  hideCurrentCard();
-  // delete right click menu
-  $('.rightclickmenu').remove();
+    $('#edit_synapse').hide();
+    MetamapsModel.edgecardInUse = null;
+    hideCurrentCard();
+    // delete right click menu
+    $('.rightclickmenu').remove();
 }
 
 // defining code to draw edges with arrows pointing in one direction
-var renderMidArrow = function(from, to, dim, swap, canvas, placement, newSynapse){ 
-        var ctx = canvas.getCtx(); 
-        // invert edge direction 
-        if (swap) { 
-              var tmp = from; 
-              from = to; 
-              to = tmp; 
-        } 
-        // vect represents a line from tip to tail of the arrow 
-        var vect = new $jit.Complex(to.x - from.x, to.y - from.y); 
-        // scale it 
-        vect.$scale(dim / vect.norm()); 
-        // compute the midpoint of the edge line 
-        var newX = (to.x - from.x) * placement + from.x;
-        var newY = (to.y - from.y) * placement + from.y;
-        var midPoint = new $jit.Complex(newX, newY); 
-        
-        // move midpoint by half the "length" of the arrow so the arrow is centered on the midpoint 
-        var arrowPoint = new $jit.Complex((vect.x / 0.7) + midPoint.x, (vect.y / 0.7) + midPoint.y);
-        // compute the tail intersection point with the edge line 
-        var intermediatePoint = new $jit.Complex(arrowPoint.x - vect.x, arrowPoint.y - vect.y); 
-        // vector perpendicular to vect 
-        var normal = new $jit.Complex(-vect.y / 2, vect.x / 2); 
-        var v1 = intermediatePoint.add(normal); 
-        var v2 = intermediatePoint.$add(normal.$scale(-1)); 
-        
-        if (newSynapse) {
-          ctx.strokeStyle = "#222222";
-          ctx.lineWidth = 2;
-          ctx.globalAlpha = 0.4;
-        }
-        ctx.beginPath(); 
-        ctx.moveTo(from.x, from.y); 
-        ctx.lineTo(to.x, to.y); 
-        ctx.stroke(); 
-        ctx.beginPath(); 
-        ctx.moveTo(v1.x, v1.y); 
-        ctx.lineTo(arrowPoint.x, arrowPoint.y); 
-        ctx.lineTo(v2.x, v2.y); 
-        ctx.stroke(); 
+var renderMidArrow = function (from, to, dim, swap, canvas, placement, newSynapse) {
+    var ctx = canvas.getCtx();
+    // invert edge direction 
+    if (swap) {
+        var tmp = from;
+        from = to;
+        to = tmp;
+    }
+    // vect represents a line from tip to tail of the arrow 
+    var vect = new $jit.Complex(to.x - from.x, to.y - from.y);
+    // scale it 
+    vect.$scale(dim / vect.norm());
+    // compute the midpoint of the edge line 
+    var newX = (to.x - from.x) * placement + from.x;
+    var newY = (to.y - from.y) * placement + from.y;
+    var midPoint = new $jit.Complex(newX, newY);
+
+    // move midpoint by half the "length" of the arrow so the arrow is centered on the midpoint 
+    var arrowPoint = new $jit.Complex((vect.x / 0.7) + midPoint.x, (vect.y / 0.7) + midPoint.y);
+    // compute the tail intersection point with the edge line 
+    var intermediatePoint = new $jit.Complex(arrowPoint.x - vect.x, arrowPoint.y - vect.y);
+    // vector perpendicular to vect 
+    var normal = new $jit.Complex(-vect.y / 2, vect.x / 2);
+    var v1 = intermediatePoint.add(normal);
+    var v2 = intermediatePoint.$add(normal.$scale(-1));
+
+    if (newSynapse) {
+        ctx.strokeStyle = "#222222";
+        ctx.lineWidth = 2;
+        ctx.globalAlpha = 0.4;
+    }
+    ctx.beginPath();
+    ctx.moveTo(from.x, from.y);
+    ctx.lineTo(to.x, to.y);
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.moveTo(v1.x, v1.y);
+    ctx.lineTo(arrowPoint.x, arrowPoint.y);
+    ctx.lineTo(v2.x, v2.y);
+    ctx.stroke();
 };
 
 // defining custom node type	
 var nodeSettings = {
-	  'customNode': {  
-		  'render': function (node, canvas) {		  			  
-			  var pos = node.pos.getc(true),
-			  dim = node.getData('dim'),
-			  cat = node.getData('metacode'),
-			  whiteCircle = node.getData('whiteCircle'),
-			  ctx = canvas.getCtx();
-			  
-			  // if the topic is on the Canvas draw a white circle around it
-			  if (whiteCircle) {
-				  ctx.beginPath();
-				  ctx.arc(pos.x, pos.y, dim+3, 0, 2 * Math.PI, false);
-          if (! MetamapsModel.embed) ctx.strokeStyle = 'white';
-          if (MetamapsModel.embed) ctx.strokeStyle = '#999';
-				  ctx.lineWidth = 2;
-				  ctx.stroke();
-			  }
-			  ctx.drawImage(imgArray[cat], pos.x - dim, pos.y - dim, dim*2, dim*2);
+    'customNode': {
+        'render': function (node, canvas) {
+            var pos = node.pos.getc(true),
+                dim = node.getData('dim'),
+                cat = node.getData('metacode'),
+                whiteCircle = node.getData('whiteCircle'),
+                ctx = canvas.getCtx();
 
-		  },
-		  'contains': function(node, pos) {
-			var npos = node.pos.getc(true), 
-			dim = node.getData('dim');
-			return this.nodeHelper.circle.contains(npos, pos, dim);
-		  }
-	  }
-  }
-  
-  var renderEdgeArrows = function(edgeHelper, adj) {
-    var canvas = Mconsole.canvas;
-    var directionCat = adj.getData('category');
-    var direction = adj.getData('direction');
-    var pos = adj.nodeFrom.pos.getc(true); 
-    var posChild = adj.nodeTo.pos.getc(true);
+            // if the topic is on the Canvas draw a white circle around it
+            if (whiteCircle) {
+                ctx.beginPath();
+                ctx.arc(pos.x, pos.y, dim + 3, 0, 2 * Math.PI, false);
+                if (!MetamapsModel.embed) ctx.strokeStyle = 'white';
+                if (MetamapsModel.embed) ctx.strokeStyle = '#999';
+                ctx.lineWidth = 2;
+                ctx.stroke();
+            }
+            ctx.drawImage(imgArray[cat], pos.x - dim, pos.y - dim, dim * 2, dim * 2);
 
-    //plot arrow edge 
-    if (directionCat == "none") {
-      edgeHelper.line.render({ x: pos.x, y: pos.y }, { x: posChild.x, y: posChild.y }, canvas);
+        },
+        'contains': function (node, pos) {
+            var npos = node.pos.getc(true),
+                dim = node.getData('dim');
+            return this.nodeHelper.circle.contains(npos, pos, dim);
+        }
     }
-    else if (directionCat == "both") {
-      renderMidArrow({ x: pos.x, y: pos.y }, { x: posChild.x, y: posChild.y }, 13, true, canvas, 0.7);
-      renderMidArrow({ x: pos.x, y: pos.y }, { x: posChild.x, y: posChild.y }, 13, false, canvas, 0.7);
-    }
-    else if (directionCat == "from-to") {
-      var direction = adj.data.$direction;
-      var inv = (direction && direction.length > 1 && direction[0] != adj.nodeFrom.id);
-      renderMidArrow({ x: pos.x, y: pos.y }, { x: posChild.x, y: posChild.y }, 13, inv, canvas, 0.7);
-      renderMidArrow({ x: pos.x, y: pos.y }, { x: posChild.x, y: posChild.y }, 13, inv, canvas, 0.3);
-    }
-  }//renderEdgeArrow
+}
+
+var renderEdgeArrows = function (edgeHelper, adj) {
+        var canvas = Mconsole.canvas;
+        var directionCat = adj.getData('category');
+        var direction = adj.getData('direction');
+        var pos = adj.nodeFrom.pos.getc(true);
+        var posChild = adj.nodeTo.pos.getc(true);
+
+        //plot arrow edge 
+        if (directionCat == "none") {
+            edgeHelper.line.render({
+                x: pos.x,
+                y: pos.y
+            }, {
+                x: posChild.x,
+                y: posChild.y
+            }, canvas);
+        } else if (directionCat == "both") {
+            renderMidArrow({
+                x: pos.x,
+                y: pos.y
+            }, {
+                x: posChild.x,
+                y: posChild.y
+            }, 13, true, canvas, 0.7);
+            renderMidArrow({
+                x: pos.x,
+                y: pos.y
+            }, {
+                x: posChild.x,
+                y: posChild.y
+            }, 13, false, canvas, 0.7);
+        } else if (directionCat == "from-to") {
+            var direction = adj.data.$direction;
+            var inv = (direction && direction.length > 1 && direction[0] != adj.nodeFrom.id);
+            renderMidArrow({
+                x: pos.x,
+                y: pos.y
+            }, {
+                x: posChild.x,
+                y: posChild.y
+            }, 13, inv, canvas, 0.7);
+            renderMidArrow({
+                x: pos.x,
+                y: pos.y
+            }, {
+                x: posChild.x,
+                y: posChild.y
+            }, 13, inv, canvas, 0.3);
+        }
+    } //renderEdgeArrow
 
 // defining custom edges
- var edgeSettings = {  
-	  'customEdge': {  
-		'render': function(adj, canvas) {  
-		  //get nodes cartesian coordinates 
-		  var pos = adj.nodeFrom.pos.getc(true); 
-		  var posChild = adj.nodeTo.pos.getc(true);
-		  
-		  var directionCat = adj.getData("category");
-		  //label placement on edges 
-          renderEdgeArrows(this.edgeHelper, adj);
-		   
-		  //check for edge label in data  
-		  var desc = adj.getData("desc");
-		  var showDesc = adj.getData("showDesc");
-		  if( desc != "" && showDesc ) { 
-            // '&amp;' to '&'
-            desc = decodeEntities(desc);
+var edgeSettings = {
+    'customEdge': {
+        'render': function (adj, canvas) {
+            //get nodes cartesian coordinates 
+            var pos = adj.nodeFrom.pos.getc(true);
+            var posChild = adj.nodeTo.pos.getc(true);
 
-            //now adjust the label placement 
-            var ctx = canvas.getCtx();
-            ctx.font = 'bold 14px arial';
-            ctx.fillStyle = '#FFF';
-            ctx.textBaseline = 'hanging';
-            
-            // helper function to determine how many lines are needed
-            // Line Splitter Function
-            // copyright Stephen Chapman, 19th April 2006
-            // you may copy this code but please keep the copyright notice as well
-            function splitLine(st,n) {var b = ''; var s = st;while (s.length > n) {var c = s.substring(0,n);var d = c.lastIndexOf(' ');var e =c.lastIndexOf('\n');if (e != -1) d = e; if (d == -1) d = n; b +=       c.substring(0,d) + '\n';s = s.substring(d+1);}return b+s;}
-            var arrayOfLabelLines = splitLine(desc,30).split('\n');
-            var index, lineWidths = [];
-            for (index = 0; index < arrayOfLabelLines.length; ++index) {
-              lineWidths.push( ctx.measureText( arrayOfLabelLines[index] ).width )
+            var directionCat = adj.getData("category");
+            //label placement on edges 
+            renderEdgeArrows(this.edgeHelper, adj);
+
+            //check for edge label in data  
+            var desc = adj.getData("desc");
+            var showDesc = adj.getData("showDesc");
+            if (desc != "" && showDesc) {
+                // '&amp;' to '&'
+                desc = decodeEntities(desc);
+
+                //now adjust the label placement 
+                var ctx = canvas.getCtx();
+                ctx.font = 'bold 14px arial';
+                ctx.fillStyle = '#FFF';
+                ctx.textBaseline = 'hanging';
+
+                // helper function to determine how many lines are needed
+                // Line Splitter Function
+                // copyright Stephen Chapman, 19th April 2006
+                // you may copy this code but please keep the copyright notice as well
+                function splitLine(st, n) {
+                    var b = '';
+                    var s = st;
+                    while (s.length > n) {
+                        var c = s.substring(0, n);
+                        var d = c.lastIndexOf(' ');
+                        var e = c.lastIndexOf('\n');
+                        if (e != -1) d = e;
+                        if (d == -1) d = n;
+                        b += c.substring(0, d) + '\n';
+                        s = s.substring(d + 1);
+                    }
+                    return b + s;
+                }
+                var arrayOfLabelLines = splitLine(desc, 30).split('\n');
+                var index, lineWidths = [];
+                for (index = 0; index < arrayOfLabelLines.length; ++index) {
+                    lineWidths.push(ctx.measureText(arrayOfLabelLines[index]).width)
+                }
+                var width = Math.max.apply(null, lineWidths) + 8;
+                var height = (16 * arrayOfLabelLines.length) + 8;
+
+                var x = (pos.x + posChild.x - width) / 2;
+                var y = ((pos.y + posChild.y) / 2) - height / 2;
+                var radius = 5;
+
+                //render background
+                ctx.beginPath();
+                ctx.moveTo(x + radius, y);
+                ctx.lineTo(x + width - radius, y);
+                ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
+                ctx.lineTo(x + width, y + height - radius);
+                ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
+                ctx.lineTo(x + radius, y + height);
+                ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
+                ctx.lineTo(x, y + radius);
+                ctx.quadraticCurveTo(x, y, x + radius, y);
+                ctx.closePath();
+                ctx.fill();
+
+                //render text
+                ctx.fillStyle = '#222222';
+                ctx.textAlign = 'center';
+                for (index = 0; index < arrayOfLabelLines.length; ++index) {
+                    ctx.fillText(arrayOfLabelLines[index], x + (width / 2), y + 5 + (16 * index));
+                }
             }
-            var width = Math.max.apply(null, lineWidths) + 8;
-            var height = (16 * arrayOfLabelLines.length) + 8;
-            
-			      var x = (pos.x + posChild.x - width)/2;
-            var y = ((pos.y + posChild.y) /2) - height/2;
-            var radius = 5; 
+        },
+        'contains': function (adj, pos) {
+            var from = adj.nodeFrom.pos.getc(true),
+                to = adj.nodeTo.pos.getc(true);
+            return this.edgeHelper.line.contains(from, to, pos, adj.Edge.epsilon);
+        }
+    }
+}
 
-            //render background
-            ctx.beginPath();
-            ctx.moveTo(x + radius, y);
-            ctx.lineTo(x + width - radius, y);
-            ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
-            ctx.lineTo(x + width, y + height - radius);
-            ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
-            ctx.lineTo(x + radius, y + height);
-            ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
-            ctx.lineTo(x, y + radius);
-            ctx.quadraticCurveTo(x, y, x + radius, y);
-            ctx.closePath();
-            ctx.fill();
-            
-            //render text
-            ctx.fillStyle = '#222222';
-            ctx.textAlign = 'center';
-            for (index = 0; index < arrayOfLabelLines.length; ++index) {
-              ctx.fillText(arrayOfLabelLines[index], x + (width/2), y + 5 + (16*index));
+var edgeSettingsEmbed = {
+    'customEdgeEmbed': {
+        'render': function (adj, canvas) {
+            //get nodes cartesian coordinates 
+            var pos = adj.nodeFrom.pos.getc(true);
+            var posChild = adj.nodeTo.pos.getc(true);
+
+            var directionCat = adj.getData("category");
+            //label placement on edges 
+            renderEdgeArrows(this.edgeHelper, adj);
+
+            //check for edge label in data  
+            var desc = adj.getData("desc");
+            var showDesc = adj.getData("showDesc");
+            if (desc != "" && showDesc) {
+                // '&amp;' to '&'
+                desc = decodeEntities(desc);
+
+                //now adjust the label placement 
+                var ctx = canvas.getCtx();
+                var radius = canvas.getSize();
+                var x = parseInt((pos.x + posChild.x - (desc.length * 5)) / 2);
+                var y = parseInt((pos.y + posChild.y) / 2);
+                ctx.font = 'bold 14px arial';
+
+                //render background
+                ctx.fillStyle = '#999';
+                var margin = 5;
+                var height = 14 + margin; //font size + margin
+                var CURVE = height / 2; //offset for curvy corners
+                var width = ctx.measureText(desc).width + 2 * margin - 2 * CURVE
+                var labelX = x - margin + CURVE;
+                var labelY = y - height + margin;
+                ctx.fillRect(labelX, labelY, width, height);
+
+                //curvy corners woo - circles in place of last CURVE pixels of rect
+                ctx.beginPath();
+                ctx.arc(labelX, labelY + CURVE, CURVE, 0, 2 * Math.PI, false);
+                ctx.arc(labelX + width, labelY + CURVE, CURVE, 0, 2 * Math.PI, false);
+                ctx.fill();
+
+                //render text
+                ctx.fillStyle = '#000';
+                ctx.fillText(desc, x, y);
             }
-		  }
-		}, 'contains' : function(adj, pos) { 
-				var from = adj.nodeFrom.pos.getc(true), 
-				 to = adj.nodeTo.pos.getc(true);
-				return this.edgeHelper.line.contains(from, to, pos, adj.Edge.epsilon); 
-		}  
-	  }  
-	}
-  
-  var edgeSettingsEmbed = {  
-	  'customEdgeEmbed': {  
-		'render': function(adj, canvas) {  
-		  //get nodes cartesian coordinates 
-		  var pos = adj.nodeFrom.pos.getc(true); 
-		  var posChild = adj.nodeTo.pos.getc(true);
-		  
-		  var directionCat = adj.getData("category");
-		  //label placement on edges 
-          renderEdgeArrows(this.edgeHelper, adj);
-		   
-		  //check for edge label in data  
-		  var desc = adj.getData("desc");
-		  var showDesc = adj.getData("showDesc");
-		  if( desc != "" && showDesc ) { 
-            // '&amp;' to '&'
-            desc = decodeEntities(desc);
-
-            //now adjust the label placement 
-            var ctx = canvas.getCtx();
-			var radius = canvas.getSize(); 
-			var x = parseInt((pos.x + posChild.x - (desc.length * 5)) /2); 
-			var y = parseInt((pos.y + posChild.y) /2); 
-			ctx.font = 'bold 14px arial';
-
-            //render background
-            ctx.fillStyle = '#999';
-            var margin = 5;
-            var height = 14 + margin; //font size + margin
-            var CURVE = height / 2; //offset for curvy corners
-            var width = ctx.measureText(desc).width + 2 * margin - 2 * CURVE
-            var labelX = x - margin + CURVE;
-            var labelY = y - height + margin;
-            ctx.fillRect(labelX, labelY, width, height);
-
-            //curvy corners woo - circles in place of last CURVE pixels of rect
-            ctx.beginPath();
-            ctx.arc(labelX, labelY + CURVE, CURVE, 0, 2 * Math.PI, false);
-            ctx.arc(labelX + width, labelY + CURVE, CURVE, 0, 2 * Math.PI, false);
-            ctx.fill();
-            
-            //render text
-			ctx.fillStyle = '#000';
-			ctx.fillText(desc, x, y); 
-		  }
-		}, 'contains' : function(adj, pos) { 
-				var from = adj.nodeFrom.pos.getc(true), 
-				 to = adj.nodeTo.pos.getc(true);
-				return this.edgeHelper.line.contains(from, to, pos, adj.Edge.epsilon); 
-		}  
-	  }  
-	}
+        },
+        'contains': function (adj, pos) {
+            var from = adj.nodeFrom.pos.getc(true),
+                to = adj.nodeTo.pos.getc(true);
+            return this.edgeHelper.line.contains(from, to, pos, adj.Edge.epsilon);
+        }
+    }
+}
 
 function drawSelectBox(eventInfo, e) {
-  Mconsole.plot();
-  var ctx=Mconsole.canvas.getCtx();
-  
-  var startX = MetamapsModel.boxStartCoordinates.x,
-      startY = MetamapsModel.boxStartCoordinates.y,
-      currX = eventInfo.getPos().x,
-      currY = eventInfo.getPos().y;
-  
-  Mconsole.plot();
-  ctx.beginPath();
-  ctx.moveTo(startX, startY);
-  ctx.lineTo(startX, currY);
-  ctx.lineTo(currX, currY);
-  ctx.lineTo(currX, startY);
-  ctx.lineTo(startX, startY);
-  ctx.strokeStyle = "black";
-  ctx.stroke();
+    Mconsole.plot();
+    var ctx = Mconsole.canvas.getCtx();
+
+    var startX = MetamapsModel.boxStartCoordinates.x,
+        startY = MetamapsModel.boxStartCoordinates.y,
+        currX = eventInfo.getPos().x,
+        currY = eventInfo.getPos().y;
+
+    Mconsole.plot();
+    ctx.beginPath();
+    ctx.moveTo(startX, startY);
+    ctx.lineTo(startX, currY);
+    ctx.lineTo(currX, currY);
+    ctx.lineTo(currX, startY);
+    ctx.lineTo(startX, startY);
+    ctx.strokeStyle = "black";
+    ctx.stroke();
 }
 
 function selectNodesWithBox() {
-  
-  var sX = MetamapsModel.boxStartCoordinates.x,
-      sY = MetamapsModel.boxStartCoordinates.y,
-      eX = MetamapsModel.boxEndCoordinates.x,
-      eY = MetamapsModel.boxEndCoordinates.y;
-  
-  
-  Mconsole.graph.eachNode(function (n) {
-		var x = gType == "centered" ? n.pos.toComplex().x : n.pos.x, 
-        y = gType == "centered" ? n.pos.toComplex().y : n.pos.y;
-    
-    if ((sX < x && x < eX && sY < y && y < eY) || (sX > x && x > eX && sY > y && y > eY) || (sX > x && x > eX && sY < y && y < eY) || (sX < x && x < eX && sY > y && y > eY)) {
-      var nodeIsSelected = MetamapsModel.selectedNodes.indexOf(n);
-      if (nodeIsSelected == -1) selectNode(n); // the node is not selected, so select it
-      else if (nodeIsSelected != -1) deselectNode(n); // the node is selected, so deselect it
-      
-    }
-  });
 
-  MetamapsModel.boxStartCoordinates = false;
-  MetamapsModel.boxEndCoordinates = false;
-  Mconsole.plot();
+    var sX = MetamapsModel.boxStartCoordinates.x,
+        sY = MetamapsModel.boxStartCoordinates.y,
+        eX = MetamapsModel.boxEndCoordinates.x,
+        eY = MetamapsModel.boxEndCoordinates.y;
+
+
+    Mconsole.graph.eachNode(function (n) {
+        var x = gType == "centered" ? n.pos.toComplex().x : n.pos.x,
+            y = gType == "centered" ? n.pos.toComplex().y : n.pos.y;
+
+        if ((sX < x && x < eX && sY < y && y < eY) || (sX > x && x > eX && sY > y && y > eY) || (sX > x && x > eX && sY < y && y < eY) || (sX < x && x < eX && sY > y && y > eY)) {
+            var nodeIsSelected = MetamapsModel.selectedNodes.indexOf(n);
+            if (nodeIsSelected == -1) selectNode(n); // the node is not selected, so select it
+            else if (nodeIsSelected != -1) deselectNode(n); // the node is selected, so deselect it
+
+        }
+    });
+
+    MetamapsModel.boxStartCoordinates = false;
+    MetamapsModel.boxEndCoordinates = false;
+    Mconsole.plot();
 }
 
 function onMouseMoveHandler(node, eventInfo, e) {
-  
-  if (Mconsole.busy) return;
 
-  var node = eventInfo.getNode();
-  var edge = eventInfo.getEdge();
-  
-  //if we're on top of a node object, act like there aren't edges under it
-  if (node != false) {
-    if (MetamapsModel.edgeHoveringOver) {
-      onMouseLeave(MetamapsModel.edgeHoveringOver);
+    if (Mconsole.busy) return;
+
+    var node = eventInfo.getNode();
+    var edge = eventInfo.getEdge();
+
+    //if we're on top of a node object, act like there aren't edges under it
+    if (node != false) {
+        if (MetamapsModel.edgeHoveringOver) {
+            onMouseLeave(MetamapsModel.edgeHoveringOver);
+        }
+        $('canvas').css('cursor', 'pointer');
+        return;
     }
-    $('canvas').css('cursor', 'pointer');
-    return;
-  }
-  
-  if (edge == false && MetamapsModel.edgeHoveringOver != false) {
-    //mouse not on an edge, but we were on an edge previously
-    onMouseLeave(MetamapsModel.edgeHoveringOver);
-  } else if (edge != false && MetamapsModel.edgeHoveringOver == false) {
-    //mouse is on an edge, but there isn't a stored edge
-    onMouseEnter(edge);
-  } else if (edge != false && MetamapsModel.edgeHoveringOver != edge) {
-    //mouse is on an edge, but a different edge is stored
-    onMouseLeave(MetamapsModel.edgeHoveringOver)
-    onMouseEnter(edge);
-  }
 
-  //could be false
-  MetamapsModel.edgeHoveringOver = edge;
-  
-  if (!node && !edge) {
-    $('canvas').css('cursor', 'default');
-  }
+    if (edge == false && MetamapsModel.edgeHoveringOver != false) {
+        //mouse not on an edge, but we were on an edge previously
+        onMouseLeave(MetamapsModel.edgeHoveringOver);
+    } else if (edge != false && MetamapsModel.edgeHoveringOver == false) {
+        //mouse is on an edge, but there isn't a stored edge
+        onMouseEnter(edge);
+    } else if (edge != false && MetamapsModel.edgeHoveringOver != edge) {
+        //mouse is on an edge, but a different edge is stored
+        onMouseLeave(MetamapsModel.edgeHoveringOver)
+        onMouseEnter(edge);
+    }
+
+    //could be false
+    MetamapsModel.edgeHoveringOver = edge;
+
+    if (!node && !edge) {
+        $('canvas').css('cursor', 'default');
+    }
 }
 
 function onMouseEnter(edge) {
-  $('canvas').css('cursor', 'pointer');
-  var edgeIsSelected = MetamapsModel.selectedEdges.indexOf(edge);
-  //following if statement only executes if the edge being hovered over is not selected
-  if (edgeIsSelected == -1) {
-    edge.setData('showDesc', true, 'current');
-    edge.setDataset('end', {
-        lineWidth: 4,
-        alpha: 1
-    });
-    Mconsole.fx.animate({
-      modes: ['edge-property:lineWidth:color:alpha'],
-      duration: 100
-    });
-    Mconsole.plot();
-  }
+    $('canvas').css('cursor', 'pointer');
+    var edgeIsSelected = MetamapsModel.selectedEdges.indexOf(edge);
+    //following if statement only executes if the edge being hovered over is not selected
+    if (edgeIsSelected == -1) {
+        edge.setData('showDesc', true, 'current');
+        edge.setDataset('end', {
+            lineWidth: 4,
+            alpha: 1
+        });
+        Mconsole.fx.animate({
+            modes: ['edge-property:lineWidth:color:alpha'],
+            duration: 100
+        });
+        Mconsole.plot();
+    }
 }
 
 function onMouseLeave(edge) {
-  $('canvas').css('cursor', 'default');
-  var edgeIsSelected = MetamapsModel.selectedEdges.indexOf(edge);
-  //following if statement only executes if the edge being hovered over is not selected
-  if (edgeIsSelected == -1) {
-    edge.setData('showDesc', false, 'current');
-    edge.setDataset('end', {
-      lineWidth: 2,
-      alpha: 0.4
-    });
-    Mconsole.fx.animate({
-      modes: ['edge-property:lineWidth:color:alpha'],
-      duration: 100
-    });
-  }
-  Mconsole.plot();
+    $('canvas').css('cursor', 'default');
+    var edgeIsSelected = MetamapsModel.selectedEdges.indexOf(edge);
+    //following if statement only executes if the edge being hovered over is not selected
+    if (edgeIsSelected == -1) {
+        edge.setData('showDesc', false, 'current');
+        edge.setDataset('end', {
+            lineWidth: 2,
+            alpha: 0.4
+        });
+        Mconsole.fx.animate({
+            modes: ['edge-property:lineWidth:color:alpha'],
+            duration: 100
+        });
+    }
+    Mconsole.plot();
 }
- 
-// this is for hiding one topic from your canvas
+
 function onDragEndTopicHandler(node, eventInfo, e, allowRealtime) {
-  if (tempInit && tempNode2 == null) {
-    $('#topic_addSynapse').val("true");
-    $('#new_topic').fadeIn('fast');
-    $('#topic_name').focus();
-  } else if (tempInit && tempNode2 != null) {
-    $('#topic_addSynapse').val("false");
-    $('#synapse_topic1id').val(tempNode.id);
-    $('#synapse_topic2id').val(tempNode2.id);
-    $('#new_synapse').fadeIn('fast');
-    $('#synapse_desc').typeahead('setQuery','').focus();
+    if (tempInit && tempNode2 == null) {
+        $('#topic_addSynapse').val("true");
+        $('#new_topic').fadeIn('fast');
+        $('#topic_name').focus();
+    } else if (tempInit && tempNode2 != null) {
+        $('#topic_addSynapse').val("false");
+        $('#synapse_topic1id').val(tempNode.id);
+        $('#synapse_topic2id').val(tempNode2.id);
+        $('#new_synapse').fadeIn('fast');
+        $('#synapse_desc').typeahead('setQuery', '').focus();
+        tempNode = null;
+        tempNode2 = null;
+        tempInit = false;
+    } else if (dragged && dragged != 0 && goRealtime) {
+        saveLayout(dragged);
+        for (var i = 0; i < MetamapsModel.selectedNodes.length; i++) {
+            saveLayout(MetamapsModel.selectedNodes[i].id);
+        }
+    }
+} //onDragEndTopicHandler
+
+function onDragCancelHandler(node, eventInfo, e, centred) {
     tempNode = null;
     tempNode2 = null;
     tempInit = false;
-  } else if (dragged && dragged != 0 && goRealtime) {
-      saveLayout(dragged);
-	  for (var i = 0; i < MetamapsModel.selectedNodes.length; i++) {
-	    saveLayout(MetamapsModel.selectedNodes[i].id);
-	  }
-  }
-}//onDragEndTopicHandler
 
-function onDragCancelHandler(node, eventInfo, e, centred) {
-  tempNode = null;
-  tempNode2 = null;
-  tempInit = false;
-
-  //not sure why this doesn't happen for centred graphs
-  if (!centred) {
-    $('#topic_addSynapse').val("false");
-    $('#topic_topic1id').val(0);
-    $('#topic_topic2id').val(0);
-  }
-  Mconsole.plot();
+    //not sure why this doesn't happen for centred graphs
+    if (!centred) {
+        $('#topic_addSynapse').val("false");
+        $('#topic_topic1id').val(0);
+        $('#topic_topic2id').val(0);
+    }
+    Mconsole.plot();
 }
 
 // thanks to http://stackoverflow.com/questions/4338963/
 // convert-html-character-entities-back-to-regular-text-using-javascript
 function decodeEntities(desc) {
-  var str, temp = document.createElement('p');
-  temp.innerHTML = desc; //browser handles the entities
-  str = temp.textContent || temp.innerText;
-  temp = null; //delete the element;
-  return str;
-}//decodeEntities
\ No newline at end of file
+    var str, temp = document.createElement('p');
+    temp.innerHTML = desc; //browser handles the entities
+    str = temp.textContent || temp.innerText;
+    temp = null; //delete the element;
+    return str;
+} //decodeEntities
\ No newline at end of file
diff --git a/app/assets/javascripts/Jit/onCreateLabelHandler.js b/app/assets/javascripts/Jit/onCreateLabelHandler.js
deleted file mode 100644
index 25c5a2d6..00000000
--- a/app/assets/javascripts/Jit/onCreateLabelHandler.js
+++ /dev/null
@@ -1,302 +0,0 @@
-/*
- * @file
- * There is a lot of code that goes into creating the "label" of a node
- * This includes editable cards with all node details, and some controls
- * onCreateLabelHandler is the main function of this file, and the file
- * also contains a bunch of helper functions
- *
- * html and littleHTML are potentially confusing variables
- * html is the contents of the card shown when you click on a node's label.
- * littleHTML creates little controls for removing/hiding nodes from the canvas
- *
- * This function features PHP-style variable substitution because the strings 
- * are so damn long. Values are identified by $_id_$, and then a regular
- * expression is substituted in later (for html, in a separate function).
- */
-
-function generateShowcardHTML() {
-  return '                                                                    \
-  <div class="CardOnGraph"                                                    \
-         id="topic_$_id_$">                                                   \
-        <span class="title">                                                  \
-          <span class="best_in_place best_in_place_name"                      \
-                data-url="/topics/$_id_$"                                     \
-                data-object="topic"                                           \
-                data-attribute="name"                                         \
-                data-type="input">$_name_$</span>                             \
-        </span>                                                               \
-        <div class="links">                                                   \
-           <div                                                               \
-           class="linkItem icon">                                             \
-              <div class="metacodeTitle">$_metacode_$</div>                   \
-              <div class="metacodeImage"                                      \
-                   style="background-image:url($_imgsrc_$);"                  \
-                   title="click and drag to move card"></div>                 \
-           </div>                                                             \
-           <div class="linkItem contributor hoverForTip"> \
-             <div class="tip">Created by $_username_$ on $_date_$</div>   \
-           </div>                           \
-           <a href="/maps/topics/$_id_$" class="linkItem mapCount hoverForTip" \
-              title="Click to see which maps topic appears on" target="_blank">                  \
-             $_map_count_$                                                    \
-           </a>                                                             \
-           <div class="linkItem synapseCount">$_synapse_count_$</div>         \
-           <div class="linkItem mapPerm $_mk_permission_$"></div>             \
-           <a href="/topics/$_id_$" class="linkItem topicPopout" title="Open topic in new tab" target="_blank"></a>\
-           <div class="clearfloat"></div>                                     \
-        </div>                                                                \
-      <div class="metacodeSelect">$_metacode_select_$</div>                   \
-      <div class="scroll">                                                    \
-        <div class="desc">                                                    \
-          <span class="best_in_place best_in_place_desc"                      \
-                data-url="/topics/$_id_$"                                     \
-                data-object="topic"                                           \
-                data-nil="$_desc_nil_$"                                       \
-                data-attribute="desc"                                         \
-                data-type="textarea">$_desc_$</span>                          \
-                <div class="clearfloat"></div>                                \
-        </div>                                                                \
-      </div>                                                                  \
-      <div class="link">                                                      \
-      $_a_tag_$<span class="best_in_place best_in_place_link"                 \
-            data-url="/topics/$_id_$"                                         \
-            data-object="topic"                                               \
-            data-nil="$_link_nil_$"                                            \
-            data-attribute="link"                                             \
-            data-type="input">$_link_$</span>$_close_a_tag_$                  \
-      $_go_link_$                                                             \
-      </div>                                                                  \
-      <div class="clearfloat"></div>                                          \
-    </div>';
-}//generateShowcardHTML
-
-function replaceVariables(html, node) {
-  //link is rendered differently if user is logged out or in
-  var go_link, a_tag, close_a_tag;
-  if (! authorizeToEdit(node)) {
-    go_link = '';
-    if (node.getData("link") != "") {
-      a_tag = '<a href="' + node.getData("link") + '" target="_blank">';
-      close_a_tag = '</a>';
-    }
-    else {
-      a_tag = '';
-      close_a_tag = '';
-    }
-  } else {
-    go_link = '<a href="' + node.getData("link") + '" ' +
-              '   class="go-link" target="_blank"></a>';
-    a_tag = '';
-    close_a_tag = '';
-  }
-
-  var desc_nil = "<span class='gray'>Click to add description...</span>";
-  var link_nil = "<span class='gray'>Click to add link...</span>";
-  
-  var edit_perm = '';
-  if (userid == node.getData("userid")) {
-      edit_perm = '                                                  \
-        <div class="permActivator">                                  \
-          <div class="editSettings">                                 \
-            <span>Permissions:&nbsp;</span>                          \
-            <span title="Click to Edit">                             \
-              <span class="best_in_place best_in_place_permission"   \
-                    id="best_in_place_topic_$_id_$_permission"       \
-                    data-url="/topics/$_id_$"                        \
-                    data-object="topic"                              \
-                    data-collection=$_permission_choices_$           \
-                    data-attribute="permission"                      \
-                    data-type="select"                               \
-                    data-value="$_permission_$">                     \
-                $_permission_$                                       \
-              </span>                                                \
-            </span>                                                  \
-            <div class="clearfloat"></div>                           \
-          </div>                                                     \
-        </div>';
-  }
-  var permissions = ['commons','public','private'];
-  var permission_choices = "'[";
-  for (var i in permissions) {
-    permission_choices += '["' + permissions[i] + '","' + permissions[i] + '"],';
-  }
-  //remove trailing comma and add ]
-  permission_choices = permission_choices.slice(0, -1);
-  permission_choices += "]'";
-  edit_perm = edit_perm.replace(/\$_permission_choices_\$/g, permission_choices);
-  
-  html = html.replace(/\$_edit_permission_\$/g, edit_perm);
-  html = html.replace(/\$_permission_\$/g, node.getData("permission"));
-  html = html.replace(/\$_mk_permission_\$/g, mk_permission(node));
-  html = html.replace(/\$_map_count_\$/g, node.getData("inmaps").length);
-  html = html.replace(/\$_synapse_count_\$/g, node.getData("synapseCount"));
-  html = html.replace(/\$_id_\$/g, node.id);
-  html = html.replace(/\$_metacode_\$/g, node.getData("metacode"));
-  html = html.replace(/\$_imgsrc_\$/g, imgArray[node.getData("metacode")].src);
-  html = html.replace(/\$_name_\$/g, node.name);
-  html = html.replace(/\$_userid_\$/g, node.getData("userid"));
-  html = html.replace(/\$_username_\$/g, node.getData("username"));
-  html = html.replace(/\$_date_\$/g, node.getData("date"));
-  html = html.replace(/\$_metacode_select_\$/g, $('#metacodeOptions').html());
-  html = html.replace(/\$_go_link_\$/g, go_link);
-  html = html.replace(/\$_a_tag_\$/g, a_tag);
-  html = html.replace(/\$_close_a_tag_\$/g, close_a_tag);
-
-  html = html.replace(/\$_link_nil_\$/g, link_nil);
-  if (node.getData("link") == "" && authorizeToEdit(node)) {
-    html = html.replace(/\$_link_\$/g, link_nil);
-  } else {
-    html = html.replace(/\$_link_\$/g, node.getData("link"));
-  }
-  
-  html = html.replace(/\$_desc_nil_\$/g, desc_nil);
-  if (node.getData("desc") == "" && authorizeToEdit(node)) {
-    //logged in but desc isn't there so it's invisible
-    html = html.replace(/\$_desc_\$/g, desc_nil);
-  } else {
-    //html = html.replace(/\$_desc_\$/g, node.getData("desc").replace(/\n/g, '<br />'));
-    html = html.replace(/\$_desc_\$/g, node.getData("desc"));
-  }
-  return html;
-}
-
-function hideCurrentCard() {
-  if (MetamapsModel.showcardInUse) {
-    var node = Mconsole.graph.getNode(MetamapsModel.showcardInUse);
-    hideCard(node);
-  }
-}
-
-function hideCard(node) {
-  var card = '.showcard';
-
-  $(card).fadeOut('fast', function(){
-    //node.setData('dim', 25, 'current');
-    Mconsole.plot();
-  });
-
-  MetamapsModel.showcardInUse = null;
-}
-
-function populateShowCard(node) {
-  var showCard = document.getElementById('showcard');
-
-    $(showCard).find('.permission').remove();
-      
-    var html = generateShowcardHTML();
-    html = replaceVariables(html, node);
-      
-    if (authorizeToEdit(node)) {
-      var perm = document.createElement('div');
-      
-      var string = 'permission canEdit';
-      if (userid == node.data.$userid) string += ' yourTopic';
-      perm.className = string;
-      perm.innerHTML = html;
-      showCard.appendChild(perm);
-    } else {
-      var perm = document.createElement('div');
-      perm.className = 'permission cannotEdit';
-      perm.innerHTML = html;
-      showCard.appendChild(perm);
-    }
-
-  var selectingMetacode = false;
-  // attach the listener that shows the metacode title when you hover over the image
-  $('.showcard .metacodeImage').mouseenter(function(){
-    $('.showcard .icon').css('z-index','4');
-    $('.showcard .metacodeTitle').show();
-  });
-  $('.showcard .linkItem.icon').mouseleave(function() {
-    if ( !selectingMetacode ) {
-      $('.showcard .metacodeTitle').hide();
-      $('.showcard .icon').css('z-index','1');
-    }
-  });
-  
-  $('.showcard .metacodeTitle').click(function() {
-    if (!selectingMetacode) {  
-      selectingMetacode = true;
-      $(this).addClass('minimize'); // this line flips the drop down arrow to a pull up arrow
-      $('.metacodeSelect').show();
-      // add the scroll bar to the list of metacode select options if it isn't already there
-      if ( !$('.metacodeSelect ul').hasClass('mCustomScrollbar') ) {
-        $('.metacodeSelect ul').mCustomScrollbar();
-        
-        $('.metacodeSelect li').click(function() {
-          selectingMetacode = false;
-          var metacodeName = $(this).find('.mSelectName').text();
-          updateMetacode(node, metacodeName);
-        });
-      }
-    } else {
-      selectingMetacode = false;
-      $(this).removeClass('minimize'); // this line flips the pull up arrow to a drop down arrow
-      $('.metacodeSelect').hide();
-    }
-  });
-  
-  
-  // ability to change permission
-  var selectingPermission = false;
-  if (userid == node.data.$userid ) {
-   $('.showcard .yourTopic .mapPerm').click(function() {
-    if (!selectingPermission) {  
-      selectingPermission = true;
-      $(this).addClass('minimize'); // this line flips the drop down arrow to a pull up arrow
-      if ( $(this).hasClass('co') ) {
-        $(this).append('<ul class="permissionSelect"><li class="public"></li><li class="private"></li></ul>');
-      } else if ( $(this).hasClass('pu') ) {
-        $(this).append('<ul class="permissionSelect"><li class="commons"></li><li class="private"></li></ul>');
-      } else if ( $(this).hasClass('pr') ) {
-        $(this).append('<ul class="permissionSelect"><li class="commons"></li><li class="public"></li></ul>');
-      }
-      $('.permissionSelect li').click(function(event) {
-        selectingPermission = false;
-        var permission = $(this).attr('class');
-        updateTopicPermission(node, permission);
-        event.stopPropagation();
-      });
-    } else {
-      selectingPermission = false;
-      $(this).removeClass('minimize'); // this line flips the pull up arrow to a drop down arrow
-      $('.permissionSelect').remove();
-    }
-   });
-  }
-  
-  // when you're typing a description, resize the scroll box to have space
-  $('.best_in_place_desc textarea').bind('keyup', function() {
-    var s = $('.showcard').find('.scroll');
-    s.height( s.height() ).mCustomScrollbar('update');
-    console.log('working');
-  });
-  
-  //bind best_in_place ajax callbacks
-  $(showCard).find('.best_in_place_name').bind("ajax:success", function() {
-    
-    var s = $('.showcard').find('.scroll');
-    s.height( s.height() ).mCustomScrollbar('update');
-    
-    var name = $(this).html();
-    node.name = decodeEntities(name);
-    Mconsole.plot();
-  });
-
-  $(showCard).find('.best_in_place_desc').bind("ajax:success", function() {
-    this.innerHTML = this.innerHTML.replace(/\r/g, '')
-    
-    var s = $('.showcard').find('.scroll');
-    s.height( s.height() ).mCustomScrollbar('update');
-    
-    var desc = $(this).html();
-    node.setData("desc", desc);
-  });
-
-  $(showCard).find('.best_in_place_link').bind("ajax:success", function() {
-    var link = $(this).html();
-    $(showCard).find('.go-link').attr('href', link);
-    node.setData("link", link);
-  });
-    
-}
diff --git a/app/assets/javascripts/Jit/select-edit-delete-nodes-and-edges.js b/app/assets/javascripts/Jit/select-edit-delete-nodes-and-edges.js
index 69d246c3..125c4020 100644
--- a/app/assets/javascripts/Jit/select-edit-delete-nodes-and-edges.js
+++ b/app/assets/javascripts/Jit/select-edit-delete-nodes-and-edges.js
@@ -1,18 +1,18 @@
 function centerOn(nodeid) {
-  if (!Mconsole.busy) {
-          var node = Mconsole.graph.getNode(nodeid);
-          $('div.index img').attr('src', imgArray[node.getData('metacode')].src);
-          $('div.index .mapName').html(node.name);
-          $(document).attr('title', node.name + ' | Metamaps');
-          window.history.pushState(node.name, "Metamaps", "/topics/" + node.id);
-          Mconsole.onClick(node.id, {  
+    if (!Mconsole.busy) {
+        var node = Mconsole.graph.getNode(nodeid);
+        $('div.index img').attr('src', imgArray[node.getData('metacode')].src);
+        $('div.index .mapName').html(node.name);
+        $(document).attr('title', node.name + ' | Metamaps');
+        window.history.pushState(node.name, "Metamaps", "/topics/" + node.id);
+        Mconsole.onClick(node.id, {
             hideLabels: false,
             duration: 1000,
-            onComplete: function() {
-              fetchRelatives(node);
-            }            
-          });
-        }
+            onComplete: function () {
+                fetchRelatives(node);
+            }
+        });
+    }
 }
 
 function editEdge(edge, e) {
@@ -29,10 +29,10 @@ function editEdge(edge, e) {
     var edit_div = document.createElement('div');
     edit_div.setAttribute('id', 'edit_synapse');
     if (authorizeToEdit(edge)) {
-      edit_div.className = 'permission canEdit';
-      edit_div.className += edge.getData('userid') === userid ? ' yourEdge' : '';
+        edit_div.className = 'permission canEdit';
+        edit_div.className += edge.getData('userid') === userid ? ' yourEdge' : '';
     } else {
-      edit_div.className = 'permission cannotEdit';
+        edit_div.className = 'permission cannotEdit';
     }
     $('.main .wrapper').append(edit_div);
 
@@ -41,422 +41,399 @@ function editEdge(edge, e) {
     //drop it in the right spot, activate it
     $('#edit_synapse').css('position', 'absolute');
     if (e) {
-      $('#edit_synapse').css('left', e.clientX);
-      $('#edit_synapse').css('top', e.clientY);
-    }
-    else {
-      $('#edit_synapse').css('left', myX);
-      $('#edit_synapse').css('top', myY);
+        $('#edit_synapse').css('left', e.clientX);
+        $('#edit_synapse').css('top', e.clientY);
+    } else {
+        $('#edit_synapse').css('left', myX);
+        $('#edit_synapse').css('top', myY);
     }
     //$('#edit_synapse_name').click(); //required in case name is empty
     //$('#edit_synapse_name input').focus();
     $('#edit_synapse').show();
-    
+
     MetamapsModel.edgecardInUse = edge.data.$id;
 }
 
 function populateEditEdgeForm(edge) {
-  add_name_form(edge);
-  add_user_info(edge);
-  add_perms_form(edge);
-  if (authorizeToEdit(edge)) {
-    add_direction_form(edge);
-  }
+    add_name_form(edge);
+    add_user_info(edge);
+    add_perms_form(edge);
+    if (authorizeToEdit(edge)) {
+        add_direction_form(edge);
+    }
 }
 
 function add_name_form(edge) {
-  var data_nil = '<span class="gray">Click to add description.</span>';
-  //name editing form
-  $('#edit_synapse').append('<div id="edit_synapse_name"></div>');
-  $('#edit_synapse_name').attr('class', 'best_in_place best_in_place_desc');
-  $('#edit_synapse_name').attr('data-object', 'synapse');
-  $('#edit_synapse_name').attr('data-attribute', 'desc');
-  $('#edit_synapse_name').attr('data-type', 'textarea');
-  $('#edit_synapse_name').attr('data-nil', data_nil);
-  $('#edit_synapse_name').attr('data-url', '/synapses/' + edge.getData("id"));
-  $('#edit_synapse_name').html(edge.getData("desc"));
+    var data_nil = '<span class="gray">Click to add description.</span>';
+    //name editing form
+    $('#edit_synapse').append('<div id="edit_synapse_name"></div>');
+    $('#edit_synapse_name').attr('class', 'best_in_place best_in_place_desc');
+    $('#edit_synapse_name').attr('data-object', 'synapse');
+    $('#edit_synapse_name').attr('data-attribute', 'desc');
+    $('#edit_synapse_name').attr('data-type', 'textarea');
+    $('#edit_synapse_name').attr('data-nil', data_nil);
+    $('#edit_synapse_name').attr('data-url', '/synapses/' + edge.getData("id"));
+    $('#edit_synapse_name').html(edge.getData("desc"));
 
-  //if edge data is blank or just whitespace, populate it with data_nil
-  if ($('#edit_synapse_name').html().trim() == '') {
-    $('#edit_synapse_name').html(data_nil);
-  }
-
-  $('#edit_synapse_name').bind("ajax:success", function() {
-    var desc = $(this).html();
-    if (desc == data_nil) {
-      edge.setData("desc", '');
-    } else {
-      edge.setData("desc", desc);
+    //if edge data is blank or just whitespace, populate it with data_nil
+    if ($('#edit_synapse_name').html().trim() == '') {
+        $('#edit_synapse_name').html(data_nil);
     }
-    selectEdge(edge);
-    Mconsole.plot();
-  });
+
+    $('#edit_synapse_name').bind("ajax:success", function () {
+        var desc = $(this).html();
+        if (desc == data_nil) {
+            edge.setData("desc", '');
+        } else {
+            edge.setData("desc", desc);
+        }
+        selectEdge(edge);
+        Mconsole.plot();
+    });
 }
 
 function add_user_info(edge) {
-  $('#edit_synapse').append('<div id="edgeUser" class="hoverForTip"><div class="tip">Created by ' + edge.getData("username") + '</div></div>');
+    $('#edit_synapse').append('<div id="edgeUser" class="hoverForTip"><div class="tip">Created by ' + edge.getData("username") + '</div></div>');
 }
 
 function add_perms_form(edge) {
-  //permissions - if owner, also allow permission editing
-  $('#edit_synapse').append('<div class="mapPerm ' + mk_permission(edge) + '"></div>');
-  
-  // ability to change permission
-  var selectingPermission = false;
-  if (userid == edge.getData('userid')) {
-    $('#edit_synapse.yourEdge .mapPerm').click(function() {
-    if (!selectingPermission) {  
-      selectingPermission = true;
-      $(this).addClass('minimize'); // this line flips the drop down arrow to a pull up arrow
-      if ( $(this).hasClass('co') ) {
-        $(this).append('<ul class="permissionSelect"><li class="public"></li><li class="private"></li></ul>');
-      } else if ( $(this).hasClass('pu') ) {
-        $(this).append('<ul class="permissionSelect"><li class="commons"></li><li class="private"></li></ul>');
-      } else if ( $(this).hasClass('pr') ) {
-        $(this).append('<ul class="permissionSelect"><li class="commons"></li><li class="public"></li></ul>');
-      }
-      $('#edit_synapse .permissionSelect li').click(function(event) {
-        selectingPermission = false;
-        var permission = $(this).attr('class');
-        updateSynapsePermission(edge, permission);
-        event.stopPropagation();
-      });
-    } else {
-      selectingPermission = false;
-      $(this).removeClass('minimize'); // this line flips the pull up arrow to a drop down arrow
-      $('#edit_synapse .permissionSelect').remove();
+    //permissions - if owner, also allow permission editing
+    $('#edit_synapse').append('<div class="mapPerm ' + mk_permission(edge) + '"></div>');
+
+    // ability to change permission
+    var selectingPermission = false;
+    if (userid == edge.getData('userid')) {
+        $('#edit_synapse.yourEdge .mapPerm').click(function () {
+            if (!selectingPermission) {
+                selectingPermission = true;
+                $(this).addClass('minimize'); // this line flips the drop down arrow to a pull up arrow
+                if ($(this).hasClass('co')) {
+                    $(this).append('<ul class="permissionSelect"><li class="public"></li><li class="private"></li></ul>');
+                } else if ($(this).hasClass('pu')) {
+                    $(this).append('<ul class="permissionSelect"><li class="commons"></li><li class="private"></li></ul>');
+                } else if ($(this).hasClass('pr')) {
+                    $(this).append('<ul class="permissionSelect"><li class="commons"></li><li class="public"></li></ul>');
+                }
+                $('#edit_synapse .permissionSelect li').click(function (event) {
+                    selectingPermission = false;
+                    var permission = $(this).attr('class');
+                    updateSynapsePermission(edge, permission);
+                    event.stopPropagation();
+                });
+            } else {
+                selectingPermission = false;
+                $(this).removeClass('minimize'); // this line flips the pull up arrow to a drop down arrow
+                $('#edit_synapse .permissionSelect').remove();
+            }
+        });
     }
-   });
-  }
-}//add_perms_form
+} //add_perms_form
 
 function add_direction_form(edge) {
-  //directionality checkboxes
-  $('#edit_synapse').append('<input type="checkbox" id="edit_synapse_left">');
-  $('#edit_synapse').append('<label class="left">&lt;</label>');
-  $('#edit_synapse').append('<input type="checkbox" id="edit_synapse_right">');
-  $('#edit_synapse').append('<label class="right">&gt;</label>');
+    //directionality checkboxes
+    $('#edit_synapse').append('<input type="checkbox" id="edit_synapse_left">');
+    $('#edit_synapse').append('<label class="left">&lt;</label>');
+    $('#edit_synapse').append('<input type="checkbox" id="edit_synapse_right">');
+    $('#edit_synapse').append('<label class="right">&gt;</label>');
 
-  //determine which node is to the left and the right
-  //if directly in a line, top is left
-  if (edge.nodeFrom.pos.x < edge.nodeTo.pos.x ||
-      edge.nodeFrom.pos.x == edge.nodeTo.pos.x &&
-      edge.nodeFrom.pos.y < edge.nodeTo.pos.y) {
-    var left = edge.nodeTo;
-    var right = edge.nodeFrom;
-  } else {
-    var left = edge.nodeFrom;
-    var right = edge.nodeTo;
-  }
-
-  /*
-   * One node is actually on the left onscreen. Call it left, & the other right.
-   * If category is from-to, and that node is first, check the 'right' checkbox.
-   * Else check the 'left' checkbox since the arrow is incoming.
-   */
-
-  var directionCat = edge.getData('category'); //both, none, from-to
-  if (directionCat == 'from-to') {
-    var from_to = edge.getData('direction');
-    if (from_to[0] == left.id) {
-      //check left checkbox
-      $('#edit_synapse_left').prop('checked', true);
+    //determine which node is to the left and the right
+    //if directly in a line, top is left
+    if (edge.nodeFrom.pos.x < edge.nodeTo.pos.x ||
+        edge.nodeFrom.pos.x == edge.nodeTo.pos.x &&
+        edge.nodeFrom.pos.y < edge.nodeTo.pos.y) {
+        var left = edge.nodeTo;
+        var right = edge.nodeFrom;
     } else {
-      //check right checkbox
-      $('#edit_synapse_right').prop('checked', true);
+        var left = edge.nodeFrom;
+        var right = edge.nodeTo;
     }
-  } else if (directionCat == 'both') {
-    //check both checkboxes
-    $('#edit_synapse_left').prop('checked', true);
-    $('#edit_synapse_right').prop('checked', true);
-  }
-  $('#edit_synapse_left, #edit_synapse_right').click(function() {
-    var leftChecked = $('#edit_synapse_left').is(':checked');
-    var rightChecked = $('#edit_synapse_right').is(':checked');
 
-    var dir = edge.getData('direction');
-    var dirCat = 'none';
-    if (leftChecked && rightChecked) {
-      dirCat = 'both';
-    } else if (!leftChecked && rightChecked) {
-      dirCat = 'from-to';
-      dir = [right.id, left.id];
-    } else if (leftChecked && !rightChecked) {
-      dirCat = 'from-to';
-      dir = [left.id, right.id];
-    }
-    $.ajax({
-      'type': 'PUT',
-      'url': '/synapses/' + edge.getData('id'),
-      'data': {
-        synapse: {
-          category:dirCat
-        },
-        node1_id: {
-          node1: dir[0]
-        },
-        node2_id: {
-          node2: dir[1]
+    /*
+     * One node is actually on the left onscreen. Call it left, & the other right.
+     * If category is from-to, and that node is first, check the 'right' checkbox.
+     * Else check the 'left' checkbox since the arrow is incoming.
+     */
+
+    var directionCat = edge.getData('category'); //both, none, from-to
+    if (directionCat == 'from-to') {
+        var from_to = edge.getData('direction');
+        if (from_to[0] == left.id) {
+            //check left checkbox
+            $('#edit_synapse_left').prop('checked', true);
+        } else {
+            //check right checkbox
+            $('#edit_synapse_right').prop('checked', true);
         }
-      },
-      'success': function(data) {
-        updateEdgeDisplay(edge, dir, dirCat);
-      }
+    } else if (directionCat == 'both') {
+        //check both checkboxes
+        $('#edit_synapse_left').prop('checked', true);
+        $('#edit_synapse_right').prop('checked', true);
+    }
+    $('#edit_synapse_left, #edit_synapse_right').click(function () {
+        var leftChecked = $('#edit_synapse_left').is(':checked');
+        var rightChecked = $('#edit_synapse_right').is(':checked');
+
+        var dir = edge.getData('direction');
+        var dirCat = 'none';
+        if (leftChecked && rightChecked) {
+            dirCat = 'both';
+        } else if (!leftChecked && rightChecked) {
+            dirCat = 'from-to';
+            dir = [right.id, left.id];
+        } else if (leftChecked && !rightChecked) {
+            dirCat = 'from-to';
+            dir = [left.id, right.id];
+        }
+        $.ajax({
+            'type': 'PUT',
+            'url': '/synapses/' + edge.getData('id'),
+            'data': {
+                synapse: {
+                    category: dirCat
+                },
+                node1_id: {
+                    node1: dir[0]
+                },
+                node2_id: {
+                    node2: dir[1]
+                }
+            },
+            'success': function (data) {
+                updateEdgeDisplay(edge, dir, dirCat);
+            }
+        });
     });
-  });
-}//add_direction_form
+} //add_direction_form
 
 function updateEdgeDisplay(edge, dir, dirCat) {
-  edge.setData('category', dirCat);
-  edge.setData('direction', dir);
+    edge.setData('category', dirCat);
+    edge.setData('direction', dir);
 
-  //render mid arrow
-  //renderEdgeArrows(Mconsole.fx.edgeHelper, edge);
-  Mconsole.plot();
+    //render mid arrow
+    //renderEdgeArrows(Mconsole.fx.edgeHelper, edge);
+    Mconsole.plot();
 }
 
-function best_in_place_perms(edge) {
-  var output = 
-  '<span class="best_in_place best_in_place_permission"                       \
-        id="best_in_place_topic_$_id_$_permission"                            \
-        data-url="/synapses/$_id_$"                                           \
-        data-object="synapse"                                                 \
-        data-collection=$_permission_choices_$                                \
-        data-attribute="permission"                                           \
-        data-type="select"                                                    \
-        data-value="$_current_$">$_perm_$</span>';
-
-  var permission_choices = "'[";
-  permission_choices += '["commons","commons"],';
-  permission_choices += '["public","public"],';
-  permission_choices += '["private","private"]';
-  permission_choices += "]'";
-
-  output = output.replace(/\$_permission_choices_\$/g, permission_choices);
-  output = output.replace(/\$_id_\$/g, edge.getData('id'));
-  output = output.replace(/\$_current_$\$/g, edge.getData('permission'));
-  output = output.replace(/\$_perm_\$/g, edge.getData('permission'));
-  return output;
-}//best_in_place_perms
-
 function deselectAllEdges() {
-  var l = MetamapsModel.selectedEdges.length;
-  for (var i = l-1; i >= 0; i -= 1) {
-    var edge = MetamapsModel.selectedEdges[i];
-    deselectEdge(edge);
-  }
+    var l = MetamapsModel.selectedEdges.length;
+    for (var i = l - 1; i >= 0; i -= 1) {
+        var edge = MetamapsModel.selectedEdges[i];
+        deselectEdge(edge);
+    }
 }
 
 function deselectAllNodes() {
-  var l = MetamapsModel.selectedNodes.length;
-  for (var i = l-1; i >= 0; i -= 1) {
-    var node = MetamapsModel.selectedNodes[i];
-    deselectNode(node);
-  }
+    var l = MetamapsModel.selectedNodes.length;
+    for (var i = l - 1; i >= 0; i -= 1) {
+        var node = MetamapsModel.selectedNodes[i];
+        deselectNode(node);
+    }
 }
 
 // this is for hiding one topic from your canvas
 function removeEdge(edge) {
-  var id = edge.getData("id");
-  $.ajax({
-    type: "DELETE",
-    url: "/synapses/" + id,
-    success: function(){
-      hideEdge(edge);
-    },
-  });
+    var id = edge.getData("id");
+    $.ajax({
+        type: "DELETE",
+        url: "/synapses/" + id,
+        success: function () {
+            hideEdge(edge);
+        },
+    });
 }
 
 function hideEdge(edge) {
-  var from = edge.nodeFrom.id;
-  var to = edge.nodeTo.id;
-  edge.setData('alpha', 0, 'end');
-  Mconsole.fx.animate({
-    modes: ['edge-property:alpha'],
-    duration: 1000
-  });
-  Mconsole.graph.removeAdjacence(from, to);
-  Mconsole.plot();
+    var from = edge.nodeFrom.id;
+    var to = edge.nodeTo.id;
+    edge.setData('alpha', 0, 'end');
+    Mconsole.fx.animate({
+        modes: ['edge-property:alpha'],
+        duration: 1000
+    });
+    Mconsole.graph.removeAdjacence(from, to);
+    Mconsole.plot();
 }
 
 function hideSelectedEdges() {
-  var l = MetamapsModel.selectedEdges.length;
-  for (var i = l-1; i >= 0; i -= 1) {
-    var edge = MetamapsModel.selectedEdges[i];
-    hideEdge(edge);
-  }
-  MetamapsModel.selectedEdges = new Array();
+    var l = MetamapsModel.selectedEdges.length;
+    for (var i = l - 1; i >= 0; i -= 1) {
+        var edge = MetamapsModel.selectedEdges[i];
+        hideEdge(edge);
+    }
+    MetamapsModel.selectedEdges = new Array();
 }
 
 function removeSelectedEdges() {
-  var l = MetamapsModel.selectedEdges.length;
-  for (var i = l-1; i >= 0; i -= 1) {
-    if (mapid != null) {
-      var edge = MetamapsModel.selectedEdges[i];
-      var id = edge.getData("id");
-      //delete mapping of id mapid
-      $.ajax({
-        type: "POST",
-        url: "/synapses/" + mapid + "/" + id + "/removefrommap",
-      });
+    var l = MetamapsModel.selectedEdges.length;
+    for (var i = l - 1; i >= 0; i -= 1) {
+        if (mapid != null) {
+            var edge = MetamapsModel.selectedEdges[i];
+            var id = edge.getData("id");
+            //delete mapping of id mapid
+            $.ajax({
+                type: "POST",
+                url: "/synapses/" + mapid + "/" + id + "/removefrommap",
+            });
+        }
+        hideEdge(edge);
     }
-    hideEdge(edge);
-  }
-  MetamapsModel.selectedEdges = new Array();
+    MetamapsModel.selectedEdges = new Array();
 }
 
 function deleteSelectedEdges() {
-  var l = MetamapsModel.selectedEdges.length;
-  for (var i = l-1; i >= 0; i -= 1) {
-    var edge = MetamapsModel.selectedEdges[i];
-    var id = edge.getData("id");
-    $.ajax({
-      type: "DELETE",
-      url: "/synapses/" + id,
-    });
-    hideEdge(edge);
-  }
-  MetamapsModel.selectedEdges = new Array();
+    var l = MetamapsModel.selectedEdges.length;
+    for (var i = l - 1; i >= 0; i -= 1) {
+        var edge = MetamapsModel.selectedEdges[i];
+        var id = edge.getData("id");
+        $.ajax({
+            type: "DELETE",
+            url: "/synapses/" + id,
+        });
+        hideEdge(edge);
+    }
+    MetamapsModel.selectedEdges = new Array();
 }
 
 function selectNode(node) {
-  if (MetamapsModel.selectedNodes.indexOf(node) != -1) return;
-  node.selected = true;
-  node.setData('dim', 30, 'current');
-  node.setData('whiteCircle',true);
-  node.eachAdjacency(function (adj) {
-    selectEdge(adj);
-  });
-  MetamapsModel.selectedNodes.push(node);
+    if (MetamapsModel.selectedNodes.indexOf(node) != -1) return;
+    node.selected = true;
+    node.setData('dim', 30, 'current');
+    node.setData('whiteCircle', true);
+    node.eachAdjacency(function (adj) {
+        selectEdge(adj);
+    });
+    MetamapsModel.selectedNodes.push(node);
 }
 
 function deselectNode(node) {
-  delete node.selected;
-  node.setData('whiteCircle', false);
-  node.eachAdjacency(function(adj) {
-    deselectEdge(adj);
-  });
-  node.setData('dim', 25, 'current');
+    delete node.selected;
+    node.setData('whiteCircle', false);
+    node.eachAdjacency(function (adj) {
+        deselectEdge(adj);
+    });
+    node.setData('dim', 25, 'current');
 
-  //remove the node
-  MetamapsModel.selectedNodes.splice(
-    MetamapsModel.selectedNodes.indexOf(node), 1);
+    //remove the node
+    MetamapsModel.selectedNodes.splice(
+        MetamapsModel.selectedNodes.indexOf(node), 1);
 }
 
 function selectEdge(edge) {
-  if (MetamapsModel.selectedEdges.indexOf(edge) != -1) return;
-  edge.setData('showDesc', true, 'current');
-  if ( ! MetamapsModel.embed) {
-    edge.setDataset('end', {
-      lineWidth: 4,
-      color: '#FFFFFF',
-      alpha: 1
+    if (MetamapsModel.selectedEdges.indexOf(edge) != -1) return;
+    edge.setData('showDesc', true, 'current');
+    if (!MetamapsModel.embed) {
+        edge.setDataset('end', {
+            lineWidth: 4,
+            color: '#FFFFFF',
+            alpha: 1
+        });
+    } else if (MetamapsModel.embed) {
+        edge.setDataset('end', {
+            lineWidth: 4,
+            color: '#999',
+            alpha: 1
+        });
+    }
+    Mconsole.fx.animate({
+        modes: ['edge-property:lineWidth:color:alpha'],
+        duration: 100
     });
-  } else if (MetamapsModel.embed) {
-    edge.setDataset('end', {
-      lineWidth: 4,
-      color: '#999',
-      alpha: 1
-    });
-  }
-  Mconsole.fx.animate({
-    modes: ['edge-property:lineWidth:color:alpha'],
-    duration: 100
-  });
-  MetamapsModel.selectedEdges.push(edge);
+    MetamapsModel.selectedEdges.push(edge);
 }
 
 function deselectEdge(edge) {
-  edge.setData('showDesc', false, 'current');
-  edge.setDataset('end', {
-    lineWidth: 2,
-    color: '#222222',
-    alpha: 0.4
-  });
-
-  if (MetamapsModel.edgeHoveringOver == edge) {
-    edge.setData('showDesc', true, 'current');
+    edge.setData('showDesc', false, 'current');
     edge.setDataset('end', {
-      lineWidth: 4,
-      color: '#222222',
-      alpha: 1
+        lineWidth: 2,
+        color: '#222222',
+        alpha: 0.4
     });
-  }
 
-  Mconsole.fx.animate({
-    modes: ['edge-property:lineWidth:color:alpha'],
-    duration: 100
-  });
+    if (MetamapsModel.edgeHoveringOver == edge) {
+        edge.setData('showDesc', true, 'current');
+        edge.setDataset('end', {
+            lineWidth: 4,
+            color: '#222222',
+            alpha: 1
+        });
+    }
 
-  //remove the edge
-  MetamapsModel.selectedEdges.splice(
-    MetamapsModel.selectedEdges.indexOf(edge), 1);
+    Mconsole.fx.animate({
+        modes: ['edge-property:lineWidth:color:alpha'],
+        duration: 100
+    });
+
+    //remove the edge
+    MetamapsModel.selectedEdges.splice(
+        MetamapsModel.selectedEdges.indexOf(edge), 1);
 }
 
 // this is for hiding one topic from your canvas
 function hideNode(nodeid) {
-  var node = Mconsole.graph.getNode(nodeid);
-  if (nodeid == Mconsole.root && gType == "centered") {
-    alert("You can't hide this topic, it is the root of your graph.");
-    return;
-  }
+    var node = Mconsole.graph.getNode(nodeid);
+    if (nodeid == Mconsole.root && gType == "centered") {
+        alert("You can't hide this topic, it is the root of your graph.");
+        return;
+    }
 
-  deselectNode(node);
-  
-  node.setData('alpha', 0, 'end');  
-  node.eachAdjacency(function(adj) {  
-	adj.setData('alpha', 0, 'end');  
-  });  
-  Mconsole.fx.animate({  
-	modes: ['node-property:alpha',  
-			'edge-property:alpha'],  
-	duration: 1000  
-  });
-  Mconsole.graph.removeNode(nodeid);
+    deselectNode(node);
+
+    node.setData('alpha', 0, 'end');
+    node.eachAdjacency(function (adj) {
+        adj.setData('alpha', 0, 'end');
+    });
+    Mconsole.fx.animate({
+        modes: ['node-property:alpha',
+   'edge-property:alpha'],
+        duration: 1000
+    });
+    Mconsole.graph.removeNode(nodeid);
 }
 
 function hideSelectedNodes() {
-  var l = MetamapsModel.selectedNodes.length;
-  for (var i = l-1; i >= 0; i -= 1) {
-    var node = MetamapsModel.selectedNodes[i];
-    hideNode(node.id);
-  }
+    var l = MetamapsModel.selectedNodes.length;
+    for (var i = l - 1; i >= 0; i -= 1) {
+        var node = MetamapsModel.selectedNodes[i];
+        hideNode(node.id);
+    }
 }
 
 function removeNode(nodeid) {
-  var node = Mconsole.graph.getNode(nodeid);
-  deselectNode(node);
-  if (mapperm) {
-    $.ajax({
-      type: "POST",
-      url: "/topics/" + mapid + "/" + nodeid + "/removefrommap",
-    });
-  }
-}
-function removeSelectedNodes() {
- if (mapperm) {
-    var l = MetamapsModel.selectedNodes.length;
-    for (var i = l-1; i >= 0; i -= 1) {
-      var node = MetamapsModel.selectedNodes[i];
-      removeNode(node.id);
+    var node = Mconsole.graph.getNode(nodeid);
+    deselectNode(node);
+    if (mapperm) {
+        $.ajax({
+            type: "POST",
+            url: "/topics/" + mapid + "/" + nodeid + "/removefrommap",
+        });
+    }
+}
+
+function removeSelectedNodes() {
+    if (mapperm) {
+        var l = MetamapsModel.selectedNodes.length;
+        for (var i = l - 1; i >= 0; i -= 1) {
+            var node = MetamapsModel.selectedNodes[i];
+            removeNode(node.id);
+        }
     }
-  }
 }
 
 function deleteNode(nodeid) {
-  if (nodeid == Mconsole.root && gType == "centered") {
-    alert("You can't delete this topic, it is the root of your graph.");
-    return;
-  }
-  $.ajax({
-    type: "DELETE",
-    url: "/topics/" + nodeid,
-  });
+    if (nodeid == Mconsole.root && gType == "centered") {
+        alert("You can't delete this topic, it is the root of your graph.");
+        return;
+    }
+    $.ajax({
+        type: "DELETE",
+        url: "/topics/" + nodeid,
+    });
 }
+
 function deleteSelectedNodes() {
-  var l = MetamapsModel.selectedNodes.length;
-  for (var i = l-1; i >= 0; i -= 1) {
-    var node = MetamapsModel.selectedNodes[i];
-    deleteNode(node.id);
-  }
-}
+    var l = MetamapsModel.selectedNodes.length;
+    for (var i = l - 1; i >= 0; i -= 1) {
+        var node = MetamapsModel.selectedNodes[i];
+        deleteNode(node.id);
+    }
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/Jit/test.js b/app/assets/javascripts/Jit/test.js
new file mode 100644
index 00000000..e69de29b
diff --git a/app/assets/javascripts/Jit/topicCard.js b/app/assets/javascripts/Jit/topicCard.js
new file mode 100644
index 00000000..64557892
--- /dev/null
+++ b/app/assets/javascripts/Jit/topicCard.js
@@ -0,0 +1,207 @@
+/*
+ * @file
+ * There is a lot of code that goes into creating the "label" of a node
+ * This includes editable cards with all node details, and some controls
+ * onCreateLabelHandler is the main function of this file, and the file
+ * also contains a bunch of helper functions
+ *
+ * html and littleHTML are potentially confusing variables
+ * html is the contents of the card shown when you click on a node's label.
+ * littleHTML creates little controls for removing/hiding nodes from the canvas
+ *
+ * This function features PHP-style variable substitution because the strings
+ * are so damn long. Values are identified by $_id_$, and then a regular
+ * expression is substituted in later (for html, in a separate function).
+ */
+
+function buildCardWithHogan(node) {
+    var nodeValues = {};
+    var authorized = authorizeToEdit(node);
+
+    //link is rendered differently if user is logged out or in
+    var go_link, a_tag, close_a_tag;
+    if (!authorized) {
+        go_link = '';
+        if (node.getData("link") != "") {
+            a_tag = '<a href="' + node.getData("link") + '" target="_blank">';
+            close_a_tag = '</a>';
+        } else {
+            a_tag = '';
+            close_a_tag = '';
+        }
+    } else {
+        go_link = '<a href="' + node.getData("link") + '" ' +
+            '   class="go-link" target="_blank"></a>';
+        a_tag = '';
+        close_a_tag = '';
+    }
+
+    var desc_nil = "Click to add description...";
+    var link_nil = "Click to add link...";
+
+    nodeValues.permission = node.getData("permission");
+    nodeValues.mk_permission = mk_permission(node);
+    nodeValues.map_count = node.getData("inmaps").length;
+    nodeValues.synapse_count = node.getData("synapseCount");
+    nodeValues.id = node.id;
+    nodeValues.metacode = node.getData("metacode");
+    nodeValues.imgsrc = imgArray[node.getData("metacode")].src;
+    nodeValues.name = node.name;
+    nodeValues.userid = node.getData("userid");
+    nodeValues.username = node.getData("username");
+    nodeValues.date = node.getData("date");
+
+    // the code for this is stored in /views/main/_metacodeOptions.html.erb
+    nodeValues.metacode_select = $('#metacodeOptions').html();
+    nodeValues.go_link = go_link;
+    nodeValues.a_tag = a_tag;
+    nodeValues.close_a_tag = close_a_tag;
+    nodeValues.link_nil = link_nil;
+    nodeValues.link = (node.getData("link") == "" && authorized) ? link_nil : node.getData("link");
+    nodeValues.desc_nil = desc_nil;
+    nodeValues.desc = (node.getData("desc") == "" && authorized) ? desc_nil : node.getData("desc");
+
+    // the code for the template is stored in /views/layouts/_templates.html.erb
+    var hoganTemplate = Hogan.compile($('#topicCardTemplate').html());
+    return hoganTemplate.render(nodeValues);
+}
+
+function hideCurrentCard() {
+    if (MetamapsModel.showcardInUse) {
+        var node = Mconsole.graph.getNode(MetamapsModel.showcardInUse);
+        hideCard(node);
+    }
+}
+
+function hideCard(node) {
+    var card = '.showcard';
+
+    $(card).fadeOut('fast', function () {
+        //node.setData('dim', 25, 'current');
+        Mconsole.plot();
+    });
+
+    MetamapsModel.showcardInUse = null;
+}
+
+function populateShowCard(node) {
+    var showCard = document.getElementById('showcard');
+
+    $(showCard).find('.permission').remove();
+
+    var html = buildCardWithHogan(node);
+
+    if (authorizeToEdit(node)) {
+        var perm = document.createElement('div');
+
+        var string = 'permission canEdit';
+        if (userid == node.data.$userid) string += ' yourTopic';
+        perm.className = string;
+        perm.innerHTML = html;
+        showCard.appendChild(perm);
+    } else {
+        var perm = document.createElement('div');
+        perm.className = 'permission cannotEdit';
+        perm.innerHTML = html;
+        showCard.appendChild(perm);
+    }
+
+    var selectingMetacode = false;
+    // attach the listener that shows the metacode title when you hover over the image
+    $('.showcard .metacodeImage').mouseenter(function () {
+        $('.showcard .icon').css('z-index', '4');
+        $('.showcard .metacodeTitle').show();
+    });
+    $('.showcard .linkItem.icon').mouseleave(function () {
+        if (!selectingMetacode) {
+            $('.showcard .metacodeTitle').hide();
+            $('.showcard .icon').css('z-index', '1');
+        }
+    });
+
+    $('.showcard .metacodeTitle').click(function () {
+        if (!selectingMetacode) {
+            selectingMetacode = true;
+            $(this).addClass('minimize'); // this line flips the drop down arrow to a pull up arrow
+            $('.metacodeSelect').show();
+            // add the scroll bar to the list of metacode select options if it isn't already there
+            if (!$('.metacodeSelect ul').hasClass('mCustomScrollbar')) {
+                $('.metacodeSelect ul').mCustomScrollbar();
+
+                $('.metacodeSelect li').click(function () {
+                    selectingMetacode = false;
+                    var metacodeName = $(this).find('.mSelectName').text();
+                    updateMetacode(node, metacodeName);
+                });
+            }
+        } else {
+            selectingMetacode = false;
+            $(this).removeClass('minimize'); // this line flips the pull up arrow to a drop down arrow
+            $('.metacodeSelect').hide();
+        }
+    });
+
+
+    // ability to change permission
+    var selectingPermission = false;
+    if (userid == node.data.$userid) {
+        $('.showcard .yourTopic .mapPerm').click(function () {
+            if (!selectingPermission) {
+                selectingPermission = true;
+                $(this).addClass('minimize'); // this line flips the drop down arrow to a pull up arrow
+                if ($(this).hasClass('co')) {
+                    $(this).append('<ul class="permissionSelect"><li class="public"></li><li class="private"></li></ul>');
+                } else if ($(this).hasClass('pu')) {
+                    $(this).append('<ul class="permissionSelect"><li class="commons"></li><li class="private"></li></ul>');
+                } else if ($(this).hasClass('pr')) {
+                    $(this).append('<ul class="permissionSelect"><li class="commons"></li><li class="public"></li></ul>');
+                }
+                $('.permissionSelect li').click(function (event) {
+                    selectingPermission = false;
+                    var permission = $(this).attr('class');
+                    updateTopicPermission(node, permission);
+                    event.stopPropagation();
+                });
+            } else {
+                selectingPermission = false;
+                $(this).removeClass('minimize'); // this line flips the pull up arrow to a drop down arrow
+                $('.permissionSelect').remove();
+            }
+        });
+    }
+
+    // when you're typing a description, resize the scroll box to have space
+    $('.best_in_place_desc textarea').bind('keyup', function () {
+        var s = $('.showcard').find('.scroll');
+        s.height(s.height()).mCustomScrollbar('update');
+        console.log('working');
+    });
+
+    //bind best_in_place ajax callbacks
+    $(showCard).find('.best_in_place_name').bind("ajax:success", function () {
+
+        var s = $('.showcard').find('.scroll');
+        s.height(s.height()).mCustomScrollbar('update');
+
+        var name = $(this).html();
+        node.name = decodeEntities(name);
+        Mconsole.plot();
+    });
+
+    $(showCard).find('.best_in_place_desc').bind("ajax:success", function () {
+        this.innerHTML = this.innerHTML.replace(/\r/g, '')
+
+        var s = $('.showcard').find('.scroll');
+        s.height(s.height()).mCustomScrollbar('update');
+
+        var desc = $(this).html();
+        node.setData("desc", desc);
+    });
+
+    $(showCard).find('.best_in_place_link').bind("ajax:success", function () {
+        var link = $(this).html();
+        $(showCard).find('.go-link').attr('href', link);
+        node.setData("link", link);
+    });
+
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 99aceeac..374da114 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -35,594 +35,6 @@ var labelType, useGradients, nativeTextSupport, animate, json, Mconsole = null,
     mapperm = false,
     touchPos, touchDragNode, mouseIsDown = false;
 
-$(document).ready(function () {
-
-    function bindMainMenuHover() {
-
-        var menuIsOpen = false
-
-        // controls the sliding hover of the bottom left menu
-        var sliding1 = false;
-        var lT;
-
-        var closeMenu = function () {
-            lT = setTimeout(function () {
-                if (!sliding1) {
-                    sliding1 = true;
-                    // $('.footer .menu').animate({
-                    // height: '0px'
-                    // }, 300, function() {
-                    // sliding1 = false;
-                    // menuIsOpen = false;
-                    // });
-                    $('.footer').css('border-top-right-radius', '5px');
-                    $('.logo').animate({
-                        'background-position-x': '-10px'
-                    }, 200);
-                    $('.footer .menu').fadeOut(200, function () {
-                        sliding1 = false;
-                        menuIsOpen = false;
-                    });
-                }
-            }, 500);
-        }
-
-        var openMenu = function () {
-                clearTimeout(lT);
-                if (!sliding1) {
-                    sliding1 = true;
-
-                    // $('.footer .menu').animate({
-                    // height: listLength + 'px'
-                    // }, 300, function() {
-                    // sliding1 = false;
-                    // });
-                    $('.footer').css('border-top-right-radius', '0');
-                    $('.logo').animate({
-                        'background-position-x': '-7px'
-                    }, 200);
-                    $('.footer .menu').fadeIn(200, function () {
-                        sliding1 = false;
-                    });
-                }
-            }
-            // bind the hover events
-        $(".logo").hover(openMenu, closeMenu);
-
-        // when on touch screen, make touching on the logo do what hovering does on desktop
-        $("#mainTitle a").bind('touchend', function (evt) {
-            if (!menuIsOpen) {
-                openMenu();
-                evt.preventDefault();
-                evt.stopPropagation();
-            }
-        });
-    }
-
-    function bindSearchHover() {
-
-        var searchIsOpen = false
-
-        // controls the sliding hover of the search
-        var sliding1 = false;
-        var lT;
-
-        var openSearch = function () {
-            clearTimeout(lT);
-            if (!sliding1 && !searchIsOpen) {
-                hideCards();
-                sliding1 = true;
-                $('.sidebarSearch .twitter-typeahead, .sidebarSearch .tt-hint, .sidebarSearchField').animate({
-                    width: '200px'
-                }, 200, function () {
-                    $('.sidebarSearchField, .sidebarSearch .tt-hint').css({
-                        padding: '5px 10px',
-                        width: '180px'
-                    });
-                    $('.sidebarSearchField').focus();
-                    sliding1 = false
-                    searchIsOpen = true;
-                });
-            }
-        }
-        var closeSearch = function (closeAfter) {
-            lT = setTimeout(function () {
-                if (!sliding1 && searchIsOpen && $('.sidebarSearchField').val() == '') {
-                    sliding1 = true;
-                    $('.sidebarSearchField, .sidebarSearch .tt-hint').css({
-                        padding: '5px 0',
-                        width: '200px'
-                    });
-                    $('.sidebarSearch .twitter-typeahead, .sidebarSearch .tt-hint, .sidebarSearchField').animate({
-                        width: '0'
-                    }, 200, function () {
-                        $('.sidebarSearchField').typeahead('setQuery', '');
-                        sliding1 = false;
-                        searchIsOpen = false;
-                    });
-                }
-            }, closeAfter);
-        }
-
-        // bind the hover events
-        $(".sidebarSearch").hover(function () {
-            openSearch()
-        }, function () {
-            closeSearch(800)
-        });
-
-        $('.sidebarSearchIcon').click(function (e) {
-            $('.sidebarSearchField').focus();
-        });
-        $('.sidebarSearch').click(function (e) {
-            e.stopPropagation();
-        });
-        $('body').click(function (e) {
-            closeSearch(0);
-        });
-
-        // if the search is closed and user hits SHIFT+S
-        $('body').bind('keydown', function (e) {
-            switch (e.which) {
-            case 191:
-                if (e.ctrlKey && !searchIsOpen) {
-                    openSearch();
-                }
-                break;
-            default:
-                break; //console.log(e.which);
-            }
-        });
-
-        // initialize the search box autocomplete results
-        var mapheader = userid ? '<h3 class="search-header">Maps</h3><input type="checkbox" class="limitToMe" id="limitMapsToMe"></input><label for="limitMapsToMe" class="limitToMeLabel">added by me</label><div class="minimizeResults minimizeMapResults"></div><div class="clearfloat"></div>' : '<h3 class="search-header">Maps</h3><div class="minimizeResults minimizeMapResults"></div><div class="clearfloat"></div>';
-        var topicheader = userid ? '<h3 class="search-header">Topics</h3><input type="checkbox" class="limitToMe" id="limitTopicsToMe"></input><label for="limitTopicsToMe" class="limitToMeLabel">added by me</label><div class="minimizeResults minimizeTopicResults"></div><div class="clearfloat"></div>' : '<h3 class="search-header">Topics</h3><div class="minimizeResults minimizeTopicResults"></div><div class="clearfloat"></div>';
-        $('.sidebarSearchField').typeahead([
-            {
-                name: 'topics',
-                dupChecker: function (datum1, datum2) {
-                    return false;
-                },
-                template: $('.topicTemplate').html(),
-                remote: {
-                    url: '/search/topics?term=%QUERY',
-                    replace: function () {
-                        var q = '/search/topics?term=' + $('.sidebarSearchField').val();
-                        if ($("#limitTopicsToMe").is(':checked')) {
-                            q += "&user=" + userid.toString();
-                        }
-                        return q;
-                    },
-                    filter: function (dataset) {
-                        if (dataset.length == 0) {
-                            dataset.push({
-                                value: "No results",
-                                label: "No results",
-                                typeImageURL: "/assets/icons/wildcard.png",
-                                rtype: "noresult"
-                            });
-                        }
-                        return dataset;
-                    }
-                },
-                engine: Hogan,
-                header: topicheader
-              },
-            {
-                name: 'maps',
-                dupChecker: function (datum1, datum2) {
-                    return false;
-                },
-                template: $('.mapTemplate').html(),
-                remote: {
-                    url: '/search/maps?term=%QUERY',
-                    replace: function () {
-                        var q = '/search/maps?term=' + $('.sidebarSearchField').val();
-                        if ($("#limitMapsToMe").is(':checked')) {
-                            q += "&user=" + userid.toString();
-                        }
-                        return q;
-                    },
-                    filter: function (dataset) {
-                        if (dataset.length == 0) {
-                            dataset.push({
-                                value: "No results",
-                                label: "No results",
-                                rtype: "noresult"
-                            });
-                        }
-                        return dataset;
-                    }
-                },
-                engine: Hogan,
-                header: mapheader
-              },
-            {
-                name: 'mappers',
-                dupChecker: function (datum1, datum2) {
-                    return false;
-                },
-                template: $('.mapperTemplate').html(),
-                remote: {
-                    url: '/search/mappers?term=%QUERY',
-                    filter: function (dataset) {
-                        if (dataset.length == 0) {
-                            dataset.push({
-                                value: "No results",
-                                label: "No results",
-                                rtype: "noresult"
-                            });
-                        }
-                        return dataset;
-                    }
-                },
-                engine: Hogan,
-                header: '<h3 class="search-header">Mappers</h3><div class="minimizeResults minimizeMapperResults"></div><div class="clearfloat"></div>'
-              }
-      ]);
-        // tell the autocomplete to launch a new tab with the topic, map, or mapper you clicked on
-        $('.sidebarSearchField').bind('typeahead:selected', function (event, datum, dataset) {
-            console.log(event);
-            if (datum.rtype != "noresult") {
-                var win;
-                if (dataset == "topics") {
-                    win = window.open('/topics/' + datum.id, '_blank');
-                } else if (dataset == "maps") {
-                    win = window.open('/maps/' + datum.id, '_blank');
-                } else if (dataset == "mappers") {
-                    win = window.open('/maps/mappers/' + datum.id, '_blank');
-                }
-                win.focus();
-                closeSearch(0);
-            }
-        });
-
-
-        var checkboxChangeInit = false,
-            minimizeInit = false;
-
-        $('.sidebarSearchField').bind('keyup', function () {
-
-            // when the user selects 'added by me' resend the query with their userid attached
-            if (!checkboxChangeInit) {
-                $('.limitToMe').bind("change", function (e) {
-                    // set the value of the search equal to itself to retrigger the autocomplete event
-                    searchIsOpen = false;
-                    $('.sidebarSearchField').typeahead('setQuery', $('.sidebarSearchField').val());
-                    setTimeout(function () {
-                        searchIsOpen = true;
-                    }, 2000);
-                });
-                checkboxChangeInit = true;
-            }
-
-            // when the user clicks minimize section, hide the results for that section
-            if (!minimizeInit) {
-                $('.minimizeMapperResults').click(function (e) {
-                    var s = $('.tt-dataset-mappers .tt-suggestions');
-                    console.log(s.css('height'));
-                    if (s.css('height') == '0px') {
-                        $('.tt-dataset-mappers .tt-suggestions').css({
-                            'height': 'auto',
-                            'overflow': 'visible'
-                        });
-                        $(this).removeClass('maximizeResults').addClass('minimizeResults');
-                    } else {
-                        $('.tt-dataset-mappers .tt-suggestions').css({
-                            'height': '0',
-                            'overflow': 'hidden'
-                        });
-                        $(this).removeClass('minimizeResults').addClass('maximizeResults');
-                    }
-                });
-                $('.minimizeTopicResults').click(function (e) {
-                    var s = $('.tt-dataset-topics .tt-suggestions');
-                    console.log(s.css('height'));
-                    if (s.css('height') == '0px') {
-                        s.css({
-                            'height': 'auto',
-                            'border-top': 'none',
-                            'overflow': 'visible'
-                        });
-                        $(this).removeClass('maximizeResults').addClass('minimizeResults');
-                    } else {
-                        s.css({
-                            'height': '0',
-                            'border-top': '1px solid rgb(56, 56, 56)',
-                            'overflow': 'hidden'
-                        });
-                        $(this).removeClass('minimizeResults').addClass('maximizeResults');
-                    }
-                });
-                $('.minimizeMapResults').click(function (e) {
-                    var s = $('.tt-dataset-maps .tt-suggestions');
-                    console.log(s.css('height'));
-                    if (s.css('height') == '0px') {
-                        s.css({
-                            'height': 'auto',
-                            'border-top': 'none',
-                            'overflow': 'visible'
-                        });
-                        $(this).removeClass('maximizeResults').addClass('minimizeResults');
-                    } else {
-                        s.css({
-                            'height': '0',
-                            'border-top': '1px solid rgb(56, 56, 56)',
-                            'overflow': 'hidden'
-                        });
-                        $(this).removeClass('minimizeResults').addClass('maximizeResults');
-                    }
-                });
-                minimizeInit = true;
-            }
-        });
-
-        //
-
-        $('.sidebarSearch button.addToMap').click(function (event) {
-            event.stopPropagation();
-        });
-    } // end bindSearchHover
-
-    function bindAccountHover() {
-
-        var accountIsOpen = false
-
-        // controls the sliding hover of the bottom left menu
-        var sliding1 = false;
-        var lT;
-
-        var closeAccount = function () {
-            lT = setTimeout(function () {
-                if (!sliding1) {
-                    sliding1 = true;
-                    $('.sidebarAccountIcon').css('background-color', '#0F1519');
-                    $('.sidebarAccountBox').fadeOut(200, function () {
-                        sliding1 = false;
-                        accountIsOpen = false;
-                    });
-                }
-            }, 300);
-        }
-
-        var openAccount = function () {
-                clearTimeout(lT);
-                if (!sliding1) {
-                    sliding1 = true;
-
-                    // hide the other two
-                    $('.sidebarFilterBox').hide();
-                    $('.sidebarWandBox').hide();
-                    $('.sidebarFilterIcon').css('background-color', '#0F1519');
-                    $('.sidebarWandIcon').css('background-color', '#0F1519');
-
-                    $('.sidebarAccountIcon').css('background-color', '#000');
-                    $('.sidebarAccountBox').fadeIn(200, function () {
-                        sliding1 = false;
-                        accountIsOpen = true;
-                    });
-                }
-            }
-            // bind the hover events
-        $(".sidebarAccount").hover(openAccount, closeAccount);
-    } // end bindAccountHover
-
-    // bind hover events  
-    bindMainMenuHover();
-    bindSearchHover();
-    bindAccountHover();
-
-    // disable right click events on the new topic and new synapse input fields
-    $('#new_topic, #new_synapse').bind('contextmenu', function (e) {
-        return false;
-    });
-
-    // initialize the autocomplete results for the metacode spinner
-    $('#topic_name').typeahead([
-        {
-            name: 'topic_autocomplete',
-            limit: 8,
-            template: '<img class="autocompleteSection topicType" width="22" height="22" src="{{typeImageURL}}" alt="{{type}}" title="{{type}}"/><p class="autocompleteSection topicTitle">{{label}}</p><div class="autocompleteSection topicPermission {{permission}}"></div><div class="autocompleteSection topicOriginatorIcon hoverForTip"><span class="tip topicOriginator">{{originator}}</span></div><div class="clearfloat"></div>',
-            remote: {
-                url: '/topics/autocomplete_topic?term=%QUERY'
-            },
-            engine: Hogan
-          }
-  ]);
-    // tell the autocomplete to submit the form with the topic you clicked on if you pick from the autocomplete
-    $('#topic_name').bind('typeahead:selected', function (event, datum, dataset) {
-        $('#topic_grabTopic').val(datum.id);
-        event.preventDefault();
-        event.stopPropagation();
-    });
-    // bind keyboard handlers
-    $('#topic_name').bind('keyup', function (e) {
-        switch (e.which) {
-        case 13:
-            $('.new_topic').submit();
-            break;
-        default:
-            break;
-        }
-    });
-
-    // initialize the autocomplete results for the metacode spinner
-    $('#synapse_desc').typeahead([
-        {
-            name: 'synapse_autocomplete',
-            template: "{{label}}",
-            remote: {
-                url: '/search/synapses?term=%QUERY'
-            },
-            engine: Hogan
-              },
-        {
-            name: 'existing_synapses',
-            limit: 50,
-            template: $('.synapseTemplate').html(),
-            remote: {
-                url: '/search/synapses',
-                replace: function () {
-                    var q = '/search/synapses?topic1id=' + $('#synapse_topic1id').val() + '&topic2id=' + $('#synapse_topic2id').val();
-                    return q;
-                }
-            },
-            engine: Hogan,
-            header: "<h3>Existing Synapses</h3>"
-              },
-  ]);
-    // tell the autocomplete to submit the form with the topic you clicked on if you pick from the autocomplete
-    $('#synapse_desc').bind('typeahead:selected', function (event, datum, dataset) {
-        if (datum.id) { // if they clicked on an existing synapse get it
-            $('#synapse_grabSynapse').val(datum.id);
-        }
-        event.preventDefault();
-        event.stopPropagation();
-    });
-    // bind keyboard handlers
-    $('#synapse_desc').bind('keyup', function (e) {
-        switch (e.which) {
-        case 13:
-            $('.new_synapse').submit();
-            break;
-        default:
-            break;
-        }
-    });
-
-    // when either form submits, don't leave the page
-    $('.new_topic, .new_synapse').bind('submit', function (event, data) {
-        event.preventDefault();
-    });
-
-
-    //$(".scroll").mCustomScrollbar();
-
-    // initialize scroll bar for filter by metacode, then hide it and position it correctly again
-    $("#filter_by_metacode").mCustomScrollbar({
-        advanced: {
-            updateOnContentResize: true
-        }
-    });
-    $('.sidebarFilterBox').hide().css({
-        position: 'absolute',
-        top: '35px',
-        right: '-36px'
-    });
-
-    // initialize metacode spinner and then hide it
-    $("#metacodeImg").CloudCarousel({
-        titleBox: $('#metacodeImgTitle'),
-        yRadius: 40,
-        xPos: 150,
-        yPos: 40,
-        speed: 0.3,
-        mouseWheel: true,
-        bringToFront: true
-    });
-    $('.new_topic').hide();
-
-
-    $('.notice.metamaps').delay(10000).fadeOut('fast');
-    $('.alert.metamaps').delay(10000).fadeOut('fast');
-
-    $('#center-container').bind('contextmenu', function (e) {
-        return false;
-    });
-
-    addHoverForSettings();
-
-    //bind best_in_place ajax callbacks
-    $('.best_in_place_desc').bind("ajax:success", function () {
-        $(this).parents('.CardOnGraph').find('.scroll').mCustomScrollbar("update");
-    });
-    $('.best_in_place_link').bind("ajax:success", function () {
-        var link = $(this).html();
-        $(this).parents('.CardOnGraph').find('.go-link').attr('href', link);
-    });
-
-    //bind lightbox clicks
-    $('.openLightbox').click(function (event) {
-        openLightbox($(this).attr('data-open'));
-        event.preventDefault();
-        return false;
-    });
-
-    // bind permission changer events
-    $('.permIcon').click(function () {
-        $(this).siblings('#map_permission').val($(this).attr('data-permission'));
-        $(this).siblings('.permIcon').find('.mapPermIcon').removeClass('selected');
-        $(this).find('.mapPermIcon').addClass('selected');
-    });
-
-    // bind keyboard handlers
-    $('body').bind('keyup', function (e) {
-        switch (e.which) {
-        case 13:
-            enterKeyHandler(e);
-            break;
-        case 27:
-            escKeyHandler();
-            break;
-        default:
-            break; //console.log(e.which);
-        }
-    });
-
-}); // end document.ready
-
-function addHoverForSettings() {
-    // controls the sliding hover of the settings for cards
-    $(".permActivator").unbind('mouseover');
-    $(".permActivator").unbind('mouseout');
-    var sliding2 = false;
-    var lT1, lT2;
-    $(".permActivator").bind('mouseover',
-        function () {
-            clearTimeout(lT2);
-            that = this;
-            lT1 = setTimeout(function () {
-                if (!sliding2) {
-                    sliding2 = true;
-                    $(that).animate({
-                        width: '203px',
-                        height: '37px'
-                    }, 300, function () {
-                        sliding2 = false;
-                    });
-                }
-            }, 300);
-        });
-
-    $(".permActivator").bind('mouseout',
-        function () {
-            clearTimeout(lT1);
-            that = this;
-            lT2 = setTimeout(function () {
-                if (!sliding2) {
-                    sliding2 = true;
-                    $(that).animate({
-                        height: '16px',
-                        width: '16px'
-                    }, 300, function () {
-                        sliding2 = false;
-                    });
-                }
-            }, 800);
-        }
-    );
-
-    $('.best_in_place_permission').unbind("ajax:success");
-    //bind best_in_place ajax callbacks
-    $('.best_in_place_permission').bind("ajax:success", function () {
-        var permission = $(this).html();
-        var el = $(this).parents('.cardSettings').find('.mapPerm');
-        el.attr('title', permission);
-        if (permission == "commons") el.html("co");
-        else if (permission == "public") el.html("pu");
-        else if (permission == "private") el.html("pr");
-    });
-} // end addHoverForSettings
 
 // this is to save the layout of a map
 function saveLayoutAll() {
@@ -714,14 +126,6 @@ function fetchRelatives(node) {
                 });
                 Mconsole.plot();
             }
-            /*Mconsole.op.contract(node, {  
-        type: 'replot' 
-      });
-      Mconsole.op.expand(node, {  
-        type: 'animate',
-        transition: $jit.Trans.Elastic.easeOut,
-        duration: 1000                     
-      });*/
         },
         error: function () {
             alert('failure');
@@ -825,6 +229,98 @@ function updateMapPermission(mapid, permission) {
     });
 }
 
+function updateMetacodeSet(set, index, custom) {
+    
+    if (custom && MetamapsModel.newSelectedMetacodes.length == 0) {
+        alert('Please select at least one metacode to use!');
+        return false;
+    }
+    
+    var codesToSwitchTo;
+    MetamapsModel.selectedMetacodeSetIndex = index;
+    MetamapsModel.selectedMetacodeSet = "metacodeset-" + set;
+    
+    if (!custom) {
+        codesToSwitchTo = $('#metacodeSwitchTabs' + set).attr('data-metacodes').split(',');
+        $('.customMetacodeList li').addClass('toggledOff');
+        MetamapsModel.selectedMetacodes = [];
+        MetamapsModel.selectedMetacodeNames = [];
+        MetamapsModel.newSelectedMetacodes = [];
+        MetamapsModel.newSelectedMetacodeNames = [];
+    }
+    if (custom) {
+        // uses .slice to avoid setting the two arrays to the same actual array
+        MetamapsModel.selectedMetacodes = MetamapsModel.newSelectedMetacodes.slice(0);
+        MetamapsModel.selectedMetacodeNames = MetamapsModel.newSelectedMetacodeNames.slice(0);
+        codesToSwitchTo = MetamapsModel.selectedMetacodeNames.slice(0);
+    }
+
+    // sort by name
+    codesToSwitchTo.sort();
+    codesToSwitchTo.reverse();
+    
+    $('#metacodeImg, #metacodeImgTitle').empty();
+    $('#metacodeImg').removeData('cloudcarousel');
+    var newMetacodes = "";
+    for (var i = 0; i < codesToSwitchTo.length; i++) {
+        newMetacodes += '<img class="cloudcarousel" width="40" height="40" src="' + imgArray[codesToSwitchTo[i]].src + '" title="' + codesToSwitchTo[i] + '"/>';
+    };
+    $('#metacodeImg').empty().append(newMetacodes).CloudCarousel({
+        titleBox: $('#metacodeImgTitle'),
+        yRadius: 40,
+        xPos: 150,
+        yPos: 40,
+        speed: 0.15,
+        mouseWheel: true,
+        bringToFront: true
+    });
+    
+    $('#lightbox_overlay').hide();
+
+    var mdata = {
+        "metacodes": {
+            "value": custom ? MetamapsModel.selectedMetacodes.toString() : MetamapsModel.selectedMetacodeSet
+        }
+    };
+    $.ajax({
+        type: "POST",
+        dataType: 'json',
+        url: "/user/updatemetacodes",
+        data: mdata,
+        success: function (data) {
+            console.log('success updating metacodes');
+            //setTimeout(function () {
+            //    $('.metacodeTitle').hide();
+            //    $('.showcard .icon').css('z-index', '1');
+            //}, 500);
+        },
+        error: function () {
+            alert('failed to update metacodes');
+        }
+    });
+}
+
+function cancelMetacodeSetSwitch() {
+    if (MetamapsModel.selectedMetacodeSet != "metacodeset-custom") {
+        $('.customMetacodeList li').addClass('toggledOff');
+        MetamapsModel.selectedMetacodes = [];
+        MetamapsModel.selectedMetacodeNames = [];
+        MetamapsModel.newSelectedMetacodes = [];
+        MetamapsModel.newSelectedMetacodeNames = [];
+    }
+    else { // custom set is selected
+        // reset it to the current actual selection
+        $('.customMetacodeList li').addClass('toggledOff');
+        for (var i = 0; i < MetamapsModel.selectedMetacodes.length; i++) {
+            $('#' + MetamapsModel.selectedMetacodes[i]).removeClass('toggledOff');
+        };
+        // uses .slice to avoid setting the two arrays to the same actual array
+        MetamapsModel.newSelectedMetacodeNames = MetamapsModel.selectedMetacodeNames.slice(0);
+        MetamapsModel.newSelectedMetacodes = MetamapsModel.selectedMetacodes.slice(0);
+    }
+    $('#metacodeSwitchTabs').tabs("select", MetamapsModel.selectedMetacodeSetIndex);
+}
+
 function MconsoleReset() {
 
     var tX = Mconsole.canvas.translateOffsetX;
@@ -843,7 +339,6 @@ function openNodeShowcard(node) {
     $('.showcard').fadeIn('fast');
     var s = $('.showcard').find('.scroll');
     s.height(s.height()).mCustomScrollbar();
-    //node.setData('dim', 1, 'current');
     MetamapsModel.showcardInUse = node.id;
 }
 
@@ -853,6 +348,13 @@ function openLightbox(which) {
 
     $('#lightbox_overlay').show();
     $('#lightbox_main').css('margin-top', '-' + ($('#lightbox_main').height() / 2) + 'px');
+    
+    //if (MetamapsModel.selectedMetacodeSet == "metacodeset-custom" && !MetamapsModel.metacodeScrollerInit) {
+    if (!MetamapsModel.metacodeScrollerInit) {
+        //$('.customMetacodeList').mCustomScrollbar();
+        $('.customMetacodeList, .metacodeSetList').mCustomScrollbar({advanced: { updateOnContentResize: true }});
+        MetamapsModel.metacodeScrollerInit = true;
+    }
 }
 
 function cancelMapCreate(id) {
diff --git a/app/assets/javascripts/jquery/AllMappingPages.js b/app/assets/javascripts/jquery/AllMappingPages.js
new file mode 100644
index 00000000..c8f99afc
--- /dev/null
+++ b/app/assets/javascripts/jquery/AllMappingPages.js
@@ -0,0 +1,93 @@
+/* AllMappingPages means:
+1. being logged in or logged out and,
+2. either 
+    a. being on a Map page, or
+    b. being on a Topic page
+    
+
+*/
+
+$(document).ready(function () {
+    
+    // initialize topic card draggability and resizability
+    $('.showcard').draggable({
+        handle: ".metacodeImage"
+    });
+    $('#showcard').resizable({
+        maxHeight: 500,
+        maxWidth: 500,
+        minHeight: 320,
+        minWidth: 226,
+        resize: function (event, ui) {
+            var p = $('#showcard').find('.scroll');
+            p.height(p.height()).mCustomScrollbar('update');
+        }
+    }).css({
+        display: 'none',
+        top: '300px',
+        left: '100px'
+    });
+    
+    function bindFilterHover() {
+
+        var filterIsOpen = false;
+
+        // controls the sliding hover of the bottom left menu
+        var sliding1 = false;
+        var lT;
+
+        var closeFilter = function () {
+            lT = setTimeout(function () {
+                if (!sliding1) {
+                    sliding1 = true;
+                    $('.sidebarFilterIcon').css('background-color', '#0F1519');
+                    $('.sidebarFilterBox').fadeOut(200, function () {
+                        sliding1 = false;
+                        filterIsOpen = false;
+                    });
+                }
+            }, 300);
+        }
+
+        var openFilter = function () {
+                clearTimeout(lT);
+                if (!sliding1) {
+                    sliding1 = true;
+
+                    // hide the other two
+                    $('.sidebarAccountBox').hide();
+                    $('.sidebarWandBox').hide();
+                    $('.sidebarAccountIcon').css('background-color', '#0F1519');
+                    $('.sidebarWandIcon').css('background-color', '#0F1519');
+
+                    $('.sidebarFilterIcon').css('background-color', '#000');
+                    $('.sidebarFilterBox').fadeIn(200, function () {
+                        sliding1 = false;
+                        filterIsOpen = true;
+                    });
+                }
+            }
+            // bind the hover events
+        $(".sidebarFilter").hover(openFilter, closeFilter);
+
+    } // end bindFilterHover
+    
+    bindFilterHover();
+    
+    // initialize scroll bar for filter by metacode, then hide it and position it correctly again
+    $("#filter_by_metacode").mCustomScrollbar({
+        advanced: {
+            updateOnContentResize: true
+        }
+    });
+    $('.sidebarFilterBox').hide().css({
+        position: 'absolute',
+        top: '35px',
+        right: '-36px'
+    });
+    
+    // prevent right clicks on the main canvas, so as to not get in the way of our right clicks
+    $('#center-container').bind('contextmenu', function (e) {
+        return false;
+    });
+}); // end document.ready
\ No newline at end of file
diff --git a/app/assets/javascripts/jquery/AuthAllMappingPages.js b/app/assets/javascripts/jquery/AuthAllMappingPages.js
new file mode 100644
index 00000000..a3e23df2
--- /dev/null
+++ b/app/assets/javascripts/jquery/AuthAllMappingPages.js
@@ -0,0 +1,19 @@
+/* AuthAllMappingPages means:
+1. being logged in and,
+2. either 
+    a. being on a Map page, or
+    b. being on a Topic page
+    
+
+*/
+
+$(document).ready(function () {
+    
+    $('.sidebarFork').click(function () {
+        saveToMap();
+    });
+    
+    // initialize best_in_place editing
+    $('.authenticated div.permission.canEdit .best_in_place').best_in_place();
+    
+}); // end document.ready
\ No newline at end of file
diff --git a/app/assets/javascripts/jquery/AuthCanEditMapPage.js b/app/assets/javascripts/jquery/AuthCanEditMapPage.js
new file mode 100644
index 00000000..79cf4760
--- /dev/null
+++ b/app/assets/javascripts/jquery/AuthCanEditMapPage.js
@@ -0,0 +1,32 @@
+/* authCanEditMapPage means:
+1. being logged in and,
+2. being on a Map page and having edit permissions (your map, or commons map)
+    
+
+*/
+
+$(document).ready(function () {
+
+    // because anyone who can edit the map can collaborate on it in realtime
+    $(".sidebarCollaborateIcon").click(function (event) {
+        if (!goRealtime) {
+            $('.sidebarCollaborate .tip').html('Stop Realtime Collaboration');
+        } else {
+            $('.sidebarCollaborate .tip').html('Start Realtime Collaboration');
+        }
+        goRealtime = !goRealtime;
+        $(".sidebarCollaborateIcon").toggleClass("blue");
+    });
+    
+    // because anyone who can edit the map can save a new map layout
+    $('.sidebarSave').click(function () {
+        saveLayoutAll();
+    });
+    
+    // because anyone who can edit the map can change the map title
+    $('.mapInfoName .best_in_place_name').bind("ajax:success", function () {
+        var name = $(this).html();
+        $('.mapName').html(name);
+    });
+    
+}); // end document.ready
\ No newline at end of file
diff --git a/app/assets/javascripts/jquery/AuthCanEditMappingPages.js b/app/assets/javascripts/jquery/AuthCanEditMappingPages.js
new file mode 100644
index 00000000..46c4c6c4
--- /dev/null
+++ b/app/assets/javascripts/jquery/AuthCanEditMappingPages.js
@@ -0,0 +1,156 @@
+/* authCanEditMappingPages means:
+1. being logged in and,
+2. either 
+    a. being on a Map page and having edit permissions (your map, or commons map) or,
+    b. being on a Topic page
+    
+this code adds required jQuery for creating, or pulling in, topics and synapses
+*/
+
+$(document).ready(function () {
+
+    //////
+    //////
+    //// TOPIC CREATION
+
+    // initialize the autocomplete results for the metacode spinner
+    $('#topic_name').typeahead([
+        {
+            name: 'topic_autocomplete',
+            limit: 8,
+            template: $('#topicAutocompleteTemplate').html(),
+            remote: {
+                url: '/topics/autocomplete_topic?term=%QUERY'
+            },
+            engine: Hogan
+          }
+  ]);
+
+    // tell the autocomplete to submit the form with the topic you clicked on if you pick from the autocomplete
+    $('#topic_name').bind('typeahead:selected', function (event, datum, dataset) {
+        $('#topic_grabTopic').val(datum.id);
+        event.preventDefault();
+        event.stopPropagation();
+    });
+
+    // bind keyboard handlers
+    $('#topic_name').bind('keyup', function (e) {
+        switch (e.which) {
+        case 13:
+            $('.new_topic').submit();
+            break;
+        default:
+            break;
+        }
+    });
+
+    // initialize metacode spinner and then hide it
+    $("#metacodeImg").CloudCarousel({
+        titleBox: $('#metacodeImgTitle'),
+        yRadius: 40,
+        xPos: 150,
+        yPos: 40,
+        speed: 0.3,
+        mouseWheel: true,
+        bringToFront: true
+    });
+    $('.new_topic').hide();
+
+
+    //////
+    //////
+    //// SYNAPSE CREATION
+
+    // initialize the autocomplete results for synapse creation
+    $('#synapse_desc').typeahead([
+        {
+            name: 'synapse_autocomplete',
+            template: "{{label}}",
+            remote: {
+                url: '/search/synapses?term=%QUERY'
+            },
+            engine: Hogan
+              },
+        {
+            name: 'existing_synapses',
+            limit: 50,
+            template: $('#synapseAutocompleteTemplate').html(),
+            remote: {
+                url: '/search/synapses',
+                replace: function () {
+                    var q = '/search/synapses?topic1id=' + $('#synapse_topic1id').val() + '&topic2id=' + $('#synapse_topic2id').val();
+                    return q;
+                }
+            },
+            engine: Hogan,
+            header: "<h3>Existing Synapses</h3>"
+              },
+  ]);
+    // tell the autocomplete to submit the form with the topic you clicked on if you pick from the autocomplete
+    $('#synapse_desc').bind('typeahead:selected', function (event, datum, dataset) {
+        if (datum.id) { // if they clicked on an existing synapse get it
+            $('#synapse_grabSynapse').val(datum.id);
+        }
+        event.preventDefault();
+        event.stopPropagation();
+    });
+    // bind keyboard handlers
+    $('#synapse_desc').bind('keyup', function (e) {
+        switch (e.which) {
+        case 13:
+            $('.new_synapse').submit();
+            break;
+        default:
+            break;
+        }
+    });
+
+
+    //////
+    //////
+    //// TOPIC AND SYNAPSE CREATION
+
+    // when either form submits, don't leave the page
+    $('.new_topic, .new_synapse').bind('submit', function (event, data) {
+        event.preventDefault();
+    });
+
+    // disable right click events on the new topic and new synapse input fields
+    $('#new_topic, #new_synapse').bind('contextmenu', function (e) {
+        return false;
+    });
+
+    //////
+    //////
+    //// SWITCHING METACODE SETS
+
+    $('#metacodeSwitchTabs').tabs({
+        selected: MetamapsModel.selectedMetacodeSetIndex
+    }).addClass("ui-tabs-vertical ui-helper-clearfix");
+    $("#metacodeSwitchTabs .ui-tabs-nav li").removeClass("ui-corner-top").addClass("ui-corner-left");
+    $("#metacodeSwitchTabs .ui-tabs-nav li a").click(function(){
+        // recenter the lightbox when you switch tabs
+        $('#lightbox_main').css('margin-top', '-' + ($('#lightbox_main').height() / 2) + 'px');
+    });
+    /*$("#metacodeSetCustom").click(function () {
+        if (!MetamapsModel.metacodeScrollerInit) {
+            $('.customMetacodeList, .metacodeSetList').mCustomScrollbar({advanced: { updateOnContentResize: true }});
+            MetamapsModel.metacodeScrollerInit = true;
+        }
+    });*/
+    $('.customMetacodeList li').click(function () {
+        if ($(this).attr('class') != 'toggledOff') {
+            $(this).addClass('toggledOff');
+            var value_to_remove = $(this).attr('id');
+            var name_to_remove = $(this).attr('data-name');
+            MetamapsModel.newSelectedMetacodes.splice(MetamapsModel.newSelectedMetacodes.indexOf(value_to_remove), 1);
+            MetamapsModel.newSelectedMetacodeNames.splice(MetamapsModel.newSelectedMetacodeNames.indexOf(name_to_remove), 1);
+        } else if ($(this).attr('class') == 'toggledOff') {
+            $(this).removeClass('toggledOff');
+            MetamapsModel.newSelectedMetacodes.push($(this).attr('id'));
+            MetamapsModel.newSelectedMetacodeNames.push($(this).attr('data-name'));
+        }
+    });
+
+
+}); // end document.ready
\ No newline at end of file
diff --git a/app/assets/javascripts/jquery/AuthEveryPage.js b/app/assets/javascripts/jquery/AuthEveryPage.js
new file mode 100644
index 00000000..ef08d5d5
--- /dev/null
+++ b/app/assets/javascripts/jquery/AuthEveryPage.js
@@ -0,0 +1,16 @@
+/* authEveryPage means:
+1. being logged in and on any page on metamaps
+    
+this code adds required jQuery for the create map lightBox that can be used from any page on metamaps
+*/
+
+$(document).ready(function () {
+    
+    // bind permission changer events on the createMap form
+    $('.permIcon').click(function () {
+        $(this).siblings('#map_permission').val($(this).attr('data-permission'));
+        $(this).siblings('.permIcon').find('.mapPermIcon').removeClass('selected');
+        $(this).find('.mapPermIcon').addClass('selected');
+    });
+    
+}); // end document.ready
\ No newline at end of file
diff --git a/app/assets/javascripts/jquery/AuthMapCreatorMapPage.js b/app/assets/javascripts/jquery/AuthMapCreatorMapPage.js
new file mode 100644
index 00000000..e9db036d
--- /dev/null
+++ b/app/assets/javascripts/jquery/AuthMapCreatorMapPage.js
@@ -0,0 +1,36 @@
+/* AuthMapCreatorMapPage means:
+1. being on a Map page
+2. being the original creator of that map
+    
+
+*/
+
+$(document).ready(function () {
+
+    // ability to change permission of the map
+    var selectingPermission = false;
+    $('.yourMap .mapPermission').click(function () {
+        if (!selectingPermission) {
+            selectingPermission = true;
+            $(this).addClass('minimize'); // this line flips the drop down arrow to a pull up arrow
+            if ($(this).hasClass('commons')) {
+                $(this).append('<ul class="permissionSelect"><li class="public"></li><li class="private"></li></ul>');
+            } else if ($(this).hasClass('public')) {
+                $(this).append('<ul class="permissionSelect"><li class="commons"></li><li class="private"></li></ul>');
+            } else if ($(this).hasClass('private')) {
+                $(this).append('<ul class="permissionSelect"><li class="commons"></li><li class="public"></li></ul>');
+            }
+            $('.mapPermission .permissionSelect li').click(function (event) {
+                selectingPermission = false;
+                var permission = $(this).attr('class');
+                updateMapPermission(mapid, permission);
+                event.stopPropagation();
+            });
+        } else {
+            selectingPermission = false;
+            $(this).removeClass('minimize'); // this line flips the pull up arrow to a drop down arrow
+            $('.mapPermission .permissionSelect').remove();
+        }
+    }); 
+    
+}); // end document.ready
\ No newline at end of file
diff --git a/app/assets/javascripts/jquery/EveryPage.js b/app/assets/javascripts/jquery/EveryPage.js
new file mode 100644
index 00000000..ae101ae1
--- /dev/null
+++ b/app/assets/javascripts/jquery/EveryPage.js
@@ -0,0 +1,404 @@
+// everything in this document.ready function is here because it is needed on every single page on metamaps
+$(document).ready(function () {
+
+    function bindMainMenuHover() {
+
+        var menuIsOpen = false
+
+        // controls the sliding hover of the bottom left menu
+        var sliding1 = false;
+        var lT;
+
+        var closeMenu = function () {
+            lT = setTimeout(function () {
+                if (!sliding1) {
+                    sliding1 = true;
+                    // $('.footer .menu').animate({
+                    // height: '0px'
+                    // }, 300, function() {
+                    // sliding1 = false;
+                    // menuIsOpen = false;
+                    // });
+                    $('.footer').css('border-top-right-radius', '5px');
+                    $('.logo').animate({
+                        'background-position-x': '-10px'
+                    }, 200);
+                    $('.footer .menu').fadeOut(200, function () {
+                        sliding1 = false;
+                        menuIsOpen = false;
+                    });
+                }
+            }, 500);
+        }
+
+        var openMenu = function () {
+                clearTimeout(lT);
+                if (!sliding1) {
+                    sliding1 = true;
+
+                    // $('.footer .menu').animate({
+                    // height: listLength + 'px'
+                    // }, 300, function() {
+                    // sliding1 = false;
+                    // });
+                    $('.footer').css('border-top-right-radius', '0');
+                    $('.logo').animate({
+                        'background-position-x': '-7px'
+                    }, 200);
+                    $('.footer .menu').fadeIn(200, function () {
+                        sliding1 = false;
+                    });
+                }
+            }
+            // bind the hover events
+        $(".logo").hover(openMenu, closeMenu);
+
+        // when on touch screen, make touching on the logo do what hovering does on desktop
+        $("#mainTitle a").bind('touchend', function (evt) {
+            if (!menuIsOpen) {
+                openMenu();
+                evt.preventDefault();
+                evt.stopPropagation();
+            }
+        });
+    }
+
+    function bindSearchHover() {
+
+        var searchIsOpen = false
+
+        // controls the sliding hover of the search
+        var sliding1 = false;
+        var lT;
+
+        var openSearch = function () {
+            clearTimeout(lT);
+            if (!sliding1 && !searchIsOpen) {
+                hideCards();
+                sliding1 = true;
+                $('.sidebarSearch .twitter-typeahead, .sidebarSearch .tt-hint, .sidebarSearchField').animate({
+                    width: '200px'
+                }, 200, function () {
+                    $('.sidebarSearchField, .sidebarSearch .tt-hint').css({
+                        padding: '5px 10px',
+                        width: '180px'
+                    });
+                    $('.sidebarSearchField').focus();
+                    sliding1 = false
+                    searchIsOpen = true;
+                });
+            }
+        }
+        var closeSearch = function (closeAfter) {
+            lT = setTimeout(function () {
+                if (!sliding1 && searchIsOpen && $('.sidebarSearchField').val() == '') {
+                    sliding1 = true;
+                    $('.sidebarSearchField, .sidebarSearch .tt-hint').css({
+                        padding: '5px 0',
+                        width: '200px'
+                    });
+                    $('.sidebarSearch .twitter-typeahead, .sidebarSearch .tt-hint, .sidebarSearchField').animate({
+                        width: '0'
+                    }, 200, function () {
+                        $('.sidebarSearchField').typeahead('setQuery', '');
+                        sliding1 = false;
+                        searchIsOpen = false;
+                    });
+                }
+            }, closeAfter);
+        }
+
+        // bind the hover events
+        $(".sidebarSearch").hover(function () {
+            openSearch()
+        }, function () {
+            closeSearch(800)
+        });
+
+        $('.sidebarSearchIcon').click(function (e) {
+            $('.sidebarSearchField').focus();
+        });
+        $('.sidebarSearch').click(function (e) {
+            e.stopPropagation();
+        });
+        $('body').click(function (e) {
+            closeSearch(0);
+        });
+
+        // if the search is closed and user hits SHIFT+S
+        $('body').bind('keydown', function (e) {
+            switch (e.which) {
+            case 191:
+                if (e.ctrlKey && !searchIsOpen) {
+                    openSearch();
+                }
+                break;
+            default:
+                break; //console.log(e.which);
+            }
+        });
+
+        // initialize the search box autocomplete results
+        var mapheader = userid ? '<h3 class="search-header">Maps</h3><input type="checkbox" class="limitToMe" id="limitMapsToMe"></input><label for="limitMapsToMe" class="limitToMeLabel">added by me</label><div class="minimizeResults minimizeMapResults"></div><div class="clearfloat"></div>' : '<h3 class="search-header">Maps</h3><div class="minimizeResults minimizeMapResults"></div><div class="clearfloat"></div>';
+        var topicheader = userid ? '<h3 class="search-header">Topics</h3><input type="checkbox" class="limitToMe" id="limitTopicsToMe"></input><label for="limitTopicsToMe" class="limitToMeLabel">added by me</label><div class="minimizeResults minimizeTopicResults"></div><div class="clearfloat"></div>' : '<h3 class="search-header">Topics</h3><div class="minimizeResults minimizeTopicResults"></div><div class="clearfloat"></div>';
+        $('.sidebarSearchField').typeahead([
+            {
+                name: 'topics',
+                dupChecker: function (datum1, datum2) {
+                    return false;
+                },
+                template: $('#topicSearchTemplate').html(),
+                remote: {
+                    url: '/search/topics?term=%QUERY',
+                    replace: function () {
+                        var q = '/search/topics?term=' + $('.sidebarSearchField').val();
+                        if ($("#limitTopicsToMe").is(':checked')) {
+                            q += "&user=" + userid.toString();
+                        }
+                        return q;
+                    },
+                    filter: function (dataset) {
+                        if (dataset.length == 0) {
+                            dataset.push({
+                                value: "No results",
+                                label: "No results",
+                                typeImageURL: "/assets/icons/wildcard.png",
+                                rtype: "noresult"
+                            });
+                        }
+                        return dataset;
+                    }
+                },
+                engine: Hogan,
+                header: topicheader
+              },
+            {
+                name: 'maps',
+                dupChecker: function (datum1, datum2) {
+                    return false;
+                },
+                template: $('#mapSearchTemplate').html(),
+                remote: {
+                    url: '/search/maps?term=%QUERY',
+                    replace: function () {
+                        var q = '/search/maps?term=' + $('.sidebarSearchField').val();
+                        if ($("#limitMapsToMe").is(':checked')) {
+                            q += "&user=" + userid.toString();
+                        }
+                        return q;
+                    },
+                    filter: function (dataset) {
+                        if (dataset.length == 0) {
+                            dataset.push({
+                                value: "No results",
+                                label: "No results",
+                                rtype: "noresult"
+                            });
+                        }
+                        return dataset;
+                    }
+                },
+                engine: Hogan,
+                header: mapheader
+              },
+            {
+                name: 'mappers',
+                dupChecker: function (datum1, datum2) {
+                    return false;
+                },
+                template: $('#mapperSearchTemplate').html(),
+                remote: {
+                    url: '/search/mappers?term=%QUERY',
+                    filter: function (dataset) {
+                        if (dataset.length == 0) {
+                            dataset.push({
+                                value: "No results",
+                                label: "No results",
+                                rtype: "noresult"
+                            });
+                        }
+                        return dataset;
+                    }
+                },
+                engine: Hogan,
+                header: '<h3 class="search-header">Mappers</h3><div class="minimizeResults minimizeMapperResults"></div><div class="clearfloat"></div>'
+              }
+      ]);
+        // tell the autocomplete to launch a new tab with the topic, map, or mapper you clicked on
+        $('.sidebarSearchField').bind('typeahead:selected', function (event, datum, dataset) {
+            console.log(event);
+            if (datum.rtype != "noresult") {
+                var win;
+                if (dataset == "topics") {
+                    win = window.open('/topics/' + datum.id, '_blank');
+                } else if (dataset == "maps") {
+                    win = window.open('/maps/' + datum.id, '_blank');
+                } else if (dataset == "mappers") {
+                    win = window.open('/maps/mappers/' + datum.id, '_blank');
+                }
+                win.focus();
+                closeSearch(0);
+            }
+        });
+
+
+        var checkboxChangeInit = false,
+            minimizeInit = false;
+
+        $('.sidebarSearchField').bind('keyup', function () {
+
+            // when the user selects 'added by me' resend the query with their userid attached
+            if (!checkboxChangeInit) {
+                $('.limitToMe').bind("change", function (e) {
+                    // set the value of the search equal to itself to retrigger the autocomplete event
+                    searchIsOpen = false;
+                    $('.sidebarSearchField').typeahead('setQuery', $('.sidebarSearchField').val());
+                    setTimeout(function () {
+                        searchIsOpen = true;
+                    }, 2000);
+                });
+                checkboxChangeInit = true;
+            }
+
+            // when the user clicks minimize section, hide the results for that section
+            if (!minimizeInit) {
+                $('.minimizeMapperResults').click(function (e) {
+                    var s = $('.tt-dataset-mappers .tt-suggestions');
+                    console.log(s.css('height'));
+                    if (s.css('height') == '0px') {
+                        $('.tt-dataset-mappers .tt-suggestions').css({
+                            'height': 'auto',
+                            'overflow': 'visible'
+                        });
+                        $(this).removeClass('maximizeResults').addClass('minimizeResults');
+                    } else {
+                        $('.tt-dataset-mappers .tt-suggestions').css({
+                            'height': '0',
+                            'overflow': 'hidden'
+                        });
+                        $(this).removeClass('minimizeResults').addClass('maximizeResults');
+                    }
+                });
+                $('.minimizeTopicResults').click(function (e) {
+                    var s = $('.tt-dataset-topics .tt-suggestions');
+                    console.log(s.css('height'));
+                    if (s.css('height') == '0px') {
+                        s.css({
+                            'height': 'auto',
+                            'border-top': 'none',
+                            'overflow': 'visible'
+                        });
+                        $(this).removeClass('maximizeResults').addClass('minimizeResults');
+                    } else {
+                        s.css({
+                            'height': '0',
+                            'border-top': '1px solid rgb(56, 56, 56)',
+                            'overflow': 'hidden'
+                        });
+                        $(this).removeClass('minimizeResults').addClass('maximizeResults');
+                    }
+                });
+                $('.minimizeMapResults').click(function (e) {
+                    var s = $('.tt-dataset-maps .tt-suggestions');
+                    console.log(s.css('height'));
+                    if (s.css('height') == '0px') {
+                        s.css({
+                            'height': 'auto',
+                            'border-top': 'none',
+                            'overflow': 'visible'
+                        });
+                        $(this).removeClass('maximizeResults').addClass('minimizeResults');
+                    } else {
+                        s.css({
+                            'height': '0',
+                            'border-top': '1px solid rgb(56, 56, 56)',
+                            'overflow': 'hidden'
+                        });
+                        $(this).removeClass('minimizeResults').addClass('maximizeResults');
+                    }
+                });
+                minimizeInit = true;
+            }
+        });
+
+        //
+
+        $('.sidebarSearch button.addToMap').click(function (event) {
+            event.stopPropagation();
+        });
+    } // end bindSearchHover
+
+    function bindAccountHover() {
+
+        var accountIsOpen = false
+
+        // controls the sliding hover of the bottom left menu
+        var sliding1 = false;
+        var lT;
+
+        var closeAccount = function () {
+            lT = setTimeout(function () {
+                if (!sliding1) {
+                    sliding1 = true;
+                    $('.sidebarAccountIcon').css('background-color', '#0F1519');
+                    $('.sidebarAccountBox').fadeOut(200, function () {
+                        sliding1 = false;
+                        accountIsOpen = false;
+                    });
+                }
+            }, 300);
+        }
+
+        var openAccount = function () {
+                clearTimeout(lT);
+                if (!sliding1) {
+                    sliding1 = true;
+
+                    // hide the other two
+                    $('.sidebarFilterBox').hide();
+                    $('.sidebarWandBox').hide();
+                    $('.sidebarFilterIcon').css('background-color', '#0F1519');
+                    $('.sidebarWandIcon').css('background-color', '#0F1519');
+
+                    $('.sidebarAccountIcon').css('background-color', '#000');
+                    $('.sidebarAccountBox').fadeIn(200, function () {
+                        sliding1 = false;
+                        accountIsOpen = true;
+                    });
+                }
+            }
+            // bind the hover events
+        $(".sidebarAccount").hover(openAccount, closeAccount);
+    } // end bindAccountHover
+
+    // bind hover events  
+    bindMainMenuHover();
+    bindSearchHover();
+    bindAccountHover();
+
+    // hide notices after 10 seconds
+    $('.notice.metamaps').delay(10000).fadeOut('fast');
+    $('.alert.metamaps').delay(10000).fadeOut('fast');
+
+    //bind lightbox clicks
+    $('.openLightbox').click(function (event) {
+        openLightbox($(this).attr('data-open'));
+        event.preventDefault();
+        return false;
+    });
+
+    // bind keyboard handlers
+    $('body').bind('keyup', function (e) {
+        switch (e.which) {
+        case 13:
+            enterKeyHandler(e);
+            break;
+        case 27:
+            escKeyHandler();
+            break;
+        default:
+            break; //console.log(e.which);
+        }
+    });
+
+}); // end document.ready
\ No newline at end of file
diff --git a/app/assets/javascripts/jquery/MapPage.js b/app/assets/javascripts/jquery/MapPage.js
new file mode 100644
index 00000000..2a9336d0
--- /dev/null
+++ b/app/assets/javascripts/jquery/MapPage.js
@@ -0,0 +1,48 @@
+/* MapPage means:
+1. being on a Map page
+    
+
+*/
+
+$(document).ready(function () {
+
+    function bindInfoHover() {
+
+        var infoIsOpen = false;
+
+        // controls the sliding hover of the bottom left menu
+        var sliding1 = false;
+        var lT;
+
+        var closeInfo = function () {
+            lT = setTimeout(function () {
+                if (!sliding1) {
+                    sliding1 = true;
+                    $('.mapInfoBox').fadeOut(200, function () {
+                        sliding1 = false;
+                        infoIsOpen = false;
+                    });
+                }
+            }, 300);
+        }
+
+        var openInfo = function (event) {
+                clearTimeout(lT);
+                if (!sliding1 && event.target.className != "openCheatsheet openLightbox") {
+                    sliding1 = true;
+
+                    $('.mapInfoBox').fadeIn(200, function () {
+                        sliding1 = false;
+                        infoIsOpen = true;
+                    });
+                }
+            }
+            // bind the hover events
+        $("div.index").hover(openInfo, closeInfo);
+
+
+    } // end bindInfoHover
+
+    bindInfoHover();
+    
+}); // end document.ready
\ No newline at end of file
diff --git a/app/assets/javascripts/realtime/realtime.js b/app/assets/javascripts/realtime/realtime.js
index 97bc9850..20db2265 100644
--- a/app/assets/javascripts/realtime/realtime.js
+++ b/app/assets/javascripts/realtime/realtime.js
@@ -1,75 +1,166 @@
 window.realtime = {};
 
-window.realtime.addTopicToMap = function(topic) {
-  var newPos, tempForT;
-  Mconsole.graph.addNode(topic);
-  tempForT = Mconsole.graph.getNode(topic.id);
-  tempForT.setData('dim', 1, 'start');
-  tempForT.setData('dim', 25, 'end');
-  newPos = new $jit.Complex();
-  newPos.x = tempForT.data.$xloc;
-  newPos.y = tempForT.data.$yloc;
-  tempForT.setPos(newPos, 'start');
-  tempForT.setPos(newPos, 'current');
-  tempForT.setPos(newPos, 'end');
-  Mconsole.fx.plotNode(tempForT, Mconsole.canvas);
-  return Mconsole.labels.plotLabel(Mconsole.canvas, tempForT, Mconsole.config);
+window.realtime.notifyTimeOut = null;
+window.realtime.notifyUser = function (message) {
+    if ($('.notice.metamaps').length == 0) {
+        $('body').prepend('<div class="notice metamaps" />');
+    }
+    $('.notice.metamaps').hide().html(message).fadeIn('fast');
+    
+    clearTimeout(window.realtime.notifyTimeOut);
+    window.realtime.notifyTimeOut = setTimeout(function () {
+        $('.notice.metamaps').fadeOut('fast');
+    }, 8000);
 };
 
-window.realtime.updateTopicOnMap = function(topic) {
-  var newPos, tempForT;
-  tempForT = Mconsole.graph.getNode(topic.id);
-  tempForT.data = topic.data;
-  tempForT.name = topic.name;
-  if (MetamapsModel.showcardInUse === topic.id) {
-    populateShowCard(tempForT);
-  }
-  newPos = new $jit.Complex();
-  newPos.x = tempForT.data.$xloc;
-  newPos.y = tempForT.data.$yloc;
-  tempForT.setPos(newPos, 'start');
-  tempForT.setPos(newPos, 'current');
-  tempForT.setPos(newPos, 'end');
-  return Mconsole.fx.animate({
-    modes: ['linear', 'node-property:dim', 'edge-property:lineWidth'],
-    transition: $jit.Trans.Quad.easeInOut,
-    duration: 500
-  });
+window.realtime.setupSocket = function () {
+    var socket = window.realtime.socket;
+
+    socket.emit('newMapperNotify', {
+        userid: userid,
+        username: username,
+        mapid: mapid
+    });
+
+    // if you're the 'new guy' update your list with who's already online
+    socket.on(userid + '-' + mapid + '-UpdateMapperList', function (data) {
+        // data.userid
+        // data.username
+        //alert(data.username + ' is already online');
+    });
+
+    // receive word that there's a new mapper on the map
+    socket.on('maps-' + mapid + '-newmapper', function (data) {
+        // data.userid
+        // data.username
+
+        window.realtime.notifyUser(data.username + ' just came online');
+
+        // send this new mapper back your details, and the awareness that you're online
+        var update = {
+            userToNotify: data.userid,
+            username: username,
+            userid: userid,
+            mapid: mapid
+        };
+        socket.emit('updateNewMapperList', update);
+    });
+
+    socket.on('maps-' + mapid + '-lostmapper', function (data) {
+        // data.userid
+        // data.username
+
+        window.realtime.notifyUser(data.username + ' just went offline');
+    });
+
+    socket.on('maps-' + mapid, function (data) {
+
+
+
+        //as long as you weren't the origin of the changes, update your map
+        if (data.origin != userid && goRealtime) {
+            if (data.resource == 'Topic') {
+                topic = $.parseJSON(data.obj);
+
+                if (data.action == 'create') {
+                    window.realtime.addTopicToMap(topic);
+                } else if (data.action == 'update' && Mconsole.graph.getNode(topic.id) != 'undefined') {
+                    window.realtime.updateTopicOnMap(topic);
+                } else if (data.action == 'destroy' && Mconsole.graph.getNode(topic.id) != 'undefined') {
+                    hideNode(topic.id)
+                }
+
+                return;
+            } else if (data.resource == 'Synapse') {
+                synapse = $.parseJSON(data.obj);
+
+                if (data.action == 'create') {
+                    window.realtime.addSynapseToMap(synapse);
+                } else if (data.action == 'update' &&
+                    Mconsole.graph.getAdjacence(synapse.data.$direction['0'], synapse.data.$direction['1']) != 'undefined') {
+                    window.realtime.updateSynapseOnMap(synapse);
+                } else if (data.action == 'destroy' &&
+                    Mconsole.graph.getAdjacence(synapse.data.$direction['0'], synapse.data.$direction['1']) != 'undefined') {
+                    var edge = Mconsole.graph.getAdjacence(synapse.data.$direction['0'], synapse.data.$direction['1']);
+                    hideEdge(edge);
+                }
+
+                return;
+            }
+        }
+    });
 };
 
-window.realtime.addSynapseToMap = function(synapse) {
-  var Node1, Node2, tempForS;
-  Node1 = Mconsole.graph.getNode(synapse.data.$direction[0]);
-  Node2 = Mconsole.graph.getNode(synapse.data.$direction[1]);
-  Mconsole.graph.addAdjacence(Node1, Node2, {});
-  tempForS = Mconsole.graph.getAdjacence(Node1.id, Node2.id);
-  tempForS.setDataset('start', {
-    lineWidth: 0.4
-  });
-  tempForS.setDataset('end', {
-    lineWidth: 2
-  });
-  tempForS.data = synapse.data;
-  Mconsole.fx.plotLine(tempForS, Mconsole.canvas);
-  return Mconsole.fx.animate({
-    modes: ['linear', 'node-property:dim', 'edge-property:lineWidth'],
-    transition: $jit.Trans.Quad.easeInOut,
-    duration: 500
-  });
+window.realtime.addTopicToMap = function (topic) {
+    var newPos, tempForT;
+    Mconsole.graph.addNode(topic);
+    tempForT = Mconsole.graph.getNode(topic.id);
+    tempForT.setData('dim', 1, 'start');
+    tempForT.setData('dim', 25, 'end');
+    newPos = new $jit.Complex();
+    newPos.x = tempForT.data.$xloc;
+    newPos.y = tempForT.data.$yloc;
+    tempForT.setPos(newPos, 'start');
+    tempForT.setPos(newPos, 'current');
+    tempForT.setPos(newPos, 'end');
+    Mconsole.fx.plotNode(tempForT, Mconsole.canvas);
+    return Mconsole.labels.plotLabel(Mconsole.canvas, tempForT, Mconsole.config);
 };
 
-window.realtime.updateSynapseOnMap = function(synapse) {
-  var k, tempForS, v, wasShowDesc, _ref;
-  tempForS = Mconsole.graph.getAdjacence(synapse.data.$direction[0], synapse.data.$direction[1]);
-  wasShowDesc = tempForS.data.$showDesc;
-  _ref = synapse.data;
-  for (k in _ref) {
-    v = _ref[k];
-    tempForS.data[k] = v;
-  }
-  tempForS.data.$showDesc = wasShowDesc;
-  if (MetamapsModel.edgecardInUse === synapse.data.$id) {
-    editEdge(tempForS, false);
-  }
-  return Mconsole.plot();
+window.realtime.updateTopicOnMap = function (topic) {
+    var newPos, tempForT;
+    tempForT = Mconsole.graph.getNode(topic.id);
+    tempForT.data = topic.data;
+    tempForT.name = topic.name;
+    if (MetamapsModel.showcardInUse === topic.id) {
+        populateShowCard(tempForT);
+    }
+    newPos = new $jit.Complex();
+    newPos.x = tempForT.data.$xloc;
+    newPos.y = tempForT.data.$yloc;
+    tempForT.setPos(newPos, 'start');
+    tempForT.setPos(newPos, 'current');
+    tempForT.setPos(newPos, 'end');
+    return Mconsole.fx.animate({
+        modes: ['linear', 'node-property:dim', 'edge-property:lineWidth'],
+        transition: $jit.Trans.Quad.easeInOut,
+        duration: 500
+    });
+};
+
+window.realtime.addSynapseToMap = function (synapse) {
+    var Node1, Node2, tempForS;
+    Node1 = Mconsole.graph.getNode(synapse.data.$direction[0]);
+    Node2 = Mconsole.graph.getNode(synapse.data.$direction[1]);
+    Mconsole.graph.addAdjacence(Node1, Node2, {});
+    tempForS = Mconsole.graph.getAdjacence(Node1.id, Node2.id);
+    tempForS.setDataset('start', {
+        lineWidth: 0.4
+    });
+    tempForS.setDataset('end', {
+        lineWidth: 2
+    });
+    tempForS.data = synapse.data;
+    Mconsole.fx.plotLine(tempForS, Mconsole.canvas);
+    return Mconsole.fx.animate({
+        modes: ['linear', 'node-property:dim', 'edge-property:lineWidth'],
+        transition: $jit.Trans.Quad.easeInOut,
+        duration: 500
+    });
+};
+
+window.realtime.updateSynapseOnMap = function (synapse) {
+    var k, tempForS, v, wasShowDesc, _ref;
+    tempForS = Mconsole.graph.getAdjacence(synapse.data.$direction[0], synapse.data.$direction[1]);
+    wasShowDesc = tempForS.data.$showDesc;
+    _ref = synapse.data;
+    for (k in _ref) {
+        v = _ref[k];
+        tempForS.data[k] = v;
+    }
+    tempForS.data.$showDesc = wasShowDesc;
+    if (MetamapsModel.edgecardInUse === synapse.data.$id) {
+        editEdge(tempForS, false);
+    }
+    return Mconsole.plot();
 };
\ No newline at end of file
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index c1e06ea4..b099ea06 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -21,2478 +21,2399 @@
 @font-face {
     font-family: 'LatoLight';
     src: url('/assets/Fonts/Lato-Lig-webfont.eot');
-    src: url('/assets/Fonts/Lato-Lig-webfont.eot?#iefix') format('embedded-opentype'),
-         url('/assets/Fonts/Lato-Lig-webfont.woff') format('woff'),
-         url('/assets/Fonts/Lato-Lig-webfont.ttf') format('truetype'),
-         url('/assets/Fonts/Lato-Lig-webfont.svg#LatoLight') format('svg');
+    src: url('/assets/Fonts/Lato-Lig-webfont.eot?#iefix') format('embedded-opentype'), url('/assets/Fonts/Lato-Lig-webfont.woff') format('woff'), url('/assets/Fonts/Lato-Lig-webfont.ttf') format('truetype'), url('/assets/Fonts/Lato-Lig-webfont.svg#LatoLight') format('svg');
     font-weight: normal;
     font-style: normal;
-
 }
-
 @font-face {
     font-family: 'LatoRegular';
     src: url('/assets/Fonts/Lato-Reg-webfont.eot');
-    src: url('/assets/Fonts/Lato-Reg-webfont.eot?#iefix') format('embedded-opentype'),
-         url('/assets/Fonts/Lato-Reg-webfont.woff') format('woff'),
-         url('/assets/Fonts/Lato-Reg-webfont.ttf') format('truetype'),
-         url('/assets/Fonts/Lato-Reg-webfont.svg#LatoRegular') format('svg');
+    src: url('/assets/Fonts/Lato-Reg-webfont.eot?#iefix') format('embedded-opentype'), url('/assets/Fonts/Lato-Reg-webfont.woff') format('woff'), url('/assets/Fonts/Lato-Reg-webfont.ttf') format('truetype'), url('/assets/Fonts/Lato-Reg-webfont.svg#LatoRegular') format('svg');
     font-weight: normal;
     font-style: normal;
-
 }
-
 @font-face {
     font-family: 'LatoItalic';
     src: url('/assets/Fonts/Lato-RegIta-webfont.eot');
-    src: url('/assets/Fonts/Lato-RegIta-webfont.eot?#iefix') format('embedded-opentype'),
-         url('/assets/Fonts/Lato-RegIta-webfont.woff') format('woff'),
-         url('/assets/Fonts/Lato-RegIta-webfont.ttf') format('truetype'),
-         url('/assets/Fonts/Lato-RegIta-webfont.svg#LatoItalic') format('svg');
+    src: url('/assets/Fonts/Lato-RegIta-webfont.eot?#iefix') format('embedded-opentype'), url('/assets/Fonts/Lato-RegIta-webfont.woff') format('woff'), url('/assets/Fonts/Lato-RegIta-webfont.ttf') format('truetype'), url('/assets/Fonts/Lato-RegIta-webfont.svg#LatoItalic') format('svg');
     font-weight: normal;
     font-style: normal;
-
 }
-
 @font-face {
     font-family: 'LatoBold';
     src: url('/assets/Fonts/Lato-Bol-webfont.eot');
-    src: url('/assets/Fonts/Lato-Bol-webfont.eot?#iefix') format('embedded-opentype'),
-         url('/assets/Fonts/Lato-Bol-webfont.woff') format('woff'),
-         url('/assets/Fonts/Lato-Bol-webfont.ttf') format('truetype'),
-         url('/assets/Fonts/Lato-Bol-webfont.svg#LatoBold') format('svg');
+    src: url('/assets/Fonts/Lato-Bol-webfont.eot?#iefix') format('embedded-opentype'), url('/assets/Fonts/Lato-Bol-webfont.woff') format('woff'), url('/assets/Fonts/Lato-Bol-webfont.ttf') format('truetype'), url('/assets/Fonts/Lato-Bol-webfont.svg#LatoBold') format('svg');
     font-weight: normal;
     font-style: normal;
-
 }
-
 /* clear styles */
-html, body, div, h1, h2, h3, h4, h5, h6, 
-ul, ol, dl, li, dt, dd, p, blockquote,
-pre, form, fieldset, table, th, td, legend {
-  margin: 0; 
-  padding: 0;
- }
 
+html,
+body,
+div,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+ul,
+ol,
+dl,
+li,
+dt,
+dd,
+p,
+blockquote,
+pre,
+form,
+fieldset,
+table,
+th,
+td,
+legend {
+    margin: 0;
+    padding: 0;
+}
 img {
-  border:0;
-  padding:0;
-  margin:0;
-  display:block;
-  text-indent:-9999px;
+    border: 0;
+    padding: 0;
+    margin: 0;
+    display: block;
+    text-indent: -9999px;
 }
-
-html, 
-body, 
-.main, 
-.wrapper, 
+html,
+body,
+.main,
+.wrapper,
 #container {
-  height: 100%;
-  overflow:hidden;
+    height: 100%;
+    overflow: hidden;
 }
-
 /* scrollbar override */
+
 .maps > div > div.mCS_no_scrollbar {
-  padding-right: 0px !important;
+    padding-right: 0px !important;
 }
 .mCSB_container {
-  margin-right: 15px !important;
+    margin-right: 15px !important;
 }
-
 /* forgot password fix */
+
 .forgotPassword input[type="submit"] {
-  padding: 0 5px;
-  width: auto;
+    padding: 0 5px;
+    width: auto;
 }
-
-html {
+html {} body {
+    background: url(background2-for-repeating.jpg);
+    font-family: 'LatoLight', helvetica, sans-serif;
+    color: #FFF;
 }
-
-body {
-  background: url(background2-for-repeating.jpg);
-  
-  font-family: 'LatoLight', helvetica, sans-serif;
-  color:#FFF;
+body.mapBody {} h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-weight: normal;
 }
-
-body.mapBody {
-
-}
-
-h1,h2,h3,h4,h5,h6 {
-  font-weight:normal;
-}
-
 h1 {
-  display:block;
-  text-align:left;
-  font-family: "vinyl",sans-serif;
+    display: block;
+    text-align: left;
+    font-family: "vinyl", sans-serif;
 }
-
 h2 {
-  display:block;
-  text-align:center;
-  font-family: "katarine-web",sans-serif;
-  background: url('black_bg.png');
-  font-size:24px;
-  line-height:35px;
+    display: block;
+    text-align: center;
+    font-family: "katarine-web", sans-serif;
+    background: url('black_bg.png');
+    font-size: 24px;
+    line-height: 35px;
 }
-
 a {
-  color:#69a3a4;
-  text-decoration:none;
+    color: #69a3a4;
+    text-decoration: none;
 }
-
-button.button, a.button, input[type="submit"] {
-border: none;
--webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-border: none;
-border-bottom-left-radius: 0;
-border-top-left-radius: 0;
-height: 30px;
-outline: none;
-padding: 0 0;
-width: 60px;
--webkit-box-shadow: none;
-box-shadow: none;
-background: #AEA9FD;
-vertical-align: top;
-color: black;
-margin: 0px;
-cursor: pointer;
-display: inline-block;
-font-weight: bold;
-line-height: 29px;
-min-width: 54px;
-text-align: center;
-text-decoration: none;
--webkit-border-radius: 2px;
-border-radius: 2px;
--webkit-user-select: none;
+button.button,
+a.button,
+input[type="submit"] {
+    border: none;
+    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
+    border: none;
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+    height: 30px;
+    outline: none;
+    padding: 0 0;
+    width: 60px;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    background: #AEA9FD;
+    vertical-align: top;
+    color: black;
+    margin: 0px;
+    cursor: pointer;
+    display: inline-block;
+    font-weight: bold;
+    line-height: 29px;
+    min-width: 54px;
+    text-align: center;
+    text-decoration: none;
+    -webkit-border-radius: 2px;
+    border-radius: 2px;
+    -webkit-user-select: none;
 }
- 
-button.button:hover, a.button:hover, input[type="submit"]:hover {
-  background: #B6B2FD;
+button.button:hover,
+a.button:hover,
+input[type="submit"]:hover {
+    background: #B6B2FD;
 }
-
 /*
  * Utility
  */
 
 .clearfloat {
-  clear:both;
+    clear: both;
 }
-
 .leaveSpace {
-  display:block;
-  height:50px;	
+    display: block;
+    height: 50px;
 }
-
 .hidden {
-  display: none;
+    display: none;
 }
-
 /*
  * Layout stuffs
  */
- 
-#barometer_tab {
-  display:none;
-}
 
-#saveMapLayout {
-  display:none;
+#barometer_tab {
+    display: none;
+}
+#saveMapLayout {
+    display: none;
 }
- 
 #error_explanation {
-  background: #612127;
-  padding: 30px;
-  color: #FFF;
+    background: #612127;
+    padding: 30px;
+    color: #FFF;
 }
 #error_explanation h2 {
-  display:none;
+    display: none;
 }
-
 #error_explanation ul {
-  list-style:none;
+    list-style: none;
 }
- 
 .profile {
-  height:100%;
-  margin-bottom:50px;	 
+    height: 100%;
+    margin-bottom: 50px;
 }
-
 .centeredProfile {
-  margin:0 auto;
-  display: block;
-  width: 830px;	
+    margin: 0 auto;
+    display: block;
+    width: 830px;
 }
-
 .requestInvite {
-  display:block;
-  margin:-720px auto 0;
+    display: block;
+    margin: -720px auto 0;
 }
-
-.new_session, 
+.new_session,
 .new_user {
-  display: block;
-  width: 350px;
-  position:absolute;
-  left:50%;
-  top:0;
-  margin:200px 0 0 -195px;
-  background: url('bg.png');
-  padding: 20px;
-  border-radius: 5px;
-  color: #000;
-  border:1px solid #000;
-  box-shadow: 6px 6px 8px rgba(0,0,0,0.4);
+    display: block;
+    width: 350px;
+    position: absolute;
+    left: 50%;
+    top: 0;
+    margin: 200px 0 0 -195px;
+    background: url('bg.png');
+    padding: 20px;
+    border-radius: 5px;
+    color: #000;
+    border: 1px solid #000;
+    box-shadow: 6px 6px 8px rgba(0, 0, 0, 0.4);
 }
-
-.edit_user{
-  display: block;
-  width: 225px;
-  position:absolute;
-  left:70%;
-  top:25%;
-  margin:50px 0 0 -420px;
-  padding: 20px;
-  border-radius: 15px;
-  color: #000;
-  border:2px solid #000;
+.edit_user {
+    display: block;
+    width: 225px;
+    position: absolute;
+    left: 70%;
+    top: 25%;
+    margin: 50px 0 0 -420px;
+    padding: 20px;
+    border-radius: 15px;
+    color: #000;
+    border: 2px solid #000;
 }
-
-
 #closenewtopic,
 #closenewsynapse {
-  position:absolute;
-  top: 3px;
-  right:3px;
+    position: absolute;
+    top: 3px;
+    right: 3px;
 }
-
 .anypage .new_topic {
-  /* start it off screen while it initializes the spinner, then it will be hidden with jquery */
-  top:-1000px;
-  left:-1000px;
-  display: block;
-  position: absolute;
-  width:300px;	
-  margin:-40px 0 0 -50px;
+    /* start it off screen while it initializes the spinner, then it will be hidden with jquery */
+    top: -1000px;
+    left: -1000px;
+    display: block;
+    position: absolute;
+    width: 300px;
+    margin: -40px 0 0 -50px;
 }
 .anypage .new_synapse {
-  display: none;
-  position: absolute;
+    display: none;
+    position: absolute;
 }
-
 #new_topic .twitter-typeahead {
-  position:absolute !important;
-  top:40px;
-  left:50px;
-  z-index:9999;
-  width:202px;
-  height: 37px;
-  font-family: ':atp';
+    position: absolute !important;
+    top: 40px;
+    left: 50px;
+    z-index: 9999;
+    width: 202px;
+    height: 37px;
+    font-family: ':atp';
 }
-
-.anypage #topic_name, .anypage .tt-hint {
-  width:190px;	
-background: rgba(0,0,0,0.8);
-height: 25px;
-margin: 0;
-padding: 5px 5px;
-border: 1px solid black;
-outline: none;
-font-size: 25px;
-line-height: 35px;
-color: rgba(255,255,255,0.7);
-font-family: 'LatoLight';
+.anypage #topic_name,
+.anypage .tt-hint {
+    width: 190px;
+    background: rgba(0, 0, 0, 0.8);
+    height: 25px;
+    margin: 0;
+    padding: 5px 5px;
+    border: 1px solid black;
+    outline: none;
+    font-size: 25px;
+    line-height: 35px;
+    color: rgba(255, 255, 255, 0.7);
+    font-family: 'LatoLight';
+}
+.openMetacodeSwitcher {
+    display: block;
+    height: 20px;
+    width: 20px;
+    background: #0FFF2B;
+    position: absolute;
+    z-index: 2;
+    top: 20px;
+    left: 30px;
 }
-
 #metacodeImg {
-  height:120px;	
+    height: 120px;
 }
-
 #metacodeImgTitle {
-  color:#FFF;
-  float:left;
-  width:120px;
-  text-align:center;
-  margin-left:90px;
-  font-family: 'LatoRegular';
+    color: #FFF;
+    float: left;
+    width: 120px;
+    text-align: center;
+    margin-left: 90px;
+    font-family: 'LatoRegular';
 }
-
 /* synapse autocomplete */
 
-.new_topic #topic_name, .new_topic .tt-hint {
-width: 190px;
-background: rgba(0,0,0,0.8);
-height: 25px;
-margin: 0;
-padding: 5px 5px;
-border: 1px solid black;
-outline: none;
-font-size: 18px;
-line-height: 35px;
-color: white;
-font-family: 'LatoRegular';
+.new_topic #topic_name,
+.new_topic .tt-hint {
+    width: 190px;
+    background: rgba(0, 0, 0, 0.8);
+    height: 25px;
+    margin: 0;
+    padding: 5px 5px;
+    border: 1px solid black;
+    outline: none;
+    font-size: 18px;
+    line-height: 35px;
+    color: white;
+    font-family: 'LatoRegular';
 }
-
-.new_synapse #synapse_desc, .new_synapse .tt-hint {
-width: 200px;
-background: rgba(0,0,0,0.8);
-height: 18px;
-margin: 0;
-padding: 5px 5px;
-border: 1px solid black;
-outline: none;
-font-size: 16px;
-line-height: 20px;
-color: rgba(255,255,255,0.7);
-font-family: 'LatoRegular';
+.new_synapse #synapse_desc,
+.new_synapse .tt-hint {
+    width: 200px;
+    background: rgba(0, 0, 0, 0.8);
+    height: 18px;
+    margin: 0;
+    padding: 5px 5px;
+    border: 1px solid black;
+    outline: none;
+    font-size: 16px;
+    line-height: 20px;
+    color: rgba(255, 255, 255, 0.7);
+    font-family: 'LatoRegular';
 }
-
-label, select, input, textarea {
-  display:block;
+label,
+select,
+input,
+textarea {
+    display: block;
 }
-
 label {
-  margin-top:10px;
-  margin-bottom:4px;
+    margin-top: 10px;
+    margin-bottom: 4px;
 }
-
 input[type="submit"] {
-  margin-top:5px;
+    margin-top: 5px;
 }
-
 #user_remember_me {
-  margin-top:11px;
+    margin-top: 11px;
 }
-#user_remember_me, label[for="user_remember_me"] {
-  float:left;
+#user_remember_me,
+label[for="user_remember_me"] {
+    float: left;
 }
-
 .contentarea p,
 .contentarea ul,
 .contentarea ol,
 .contentarea table {
-  font-size:14px;
-  line-height:1.55em;
-  padding:0.5em 0
+    font-size: 14px;
+    line-height: 1.55em;
+    padding: 0.5em 0
 }
- 
 .contentarea ul li {
-  padding:0.2em 0;
+    padding: 0.2em 0;
 }
-
 .contentarea ol li {
-  padding:0.2em 0;
+    padding: 0.2em 0;
 }
-
 .contentarea ul {
-  margin:0 0 0 1em;
+    margin: 0 0 0 1em;
 }
-
 .contentarea ol {
-  margin:0 0 0 1.3em;
+    margin: 0 0 0 1.3em;
 }
-
 .main {
-  /*overflow:hidden; */
+    /*overflow:hidden; */
 }
-
 #infovis-canvas {
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 }
-
 /* --- top options --*/
 
-.notice.metamaps, .alert.metamaps {
-position: absolute;
-margin: 5px 0 0 45px;
-background: #0F1519;
-padding: 10px 10px 9px 10px;
-border-radius: 5px;
-z-index: 1;
+.notice.metamaps,
+.alert.metamaps {
+    position: absolute;
+    margin: 5px 0 0 45px;
+    background: #0F1519;
+    padding: 10px 10px 9px 10px;
+    border-radius: 5px;
+    z-index: 1;
 }
-
 .headertop {
-  display:block;
-  position:fixed;
-  top:20px;
-  z-index:10;
-  border-radius:5px;
-  margin: 10px 0px 10px 10px;
-  background:#111614;
-  padding:5px 10px;
-  box-shadow: 6px 6px 8px rgba(0,0,0,0.4);
+    display: block;
+    position: fixed;
+    top: 20px;
+    z-index: 10;
+    border-radius: 5px;
+    margin: 10px 0px 10px 10px;
+    background: #111614;
+    padding: 5px 10px;
+    box-shadow: 6px 6px 8px rgba(0, 0, 0, 0.4);
 }
-
-.headertop .tab  {
-  background: url(tab.png) no-repeat 0 0;
-  position:absolute;
-  top:-11px;
-  right:-2px;
-  display:block;
-  width:45px;
-  height:15px;
-  cursor:move;
+.headertop .tab {
+    background: url(tab.png) no-repeat 0 0;
+    position: absolute;
+    top: -11px;
+    right: -2px;
+    display: block;
+    width: 45px;
+    height: 15px;
+    cursor: move;
 }
-
-.headertop button, .headertop input {
-  height: 30px;
-  background: none;
-  color: #717474;
-  font-family: 'LatoLight';
-  font-size: 17px;
-  border: none;
-  border-right:1px solid #717474;
-  cursor: pointer;	
-  margin:3px 0;
-  clear:both;
-  float:right;
+.headertop button,
+.headertop input {
+    height: 30px;
+    background: none;
+    color: #717474;
+    font-family: 'LatoLight';
+    font-size: 17px;
+    border: none;
+    border-right: 1px solid #717474;
+    cursor: pointer;
+    margin: 3px 0;
+    clear: both;
+    float: right;
 }
-
-.headertop button:hover, .headertop input:hover {
-  border-right: 1px solid #6d7310;
-  color: #6d7310;
+.headertop button:hover,
+.headertop input:hover {
+    border-right: 1px solid #6d7310;
+    color: #6d7310;
 }
-
 .wrapper {
-  display:block;
-  height:100%;
-  margin:0 0;
+    display: block;
+    height: 100%;
+    margin: 0 0;
 }
-
-
 /* bottom right corner stuffs */
 
 .wrapper div.index {
-  position: fixed;
-  bottom: 5px;
-  right: 0px;
-  z-index: 9999;
-  width: auto;
-  padding: 1px 10px 0px 10px;
-  font-family: "vinyl",sans-serif;
-  font-style:italic;
-  height: 35px;
-  font-size: 30px;
-  line-height: 38px;
-  border-right:none;
-  border-bottom-left-radius:5px;
-  border-top-left-radius:5px;
-  background: #0F1519;
+    position: fixed;
+    bottom: 5px;
+    right: 0px;
+    z-index: 9999;
+    width: auto;
+    padding: 1px 10px 0px 10px;
+    font-family: "vinyl", sans-serif;
+    font-style: italic;
+    height: 35px;
+    font-size: 30px;
+    line-height: 38px;
+    border-right: none;
+    border-bottom-left-radius: 5px;
+    border-top-left-radius: 5px;
+    background: #0F1519;
 }
 .wrapper div.index .openCheatsheet {
-  position:absolute;
-  top:0;
-  left:-41px;
-  background: #0F1519 url('MMCCicon_help.png') no-repeat center center;
-  background-size: 27px 27px;
-  border-radius:5px;
-  height:36px;
-  width:36px;
-  cursor:pointer;
+    position: absolute;
+    top: 0;
+    left: -41px;
+    background: #0F1519 url('MMCCicon_help.png') no-repeat center center;
+    background-size: 27px 27px;
+    border-radius: 5px;
+    height: 36px;
+    width: 36px;
+    cursor: pointer;
 }
-.wrapper div.index .openCheatsheet:hover {
-  
-}
-.wrapper div.index span {
-  float:left;
+.wrapper div.index .openCheatsheet:hover {} .wrapper div.index span {
+    float: left;
 }
 .wrapper div.index span.mapName {
-  text-transform:uppercase;
-  margin-right:9px;
+    text-transform: uppercase;
+    margin-right: 9px;
 }
 .wrapper div.index span.mapInfo {
-  width: 24px;
-  height: 24px;
-  line-height: 24px;
-  text-align: center;
-  margin-top: 5px;
-  font-size: 27px;
-  background: url('MMCCicon_info.png') no-repeat center center;
-  background-size:24px 24px;
+    width: 24px;
+    height: 24px;
+    line-height: 24px;
+    text-align: center;
+    margin-top: 5px;
+    font-size: 27px;
+    background: url('MMCCicon_info.png') no-repeat center center;
+    background-size: 19px 19px;
 }
-
 .wrapper h1.index {
-  position: fixed;
-  bottom: 5px;
-  right: 0;
-  z-index: 9999;
-  width: auto;
-  padding: 1px 10px 0px 20px;
-  text-transform:uppercase;
-  font-style:italic;
-  height: 35px;
-  font-size: 30px;
-  line-height: 38px;
-  border-right:none;
-  border-bottom-left-radius:5px;
-  border-top-left-radius:5px;
-  background: #0F1519;
+    position: fixed;
+    bottom: 5px;
+    right: 0;
+    z-index: 9999;
+    width: auto;
+    padding: 1px 10px 0px 20px;
+    text-transform: uppercase;
+    font-style: italic;
+    height: 35px;
+    font-size: 30px;
+    line-height: 38px;
+    border-right: none;
+    border-bottom-left-radius: 5px;
+    border-top-left-radius: 5px;
+    background: #0F1519;
 }
-
 /* account */
 
 .sidebarAccount {
-position:absolute;
-top:5px;
-right:0;
-z-index:200;
-width: 35px;
-height:35px;
+    position: absolute;
+    top: 5px;
+    right: 0;
+    z-index: 200;
+    width: 35px;
+    height: 35px;
 }
-
 .sidebarAccountIcon {
-position:absolute;
-width: 35px;
-height: 35px;
-background: #0F1519 url('MMCCicon_mapper.png') no-repeat center center;
-background-size: 24px 24px;
-cursor:pointer;
+    position: absolute;
+    width: 35px;
+    height: 35px;
+    background: #0F1519 url('MMCCicon_mapper.png') no-repeat center center;
+    background-size: 24px 24px;
+    cursor: pointer;
 }
 .sidebarAccountBox {
-  position:absolute;
-  display:none;
-  height:auto;
-  background: #000;
-  top: 35px;
-  right:0;
-  padding: 10px;
-  border: 1px solid black;
-  min-width:120px;
-  font-family: 'LatoLight', helvetica, sans-serif;
+    position: absolute;
+    display: none;
+    height: auto;
+    background: #000;
+    top: 35px;
+    right: 0;
+    padding: 10px;
+    border: 1px solid black;
+    min-width: 120px;
+    font-family: 'LatoLight', helvetica, sans-serif;
 }
 .sidebarAccountBox.loggedin {
-  width:auto;
+    width: auto;
 }
 .sidebarAccountBox.loggedout {
-  width:200px;
+    width: 200px;
 }
-
 .sidebarAccountBox h3 {
-  font-family: 'vinyl', helvetica, sans-serif;
-  text-transform:uppercase;
-  font-style:italic;
+    font-family: 'vinyl', helvetica, sans-serif;
+    text-transform: uppercase;
+    font-style: italic;
 }
 .sidebarAccountBox ul {
- list-style:none;
+    list-style: none;
 }
 .sidebarAccountBox li.accountIcon {
-padding: 0;
-background-size: 18px 18px;
-background-repeat: no-repeat;
-background-position: 0px 6px;
-font-size: 18px;
-line-height: 20px;
+    padding: 0;
+    background-size: 18px 18px;
+    background-repeat: no-repeat;
+    background-position: 0px 6px;
+    font-size: 18px;
+    line-height: 20px;
 }
 li.accountIcon:hover {
-background-position: 4px 6px;
+    background-position: 4px 6px;
 }
 li.accountMaps {
-  background-image: url('MMCCicon_map.png');
+    background-image: url('MMCCicon_map.png');
 }
 li.accountSettings {
-  background-image: url('MMCCicon_settings.png');
+    background-image: url('MMCCicon_settings.png');
 }
-li.accountInvite{
-  background-image: url('MMCCicon_invite.png');
+li.accountInvite {
+    background-image: url('MMCCicon_invite.png');
 }
 li.accountLogout {
-  background-image: url('MMCCicon_logout.png');
+    background-image: url('MMCCicon_logout.png');
 }
 li.accountIcon a {
-  display:block;
-  padding: 6px 0 6px 25px;
+    display: block;
+    padding: 6px 0 6px 25px;
 }
-
 li.accountInvite span {
-  display: block;
-  padding: 6px 0 6px 25px;
+    display: block;
+    padding: 6px 0 6px 25px;
 }
-
 .sidebarAccountBox a {
-  color:white;
+    color: white;
 }
-
-.sidebarAccountBox input[type="email"], .sidebarAccountBox input[type="password"] {
-width: 200px;
-height: 32px;
-font-size: 15px;
-direction: ltr;
--webkit-appearance: none;
-appearance: none;
-display: inline-block;
-margin: 0;
-padding: 0 8px;
-background: #fff;
-border: 1px solid #d9d9d9;
-border-top: 1px solid #c0c0c0;
--webkit-box-sizing: border-box;
--moz-box-sizing: border-box;
-box-sizing: border-box;
--webkit-border-radius: 1px;
--moz-border-radius: 1px;
-border-radius: 1px;
-font: -webkit-small-control;
-color: initial;
-letter-spacing: normal;
-word-spacing: normal;
-text-transform: none;
-text-indent: 0px;
-text-shadow: none;
-display: inline-block;
-text-align: start;
+.sidebarAccountBox input[type="email"],
+.sidebarAccountBox input[type="password"] {
+    width: 200px;
+    height: 32px;
+    font-size: 15px;
+    direction: ltr;
+    -webkit-appearance: none;
+    appearance: none;
+    display: inline-block;
+    margin: 0;
+    padding: 0 8px;
+    background: #fff;
+    border: 1px solid #d9d9d9;
+    border-top: 1px solid #c0c0c0;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    -webkit-border-radius: 1px;
+    -moz-border-radius: 1px;
+    border-radius: 1px;
+    font: -webkit-small-control;
+    color: initial;
+    letter-spacing: normal;
+    word-spacing: normal;
+    text-transform: none;
+    text-indent: 0px;
+    text-shadow: none;
+    display: inline-block;
+    text-align: start;
 }
-
-.sidebarAccountBox input[type="email"]:hover, .sidebarAccountBox input[type="password"]:hover {
-  border: 1px solid #b9b9b9;
-  border-top: 1px solid #a0a0a0;
-  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
-  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
-  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+.sidebarAccountBox input[type="email"]:hover,
+.sidebarAccountBox input[type="password"]:hover {
+    border: 1px solid #b9b9b9;
+    border-top: 1px solid #a0a0a0;
+    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+    -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
 }
-
 .sidebarAccountBox .links a {
-  display:block;
-  margin-top:5px;
+    display: block;
+    margin-top: 5px;
 }
-
 /* Save To New Map */
 
 .sidebarFork {
-position:absolute;
-top:5px;
-right:71px;
-z-index:200;
-width: 35px;
-height:35px;
-border-right:1px solid black;
+    position: absolute;
+    top: 5px;
+    right: 71px;
+    z-index: 200;
+    width: 35px;
+    height: 35px;
+    border-right: 1px solid black;
 }
-
 .sidebarForkIcon {
-position:absolute;
-width: 35px;
-height: 35px;
-background: #0F1519 url('MMCCicon_save_new_map.png') no-repeat center center;
-background-size: 28px 28px;
-cursor:pointer;
+    position: absolute;
+    width: 35px;
+    height: 35px;
+    background: #0F1519 url('MMCCicon_save_new_map.png') no-repeat center center;
+    background-size: 28px 28px;
+    cursor: pointer;
 }
 .sidebarForkIcon:hover {
-  background-color: black;
+    background-color: black;
 }
 .sidebarForkBox {
-  position:absolute;
-  display:none;
-  height:auto;
-  width:182px;
-  background: #000;
-  top: 35px;
-  right:-36px;
-  padding: 10px;
-  border: 1px solid black;
-  font-family: 'LatoLight', helvetica, sans-serif;
+    position: absolute;
+    display: none;
+    height: auto;
+    width: 182px;
+    background: #000;
+    top: 35px;
+    right: -36px;
+    padding: 10px;
+    border: 1px solid black;
+    font-family: 'LatoLight', helvetica, sans-serif;
 }
-
 .sidebarFork .hoverForTip:hover .tip {
-  display:block;
+    display: block;
 }
-
 .sidebarFork .tip {
-display: none;
-position: absolute;
-background: black;
-text-align: center;
-top: 36px;
-right: 0;
-color: white;
-border-radius: 4px;
-font-size: 15px !important;
-font-family: 'LatoRegular';
-line-height: 17px;
-padding: 3px 5px 2px;
-z-index: 100;
+    display: none;
+    position: absolute;
+    background: black;
+    text-align: center;
+    top: 36px;
+    right: 0;
+    color: white;
+    border-radius: 4px;
+    font-size: 15px !important;
+    font-family: 'LatoRegular';
+    line-height: 17px;
+    padding: 3px 5px 2px;
+    z-index: 100;
 }
-
 /* end Save To New Map */
 
 /* Save Layout */
 
-.sidebarSave{
-position:absolute;
-top:5px;
-right:107px;
-z-index:200;
-width: 35px;
-height:35px;
-border-right:1px solid black;
+.sidebarSave {
+    position: absolute;
+    top: 5px;
+    right: 107px;
+    z-index: 200;
+    width: 35px;
+    height: 35px;
+    border-right: 1px solid black;
 }
-
 .sidebarSaveIcon {
-position:absolute;
-width: 35px;
-height: 35px;
-background: #0F1519 url('MMCCicon_save_layout.png') no-repeat center center;
-background-size: 22px 22px;
-cursor:pointer;
+    position: absolute;
+    width: 35px;
+    height: 35px;
+    background: #0F1519 url('MMCCicon_save_layout.png') no-repeat center center;
+    background-size: 22px 22px;
+    cursor: pointer;
 }
 .sidebarSaveIcon:hover {
-  background-color: black;
+    background-color: black;
 }
 .sidebarSaveBox {
-  position:absolute;
-  display:none;
-  height:auto;
-  width:182px;
-  background: #000;
-  top: 35px;
-  right:-36px;
-  padding: 10px;
-  border: 1px solid black;
-  font-family: 'LatoLight', helvetica, sans-serif;
+    position: absolute;
+    display: none;
+    height: auto;
+    width: 182px;
+    background: #000;
+    top: 35px;
+    right: -36px;
+    padding: 10px;
+    border: 1px solid black;
+    font-family: 'LatoLight', helvetica, sans-serif;
 }
-
 .sidebarSave .hoverForTip:hover .tip {
-  display:block;
+    display: block;
 }
-
 .sidebarSave .tip {
-display: none;
-position: absolute;
-background: black;
-text-align: center;
-top: 36px;
-right: 0;
-color: white;
-border-radius: 4px;
-font-size: 15px !important;
-font-family: 'LatoRegular';
-line-height: 17px;
-padding: 3px 5px 2px;
-z-index: 100;
+    display: none;
+    position: absolute;
+    background: black;
+    text-align: center;
+    top: 36px;
+    right: 0;
+    color: white;
+    border-radius: 4px;
+    font-size: 15px !important;
+    font-family: 'LatoRegular';
+    line-height: 17px;
+    padding: 3px 5px 2px;
+    z-index: 100;
 }
-
 /* Filter */
 
 .sidebarFilter {
-position:absolute;
-top:5px;
-right:35px;
-z-index:200;
-width: 35px;
-height:35px;
-border-right:1px solid black;
+    position: absolute;
+    top: 5px;
+    right: 35px;
+    z-index: 200;
+    width: 35px;
+    height: 35px;
+    border-right: 1px solid black;
 }
 .sidebarFilter.loggedout {
-  right:35px;
+    right: 35px;
 }
-
 .sidebarFilterIcon {
-position:absolute;
-width: 35px;
-height: 35px;
-background: #0F1519 url('MMCCicon_filter2.png') no-repeat center center;
-background-size: 28px 28px;
-cursor:pointer;
+    position: absolute;
+    width: 35px;
+    height: 35px;
+    background: #0F1519 url('MMCCicon_filter2.png') no-repeat center center;
+    background-size: 28px 28px;
+    cursor: pointer;
 }
 .sidebarFilterIcon:hover {
-  background-color: black;
+    background-color: black;
 }
-
 /* we set a few of these params off screen to begin with, so that when we initialize the scroll bar it works, but then 
    we hide the element and position it correctly */
+
 .sidebarFilterBox {
-  position:fixed; 
-  top: -1000px;
-  right:-1000px;
-  display:block;
-  /*
+    position: fixed;
+    top: -1000px;
+    right: -1000px;
+    display: block;
+    /*
   position:absolute; 
   top: 35px;
   right:-72px;
   display:none;
   */
-  height:auto;
-  width:260px;
-  background: #000;
-  padding: 10px;
-  border: 1px solid black;
-  font-family: 'LatoLight', helvetica, sans-serif;
-  text-align:center;
+    height: auto;
+    width: 260px;
+    background: #000;
+    padding: 10px;
+    border: 1px solid black;
+    font-family: 'LatoLight', helvetica, sans-serif;
+    text-align: center;
 }
-
 h3.filterByMetacode {
-margin-bottom: 10px;
-text-align: left;
-float:left;
+    margin-bottom: 10px;
+    text-align: left;
+    float: left;
 }
 .sidebarFilterBox span {
-float: left;
-background: #15bad4;
-padding: 1px 4px;
-border-radius: 2px;
-margin-left: 5px;
-cursor: pointer;
+    float: left;
+    background: #15bad4;
+    padding: 1px 4px;
+    border-radius: 2px;
+    margin-left: 5px;
+    cursor: pointer;
 }
-
 .sidebarFilterBox #filter_by_metacode {
-  height:270px;
-  overflow:hidden;
+    height: 270px;
+    overflow: hidden;
 }
 .sidebarFilterBox ul {
-  list-style:none;
+    list-style: none;
 }
 .sidebarFilterBox li {
-  float:left;
-  width:61px;
-  height:70px;
-  cursor:pointer;
+    float: left;
+    width: 61px;
+    height: 70px;
+    cursor: pointer;
 }
 .sidebarFilterBox li:hover {
-background-color: rgba(255,255,255,0.1);
+    background-color: rgba(255, 255, 255, 0.1);
 }
 .sidebarFilterBox li img {
-  width:45px;
-  height:45px;
-  margin:0 auto;
+    width: 45px;
+    height: 45px;
+    margin: 0 auto;
 }
 .sidebarFilterBox li p {
-  font-size:11px;
-  line-height:11px;
-  font-family:arial, sans-serif;
+    font-size: 11px;
+    line-height: 11px;
+    font-family: arial, sans-serif;
 }
-
 .sidebarFilterBox li.toggledOff {
-  opacity: 0.4;
+    opacity: 0.4;
 }
-
 /* end filter by metacode */
 
 /* collaborate */
 
 .sidebarCollaborate {
-position:absolute;
-top:5px;
-right:143px;
-z-index:200;
-width: 35px;
-height:35px;
-border-right:1px solid black;
+    position: absolute;
+    top: 5px;
+    right: 143px;
+    z-index: 200;
+    width: 35px;
+    height: 35px;
+    border-right: 1px solid black;
 }
-
 .sidebarCollaborateIcon {
-position:absolute;
-width: 35px;
-height: 35px;
-background: #0F1519 url('MMCCicon_realtime_junto.png') no-repeat 0px 1px;
-background-size: 36px 36px;
-cursor:pointer;
+    position: absolute;
+    width: 35px;
+    height: 35px;
+    background: #0F1519 url('MMCCicon_realtime_junto.png') no-repeat 0px 1px;
+    background-size: 36px 36px;
+    cursor: pointer;
 }
-.sidebarCollaborateIcon:hover, .sidebarCollaborateIcon.blue:hover{
-background-color: black;
+.sidebarCollaborateIcon:hover,
+.sidebarCollaborateIcon.blue:hover {
+    background-color: black;
 }
 .sidebarCollaborateIcon.blue {
-background: #0F1519 url('MMCCicon_realtime_blue.png') no-repeat center center;
-background-size: 26px 25px;
+    background: #0F1519 url('MMCCicon_realtime_blue.png') no-repeat center center;
+    background-size: 26px 25px;
 }
 .sidebarCollaborateBox {
-  position:absolute;
-  display:none;
-  height:auto;
-  width:auto;
-  background: #000;
-  top: 36px;
-  right:0;
-  padding: 10px;
-  border: 1px solid black;
-  min-width:120px;
-  font-family: 'LatoLight', helvetica, sans-serif;
+    position: absolute;
+    display: none;
+    height: auto;
+    width: auto;
+    background: #000;
+    top: 36px;
+    right: 0;
+    padding: 10px;
+    border: 1px solid black;
+    min-width: 120px;
+    font-family: 'LatoLight', helvetica, sans-serif;
 }
-
 .sidebarCollaborate .hoverForTip:hover .tip {
-  display:block;
+    display: block;
 }
-
 .sidebarCollaborate .tip {
-display: none;
-position: absolute;
-background: black;
-text-align: center;
-top: 36px;
-right: 0;
-color: white;
-border-radius: 4px;
-font-size: 15px !important;
-font-family: 'LatoRegular';
-line-height: 17px;
-padding: 3px 5px 2px;
-z-index: 100;
+    display: none;
+    position: absolute;
+    background: black;
+    text-align: center;
+    top: 36px;
+    right: 0;
+    color: white;
+    border-radius: 4px;
+    font-size: 15px !important;
+    font-family: 'LatoRegular';
+    line-height: 17px;
+    padding: 3px 5px 2px;
+    z-index: 100;
 }
-
 /* end collaborate */
 
 /* search */
 
 .sidebarSearch {
-position:absolute;
-top:5px;
-left:0;
-height: 35px;
-z-index:200;
+    position: absolute;
+    top: 5px;
+    left: 0;
+    height: 35px;
+    z-index: 200;
 }
-
 .sidebarSearchIcon {
-float:left;
-width: 35px;
-height: 35px;
-background: #0F1519 url('search_icon_32x32.png') no-repeat center center;
-background-size: 25px 25px;
-cursor:pointer;
+    float: left;
+    width: 35px;
+    height: 35px;
+    background: #0F1519 url('search_icon_32x32.png') no-repeat center center;
+    background-size: 25px 25px;
+    cursor: pointer;
 }
-
 .sidebarSearch .twitter-typeahead {
-  float:left;
+    float: left;
 }
-
-.sidebarSearchField, .sidebarSearch .tt-hint {
-  height:25px;
-  padding:5px 0;
-  width:0px;
-  margin: 0;
-  border: 0;
-  outline: none;
-  font-size: 18px;
-  line-height:35px;
-  background:#0F1519;
-  color: rgba(255,255,255,0.6);
-  font-family: 'LatoRegular';
+.sidebarSearchField,
+.sidebarSearch .tt-hint {
+    height: 25px;
+    padding: 5px 0;
+    width: 0px;
+    margin: 0;
+    border: 0;
+    outline: none;
+    font-size: 18px;
+    line-height: 35px;
+    background: #0F1519;
+    color: rgba(255, 255, 255, 0.6);
+    font-family: 'LatoRegular';
 }
-
 .sidebarSearch .tt-dropdown-menu {
-left:-35px !important;
-background: #0F1519;
-min-width: 440px;
+    left: -35px !important;
+    background: #0F1519;
+    min-width: 440px;
 }
-
 .sidebarSearch .tt-dropdown-menu h3 {
-  font-family:'vinyl',helvetica,sans-serif;
-  text-transform:uppercase;
-  font-style:italic;
-  font-size:20px;
-  line-height:20px;
-  margin: 10px 0 3px 10px;
-  float:left;
+    font-family: 'vinyl', helvetica, sans-serif;
+    text-transform: uppercase;
+    font-style: italic;
+    font-size: 20px;
+    line-height: 20px;
+    margin: 10px 0 3px 10px;
+    float: left;
 }
 .sidebarSearch .tt-dropdown-menu .limitToMe {
-  float:left;
-  width: 15px;
-  height: 15px;
-  margin-top: 11px;
-  margin-left: 15px;
+    float: left;
+    width: 15px;
+    height: 15px;
+    margin-top: 11px;
+    margin-left: 15px;
 }
 .sidebarSearch .tt-dropdown-menu .limitToMeLabel {
-  float:left;
-  margin-top: 11px;
+    float: left;
+    margin-top: 11px;
 }
 .sidebarSearch .tt-dropdown-menu .minimizeResults {
-  float:right;
-  width:35px;
-  height:35px;
-  background: url('/assets/MMCCicon_minimize_arrow.png') no-repeat center center;
-  background-size: 25px 25px;
-  cursor:pointer;
+    float: right;
+    width: 35px;
+    height: 35px;
+    background: url('/assets/MMCCicon_minimize_arrow.png') no-repeat center center;
+    background-size: 25px 25px;
+    cursor: pointer;
 }
 .sidebarSearch .tt-dropdown-menu .maximizeResults {
-  float:right;
-  width:35px;
-  height:35px;
-  background: url('/assets/MMCCicon_maximize_arrow.png') no-repeat center center;
-  background-size: 25px 25px;
-  cursor:pointer;
+    float: right;
+    width: 35px;
+    height: 35px;
+    background: url('/assets/MMCCicon_maximize_arrow.png') no-repeat center center;
+    background-size: 25px 25px;
+    cursor: pointer;
 }
-
-
 .sidebarSearch .tt-suggestions {
-  font-family:'LatoLight', helvetica, sans-serif;
-  overflow:visible;
+    font-family: 'LatoLight', helvetica, sans-serif;
+    overflow: visible;
 }
-
-
 .sidebarSearch .tt-suggestion {
-  background: #2A343C;
+    background: #2A343C;
 }
-
 .sidebarSearch .tt-is-under-cursor {
-  background:#0E161D;
+    background: #0E161D;
 }
-
-.sidebarSearch .tt-dataset-maps .tt-is-under-cursor .resultmap, .sidebarSearch .tt-dataset-topics .tt-is-under-cursor .resulttopic {
-  min-height: 57px;
+.sidebarSearch .tt-dataset-maps .tt-is-under-cursor .resultmap,
+.sidebarSearch .tt-dataset-topics .tt-is-under-cursor .resulttopic {
+    min-height: 57px;
 }
-
 .sidebarSearch .tt-suggestion .icon {
-  float:left;
-  width:36px;
-  height:36px;
-  margin-right:5px;
+    float: left;
+    width: 36px;
+    height: 36px;
+    margin-right: 5px;
 }
 .sidebarSearch .topicMetacode {
-  float:left;
-  margin-right:5px;
-  max-width:70px;
+    float: left;
+    margin-right: 5px;
+    max-width: 70px;
 }
 .sidebarSearch .tt-dataset-topics .topicIcon {
-  width:36px;
-  height:36px;
+    width: 36px;
+    height: 36px;
 }
 .sidebarSearch .tt-dataset-topics .tt-is-under-cursor .topicIcon {
-  margin:0 auto;
-  padding-left:2px
+    margin: 0 auto;
+    padding-left: 2px
 }
 .sidebarSearch .tt-dataset-topics .metacodeTip {
-  display:none;
+    display: none;
 }
 .sidebarSearch .tt-dataset-topics .tt-is-under-cursor .metacodeTip {
-  display: block;
-  font-family: 'vinyl';
-  text-transform: uppercase;
-  font-style: italic;
-  font-size: 13px;
-  margin: 0 5px 0 2px;
-  text-align: center;
+    display: block;
+    font-family: 'vinyl';
+    text-transform: uppercase;
+    font-style: italic;
+    font-size: 13px;
+    margin: 0 5px 0 2px;
+    text-align: center;
 }
-
-
 .sidebarSearch .tt-dataset-mappers .tt-suggestion .icon {
-  width:28px;
-  height:28px;
-  padding:4px;
+    width: 28px;
+    height: 28px;
+    padding: 4px;
 }
-
 .sidebarSearch .resultText {
-  width: 250px;
-  display: block;
-  float: left;
+    width: 250px;
+    display: block;
+    float: left;
 }
-
 .sidebarSearch .resultTitle {
-  font-weight:normal;
-  font-family: 'LatoRegular';
-  font-size:18px;
-  line-height:22px;
-  width:100%;
-  padding-top:8px;
+    font-weight: normal;
+    font-family: 'LatoRegular';
+    font-size: 18px;
+    line-height: 22px;
+    width: 100%;
+    padding-top: 8px;
 }
 .sidebarSearch .resultDesc {
-  font-family: 'LatoItalic';
-  font-size:14px;
-  line-height:16px;
-  width:100%;
-  padding: 3px 0 6px 0;
+    font-family: 'LatoItalic';
+    font-size: 14px;
+    line-height: 16px;
+    width: 100%;
+    padding: 3px 0 6px 0;
 }
-
 .sidebarSearch .tip {
-  display:none;
+    display: none;
 }
-
 .sidebarSearch div.autoOptions {
-  width: 122px;
-  float: right;
-  position:relative;
-  display:none;
+    width: 122px;
+    float: right;
+    position: relative;
+    display: none;
 }
 .sidebarSearch .tt-is-under-cursor .autoOptions {
-  display:block;
+    display: block;
 }
 .sidebarSearch .tt-suggestion .resultnoresult .autoOptions {
-  display:none;
+    display: none;
 }
-
-.sidebarSearch .autoOptions button, .sidebarSearch .autoOptions a, .sidebarSearch .autoOptions div {
-  position: absolute;
-  padding: 0;
-  margin: 0;
-  border: none;
-  outline: none;
+.sidebarSearch .autoOptions button,
+.sidebarSearch .autoOptions a,
+.sidebarSearch .autoOptions div {
+    position: absolute;
+    padding: 0;
+    margin: 0;
+    border: none;
+    outline: none;
 }
-
 .sidebarSearch button.addToMap {
-width: 20px;
-height: 20px;
-background: url(/assets/MMCCicon_add.png) no-repeat center center;
-background-size: 18px 18px;
-top: 30px;
-left: 84px;
-cursor: pointer;
+    width: 20px;
+    height: 20px;
+    background: url(/assets/MMCCicon_add.png) no-repeat center center;
+    background-size: 18px 18px;
+    top: 30px;
+    left: 84px;
+    cursor: pointer;
 }
-
-.sidebarSearch a.goTo {
-width: 20px;
-height: 20px;
-background: url(/assets/MMCCicon_pop-out.png) no-repeat center center;
-background-size: 18px 18px;
-top: 7px;
-left: 84px;
+.sidebarSearch div.goTo {
+    width: 20px;
+    height: 20px;
+    background: url(/assets/MMCCicon_pop-out.png) no-repeat center center;
+    background-size: 18px 18px;
+    top: 7px;
+    left: 84px;
 }
-
 .sidebarSearch div.mapCount {
-width: 20px;
-height: 20px;
-background: url(/assets/MMCCicon_map.png) no-repeat 0px center;
-background-size: 14px 14px;
-top: 7px;
-left: 39px;
-padding-left: 18px;
-font-size: 12px;
-line-height: 20px;
+    width: 20px;
+    height: 20px;
+    background: url(/assets/MMCCicon_map.png) no-repeat 0px center;
+    background-size: 14px 14px;
+    top: 7px;
+    left: 39px;
+    padding-left: 18px;
+    font-size: 12px;
+    line-height: 20px;
 }
-
 .sidebarSearch div.topicCount {
-width: 20px;
-height: 20px;
-background: url(/assets/MMCCicon_topic.png) no-repeat 0px center;
-background-size: 14px 14px;
-top: 7px;
-left: 39px;
-padding-left: 18px;
-font-size: 12px;
-line-height: 20px;
+    width: 20px;
+    height: 20px;
+    background: url(/assets/MMCCicon_topic.png) no-repeat 0px center;
+    background-size: 14px 14px;
+    top: 7px;
+    left: 39px;
+    padding-left: 18px;
+    font-size: 12px;
+    line-height: 20px;
 }
-
 .sidebarSearch div.synapseCount {
-width: 20px;
-height: 20px;
-background: url(/assets/MMCCicon_synapse.png) no-repeat 0px center;
-background-size: 15px 15px;
-top: 30px;
-left: 38px;
-padding-left: 19px;
-font-size: 12px;
-line-height: 20px;
+    width: 20px;
+    height: 20px;
+    background: url(/assets/MMCCicon_synapse.png) no-repeat 0px center;
+    background-size: 15px 15px;
+    top: 30px;
+    left: 38px;
+    padding-left: 19px;
+    font-size: 12px;
+    line-height: 20px;
 }
-
 .sidebarSearch div.topicOriginatorIcon {
-  width: 20px;
-  height: 20px;
-  background: url(/assets/MMCCicon_mapper.png) no-repeat center center;
-  background-size: 17px 17px;
-  top: 7px;
-  left: 13px;
+    width: 20px;
+    height: 20px;
+    background: url(/assets/MMCCicon_mapper.png) no-repeat center center;
+    background-size: 17px 17px;
+    top: 7px;
+    left: 13px;
 }
 .sidebarSearch .tip {
- position: absolute;
- background: white;
- width: auto;
- bottom: 0;
- left: 23px;
- color: black;
- white-space: nowrap;
- border-radius: 4px;
- font-size:15px !important;
- font-family:'LatoRegular';
- line-height:17px;
- padding: 3px 5px 2px;
- z-index:100;
+    position: absolute;
+    background: white;
+    width: auto;
+    bottom: 0;
+    left: 23px;
+    color: black;
+    white-space: nowrap;
+    border-radius: 4px;
+    font-size: 15px !important;
+    font-family: 'LatoRegular';
+    line-height: 17px;
+    padding: 3px 5px 2px;
+    z-index: 100;
 }
-.sidebarSearch .mapCount .tip,.sidebarSearch .synapseCount .tip, .sidebarSearch .topicCount .tip  {
- left:-3px;
- bottom:24px;
+.sidebarSearch .mapCount .tip,
+.sidebarSearch .synapseCount .tip,
+.sidebarSearch .topicCount .tip {
+    left: -3px;
+    bottom: 24px;
 }
 .sidebarSearch .hoverForTip:hover .tip {
-  display:block;
+    display: block;
 }
 .sidebarSearch .mapContributorsIcon .mapContributors {
-  left:0;
-  bottom:21px;
-  white-space:normal;
-  width:200px;
+    left: 0;
+    bottom: 21px;
+    white-space: normal;
+    width: 200px;
 }
-
 .sidebarSearch div.mapContributorsIcon {
-height: 20px;
-background: url(/assets/MMCCicon_mapper.png) no-repeat 0px center;
-background-size: 17px 17px;
-top: 7px;
-right: 85px;
-padding-left: 19px;
-font-size: 12px;
-line-height: 20px;
-padding-right: 5px;
+    height: 20px;
+    background: url(/assets/MMCCicon_mapper.png) no-repeat 0px center;
+    background-size: 17px 17px;
+    top: 7px;
+    right: 85px;
+    padding-left: 19px;
+    font-size: 12px;
+    line-height: 20px;
+    padding-right: 5px;
 }
-
-.sidebarSearch div.topicPermission, .sidebarSearch div.mapPermission {
-width: 20px;
-height: 20px;
-background-size: 19px 19px !important;
-top: 30px;
-left: 13px;
+.sidebarSearch div.topicPermission,
+.sidebarSearch div.mapPermission {
+    width: 20px;
+    height: 20px;
+    background-size: 19px 19px !important;
+    top: 30px;
+    left: 13px;
 }
-.sidebarSearch div.topicPermission.commons, .sidebarSearch div.mapPermission.commons {
-  background: url(/assets/MMCCicon_commons.png) no-repeat center center;
+.sidebarSearch div.topicPermission.commons,
+.sidebarSearch div.mapPermission.commons {
+    background: url(/assets/MMCCicon_commons.png) no-repeat center center;
 }
-.sidebarSearch div.topicPermission.public, .sidebarSearch div.mapPermission.public {
-  background: url(/assets/MMCCicon_public.png) no-repeat center center;
+.sidebarSearch div.topicPermission.public,
+.sidebarSearch div.mapPermission.public {
+    background: url(/assets/MMCCicon_public.png) no-repeat center center;
 }
-.sidebarSearch div.topicPermission.private, .sidebarSearch div.mapPermission.private {
-  background: url(/assets/MMCCicon_private.png) no-repeat center center;
+.sidebarSearch div.topicPermission.private,
+.sidebarSearch div.mapPermission.private {
+    background: url(/assets/MMCCicon_private.png) no-repeat center center;
 }
-
 .sidebarSearch .tt-dataset-mappers a.goTo {
-  top:7px;
+    top: 7px;
 }
 .sidebarSearch .tt-dataset-mappers div.mapCount {
-  top:8px;
+    top: 8px;
 }
-
 /* end search */
 
 .nodemargin {
-  padding-top:120px;
+    padding-top: 120px;
 }
-
 .divider {
-  margin: 20px 50px 20px 50px;
-  border-bottom:2px solid #FFF;
+    margin: 20px 50px 20px 50px;
+    border-bottom: 2px solid #FFF;
 }
-
 .empty {
-  margin-left:50px;
+    margin-left: 50px;
 }
-
 #menus {
-  margin:0 7px;
+    margin: 0 7px;
 }
-
 #cards {
-  height:100%;
-  width:805px;
-  margin:0 auto;
+    height: 100%;
+    width: 805px;
+    margin: 0 auto;
 }
-
 #cards p.empty {
-  margin-left:50px;	
+    margin-left: 50px;
 }
-
 /* right click menu */
 
 .rightclickmenu {
- position:absolute;
- background:white;
- z-index: 20;
- border-radius: 2px;
- color: black;
+    position: absolute;
+    background: white;
+    z-index: 20;
+    border-radius: 2px;
+    color: black;
 }
-
 .rightclickmenu ul {
-  padding: 2px;
+    padding: 2px;
 }
-
 .rightclickmenu ul li {
- list-style: none;
-padding: 3px 10px 3px 30px;
-font-family: arial, sans-serif;
-font-size: 17px;
-line-height: 17px;
-background-repeat: no-repeat;
-background-size: 20px 20px;
-background-position: 5px 2px;
+    list-style: none;
+    padding: 3px 10px 3px 30px;
+    font-family: arial, sans-serif;
+    font-size: 17px;
+    line-height: 17px;
+    background-repeat: no-repeat;
+    background-size: 20px 20px;
+    background-position: 5px 2px;
 }
-.rightclickmenu ul li:nth-child(odd){ 
-		background-color: #FFF;
+.rightclickmenu ul li:nth-child(odd) {
+    background-color: #FFF;
 }
-.rightclickmenu ul li:nth-child(even){ 
-		background-color: #EEE;
+.rightclickmenu ul li:nth-child(even) {
+    background-color: #EEE;
 }
 .rightclickmenu ul li:hover {
- background-color: #BBB;
- background-position: 7px 2px;
- cursor:pointer;
+    background-color: #BBB;
+    background-position: 7px 2px;
+    cursor: pointer;
 }
 .rightclickmenu .rc-delete {
-  background-image: url(MMCCicon_delete_black.png);
+    background-image: url(MMCCicon_delete_black.png);
 }
 .rightclickmenu .rc-remove {
-  background-image: url(MMCCicon_remove_from_map_black.png);
+    background-image: url(MMCCicon_remove_from_map_black.png);
 }
 .rightclickmenu .rc-hide {
-  background-image: url(MMCCicon_hide.png);
+    background-image: url(MMCCicon_hide.png);
 }
 .rightclickmenu .rc-center {
-  background-image: url(MMCCicon_center.png);
+    background-image: url(MMCCicon_center.png);
 }
 .rightclickmenu .rc-popout {
-  background-image: url(MMCCicon_pop-out_black.png);
+    background-image: url(MMCCicon_pop-out_black.png);
 }
 .rightclickmenu .rc-permission {
-  background-image: url(MMCCicon_edit_permission_black.png);
-  position:relative;
+    background-image: url(MMCCicon_edit_permission_black.png);
+    position: relative;
 }
-
 .rightclickmenu .rc-permission ul {
-  display:none;
-  background:white;
-  top: 0;
-  left:100%;
-  position:absolute;
-  border-bottom-left-radius: 2px;
-  border-bottom-right-radius: 2px;
-  border-top-right-radius: 2px;
+    display: none;
+    background: white;
+    top: 0;
+    left: 100%;
+    position: absolute;
+    border-bottom-left-radius: 2px;
+    border-bottom-right-radius: 2px;
+    border-top-right-radius: 2px;
 }
 .rightclickmenu .rc-permission:hover ul {
-  display:block;
+    display: block;
 }
 .rightclickmenu .rc-permission .toCommons {
-  background-image: url(MMCCicon_commons.png);
+    background-image: url(MMCCicon_commons.png);
 }
 .rightclickmenu .rc-permission .toPublic {
-  background-image: url(MMCCicon_public.png);
+    background-image: url(MMCCicon_public.png);
 }
 .rightclickmenu .rc-permission .toPrivate {
-  background-image: url(MMCCicon_private.png);
+    background-image: url(MMCCicon_private.png);
 }
-
 .rightclickmenu p {
-  padding:7px;
+    padding: 7px;
 }
-
 /* end right click menu */
 
 /* topic autocomplete */
 
 #new_topic .tt-suggestion.tt-is-under-cursor {
-background: #0E161D;
+    background: #0E161D;
 }
-
 #new_topic .tt-suggestion {
-padding: 5px;
-font-family: 'LatoLight';
-background: #2A343C;
+    padding: 5px;
+    font-family: 'LatoLight';
+    background: #2A343C;
 }
-
 #new_topic .autocompleteSection {
-  float:left;
-  
+    float: left;
 }
-
 #new_topic .topicTitle {
-  width:130px;
-  line-height:22px;
+    width: 130px;
+    line-height: 22px;
 }
 #new_topic .topicPermission {
-  width:20px;
-  height:20px;
-  background-repeat:no-repeat;
-  background-position:center center;
-  background-size:16px 16px;
+    width: 20px;
+    height: 20px;
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: 16px 16px;
 }
 #new_topic .topicPermission.commons {
-  background-image:url(MMCCicon_commons.png);
+    background-image: url(MMCCicon_commons.png);
 }
 #new_topic .topicPermission.public {
-  background-image:url(MMCCicon_public.png);
+    background-image: url(MMCCicon_public.png);
 }
 #new_topic .topicPermission.private {
-  background-image:url(MMCCicon_private.png);
+    background-image: url(MMCCicon_private.png);
 }
 #new_topic .topicOriginatorIcon {
-  position:relative;
-  width:20px;
-  height:20px;
-  background-repeat:no-repeat;
-  background-position:center center;
-  background-size:16px 16px;
-  background-image:url(MMCCicon_mapper.png);
+    position: relative;
+    width: 20px;
+    height: 20px;
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: 16px 16px;
+    background-image: url(MMCCicon_mapper.png);
 }
 #new_topic .topicOriginatorIcon:hover .tip {
-  display:block;
+    display: block;
 }
 #new_topic .tip {
- display:none;
- position: absolute;
- background: white;
- width: auto;
- top: 0;
- left: 23px;
- color: black;
- white-space: nowrap;
- border-radius: 4px;
- font-size:15px !important;
- font-family:'LatoRegular';
- line-height:15px;
- padding: 2px 5px 2px;
- z-index:100;
+    display: none;
+    position: absolute;
+    background: white;
+    width: auto;
+    top: 0;
+    left: 23px;
+    color: black;
+    white-space: nowrap;
+    border-radius: 4px;
+    font-size: 15px !important;
+    font-family: 'LatoRegular';
+    line-height: 15px;
+    padding: 2px 5px 2px;
+    z-index: 100;
 }
-
 /* topic autocomplete */
 
 #new_synapse .tt-dropdown-menu {
-  width: 212px;
-  background:#2A343C;
+    width: 212px;
+    background: #2A343C;
 }
-
 #new_synapse .tt-dropdown-menu h3 {
-font-family: 'vinyl',helvetica,sans-serif;
-text-transform: uppercase;
-font-style: italic;
-font-size: 14pxpx;
-line-height: 16px;
-margin: 3px;
+    font-family: 'vinyl', helvetica, sans-serif;
+    text-transform: uppercase;
+    font-style: italic;
+    font-size: 14pxpx;
+    line-height: 16px;
+    margin: 3px;
 }
-
 #new_synapse .tt-suggestion.tt-is-under-cursor {
-  background: #0E161D;
+    background: #0E161D;
 }
-
 #new_synapse .tt-suggestion {
-  padding: 5px;
-  font-family: 'LatoLight';
+    padding: 5px;
+    font-family: 'LatoLight';
 }
-
 #new_synapse .autocompleteSection {
-  float:left;
+    float: left;
 }
-
 #new_synapse .synapseDesc {
-  width:162px;
-  line-height:22px;
+    width: 162px;
+    line-height: 22px;
 }
 #new_synapse .synapsePermission {
-  width:20px;
-  height:20px;
-  background-repeat:no-repeat;
-  background-position:center center;
-  background-size:16px 16px;
+    width: 20px;
+    height: 20px;
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: 16px 16px;
 }
 #new_synapse .synapsePermission.commons {
-  background-image:url(MMCCicon_commons.png);
+    background-image: url(MMCCicon_commons.png);
 }
 #new_synapse .synapsePermission.public {
-  background-image:url(MMCCicon_public.png);
+    background-image: url(MMCCicon_public.png);
 }
 #new_synapse .synapsePermission.private {
-  background-image:url(MMCCicon_private.png);
+    background-image: url(MMCCicon_private.png);
 }
 #new_synapse .synapseOriginatorIcon {
-  position:relative;
-  width:20px;
-  height:20px;
-  background-repeat:no-repeat;
-  background-position:center center;
-  background-size:16px 16px;
-  background-image:url(MMCCicon_mapper.png);
+    position: relative;
+    width: 20px;
+    height: 20px;
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: 16px 16px;
+    background-image: url(MMCCicon_mapper.png);
 }
 #new_synapse .synapseOriginatorIcon:hover .tip {
-  display:block;
+    display: block;
 }
 #new_synapse .tip {
- display:none;
- position: absolute;
- background: white;
- width: auto;
- top: 0;
- left: 23px;
- color: black;
- white-space: nowrap;
- border-radius: 4px;
- font-size:15px !important;
- font-family:'LatoRegular';
- line-height:15px;
- padding: 2px 5px 2px;
- z-index:100;
+    display: none;
+    position: absolute;
+    background: white;
+    width: auto;
+    top: 0;
+    left: 23px;
+    color: black;
+    white-space: nowrap;
+    border-radius: 4px;
+    font-size: 15px !important;
+    font-family: 'LatoRegular';
+    line-height: 15px;
+    padding: 2px 5px 2px;
+    z-index: 100;
 }
-
-#new_synapse .tt-suggestion .resultnoresult .synapsePermission, #new_synapse .tt-suggestion .resultnoresult .synapseOriginatorIcon  {
-  display:none;
+#new_synapse .tt-suggestion .resultnoresult .synapsePermission,
+#new_synapse .tt-suggestion .resultnoresult .synapseOriginatorIcon {
+    display: none;
 }
-
-
 /* map info box */
 
 .wrapper div.mapInfoBox {
-  display:none;
-  position:absolute;
-  bottom:40px;
-  right:3px;
-  background:#0F1519;
-  border-radius:5px;
-  width:320px;
-  height:auto;
-  padding:10px;
-  font-family:'LatoLight';
-  font-size:15px;
-  line-height:17px;
-  font-style:normal;
-  text-align:center;
+    display: none;
+    position: absolute;
+    bottom: 40px;
+    right: 3px;
+    background: #0F1519;
+    border-radius: 5px;
+    width: 320px;
+    height: auto;
+    padding: 10px;
+    font-family: 'LatoLight';
+    font-size: 15px;
+    line-height: 17px;
+    font-style: normal;
+    text-align: center;
 }
-
 .mapInfoName {
-  padding-bottom:10px;
-  margin-bottom:10px;
-  background: url(mapInfoLine.png) no-repeat bottom center;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+    background: url(mapInfoLine.png) no-repeat bottom center;
 }
-.mapInfoName, .mapInfoStat {
-  font-size:25px;
-  line-height:27px;
+.mapInfoName,
+.mapInfoStat {
+    font-size: 25px;
+    line-height: 27px;
 }
-.wrapper div.mapInfoName span, .wrapper div.mapInfoDesc span {
-  float:none !important;
-  padding-bottom: 10px;
+.wrapper div.mapInfoName span,
+.wrapper div.mapInfoDesc span {
+    float: none !important;
+    padding-bottom: 10px;
 }
-
 div.mapInfoStat {
-  padding-left: 29px;
+    padding-left: 29px;
 }
 .infoStatIcon {
-float: left;
-width: 25px;
-padding: 6px 0px 7px 45px;
-height: 27px;
-background-repeat: no-repeat;
-text-align: left;
-font-size: 20px;
-line-height: 27px;
+    float: left;
+    width: 25px;
+    padding: 6px 0px 7px 45px;
+    height: 27px;
+    background-repeat: no-repeat;
+    text-align: left;
+    font-size: 20px;
+    line-height: 27px;
 }
 .mapContributors {
-background-image: url(MMCCicon_mapper.png);
-background-position: 16px 6px;
-background-size: 27px 27px;
-position:relative;
+    background-image: url(MMCCicon_mapper.png);
+    background-position: 16px 6px;
+    background-size: 27px 27px;
+    position: relative;
 }
 .infoStatIcon .tip {
-display: none; 
-position: absolute;
-background: white;
-min-width: 180px;
-max-width:250px;
-text-align:center;
-color: black;
-border-radius: 4px;
-font-size: 15px !important;
-font-family: 'LatoRegular';
-line-height: 17px;
-padding: 3px 5px 2px;
-z-index: 100;
+    display: none;
+    position: absolute;
+    background: white;
+    min-width: 180px;
+    max-width: 250px;
+    text-align: center;
+    color: black;
+    border-radius: 4px;
+    font-size: 15px !important;
+    font-family: 'LatoRegular';
+    line-height: 17px;
+    padding: 3px 5px 2px;
+    z-index: 100;
 }
 .mapContributors .tip {
-  top: 38px;
-  left: 6px;
+    top: 38px;
+    left: 6px;
 }
 .mapInfoBox .mapPermission .tip {
-  top: 0;
-  right: 32px;
+    top: 0;
+    right: 32px;
 }
 .mapInfoBox .hoverForTip:hover .tip {
-  display:block;
+    display: block;
 }
-
 .mapTopics {
-background-image: url(MMCCicon_topic.png);
-background-position: 16px 6px;
-background-size: 27px 27px;
+    background-image: url(MMCCicon_topic.png);
+    background-position: 16px 6px;
+    background-size: 27px 27px;
 }
 .mapSynapses {
-background-image: url(MMCCicon_synapse.png);
-background-position: 18px 6px;
-background-size: 27px 27px;
+    background-image: url(MMCCicon_synapse.png);
+    background-position: 18px 6px;
+    background-size: 27px 27px;
 }
 .mapInfoBox .mapPermission {
-background-position: 0 center;
-background-size: 30px 30px;
-width: 30px;
-height: 30px;
-padding: 0;
-margin: 5px 30px 5px 10px;
-position: relative;
+    background-position: 0 center;
+    background-size: 30px 30px;
+    width: 30px;
+    height: 30px;
+    padding: 0;
+    margin: 5px 30px 5px 10px;
+    position: relative;
 }
 .mapInfoBox .mapPermission.commons {
-  background-image:url(MMCCicon_commons.png);
+    background-image: url(MMCCicon_commons.png);
 }
 .mapInfoBox .mapPermission.public {
-  background-image:url(MMCCicon_public.png);
+    background-image: url(MMCCicon_public.png);
 }
 .mapInfoBox .mapPermission.private {
-  background-image:url(MMCCicon_private.png);
+    background-image: url(MMCCicon_private.png);
 }
-
 .yourMap .mapPermission:hover {
-  background-image: url(/assets/MMCCicon_maximize_arrow.png);
-  cursor:pointer;
+    background-image: url(/assets/MMCCicon_maximize_arrow.png);
+    cursor: pointer;
 }
 .yourMap .mapPermission.minimize {
- background-image: url(MMCCicon_minimize_arrow.png) !important;
- cursor: pointer;
+    background-image: url(MMCCicon_minimize_arrow.png) !important;
+    cursor: pointer;
 }
 .mapInfoBox .mapPermission .permissionSelect {
-  list-style: none;
-  width: 30px;
-  height: 60px;
-  position: relative;
-  top: 30px;
+    list-style: none;
+    width: 30px;
+    height: 60px;
+    position: relative;
+    top: 30px;
 }
 .mapInfoBox .mapPermission .permissionSelect li {
-  width: 30px;
-  height: 30px;
-  background-repeat: no-repeat;
-  background-position: center center;
-  background-size: 30px 30px;
+    width: 30px;
+    height: 30px;
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: 30px 30px;
 }
 .mapInfoBox .mapPermission .permissionSelect .commons {
-  background-image: url(MMCCicon_commons.png);
+    background-image: url(MMCCicon_commons.png);
 }
 .mapInfoBox .mapPermission .permissionSelect .public {
-  background-image: url(MMCCicon_public.png);
+    background-image: url(MMCCicon_public.png);
 }
 .mapInfoBox .mapPermission .permissionSelect .private {
-  background-image: url(MMCCicon_private.png);
+    background-image: url(MMCCicon_private.png);
 }
 .mapInfoBox .mapPermission .permissionSelect .commons:hover {
-  background-image: url(MMCCicon_commons_black.png);
+    background-image: url(MMCCicon_commons_black.png);
 }
 .mapInfoBox .mapPermission .permissionSelect .public:hover {
-  background-image: url(MMCCicon_public_black.png);
+    background-image: url(MMCCicon_public_black.png);
 }
 .mapInfoBox .mapPermission .permissionSelect .private:hover {
-  background-image: url(MMCCicon_private_black.png);
+    background-image: url(MMCCicon_private_black.png);
 }
-
 .mapInfoBox .mapInfoDesc {
-  font-style: italic;
-  color: #BBB;
-  padding-bottom:5px;
-  margin: 5px 0 8px;
-  background: url(mapInfoLine.png) no-repeat bottom center;
+    font-style: italic;
+    color: #BBB;
+    padding-bottom: 5px;
+    margin: 5px 0 8px;
+    background: url(mapInfoLine.png) no-repeat bottom center;
 }
-
 .mapInfoBox .mapInfoMeta p {
-  margin:4px 0;
-  font-size:14px;
-  font-style: italic;
-  color:#BBB;
+    margin: 4px 0;
+    font-size: 14px;
+    font-style: italic;
+    color: #BBB;
 }
-
-
-
-
 /* lightboxes */
 
 #lightbox_overlay {
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  position: fixed;
-  z-index: 1000000;
-  display:none;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    z-index: 1000000;
+    display: none;
 }
-
 #lightbox_main {
-  width: 550px;
-  height: auto;
-  margin: 0 auto;
-  z-index: 2;
-  position: relative;
-  top:50%;
-  background-color: transparent;
-  color:black;
+    width: 550px;
+    height: auto;
+    margin: 0 auto;
+    z-index: 2;
+    position: relative;
+    top: 50%;
+    background-color: transparent;
+    color: black;
 }
-
 #lightbox_screen {
-  top: 0;
-  left: 0;
-  z-index: 1;
-  width: 100%;
-  position: absolute;
-  background-color: #000;
-  opacity: 0.42;
-  filter: alpha(opacity=42);
-  -moz-opacity: 0.42;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    width: 100%;
+    position: absolute;
+    background-color: #000;
+    opacity: 0.42;
+    filter: alpha(opacity=42);
+    -moz-opacity: 0.42;
 }
-
 #lightbox_overlay #lightbox_main #lightbox_header {
-padding: 6px 5px 1px 0;
-background-color: #333;
-font-weight: bold;
-height: 18px;
-border: solid 2px #000;
+    padding: 6px 5px 1px 0;
+    background-color: #333;
+    font-weight: bold;
+    height: 18px;
+    border: solid 2px #000;
 }
-
 #lightbox_overlay #lightbox_main a#lightbox_close {
-  /*background-image: url(../images/barometer_close.png);*/
-  cursor: pointer;
-  height: 42px;
-  outline-color: -moz-use-text-color;
-  outline-style: none;
-  outline-width: medium;
-  overflow: hidden;
-  position: absolute;
-  top: -23px;
-  right: -22px;
-  width: 42px;
-  z-index: 4;
-  border: none;
+    /*background-image: url(../images/barometer_close.png);*/
+    cursor: pointer;
+    height: 42px;
+    outline-color: -moz-use-text-color;
+    outline-style: none;
+    outline-width: medium;
+    overflow: hidden;
+    position: absolute;
+    top: -23px;
+    right: -22px;
+    width: 42px;
+    z-index: 4;
+    border: none;
 }
-
 #lightbox_content {
-  background: white url(metacode-watermark.png) 443px -30px no-repeat;
-  padding: 20px;
-  border-radius:5px;
+    background: white url(metacode-watermark.png) 443px -30px no-repeat;
+    padding: 20px;
+    border-radius: 5px;
 }
-
 .lightboxContent h3 {
- font-style: italic;
- text-transform: uppercase;
- font-family: 'vinyl';
- font-size: 30px;
- line-height:35px;
- color:black;
+    font-style: italic;
+    text-transform: uppercase;
+    font-family: 'vinyl';
+    font-size: 30px;
+    line-height: 35px;
+    color: black;
 }
 .lightboxContent h3.forCreateMap {
-  text-align:center;
+    text-align: center;
 }
-
 .lightboxContent {
-  display:none;
+    display: none;
+}
+.openLightbox {
+    cursor: pointer;
+}
+/* jquery ui tabs */
+
+.ui-tabs-hide {
+    display: none !important;
+}
+.ui-tabs-vertical {
+    width: 55em;
+}
+.ui-tabs-vertical .ui-tabs-nav {
+    padding: .2em .1em .2em .2em !important;
+    float: left;
+    width: 120px;
+}
+.ui-tabs-vertical .ui-tabs-nav li {
+    clear: left;
+    width: 100%;
+    border-bottom-width: 1px !important;
+    border-right-width: 0 !important;
+    margin: 0 -1px .2em 0 !important;
+}
+.ui-tabs-vertical .ui-tabs-nav li a {
+    display: block;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    width: 113px;
+    padding: 2px 4px !important;
+}
+.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
+    padding-bottom: 0;
+    padding-right: .1em;
+    border-right-width: 1px;
+    border-right-width: 1px;
+}
+.ui-tabs-vertical .ui-tabs-panel {
+    padding: 5px !important;
+    float: right;
+    width: 365px;
+}
+/* switch metacode set */
+
+#metacodeSwitchTabs {
+    width: 100%;
+    font-family: LatoLight, Arial, Sans-Serif;
+    font-size: 17px;
+    line-height: 21px;
+}
+#metacodeSwitchTabs .setTitle {
+    font-family: Lato, Arial, sans-serif;
+}
+.metacodeSetList {
+    max-height: 167px;
+    overflow: hidden;
+    margin: 10px 0;
+    border-bottom: 1px solid #BBB;
+}
+.customMetacodeList {
+    height: 301px;
+    overflow: hidden;
+    margin: 15px 0;
+    border-bottom: 1px solid #BBB;
+}
+.customMetacodeList ul li {
+    cursor: pointer;
+}
+.customMetacodeList ul li, .metacodeSetList ul li {
+    list-style-type: none;
+    display: block;
+    padding: 0px;
+    width: 110px;
+    height: 70px;
+    float: left;
+    text-align: center;
+}
+.customMetacodeList li.toggledOff {
+    opacity: 0.4;
+}
+.customMetacodeList ul img, .metacodeSetList ul img {
+    width: 40px;
+    height: 40px;
+    margin: 0 auto;
+}
+.customMetacodeList ul p, .metacodeSetList ul p {
+    display: block;
+    margin: 0;
+    background: none;
+    font-size: 14px;
+    line-height: 14px;
+    font-family: Lato;
+}
+#metacodeSwitchTabs button.button {
+    width: auto !important;
+    padding: 0 10px;
+    font-weight: normal;
 }
 
-.openLightbox {
-  cursor:pointer;
-}
+/* about */
 
 #about > p {
- color: #000;
- font-size: 16px;
- line-height: 24px;
- margin:10px 0;
+    color: #000;
+    font-size: 16px;
+    line-height: 24px;
+    margin: 10px 0;
 }
-
 #about ul {
-  list-style:none;
+    list-style: none;
 }
 #about ul li {
-  display:inline-block;
-  padding:5px;
+    display: inline-block;
+    padding: 5px;
 }
 #about li a {
-  color:#097A51;
+    color: #097A51;
 }
-
 /* invite */
 
 #invite {
-  color:black;
+    color: black;
 }
-
 #invite p {
-  margin:10px 0;
-  line-height:24px;
+    margin: 10px 0;
+    line-height: 24px;
 }
-
 #invite .green {
-  text-align:center;
-  display:block;
-  color:#097A51;
+    text-align: center;
+    display: block;
+    color: #097A51;
 }
-
 /* new map */
+
 .new_map {
-  color:black;
+    color: black;
 }
-
 .new_map .inputGroup {
-  margin: 15px 0 5px;
+    margin: 15px 0 5px;
 }
-
 .new_map label {
-  float:left;
-  width: 100px;
-  text-align: right;
-  margin-right: 15px;
+    float: left;
+    width: 100px;
+    text-align: right;
+    margin-right: 15px;
 }
-
 .new_map input[type="text"] {
-width: 336px;
-height: 32px;
-font-size: 15px;
-direction: ltr;
--webkit-appearance: none;
-appearance: none;
-display: inline-block;
-margin: 0;
-padding: 0 8px;
-background: #fff;
-border: 1px solid #d9d9d9;
-border-top: 1px solid #c0c0c0;
--webkit-box-sizing: border-box;
--moz-box-sizing: border-box;
-box-sizing: border-box;
--webkit-border-radius: 1px;
--moz-border-radius: 1px;
-border-radius: 1px;
-font: -webkit-small-control;
-color: initial;
-letter-spacing: normal;
-word-spacing: normal;
-text-transform: none;
-text-indent: 0px;
-text-shadow: none;
-display: inline-block;
-text-align: start;
-font-family:arial;
+    width: 336px;
+    height: 32px;
+    font-size: 15px;
+    direction: ltr;
+    -webkit-appearance: none;
+    appearance: none;
+    display: inline-block;
+    margin: 0;
+    padding: 0 8px;
+    background: #fff;
+    border: 1px solid #d9d9d9;
+    border-top: 1px solid #c0c0c0;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    -webkit-border-radius: 1px;
+    -moz-border-radius: 1px;
+    border-radius: 1px;
+    font: -webkit-small-control;
+    color: initial;
+    letter-spacing: normal;
+    word-spacing: normal;
+    text-transform: none;
+    text-indent: 0px;
+    text-shadow: none;
+    display: inline-block;
+    text-align: start;
+    font-family: arial;
 }
-.new_map input[type="text"]:hover, .new_map textarea:hover {
-  border: 1px solid #b9b9b9;
-  border-top: 1px solid #a0a0a0;
-  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
-  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
-  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+.new_map input[type="text"]:hover,
+.new_map textarea:hover {
+    border: 1px solid #b9b9b9;
+    border-top: 1px solid #a0a0a0;
+    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+    -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
 }
-
 .new_map textarea {
-  padding:8px;
-  border: 1px solid #d9d9d9;
-  border-top: 1px solid #c0c0c0;
-  resize:none;
-  font: -webkit-small-control;
-  letter-spacing: normal;
-  word-spacing: normal;
-  text-transform: none;
-  text-indent: 0px;
-  text-shadow: none;
-  text-align: start;
-  font-family:arial;
-  font-size:15px;
-  line-height:17px;
-  width:318px;
+    padding: 8px;
+    border: 1px solid #d9d9d9;
+    border-top: 1px solid #c0c0c0;
+    resize: none;
+    font: -webkit-small-control;
+    letter-spacing: normal;
+    word-spacing: normal;
+    text-transform: none;
+    text-indent: 0px;
+    text-shadow: none;
+    text-align: start;
+    font-family: arial;
+    font-size: 15px;
+    line-height: 17px;
+    width: 318px;
 }
-
 .new_map .permIcon {
-  float:left;
-  width:92px;
-  height: 85px;
-  position:relative;
+    float: left;
+    width: 92px;
+    height: 85px;
+    position: relative;
 }
 .new_map .mapPermIcon {
-  width:60px;
-  height:60px;
-  background-size: 48px 48px;
-  background-position: center center;
-  background-repeat: no-repeat;
-  margin:0 auto;
-  cursor:pointer;
+    width: 60px;
+    height: 60px;
+    background-size: 48px 48px;
+    background-position: center center;
+    background-repeat: no-repeat;
+    margin: 0 auto;
+    cursor: pointer;
 }
 .new_map .mapCommonsIcon {
-  background-image: url(MMCCicon_commons.png);
+    background-image: url(MMCCicon_commons.png);
 }
 .new_map .mapPublicIcon {
-  background-image: url(MMCCicon_public.png);
+    background-image: url(MMCCicon_public.png);
 }
 .new_map .mapPrivateIcon {
-  background-image: url(MMCCicon_private.png);
+    background-image: url(MMCCicon_private.png);
 }
-.new_map .mapCommonsIcon.selected, .new_map .mapCommonsIcon:hover {
-  background-image: url(MMCCicon_commons_black.png);
+.new_map .mapCommonsIcon.selected,
+.new_map .mapCommonsIcon:hover {
+    background-image: url(MMCCicon_commons_black.png);
 }
-.new_map .mapPublicIcon.selected, .new_map .mapPublicIcon:hover {
-  background-image: url(MMCCicon_public_black.png);
+.new_map .mapPublicIcon.selected,
+.new_map .mapPublicIcon:hover {
+    background-image: url(MMCCicon_public_black.png);
 }
-.new_map .mapPrivateIcon.selected, .new_map .mapPrivateIcon:hover {
-  background-image: url(MMCCicon_private_black.png);
+.new_map .mapPrivateIcon.selected,
+.new_map .mapPrivateIcon:hover {
+    background-image: url(MMCCicon_private_black.png);
 }
-
 .new_map .permIcon h4 {
-  font-style:italic;
-  font-family: 'Vinyl';
-  text-transform:uppercase;
-  font-size:18px;
-  line-height:20px;
-  color:black;
-  text-align:center;
+    font-style: italic;
+    font-family: 'Vinyl';
+    text-transform: uppercase;
+    font-size: 18px;
+    line-height: 20px;
+    color: black;
+    text-align: center;
 }
-
 .new_map .tip {
-  display:none;
-   position: absolute;
- background: black;
- width: 150px;
- top: 85px;
- left: -29px;
- color: white;
- border-radius: 4px;
- font-size:15px !important;
- font-family:'LatoRegular';
- line-height:17px;
- padding: 3px 5px 2px;
- z-index:100;
- text-align:center;
+    display: none;
+    position: absolute;
+    background: black;
+    width: 150px;
+    top: 85px;
+    left: -29px;
+    color: white;
+    border-radius: 4px;
+    font-size: 15px !important;
+    font-family: 'LatoRegular';
+    line-height: 17px;
+    padding: 3px 5px 2px;
+    z-index: 100;
+    text-align: center;
 }
 .new_map .hoverForTip:hover .tip {
-  display:block;
+    display: block;
 }
-
 .permText {
-  width: 360px;
-  margin: 0 auto;
-  text-align: center;
+    width: 360px;
+    margin: 0 auto;
+    text-align: center;
 }
-
 .buttonWrapper {
-  margin: 10px 0 0 131px;
-  width: 254px;
+    margin: 10px 0 0 131px;
+    width: 254px;
 }
-
 .onConsole .new_map button {
-  margin-right: 20px;
+    margin-right: 20px;
 }
-
-.onConsole .new_map button, .onConsole .new_map input.add {
-  float: left;
-  margin-top: 5px;
-  height: 40px;
-  font-family: 'LatoItalic';
-  font-size: 17px;
-  width: auto;
-  padding: 0 30px;
-  cursor:pointer;
-  font-weight:normal;
+.onConsole .new_map button,
+.onConsole .new_map input.add {
+    float: left;
+    margin-top: 5px;
+    height: 40px;
+    font-family: 'LatoItalic';
+    font-size: 17px;
+    width: auto;
+    padding: 0 30px;
+    cursor: pointer;
+    font-weight: normal;
 }
-.onConsole .new_map button:hover, .onConsole .new_map input.add:hover {
-  -webkit-box-shadow: none;
-  box-shadow: none;
+.onConsole .new_map button:hover,
+.onConsole .new_map input.add:hover {
+    -webkit-box-shadow: none;
+    box-shadow: none;
 }
-
 /* Cheatsheet */
 
 .cheatsheetColumn {
- float:left;
- width:245px;
- line-height: 17px;
-font-size: 12px;
-font-family: arial;
+    float: left;
+    width: 245px;
+    line-height: 17px;
+    font-size: 12px;
+    font-family: arial;
 }
 .cheatsheetColumn.cOne {
- margin-right:10px;
+    margin-right: 10px;
 }
-
 #cheatsheet h4 {
-text-decoration: underline;
-font-size: 20px;
-font-family: 'vinyl';
-margin-top: 15px;
-font-style: italic;
+    text-decoration: underline;
+    font-size: 20px;
+    font-family: 'vinyl';
+    margin-top: 15px;
+    font-style: italic;
 }
-
 #cheatsheet .csItem {
-margin: 5px 0;
+    margin: 5px 0;
 }
-
 #cheatsheet .csTitle {
-font-weight: bold;
+    font-weight: bold;
 }
-
-
 /* Admin Pages */
 
 #wrapper > div.blackBox {
-width: 700px;
-margin: 0 auto;
-padding: 20px 0 20px 20px;
-background: rgba(0,0,0,0.4);
-color: white;
-height: 100%;
-overflow: hidden;
-position: relative;
+    width: 700px;
+    margin: 0 auto;
+    padding: 20px 0 20px 20px;
+    background: rgba(0, 0, 0, 0.4);
+    color: white;
+    height: 100%;
+    overflow: hidden;
+    position: relative;
 }
-
 .blackBox .metacodeSetsDescription {
-  width: 340px;   
+    width: 314px;
 }
-
 .blackBox tr:nth-child(odd) {
-  background: rgba(0, 0, 0, 0.2);
+    background: rgba(0, 0, 0, 0.2);
 }
 .blackBox tr:nth-child(even) {
-  background: rgba(0, 0, 0, 0.3);
+    background: rgba(0, 0, 0, 0.3);
 }
-
-.blackBox th, .blackBox td {
-  padding:10px;   
+.blackBox th,
+.blackBox td {
+    padding: 10px;
 }
-
 .blackBox .field {
-  margin: 15px 0 5px;
+    margin: 15px 0 5px;
 }
-
 .blackBox label {
-  float:left;
-  width: 100px;
-  margin-right: 15px;
+    float: left;
+    width: 100px;
+    margin-right: 15px;
 }
-
 .blackBox input[type="text"] {
-width: 336px;
-height: 32px;
-font-size: 15px;
-direction: ltr;
--webkit-appearance: none;
-appearance: none;
-display: inline-block;
-margin: 0;
-padding: 0 8px;
-background: #fff;
-border: 1px solid #d9d9d9;
-border-top: 1px solid #c0c0c0;
--webkit-box-sizing: border-box;
--moz-box-sizing: border-box;
-box-sizing: border-box;
--webkit-border-radius: 1px;
--moz-border-radius: 1px;
-border-radius: 1px;
-font: -webkit-small-control;
-color: initial;
-letter-spacing: normal;
-word-spacing: normal;
-text-transform: none;
-text-indent: 0px;
-text-shadow: none;
-display: inline-block;
-text-align: start;
-font-family:arial;
+    width: 336px;
+    height: 32px;
+    font-size: 15px;
+    direction: ltr;
+    -webkit-appearance: none;
+    appearance: none;
+    display: inline-block;
+    margin: 0;
+    padding: 0 8px;
+    background: #fff;
+    border: 1px solid #d9d9d9;
+    border-top: 1px solid #c0c0c0;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    -webkit-border-radius: 1px;
+    -moz-border-radius: 1px;
+    border-radius: 1px;
+    font: -webkit-small-control;
+    color: initial;
+    letter-spacing: normal;
+    word-spacing: normal;
+    text-transform: none;
+    text-indent: 0px;
+    text-shadow: none;
+    display: inline-block;
+    text-align: start;
+    font-family: arial;
 }
-.blackBox input[type="text"]:hover, .blackBox textarea:hover {
-  border: 1px solid #b9b9b9;
-  border-top: 1px solid #a0a0a0;
-  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
-  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
-  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+.blackBox input[type="text"]:hover,
+.blackBox textarea:hover {
+    border: 1px solid #b9b9b9;
+    border-top: 1px solid #a0a0a0;
+    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+    -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
 }
-
 .blackBox textarea {
-  padding:8px;
-  border: 1px solid #d9d9d9;
-  border-top: 1px solid #c0c0c0;
-  resize:none;
-  font: -webkit-small-control;
-  letter-spacing: normal;
-  word-spacing: normal;
-  text-transform: none;
-  text-indent: 0px;
-  text-shadow: none;
-  text-align: start;
-  font-family:arial;
-  font-size:15px;
-  line-height:17px;
-  width:318px;
+    padding: 8px;
+    border: 1px solid #d9d9d9;
+    border-top: 1px solid #c0c0c0;
+    resize: none;
+    font: -webkit-small-control;
+    letter-spacing: normal;
+    word-spacing: normal;
+    text-transform: none;
+    text-indent: 0px;
+    text-shadow: none;
+    text-align: start;
+    font-family: arial;
+    font-size: 15px;
+    line-height: 17px;
+    width: 318px;
 }
-
 .blackBox .allMetacodes {
-  padding:5px 0;
+    padding: 5px 0;
 }
-
 .blackBox a.button {
-  margin-right: 20px;
-  line-height: 40px;
+    margin-right: 20px;
+    line-height: 40px;
 }
-
-.blackBox a.button, .blackBox input.add {
-  float: left;
-  margin-top: 5px;
-  height: 40px;
-  font-family: 'LatoItalic';
-  font-size: 17px;
-  width: auto;
-  padding: 0 30px;
-  cursor:pointer;
-  font-weight:normal;
+.blackBox a.button,
+.blackBox input.add {
+    float: left;
+    margin-top: 5px;
+    height: 40px;
+    font-family: 'LatoItalic';
+    font-size: 17px;
+    width: auto;
+    padding: 0 30px;
+    cursor: pointer;
+    font-weight: normal;
 }
-.blackBox a.button:hover, .blackBox input.add:hover {
-  -webkit-box-shadow: none;
-  box-shadow: none;
+.blackBox a.button:hover,
+.blackBox input.add:hover {
+    -webkit-box-shadow: none;
+    box-shadow: none;
 }
-
 /* FAQ */
 
 #wrapper > div.FAQ {
-width: 700px;
-margin: 0 auto;
-padding: 20px 0 20px 20px;
-background: rgba(0,0,0,0.4);
-color: white;
-height: 100%;
-overflow: hidden;
-position: relative;
+    width: 700px;
+    margin: 0 auto;
+    padding: 20px 0 20px 20px;
+    background: rgba(0, 0, 0, 0.4);
+    color: white;
+    height: 100%;
+    overflow: hidden;
+    position: relative;
 }
-
 .FAQ .question {
-display: block;
-background: rgba(0,0,0,0.4);
-padding: 10px 45px 10px 10px;
-font-weight: bold;
-margin-bottom: 10px;
-margin-right: 20px;
-line-height:24px;
-position:relative;
-cursor:pointer;
+    display: block;
+    background: rgba(0, 0, 0, 0.4);
+    padding: 10px 45px 10px 10px;
+    font-weight: bold;
+    margin-bottom: 10px;
+    margin-right: 20px;
+    line-height: 24px;
+    position: relative;
+    cursor: pointer;
 }
-
 .FAQ .answer {
-padding: 0 30px;
-margin-bottom: 20px;
-line-height: 24px;
-margin-right: 20px;
+    padding: 0 30px;
+    margin-bottom: 20px;
+    line-height: 24px;
+    margin-right: 20px;
 }
 .FAQ .answer.off {
-  display:none;
+    display: none;
 }
-
 .FAQ .switch {
-position:absolute;
-top:0;
-right:0;
-width: 35px;
-height: 44px;
-background-repeat: no-repeat;
-background-position:center center;
-background-image: url('/assets/MMCCicon_maximize_arrow.png');
-background-size: 25px 25px;
-cursor: pointer;
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 35px;
+    height: 44px;
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-image: url('/assets/MMCCicon_maximize_arrow.png');
+    background-size: 25px 25px;
+    cursor: pointer;
 }
 .FAQ .minimizeAnswer {
-background-image: url('/assets/MMCCicon_minimize_arrow.png') !important;
+    background-image: url('/assets/MMCCicon_minimize_arrow.png') !important;
 }
-
 /* request */
 
 #wrapper .requestInvite {
-  width: 700px;
-  margin: 0 auto;
-  padding: 20px;
-  background: rgba(0,0,0,0.4);
-  color: white;
-  height: 100%;
-  overflow: hidden;
+    width: 700px;
+    margin: 0 auto;
+    padding: 20px;
+    background: rgba(0, 0, 0, 0.4);
+    color: white;
+    height: 100%;
+    overflow: hidden;
 }
-
-
 /* --- styling the logo button ---*/
 
 .footer {
-  display: block;
-  position: fixed;
-  bottom: 5px;
-  height: 35px;
-  z-index: 15000;
-  border-bottom-right-radius:5px;
-  border-top-right-radius:5px;
-  background: #0F1519;
+    display: block;
+    position: fixed;
+    bottom: 5px;
+    height: 35px;
+    z-index: 15000;
+    border-bottom-right-radius: 5px;
+    border-top-right-radius: 5px;
+    background: #0F1519;
 }
-
 .addMap {
-position: absolute;
-right: -49px;
-top: 0px;
-width: 44px;
-height: 35px;
-background: #0F1519 url('MMCCicon_add_map.png') no-repeat 3px -4px;
-background-size: 40px 40px;
-border-radius: 5px;
-cursor:pointer;
+    position: absolute;
+    right: -49px;
+    top: 0px;
+    width: 44px;
+    height: 35px;
+    background: #0F1519 url('MMCCicon_add_map.png') no-repeat 3px -4px;
+    background-size: 40px 40px;
+    border-radius: 5px;
+    cursor: pointer;
 }
-.addMap:hover {
- 
+.addMap:hover {} .logo {
+    z-index: 12;
+    display: block;
+    width: 136px;
+    background: url(menu_icon_32.png) no-repeat -10px 8px;
+    padding: 5px 0px 1px 15px;
+    background-size: 22px 20px;
 }
-
-.logo {
-  z-index:12;
-  display:block;
-  width: 136px;
-background: url(menu_icon_32.png) no-repeat -10px 8px;
-padding: 5px 0px 1px 15px;
-background-size: 22px 20px;
-}
-
 #mainTitle {
-  padding: 0 5px;
+    padding: 0 5px;
 }
-
 #mainTitle a {
-  color:#FFF;
-  font-family: "vinyl",sans-serif;
-  font-style: italic;
-  text-transform:uppercase;
-  font-weight: 400;
-  font-size:30px;
-  line-height:30px;
+    color: #FFF;
+    font-family: "vinyl", sans-serif;
+    font-style: italic;
+    text-transform: uppercase;
+    font-weight: 400;
+    font-size: 30px;
+    line-height: 30px;
 }
-
 .footer .menu {
-  display:none;
-  position:absolute;
-  border:none;
-  bottom:35px;
-  left:-1px;
-  height:123px;
-  z-index:12;
-  width:122px;
-  color: white;
-  white-space: nowrap;
-  text-align: center;
-  font-size: 16px;
-  overflow: hidden;
-  padding: 0 0 0 30px;
-  margin: 0;
-  background: #0F1519 url(beta_gen002.png) no-repeat 6px 12px;
+    display: none;
+    position: absolute;
+    border: none;
+    bottom: 35px;
+    left: -1px;
+    height: 123px;
+    z-index: 12;
+    width: 122px;
+    color: white;
+    white-space: nowrap;
+    text-align: center;
+    font-size: 16px;
+    overflow: hidden;
+    padding: 0 0 0 30px;
+    margin: 0;
+    background: #0F1519 url(beta_gen002.png) no-repeat 6px 12px;
 }
-
 .footer ul li {
-  margin:0;
-  clear:both;
-  float:none;
-  list-style-type:none;
-  display:block;
-  padding:0;
-  text-align:center;
-  font-family:'vinyl';
-  font-style:italic;
-  height:30px;
-  line-height:34px;
-  font-size:17px;
-  cursor:pointer;
+    margin: 0;
+    clear: both;
+    float: none;
+    list-style-type: none;
+    display: block;
+    padding: 0;
+    text-align: center;
+    font-family: 'vinyl';
+    font-style: italic;
+    height: 30px;
+    line-height: 34px;
+    font-size: 17px;
+    cursor: pointer;
 }
-.footer ul li:hover {
-  
+.footer ul li:hover {} li.meta a,
+li.tutorial a,
+li.exploreMaps a {
+    display: block;
 }
-
-li.meta a, li.tutorial a, li.exploreMaps a {
-  display:block;
+li.meta,
+li.tutorial,
+li.exploreMaps {
+    border-top: 1px solid white;
 }
-
-li.meta, li.tutorial, li.exploreMaps {
-  border-top:1px solid white;
-}
-
 .footer ul li a {
-  color: #FFF;
+    color: #FFF;
 }
-
 .home_bg {
-  display:block;
-  height:100%;
+    display: block;
+    height: 100%;
 }
-
-
 /* home page */
 
 div#preloaded-images {
-   position: absolute;
-   overflow: hidden;
-   left: -9999px; 
-   top: -9999px;
+    position: absolute;
+    overflow: hidden;
+    left: -9999px;
+    top: -9999px;
 }
-
 .home_content {
-  width: 830px;
-  margin:0 auto;
+    width: 830px;
+    margin: 0 auto;
 }
-
 span.blue {
-  color: #36bbe8;
+    color: #36bbe8;
 }
-
 .home_desc {
-font-family: 'LatoLight';
-font-size: 32px;
-margin: 40px 20px 25px;
-text-align:center;
+    font-family: 'LatoLight';
+    font-size: 32px;
+    margin: 40px 20px 25px;
+    text-align: center;
 }
 .home_desc .welcomeTo {
-  text-transform: uppercase;
-  font-size: 50px;
-  font-family: 'Vinyl';
-  font-style: italic;
+    text-transform: uppercase;
+    font-size: 50px;
+    font-family: 'Vinyl';
+    font-style: italic;
 }
-
 .home_content .request {
-  margin-right:17px !important;
+    margin-right: 17px !important;
 }
-.home_content .request, .home_content .learnmore {
-margin: 5px auto;
-background: white;
-height: 40px;
-font-family: 'Vinyl';
-font-size: 18px;
-font-style: italic;
-width: 135px;
-padding: 0 15px;
-cursor: pointer;
-color:black;
-line-height:44px;
-font-weight: normal;
-text-transform: uppercase;
+.home_content .request,
+.home_content .learnmore {
+    margin: 5px auto;
+    background: white;
+    height: 40px;
+    font-family: 'Vinyl';
+    font-size: 18px;
+    font-style: italic;
+    width: 135px;
+    padding: 0 15px;
+    cursor: pointer;
+    color: black;
+    line-height: 44px;
+    font-weight: normal;
+    text-transform: uppercase;
 }
-.home_content .request:hover, .home_content .learnmore:hover {
-background: white;
--webkit-box-shadow: none;
-box-shadow: none;
+.home_content .request:hover,
+.home_content .learnmore:hover {
+    background: white;
+    -webkit-box-shadow: none;
+    box-shadow: none;
 }
-
-.metamapsIs {
-
+.metamapsIs {} .metamapsIs .swapWord {
+    display: block;
 }
-.metamapsIs .swapWord {
-  display: block;
-}
-
 #homeMapImage {
-  margin:5px auto;
+    margin: 5px auto;
 }
-
 .featuredMaps {
-  margin: 15px 0;
-  font-size:20px;
-  line-height:20px;
-  text-align:center;
+    margin: 15px 0;
+    font-size: 20px;
+    line-height: 20px;
+    text-align: center;
 }
-
 #homeMap {
-  width:738px;
-  margin: 0 auto;
-  height:265px;
-  position:relative;
-  overflow:hidden;
+    width: 738px;
+    margin: 0 auto;
+    height: 265px;
+    position: relative;
+    overflow: hidden;
 }
-#homeFigure { 
-  height: 265px; 
-  width:1290px;
-  margin:0;
-} 
-#homeFigure figure { 
-  float:left;
-  margin:10px !important;
-  overflow:hidden;
+#homeFigure {
+    height: 265px;
+    width: 1290px;
+    margin: 0;
+}
+#homeFigure figure {
+    float: left;
+    margin: 10px !important;
+    overflow: hidden;
 }
-
 #homeMap .mapPerm {
-height: 40px;
-background-repeat: no-repeat;
-background-position: 7px center;
-background-size: 27px 27px;
-position: relative;
-padding-left:40px;
-line-height:40px;
+    height: 40px;
+    background-repeat: no-repeat;
+    background-position: 7px center;
+    background-size: 27px 27px;
+    position: relative;
+    padding-left: 40px;
+    line-height: 40px;
 }
 #homeMap .mapPerm.co {
-background-image: url(MMCCicon_commons.png);
+    background-image: url(MMCCicon_commons.png);
 }
 #homeMap .mapPerm.pu {
-background-image: url(MMCCicon_public.png);
+    background-image: url(MMCCicon_public.png);
 }
 #homeMap .mapPerm.pr {
-background-image: url(MMCCicon_private.png);
+    background-image: url(MMCCicon_private.png);
 }
-
 .mapContains {
-  position:absolute;
-  height:40px;
-  line-height:40px;
-  bottom:0;
-  width:100%;
+    position: absolute;
+    height: 40px;
+    line-height: 40px;
+    bottom: 0;
+    width: 100%;
 }
 .mapContains span {
-  display:inline-block;
-  text-align:left;
-  padding-left: 27px; 
+    display: inline-block;
+    text-align: left;
+    padding-left: 27px;
 }
-
 .mapContains .topicCount {
-  background-image: url(MMCCicon_topic.png);
-  background-size: 20px 20px;
-  background-repeat: no-repeat;
-background-position: 5px center;
-line-height: 40px;
-width:72px;
+    background-image: url(MMCCicon_topic.png);
+    background-size: 20px 20px;
+    background-repeat: no-repeat;
+    background-position: 5px center;
+    line-height: 40px;
+    width: 72px;
 }
 .mapContains .synapseCount {
-  background-image: url(MMCCicon_synapse_black.png);
-  background-size: 20px 20px;
-  background-repeat: no-repeat;
-background-position: 5px center;
-line-height: 40px;
-width:95px;
+    background-image: url(MMCCicon_synapse_black.png);
+    background-size: 20px 20px;
+    background-repeat: no-repeat;
+    background-position: 5px center;
+    line-height: 40px;
+    width: 95px;
 }
-
-
-#homeFigure figure .littleOverlay { 
-position: absolute; 
-top: 100%; 
-width: 100%;  
-z-index: 2; 
-background: rgba(255, 255, 255, 0); 
-transition: .6s; 
-border-radius:5px;
+#homeFigure figure .littleOverlay {
+    position: absolute;
+    top: 100%;
+    width: 100%;
+    z-index: 2;
+    background: rgba(255, 255, 255, 0);
+    transition: .6s;
+    border-radius: 5px;
 }
-
-#homeFigure figure:hover .littleOverlay { 
-  /*top: 0; 
+#homeFigure figure:hover .littleOverlay {
+    /*top: 0; 
   background: rgba(255,255,255, 0.9); 
   bottom: 0; */
 }
-
-
-#homeMap .map, #homeMap .mapCard {
-  height:226px;
+#homeMap .map,
+#homeMap .mapCard {
+    height: 226px;
 }
-
 .socialIcons {
-  position:fixed;
-  bottom: 0px;
-  height: 37px;
-  right:0px;
+    position: fixed;
+    bottom: 0px;
+    height: 37px;
+    right: 0px;
 }
 .socialIcons a {
-  float:left;
-  height:30px;
-  width:30px;
-  margin: 0 7px 7px 0px;
-  background-repeat:no-repeat;
-  background-size:30px 30px;
+    float: left;
+    height: 30px;
+    width: 30px;
+    margin: 0 7px 7px 0px;
+    background-repeat: no-repeat;
+    background-size: 30px 30px;
 }
 .socialIcons .twitter {
-  background-image: url('MMSocial-51.png');
+    background-image: url('MMSocial-51.png');
 }
 .socialIcons .google {
-  background-image: url('MMSocial-52.png');
+    background-image: url('MMSocial-52.png');
 }
 .socialIcons .wordpress {
-  background-image: url('MMSocial-53.png');
+    background-image: url('MMSocial-53.png');
 }
-
-
 .contact {
-  text-align: center;
-  margin: 1em 0 1em 0;
+    text-align: center;
+    margin: 1em 0 1em 0;
 }
-
 .contact a {
-  color: #36bbe8;
+    color: #36bbe8;
 }
-
 #edit_synapse label,
 #edit_synapse_left,
 #edit_synapse_right {
-  display: inline-block;
+    display: inline-block;
 }
-
 #edit_synapse label.left {
-  margin-right: 0.5em;
+    margin-right: 0.5em;
 }
-
 .templates {
-  display:none;
-}
+    display: none;
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/base.css b/app/assets/stylesheets/base.css
index 46f71e51..291e38ee 100644
--- a/app/assets/stylesheets/base.css
+++ b/app/assets/stylesheets/base.css
@@ -103,7 +103,7 @@
   
 }
 
-.best_in_place_name input{
+.best_in_place_name textarea, .best_in_place_name input {
 height: 15px;
 padding: 5px 0;
 width: 100%;
diff --git a/app/controllers/users_controller.rb b/app/controllers/users_controller.rb
index 203ee909..ac97d22e 100644
--- a/app/controllers/users_controller.rb
+++ b/app/controllers/users_controller.rb
@@ -26,5 +26,19 @@ class UsersController < ApplicationController
     respond_with(@user, location: session[:previous_url]) do |format|
     end
   end
+    
+  # PUT /user/updatemetacodes
+  def updatemetacodes
+    @user = current_user
+    
+    @m = params[:metacodes][:value]
+    @user.settings.metacodes=@m.split(',')
+    
+    @user.save
+
+    respond_to do |format|
+      format.json { render json: @user }
+    end
+  end
 
 end
diff --git a/app/views/layouts/_account.html.erb b/app/views/layouts/_account.html.erb
index 2fa1ebc0..6d281697 100644
--- a/app/views/layouts/_account.html.erb
+++ b/app/views/layouts/_account.html.erb
@@ -8,7 +8,7 @@
   <h3 class="accountHeader">Hello <%= account.name.split[0...1][0] %>!</h3>
   <ul>
     <li class="accountIcon accountMaps"><a href="/maps/mappers/<%= account.id %>">My Maps</a></li>
-    <li class="accountIcon accountSettings"><%= link_to "Settings", edit_user_url(account) %></li>
+    <li class="accountIcon accountSettings"><%= link_to "Account", edit_user_url(account) %></li>
     <% if account.admin %>
       <li class="accountIcon accountSettings"><%= link_to "Admin", metacodes_path %></li>
     <% end %>
diff --git a/app/views/layouts/_lightboxes.html.erb b/app/views/layouts/_lightboxes.html.erb
index 4f46b6ba..92e10a71 100644
--- a/app/views/layouts/_lightboxes.html.erb
+++ b/app/views/layouts/_lightboxes.html.erb
@@ -6,7 +6,7 @@
 
 <div id="lightbox_overlay">
   <div id="lightbox_main">
-    <a id="lightbox_close" onclick="cancelMapCreate('fork_map');cancelMapCreate('new_map');return false;" href="#"></a>
+    <a id="lightbox_close" onclick="cancelMetacodeSetSwitch();cancelMapCreate('fork_map');cancelMapCreate('new_map');return false;" href="#"></a>
     <div id="lightbox_content">
       
       <div class="lightboxContent" id="about">
@@ -36,7 +36,7 @@
       
       <div class="lightboxContent" id="cheatsheet">
         <%= render :partial => 'layouts/cheatsheet' %>
-      </div>
+      </div>    
       
       <% if authenticated? %>
         <div class="lightboxContent" id="invite">
@@ -58,11 +58,15 @@
         <div class="lightboxContent" id="forkmap">  
           <%= render :partial => 'maps/fork' %>
         </div>
+
+        <div class="lightboxContent" id="switchMetacodes">
+          <%= render :partial => 'layouts/switchmetacodes' %>
+        </div>
         <% end %>
       <% end %>
       
     </div>
   </div>
-  <div id="lightbox_screen" onclick="cancelMapCreate('fork_map');cancelMapCreate('new_map');return false;" style="height: 100%;"></div>
+  <div id="lightbox_screen" onclick="cancelMetacodeSetSwitch();cancelMapCreate('fork_map');cancelMapCreate('new_map');return false;" style="height: 100%;"></div>
 </div>
 
diff --git a/app/views/layouts/_searchtemplates.html.erb b/app/views/layouts/_searchtemplates.html.erb
deleted file mode 100644
index 7f9ed8c5..00000000
--- a/app/views/layouts/_searchtemplates.html.erb
+++ /dev/null
@@ -1,108 +0,0 @@
-<%#
-  # @file
-  # templates for the upper right autocomplete results
-  #%>
-
-<div class="templates">
-
-<script type="text/template" class="topicTemplate">
-<div class="result{{rtype}}">
-  <div class="topicMetacode">
-    <img src="{{typeImageURL}}" class="topicIcon" />
-    <span class="metacodeTip">{{type}}</span>
-  </div>
-  <div class="resultText">
-    <p class="resultTitle">{{label}}</p>
-    <p class="resultDesc">{{description}}</p>
-  </div>
-  <div class="autoOptions">
-    
-    <% if controller_name == 'maps' && action_name == 'show' && authenticated? && @map.authorize_to_edit(@current) %>
-    <button class="addToMap hoverForTip" onclick="return keepFromCommons(event, {{id}})">
-      <span class="tip">add to map</span>
-    </button>
-    <% end %>
-    <a href="/topics/{{id}}" target="_blank" class="goTo hoverForTip">
-      <span class="tip">open in new tab</span>
-    </a>
-    <div class="mapCount hoverForTip">
-      <span class="tip">appears on this # of maps</span>
-      {{mapCount}}
-    </div>
-    <div class="synapseCount hoverForTip">
-      <span class="tip"> has this # of synapses</span>
-      {{synapseCount}}
-    </div>
-    <div class="topicOriginatorIcon hoverForTip">
-      <span class="tip topicOriginator">created by {{originator}}</span>
-    </div>
-    <div class="topicPermission {{permission}} hoverForTip">
-      <span class="tip">topic is {{permission}}</span>
-    </div>
-  </div>
-  <div class="clearfloat"></div>
-</div>
-</script>
-
-<script type="text/template" class="mapTemplate">
-<div class="result{{rtype}}">
-  <img class="icon" src="/assets/map.png">
-  <div class="resultText">
-    <p class="resultTitle">{{label}}</p>
-    <p class="resultDesc">{{description}}</p>
-  </div>
-  <div class="autoOptions">
-    <a href="/maps/{{id}}" target="_blank" class="goTo hoverForTip">
-      <span class="tip">open in new tab</span>
-    </a>
-    <div class="topicCount hoverForTip">
-      <span class="tip">has this # of topics</span>
-      {{topicCount}}
-    </div>
-    <div class="synapseCount hoverForTip">
-      <span class="tip">has this # of synapses</span>
-      {{synapseCount}}
-    </div>
-    <div class="mapContributorsIcon hoverForTip">
-      <span class="tip mapContributors">{{contributorList}}</span>
-      {{contributorCount}}
-    </div>
-    <div class="mapPermission {{permission}} hoverForTip">
-      <span class="tip">map is {{permission}}</span>
-    </div>
-  </div>
-  <div class="clearfloat"></div>
-</div>
-</script>
-
-<script type="text/template" class="mapperTemplate">
-<div class="result{{rtype}}">
-  <img class="icon" width="28" height="28" src="/assets/MMCCicon_mapper.png">
-  <div class="resultText">
-    <p class="resultTitle">{{label}}</p>
-  </div>
-  <div class="autoOptions">
-    <a href="/maps/mappers/{{id}}" target="_blank" class="goTo hoverForTip">
-      <span class="tip">open in new tab</span>
-    </a>
-    <div class="mapCount hoverForTip">
-      <span class="tip">created this # of maps</span>
-      {{mapCount}}
-    </div>
-  </div>
-  <div class="clearfloat"></div>
-</div>
-</script>
-
-<script type="text/template" class="synapseTemplate">
-  <div class="result{{rtype}}">
-  <p class="autocompleteSection synapseDesc">{{label}}</p>
-  <div class="autocompleteSection synapsePermission {{permission}}"></div>
-  <div class="autocompleteSection synapseOriginatorIcon hoverForTip">
-    <span class="tip synapseOriginator">{{originator}}</span>
-  </div>
-  <div class="clearfloat"></div>
-  </div>
-</script>
-
-</div>
\ No newline at end of file
diff --git a/app/views/layouts/_switchmetacodes.html.erb b/app/views/layouts/_switchmetacodes.html.erb
new file mode 100644
index 00000000..67f68992
--- /dev/null
+++ b/app/views/layouts/_switchmetacodes.html.erb
@@ -0,0 +1,69 @@
+<%#
+  # @file
+  # The inner HTML for switching your metacode set
+  #%>
+
+<% metacodes = current_user.settings.metacodes %>
+<% selectedSet = metacodes[0].include?("metacodeset") ? metacodes[0].sub("metacodeset-","")  : "custom" %>
+<% allMetacodeSets = MetacodeSet.order("name").all %>
+<% if selectedSet == "custom" 
+     index = allMetacodeSets.length
+   else
+     set = MetacodeSet.find(selectedSet.to_i)
+     index = allMetacodeSets.index(set)   
+   end %>
+<h3>Switch Metacode Set</h3>
+        
+<div id="metacodeSwitchTabs">
+  <ul>
+    <% allMetacodeSets.each do |m| %>
+    <li><a href="#metacodeSwitchTabs<%= m.id %>" data-set-id="<%= m.id %>"><%= m.name %></a></li>
+    <% end %>
+    <li><a href="#metacodeSwitchTabsCustom" data-set-id="custom" id="metacodeSetCustom">Custom</a></li>
+  </ul>
+  <% allMetacodeSets.each_with_index do |m, localindex| %>
+  <div id="metacodeSwitchTabs<%= m.id %>"
+       data-metacodes="<%= m.metacodes.map(&:name).join(',') %>">
+    <p class="setTitle"><%= m.name %></p>
+    <p><%= m.desc %></p>
+    <% @list = '' %>
+    <% m.metacodes.sort{|x,y| x.name <=> y.name }.each_with_index do |m, index| %>
+      <% @list += '<li><img src="' + m.icon + '" alt="' + m.name + '" /><p>' + m.name.downcase + '</p><div class="clearfloat"></div></li>' %> 
+    <% end %>
+    <div class="metacodeSetList">
+      <ul>
+        <%= @list.html_safe %>
+      </ul>
+      <div class="clearfloat"></div>
+    </div>
+    <button class="button" onclick="updateMetacodeSet(<%= m.id %>, <%= localindex %>, false);">Switch to Set</button>
+  </div>
+  <% end %>
+    <div id="metacodeSwitchTabsCustom">
+        <p>Pick Your Own Metacodes</p>
+        <% @list = '' %>
+        <% Metacode.order("name").all.each_with_index do |m, index| %>
+          <% if selectedSet == "custom" %>
+            <% mClass = metacodes.index(m.id.to_s) == nil ? "toggledOff" : "" %>
+          <% else %>
+            <% mClass = "toggledOff" %>
+          <% end %>
+          <% @list += '<li id="' + m.id.to_s + '" data-name="' + m.name + '" class="' + mClass + '"><img src="' + m.icon + '" alt="' + m.name + '" /><p>' + m.name.downcase + '</p><div class="clearfloat"></div></li>' %> 
+        <% end %>
+
+        <div class="customMetacodeList">
+          <ul>
+            <%= @list.html_safe %>
+          </ul>
+          <div class="clearfloat"></div>
+        </div>
+        <button class="button" onclick="updateMetacodeSet('custom', <%= allMetacodeSets.length %>, true);">Switch to Custom Set</button>
+    </div>
+</div>
+
+<div class="clearfloat"></div>
+
+<script>
+MetamapsModel.selectedMetacodeSet = "metacodeset-<%= selectedSet %>";
+MetamapsModel.selectedMetacodeSetIndex = <%= index %>;
+</script>
\ No newline at end of file
diff --git a/app/views/layouts/_templates.html.erb b/app/views/layouts/_templates.html.erb
new file mode 100644
index 00000000..5040089f
--- /dev/null
+++ b/app/views/layouts/_templates.html.erb
@@ -0,0 +1,157 @@
+<%#
+  # @file
+  # templates for the upper right autocomplete results
+  #%>
+
+<div class="templates">
+
+    <script type="text/template" id="topicSearchTemplate">
+    <div class="result{{rtype}}">
+      <div class="topicMetacode">
+        <img src="{{typeImageURL}}" class="topicIcon" />
+        <span class="metacodeTip">{{type}}</span>
+      </div>
+      <div class="resultText">
+        <p class="resultTitle">{{label}}</p>
+        <p class="resultDesc">{{description}}</p>
+      </div>
+      <div class="autoOptions">
+
+        <% if controller_name == 'maps' && action_name == 'show' && authenticated? && @map.authorize_to_edit(@current) %>
+        <button class="addToMap hoverForTip" onclick="return keepFromCommons(event, {{id}})">
+          <span class="tip">add to map</span>
+        </button>
+        <% end %>
+        <div class="goTo hoverForTip">
+          <span class="tip">open in new tab</span>
+        </div>
+        <div class="mapCount hoverForTip">
+          <span class="tip">appears on this # of maps</span>
+          {{mapCount}}
+        </div>
+        <div class="synapseCount hoverForTip">
+          <span class="tip"> has this # of synapses</span>
+          {{synapseCount}}
+        </div>
+        <div class="topicOriginatorIcon hoverForTip">
+          <span class="tip topicOriginator">created by {{originator}}</span>
+        </div>
+        <div class="topicPermission {{permission}} hoverForTip">
+          <span class="tip">topic is {{permission}}</span>
+        </div>
+      </div>
+      <div class="clearfloat"></div>
+    </div>
+    </script>
+
+    <script type="text/template" id="mapSearchTemplate">
+    <div class="result{{rtype}}">
+      <img class="icon" src="/assets/map.png">
+      <div class="resultText">
+        <p class="resultTitle">{{label}}</p>
+        <p class="resultDesc">{{description}}</p>
+      </div>
+      <div class="autoOptions">
+        <div class="goTo hoverForTip">
+          <span class="tip">open in new tab</span>
+        </div>
+        <div class="topicCount hoverForTip">
+          <span class="tip">has this # of topics</span>
+          {{topicCount}}
+        </div>
+        <div class="synapseCount hoverForTip">
+          <span class="tip">has this # of synapses</span>
+          {{synapseCount}}
+        </div>
+        <div class="mapContributorsIcon hoverForTip">
+          <span class="tip mapContributors">{{contributorList}}</span>
+          {{contributorCount}}
+        </div>
+        <div class="mapPermission {{permission}} hoverForTip">
+          <span class="tip">map is {{permission}}</span>
+        </div>
+      </div>
+      <div class="clearfloat"></div>
+    </div>
+    </script>
+
+    <script type="text/template" id="mapperSearchTemplate">
+    <div class="result{{rtype}}">
+      <img class="icon" width="28" height="28" src="/assets/MMCCicon_mapper.png">
+      <div class="resultText">
+        <p class="resultTitle">{{label}}</p>
+      </div>
+      <div class="autoOptions">
+        <div class="goTo hoverForTip">
+          <span class="tip">open in new tab</span>
+        </div>
+        <div class="mapCount hoverForTip">
+          <span class="tip">created this # of maps</span>
+          {{mapCount}}
+        </div>
+      </div>
+      <div class="clearfloat"></div>
+    </div>
+    </script>
+
+    <script type="text/template" id="synapseAutocompleteTemplate">
+      <div class="result{{rtype}}">
+      <p class="autocompleteSection synapseDesc">{{label}}</p>
+      <div class="autocompleteSection synapsePermission {{permission}}"></div>
+      <div class="autocompleteSection synapseOriginatorIcon hoverForTip">
+        <span class="tip synapseOriginator">{{originator}}</span>
+      </div>
+      <div class="clearfloat"></div>
+      </div>
+    </script>
+
+    <script type="text/template" id="topicAutocompleteTemplate">
+        <img class="autocompleteSection topicType" width="22" height="22" src="{{typeImageURL}}" alt="{{type}}" title="{{type}}" />
+        <p class="autocompleteSection topicTitle">{{label}}</p>
+        <div class="autocompleteSection topicPermission {{permission}}"></div>
+        <div class="autocompleteSection topicOriginatorIcon hoverForTip">
+            <span class="tip topicOriginator">{{originator}}</span>
+        </div>
+        <div class="clearfloat"></div>
+    </script>
+
+
+    <script type="text/template" id="topicCardTemplate">
+    <div class="CardOnGraph" id="topic_{{id}}">
+        <span class="title">                                                  
+              <span class="best_in_place best_in_place_name"                      
+                    data-url="/topics/{{id}}"                                     
+                    data-object="topic"                                           
+                    data-attribute="name"                                         
+                    data-type="textarea">{{name}}</span> 
+        </span>
+        <div class="links">
+            <div class="linkItem icon">
+                <div class="metacodeTitle">{{metacode}}</div>
+                <div class="metacodeImage" style="background-image:url({{imgsrc}});" title="click and drag to move card"></div>
+            </div>
+            <div class="linkItem contributor hoverForTip">
+                <div class="tip">Created by {{username}} on {{date}}</div>
+            </div>
+            <a href="/maps/topics/{{id}}" class="linkItem mapCount hoverForTip" title="Click to see which maps topic appears on" target="_blank">                  
+                 {{map_count}}                                                    
+               </a> 
+            <div class="linkItem synapseCount">{{synapse_count}}</div>
+            <div class="linkItem mapPerm {{mk_permission}}"></div>
+            <a href="/topics/{{id}}" class="linkItem topicPopout" title="Open topic in new tab" target="_blank"></a>
+            <div class="clearfloat"></div>
+        </div>
+        <div class="metacodeSelect">{{{metacode_select}}}</div>
+        <div class="scroll">
+            <div class="desc">
+                <span class="best_in_place best_in_place_desc" data-url="/topics/{{id}}" data-object="topic" data-nil="{{desc_nil}}" data-attribute="desc" data-type="textarea">{{desc}}</span> 
+                <div class="clearfloat"></div>
+            </div>
+        </div>
+        <div class="link">
+            {{a_tag}}<span class="best_in_place best_in_place_link" data-url="/topics/{{id}}" data-object="topic" data-nil="{{link_nil}}" data-attribute="link" data-type="input">{{link}}</span>{{close_a_tag}} {{{go_link}}}
+        </div>
+        <div class="clearfloat"></div>
+    </div>
+    </script>
+</div>
\ No newline at end of file
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 8d2178db..80840a96 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -51,7 +51,7 @@
         <div class="sidebarSearchIcon"></div>
         <input type="text" class="sidebarSearchField"></input>
         <div class="clearfloat"></div>
-        <%= render :partial => 'layouts/searchtemplates' %>
+        <%= render :partial => 'layouts/templates' %>
       </div>
       <div class="sidebarAccount">
         <div class="sidebarAccountIcon"></div>
diff --git a/app/views/maps/_map.html.erb b/app/views/maps/_map.html.erb
index 50135c67..e1daaf22 100644
--- a/app/views/maps/_map.html.erb
+++ b/app/views/maps/_map.html.erb
@@ -8,7 +8,7 @@
   
 	  <div class="mapCard">                                                   
       <span class="title">                                                  
-        <%= best_in_place map, :name, :type => :input, :classes => 'best_in_place_name' %>                             
+        <%= best_in_place map, :name, :type => :textarea, :classes => 'best_in_place_name' %>                             
       </span>                                                              
       <div class="links">                                                   
          <div class="linkItem icon">                                             
@@ -25,7 +25,7 @@
       </div>                                                                
       <div class="scroll">                                                    
         <div class="desc">                                                    
-          <%= best_in_place map, :desc, :type => :textarea, :nil => "<span class='gray'>Click to add description.</span>", :classes => 'best_in_place_desc' %>                          
+          <%= best_in_place map, :desc, :type => :textarea, :nil => "Click to add description.", :classes => 'best_in_place_desc' %>                          
           <div class="clearfloat"></div>                                
         </div>                                                                
       </div>                                                                  
diff --git a/app/views/maps/_mapinfobox.html.erb b/app/views/maps/_mapinfobox.html.erb
index d7c17056..1c808a4e 100644
--- a/app/views/maps/_mapinfobox.html.erb
+++ b/app/views/maps/_mapinfobox.html.erb
@@ -35,7 +35,7 @@
   
   <% if (authenticated? && @map.authorize_to_edit(user)) || (!authenticated?  && @map.desc != "" && @map.desc != nil )%>
   <div class="mapInfoDesc">
-    <%= best_in_place @map, :desc, :type => :textarea, :nil => "<span class='gray'>Click to add description.</span>", :classes => 'best_in_place_desc' %>
+    <%= best_in_place @map, :desc, :type => :textarea, :nil => "Click to add description.", :classes => 'best_in_place_desc' %>
   </div>
   <% end %>
   
diff --git a/app/views/maps/_newtopic.html.erb b/app/views/maps/_newtopic.html.erb
index 1bf9a218..8ba65f32 100644
--- a/app/views/maps/_newtopic.html.erb
+++ b/app/views/maps/_newtopic.html.erb
@@ -4,11 +4,17 @@
   #%>
 <div class="anypage">
 <%= form_for Topic.new, url: topics_url, remote: true do |form| %>
+  <div class="openMetacodeSwitcher openLightbox" data-open="switchMetacodes"></div>
   <div id="metacodeImg">
     <% @m = user.settings.metacodes %>
-    <% @metacodes = [] %>
-    <% @m.each do |m| %>
-      <% @metacodes.push(Metacode.find(m.to_i)) %>
+    <% set = @m[0].include?("metacodeset") ? MetacodeSet.find(@m[0].sub("metacodeset-","").to_i) : false %>
+    <% if set %>
+      <% @metacodes = set.metacodes %>
+    <% else %>
+      <% @metacodes = [] %>
+      <% @m.each do |m| %>
+        <% @metacodes.push(Metacode.find(m.to_i)) %>
+      <% end %>
     <% end %>
     <% @metacodes.sort! {|m1,m2| m2.name.downcase <=> m1.name.downcase }.rotate!(-1) %>
     <% @metacodes.each do |metacode| %>
@@ -26,5 +32,15 @@
   <%= form.hidden_field :addSynapse, :value => false %>
   <div id="metacodeImgTitle"></div>
   <div class="clearfloat"></div>
+<script>
+<% @metacodes.each do |metacode| %>
+  <% if !set %>
+    MetamapsModel.selectedMetacodes.push("<%= metacode.id %>");
+    MetamapsModel.newSelectedMetacodes.push("<%= metacode.id %>");
+    MetamapsModel.selectedMetacodeNames.push("<%= metacode.name %>");
+    MetamapsModel.newSelectedMetacodeNames.push("<%= metacode.name %>");
+  <% end %>
+<% end %> 
+</script>
 <% end %>
 </div>
diff --git a/app/views/maps/show.html.erb b/app/views/maps/show.html.erb
index 306abe4f..58a3b3a8 100644
--- a/app/views/maps/show.html.erb
+++ b/app/views/maps/show.html.erb
@@ -59,247 +59,63 @@
 <div class="clearfloat"></div>
 
 <% if authenticated? %>
+
+  <% # add these if you have edit permissions on the map %>
   <% if @map.permission == "commons" || @map.user == user %>
+    
+    <% # for creating and pulling in topics and synapses %>
     <%= render :partial => 'newtopic' %>
     <%= render :partial => 'newsynapse' %>
-  <% end %>
-  <%= render :partial => 'main/metacodeoptions' %>
-  
-  <% # for saving layouts %>
-  <% if @map.permission == "commons" || @map.user == user %>
-	  <%= form_for @map, :url => savelayout_path(@map), :html => { :class => "saveMapLayout", :id => "saveMapLayout"}, remote: true do |form| %>
+
+    <% # for saving the layout of the map %>
+    <%= form_for @map, :url => savelayout_path(@map), :html => { :class => "saveMapLayout", :id => "saveMapLayout"}, remote: true do |form| %>
 	    <%= form.hidden_field "coordinates", :value => "" %>
-	  <% end %>
-  <% end %>
-<% end %>
-  
-<script>
-  $(document).ready(function() {   
-   function bindFilterHover() {
-      
-      var filterIsOpen = false;
-      
-      // controls the sliding hover of the bottom left menu
-      var sliding1 = false; 
-      var lT;
-      
-      var closeFilter = function() {
-        lT = setTimeout(function() { 
-            if (! sliding1) { 
-              sliding1 = true;
-              $('.sidebarFilterIcon').css('background-color','#0F1519');
-              $('.sidebarFilterBox').fadeOut(200, function() {
-                sliding1 = false;
-                filterIsOpen = false; 
-              });
-            } 
-          },300); 
-      }
-      
-      var openFilter = function() {
-        clearTimeout(lT);
-        if (! sliding1) { 
-            sliding1 = true;
-            
-            // hide the other two
-            $('.sidebarAccountBox').hide();
-            $('.sidebarWandBox').hide();
-            $('.sidebarAccountIcon').css('background-color','#0F1519');
-            $('.sidebarWandIcon').css('background-color','#0F1519');
-            
-            $('.sidebarFilterIcon').css('background-color','#000');
-            $('.sidebarFilterBox').fadeIn(200, function() {
-                 sliding1 = false;
-                 filterIsOpen = true;
-            });
-        }
-      }
-        // bind the hover events
-        $(".sidebarFilter").hover(openFilter, closeFilter);
-        
-   } // end bindFilterHover
-   
-   function bindInfoHover() {
-      
-      var infoIsOpen = false;
-      
-      // controls the sliding hover of the bottom left menu
-      var sliding1 = false; 
-      var lT;
-      
-      var closeInfo = function() {
-        lT = setTimeout(function() { 
-            if (! sliding1) { 
-              sliding1 = true;
-              $('.mapInfoBox').fadeOut(200, function() {
-                sliding1 = false;
-                infoIsOpen = false; 
-              });
-            } 
-          },300); 
-      }
-      
-      var openInfo = function(event) {
-        clearTimeout(lT);
-        if (! sliding1 && event.target.className != "openCheatsheet openLightbox") { 
-            sliding1 = true;
-            
-            $('.mapInfoBox').fadeIn(200, function() {
-                 sliding1 = false;
-                 infoIsOpen = true;
-            });
-        }
-      }
-        // bind the hover events
-        $("div.index").hover(openInfo, closeInfo);
-        
-        
-   } // end bindInfoHover
-  
-   bindFilterHover();
-   bindInfoHover();
-   
-  $('.sidebarSave').click(function() {
-    saveLayoutAll();
-  });
-  $('.sidebarFork').click(function() {
-    saveToMap();
-  });
-   
-   $(".sidebarCollaborateIcon").click(function(event) {
-      if (!goRealtime) {
-        $('.sidebarCollaborate .tip').html('Stop Realtime Collaboration');
-      } else {
-        $('.sidebarCollaborate .tip').html('Start Realtime Collaboration');
-      }
-      goRealtime = !goRealtime;      
-      $(".sidebarCollaborateIcon").toggleClass("blue");
-   });
-   
-   // initialize best_in_place editing
-   $('.authenticated div.permission.canEdit .best_in_place').best_in_place();
-   
-   <% if @map.user == user %>
-     // ability to change permission
-    var selectingPermission = false;
-     $('.yourMap .mapPermission').click(function() {
-      if (!selectingPermission) {  
-        selectingPermission = true;
-        $(this).addClass('minimize'); // this line flips the drop down arrow to a pull up arrow
-        if ( $(this).hasClass('commons') ) {
-          $(this).append('<ul class="permissionSelect"><li class="public"></li><li class="private"></li></ul>');
-        } else if ( $(this).hasClass('public') ) {
-          $(this).append('<ul class="permissionSelect"><li class="commons"></li><li class="private"></li></ul>');
-        } else if ( $(this).hasClass('private') ) {
-          $(this).append('<ul class="permissionSelect"><li class="commons"></li><li class="public"></li></ul>');
-        }
-        $('.mapPermission .permissionSelect li').click(function(event) {
-          selectingPermission = false;
-          var permission = $(this).attr('class');
-          updateMapPermission(mapid, permission);
-          event.stopPropagation();
-        });
-      } else {
-        selectingPermission = false;
-        $(this).removeClass('minimize'); // this line flips the pull up arrow to a drop down arrow
-        $('.mapPermission .permissionSelect').remove();
-      }
-     });
     <% end %>
-   
-   //bind best_in_place ajax callbacks
-    $('.mapInfoName .best_in_place_name').bind("ajax:success", function() {
-      var name = $(this).html();
-      $('.mapName').html(name);
-    });
-   
-   $('.showcard').draggable({ handle: ".metacodeImage" });
-   $('#showcard').resizable({
-     maxHeight: 500,
-     maxWidth: 500,
-     minHeight: 320,
-     minWidth: 226,
-     resize: function( event, ui ) {
-       var p = $('#showcard').find('.scroll');
-       p.height( p.height() ).mCustomScrollbar('update');
-     }
-   }).css({
-     display: 'none',
-     top: '300px',
-     left: '100px'
-   });
-   
-  });
-  
-  
-  var dragged = 0;
-  mapid = <%= @map.id %>;
-  <% if (@map.permission == "commons" && authenticated?) || @map.user == user %>
-    mapperm = true;
+
   <% end %>
-  
-  viewMode = "graph";
-	json = <%= @mapjson %>;
-	if (json.length > 0) {
-		$(window).load(function() {
-			<% if (@map.arranged) %>
-				initialize("arranged");
-			<% else %>
-				initialize("chaotic");
-			<% end %>
-		});
-	}
-  else {
-		$(window).load(function() {
-				initialize("chaotic", true);
-		});
-	}
-  //window.realtime.socket = io.connect('http://gentle-savannah-1303.herokuapp.com'); // this is for the heroku staging environment
-  //window.realtime.socket = io.connect('http://metamaps.cc:5001'); // this is for metamaps.cc
-  window.realtime.socket = io.connect('http://localhost:5001'); // this is for localhost development
-    
-  window.realtime.socket.on('connect', function() {
-      subscribeToRooms();
-      console.log('socket connected');
-  });
-  function subscribeToRooms() {
-    window.realtime.socket.on('maps-' + mapid, function(data) {
-      //as long as you weren't the origin of the changes, update your map
-      if (data.origin != userid && goRealtime) {
-        if (data.resource == 'Topic') {
-          topic = $.parseJSON(data.obj);
-          
-          if (data.action == 'create') {
-            window.realtime.addTopicToMap(topic);
-          }
-          else if (data.action == 'update' && Mconsole.graph.getNode(topic.id) != 'undefined') {
-            window.realtime.updateTopicOnMap(topic);
-          }
-          else if (data.action == 'destroy' && Mconsole.graph.getNode(topic.id) != 'undefined') {
-            hideNode(topic.id)
-          }
-          
-          return;
-        }
-        else if (data.resource == 'Synapse') {
-          synapse = $.parseJSON(data.obj);
-          
-          if (data.action == 'create') {
-            window.realtime.addSynapseToMap(synapse);
-          }
-          else if (data.action == 'update' && 
-                   Mconsole.graph.getAdjacence(synapse.data.$direction['0'], synapse.data.$direction['1']) != 'undefined') {
-            window.realtime.updateSynapseOnMap(synapse);
-          }
-          else if (data.action == 'destroy' && 
-                   Mconsole.graph.getAdjacence(synapse.data.$direction['0'], synapse.data.$direction['1']) != 'undefined') {
-            var edge = Mconsole.graph.getAdjacence(synapse.data.$direction['0'], synapse.data.$direction['1']);
-            hideEdge(edge);
-          }
-          
-          return;
-        }
-      }
+
+  <% # for populating the change metacode list on the topic card %>
+  <%= render :partial => 'main/metacodeoptions' %>
+<% end %>
+
+
+<script>
+var dragged = 0;
+mapid = <%= @map.id %>; 
+<% if (@map.permission == "commons" && authenticated? ) || @map.user == user %>
+    mapperm = true; 
+<% end %>
+
+viewMode = "graph";
+json = <%= @mapjson %>;
+if (json.length > 0) {
+    $(window).load(function () { 
+        <% if (@map.arranged) %>
+            initialize("arranged"); 
+        <% else %>
+            initialize("chaotic");
+        <% end %>
     });
-  }
+} else {
+    $(window).load(function () {
+        initialize("chaotic", true);
+    });
+}
+    
+<% if authenticated? && (@map.permission == "commons" || @map.user == user) %>
+// this is for the heroku staging environment
+//window.realtime.socket = io.connect('http://gentle-savannah-1303.herokuapp.com'); 
+    
+// this is for metamaps.cc
+//window.realtime.socket = io.connect('http://metamaps.cc:5001'); 
+    
+// this is for localhost development    
+window.realtime.socket = io.connect('http://localhost:5001'); 
+
+window.realtime.socket.on('connect', function () {
+    console.log('socket connected');
+    window.realtime.setupSocket();
+});
+<% end %>
+    
 </script>
\ No newline at end of file
diff --git a/app/views/metacode_sets/edit.html.erb b/app/views/metacode_sets/edit.html.erb
index c43741ca..1c472eb6 100644
--- a/app/views/metacode_sets/edit.html.erb
+++ b/app/views/metacode_sets/edit.html.erb
@@ -20,7 +20,6 @@ $(document).ready(function() {
   $('#metacodes_value').val(selectMetacodes.toString());
   
   $('.editMetacodes li').click(function() {
-    console.log($(this).attr('class'));
     if ($(this).attr('class') != 'toggledOff') {
       $(this).addClass('toggledOff');
       var value_to_remove = $(this).attr('id');
diff --git a/app/views/topics/show.html.erb b/app/views/topics/show.html.erb
index f44bc1ac..703af0a5 100644
--- a/app/views/topics/show.html.erb
+++ b/app/views/topics/show.html.erb
@@ -35,7 +35,7 @@
 
 <div class="index">
   <div class="openCheatsheet openLightbox" data-open="cheatsheet"></div>
-  <span><img width="35" height="35" src="/assets/<%= @topic.metacode.icon %>"></span>
+  <span><img width="35" height="35" src="<%= @topic.metacode.icon %>"></span>
   <span class="mapName"><%= @topic.name %></span>
   <div class="clearfloat"></div>
 </div>
@@ -55,76 +55,7 @@
 <% end %>
 
 <script>
-	$(document).ready(function() {
-   
-   function bindFilterHover() {
-      
-      var filterIsOpen = false
-      
-      // controls the sliding hover of the bottom left menu
-      var sliding1 = false; 
-      var lT;
-      
-      var closeFilter = function() {
-        lT = setTimeout(function() { 
-            if (! sliding1) { 
-              sliding1 = true;
-              $('.sidebarFilterIcon').css('background-color','#0F1519');
-              $('.sidebarFilterBox').fadeOut(200, function() {
-                sliding1 = false;
-                filterIsOpen = false; 
-              });
-            } 
-          },300); 
-      }
-      
-      var openFilter = function() {
-        clearTimeout(lT);
-        if (! sliding1) { 
-            sliding1 = true;
-            
-            // hide the other two
-            $('.sidebarAccountBox').hide();
-            $('.sidebarWandBox').hide();
-            $('.sidebarAccountIcon').css('background-color','#0F1519');
-            $('.sidebarWandIcon').css('background-color','#0F1519');
-            
-            $('.sidebarFilterIcon').css('background-color','#000');
-            $('.sidebarFilterBox').fadeIn(200, function() {
-                 sliding1 = false;
-                 filterIsOpen = true;
-            });
-        }
-      }
-        // bind the hover events
-        $(".sidebarFilter").hover(openFilter, closeFilter);
-        
-   } // end bindFilterHover
-   bindFilterHover();
-   
-   $('.sidebarFork').click(function() {
-    saveToMap();
-  });
-   
-   // initialize best_in_place editing
-   $('.authenticated div.permission.canEdit .best_in_place').best_in_place();
-   
-   $('.showcard').draggable({ handle: ".icon" });
-   $('#showcard').resizable({
-     maxHeight: 500,
-     maxWidth: 500,
-     minHeight: 320,
-     minWidth: 226
-   }).css({
-     display: 'none',
-     top: '300px',
-     left: '100px'
-   });
-   
-  });
-  
-  
-  json = <%= @relatives %>;
+	json = <%= @relatives %>;
 	$(window).load(function() {
 		initialize("centered");
 	});
diff --git a/config/routes.rb b/config/routes.rb
index 69851d6e..75471303 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -41,6 +41,7 @@ ISSAD::Application.routes.draw do
   devise_scope :user do
     get "sign_out", :to => "devise/sessions#destroy"
   end
+  match 'user/updatemetacodes', to: 'users#updatemetacodes', via: :post, as: :updatemetacodes
   
   resources :users, except: [:show, :index]
 
diff --git a/realtime/realtime-server.js b/realtime/realtime-server.js
index 87f4bc78..f85a54f0 100644
--- a/realtime/realtime-server.js
+++ b/realtime/realtime-server.js
@@ -30,14 +30,48 @@ function start() {
   redis.subscribe('maps');
 
   io.on('connection', function(socket){
+      
+    // this will ping everyone on a map with updates to the map
     redis.on('message', function(channel, message){
       console.log(message);
       var m = JSON.parse(message);
-      var room;
-      room = 'maps-' + m.mapid;
+      var room = 'maps-' + m.mapid;
     
       socket.emit(room, m);
     });
+      
+    // this will ping a new person with awareness of who's already on the map
+    socket.on('updateNewMapperList', function(data) {
+        var existingUser = { userid: data.userid, username: data.username };
+        socket.broadcast.emit(data.userToNotify + '-' + data.mapid + '-UpdateMapperList', existingUser);
+    });
+      
+    // this will ping everyone on a map that there's a person just joined the map
+    socket.on('newMapperNotify', function (data) {
+        socket.set('mapid', data.mapid);
+        socket.set('userid', data.userid);
+        socket.set('username', data.username);
+        
+        var newUser = { userid: data.userid, username: data.username };
+        
+        socket.broadcast.emit('maps-' + data.mapid + '-newmapper',  newUser);
+    });
+      
+    // this will ping everyone on a map that there's a person just left the map
+    socket.on('disconnect', function () {
+        var socketUserName, socketUserID;
+        socket.get('userid', function (err, id) {
+            socketUserID = id;
+        });
+        socket.get('username', function (err, name) {
+            socketUserName = name;
+        });
+        var data = { username: socketUserName, userid: socketUserID };
+        socket.get('mapid', function (err, mapid) {
+            socket.broadcast.emit('maps-' + mapid + '-lostmapper',  data);
+        });
+    });
+      
   });
 }
 
diff --git a/vendor/assets/stylesheets/jquery-ui-1.10.0.custom.min.css b/vendor/assets/stylesheets/jquery-ui-1.10.0.custom.min.css
deleted file mode 100644
index 615c4bd4..00000000
--- a/vendor/assets/stylesheets/jquery-ui-1.10.0.custom.min.css
+++ /dev/null
@@ -1,5 +0,0 @@
-/*! jQuery UI - v1.10.0 - 2013-01-17
-* http://jqueryui.com
-* Includes: jquery.ui.core.css, jquery.ui.accordion.css, jquery.ui.autocomplete.css, jquery.ui.button.css, jquery.ui.datepicker.css, jquery.ui.dialog.css, jquery.ui.menu.css, jquery.ui.progressbar.css, jquery.ui.resizable.css, jquery.ui.selectable.css, jquery.ui.slider.css, jquery.ui.spinner.css, jquery.ui.tabs.css, jquery.ui.tooltip.css
-* To view and modify this theme, visit http://jqueryui.com/themeroller/
-* Copyright (c) 2013 jQuery Foundation and other contributors Licensed MIT */.ui-helper-hidden{display:none}.ui-helper-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.ui-helper-reset{margin:0;padding:0;border:0;outline:0;line-height:1.3;text-decoration:none;font-size:100%;list-style:none}.ui-helper-clearfix:before,.ui-helper-clearfix:after{content:"";display:table}.ui-helper-clearfix:after{clear:both}.ui-helper-clearfix{min-height:0}.ui-helper-zfix{width:100%;height:100%;top:0;left:0;position:absolute;opacity:0;filter:Alpha(Opacity=0)}.ui-front{z-index:100}.ui-state-disabled{cursor:default!important}.ui-icon{display:block;text-indent:-99999px;overflow:hidden;background-repeat:no-repeat}.ui-widget-overlay{position:fixed;top:0;left:0;width:100%;height:100%}.ui-accordion .ui-accordion-header{display:block;cursor:pointer;position:relative;margin-top:2px;padding:.5em .5em .5em .7em;min-height:0}.ui-accordion .ui-accordion-icons{padding-left:2.2em}.ui-accordion .ui-accordion-noicons{padding-left:.7em}.ui-accordion .ui-accordion-icons .ui-accordion-icons{padding-left:2.2em}.ui-accordion .ui-accordion-header .ui-accordion-header-icon{position:absolute;left:.5em;top:50%;margin-top:-8px}.ui-accordion .ui-accordion-content{padding:1em 2.2em;border-top:0;overflow:auto}.ui-autocomplete{position:absolute;top:0;left:0;cursor:default}.ui-button{display:inline-block;position:relative;padding:0;line-height:normal;margin-right:.1em;cursor:pointer;vertical-align:middle;text-align:center;overflow:visible}.ui-button,.ui-button:link,.ui-button:visited,.ui-button:hover,.ui-button:active{text-decoration:none}.ui-button-icon-only{width:2.2em}button.ui-button-icon-only{width:2.4em}.ui-button-icons-only{width:3.4em}button.ui-button-icons-only{width:3.7em}.ui-button .ui-button-text{display:block;line-height:normal}.ui-button-text-only .ui-button-text{padding:.4em 1em}.ui-button-icon-only .ui-button-text,.ui-button-icons-only .ui-button-text{padding:.4em;text-indent:-9999999px}.ui-button-text-icon-primary .ui-button-text,.ui-button-text-icons .ui-button-text{padding:.4em 1em .4em 2.1em}.ui-button-text-icon-secondary .ui-button-text,.ui-button-text-icons .ui-button-text{padding:.4em 2.1em .4em 1em}.ui-button-text-icons .ui-button-text{padding-left:2.1em;padding-right:2.1em}input.ui-button{padding:.4em 1em}.ui-button-icon-only .ui-icon,.ui-button-text-icon-primary .ui-icon,.ui-button-text-icon-secondary .ui-icon,.ui-button-text-icons .ui-icon,.ui-button-icons-only .ui-icon{position:absolute;top:50%;margin-top:-8px}.ui-button-icon-only .ui-icon{left:50%;margin-left:-8px}.ui-button-text-icon-primary .ui-button-icon-primary,.ui-button-text-icons .ui-button-icon-primary,.ui-button-icons-only .ui-button-icon-primary{left:.5em}.ui-button-text-icon-secondary .ui-button-icon-secondary,.ui-button-text-icons .ui-button-icon-secondary,.ui-button-icons-only .ui-button-icon-secondary{right:.5em}.ui-buttonset{margin-right:7px}.ui-buttonset .ui-button{margin-left:0;margin-right:-.3em}input.ui-button::-moz-focus-inner,button.ui-button::-moz-focus-inner{border:0;padding:0}.ui-datepicker{width:17em;padding:.2em .2em 0;display:none}.ui-datepicker .ui-datepicker-header{position:relative;padding:.2em 0}.ui-datepicker .ui-datepicker-prev,.ui-datepicker .ui-datepicker-next{position:absolute;top:2px;width:1.8em;height:1.8em}.ui-datepicker .ui-datepicker-prev-hover,.ui-datepicker .ui-datepicker-next-hover{top:1px}.ui-datepicker .ui-datepicker-prev{left:2px}.ui-datepicker .ui-datepicker-next{right:2px}.ui-datepicker .ui-datepicker-prev-hover{left:1px}.ui-datepicker .ui-datepicker-next-hover{right:1px}.ui-datepicker .ui-datepicker-prev span,.ui-datepicker .ui-datepicker-next span{display:block;position:absolute;left:50%;margin-left:-8px;top:50%;margin-top:-8px}.ui-datepicker .ui-datepicker-title{margin:0 2.3em;line-height:1.8em;text-align:center}.ui-datepicker .ui-datepicker-title select{font-size:1em;margin:1px 0}.ui-datepicker select.ui-datepicker-month-year{width:100%}.ui-datepicker select.ui-datepicker-month,.ui-datepicker select.ui-datepicker-year{width:49%}.ui-datepicker table{width:100%;font-size:.9em;border-collapse:collapse;margin:0 0 .4em}.ui-datepicker th{padding:.7em .3em;text-align:center;font-weight:bold;border:0}.ui-datepicker td{border:0;padding:1px}.ui-datepicker td span,.ui-datepicker td a{display:block;padding:.2em;text-align:right;text-decoration:none}.ui-datepicker .ui-datepicker-buttonpane{background-image:none;margin:.7em 0 0 0;padding:0 .2em;border-left:0;border-right:0;border-bottom:0}.ui-datepicker .ui-datepicker-buttonpane button{float:right;margin:.5em .2em .4em;cursor:pointer;padding:.2em .6em .3em .6em;width:auto;overflow:visible}.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current{float:left}.ui-datepicker.ui-datepicker-multi{width:auto}.ui-datepicker-multi .ui-datepicker-group{float:left}.ui-datepicker-multi .ui-datepicker-group table{width:95%;margin:0 auto .4em}.ui-datepicker-multi-2 .ui-datepicker-group{width:50%}.ui-datepicker-multi-3 .ui-datepicker-group{width:33.3%}.ui-datepicker-multi-4 .ui-datepicker-group{width:25%}.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header{border-left-width:0}.ui-datepicker-multi .ui-datepicker-buttonpane{clear:left}.ui-datepicker-row-break{clear:both;width:100%;font-size:0}.ui-datepicker-rtl{direction:rtl}.ui-datepicker-rtl .ui-datepicker-prev{right:2px;left:auto}.ui-datepicker-rtl .ui-datepicker-next{left:2px;right:auto}.ui-datepicker-rtl .ui-datepicker-prev:hover{right:1px;left:auto}.ui-datepicker-rtl .ui-datepicker-next:hover{left:1px;right:auto}.ui-datepicker-rtl .ui-datepicker-buttonpane{clear:right}.ui-datepicker-rtl .ui-datepicker-buttonpane button{float:left}.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,.ui-datepicker-rtl .ui-datepicker-group{float:right}.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header{border-right-width:0;border-left-width:1px}.ui-dialog{position:absolute;top:0;left:0;padding:.2em;outline:0}.ui-dialog .ui-dialog-titlebar{padding:.4em 1em;position:relative}.ui-dialog .ui-dialog-title{float:left;margin:.1em 0;white-space:nowrap;width:90%;overflow:hidden;text-overflow:ellipsis}.ui-dialog .ui-dialog-titlebar-close{position:absolute;right:.3em;top:50%;width:21px;margin:-10px 0 0 0;padding:1px;height:20px}.ui-dialog .ui-dialog-content{position:relative;border:0;padding:.5em 1em;background:none;overflow:auto}.ui-dialog .ui-dialog-buttonpane{text-align:left;border-width:1px 0 0 0;background-image:none;margin-top:.5em;padding:.3em 1em .5em .4em}.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset{float:right}.ui-dialog .ui-dialog-buttonpane button{margin:.5em .4em .5em 0;cursor:pointer}.ui-dialog .ui-resizable-se{width:12px;height:12px;right:-5px;bottom:-5px;background-position:16px 16px}.ui-draggable .ui-dialog-titlebar{cursor:move}.ui-menu{list-style:none;padding:2px;margin:0;display:block;outline:none}.ui-menu .ui-menu{margin-top:-3px;position:absolute}.ui-menu .ui-menu-item{margin:0;padding:0;width:100%}.ui-menu .ui-menu-divider{margin:5px -2px 5px -2px;height:0;font-size:0;line-height:0;border-width:1px 0 0 0}.ui-menu .ui-menu-item a{text-decoration:none;display:block;padding:2px .4em;line-height:1.5;min-height:0;font-weight:normal}.ui-menu .ui-menu-item a.ui-state-focus,.ui-menu .ui-menu-item a.ui-state-active{font-weight:normal;margin:-1px}.ui-menu .ui-state-disabled{font-weight:normal;margin:.4em 0 .2em;line-height:1.5}.ui-menu .ui-state-disabled a{cursor:default}.ui-menu-icons{position:relative}.ui-menu-icons .ui-menu-item a{position:relative;padding-left:2em}.ui-menu .ui-icon{position:absolute;top:.2em;left:.2em}.ui-menu .ui-menu-icon{position:static;float:right}.ui-progressbar{height:2em;text-align:left;overflow:hidden}.ui-progressbar .ui-progressbar-value{margin:-1px;height:100%}.ui-progressbar .ui-progressbar-overlay{background:url("images/animated-overlay.gif");height:100%;filter:alpha(opacity=25);opacity:0.25}.ui-progressbar-indeterminate .ui-progressbar-value{background-image:none}.ui-resizable{position:relative}.ui-resizable-handle{position:absolute;font-size:0.1px;display:block}.ui-resizable-disabled .ui-resizable-handle,.ui-resizable-autohide .ui-resizable-handle{display:none}.ui-resizable-n{cursor:n-resize;height:7px;width:100%;top:-5px;left:0}.ui-resizable-s{cursor:s-resize;height:7px;width:100%;bottom:-5px;left:0}.ui-resizable-e{cursor:e-resize;width:7px;right:-5px;top:0;height:100%}.ui-resizable-w{cursor:w-resize;width:7px;left:-5px;top:0;height:100%}.ui-resizable-se{cursor:se-resize;width:12px;height:12px;right:1px;bottom:1px}.ui-resizable-sw{cursor:sw-resize;width:9px;height:9px;left:-5px;bottom:-5px}.ui-resizable-nw{cursor:nw-resize;width:9px;height:9px;left:-5px;top:-5px}.ui-resizable-ne{cursor:ne-resize;width:9px;height:9px;right:-5px;top:-5px}.ui-selectable-helper{position:absolute;z-index:100;border:1px dotted black}.ui-slider{position:relative;text-align:left}.ui-slider .ui-slider-handle{position:absolute;z-index:2;width:1.2em;height:1.2em;cursor:default}.ui-slider .ui-slider-range{position:absolute;z-index:1;font-size:.7em;display:block;border:0;background-position:0 0}.ui-slider.ui-state-disabled .ui-slider-handle,.ui-slider.ui-state-disabled .ui-slider-range{filter:inherit}.ui-slider-horizontal{height:.8em}.ui-slider-horizontal .ui-slider-handle{top:-.3em;margin-left:-.6em}.ui-slider-horizontal .ui-slider-range{top:0;height:100%}.ui-slider-horizontal .ui-slider-range-min{left:0}.ui-slider-horizontal .ui-slider-range-max{right:0}.ui-slider-vertical{width:.8em;height:100px}.ui-slider-vertical .ui-slider-handle{left:-.3em;margin-left:0;margin-bottom:-.6em}.ui-slider-vertical .ui-slider-range{left:0;width:100%}.ui-slider-vertical .ui-slider-range-min{bottom:0}.ui-slider-vertical .ui-slider-range-max{top:0}.ui-spinner{position:relative;display:inline-block;overflow:hidden;padding:0;vertical-align:middle}.ui-spinner-input{border:none;background:none;color:inherit;padding:0;margin:.2em 0;vertical-align:middle;margin-left:.4em;margin-right:22px}.ui-spinner-button{width:16px;height:50%;font-size:.5em;padding:0;margin:0;text-align:center;position:absolute;cursor:default;display:block;overflow:hidden;right:0}.ui-spinner a.ui-spinner-button{border-top:none;border-bottom:none;border-right:none}.ui-spinner .ui-icon{position:absolute;margin-top:-8px;top:50%;left:0}.ui-spinner-up{top:0}.ui-spinner-down{bottom:0}.ui-spinner .ui-icon-triangle-1-s{background-position:-65px -16px}.ui-tabs{position:relative;padding:.2em}.ui-tabs .ui-tabs-nav{margin:0;padding:.2em .2em 0}.ui-tabs .ui-tabs-nav li{list-style:none;float:left;position:relative;top:0;margin:1px .2em 0 0;border-bottom:0;padding:0;white-space:nowrap}.ui-tabs .ui-tabs-nav li a{float:left;padding:.5em 1em;text-decoration:none}.ui-tabs .ui-tabs-nav li.ui-tabs-active{margin-bottom:-1px;padding-bottom:1px}.ui-tabs .ui-tabs-nav li.ui-tabs-active a,.ui-tabs .ui-tabs-nav li.ui-state-disabled a,.ui-tabs .ui-tabs-nav li.ui-tabs-loading a{cursor:text}.ui-tabs .ui-tabs-nav li a,.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a{cursor:pointer}.ui-tabs .ui-tabs-panel{display:block;border-width:0;padding:1em 1.4em;background:none}.ui-tooltip{padding:8px;position:absolute;z-index:9999;max-width:300px;-webkit-box-shadow:0 0 5px #aaa;box-shadow:0 0 5px #aaa}body .ui-tooltip{border-width:2px}.ui-widget{font-family:Verdana,Arial,sans-serif;font-size:1.1em}.ui-widget .ui-widget{font-size:1em}.ui-widget input,.ui-widget select,.ui-widget textarea,.ui-widget button{font-family:Verdana,Arial,sans-serif;font-size:1em}.ui-widget-content{border:1px solid #aaa;background:#fff url(images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x;color:#222}.ui-widget-content a{color:#222}.ui-widget-header{border:1px solid #aaa;background:#ccc url(images/ui-bg_highlight-soft_75_cccccc_1x100.png) 50% 50% repeat-x;color:#222;font-weight:bold}.ui-widget-header a{color:#222}.ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default{border:1px solid #d3d3d3;background:#e6e6e6 url(images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;font-weight:normal;color:#555}.ui-state-default a,.ui-state-default a:link,.ui-state-default a:visited{color:#555;text-decoration:none}.ui-state-hover,.ui-widget-content .ui-state-hover,.ui-widget-header .ui-state-hover,.ui-state-focus,.ui-widget-content .ui-state-focus,.ui-widget-header .ui-state-focus{border:1px solid #999;background:#dadada url(images/ui-bg_glass_75_dadada_1x400.png) 50% 50% repeat-x;font-weight:normal;color:#212121}.ui-state-hover a,.ui-state-hover a:hover,.ui-state-hover a:link,.ui-state-hover a:visited{color:#212121;text-decoration:none}.ui-state-active,.ui-widget-content .ui-state-active,.ui-widget-header .ui-state-active{border:1px solid #aaa;background:#fff url(images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x;font-weight:normal;color:#212121}.ui-state-active a,.ui-state-active a:link,.ui-state-active a:visited{color:#212121;text-decoration:none}.ui-state-highlight,.ui-widget-content .ui-state-highlight,.ui-widget-header .ui-state-highlight{border:1px solid #fcefa1;background:#fbf9ee url(images/ui-bg_glass_55_fbf9ee_1x400.png) 50% 50% repeat-x;color:#363636}.ui-state-highlight a,.ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a{color:#363636}.ui-state-error,.ui-widget-content .ui-state-error,.ui-widget-header .ui-state-error{border:1px solid #cd0a0a;background:#fef1ec url(images/ui-bg_glass_95_fef1ec_1x400.png) 50% 50% repeat-x;color:#cd0a0a}.ui-state-error a,.ui-widget-content .ui-state-error a,.ui-widget-header .ui-state-error a{color:#cd0a0a}.ui-state-error-text,.ui-widget-content .ui-state-error-text,.ui-widget-header .ui-state-error-text{color:#cd0a0a}.ui-priority-primary,.ui-widget-content .ui-priority-primary,.ui-widget-header .ui-priority-primary{font-weight:bold}.ui-priority-secondary,.ui-widget-content .ui-priority-secondary,.ui-widget-header .ui-priority-secondary{opacity:.7;filter:Alpha(Opacity=70);font-weight:normal}.ui-state-disabled,.ui-widget-content .ui-state-disabled,.ui-widget-header .ui-state-disabled{opacity:.35;filter:Alpha(Opacity=35);background-image:none}.ui-state-disabled .ui-icon{filter:Alpha(Opacity=35)}.ui-icon{width:16px;height:16px;background-position:16px 16px}.ui-icon,.ui-widget-content .ui-icon{background-image:url(images/ui-icons_222222_256x240.png)}.ui-widget-header .ui-icon{background-image:url(images/ui-icons_222222_256x240.png)}.ui-state-default .ui-icon{background-image:url(images/ui-icons_888888_256x240.png)}.ui-state-hover .ui-icon,.ui-state-focus .ui-icon{background-image:url(images/ui-icons_454545_256x240.png)}.ui-state-active .ui-icon{background-image:url(images/ui-icons_454545_256x240.png)}.ui-state-highlight .ui-icon{background-image:url(images/ui-icons_2e83ff_256x240.png)}.ui-state-error .ui-icon,.ui-state-error-text .ui-icon{background-image:url(images/ui-icons_cd0a0a_256x240.png)}.ui-icon-carat-1-n{background-position:0 0}.ui-icon-carat-1-ne{background-position:-16px 0}.ui-icon-carat-1-e{background-position:-32px 0}.ui-icon-carat-1-se{background-position:-48px 0}.ui-icon-carat-1-s{background-position:-64px 0}.ui-icon-carat-1-sw{background-position:-80px 0}.ui-icon-carat-1-w{background-position:-96px 0}.ui-icon-carat-1-nw{background-position:-112px 0}.ui-icon-carat-2-n-s{background-position:-128px 0}.ui-icon-carat-2-e-w{background-position:-144px 0}.ui-icon-triangle-1-n{background-position:0 -16px}.ui-icon-triangle-1-ne{background-position:-16px -16px}.ui-icon-triangle-1-e{background-position:-32px -16px}.ui-icon-triangle-1-se{background-position:-48px -16px}.ui-icon-triangle-1-s{background-position:-64px -16px}.ui-icon-triangle-1-sw{background-position:-80px -16px}.ui-icon-triangle-1-w{background-position:-96px -16px}.ui-icon-triangle-1-nw{background-position:-112px -16px}.ui-icon-triangle-2-n-s{background-position:-128px -16px}.ui-icon-triangle-2-e-w{background-position:-144px -16px}.ui-icon-arrow-1-n{background-position:0 -32px}.ui-icon-arrow-1-ne{background-position:-16px -32px}.ui-icon-arrow-1-e{background-position:-32px -32px}.ui-icon-arrow-1-se{background-position:-48px -32px}.ui-icon-arrow-1-s{background-position:-64px -32px}.ui-icon-arrow-1-sw{background-position:-80px -32px}.ui-icon-arrow-1-w{background-position:-96px -32px}.ui-icon-arrow-1-nw{background-position:-112px -32px}.ui-icon-arrow-2-n-s{background-position:-128px -32px}.ui-icon-arrow-2-ne-sw{background-position:-144px -32px}.ui-icon-arrow-2-e-w{background-position:-160px -32px}.ui-icon-arrow-2-se-nw{background-position:-176px -32px}.ui-icon-arrowstop-1-n{background-position:-192px -32px}.ui-icon-arrowstop-1-e{background-position:-208px -32px}.ui-icon-arrowstop-1-s{background-position:-224px -32px}.ui-icon-arrowstop-1-w{background-position:-240px -32px}.ui-icon-arrowthick-1-n{background-position:0 -48px}.ui-icon-arrowthick-1-ne{background-position:-16px -48px}.ui-icon-arrowthick-1-e{background-position:-32px -48px}.ui-icon-arrowthick-1-se{background-position:-48px -48px}.ui-icon-arrowthick-1-s{background-position:-64px -48px}.ui-icon-arrowthick-1-sw{background-position:-80px -48px}.ui-icon-arrowthick-1-w{background-position:-96px -48px}.ui-icon-arrowthick-1-nw{background-position:-112px -48px}.ui-icon-arrowthick-2-n-s{background-position:-128px -48px}.ui-icon-arrowthick-2-ne-sw{background-position:-144px -48px}.ui-icon-arrowthick-2-e-w{background-position:-160px -48px}.ui-icon-arrowthick-2-se-nw{background-position:-176px -48px}.ui-icon-arrowthickstop-1-n{background-position:-192px -48px}.ui-icon-arrowthickstop-1-e{background-position:-208px -48px}.ui-icon-arrowthickstop-1-s{background-position:-224px -48px}.ui-icon-arrowthickstop-1-w{background-position:-240px -48px}.ui-icon-arrowreturnthick-1-w{background-position:0 -64px}.ui-icon-arrowreturnthick-1-n{background-position:-16px -64px}.ui-icon-arrowreturnthick-1-e{background-position:-32px -64px}.ui-icon-arrowreturnthick-1-s{background-position:-48px -64px}.ui-icon-arrowreturn-1-w{background-position:-64px -64px}.ui-icon-arrowreturn-1-n{background-position:-80px -64px}.ui-icon-arrowreturn-1-e{background-position:-96px -64px}.ui-icon-arrowreturn-1-s{background-position:-112px -64px}.ui-icon-arrowrefresh-1-w{background-position:-128px -64px}.ui-icon-arrowrefresh-1-n{background-position:-144px -64px}.ui-icon-arrowrefresh-1-e{background-position:-160px -64px}.ui-icon-arrowrefresh-1-s{background-position:-176px -64px}.ui-icon-arrow-4{background-position:0 -80px}.ui-icon-arrow-4-diag{background-position:-16px -80px}.ui-icon-extlink{background-position:-32px -80px}.ui-icon-newwin{background-position:-48px -80px}.ui-icon-refresh{background-position:-64px -80px}.ui-icon-shuffle{background-position:-80px -80px}.ui-icon-transfer-e-w{background-position:-96px -80px}.ui-icon-transferthick-e-w{background-position:-112px -80px}.ui-icon-folder-collapsed{background-position:0 -96px}.ui-icon-folder-open{background-position:-16px -96px}.ui-icon-document{background-position:-32px -96px}.ui-icon-document-b{background-position:-48px -96px}.ui-icon-note{background-position:-64px -96px}.ui-icon-mail-closed{background-position:-80px -96px}.ui-icon-mail-open{background-position:-96px -96px}.ui-icon-suitcase{background-position:-112px -96px}.ui-icon-comment{background-position:-128px -96px}.ui-icon-person{background-position:-144px -96px}.ui-icon-print{background-position:-160px -96px}.ui-icon-trash{background-position:-176px -96px}.ui-icon-locked{background-position:-192px -96px}.ui-icon-unlocked{background-position:-208px -96px}.ui-icon-bookmark{background-position:-224px -96px}.ui-icon-tag{background-position:-240px -96px}.ui-icon-home{background-position:0 -112px}.ui-icon-flag{background-position:-16px -112px}.ui-icon-calendar{background-position:-32px -112px}.ui-icon-cart{background-position:-48px -112px}.ui-icon-pencil{background-position:-64px -112px}.ui-icon-clock{background-position:-80px -112px}.ui-icon-disk{background-position:-96px -112px}.ui-icon-calculator{background-position:-112px -112px}.ui-icon-zoomin{background-position:-128px -112px}.ui-icon-zoomout{background-position:-144px -112px}.ui-icon-search{background-position:-160px -112px}.ui-icon-wrench{background-position:-176px -112px}.ui-icon-gear{background-position:-192px -112px}.ui-icon-heart{background-position:-208px -112px}.ui-icon-star{background-position:-224px -112px}.ui-icon-link{background-position:-240px -112px}.ui-icon-cancel{background-position:0 -128px}.ui-icon-plus{background-position:-16px -128px}.ui-icon-plusthick{background-position:-32px -128px}.ui-icon-minus{background-position:-48px -128px}.ui-icon-minusthick{background-position:-64px -128px}.ui-icon-close{background-position:-80px -128px}.ui-icon-closethick{background-position:-96px -128px}.ui-icon-key{background-position:-112px -128px}.ui-icon-lightbulb{background-position:-128px -128px}.ui-icon-scissors{background-position:-144px -128px}.ui-icon-clipboard{background-position:-160px -128px}.ui-icon-copy{background-position:-176px -128px}.ui-icon-contact{background-position:-192px -128px}.ui-icon-image{background-position:-208px -128px}.ui-icon-video{background-position:-224px -128px}.ui-icon-script{background-position:-240px -128px}.ui-icon-alert{background-position:0 -144px}.ui-icon-info{background-position:-16px -144px}.ui-icon-notice{background-position:-32px -144px}.ui-icon-help{background-position:-48px -144px}.ui-icon-check{background-position:-64px -144px}.ui-icon-bullet{background-position:-80px -144px}.ui-icon-radio-on{background-position:-96px -144px}.ui-icon-radio-off{background-position:-112px -144px}.ui-icon-pin-w{background-position:-128px -144px}.ui-icon-pin-s{background-position:-144px -144px}.ui-icon-play{background-position:0 -160px}.ui-icon-pause{background-position:-16px -160px}.ui-icon-seek-next{background-position:-32px -160px}.ui-icon-seek-prev{background-position:-48px -160px}.ui-icon-seek-end{background-position:-64px -160px}.ui-icon-seek-start{background-position:-80px -160px}.ui-icon-seek-first{background-position:-80px -160px}.ui-icon-stop{background-position:-96px -160px}.ui-icon-eject{background-position:-112px -160px}.ui-icon-volume-off{background-position:-128px -160px}.ui-icon-volume-on{background-position:-144px -160px}.ui-icon-power{background-position:0 -176px}.ui-icon-signal-diag{background-position:-16px -176px}.ui-icon-signal{background-position:-32px -176px}.ui-icon-battery-0{background-position:-48px -176px}.ui-icon-battery-1{background-position:-64px -176px}.ui-icon-battery-2{background-position:-80px -176px}.ui-icon-battery-3{background-position:-96px -176px}.ui-icon-circle-plus{background-position:0 -192px}.ui-icon-circle-minus{background-position:-16px -192px}.ui-icon-circle-close{background-position:-32px -192px}.ui-icon-circle-triangle-e{background-position:-48px -192px}.ui-icon-circle-triangle-s{background-position:-64px -192px}.ui-icon-circle-triangle-w{background-position:-80px -192px}.ui-icon-circle-triangle-n{background-position:-96px -192px}.ui-icon-circle-arrow-e{background-position:-112px -192px}.ui-icon-circle-arrow-s{background-position:-128px -192px}.ui-icon-circle-arrow-w{background-position:-144px -192px}.ui-icon-circle-arrow-n{background-position:-160px -192px}.ui-icon-circle-zoomin{background-position:-176px -192px}.ui-icon-circle-zoomout{background-position:-192px -192px}.ui-icon-circle-check{background-position:-208px -192px}.ui-icon-circlesmall-plus{background-position:0 -208px}.ui-icon-circlesmall-minus{background-position:-16px -208px}.ui-icon-circlesmall-close{background-position:-32px -208px}.ui-icon-squaresmall-plus{background-position:-48px -208px}.ui-icon-squaresmall-minus{background-position:-64px -208px}.ui-icon-squaresmall-close{background-position:-80px -208px}.ui-icon-grip-dotted-vertical{background-position:0 -224px}.ui-icon-grip-dotted-horizontal{background-position:-16px -224px}.ui-icon-grip-solid-vertical{background-position:-32px -224px}.ui-icon-grip-solid-horizontal{background-position:-48px -224px}.ui-icon-gripsmall-diagonal-se{background-position:-64px -224px}.ui-icon-grip-diagonal-se{background-position:-80px -224px}.ui-corner-all,.ui-corner-top,.ui-corner-left,.ui-corner-tl{border-top-left-radius:4px}.ui-corner-all,.ui-corner-top,.ui-corner-right,.ui-corner-tr{border-top-right-radius:4px}.ui-corner-all,.ui-corner-bottom,.ui-corner-left,.ui-corner-bl{border-bottom-left-radius:4px}.ui-corner-all,.ui-corner-bottom,.ui-corner-right,.ui-corner-br{border-bottom-right-radius:4px}.ui-widget-overlay{background:#aaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x;opacity:.3;filter:Alpha(Opacity=30)}.ui-widget-shadow{margin:-8px 0 0 -8px;padding:8px;background:#aaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x;opacity:.3;filter:Alpha(Opacity=30);border-radius:8px}
\ No newline at end of file