diff --git a/css/style.css b/css/style.css
index 79448cd7..6fa970f8 100644
--- a/css/style.css
+++ b/css/style.css
@@ -270,6 +270,14 @@ select.instance-select {
       transform: translate3d(0,0,0);
        filter: url("#glowFilter");
 }
+
+.note {
+stroke-opacity: 0;
+stroke-width: 150;
+stroke: black;
+}
+
+
 .extraselectednote {
     fill: red;
 }
@@ -367,6 +375,11 @@ select.instance-select {
   visibility: hidden
 }
 
+.none {
+  display: none;
+}
+
+
 
 .svg_container {
   display: flex;
@@ -374,3 +387,19 @@ select.instance-select {
   height: auto
 }
 
+.layer {
+  border-style: solid;
+  border-width: 2px;
+}
+
+.view {
+  border-style: dashed;
+  border-width: 1px;
+}
+
+.main_buttons {
+position:fixed;
+bottom:0;
+z-index:2;
+}
+
diff --git a/index.html b/index.html
index 55349c88..c6c698fd 100644
--- a/index.html
+++ b/index.html
@@ -18,6 +18,8 @@
 	<script src="js/draw.js" type="text/javascript"></script>
 	<script src="js/graph.js" type="text/javascript"></script>
 	<script src="js/reductions.js" type="text/javascript"></script>
+	<script src="js/layers.js" type="text/javascript"></script>
+	<script src="js/old.js" type="text/javascript"></script>
 	<script src="js/conf.js" type="text/javascript"></script>
 	<script src="js/wildwebmidi.js" type="text/javascript"></script>
 	<script src="js/midiplayer.js" type="text/javascript"></script>
@@ -60,14 +62,15 @@
 
         <script src="js/main.js" type="text/javascript">
 	</script>
-	<div id="selected_things" style="position:fixed; fill-opacity: 0.5;
-	stroke-opacity: 0.5">Primaries:<br/>Secondaries:</div>
-	<div id="hidden_buttons" style="position:fixed; bottom:0; z-index:2 ; display:none">
+	<div id="selected_things"><!-- style="position:fixed; fill-opacity: 0.5;
+	stroke-opacity: 0.5"-->Primaries:<br/>Secondaries:</div>
+	<div id="hidden_buttons" class="main_buttons hidden"><!-- style="position:fixed; bottom:0;
+	z-index:2 ; display:none"-->
 	<input type=button id="showbutton" value="Show" onclick="show_buttons()">
 	</div>
-	<div id="load_save" style="position:fixed; bottom:0; z-index:2">
+	<div id="load_save" class="main_buttons"><!--style="position:fixed; bottom:0; z-index:2"-->
 	  <div id="player"></div>
-	  <div id="meta_buttons" style="display:none">
+	  <div id="meta_buttons" class="none">
 	  <input type="button" class="metarelationbutton" id="custommetarelationbutton" value="Add metarelation with custom type:" onclick="do_metarelation($('#meta_custom_type')[0].value, arg)" >
 	  <input type="text" id="meta_custom_type" onfocus="texton()" onblur="textoff()">
 	  </div>
@@ -78,36 +81,35 @@
 	  <input type="button" class="relationbutton" id="relationbutton" value="Add untyped relation" onclick="do_relation("",arg)" > 
 	  <input type="button" class="relationbutton" id="customrelationbutton" value="Add relation with custom type:" onclick="do_relation($('#custom_type')[0].value, arg)" >
 	  <input type="text" id="custom_type" onfocus="texton()" onblur="textoff()">
-	  <input type="button" id="midibutton" value="Play original" onclick="play_midi()" >
-	  <input type="button" id="midireducebutton" value="Play reduction" onclick="play_midi_reduction()" >
 	  <div id="relation_buttons">
 	  </div>
 	  <input type="button" id="hidebutton" value="Hide" onclick="hide_buttons()">
 	  <input type="file" id="fileupload" value="Load" onchange="load()" >
 	  <!--input type="button" id="uploadbutton" value="Load" onclick="load()" -->
-	  <!--input type="button" id="downloadbutton" value="Save" onclick="save()" -->
 	  <input type="button" id="downloadbutton" value="Save" onclick="save_orig()" >
 	  <input type="button" id="svgdownloadbutton" value="Save SVG" onclick="savesvg()" >
-	  <input type="button" id="reducebutton" value="(R)educe Relations" onclick="do_reduce()" >
-	  <input type="button" id="undoreducebutton" value="Undo Reduction" onclick="undo_reduce()" >
+	  <!--input type="button" id="reducebutton" value="(R)educe Relations" onclick="do_reduce()" >
+	  <input type="button" id="undoreducebutton" value="Undo Reduction" onclick="undo_reduce()" -->
 	  <input type="button" id="equalizebutton" value="Toggle (s)tems etc." onclick="toggle_equalize()" >
 	  <input type="button" id="shadesbutton" value="Toggle type s(h)ades." onclick="toggle_shades()" >
-	  <input type="button" id="rerenderbutton" value="Create new view" onclick="rerender()" >
+	  <input type="button" id="midibutton" value="Play original" onclick="play_midi()" >
+	  <input type="button" id="midireducebutton" value="Play reduction" onclick="play_midi_reduction()" >
+	  <!--input type="button" id="rerenderbutton" value="Create new view" onclick="rerender()" >
+	  <input type="button" id="layerbutton" value="Create new layer" onclick="new_layer()" -->
 	  <!--input type="button" id="selectifybutton" value="Select similar notes" onclick="select_samenote()" --> <br/>
 
 	</div>
-	<div id="zoom buttons" style="position:fixed; top:0; right:0; z-index:2">
+	<!--div id="zoom buttons" style="position:fixed; top:0; right:0; z-index:2">
 	<input type="button" id="zoominbutton" class="zoombutton" value="+" onclick="zoom_in()"><br/>
 	<input type="button" id="zoomoutbutton" class="zoombutton" value="-" onclick="zoom_out()"><br/>
-	</div>
+	</div-->
 
 
         <!--//////////////////////////////////////////////-->
         <!-- The div where we are going to insert the SVG -->
         <!--//////////////////////////////////////////////-->
 	
-	<div style="transform-origin: top left; z-index:-1" id="svg_outputs">
-	<div id="svg_output0"></div>
+	<div id="layers">
 	</div>
     </body>
 </html>
diff --git a/index.test.js b/index.test.js
index 5805fcaa..98e9337c 100644
--- a/index.test.js
+++ b/index.test.js
@@ -82,12 +82,12 @@ describe('reductive_analysis_test_suite', () => {
     button_test('hidebutton');
     button_test('downloadbutton');
     button_test('svgdownloadbutton');
-    button_test('reducebutton');
+//    button_test('reducebutton');
     button_test('equalizebutton');
     button_test('shadesbutton');
-    button_test('rerenderbutton');
-    button_test('zoominbutton', {'class': 'zoombutton'});
-    button_test('zoomoutbutton', {'class': 'zoombutton'});
+//    button_test('rerenderbutton');
+//    button_test('zoominbutton', {'class': 'zoombutton'});
+//    button_test('zoomoutbutton', {'class': 'zoombutton'});
   });
 
   it('should load the example MEI', async function() {
diff --git a/js/draw.js b/js/draw.js
index 81428192..636c19ba 100644
--- a/js/draw.js
+++ b/js/draw.js
@@ -1,134 +1,33 @@
-// Draw a series of edges (TODO: make it much much much better)
-function draw_edges() {
-  console.debug("Using globals: selected");
-  var added = [];
-  if(selected.includes(undefined))
-    return [];
-  for(var i = 1; i < selected.length; i++) {
-    note1 = note_coords(selected[i-1]);
-    note2 = note_coords(selected[i]);
-    //added.push(line(note1,note2));
-    var elem = roundedHull([note1,note2]);
-    add_to_svg_bg(elem);
-    added.push(elem);
-  // TODO: Add selectability on edge.
-  }
-  return added;
-}
-
-// Draw a relation as a  series of edges (TODO: make it much much much better)
-// New version below as draw_relation_arg. It will draw based on
-// an already MEI-encoded relation rather than this ad-hoc
-// stuff.
-function draw_relation(id,type) {
-  console.debug("Using globals: selected, extraselected, mei, mei_graph, shades");
-  var added = [];
-  var notes = selected.concat(extraselected);
-  if(notes.includes(undefined)) {
-    console.log("Note missing, relation not drawn");
-    return [];
-  }
-  var secondaries = selected;
-  var primaries = extraselected;
-
-  notes.sort((a,b) => { 
-      var p1= note_coords(a);
-      var p2= note_coords(b);
-      return (p1[0] - p2[0]) ? (p1[0] - p2[0]) : (p1[1] - p2[1]);
-    });
-
-
-  var elem = roundedHull(notes.map(note_coords));
-  elem.setAttribute("id",id);
-  elem.classList.add("relation");
-  elem.setAttribute("type",type);
-  elem.onwheel = (e) => {
-    var elem1 = e.target;
-    var paren = elem1.parentElement;
-    paren.removeChild(elem1);
-    paren.insertBefore(elem1,paren.children[0]);
-    elem.onmouseout();
-    return false;
-  };
-  if(shades)
-    toggle_shade(elem);
-  add_to_svg_bg(elem);
-  added.push(elem);
-  elem.onclick = function(ev) {toggle_selected(elem,ev.shiftKey);};
-  elem.onmouseover = function (ev) {
-    primaries.forEach((item) => { item.classList.add("extrahover");});
-    secondaries.forEach((item) => { item.classList.add("selecthover");});
-  }
-  elem.onmouseout = function (ev) {
-    primaries.forEach((item) => { item.classList.remove("extrahover");});
-    secondaries.forEach((item) => { item.classList.remove("selecthover");});
-  }
-
-  return added;
-}
-
-function draw_metarelation(id,type) {
-  console.debug("Using globals: selected, extraselected, document, shades");
-  var added = [];
-  var targets =selected.concat(extraselected); 
-  var coords = targets.map(get_metarelation_target);
-  var x = average(coords.map((e) => e[0]));
-  // Above
-  var y =
-    targets.concat([document.getElementsByClassName("system")[0]]).map((b) => b.getBBox().y).sort((a,b) => a > b)[0] - 500;
-
-  coords.push([x,y]);
-  var g_elem = g();
-  var elem = roundedHull(coords);
-  g_elem.setAttribute("id",id);
-  g_elem.classList.add("metarelation");
-  g_elem.setAttribute("type",type);
-  g_elem.onwheel = (e) => {
-    var elem1 = e.target;
-    var paren = elem1.parentElement;
-    paren.removeChild(elem1);
-    paren.insertBefore(elem1,paren.children[0]);
-    return false;
-  };
-  coords.forEach((crds) => { var line_elem = line([x,y],crds);
-      g_elem.appendChild(line_elem);});
-  g_elem.appendChild(circle([x,y],200));
-  if(shades)
-    toggle_shade(g_elem);
-  add_to_svg_bg(g_elem);
-  added.push(g_elem);
-  g_elem.onclick = function(ev) {toggle_selected(g_elem,ev.shiftKey);};
-  g_elem.onmouseover = function (ev) {
-    targets.forEach((item) => { item.classList.add("relationhover"); });
-  }
-  g_elem.onmouseout = function (ev) {
-    targets.forEach((item) => { item.classList.remove("relationhover"); });
-  }
-  return added;
-  
-
-}
-
 function draw_relation_arg(draw_context, mei_graph, g_elem) {
   var added = [];
-  var mei = draw_context.mei;
   var svg_elem = draw_context.svg_elem;
   var id_prefix = draw_context.id_prefix;
   var primaries = relation_primaries_arg(mei_graph,g_elem).map(
-      (e) => svg_find_from_mei_elem(svg_elem, id_prefix, get_by_id(mei, note_get_sameas(e))));
+      (e) => document.getElementById(id_in_svg(draw_context,node_to_note_id(e)))
+    );
   var secondaries = relation_secondaries_arg(mei_graph,g_elem).map(
-      (e) => svg_find_from_mei_elem(svg_elem, id_prefix, get_by_id(mei, note_get_sameas(e))));
-  var notes = primaries.concat(secondaries)
+      (e) => document.getElementById(id_in_svg(draw_context,node_to_note_id(e)))
+    );
+  var notes = primaries.concat(secondaries);
   notes.sort((a,b) => { 
+      if(!a) return -1;
+      if(!b) return 1;
       var p1= note_coords(a);
       var p2= note_coords(b);
       return (p1[0] - p2[0]) ? (p1[0] - p2[0]) : (p1[1] - p2[1]);
     });
+  if(!notes[0]) {
+    console.log("Note missing, relation not drawn");
+    return null;
+  }
+
   var id = id_prefix + g_elem.getAttribute("xml:id");
   var type = relation_type(g_elem);
 
   var elem = roundedHull(notes.map(note_coords));
   elem.setAttribute("id",id);
+  if(id_prefix != "")
+    elem.setAttribute("oldid",g_elem.getAttribute("xml:id"));
   elem.classList.add("relation");
   elem.setAttribute("type",type);
   elem.onwheel = (ev) => {
@@ -165,7 +64,7 @@ function draw_metarelation_arg(draw_context, mei_graph, g_elem) {
   var id = id_prefix + g_elem.getAttribute("xml:id");
   var type = relation_type(g_elem);
   var targets = relation_allnodes_arg(mei_graph, g_elem).map(
-      (e) => svg_find_from_mei_elem(svg_elem, id_prefix, e));
+      (e) => document.getElementById(draw_context.id_prefix+get_id(e)));
   if(targets.indexOf(null) != -1){
     console.log("Missing relation, not drawing metarelation");
     return [];
diff --git a/js/graph.js b/js/graph.js
index 233ec64f..eeb3209c 100644
--- a/js/graph.js
+++ b/js/graph.js
@@ -1,118 +1,3 @@
-// Add a collection of edges to the MEI graph element
-function add_edges(mei) {
-  console.debug("Using globals: selected, mei, mei_graph");
-  var added = [];
-  for(var i = 0; i < selected.length; i++) {
-    var elem = add_mei_node_for(mei,mei_graph,selected[i]);
-    added.push(elem);
-  }
-  for(var i = 1; i < selected.length; i++) {
-    // So that we can refer to the node (not the note) ID in
-    // arcs/edges
-    var elem = mei.createElement("arc");
-    elem.setAttribute("from","#gn-"+selected[i-1].getAttribute("id"));
-    elem.setAttribute("to","#gn-"+selected[i].getAttribute("id"));
-    mei_graph.appendChild(elem);
-    added.push(elem);
-  }
-  return added;
-}
-
-// Add a "relation" to the MEI graph element. We model this
-// with a new node.
-function add_relation(mei,mei_graph,type,he_id_param) {
-  console.debug("Using globals: selected, extraselected");
-  var added = [];
-  // Add new nodes for all notes
-  for(var i = 0; i < selected.length; i++) {
-    var elem = add_mei_node_for(mei,mei_graph,selected[i]);
-    added.push(elem);
-  }
-  for(var i = 0; i < extraselected.length; i++) {
-    var elem = add_mei_node_for(mei,mei_graph,extraselected[i]);
-    added.push(elem);
-  }
-  // Add a new node for the relation
-  var he_elem = mei.createElement("node");
-  he_elem.setAttribute("type","relation");
-  var he_label = mei.createElement("label");
-  if(typeof type != 'undefined')
-    he_label.setAttribute("type",type)
-  he_elem.appendChild(he_label);
-  // Who knows if this is enough
-  var he_id;
-  if(typeof he_id_param == 'undefined')
-    he_id = "he-"+Math.floor(Math.random() * (1 << 20)).toString(16);
-  else
-    he_id = he_id_param;
-  he_elem.setAttribute("xml:id",he_id);
-  mei_graph.appendChild(he_elem);
-  added.push(he_elem);
-  for(var i = 0; i < selected.length; i++) {
-    // So that we can refer to the node (not the note) ID in
-    // arcs/edges
-    var elem = mei.createElement("arc");
-    elem.setAttribute("from","#"+he_id);
-    elem.setAttribute("to","#gn-"+selected[i].id);
-    elem.setAttribute("type","secondary");
-    mei_graph.appendChild(elem);
-    added.push(elem);
-  }
-  for(var i = 0; i < extraselected.length; i++) {
-    // So that we can refer to the node (not the note) ID in
-    // arcs/edges
-    var elem = mei.createElement("arc");
-    elem.setAttribute("from","#"+he_id);
-    elem.setAttribute("to","#gn-"+extraselected[i].id);
-    elem.setAttribute("type","primary");
-    mei_graph.appendChild(elem);
-    added.push(elem);
-  }
-  return [he_id,added.reverse()];
-}
-
-function add_metarelation(mei,mei_graph,type,he_id_param) {
-  console.debug("Using globals: mei, mei_graph, selected, extraselected");
-  // Add a new node for the relation
-  var added = [];
-  var he_elem = mei.createElement("node");
-  he_elem.setAttribute("type","metarelation");
-  var he_label = mei.createElement("label");
-  if(typeof type != 'undefined')
-    he_label.setAttribute("type",type)
-  he_elem.appendChild(he_label);
-  // Who knows if this is enough
-  var he_id;
-  if(typeof he_id_param == 'undefined')
-    he_id = "he-"+Math.floor(Math.random() * (1 << 20)).toString(16);
-  else
-    he_id = he_id_param;
-  he_elem.setAttribute("xml:id",he_id);
-  mei_graph.appendChild(he_elem);
-  added.push(he_elem);
-  for(var i = 0; i < selected.length; i++) {
-    // So that we can refer to the node (not the note) ID in
-    // arcs/edges
-    var elem = mei.createElement("arc");
-    elem.setAttribute("from","#"+he_id);
-    elem.setAttribute("to","#"+selected[i].id);
-    elem.setAttribute("type","secondary");
-    mei_graph.appendChild(elem);
-    added.push(elem);
-  }
-  for(var i = 0; i < extraselected.length; i++) {
-    // So that we can refer to the node (not the note) ID in
-    // arcs/edges
-    var elem = mei.createElement("arc");
-    elem.setAttribute("from","#"+he_id);
-    elem.setAttribute("to","#"+extraselected[i].id);
-    elem.setAttribute("type","primary");
-    mei_graph.appendChild(elem);
-    added.push(elem);
-  }
-  return [he_id,added.reverse()];
-}
-
 
 // Add a "relation" to the MEI graph element. We model this
 // with a new node.
diff --git a/js/layers.js b/js/layers.js
new file mode 100644
index 00000000..dd4611e5
--- /dev/null
+++ b/js/layers.js
@@ -0,0 +1,113 @@
+// This is code relating to the addition of new layers in analyses.
+
+// Each layer is represented by a <score> element in the MEI - the
+// surface being the first, and each subsequent layer making up a separate
+// <score> element. Notes that reoccur in analysed layers from the surface
+// should be connected using @copyof attributes, while the <score> elements
+// could use @sameas to indicate that they represent the same pieces of
+// music, just under different levels of abstraction.
+
+function layer_clone_element(changes, elem, new_children) {
+  // No need to copy over empty beams and measures.
+  if((elem.tagName == "beam" || elem.tagName == "measure") &&
+      new_children.findIndex((e) => e.tagName == "note" || 
+	                            e.getElementsByTagName("note").length > 0
+			    ) == -1)
+    return null;
+  var new_elem = elem.cloneNode();
+  if(changes){
+    new_elem.setAttribute("corresp", elem.getAttribute("xml:id"));
+  }else{
+    new_elem.setAttribute("copyof", elem.getAttribute("xml:id"));
+  }
+  new_children.forEach((e) => new_elem.appendChild(e));
+  return new_elem;
+}
+
+function layerify(draw_context, elem) {
+  var svg_elem = document.getElementById(id_in_svg(draw_context,get_id(elem)));
+  if(elem.tagName == "note" && (!svg_elem || svg_elem.classList.contains("hidden"))) // This elem has been reduced away
+    return [note_to_space(mei,elem), true]; //It may be that we should replace it with a space instead
+  var results = Array.from(elem.children).map((e) => layerify(draw_context, e));
+  var new_children = results.map((p) => p[0]).filter((x) => x != null);
+  var changes = (new_children.length != elem.children.length) || // Something directly below was reduced
+                 results.find((p) => p[1]) != undefined // Something further down changed
+  return [layer_clone_element(changes,elem,new_children), changes];
+}
+
+
+function new_layer(draw_context = draw_contexts[0]) {
+  var score_elem = draw_context.mei_score;
+  var [new_score_elem,changed] = layerify(draw_context, score_elem);
+  var n_layers = score_elem.parentElement.getElementsByTagName("score").length;
+  var prefix = n_layers+"-"; //TODO: better prefix computation
+                             //The - is there to not clash with view
+			     //prefixes
+
+  prefix_ids(new_score_elem,prefix); // Compute a better prefix
+  // Insert after the previous
+  score_elem.parentNode.insertBefore(new_score_elem, score_elem.nextSibling);
+  // The basic algorithm is to take the last score element (if we're doing
+  // a linear order of layers, otherwise we need the score element to build
+  // off of to be given as an argument), to clone it using cloneNode(), and
+  // then to do a preorder traversal of the tree, and for each element
+  // do the following pseudocode:
+  //
+  // FUNCTION LAYERIFY // This function takes a node in the score and
+  //                   // returns NULL if it has been reduced, unchanged if
+  //                   // it has no ID, and with a new ID and either
+  //                   // @sameas or @copyof depending on if the subtree
+  //                   // includes reduced nodes or not.
+  // IF this node has been reduced THEN
+  //   RETURN (NULL, T)
+  // LET (new_children, changed) = UNZIP MAP LAYERIFY ONTO children
+  // IF REDUCE changed WITH OR and F
+  //   RETURN (link_with_sameas(this).with_children(new_children), T)
+  // ELSE
+  //   RETURN (link_with_copyof(this).with_children(new_children), F)
+  //
+  // After which we fit the modified tree with a new ID prefix (built as a
+  // tree address in preparation of hierarchical layer arrangements) and
+  // attach it as a sibling to the previous score element, and potentially
+  // modify the scoreDef appropriately.
+  return new_score_elem;
+}
+
+
+function mei_for_layer(mei, score_elem) {
+  if(!mei.contains(score_elem)){
+    console.log("Score element not in MEI, aborting");
+    return null;
+  }
+  var new_mei = clone_mei(mei);
+  var our_score = get_by_id(new_mei, score_elem.getAttribute("xml:id"));
+  var paren = our_score.parentElement;
+  for(let score of Array.from(paren.getElementsByTagName("score"))){
+    if(score === our_score) 
+      continue;
+    else
+      paren.removeChild(score);
+  }
+  return new_mei;
+}
+
+
+// PLANS 2021-03-09
+// layerify now works as expected, making sameas/copyof connections when
+// appropriate. What's next? One possible feature is to remove elements
+// (measures, beams) with no notes in them. Beams in particular need
+// removing as Verovio chokes otherwise. Another possible feature is to
+// replace the note with a rest to make sure that they get the proper
+// horizontal alignment.
+
+// These are all useful features, but first is making a proper new layer
+// This requires:
+//  * Prefix-modifying the new tree, including determining the prefix
+//  * Updating the rendering code to get Verovio to render some specific
+//    layer.
+//  * Updating adressing to make sure that a) new relations use the
+//    shallowest possible entity of which the current is sameas/copyof
+//  *  
+
+
+
diff --git a/js/main.js b/js/main.js
index 241d4c76..eb981c59 100644
--- a/js/main.js
+++ b/js/main.js
@@ -35,12 +35,24 @@ var redo_actions = []; //TODO, maybe?
 // Each draw context contains information relevant to drawing
 // into one of the SVG renders. In particular, we store
 //  * The <div> element containing the SVG
-//  * The MEI rendered, parsed into a DOM object
+//  * The outer <div> element that also contains the view-specific buttons
+//  and controls
+//  * The amount of zoom (should be moved to style?)
+//  * The stack of local reduce actions
+//  * The layer context to which this view belongs
 //  * The prefix used for the element IDs in the SVG (compared
 //    to the MEI)
-// The first element is the latest, shown at the top. 
+// The first element is the latest
 var draw_contexts = [];
 
+// Each layer context contains information relevant to the layer, such as
+//  * The rendered MEI
+//  * The score element in the original MEI
+//  * The <div> element containing the layer
+//  * A mapping from each element in the layer score element to its
+//  canonical representative
+var layer_contexts = [];
+
 var rerendered_after_reduce = 0;
 
 var non_notes_hidden = false;
@@ -53,7 +65,7 @@ var format;
 
 var zoom = 1;
 
-var arg = false;
+var arg = true;
 
 var mouseX;
 var mouseY;
@@ -138,9 +150,9 @@ function toggle_he_selected(selecting) {
           button.setAttribute("value",val.replace("Set to","Add"));
   });
   if(selecting)
-    document.getElementById("meta_buttons").style.display="";
+    document.getElementById("meta_buttons").classList.remove("none");
   else
-    document.getElementById("meta_buttons").style.display="none";
+    document.getElementById("meta_buttons").classList.add("none");
 }
 
 // Toggle if a thing (for now: note or relation) is selected or not.
@@ -203,8 +215,8 @@ function toggle_selected(item,extra) {
 function update_text(){
   var primaries, secondaries;
   if(arg){
-    primaries = to_text_arg(draw_contexts,orig_mei_graph,extraselected);
-    secondaries = to_text_arg(draw_contexts,orig_mei_graph,selected);
+    primaries = to_text_arg(draw_contexts,mei_graph,extraselected);
+    secondaries = to_text_arg(draw_contexts,mei_graph,selected);
   }else{
     primaries = to_text(extraselected);
     secondaries = to_text(selected);
@@ -272,50 +284,52 @@ function delete_relation(elem) {
   console.debug("Using globals: mei for element selection");
   //Assume no meta-edges for now, meaning we only have to
   //remove the SVG elem, the MEI node, and any involved arcs
-  var orig_mei_he,mei_he = get_by_id(mei,elem.id);
-  unmark_secondaries(mei_he);
+  var mei_id = get_id(elem);
+  var mei_he = get_by_id(mei,mei_id);
+  var svg_hes = [];
+  for(draw_context of draw_contexts){
+    let svg_he = get_by_id(document,draw_context.id_prefix + mei_id);
+    if(svg_he){
+      unmark_secondaries_arg(draw_context, mei_graph, mei_he);
+      svg_hes.push(svg_he);
+    }
+  }
+
   
-  var orig_arcs,arcs =
+  var arcs =
     Array.from(mei.getElementsByTagName("arc")).filter((arc) =>
       {
        return arc.getAttribute("to") == "#"+elem.id ||
               arc.getAttribute("from") == "#"+elem.id;
       });
-  if(mei != orig_mei){
-    orig_mei_he = get_by_id(mei,selected[0].id);
-    orig_arcs =
-      Array.from(mei.getElementsByTagName("arc")).filter((arc) =>
-        {
-         return arc.getAttribute("to") == "#"+elem.id ||
-                arc.getAttribute("from") == "#"+elem.id;
-        });
-  }
-  var removed = arcs.concat(orig_arcs).concat([elem,mei_he,orig_mei_he]);
-  var action_removed = removed.map((x) => {if(x != undefined){
+  var removed = arcs.concat(svg_hes);
+  removed.push(mei_he);
+  var action_removed = removed.map((x) => {
       var elems = [x,x.parentElement,x.nextSibling]; 
       // If x corresponds to an SVG note (try!), un-style it as if we were not hovering over the relation.
       // This is necessary when deleting via they keyboard (therefore while hovering).
       try {
         $(`g #${x.getAttribute('to').substring(4)}`).removeClass().addClass('note');
-      } catch {
+      } catch (e) {
       }
       x.parentElement.removeChild(x);
       return elems;
-      }});
+    });
 
-  return action_removed.reverse();
+  return action_removed;
 }
 
 function delete_relations() {
   console.debug("Using globals: selected for element selection, undo_actions for storing the action");
   //Assume no meta-edges for now, meaning we only have to
-  if(selected.length == 0 || get_class_from_classlist(selected[0]) != "relation"){
+  var sel = selected.concat(extraselected);
+  if(sel.length == 0 || get_class_from_classlist(sel[0]) != "relation"){
     console.log("No relation selected!");
     return;
   }
-  var removed = selected.flatMap(delete_relation);
-  undo_actions.push(["delete relation",removed,selected,[]]);
-  selected = [];
+  var removed = sel.flatMap(delete_relation);
+  undo_actions.push(["delete relation",removed.reverse(),selected,extraselected]);
+  sel.forEach(toggle_selected);
 }
 
 
@@ -330,95 +344,13 @@ function do_reduce() {
   sel.concat(extra).forEach(toggle_selected);
   if(arg){
     console.debug("Using globals: undo_actions, draw_contexts, mei_graph, selected,  extraselected.");
-    var undo = do_reduce_arg(draw_contexts[0], mei_graph, sel.concat(extra));
-    undo_actions.push(["reduce",undo,sel,extra]);
+    undo = do_reduce_arg(draw_contexts[0], mei_graph, sel, extra);
     return;
   }
-  console.debug("Using globals: undo_actions, mei, mei_graph, selected,  extraselected.");
-  // All previous reductions
-  var reduce_actions = undo_actions.filter((x) => x[0] == "reduce").map((x) => x[1]); 
-  // All relations in the graph
-  var all_relations_nodes = Array.from(mei_graph.getElementsByTagName("node")).filter((x) => { return x.getAttribute("type") == "relation";}) 
-  // Remove the relations that have been removed in previous
-  // reductions
-  var remaining_relations = all_relations_nodes.filter((x) => { 
-    return !reduce_actions.flat().flat().includes(x);
-  });
-  var reduce_action, relations_nodes;
-  // Are we doing a full reduction, or have we selected some
-  // relations?
-  if(sel.length > 0 && sel[0].classList.contains("relation")){
-    relations_nodes = sel.concat(extra).map((elem) => get_by_id(mei,elem.id));
-  }else {
-    relations_nodes = remaining_relations;
-  }
-  // No primary of a remaining relation is removed in this
-  // reduction
-  var remaining_nodes = remaining_relations.map(relation_primaries).flat();
-  // We know that the remaining relations that have not been
-  // selected for reduction will remain
-  remaining_relations = remaining_relations.filter((x) => {return !relations_nodes.includes(x);});
-  // So all of their nodes should be added to the remaining
-  // nodes, not just the primaries
-  remaining_nodes = remaining_nodes.concat(remaining_relations.map(relation_secondaries).flat());
-
-  do {
-    // We want to find more relations that we know need to stay 
-    var more_remains = relations_nodes.filter((he) => { 
-        // That is, relations that have, as secondaries, nodes
-        // we know need to stay
-        return (relation_secondaries(he).findIndex((x) => {return remaining_nodes.includes(x);}) > -1);
-      });
-    // Add those relations to the ones that need to stay
-    remaining_relations = remaining_relations.concat(more_remains);
-    // And remove them from those that may be removed
-    relations_nodes = relations_nodes.filter((x) => {return !more_remains.includes(x);})
-    // And update the remaining nodes
-    remaining_nodes = remaining_nodes.concat(more_remains.map(relation_secondaries).flat());
-  // Until we reach a pass where we don't find any more
-  // relations that need to stay
-  }while(more_remains.length > 0)
-  // Any relations that remain after this loop, we can remove,
-  // including their secondaries
-
-  reduce_action = relations_nodes;
-
-  if(reduce_action.length == 0){
-    console.log("No reduction possible");
-    return;
-  }
-  undo_actions.push(["reduce", reduce_action.map((he) => {
-    var secondaries = relation_secondaries(he);
-    var graphicals = [];
-    graphicals.push(secondaries.map(hide_note));
-    graphicals.push(hide_he(he));
-    return [he,secondaries,graphicals];
-  }),sel, extra]);
+  do_reduce_old(sel,extra);
 }
 
 
-
-
-
-
-// OK we've selected stuff, let's make the selection into a
-// series of edges
-function do_edges() {
-    console.debug("Using globals: selected, extraselected, mei, orig_mei, undo_actions");
-    if (selected.length == 0 && extraselected == 0) {
-      return;}
-    changes = true;
-    var added = [];
-    added.push(draw_edges()); // Draw the edge
-    added.push(add_edges(mei));  // Add it to the MEI
-    if(mei != orig_mei)
-      added.push(add_edges(orig_mei));
-    
-    undo_actions.push(["edges",added,selected,extraselected]);
-    selected.forEach(toggle_selected); // De-select
-    extraselected.forEach(toggle_selected); // De-select
-}
-
 // OK we've selected stuff, let's make the selection into a
 // "relation".
 function do_relation(type,arg) {
@@ -427,9 +359,9 @@ function do_relation(type,arg) {
       return;}
     changes = true;
     var he_id, mei_elems;
+    if(arg){
     if(selected.concat(extraselected)[0].classList.contains("relation")){
       var types = [];
-      if(arg){
         selected.concat(extraselected).forEach((he) => {
         //TODO: move type_synonym application so that this
         //is the right type == the one from the MEI
@@ -441,53 +373,30 @@ function do_relation(type,arg) {
         mei_he.getElementsByTagName("label")[0].setAttribute("type",type);
         hes.forEach(toggle_shade);
         });
-      }else{
-        selected.concat(extraselected).forEach((he) => {
-        //TODO: move type_synonym application so that this
-        //is the right type == the one from the MEI
-        types.push([he.getAttribute("type"),type]);
-        he.setAttribute("type",type);
-        var mei_he = get_by_id(mei,id_or_oldid(he));
-        mei_he.getElementsByTagName("label")[0].setAttribute("type",type);
-        toggle_shade(he);
-        });
-      }
       update_text();
       undo_actions.push(["change relation type",types.reverse(),selected,extraselected]);
     }else if(selected.concat(extraselected)[0].classList.contains("note")){
       var added = [];
-      if(arg){
         // Add new nodes for all notes
-        var primaries = extraselected.map((e) => add_mei_node_for_arg(orig_mei_graph,e));
-        var secondaries = selected.map((e) => add_mei_node_for_arg(orig_mei_graph,e));
+        var primaries = extraselected.map((e) => add_mei_node_for_arg(mei_graph,e));
+        var secondaries = selected.map((e) => add_mei_node_for_arg(mei_graph,e));
         added.push(primaries.concat(secondaries));
-        [he_id,mei_elems] = add_relation_arg(orig_mei_graph,primaries, secondaries, type);
+        [he_id,mei_elems] = add_relation_arg(mei_graph,primaries, secondaries, type);
         added.push(mei_elems);
-        console.log(get_by_id(orig_mei, he_id));
         for(var i = 0; i < draw_contexts.length; i++) {
-          added.push(draw_relation_arg(draw_contexts[i],orig_mei_graph,get_by_id(orig_mei_graph.getRootNode(), he_id))); // Draw the edge
-          mark_secondaries_arg(draw_contexts[i],orig_mei_graph,get_by_id(orig_mei_graph.getRootNode(),he_id));
+          added.push(draw_relation_arg(draw_contexts[i],mei_graph,get_by_id(mei_graph.getRootNode(), he_id))); // Draw the edge
+          mark_secondaries_arg(draw_contexts[i],mei_graph,get_by_id(mei_graph.getRootNode(),he_id));
         }
         undo_actions.push(["relation",added.reverse(),selected,extraselected]);
-      }else{
-        [he_id,mei_elems] = add_relation(mei,mei_graph,type);
-        added.push(mei_elems);  // Add it to the MEI
-        if(mei != orig_mei){
-          var [orig_he_id,orig_mei_elems] = add_relation(orig_mei,orig_mei_graph,type,he_id);
-          added.push(orig_mei_elems);  // Add it to the MEI
-        }
-        added.push(draw_relation(he_id,type)); // Draw the edge
-        undo_actions.push(["relation",added,selected,extraselected]);
-        mark_secondaries(get_by_id(mei,he_id));
-      }
-      
       selected.concat(extraselected).forEach(toggle_selected); // De-select
     }
+    }else
+      do_relation_old(type,arg);
 }
 
 
 function do_metarelation(type, arg ) {
-    console.debug("Using globals: orig_mei, orig_mei_graph, selected, extraselected");
+    console.debug("Using globals: orig_mei, mei_graph, selected, extraselected");
     if (selected.length == 0 && extraselected == 0) {
       return;}
     var ci = get_class_from_classlist(selected.concat(extraselected)[0]); 
@@ -499,18 +408,18 @@ function do_metarelation(type, arg ) {
     if(arg){
 
       var primaries = extraselected.map((e) =>
-          get_by_id(orig_mei_graph.getRootNode(), id_or_oldid(e)));
+          get_by_id(mei_graph.getRootNode(), id_or_oldid(e)));
       var secondaries = selected.map((e) =>
-          get_by_id(orig_mei_graph.getRootNode(), id_or_oldid(e)));
-      var [he_id,mei_elems] = add_metarelation_arg(orig_mei_graph, primaries, secondaries, type);
+          get_by_id(mei_graph.getRootNode(), id_or_oldid(e)));
+      var [he_id,mei_elems] = add_metarelation_arg(mei_graph, primaries, secondaries, type);
       added.push(mei_elems);
       for(var i = 0; i< draw_contexts.length; i++)
-        added.push(draw_metarelation_arg(draw_contexts[i], orig_mei_graph, get_by_id(orig_mei_graph.getRootNode(),he_id))); // Draw the edge
+        added.push(draw_metarelation_arg(draw_contexts[i], mei_graph, get_by_id(mei_graph.getRootNode(),he_id))); // Draw the edge
     }else{
       var [he_id,mei_elems] = add_metarelation(mei,mei_graph,type);
       added.push(mei_elems);  // Add it to the MEI
       if(mei != orig_mei){
-        var [orig_he_id,orig_mei_elems] = add_metarelation(orig_mei,orig_mei_graph,type,he_id);
+        var [orig_he_id,orig_mei_elems] = add_metarelation(orig_mei,mei_graph,type,he_id);
         added.push(orig_mei_elems);  // Add it to the MEI
       }
       added.push(draw_metarelation(he_id,type)); // Draw the edge
@@ -558,9 +467,9 @@ function do_undo() {
       if(what == "relation")
         added.flat().forEach((x) => { 
           if(arg){
-        if(orig_mei_graph.contains(x) && x.getAttribute("type") == "relation")
+        if(mei_graph.contains(x) && x.getAttribute("type") == "relation")
           for(var i = 0; i < draw_contexts.length; i++) 
-            unmark_secondaries_arg(draw_contexts[i],orig_mei_graph,x)
+            unmark_secondaries_arg(draw_contexts[i],mei_graph,x)
           }else if(mei.contains(x) && x.getAttribute("type") == "relation")
           unmark_secondaries(x);
           });
@@ -574,9 +483,19 @@ function do_undo() {
       extra.forEach((x) => {toggle_selected(x,true);});
     }else if( what == "delete relation" ) {
       var removed = elems;
-      removed.forEach((x) => {if(x) x[1].insertBefore(x[0],x[2])})
-      selected = sel;
-      selected.forEach(mark_secondaries);
+      removed.forEach((x) => {
+	  x[1].insertBefore(x[0],x[2])
+	  let dc = draw_contexts.find((d) => d.svg_elem.contains(x[0]));
+	  if(dc){
+	    let mei_id = get_id(x[0]);
+	    let mei_he = get_by_id(mei,mei_id);
+	    mark_secondaries_arg(dc, mei_graph, mei_he)
+	  }
+	});
+      // Select last selection
+      sel.forEach((x) => {toggle_selected(x);});
+      extra.forEach((x) => {toggle_selected(x,true);});
+
     }else if (what == "change relation type") {
       var types = elems;
       sel.concat(extra).forEach((he) => {
@@ -701,7 +620,7 @@ function save() {
 }
 function save_orig() {
   console.debug("Using globals: orig_mei");
-  var saved = new XMLSerializer().serializeToString(orig_mei);
+  var saved = new XMLSerializer().serializeToString(mei);
   download(saved, filename+".mei", "text/xml");
 }
 
@@ -736,8 +655,8 @@ function load() {
 // Draw the existing graph
 function draw_graph(draw_context) {
   console.debug("Using globals: mei_graph, mei, selected, extraselected, document");
-  var mei = draw_context.mei;
-  var mei_graph = mei.getElementsByTagName("graph")[0];
+  //var mei = draw_context.mei;
+  //var mei_graph = mei.getElementsByTagName("graph")[0];
   // There's a multi-stage process to get all the info we
   // need... First we get the nodes from the graph element.
   var nodes_array = Array.from(mei_graph.getElementsByTagName("node"));
@@ -746,135 +665,157 @@ function draw_graph(draw_context) {
   // Get the nodes representing metarelations
   var metarelations_nodes = nodes_array.filter((x) => { return x.getAttribute("type") == "metarelation";})
   if(arg) {
-    relations_nodes.forEach((g_elem) => draw_relation_arg(draw_context,mei_graph,g_elem));
+    relations_nodes.forEach((g_elem) => {
+	      if(draw_relation_arg(draw_context,mei_graph,g_elem))
+		mark_secondaries_arg(draw_context,mei_graph,g_elem);
+	  })
     metarelations_nodes.forEach((g_elem) => draw_metarelation_arg(draw_context,mei_graph,g_elem));
     return;
   }
+  draw_graph_old(draw_context);
+}
 
-  // Next we get the note labels
-  var note_ids = nodes_array.map((x) => {
-                try{
-                  return [x, 
-                          note_get_sameas(x)]
-                }catch{
-                  return [];
-                }
-              }).filter((x) => {return x.length != 0;});
-  // Now get the arcs/edges
-  var arcs_array = Array.from(mei_graph.getElementsByTagName("arc"));
-  var relations_arcs = [];
-  var metarelations_arcs = [];
-  // And draw them all.
-  arcs_array.forEach((x) => {
-      var n1 = get_by_id(mei,x.getAttribute("from")); 
-      var n2 = get_by_id(mei,x.getAttribute("to"));
-      if (!relations_nodes.includes(n1) && !metarelations_nodes.includes(n1)){
-        //Regular edge, just draw. TODO: Fix assumption that
-        //nodes are notes if we reach this.
-        var id1 = note_ids.find((y) => {
-              return y[0] == n1;
-            })[1];
-        var id2 = note_ids.find((y) => {
-              return y[0] == n2;
-            })[1];
-        selected = [get_by_id(document,id1),get_by_id(document,id2) ];
-        draw_edges();
-        selected = [];
-      }else if (!metarelations_nodes.includes(n1)){
-        var id2 = note_ids.find((y) => {
-              return y[0] == n2;
-            })[1];
-        relations_arcs.push([n1,id2,x.getAttribute("type")]);
-      }else {
-        metarelations_arcs.push([n1,n2.getAttribute("xml:id"),x.getAttribute("type")]);
-      }
 
-  });
-  relations_nodes.forEach((x) => {
-      var relation_nodes = relations_arcs.
-                  filter((y) => {return y[0] == x;}).
-                  map((y) => {return [y[2],get_by_id(document,y[1])];})
-      selected = relation_nodes.
-                  filter((y) => {return y[0] == "secondary";}).
-                  map((y) => { return y[1];});
-      extraselected = relation_nodes.
-                  filter((y) => {return y[0] == "primary";}).
-                  map((y) => { return y[1];});
-      var he_labels = x.getElementsByTagName("label");
-      var type = "";
-      if(he_labels.length > 0){
-        type = he_labels[0].getAttribute("type");
-      }
-      var added = draw_relation(x.getAttribute("xml:id"),type);
-      if(added.length != 0)
-        mark_secondaries(x);
-      selected = [];
-      extraselected = [];
-    });
+function new_layer_element() {
+  var layers_element = document.getElementById("layers");
+  var new_layer = document.createElement("div");
+  new_layer.id = "layer"+layers_element.children.length;
+  new_layer.classList.add("layer");
+  layers_element.appendChild(new_layer);
+  return new_layer;
+}
 
-  metarelations_nodes.forEach((x) => {
-      var metarelation_nodes = metarelations_arcs.
-                  filter((y) => {return y[0] == x;}).
-                  map((y) => {return [y[2],get_by_id(document,y[1])];})
-      selected = metarelation_nodes.
-                  filter((y) => {return y[0] == "secondary";}).
-                  map((y) => { return y[1];});
-      extraselected = metarelation_nodes.
-                  filter((y) => {return y[0] == "primary";}).
-                  map((y) => { return y[1];});
-      var me_labels = x.getElementsByTagName("label");
-      var type = "";
-      if(me_labels.length > 0){
-        type = me_labels[0].getAttribute("type");
-      }
-      var added = draw_metarelation(x.getAttribute("xml:id"),type);
-      selected = [];
-      extraselected = [];
-    });
+function new_view_elements(layer_element) {
+  var new_view = document.createElement("div");
+  new_view.id = "view"+draw_contexts.length;
+  new_view.classList.add("view");
+  var new_svg = document.createElement("div");
+  new_svg.id = "svg"+draw_contexts.length;
+  new_svg.classList.add("svg_container");
+  new_view.appendChild(new_svg);
+  layer_element.appendChild(new_view);
+  return [new_view,new_svg];
+}
 
+function button(value) {
+  var button = document.createElement("input");
+  button.setAttribute("type","button");
+  button.setAttribute("value",value);
+  return button;
+}
+
+
+function add_buttons(draw_context) {
+    var new_draw_context = draw_context;
+    var buttondiv = document.createElement("div");
+    buttondiv.classList.add("view_buttons");
+    var newlayerbutton = button("Create new layer");
+    var reducebutton = button("Reduce");
+    var undobutton = button("Unreduce");
+    var rerenderbutton = button("Create new view");
+    undobutton.onclick =     () =>{undo_reduce_arg(new_draw_context);}
+    reducebutton.onclick =   () =>{  do_reduce_pre(new_draw_context);}
+    rerenderbutton.onclick = () =>{   rerender_arg(new_draw_context);}
+    newlayerbutton.onclick = () =>{   create_new_layer(new_draw_context);}
+    buttondiv.appendChild(undobutton    );
+    buttondiv.appendChild(reducebutton  );
+    buttondiv.appendChild(rerenderbutton);
+    buttondiv.appendChild(newlayerbutton);
+
+    draw_context.view_elem.insertBefore(buttondiv, draw_context.view_elem.children[0]);
 
+
+    var zoomdiv = document.createElement("div");
+    zoomdiv.classList.add("zoom_buttons");
+    var zoomin = button("+");
+    var zoomout = button("-");
+    zoomin.onclick = () => { zoom_in(draw_context); };
+    zoomout.onclick = () => { zoom_out(draw_context); };
+
+    zoomdiv.appendChild(zoomin);
+    zoomdiv.appendChild(zoomout);
+
+    draw_context.view_elem.appendChild(zoomdiv);
 }
 
+function onclick_select_functions(draw_context) {
+  for (let n of draw_context.svg_elem.getElementsByClassName("note")) {
+      n.onclick = function(ev) {toggle_selected(n,ev.shiftKey) };
+  }
+  for (let h of draw_context.svg_elem.getElementsByClassName("relation")) {
+      h.onclick = function(ev) {toggle_selected(h,ev.shiftKey) };
+  }
+}
+
+
 // Do all of this when we have the MEI in memory
 function load_finish(e) {
   console.debug("Using globals data, parser, mei, format, svg, svg_elem, jquery document, document, mei_graph, midi, orig_*, changes, undo_cations, redo_actions, reduce_actions, rerendered_after_action, shades");
+
+  // Parse the original document
   parser = new DOMParser();
   mei = parser.parseFromString(data,"text/xml");
   format = "mei";
-  if(mei.documentElement.namespaceURI != "http://www.music-encoding.org/ns/mei")
+  if(mei.documentElement.namespaceURI != "http://www.music-encoding.org/ns/mei") {
     // We didn't get a MEI? Try if it's a musicXML
-    format = "musicxml";
-  else
-    mei = fix_synonyms(mei);
-
-  svg = vrvToolkit.renderData(data, {pageWidth: 20000,
-      pageHeight: 10000, breaks: "none", format: format});
-  if (!svg) {
-    console.log ('Verovio could not generate SVG.');
-    return false;
-  }
-  $("#svg_outputs").html('<div id="svg_output0"></div>')
-  $("#svg_output0").html(svg);
-  svg_elem = document.getElementById("svg_output0");
-  if(format == "musicxml"){
+    format = "non-mei";
+    let new_svg = vrvToolkit.renderData(data, {pageWidth: 20000,
+      pageHeight: 10000, breaks: "none"});
+    if (!new_svg) {
+      console.log ('Verovio could not generate SVG from non-MEI file.');
+      return false;
+    }
+    // TODO: Detect failure and bail
     data = vrvToolkit.getMEI();
     parser = new DOMParser();
     mei = parser.parseFromString(data,"text/xml");
+  }else{
+    mei = fix_synonyms(mei);
   }
 
   mei_graph = add_or_fetch_graph();
   midi = vrvToolkit.renderToMIDI();
-  orig_mei = mei;
-  orig_data = data;
-  orig_mei_graph = mei_graph;
-  orig_svg = svg;
   orig_midi = midi;
+  // Clear the old (if any)
+  draw_contexts = [];
+  layer_contexts = [];
+  document.getElementById("layers").innerHTML="";
+
+  // Segment existing layers
+  var layers = Array.from(mei.getElementsByTagName("score"));
+  for(let i in layers ){
+    let score_elem = layers[i];
+    let new_mei = mei_for_layer(mei, score_elem);
+    let [new_data, new_svg] = render_mei(new_mei);
+    if (!new_svg) {
+      console.log ('Verovio could not generate SVG from MEI.');
+      return false;
+    }
 
-  draw_contexts = [{"mei" : mei,
-                    "svg_elem" : svg_elem,
-                    "id_prefix" : ""}];
-
-  draw_graph(draw_contexts[0]);
+    var layer_element = new_layer_element();
+    var [view_element,svg_element] = new_view_elements(layer_element);
+    svg_element.innerHTML = new_svg;
+    var layer_context = {
+      "mei"        : new_mei,
+      "layer_elem" : layer_element,
+      "score_elem" : score_elem,
+      "id_mapping" : get_id_pairs(score_elem)
+    }
+    layer_contexts.push(layer_context);
+    var draw_context = {
+		      // TODO: One draw context per existing score element
+		      // already on load.
+		      "mei_score" : score_elem,
+		      "svg_elem" : svg_element,
+		      "view_elem" : view_element,
+		      "layer" : layer_context,
+		      "id_prefix" : "",
+		      "zoom" : 1,
+		      "reductions" : []};
+    if(i != 0)
+      draw_context.id_prefix = draw_contexts.length;
+    finalize_draw_context(draw_context);
+  }
 
   changes = false;
   undo_actions = [];
@@ -883,14 +824,6 @@ function load_finish(e) {
 
   rerendered_after_action = 0;
 
-  for (let n of document.getElementsByClassName("note")) {
-      //n.addEventListener('click', function(ev) {toggle_selected(n,ev.shiftKey) } )
-      n.onclick = function(ev) {toggle_selected(n,ev.shiftKey) };
-  }
-  for (let h of document.getElementsByClassName("relation")) {
-      h.onclick = function(ev) {toggle_selected(h,ev.shiftKey) };
-      //h.addEventListener('click', function(ev) {toggle_selected(h,ev.shiftKey) } )
-  }
   if(!shades)
     toggle_shades();
   document.onkeypress = function(ev) {handle_keypress(ev);};
@@ -899,55 +832,25 @@ function load_finish(e) {
 
 
 
-function rerender_mei(replace_with_rests = false) {
-  console.debug("Using globals mei, svg_elem");
-  var mei2 = mei.implementation.createDocument(
-        mei.documentElement.namespaceURI, //namespace to use
-        null,             //name of the root element (or for empty document)
-        null              //doctype (null for XML)
-        );
-  var newNode = mei2.importNode(
-      mei.documentElement, //node to import
-      true                 //clone its descendants
-      );
-  mei2.appendChild(newNode);
+function rerender_mei(replace_with_rests = false, draw_context = draw_contexts[0]) {
+//  var mei = draw_context.mei;
+  var svg_elem = draw_context.svg_elem;
+  var mei2 = clone_mei(draw_context.layer.mei);
 
-  Array.from(svg_elem.getElementsByClassName("note")).forEach((x) => {
-    if(x.classList.contains("hidden")){
+  Array.from(mei2.getElementsByTagName("note")).forEach((n) => {
+    let x = document.getElementById(id_in_svg(draw_context,get_id(n)));
+    if(!x || x.classList.contains("hidden")){
       //TODO: this is wrong
       // 
-      var y = get_by_id(mei2,x.getAttribute("id"));
-      var paren = y.parentNode;
+      var paren = n.parentNode;
       // TODO: deal properly with tremolos
       // TODO
       if(replace_with_rests && !["chord","bTrem","fTrem"].includes(paren.tagName)) {
         // Add a rest
-        var rest = mei2.createElementNS("http://www.music-encoding.org/ns/mei", 'rest');
-        rest.setAttribute("xml:id","rest-"+y.getAttribute("xml:id"));
-        rest.setAttribute("dur",y.getAttribute("dur"));
-        rest.setAttribute("n",y.getAttribute("n"));
-        rest.setAttribute("dots",y.getAttribute("dots"));
-        rest.setAttribute("when",y.getAttribute("when"));
-        rest.setAttribute("layer",y.getAttribute("layer"));
-        rest.setAttribute("staff",y.getAttribute("staff"));
-        rest.setAttribute("tstamp.ges",y.getAttribute("tstamp.ges"));
-        rest.setAttribute("tstamp.real",y.getAttribute("tstamp.real"));
-        rest.setAttribute("tstamp",y.getAttribute("tstamp"));
-        rest.setAttribute("loc",y.getAttribute("loc"));
-        rest.setAttribute("dur.ges",y.getAttribute("dur.ges"));
-        rest.setAttribute("dots.ges",y.getAttribute("dots.ges"));
-        rest.setAttribute("dur.metrical",y.getAttribute("dur.ges"));
-        rest.setAttribute("dur.ppq",y.getAttribute("dur.ppq"));
-        rest.setAttribute("dur.real",y.getAttribute("dur.real"));
-        rest.setAttribute("dur.recip",y.getAttribute("dur.recip"));
-        rest.setAttribute("beam",y.getAttribute("beam"));
-        rest.setAttribute("fermata",y.getAttribute("fermata"));
-        rest.setAttribute("tuplet",y.getAttribute("tuplet"));
-        //That's all I can think of. There's probably a better
-        //way to do this..
-        paren.insertBefore(rest,y);
+        var rest = note_to_rest(mei2,n)
+        paren.insertBefore(rest,n);
       }
-      paren.removeChild(y);
+      paren.removeChild(n);
     }
   });
   Array.from(mei2.getElementsByTagName("chord")).forEach((x) =>
@@ -962,70 +865,112 @@ function rerender_mei(replace_with_rests = false) {
 
 }
 
-function rerender() {
-  console.debug("Using globals document, svg_elem, jquery document, svg, mei, data, mei_graph, non_notes_hidden, rerendered_after_action, undo_actions")
-  // Create new SVG element, stack the current version on
-  // it..? No I have no idea how to UI this properly.
-  var output_parent = document.getElementById("svg_outputs");
-  var new_svg_elem = document.createElement("div");
-  var old_svg_elem = svg_elem;
-  new_svg_elem.setAttribute("id","svg_output" + output_parent.children.length);
-  output_parent.prepend(new_svg_elem);
-
-  var mei2 = rerender_mei();
-  var data2 = new XMLSerializer().serializeToString(mei2);
+function create_new_layer(draw_context) {
+  var new_score_elem = new_layer(draw_context);
+  let new_mei = mei_for_layer(mei, new_score_elem);
+  var [new_data, new_svg] = render_mei(new_mei);
+  if (!new_svg) {
+    console.log ('Verovio could not generate SVG from MEI.');
+    return false;
+  }
+
+  var layer_element = new_layer_element();
+  var [new_view_elem,new_svg_elem] = new_view_elements(layer_element);
+  new_svg_elem.innerHTML = new_svg;
+  var layer_context = {
+    "mei"        : new_mei,
+    "layer_elem" : layer_element,
+    "score_elem" : new_score_elem,
+    "id_mapping" : get_id_pairs(new_score_elem)
+  }
+  layer_contexts.push(layer_context);
+  var new_draw_context = {
+		    // TODO: One draw context per existing score element
+		    // already on load.
+		    "mei_score" : new_score_elem,
+		    "svg_elem" : new_svg_elem,
+		    "view_elem" : new_view_elem,
+		    "layer" : layer_context,
+		    "id_prefix" : "",
+		    "zoom" : 1,
+		    "reductions" : []};
+
+  //prefix_draw_context(new_draw_context);
+  new_draw_context.id_prefix = draw_contexts.length;
+  finalize_draw_context(new_draw_context);
+}
 
-  var svg2 = vrvToolkit.renderData(data2, {pageWidth: 20000,
-      pageHeight: 10000, breaks: "none", format: "mei"});
 
-  draw_contexts[0].id_prefix = "old"+(output_parent.children.length-2);
-  prefix_ids(old_svg_elem,draw_contexts[0].id_prefix);
-  
-  $(new_svg_elem).html(svg2);
-  var new_draw_context = {"mei": mei2, "svg_elem" : new_svg_elem,
-    "id_prefix" : ""};
+function finalize_draw_context(new_draw_context) {
+
+  add_buttons(new_draw_context)
   draw_contexts.reverse();
   draw_contexts.push(new_draw_context);
   draw_contexts.reverse();
-  svg = svg2;
-  mei = mei2;
-  data = data2;
-  svg_elem = new_svg_elem;
-  mei_graph = add_or_fetch_graph();
-  for (let n of document.getElementsByClassName("note")) {
+  for (let n of new_draw_context.svg_elem.getElementsByClassName("note")) {
       n.onclick= function(ev) {toggle_selected(n,ev.shiftKey) };
   }
-  if(non_notes_hidden)
-    set_non_note_visibility("hidden");
-  // Need also to redraw edges and relations
-  draw_graph(draw_contexts[0]);
-
-  // Can't undo after a rerender.. yet, TODO: Make layers
-  rerendered_after_action=undo_actions.length;
-  // This is one of the ugliest hacks I've made I think
-  var reduces = undo_actions.filter((x) => { return x[0] == "reduce";});
-  undo_actions = [];
-  reduces.forEach((action) => {selected = action[2]; do_reduce();})
+  draw_graph(new_draw_context);
+}
+
+function render_mei(mei) {
+  var data = new XMLSerializer().serializeToString(mei);
+
+  var svg = vrvToolkit.renderData(data, {pageWidth: 20000,
+      pageHeight: 10000, breaks: "none"});
+  return [data,svg];
+}
+
+
+function rerender_arg(draw_context) {
+  var [new_view_elem,new_svg_elem] = new_view_elements(draw_context.layer.layer_elem);
+  var new_mei = rerender_mei(false, draw_context);
+  var [new_data, new_svg] = render_mei(new_mei);
+  if (!new_svg) {
+    console.log ('Verovio could not generate SVG from MEI.');
+    return false;
+  }
+  
+  new_svg_elem.innerHTML = new_svg;
+  var new_draw_context = {
+		    // TODO: One draw context per existing score element
+		    // already on load.
+		    "mei_score" : draw_context.mei_score,
+		    "svg_elem" : new_svg_elem,
+		    "view_elem" : new_view_elem,
+		    "layer" : draw_context.layer,
+		    "id_prefix" : "",
+		    "zoom" : 1,
+		    "reductions" : []};
+
+  new_draw_context.id_prefix = draw_contexts.length;
+  prefix_ids(new_draw_context.svg_elem,new_draw_context.id_prefix);
+  finalize_draw_context(new_draw_context);
+}
+
+
+function rerender() {
+  rerender_arg(draw_contexts[0]);
 }
 
 function texton() { text_input = true; }
 function textoff() { text_input = false; }
 function show_buttons() {
-  $("#load_save")[0].style.display="";
-  $("#hidden_buttons")[0].style.display="none";
+  $("#load_save")[0].classList.remove("hidden");
+  $("#hidden_buttons")[0].classList.add("hidden");
 }
 function hide_buttons() {
-  $("#load_save")[0].style.display="none";
-  $("#hidden_buttons")[0].style.display="";
+  $("#load_save")[0].classList.add("hidden");
+  $("#hidden_buttons")[0].classList.remove("hidden");
 }
 
-function zoom_in() {
-  zoom = zoom * 1.1;
-  $("#svg_outputs")[0].style.transform="scale("+zoom+")";
+function zoom_in(draw_context) {
+  draw_context.zoom = draw_context.zoom * 1.1;
+  draw_context.svg_elem.style.transform="scale("+draw_context.zoom+")";
 }
-function zoom_out() {
-  zoom = zoom * 0.90909090909090;
-  $("#svg_outputs")[0].style.transform="scale("+zoom+")";
+function zoom_out(draw_context) {
+  draw_context.zoom = draw_context.zoom * 0.90909090909090;
+  draw_context.svg_elem.style.transform="scale("+draw_context.zoom+")";
 }
 
 
diff --git a/js/old.js b/js/old.js
new file mode 100644
index 00000000..d2bab689
--- /dev/null
+++ b/js/old.js
@@ -0,0 +1,565 @@
+//main.js
+
+function do_reduce_old(sel, extra) {
+  console.debug("Using globals: undo_actions, mei, mei_graph, selected,  extraselected.");
+  // All previous reductions
+  var reduce_actions = undo_actions.filter((x) => x[0] == "reduce").map((x) => x[1]); 
+  // All relations in the graph
+  var all_relations_nodes = Array.from(mei_graph.getElementsByTagName("node")).filter((x) => { return x.getAttribute("type") == "relation";}) 
+  // Remove the relations that have been removed in previous
+  // reductions
+  var remaining_relations = all_relations_nodes.filter((x) => { 
+    return !reduce_actions.flat().flat().includes(x);
+  });
+  var reduce_action, relations_nodes;
+  // Are we doing a full reduction, or have we selected some
+  // relations?
+  if(sel.length > 0 && sel[0].classList.contains("relation")){
+    relations_nodes = sel.concat(extra).map((elem) => get_by_id(mei,elem.id));
+  }else {
+    relations_nodes = remaining_relations;
+  }
+  // No primary of a remaining relation is removed in this
+  // reduction
+  var remaining_nodes = remaining_relations.map(relation_primaries).flat();
+  // We know that the remaining relations that have not been
+  // selected for reduction will remain
+  remaining_relations = remaining_relations.filter((x) => {return !relations_nodes.includes(x);});
+  // So all of their nodes should be added to the remaining
+  // nodes, not just the primaries
+  remaining_nodes = remaining_nodes.concat(remaining_relations.map(relation_secondaries).flat());
+
+  do {
+    // We want to find more relations that we know need to stay 
+    var more_remains = relations_nodes.filter((he) => { 
+        // That is, relations that have, as secondaries, nodes
+        // we know need to stay
+        return (relation_secondaries(he).findIndex((x) => {return remaining_nodes.includes(x);}) > -1);
+      });
+    // Add those relations to the ones that need to stay
+    remaining_relations = remaining_relations.concat(more_remains);
+    // And remove them from those that may be removed
+    relations_nodes = relations_nodes.filter((x) => {return !more_remains.includes(x);})
+    // And update the remaining nodes
+    remaining_nodes = remaining_nodes.concat(more_remains.map(relation_secondaries).flat());
+  // Until we reach a pass where we don't find any more
+  // relations that need to stay
+  }while(more_remains.length > 0)
+  // Any relations that remain after this loop, we can remove,
+  // including their secondaries
+
+  reduce_action = relations_nodes;
+
+  if(reduce_action.length == 0){
+    console.log("No reduction possible");
+    return;
+  }
+  undo_actions.push(["reduce", reduce_action.map((he) => {
+    var secondaries = relation_secondaries(he);
+    var graphicals = [];
+    graphicals.push(secondaries.map(hide_note));
+    graphicals.push(hide_he(he));
+    return [he,secondaries,graphicals];
+  }),sel, extra]);
+}
+
+// OK we've selected stuff, let's make the selection into a
+// series of edges
+function do_edges() {
+    console.debug("Using globals: selected, extraselected, mei, orig_mei, undo_actions");
+    if (selected.length == 0 && extraselected == 0) {
+      return;}
+    changes = true;
+    var added = [];
+    added.push(draw_edges()); // Draw the edge
+    added.push(add_edges(mei));  // Add it to the MEI
+    if(mei != orig_mei)
+      added.push(add_edges(orig_mei));
+    
+    undo_actions.push(["edges",added,selected,extraselected]);
+    selected.forEach(toggle_selected); // De-select
+    extraselected.forEach(toggle_selected); // De-select
+}
+
+function do_relation_old(type,arg){
+    var orig_mei = mei;
+    if(selected.concat(extraselected)[0].classList.contains("relation")){
+      var types = [];
+      selected.concat(extraselected).forEach((he) => {
+      //TODO: move type_synonym application so that this
+      //is the right type == the one from the MEI
+      types.push([he.getAttribute("type"),type]);
+      he.setAttribute("type",type);
+      var mei_he = get_by_id(mei,id_or_oldid(he));
+      mei_he.getElementsByTagName("label")[0].setAttribute("type",type);
+      toggle_shade(he);
+      });
+      update_text();
+      undo_actions.push(["change relation type",types.reverse(),selected,extraselected]);
+    }else if(selected.concat(extraselected)[0].classList.contains("note")){
+      var added = [];
+      [he_id,mei_elems] = add_relation(mei,mei_graph,type);
+      added.push(mei_elems);  // Add it to the MEI
+      if(mei != orig_mei){
+	var [orig_he_id,orig_mei_elems] = add_relation(orig_mei,orig_mei_graph,type,he_id);
+	added.push(orig_mei_elems);  // Add it to the MEI
+      }
+      added.push(draw_relation(he_id,type)); // Draw the edge
+      undo_actions.push(["relation",added,selected,extraselected]);
+      mark_secondaries(get_by_id(mei,he_id));
+      selected.concat(extraselected).forEach(toggle_selected); // De-select
+    }
+}
+
+
+
+function draw_graph_old(draw_context) {
+  console.debug("Using globals: mei_graph, mei, selected, extraselected, document");
+  var mei_graph = mei.getElementsByTagName("graph")[0];
+  // There's a multi-stage process to get all the info we
+  // need... First we get the nodes from the graph element.
+  var nodes_array = Array.from(mei_graph.getElementsByTagName("node"));
+  // Get the nodes representing relations
+  var relations_nodes = nodes_array.filter((x) => { return x.getAttribute("type") == "relation";})
+  // Get the nodes representing metarelations
+  var metarelations_nodes = nodes_array.filter((x) => { return x.getAttribute("type") == "metarelation";})
+
+  // Next we get the note labels
+  var note_ids = nodes_array.map((x) => {
+                try{
+                  return [x, 
+                          node_to_note_id(x)]
+                }catch{
+                  return [];
+                }
+              }).filter((x) => {return x.length != 0;});
+  // Now get the arcs/edges
+  var arcs_array = Array.from(mei_graph.getElementsByTagName("arc"));
+  var relations_arcs = [];
+  var metarelations_arcs = [];
+  // And draw them all.
+  arcs_array.forEach((x) => {
+      var n1 = get_by_id(mei,x.getAttribute("from")); 
+      var n2 = get_by_id(mei,x.getAttribute("to"));
+      if (!relations_nodes.includes(n1) && !metarelations_nodes.includes(n1)){
+        //Regular edge, just draw. TODO: Fix assumption that
+        //nodes are notes if we reach this.
+        var id1 = note_ids.find((y) => {
+              return y[0] == n1;
+            })[1];
+        var id2 = note_ids.find((y) => {
+              return y[0] == n2;
+            })[1];
+        selected = [get_by_id(document,id1),get_by_id(document,id2) ];
+        draw_edges();
+        selected = [];
+      }else if (!metarelations_nodes.includes(n1)){
+        var id2 = note_ids.find((y) => {
+              return y[0] == n2;
+            })[1];
+        relations_arcs.push([n1,id2,x.getAttribute("type")]);
+      }else {
+        metarelations_arcs.push([n1,n2.getAttribute("xml:id"),x.getAttribute("type")]);
+      }
+
+  });
+  relations_nodes.forEach((x) => {
+      var relation_nodes = relations_arcs.
+                  filter((y) => {return y[0] == x;}).
+                  map((y) => {return [y[2],get_by_id(document,y[1])];})
+      selected = relation_nodes.
+                  filter((y) => {return y[0] == "secondary";}).
+                  map((y) => { return y[1];});
+      extraselected = relation_nodes.
+                  filter((y) => {return y[0] == "primary";}).
+                  map((y) => { return y[1];});
+      var he_labels = x.getElementsByTagName("label");
+      var type = "";
+      if(he_labels.length > 0){
+        type = he_labels[0].getAttribute("type");
+      }
+      var added = draw_relation(x.getAttribute("xml:id"),type);
+      if(added.length != 0)
+        mark_secondaries(x);
+      selected = [];
+      extraselected = [];
+    });
+
+  metarelations_nodes.forEach((x) => {
+      var metarelation_nodes = metarelations_arcs.
+                  filter((y) => {return y[0] == x;}).
+                  map((y) => {return [y[2],get_by_id(document,y[1])];})
+      selected = metarelation_nodes.
+                  filter((y) => {return y[0] == "secondary";}).
+                  map((y) => { return y[1];});
+      extraselected = metarelation_nodes.
+                  filter((y) => {return y[0] == "primary";}).
+                  map((y) => { return y[1];});
+      var me_labels = x.getElementsByTagName("label");
+      var type = "";
+      if(me_labels.length > 0){
+        type = me_labels[0].getAttribute("type");
+      }
+      var added = draw_metarelation(x.getAttribute("xml:id"),type);
+      selected = [];
+      extraselected = [];
+    });
+
+
+}
+
+//utils.js
+
+function add_to_svg_bg(newElement) {
+  var sibling = document.getElementsByClassName("system")[0];
+  var parent = sibling.parentNode;
+  console.debug("Using global: document to get 'system' element");
+  parent.insertBefore(newElement,sibling);
+}
+
+function add_to_svg_fg(newElement) {
+  var sibling = document.getElementsByClassName("system")[0];
+  console.debug("Using global: document to get 'system' element");
+  var parent = sibling.parentNode;
+  parent.appendChild(newElement);
+}
+
+
+function g() {
+  var newElement = document.createElementNS("http://www.w3.org/2000/svg", 'g');
+  console.debug("Using global: document to create new element");
+  return newElement;
+}
+
+// Get the MEI-graph nodes that are adjacent to a relation
+function relation_allnodes(he) {
+  console.debug("Using globals: mei, mei_graph to find graph connections");
+  var arcs_array = Array.from(mei_graph.getElementsByTagName("arc"));
+  var nodes = [];
+  arcs_array.forEach((a) => {
+        if(a.getAttribute("from") == "#"+he.getAttribute("xml:id")){
+          nodes.push(get_by_id(mei,a.getAttribute("to")));
+        }
+      });
+  return nodes;
+}
+// Get the MEI-graph nodes that are adjacent and primary to a relation
+function relation_primaries(he) {
+  console.debug("Using globals: mei, mei_graph to find graph connections");
+  var arcs_array = Array.from(mei_graph.getElementsByTagName("arc"));
+  var nodes = [];
+  arcs_array.forEach((a) => {
+    if(a.getAttribute("from") == "#"+he.getAttribute("xml:id") &&
+       a.getAttribute("type") == "primary"){
+      nodes.push(get_by_id(mei,a.getAttribute("to")));
+    }
+      });
+  return nodes;
+}
+// Get the MEI-graph nodes that are adjacent and secondary to a relation
+function relation_secondaries(he) {
+  console.debug("Using globals: mei, mei_graph to find graph connections");
+  var arcs_array = Array.from(mei_graph.getElementsByTagName("arc"));
+  var nodes = [];
+  arcs_array.forEach((a) => {
+    if(a.getAttribute("from") == "#"+he.getAttribute("xml:id") &&
+       a.getAttribute("type") == "secondary"){
+      nodes.push(get_by_id(mei,a.getAttribute("to")));
+    }
+      });
+  return nodes;
+}
+// Set up new graph node for a note
+function add_mei_node_for(mei,mei_graph,note) {
+    console.debug("Using globals: mei, mei_graph to create and place elem");
+    var id = note.getAttribute("id");
+    var elem = get_by_id(mei,"gn-"+id);
+    if (elem != null) {
+      return elem;
+    }
+    elem = mei.createElement("node");
+    // This node represent that note
+    var label = mei.createElement("label");
+    var note = mei.createElement("note");
+    note.setAttribute("sameas","#"+id);
+    elem.appendChild(label);
+    label.appendChild(note);
+    // But should have a separate XML ID
+    elem.setAttribute("xml:id","gn-" + id);
+    mei_graph.appendChild(elem);
+    return elem;
+}
+            
+// Find graphical element and hide it
+function hide_note(note) {
+  console.debug("Using globals: document to find elem");
+  var elem = get_by_id(document,node_to_note_id(note));
+  if(elem)
+    elem.classList.add("hidden");
+  return elem;
+}
+
+// Find graphical element and hide it
+function hide_he(he) {
+  console.debug("Using globals: document to find elem");
+  var elem = get_by_id(document,he.getAttribute("xml:id"));
+  if(elem) 
+    elem.classList.add("hidden");
+  return elem;
+}
+
+// For a certain relation, find its secondaries and mark them
+function mark_secondaries(he) {
+    console.debug("Using globals: document, mei to find elems");
+    if(!mei.contains(he))
+      he = get_by_id(mei,he.id);
+    var secondaries = relation_secondaries(he);
+    secondaries.forEach((n) => {
+	var svg_note = get_by_id(document,node_to_note_id(n));
+	mark_secondary(svg_note);
+    });
+}
+
+
+// For a certain relation, find its secondaries and unmark them
+function unmark_secondaries(he) {
+    console.debug("Using globals: document, mei to find elems");
+    if(!mei.contains(he))
+      he = get_by_id(mei,he.id);
+    var secondaries = relation_secondaries(he);
+    secondaries.forEach((n) => {
+	var svg_note = get_by_id(document,node_to_note_id(n));
+	unmark_secondary(svg_note);
+    });
+}
+
+// draw.js
+
+// Draw a series of edges (TODO: make it much much much better)
+function draw_edges() {
+  console.debug("Using globals: selected");
+  var added = [];
+  if(selected.includes(undefined))
+    return [];
+  for(var i = 1; i < selected.length; i++) {
+    note1 = note_coords(selected[i-1]);
+    note2 = note_coords(selected[i]);
+    //added.push(line(note1,note2));
+    var elem = roundedHull([note1,note2]);
+    add_to_svg_bg(elem);
+    added.push(elem);
+  // TODO: Add selectability on edge.
+  }
+  return added;
+}
+
+// Draw a relation as a  series of edges (TODO: make it much much much better)
+// New version below as draw_relation_arg. It will draw based on
+// an already MEI-encoded relation rather than this ad-hoc
+// stuff.
+function draw_relation(id,type) {
+  console.debug("Using globals: selected, extraselected, mei, mei_graph, shades");
+  var added = [];
+  var notes = selected.concat(extraselected);
+  if(notes.includes(undefined)) {
+    console.log("Note missing, relation not drawn");
+    return [];
+  }
+  var secondaries = selected;
+  var primaries = extraselected;
+
+  notes.sort((a,b) => { 
+      var p1= note_coords(a);
+      var p2= note_coords(b);
+      return (p1[0] - p2[0]) ? (p1[0] - p2[0]) : (p1[1] - p2[1]);
+    });
+
+
+  var elem = roundedHull(notes.map(note_coords));
+  elem.setAttribute("id",id);
+  elem.classList.add("relation");
+  elem.setAttribute("type",type);
+  elem.onwheel = (e) => {
+    var elem1 = e.target;
+    var paren = elem1.parentElement;
+    paren.removeChild(elem1);
+    paren.insertBefore(elem1,paren.children[0]);
+    elem.onmouseout();
+    return false;
+  };
+  if(shades)
+    toggle_shade(elem);
+  add_to_svg_bg(elem);
+  added.push(elem);
+  elem.onclick = function(ev) {toggle_selected(elem,ev.shiftKey);};
+  elem.onmouseover = function (ev) {
+    primaries.forEach((item) => { item.classList.add("extrahover");});
+    secondaries.forEach((item) => { item.classList.add("selecthover");});
+  }
+  elem.onmouseout = function (ev) {
+    primaries.forEach((item) => { item.classList.remove("extrahover");});
+    secondaries.forEach((item) => { item.classList.remove("selecthover");});
+  }
+
+  return added;
+}
+
+function draw_metarelation(id,type) {
+  console.debug("Using globals: selected, extraselected, document, shades");
+  var added = [];
+  var targets =selected.concat(extraselected); 
+  var coords = targets.map(get_metarelation_target);
+  var x = average(coords.map((e) => e[0]));
+  // Above
+  var y =
+    targets.concat([document.getElementsByClassName("system")[0]]).map((b) => b.getBBox().y).sort((a,b) => a > b)[0] - 500;
+
+  coords.push([x,y]);
+  var g_elem = g();
+  var elem = roundedHull(coords);
+  g_elem.setAttribute("id",id);
+  g_elem.classList.add("metarelation");
+  g_elem.setAttribute("type",type);
+  g_elem.onwheel = (e) => {
+    var elem1 = e.target;
+    var paren = elem1.parentElement;
+    paren.removeChild(elem1);
+    paren.insertBefore(elem1,paren.children[0]);
+    return false;
+  };
+  coords.forEach((crds) => { var line_elem = line([x,y],crds);
+      g_elem.appendChild(line_elem);});
+  g_elem.appendChild(circle([x,y],200));
+  if(shades)
+    toggle_shade(g_elem);
+  add_to_svg_bg(g_elem);
+  added.push(g_elem);
+  g_elem.onclick = function(ev) {toggle_selected(g_elem,ev.shiftKey);};
+  g_elem.onmouseover = function (ev) {
+    targets.forEach((item) => { item.classList.add("relationhover"); });
+  }
+  g_elem.onmouseout = function (ev) {
+    targets.forEach((item) => { item.classList.remove("relationhover"); });
+  }
+  return added;
+  
+
+}
+
+// graph.js
+
+// Add a collection of edges to the MEI graph element
+function add_edges(mei) {
+  console.debug("Using globals: selected, mei, mei_graph");
+  var added = [];
+  for(var i = 0; i < selected.length; i++) {
+    var elem = add_mei_node_for(mei,mei_graph,selected[i]);
+    added.push(elem);
+  }
+  for(var i = 1; i < selected.length; i++) {
+    // So that we can refer to the node (not the note) ID in
+    // arcs/edges
+    var elem = mei.createElement("arc");
+    elem.setAttribute("from","#gn-"+selected[i-1].getAttribute("id"));
+    elem.setAttribute("to","#gn-"+selected[i].getAttribute("id"));
+    mei_graph.appendChild(elem);
+    added.push(elem);
+  }
+  return added;
+}
+
+// Add a "relation" to the MEI graph element. We model this
+// with a new node.
+function add_relation(mei,mei_graph,type,he_id_param) {
+  console.debug("Using globals: selected, extraselected");
+  var added = [];
+  // Add new nodes for all notes
+  for(var i = 0; i < selected.length; i++) {
+    var elem = add_mei_node_for(mei,mei_graph,selected[i]);
+    added.push(elem);
+  }
+  for(var i = 0; i < extraselected.length; i++) {
+    var elem = add_mei_node_for(mei,mei_graph,extraselected[i]);
+    added.push(elem);
+  }
+  // Add a new node for the relation
+  var he_elem = mei.createElement("node");
+  he_elem.setAttribute("type","relation");
+  var he_label = mei.createElement("label");
+  if(typeof type != 'undefined')
+    he_label.setAttribute("type",type)
+  he_elem.appendChild(he_label);
+  // Who knows if this is enough
+  var he_id;
+  if(typeof he_id_param == 'undefined')
+    he_id = "he-"+Math.floor(Math.random() * (1 << 20)).toString(16);
+  else
+    he_id = he_id_param;
+  he_elem.setAttribute("xml:id",he_id);
+  mei_graph.appendChild(he_elem);
+  added.push(he_elem);
+  for(var i = 0; i < selected.length; i++) {
+    // So that we can refer to the node (not the note) ID in
+    // arcs/edges
+    var elem = mei.createElement("arc");
+    elem.setAttribute("from","#"+he_id);
+    elem.setAttribute("to","#gn-"+selected[i].id);
+    elem.setAttribute("type","secondary");
+    mei_graph.appendChild(elem);
+    added.push(elem);
+  }
+  for(var i = 0; i < extraselected.length; i++) {
+    // So that we can refer to the node (not the note) ID in
+    // arcs/edges
+    var elem = mei.createElement("arc");
+    elem.setAttribute("from","#"+he_id);
+    elem.setAttribute("to","#gn-"+extraselected[i].id);
+    elem.setAttribute("type","primary");
+    mei_graph.appendChild(elem);
+    added.push(elem);
+  }
+  return [he_id,added.reverse()];
+}
+
+function add_metarelation(mei,mei_graph,type,he_id_param) {
+  console.debug("Using globals: mei, mei_graph, selected, extraselected");
+  // Add a new node for the relation
+  var added = [];
+  var he_elem = mei.createElement("node");
+  he_elem.setAttribute("type","metarelation");
+  var he_label = mei.createElement("label");
+  if(typeof type != 'undefined')
+    he_label.setAttribute("type",type)
+  he_elem.appendChild(he_label);
+  // Who knows if this is enough
+  var he_id;
+  if(typeof he_id_param == 'undefined')
+    he_id = "he-"+Math.floor(Math.random() * (1 << 20)).toString(16);
+  else
+    he_id = he_id_param;
+  he_elem.setAttribute("xml:id",he_id);
+  mei_graph.appendChild(he_elem);
+  added.push(he_elem);
+  for(var i = 0; i < selected.length; i++) {
+    // So that we can refer to the node (not the note) ID in
+    // arcs/edges
+    var elem = mei.createElement("arc");
+    elem.setAttribute("from","#"+he_id);
+    elem.setAttribute("to","#"+selected[i].id);
+    elem.setAttribute("type","secondary");
+    mei_graph.appendChild(elem);
+    added.push(elem);
+  }
+  for(var i = 0; i < extraselected.length; i++) {
+    // So that we can refer to the node (not the note) ID in
+    // arcs/edges
+    var elem = mei.createElement("arc");
+    elem.setAttribute("from","#"+he_id);
+    elem.setAttribute("to","#"+extraselected[i].id);
+    elem.setAttribute("type","primary");
+    mei_graph.appendChild(elem);
+    added.push(elem);
+  }
+  return [he_id,added.reverse()];
+}
+
diff --git a/js/reductions.js b/js/reductions.js
index f3866eb1..8722e329 100644
--- a/js/reductions.js
+++ b/js/reductions.js
@@ -41,12 +41,14 @@ function calc_reduce_arg(mei_graph, remaining_relations, target_relations){
 
 }
 
+function do_reduce_pre(draw_context) { do_reduce_arg(draw_context, mei_graph, selected, extraselected);}
 
 // Do a reduction in the context, using the given graph and the
 // (optional) selected hyperedges from this context.
-function do_reduce_arg(draw_context, mei_graph, selection){
+function do_reduce_arg(draw_context, mei_graph, sel, extra){
+  var selection = sel.concat(extra);
   var target_relations = selection.map(
-        (ge) => get_by_id(mei_graph.getRootNode(), id_or_oldid(ge))
+        (ge) => get_by_id(mei_graph.getRootNode(), get_id(ge))
       );
 
   var all_relations_nodes = Array.from(mei_graph.getElementsByTagName("node")).filter((x) => { return x.getAttribute("type") == "relation";});
@@ -75,7 +77,25 @@ function do_reduce_arg(draw_context, mei_graph, selection){
                       (n) => hide_note_arg(draw_context,n)
     	      ));
 
-  return [removed_relations,removed_notes,graphicals];
+  var undo = [removed_relations,removed_notes,graphicals];
+  draw_context['reductions'].push(["reduce",undo,sel,extra]);
 }
 
+function undo_reduce_arg(draw_context){
+  console.log("Using globals: selected/extraselected")
+  undo_actions = draw_context['reductions'];
+  // Get latest undo_actions
+  if(undo_actions.length == 0) {
+    console.log("Nothing to undo");
+    return;
+  }
+  // Deselect the current selection, if any
+  selected.forEach(toggle_selected);
+  extraselected.forEach((x) => {toggle_selected(x,true);});
+  [what,elems,sel,extra] = undo_actions.pop();
+  var [relations,notes,graphicals] = elems;
+  graphicals.flat().forEach((x) => { if(x) x.classList.remove("hidden");});
+  sel.forEach((x) => {toggle_selected(x);});
+  extra.forEach((x) => {toggle_selected(x,true);});
+}
 
diff --git a/js/utils.js b/js/utils.js
index d52ed53d..efc0bcd4 100644
--- a/js/utils.js
+++ b/js/utils.js
@@ -85,6 +85,7 @@ var roundedHullN = function (polyPoints, hullPadding) {
 
 
 function roundedHull(points) {
+  // Returns an SVG path for a rounded hull around the points
   var hullPadding = 200;
   var newElement = document.createElementNS("http://www.w3.org/2000/svg", 'path');
   newElement.setAttribute('fill', getRandomColor()); //TODO: Better colour picking
@@ -99,6 +100,7 @@ function roundedHull(points) {
 }
 
 function getRandomColor() {
+    // Returns a random colour
     var letters = '0123456789ABCDEF';
     var color = '#';
     for (var i = 0; i < 6; i++) {
@@ -108,6 +110,7 @@ function getRandomColor() {
 }
 
 function getRandomShade(colour) {
+    //  Returns a random shade within a specified range
     var letters = '0123456789ABCDEF';
     var shade = '#';
     for (var i = 0; i < 6; i++) {
@@ -148,6 +151,7 @@ function circle(p,rad) {
 }
 
 function flip_to_bg(elem) {
+    // Shifts the SVG element to be drawn first (e.g. in the background)
     var paren = elem.parentElement;
     paren.removeChild(elem);
     paren.insertBefore(elem,paren.children[0]);
@@ -155,50 +159,33 @@ function flip_to_bg(elem) {
 
 
 function add_to_svg_bg_arg(svg_elem,newElement) {
+  // Adds newElement in the background of the system element 
   var sibling = svg_elem.getElementsByClassName("system")[0];
   var parent = sibling.parentNode;
   parent.insertBefore(newElement,sibling);
 }
 
-function add_to_svg_bg(newElement) {
-  var sibling = document.getElementsByClassName("system")[0];
-  var parent = sibling.parentNode;
-  console.debug("Using global: document to get 'system' element");
-  parent.insertBefore(newElement,sibling);
-}
-
 function add_to_svg_fg_arg(svg_elem,newElement) {
+  // Adds newElement in the foreground of the system element 
   var sibling = svg_elem.getElementsByClassName("system")[0];
   var parent = sibling.parentNode;
   parent.appendChild(newElement);
 }
 
-function add_to_svg_fg(newElement) {
-  var sibling = document.getElementsByClassName("system")[0];
-  console.debug("Using global: document to get 'system' element");
-  var parent = sibling.parentNode;
-  parent.appendChild(newElement);
-}
-
-
 function g_arg(svg_elem) {
+  // Creates a new SVG g element
   var newElement = svg_elem.getRootNode().createElementNS("http://www.w3.org/2000/svg", 'g');
   return newElement;
 }
 
-function g() {
-  var newElement = document.createElementNS("http://www.w3.org/2000/svg", 'g');
-  console.debug("Using global: document to create new element");
-  return newElement;
-}
-
 // Note coordinates are off center by a bit
 function note_coords(note) {
+  // Computes useful coordinates of a note
   return [note.getElementsByTagName("use")[0].x.animVal.value + 100,
           note.getElementsByTagName("use")[0].y.animVal.value]
 }
 
-function get_by_oldid_elem(doc,elem) {return get_by_id(doc, id_or_oldid(elem));}
+function get_by_oldid_elem(doc,elem) {return get_by_id(doc, get_id(elem));}
 
 // Gets all elements from the doc with the oldid
 function get_by_oldid(doc,id){
@@ -211,8 +198,10 @@ function get_by_oldid(doc,id){
   }
 }
 
-// From id string to element
+// From id string to element, looking in the document doc
 function get_by_id(doc,id) {
+  if(!id)
+    return null;
   if (id[0] == "#") { id = id.slice(1); }
   var elem =  doc.querySelector("[*|id='"+id+"']");
   if(elem) {
@@ -230,6 +219,58 @@ function id_or_oldid(elem){
     return elem.id;
 }
 
+// More complex utility to fully search until we find the "basic" ID, in
+// either the MEI or the document.
+// Takes an element, gives an ID string
+function get_id(elem) {
+  if(document.contains(elem)){
+    // SVG traversal
+    if(!elem.hasAttribute("oldid"))
+      return elem.id;
+    else
+      return get_id(document.getElementById(elem.getAttribute("oldid")))
+  }else if(elem.hasAttribute("xml:id")){
+    // MEI traversal
+    if(elem.hasAttribute("sameas"))
+	return get_id(get_by_id(mei,elem.getAttribute("sameas")))
+    else if(elem.hasAttribute("corresp"))
+	return get_id(get_by_id(mei,elem.getAttribute("corresp")))
+    else if(elem.hasAttribute("copyof"))
+	return get_id(get_by_id(mei,elem.getAttribute("copyof")))
+    else if(elem.hasAttribute("xml:id"))
+        return elem.getAttribute("xml:id")
+  }
+}
+
+function id_in_svg(draw_context,id) {
+  if(!id)
+    return undefined;
+  // Computes the relevant ID string for the element in the draw
+  // context that correlates to the given ID string
+  if (id[0] == "#") { id = id.slice(1); }
+  // use the layer.id_mapping to find the things in the layer score (if
+  // that's how it is), then dc.id_prefix to calculate the final id
+  var layer_id = id_in_layer(draw_context.layer, id);
+  var svg_note = document.getElementById(layer_id);
+  if(draw_context.svg_elem.contains(svg_note))
+    return layer_id;
+  if(layer_id)
+    return draw_context.id_prefix + layer_id;
+}
+
+function id_in_layer(layer_context, id) {
+  // Computes the relevant ID string for the element in the layer
+  // context that correlates to the given ID string
+  if (id[0] == "#") { id = id.slice(1); }
+  //use the layer.id_mapping to find the thing, if it exists
+  var pair = layer_context.id_mapping.find((p) => p[1] == id);
+  if(pair)
+    return pair[0];
+  else
+    return undefined; 
+}
+
+
 
 // From graph node to list of all arcs that refer to it
 function arcs_where_node_referred_to_arg(mei_graph,id) {
@@ -250,15 +291,36 @@ function node_referred_to(id) {
      }).length > 0;
 }
 
-// From MEI graph node to its referred note.
-function note_get_sameas_arg(prefix,note) {
+// From MEI graph node to the note in the layer referring to the same one
+function node_to_note_id_layer(layer_context, node) {
+  var id = node.getElementsByTagName("label")[0].
+	      getElementsByTagName("note")[0].
+	      getAttribute("sameas");
+  var pair = layer_context.id_mapping.find((x) => ("#"+x[1]) == id);
+  if(pair)
+    return pair[0];
+  else
+    return null;
+}
+
+// From MEI graph node to and ID string for the note as drawn in the draw context
+function node_to_note_id_drawn(draw_context, note) {
+  var layer_note = node_to_note_id_layer(draw_context.layer, note);
+  if(draw_context.svg_elem.getRootNode().getElementById(layer_note))
+    return "#" + layer_note;
+  else
+    return "#"+draw_context.id_prefix + layer_note;
+}
+
+// From MEI graph node to the ID string for its referred note.
+function node_to_note_id_prefix(prefix,note) {
   return note.getElementsByTagName("label")[0].
 	      getElementsByTagName("note")[0].
 	      getAttribute("sameas").replace("#","#"+prefix);
 }
 
-// From MEI graph node to its referred note.
-function note_get_sameas(note) {
+// From MEI graph node to the ID string for its referred note.
+function node_to_note_id(note) {
   return note.getElementsByTagName("label")[0].
 	      getElementsByTagName("note")[0].
 	      getAttribute("sameas");
@@ -269,11 +331,11 @@ function mod(n, m) {
   return ((n % m) + m) % m;
 }
 
-// What's the accidentals for this note?
+// What's the accidentals for the given (SVG or MEI) note?
 function note_get_accid(note) {
   console.debug("Using globals: document, mei to find element");
   if(document.contains(note))
-    note = get_by_id(mei,note.id);
+    note = get_by_id(mei,get_id(note));
   if(note.hasAttribute("accid.ges"))
       return note.getAttribute("accid.ges");
   if(note.hasAttribute("accid"))
@@ -295,30 +357,26 @@ function note_get_accid(note) {
 function get_time(note) {
   console.debug("Using globals: document, mei to find element");
   if(document.contains(note))
-    note = get_by_id(mei,note.id);
+    note = get_by_id(mei,get_id(note));
   return vrvToolkit.getTimeForElement(note.getAttribute("xml:id"));
 }
 
 
 // From any relation element to list of MEI note elements
 function relation_get_notes(he) {
-  console.debug("Using globals: document, mei to find element");
-  if(document.contains(he))
-    he = get_by_id(mei,he.id);
-  var note_nodes = relation_allnodes(he);
-  var notes = note_nodes.map(note_get_sameas).map((n) => get_by_id(mei,n));
+  he = get_by_id(mei,get_id(he));
+  var note_nodes = relation_allnodes_arg(mei_graph,he);
+  var notes = note_nodes.map(node_to_note_id).map((n) => get_by_id(mei,n));
   return notes;
 
 }
 // From any relation element to list of MEI note elements
 function relation_get_notes_separated(he) {
-  console.debug("Using globals: document, mei to find element");
-  if(document.contains(he))
-    he = get_by_id(mei,he.id);
-  var prim_nodes = relation_primaries(he);
-  var prims = prim_nodes.map(note_get_sameas).map((n) => get_by_id(mei,n));
-  var sec_nodes = relation_secondaries(he);
-  var secs = sec_nodes.map(note_get_sameas).map((n) => get_by_id(mei,n));
+  he = get_by_id(mei,get_id(he));
+  var prim_nodes = relation_primaries_arg(mei_graph,he);
+  var prims = prim_nodes.map(node_to_note_id).map((n) => get_by_id(mei,n));
+  var sec_nodes = relation_secondaries_arg(mei_graph,he);
+  var secs = sec_nodes.map(node_to_note_id).map((n) => get_by_id(mei,n));
   return [prims,secs];
 }
 
@@ -334,18 +392,6 @@ function relation_allnodes_arg(mei_graph,he) {
   return nodes;
 }
 
-// Get the MEI-graph nodes that are adjacent to a relation
-function relation_allnodes(he) {
-  console.debug("Using globals: mei, mei_graph to find graph connections");
-  var arcs_array = Array.from(mei_graph.getElementsByTagName("arc"));
-  var nodes = [];
-  arcs_array.forEach((a) => {
-        if(a.getAttribute("from") == "#"+he.getAttribute("xml:id")){
-          nodes.push(get_by_id(mei,a.getAttribute("to")));
-        }
-      });
-  return nodes;
-}
 // Get the MEI-graph nodes that are adjacent and primary to a relation
 function relation_primaries_arg(mei_graph,he) {
   var arcs_array = Array.from(mei_graph.getElementsByTagName("arc"));
@@ -370,33 +416,8 @@ function relation_secondaries_arg(mei_graph,he) {
       });
   return nodes;
 }
-// Get the MEI-graph nodes that are adjacent and primary to a relation
-function relation_primaries(he) {
-  console.debug("Using globals: mei, mei_graph to find graph connections");
-  var arcs_array = Array.from(mei_graph.getElementsByTagName("arc"));
-  var nodes = [];
-  arcs_array.forEach((a) => {
-    if(a.getAttribute("from") == "#"+he.getAttribute("xml:id") &&
-       a.getAttribute("type") == "primary"){
-      nodes.push(get_by_id(mei,a.getAttribute("to")));
-    }
-      });
-  return nodes;
-}
-// Get the MEI-graph nodes that are adjacent and secondary to a relation
-function relation_secondaries(he) {
-  console.debug("Using globals: mei, mei_graph to find graph connections");
-  var arcs_array = Array.from(mei_graph.getElementsByTagName("arc"));
-  var nodes = [];
-  arcs_array.forEach((a) => {
-    if(a.getAttribute("from") == "#"+he.getAttribute("xml:id") &&
-       a.getAttribute("type") == "secondary"){
-      nodes.push(get_by_id(mei,a.getAttribute("to")));
-    }
-      });
-  return nodes;
-}
 
+// Get te type string of the MEI relation node
 function relation_type(he) {
   //TODO: Sanity checks
   if(he.children.length == 0) {
@@ -408,7 +429,7 @@ function relation_type(he) {
 
 // Set up new graph node for a note
 function add_mei_node_for_arg(mei_graph,note) {
-    var id = id_or_oldid(note);
+    var id = get_id(note);
     var elem = get_by_id(mei_graph.getRootNode(),"gn-"+id);
     if (elem != null) {
       return elem;
@@ -426,57 +447,19 @@ function add_mei_node_for_arg(mei_graph,note) {
     return elem;
 }
 
-// Set up new graph node for a note
-function add_mei_node_for(mei,mei_graph,note) {
-    console.debug("Using globals: mei, mei_graph to create and place elem");
-    var id = note.getAttribute("id");
-    var elem = get_by_id(mei,"gn-"+id);
-    if (elem != null) {
-      return elem;
-    }
-    elem = mei.createElement("node");
-    // This node represent that note
-    var label = mei.createElement("label");
-    var note = mei.createElement("note");
-    note.setAttribute("sameas","#"+id);
-    elem.appendChild(label);
-    label.appendChild(note);
-    // But should have a separate XML ID
-    elem.setAttribute("xml:id","gn-" + id);
-    mei_graph.appendChild(elem);
-    return elem;
-}
             
-// Find graphical element and hide it
+// Find graphical element corresponding to an MEI graph node and hide it
 function hide_note_arg(draw_context,note) {
-  var elem = get_by_id(draw_context.svg_elem.getRootNode(),note_get_sameas_arg(draw_context.id_prefix,note));
-  if(elem)
+  var elem = get_by_id(draw_context.svg_elem.getRootNode(),id_in_svg(draw_context,node_to_note_id(note)));
+  if(elem && draw_context.svg_elem.contains(elem)) 
     elem.classList.add("hidden");
   return elem;
 }
 
-// Find graphical element and hide it
+// Find graphical element corresponding to an MEI graph node and hide it
 function hide_he_arg(draw_context,he) {
   var elem = get_by_id(draw_context.svg_elem.getRootNode(),draw_context.id_prefix + he.getAttribute("xml:id"));
-  if(elem) 
-    elem.classList.add("hidden");
-  return elem;
-}
-            
-// Find graphical element and hide it
-function hide_note(note) {
-  console.debug("Using globals: document to find elem");
-  var elem = get_by_id(document,note_get_sameas(note));
-  if(elem)
-    elem.classList.add("hidden");
-  return elem;
-}
-
-// Find graphical element and hide it
-function hide_he(he) {
-  console.debug("Using globals: document to find elem");
-  var elem = get_by_id(document,he.getAttribute("xml:id"));
-  if(elem) 
+  if(elem && draw_context.svg_elem.contains(elem)) 
     elem.classList.add("hidden");
   return elem;
 }
@@ -492,7 +475,7 @@ function mark_secondary(item) {
   }
 }
 
-// No longer a secondary - bring it back
+// No longer as much of a secondary
 function unmark_secondary(item) {
   var level = getComputedStyle(item).getPropertyValue("--how-secondary");
   item.style.setProperty("--how-secondary", level/2);
@@ -500,52 +483,28 @@ function unmark_secondary(item) {
     item.classList.remove("secondarynote");
 }
 
-// For a certain relation, find its secondaries and mark them
+// For a certain MEI relation node, find its secondaries and mark them as
+// secondary in the draw context
 function mark_secondaries_arg(draw_context,mei_graph,he) {
-    var mei = draw_context.mei;
     var svg_elem = draw_context.svg_elem;
-    if(he.tagName != "node")
+    if(he.tagName != "node") //TODO: Probably bad, but shouldn't happen from do_relation
       he = get_by_id(mei_graph.getRootNode(),he.id);
     var secondaries = relation_secondaries_arg(mei_graph,he);
     secondaries.forEach((n) => {
-	var svg_note = get_by_id(svg_elem.getRootNode(),note_get_sameas_arg(draw_context.id_prefix,n));
+	var svg_note = document.getElementById(id_in_svg(draw_context,node_to_note_id(n)))
 	mark_secondary(svg_note);
     });
 }
 
-// For a certain relation, find its secondaries and mark them
-function mark_secondaries(he) {
-    console.debug("Using globals: document, mei to find elems");
-    if(!mei.contains(he))
-      he = get_by_id(mei,he.id);
-    var secondaries = relation_secondaries(he);
-    secondaries.forEach((n) => {
-	var svg_note = get_by_id(document,note_get_sameas(n));
-	mark_secondary(svg_note);
-    });
-}
-
-// For a certain relation, find its secondaries and unmark them
+// For a certain MEI relation node, find its secondaries and unmark them as
+// secondary in the draw context
 function unmark_secondaries_arg(draw_context,mei_graph,he) {
-    var mei = draw_context.mei;
     var svg_elem = draw_context.svg_elem;
     if(he.tagName != "node")
       he = get_by_id(mei_graph.getRootNode(),he.id);
     var secondaries = relation_secondaries_arg(mei_graph,he);
     secondaries.forEach((n) => {
-	var svg_note = get_by_id(svg_elem.getRootNode(), note_get_sameas_arg(draw_context.id_prefix, n));
-	unmark_secondary(svg_note);
-    });
-}
-
-// For a certain relation, find its secondaries and unmark them
-function unmark_secondaries(he) {
-    console.debug("Using globals: document, mei to find elems");
-    if(!mei.contains(he))
-      he = get_by_id(mei,he.id);
-    var secondaries = relation_secondaries(he);
-    secondaries.forEach((n) => {
-	var svg_note = get_by_id(document,note_get_sameas(n));
+	var svg_note = document.getElementById(id_in_svg(draw_context,node_to_note_id(n)))
 	unmark_secondary(svg_note);
     });
 }
@@ -579,12 +538,24 @@ function select_samenote() {
   }
 }
 
-function svg_find_from_mei_elem(svg_elem, id_prefix, e) {
+// Deprecated
+function svg_find_from_mei_elem(svg_container, id_prefix, e) {
+  if(!e)
+    return null;
   // TODO: Sanity checks
   var id = id_prefix + e.getAttribute("xml:id");
-  return svg_elem.getRootNode().getElementById(id);
+  var svg_e = svg_container.getRootNode().getElementById(id);
+  if(svg_e)
+    return svg_e;
+  else {
+    id = e.getAttribute("xml:id");
+    svg_e = svg_container.getRootNode().getElementById(id);
+    if(svg_container.contains(svg_e))
+      return svg_e;
+  }
 }
 
+// Get the top coordinate of the bounding box of the given element
 function getBoundingBoxTop (elem) {
     // use the native SVG interface to get the bounding box
     var bbox = elem.getBBox();
@@ -592,6 +563,7 @@ function getBoundingBoxTop (elem) {
     return bbox.y + bbox.height;
 }
 
+// Get the Interesting class from a classlist
 function get_class_from_classlist(elem){
   // TODO: If more things can be selected etc., it should be reflected here
   var ci = "";
@@ -604,7 +576,7 @@ function get_class_from_classlist(elem){
   return ci;
 }
 
-
+// Get the center of the bounding box
 function getBoundingBoxCenter (elem) {
     // use the native SVG interface to get the bounding box
     var bbox = elem.getBBox();
@@ -612,6 +584,7 @@ function getBoundingBoxCenter (elem) {
     return [bbox.x + bbox.width/2, bbox.y + bbox.height/2];
 }
 
+// "Smart" selection of a coordinate
 function getBoundingBoxOffCenter (elem) {
     // use the native SVG interface to get the bounding box
     var bbox = elem.getBBox();
@@ -622,6 +595,7 @@ function getBoundingBoxOffCenter (elem) {
     return [bbox.x + bbox.width/2, bbox.y + bbox.height/2];
 }
 
+// Get the correct coordinates for where to aim the metarelation
 function get_metarelation_target(elem) {
   if(elem.classList.contains("metarelation")){
     var circ= elem.getElementsByTagName("circle")[0];
@@ -636,16 +610,18 @@ function get_metarelation_target(elem) {
 
 }
 
+// Is this an empty relation?
 function is_empty_relation(elem) {
   return relation_get_notes(elem).length == 0;
 }
 
+// Are we looking a a single note?
 function is_note_node(elem) {
   notes = elem.getElementsByTagName("note");
   return elem.tagName ="node" && notes.length == 1 && notes[0].getAttribute("sameas");
 }
 
-
+// Clean up in the graph to remove empty relations
 function remove_empty_relations(graph) {
   Array.from(graph.getElementsByTagName("node")).forEach((elem) => {
       if(!is_note_node(elem) && is_empty_relation(elem)){
@@ -654,16 +630,17 @@ function remove_empty_relations(graph) {
   });
 }
 
-
+// Average over a list of values
 function average(l) {return l.reduce((a,b) => a + b, 0)/l.length;}
 
+// Compute a text to represent the elements
 function to_text_arg(draw_contexts,mei_graph,elems) {
   //TODO: Detect and warn for selections spanning several drawing contexts
   if(elems.length == 0)
     return "";
   if(elems[0].classList.contains("note")){
     return "notes("+elems.map((elem) => {
-      var id = id_or_oldid(elem);
+      var id = get_id(elem);
       var mei_elem = get_by_id(mei,id);
       var accid = note_get_accid(mei_elem);
       accid= accid.replace(/s/g,"#")
@@ -678,6 +655,7 @@ function to_text_arg(draw_contexts,mei_graph,elems) {
   }
 }
 
+// Deprecated
 function to_text(elems) {
   if(elems.length == 0)
     return "";
@@ -697,6 +675,7 @@ function to_text(elems) {
   }
 }
 
+// Translate deprecated names
 function fix_synonyms(mei) {
   Array.from(mei.getElementsByTagName("node")).forEach((elem) => {
     if(elem.getAttribute("type") == "hyperedge")
@@ -707,12 +686,110 @@ function fix_synonyms(mei) {
   return mei;
 }
 
+// Make a rest of the same properties as the given note.
+function note_to_rest(mei,note) {
+  var rest = mei.createElementNS("http://www.music-encoding.org/ns/mei", 'rest');
+  rest.setAttribute("xml:id","rest-"+note.getAttribute("xml:id"));
+  rest.setAttribute("dur",note.getAttribute("dur"));
+  rest.setAttribute("n",note.getAttribute("n"));
+  rest.setAttribute("dots",note.getAttribute("dots"));
+  rest.setAttribute("when",note.getAttribute("when"));
+  rest.setAttribute("layer",note.getAttribute("layer"));
+  rest.setAttribute("staff",note.getAttribute("staff"));
+  rest.setAttribute("tstamp.ges",note.getAttribute("tstamp.ges"));
+  rest.setAttribute("tstamp.real",note.getAttribute("tstamp.real"));
+  rest.setAttribute("tstamp",note.getAttribute("tstamp"));
+  rest.setAttribute("loc",note.getAttribute("loc"));
+  rest.setAttribute("dur.ges",note.getAttribute("dur.ges"));
+  rest.setAttribute("dots.ges",note.getAttribute("dots.ges"));
+  rest.setAttribute("dur.metrical",note.getAttribute("dur.ges"));
+  rest.setAttribute("dur.ppq",note.getAttribute("dur.ppq"));
+  rest.setAttribute("dur.real",note.getAttribute("dur.real"));
+  rest.setAttribute("dur.recip",note.getAttribute("dur.recip"));
+  rest.setAttribute("beam",note.getAttribute("beam"));
+  rest.setAttribute("fermata",note.getAttribute("fermata"));
+  rest.setAttribute("tuplet",note.getAttribute("tuplet"));
+  //That's all I can think of. There's probably a better
+  //way to do this..
+  return rest;
+}
+
+function note_to_space(mei,note) {
+  var space = mei.createElementNS("http://www.music-encoding.org/ns/mei", 'space');
+  space.setAttribute("xml:id","rest-"+note.getAttribute("xml:id"));
+  space.setAttribute("dur",note.getAttribute("dur"));
+  space.setAttribute("n",note.getAttribute("n"));
+  space.setAttribute("dots",note.getAttribute("dots"));
+  space.setAttribute("when",note.getAttribute("when"));
+  space.setAttribute("layer",note.getAttribute("layer"));
+  space.setAttribute("staff",note.getAttribute("staff"));
+  space.setAttribute("tstamp.ges",note.getAttribute("tstamp.ges"));
+  space.setAttribute("tstamp.real",note.getAttribute("tstamp.real"));
+  space.setAttribute("tstamp",note.getAttribute("tstamp"));
+  space.setAttribute("loc",note.getAttribute("loc"));
+  space.setAttribute("dur.ges",note.getAttribute("dur.ges"));
+  space.setAttribute("dots.ges",note.getAttribute("dots.ges"));
+  space.setAttribute("dur.metrical",note.getAttribute("dur.ges"));
+  space.setAttribute("dur.ppq",note.getAttribute("dur.ppq"));
+  space.setAttribute("dur.real",note.getAttribute("dur.real"));
+  space.setAttribute("dur.recip",note.getAttribute("dur.recip"));
+  space.setAttribute("beam",note.getAttribute("beam"));
+  space.setAttribute("fermata",note.getAttribute("fermata"));
+  space.setAttribute("tuplet",note.getAttribute("tuplet"));
+  //That's all I can think of. There's probably a better
+  //way to do this..
+  return space;
+}
+
+
+// Traverse the XML tree and add on a prefix to the start of each ID. If
+// it's an SVG, we also save the old id in the oldid attribute
 function prefix_ids(elem,prefix) {
-  if(elem.id != ""){
+  if(elem.id){
+    // SVG modification
     elem.setAttribute("oldid", elem.id);
     elem.id = prefix+elem.id;
   }
+  if(elem.getAttribute("xml:id")){
+    // MEI modification
+    // No need to set oldid - we have already made links using
+    // copyof/sameas
+    elem.setAttribute("xml:id", prefix+elem.getAttribute("xml:id"));
+  }
   Array.from(elem.children).forEach((e) => prefix_ids(e,prefix));
 }
 
+// Clone an MEI into a new XMLDocument
+function clone_mei(mei) {
+  var new_mei = mei.implementation.createDocument(
+	mei.namespaceURI, //namespace to use
+	null,                     //name of the root element (or for empty document)
+	null                      //doctype (null for XML)
+      );
+  var newNode = new_mei.importNode(
+          mei.documentElement, //node to import
+	  true                         //clone its descendants
+      );
+  new_mei.appendChild(newNode);
+  return new_mei;
+}
+
+// Recursively compute a mapping between element IDs and their
+// corresponding get_id strings, i.e. what the element represents
+function get_id_pairs(elem) {
+  var item;
+  if(elem.id)
+    item = [elem.id , get_id(elem)]
+  else if(elem.hasAttribute("xml:id"))
+    item = [elem.getAttribute("xml:id") , get_id(elem)]
+  return [item].concat(Array.from(elem.children).flatMap(get_id_pairs))
+}
+
+
+
+
+
+
+
+