var treeSnippet =
  "<span class=\"context-left\"></span>" +
  "<span class=\"match\">" +
  "  <span title=\"xip/c:MC\">" +
  "    <span title=\"xip/c:TOP\">" +
  "      <span title=\"xip/c:PP\">" +
  "        <span title=\"xip/c:PREP\">Mit</span>" +
  "        <span title=\"xip/c:NP\">" +
  "          <span title=\"xip/c:DET\">dieser</span>" +
  "          <span title=\"xip/c:NPA\">" +
  "            <span title=\"xip/c:NOUN\">Methode</span>" +
  "          </span>" +
  "        </span>" +
  "      </span>" +
  "      <span title=\"xip/c:VERB\">ist</span>" +
  "      <span title=\"xip/c:NP\">" +
  "        <span title=\"xip/c:PRON\">es</span>" +
  "      </span>" +
  "      <span title=\"xip/c:AP\">" +
  "        <span title=\"xip/c:ADV\">nun</span>" +
  "        <span title=\"xip/c:ADJ\">möglich</span>" +
  "      </span>" +
  "      <span title=\"xip/c:ADV\">z. B.</span>" +
  "      <span title=\"xip/c:NPA\">" +
  "        <span title=\"xip/c:NP\">" +
  "          <span title=\"xip/c:NOUN\">Voice</span>" +
  "        </span>" +
  "      </span>" + "(" +
  "      <span title=\"xip/c:INS\">" +
  "        <span title=\"xip/c:NPA\">" +
  "          <span title=\"xip/c:NP\">" +
  "            <span title=\"xip/c:NOUN\">Sprache</span>" +
  "          </span>" +
  "        </span>" +
  "      </span>" + ")" +
  "      <span title=\"xip/c:VERB\">bevorzugt</span>" +
  "      <span title=\"xip/c:PP\">" +
  "        <span title=\"xip/c:PREP\">in</span>" +
  "        <span title=\"xip/c:NP\">" +
  "          <span title=\"xip/c:PRON\">der</span>" +
  "        </span>" +
  "        <span title=\"xip/c:NPA\">" +
  "          <span title=\"xip/c:NP\">" +
  "            <span title=\"xip/c:NOUN\">Bridge</span>" +
  "          </span>" +
  "        </span>" +
  "      </span>" +
  "      <span title=\"xip/c:INFC\">" +
  "        <span title=\"xip/c:INS\">" +
  "          <span title=\"xip/c:VERB\">weiterzugeben</span>" +
  "        </span>" +
  "      </span>" +
  "    </span>" +
  "  </span>" +
  "</span>" +
  "<span class=\"context-right\"></span>";

var relSnippet =
    "<span class=\"context-left\"></span>" +
    "<span class=\"match\">" +
    "  <span xml:id=\"token-GOE/AGA/01784-p199\">" +
    "    <span xlink:title=\"malt/d:ADV\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p199\">dann</span>" +
    "  </span>" +
    " zog " +
    "  <span xlink:title=\"malt/d:SUBJ\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p199\">ich</span>" +
    "  <span xml:id=\"token-GOE/AGA/01784-p202\">" +
    "    <span xlink:title=\"malt/d:OBJA\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p199\">mich</span>" +
    "  </span>" +
    "  <span xlink:title=\"malt/d:PP\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p199\">gegen</span>" +
    "  <span xml:id=\"token-GOE/AGA/01784-p204\">" +
    "    <span xlink:title=\"malt/d:DET\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p204\">das</span>" +
    "  </span>" +
    "  <span xlink:title=\"malt/d:PN\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p202\">Regiment</span>" +
    "  <span xml:id=\"token-GOE/AGA/01784-p206\">" +
    "    <span xlink:title=\"malt/d:AVZ\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p199\">zurück</span>" +
    "  </span>" +
    "  <span xml:id=\"token-GOE/AGA/01784-p207\">" +
    "    <span xlink:title=\"malt/d:KON\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p199\">und</span>" +
    "  </span>" +
    "  <span xml:id=\"token-GOE/AGA/01784-p208\">" +
    "    <span xlink:title=\"malt/d:CJ\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p206\">war</span>" +
    "  </span>" +
    "  <span xlink:title=\"malt/d:AUX\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p207\">bemüht</span>" +
    "," +
    "  <span xlink:title=\"malt/d:DET\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p211\">einige</span>" +
    "  <span xml:id=\"token-GOE/AGA/01784-p211\">" +
    "    <span xlink:title=\"malt/d:ATTR\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p211\">genaue</span>" +
    "  </span>" +
    "  <span xml:id=\"token-GOE/AGA/01784-p212\">" +
    "    <span xlink:title=\"malt/d:OBJA\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p215\">Umrisse</span>" +
    "  </span>" +
    "  <span xlink:title=\"malt/d:OBJP\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p215\">aufs</span>" +
    "  <span xlink:title=\"malt/d:PN\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p212\">Papier</span>" +
    "  <span xml:id=\"token-GOE/AGA/01784-p215\">" +
    "    <span xlink:title=\"malt/d:PART\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p215\">zu</span>" +
    "  </span>" +
    "  <span xlink:title=\"malt/d:OBJI\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p208\">bringen</span>" +
    ", um mir " +
    "  <span xml:id=\"token-GOE/AGA/01784-p219\">" +
    "    <span xlink:title=\"malt/d:DET\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p219\">die</span>" +
    "  </span>" +
    "  <span xml:id=\"token-GOE/AGA/01784-p220\">Bezüge</span>" +
    "  <span xlink:title=\"malt/d:KON\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p219\">und</span>" +
    "  <span xml:id=\"token-GOE/AGA/01784-p222\">" +
    "    <span xlink:title=\"malt/d:DET\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p222\">die</span>" +
    "  </span>" +
    "  <span xlink:title=\"malt/d:CJ\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p220\">Distanzen</span>" +
    "  <mark>" +
    "    <span xlink:title=\"malt/d:DET\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p225\">der</span>" +
    "  </mark>" +
    "  <span xml:id=\"token-GOE/AGA/01784-p225\">" +
    "    <span xlink:title=\"malt/d:ATTR\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p225\">landschaftlichen</span>" +
    "  </span>" +
    "  <span xml:id=\"token-GOE/AGA/01784-p226\">" +
    "    <span xlink:title=\"malt/d:GMOD\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p222\">Gegenstände</span>" +
    "  </span>" +
    "  <span xlink:title=\"malt/d:KON\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p219\">desto</span>" +
    "  <span xlink:title=\"malt/d:ADV\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p229\">besser</span>" +
    "  <span xml:id=\"token-GOE/AGA/01784-p229\">" +
    "    <span xlink:title=\"malt/d:PART\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p229\">zu</span>" +
    "  </span>" +
    "  <span xlink:title=\"malt/d:CJ\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p226\">imprimieren</span>" +
    "</span>" +
    "<span class=\"context-right\"></span>";

/*
 *     ___OBJA____
 *     |_________|____DET________
 *     |_________|____          |
 *     |_SUBJ_   |   |          |
 *  ___|_____|__ADV_ | ___PP____|
 *  |  Y     |   | Y Y |       Y|
 * -|------  |  -|-----|-- ----------
 * dann zog ich mich gegen das Altern
 *   1   2   3   4     5    6    7
 */

relSnippet =
// var relSnippetSimple =
  "<span class=\"context-left\"></span>" +
  "<span class=\"match\">" +
  "  <span xml:id=\"token-1\">" +
  "    <span xlink:title=\"malt/d:ADV\" xlink:type=\"simple\" xlink:href=\"#token-4\">dann</span>" +
  "    zog " +
  "  </span>" +
  "  <span xlink:title=\"malt/d:SUBJ\" xlink:type=\"simple\" xlink:href=\"#token-1\">ich</span>" +
  "  <span xml:id=\"token-4\">" +
  "    <span xlink:title=\"malt/d:OBJA\" xlink:type=\"simple\" xlink:href=\"#token-1\">mich</span>" +
  "    <span xlink:title=\"malt/d:PP\" xlink:type=\"simple\" xlink:href=\"#token-3\">gegen</span>" +
  "  </span>" +
  "  <span xml:id=\"token-3\">" +
  "    <span xlink:title=\"malt/d:DET\" xlink:type=\"simple\" xlink:href=\"#token-1\">" +
  "      das" +
  "      <span xml:id=\"token-2\">Altern</span>" +
  "    </span>" +
  "  </span>" +
  "</span>" +
  "<span class=\"context-right\"></span>";


// This is just a temprary example
var relSnippet3 =
  "<span class=\"context-left\"></span>"+
	"<span class=\"match\">"+
	"<span xml:id=\"token-WDD17/982/72848-p15836-15839\">"+
	"<span xlink:title=\"lwc/d:NK\" xlink:type=\"simple\" xlink:href=\"#token-WDD17/982/72848-p15838\">Ein</span>"+
	" "+
	"<span xlink:title=\"lwc/d:NK\" xlink:type=\"simple\" xlink:href=\"#token-WDD17/982/72848-p15838\">letztes</span>"+
	" "+
	"<span xml:id=\"token-WDD17/982/72848-p15838\">"+
    
	"<span xlink:title=\"lwc/d:--\" xlink:type=\"simple\" xlink:href=\"#token-WDD17/982/72848-p15836-15839\">mal</span>"+
	"</span>"+
	": "+
	"<span xml:id=\"token-WDD17/982/72848-p15839-15840\">"+
	"<span xlink:title=\"lwc/d:--\" xlink:type=\"simple\" xlink:href=\"#token-WDD17/982/72848-p15839-15840\">AL</span>"+
	"</span>"+
	  "</span>"+

  // Here is a double given id, that should use a join instead!
	"<span xml:id=\"token-WDD17/982/72848-p15839-15840\">"+
	":"+
	"<span xml:id=\"token-WDD17/982/72848-p15840-15846\">"+
	"<span xml:id=\"token-WDD17/982/72848-p15840\">"+
	"<span xlink:title=\"lwc/d:--\" xlink:type=\"simple\" xlink:href=\"#token-WDD17/982/72848-p15840-15846\">halt</span>"+
	"</span>"+
	"</span>"+
	"</span>"+
	"<span xml:id=\"token-WDD17/982/72848-p15840-15846\">"+
	" "+
	"<span xlink:title=\"lwc/d:NK\" xlink:type=\"simple\" xlink:href=\"#token-WDD17/982/72848-p15842\">den</span>"+
	" "+
	"<span xml:id=\"token-WDD17/982/72848-p15842\">"+
	"<span xlink:title=\"lwc/d:OA\" xlink:type=\"simple\" xlink:href=\"#token-WDD17/982/72848-p15843\">Ball</span>"+
	"</span>"+
	" "+
	"<span xml:id=\"token-WDD17/982/72848-p15843\">"+
	"<span xlink:title=\"lwc/d:PD\" xlink:type=\"simple\" xlink:href=\"#token-WDD17/982/72848-p15840\">flach</span>"+
	"</span>"+
	", "+
	"<mark>"+
	"<span xlink:title=\"lwc/d:MO\" xlink:type=\"simple\" xlink:href=\"#token-WDD17/982/72848-p15845\">ganz</span>"+
	" "+
	"<span xml:id=\"token-WDD17/982/72848-p15845\">"+
	"<span xlink:title=\"lwc/d:CJ\" xlink:type=\"simple\" xlink:href=\"#token-WDD17/982/72848-p15843\">flach</span>"+
	"</span>"+
	"</mark>"+
	"</span>"+
	"</span>"+
	"<span class=\"context-right\"></span>";

relSnippet3 =
  "<span class=\"context-left\"></span>"+
	"<span class=\"match\">"+
	"<span xml:id=\"token-WDD17/982/72848-p15836-15839\">"+
	"<span xlink:title=\"lwc/d:NK\" xlink:type=\"simple\" xlink:href=\"#token-WDD17/982/72848-p15838\">Ein</span>"+
	" "+
	"<span xlink:title=\"lwc/d:NK\" xlink:type=\"simple\" xlink:href=\"#token-WDD17/982/72848-p15838\">letztes</span>"+
	" "+
	"<span xml:id=\"token-WDD17/982/72848-p15838\">"+
	"<span xlink:title=\"lwc/d:--\" xlink:type=\"simple\" xlink:href=\"#token-WDD17/982/72848-p15836-15839\">mal</span>"+
	"</span>"+
	": "+
	"<span xml:id=\"token-WDD17/982/72848-p15839-15840\">"+
	"<span xlink:title=\"lwc/d:--\" xlink:type=\"simple\" xlink:href=\"#token-WDD17/982/72848-p15839-15840\">AL</span>"+
	"</span>"+
	"</span>"+
	"<span xlink:type=\"join\" xlink:href=\"#token-WDD17/982/72848-p15839-15840\">"+
	":"+
	"<span xml:id=\"token-WDD17/982/72848-p15840-15846\">"+
	"<span xml:id=\"token-WDD17/982/72848-p15840\">"+
	"<span xlink:title=\"lwc/d:--\" xlink:type=\"simple\" xlink:href=\"#token-WDD17/982/72848-p15840-15846\">halt</span>"+
	"</span>"+
	"</span>"+
	"</span>"+
	// "<span xml:id=\"token-WDD17/982/72848-p15840-15846\">"+
	"<span xlink:type=\"join\" xlink:href=\"#token-WDD17/982/72848-p15840-15846\">"+
	" "+
	"<span xlink:title=\"lwc/d:NK\" xlink:type=\"simple\" xlink:href=\"#token-WDD17/982/72848-p15842\">den</span>"+
	" "+
	"<span xml:id=\"token-WDD17/982/72848-p15842\">"+
	"<span xlink:title=\"lwc/d:OA\" xlink:type=\"simple\" xlink:href=\"#token-WDD17/982/72848-p15843\">Ball</span>"+
	"</span>"+
	" "+
	"<span xml:id=\"token-WDD17/982/72848-p15843\">"+
	"<span xlink:title=\"lwc/d:PD\" xlink:type=\"simple\" xlink:href=\"#token-WDD17/982/72848-p15840\">flach</span>"+
	"</span>"+
	", "+
	"<mark>"+
	"<span xlink:title=\"lwc/d:MO\" xlink:type=\"simple\" xlink:href=\"#token-WDD17/982/72848-p15845\">ganz</span>"+
	" "+
	"<span xml:id=\"token-WDD17/982/72848-p15845\">"+
	"<span xlink:title=\"lwc/d:CJ\" xlink:type=\"simple\" xlink:href=\"#token-WDD17/982/72848-p15843\">flach</span>"+
	"</span>"+
	"</mark>"+
	"</span>"+
	"</span>"+
	"<span class=\"context-right\"></span>";


// xlink conformant
relSnippet3 =
 	"<span class=\"context-left\"></span>"+
	"<span class=\"match\">"+
	"  <span xml:id=\"token-WDD17/982/72848-p15836-15839\">"+
	"    <span xlink:title=\"lwc/d:NK\" xlink:show=\"none\" xlink:href=\"#token-WDD17/982/72848-p15838\">Ein</span>"+
	" "+
	"    <span xlink:title=\"lwc/d:NK\" xlink:show=\"none\" xlink:href=\"#token-WDD17/982/72848-p15838\">letztes</span>"+
	" "+
	"    <span xml:id=\"token-WDD17/982/72848-p15838\">"+
  //     s1464_n2 "ein" -> ":"
	"      <span xlink:title=\"lwc/d:--\" xlink:show=\"none\" xlink:href=\"#token-WDD17/982/72848-p15836-15839\">mal</span>"+
	"    </span>"+
	": "+
	"    <span xml:id=\"token-WDD17/982/72848-p15839-15840\">"+
	"      <span xlink:title=\"lwc/d:--\" xlink:show=\"none\" xlink:href=\"#token-WDD17/982/72848-p15839-15840\">AL</span>"+
	"    </span>"+
	"  </span>"+
	"  <span xlink:show=\"other\" data-action=\"join\" xlink:href=\"#token-WDD17/982/72848-p15839-15840\">"+
	":"+
	"    <span xml:id=\"token-WDD17/982/72848-p15840-15846\">"+
	"      <span xml:id=\"token-WDD17/982/72848-p15840\">"+
	"        <span xlink:title=\"lwc/d:--\" xlink:show=\"none\" xlink:href=\"#token-WDD17/982/72848-p15840-15846\">halt</span>"+
	"      </span>"+
	"    </span>"+
	"  </span>"+
	"  <span xlink:show=\"other\" data-action=\"join\" xlink:href=\"#token-WDD17/982/72848-p15840-15846\">"+
	" "+
	"    <span xlink:title=\"lwc/d:NK\" xlink:show=\"none\" xlink:href=\"#token-WDD17/982/72848-p15842\">den</span>"+
	" "+
	"    <span xml:id=\"token-WDD17/982/72848-p15842\">"+
	"      <span xlink:title=\"lwc/d:OA\" xlink:show=\"none\" xlink:href=\"#token-WDD17/982/72848-p15843\">Ball</span>"+
	"    </span>"+
	" "+
	"    <span xml:id=\"token-WDD17/982/72848-p15843\">"+
	"      <span xlink:title=\"lwc/d:PD\" xlink:show=\"none\" xlink:href=\"#token-WDD17/982/72848-p15840\">flach</span>"+
	"    </span>"+
	", "+
	"    <mark>"+
	"      <span xlink:title=\"lwc/d:MO\" xlink:show=\"none\" xlink:href=\"#token-WDD17/982/72848-p15845\">ganz</span>"+
	" "+
	"      <span xml:id=\"token-WDD17/982/72848-p15845\">"+
	"        <span xlink:title=\"lwc/d:CJ\" xlink:show=\"none\" xlink:href=\"#token-WDD17/982/72848-p15843\">flach</span>"+
	"      </span>"+
	"    </mark>"+
	"  </span>"+
	"</span>"+
	"<span class=\"context-right\"></span>";

requirejs.config({
  baseUrl: '../js/src',
  paths : {
    'lib': '../lib'
  }
});

require(['match/treearc', 'match/treehierarchy'], function (relClass, treeClass) {
  var rel = relClass.create();

  /*
   * Start and end may be spans, i.e. arrays
   */

  rel
    .addToken("Der")
    .addToken("alte")
    .addToken("Mann")
    .addToken("ging")
    .addToken("über")
    .addToken("die")
    .addToken("breite")
    .addToken("nasse")
    .addToken("Straße")
  ;

  rel
    .addRel({ start: 0, end: 1, label: "a", direction: "uni"})
    .addRel({ start: 0, end: 1, label: "b", direction: "uni" })
    .addRel({ start: 1, end: 2, label: "c", direction: "bi"   })
    .addRel({ start: 0, end: 2, label: "dreizehn", direction: "uni" })
    .addRel({ start: [2,4], end: 5, label: "e", direction: "uni" })
    .addRel({ start: [5,6], end: 7, direction: "uni" })
    .addRel({ start: 4, end: [6,8], label: "f", direction: "bi" })
    .addRel({ start: 8, end: 8, label: "self", direction: "uni"})
  ;

  document.getElementById("treeRel").appendChild(rel.element());

  // Todo: Probably rename to rel.draw()
  rel.show();

  var rel2 = relClass.create(relSnippet);
  document.getElementById("treeRel2").appendChild(rel2.element());
  rel2.show();

  var rel3 = relClass.create(relSnippet3);
  document.getElementById("treeRel3").appendChild(rel3.element());
  rel3.show();

  var tree = treeClass.create(treeSnippet);
  document.getElementById("treeHier").appendChild(tree.element());
});