diff --git a/public/favicon.ico b/public/favicon.ico
index 6a2a60a..b84dd71 100644
--- a/public/favicon.ico
+++ b/public/favicon.ico
Binary files differ
diff --git a/public/img/crab.svg b/public/img/crab.svg
new file mode 100644
index 0000000..5a458b6
--- /dev/null
+++ b/public/img/crab.svg
@@ -0,0 +1,92 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   version="1.1"
+   width="225.32735"
+   height="123.96949"
+   id="svg2">
+<style type="text/css">
+<![CDATA[
+#crab {
+  -webkit-animation: crab-loading 1s linear infinite alternate;
+  -moz-animation: crab-loading 1s linear infinite alternate;
+  -ms-animation: crab-loading 1s linear infinite alternate;
+  animation: crab-loading 1s linear infinite alternate;
+}
+
+@keyframes "crab-loading" {
+ 0% { opacity: 1 }
+ 100% { opacity: .3 }
+}
+
+@-moz-keyframes crab-loading {
+ 0% { opacity: 1 }
+ 100% { opacity: .3 }
+}
+
+@-webkit-keyframes "crab-loading" {
+ 0% { opacity: 1 }
+ 100% { opacity: .3 }
+}
+
+@-ms-keyframes "crab-loading" {
+ 0% { opacity: 1 }
+ 100% { opacity: .3 }
+}
+]]>
+</style>
+  <g transform="translate(244.69549,-1534.2222)" id="crab">
+    <path
+       d="m -190.41372,1534.2297 c -1.87598,0.078 -3.90347,0.9104 -4.93415,2.805 -1.03069,1.8946 -0.85775,4.4023 0.50693,7.4013 2.59395,5.7003 9.37369,10.2244 15.44459,13.6534 6.0709,3.4287 11.5581,5.6102 11.5581,5.6101 l 0.7435,0.3041 0.70971,-0.3717 c 3.97779,-2.1137 6.35183,-3.9594 10.44283,-5.3736 l 4.90037,-1.6897 -4.96795,-1.5547 c -1.84992,-0.5915 -9.38784,-3.1478 -16.1205,-6.2183 -3.36634,-1.5353 -6.53012,-3.2136 -8.61788,-4.7652 -1.04388,-0.7758 -1.82396,-1.5437 -2.19672,-2.0954 -0.37276,-0.5515 -0.3443,-0.7187 -0.30415,-0.8448 0.67234,-2.1144 -0.39734,-4.2009 -1.89257,-5.306 -1.49521,-1.1051 -3.39869,-1.6321 -5.27211,-1.5545 z"
+       id="path4758"
+       style="fill:#7ba400;fill-opacity:1;stroke:none" />
+    <path
+       d="m -74.461002,1534.2297 c -1.635708,0.062 -3.233282,0.5818 -4.528611,1.5545 -1.480378,1.1117 -2.527165,3.2041 -1.858758,5.306 0.04013,0.1261 0.06859,0.2933 -0.304161,0.8448 -0.372757,0.5517 -1.119029,1.3196 -2.162918,2.0954 -2.087768,1.5516 -5.251545,3.2299 -8.617879,4.7652 -6.732668,3.0705 -14.304371,5.6268 -16.154301,6.2183 l -4.93416,1.5547 4.90037,1.6897 c 4.08557,1.4124 6.38985,3.256 10.375247,5.3736 l 0.709708,0.3717 0.743503,-0.3041 c 0,0 5.503503,-2.1816 11.591892,-5.6101 6.088389,-3.4287 12.883035,-7.9501 15.478386,-13.6534 1.367214,-3.0046 1.493463,-5.5464 0.439343,-7.4351 -1.05412,-1.8889 -3.092616,-2.6935 -4.967954,-2.7712 -0.234103,-0.01 -0.476037,-0.01 -0.709707,0 z"
+       id="path4756"
+       style="fill:#7ba400;fill-opacity:1;stroke:none" />
+    <path
+       d="m -212.85399,1549.6067 -1.68978,0.033 0,0.1009 c -0.5335,0.033 -1.04889,0.01 -1.5884,0.1019 -3.5738,0.6287 -6.1181,1.7403 -7.80678,3.2106 -1.68869,1.4703 -2.51345,3.4985 -2.02774,5.3397 0.48571,1.8411 2.14291,3.1403 4.15686,3.6161 2.01395,0.4758 4.46105,0.2172 7.19846,-0.9124 0.9298,-0.3837 3.67059,-0.3533 6.9619,0.4055 3.2913,0.7587 7.19636,2.0899 11.01736,3.5824 3.821,1.4924 7.54967,3.147 10.54423,4.5961 2.99456,1.4492 5.33458,2.7781 5.98183,3.2444 l 1.11524,0.8111 1.04767,-0.9125 c 1.66667,-1.4688 3.47037,-2.9573 5.4073,-4.2582 l 2.12912,-1.4532 -2.12912,-1.4194 c 0,0 -6.08149,-4.0565 -14.09276,-8.0772 -8.01129,-4.0206 -17.9242,-8.1056 -26.22539,-8.0095 z"
+       id="path4754"
+       style="fill:#7ba400;fill-opacity:1;stroke:none" />
+    <path
+       d="m -51.243422,1549.6067 c -8.301218,-0.097 -18.214122,3.989 -26.225389,8.0095 -8.011267,4.0207 -14.058971,8.0772 -14.058971,8.0772 l -2.162919,1.4194 2.162919,1.4532 c 1.936819,1.3008 3.740465,2.7895 5.407296,4.2582 l 1.013868,0.9125 1.115256,-0.8111 c 0.64722,-0.4663 3.021056,-1.7952 6.015617,-3.2444 2.994561,-1.4491 6.723217,-3.1037 10.544228,-4.5961 3.821012,-1.4925 7.726064,-2.8236 11.017367,-3.5824 3.291302,-0.7587 6.032109,-0.7892 6.961894,-0.4055 2.736752,1.1294 5.188766,1.3892 7.198464,0.9124 2.009698,-0.4767 3.651222,-1.8059 4.123064,-3.6499 0.47184,-1.844 -0.367913,-3.8384 -2.061533,-5.3059 -1.693619,-1.4675 -4.233231,-2.5821 -7.806784,-3.2106 -0.516105,-0.091 -1.019275,-0.068 -1.520802,-0.1019 l 0,-0.1009 -1.723575,-0.033 z"
+       id="path4752"
+       style="fill:#7ba400;fill-opacity:1;stroke:none" />
+    <path
+       d="m 96.71875,25.875 c -15.41633,0 -55.97447,25.9618 -50.53125,48.25 4.19178,17.1639 24.73337,11.28575 32.34375,13.21875 11.00726,2.7968 10.21875,6.375 10.21875,6.375 l 10.875,0 8.5625,0 10.9375,0 c 0,0 -0.85101,-3.5784 10.15625,-6.375 7.61039,-1.9332 28.21448,3.94515 32.40625,-13.21875 5.44321,-22.2882 -35.11496,-48.25 -50.53125,-48.25 l -2.90625,0 -8.6875,0 -2.84375,0 z M 99.5,39.0625 l 1.75,0 5.3125,0 1.8125,0 c 9.42579,0 34.20306,15.8725 30.875,29.5 -2.56292,10.4943 -15.1906,6.8804 -19.84375,8.0625 -6.73003,1.7098 -6.21875,3.875 -6.21875,3.875 l -6.625,0 -5.25,0 -6.625,0 c 0,0 0.44879,-2.1652 -6.28125,-3.875 -4.65313,-1.1821 -17.18707,2.4318 -19.75,-8.0625 -3.32807,-13.6275 21.41794,-29.5 30.84375,-29.5 z"
+       transform="translate(-235.97433,1533.0242)"
+       id="path4750"
+       style="fill:#496000;fill-opacity:1;stroke:none" />
+    <path
+       d="m -47.728681,1565.254 0,0.1019 c -0.624856,0.015 -1.278122,4e-4 -1.892553,0.034 -7.293762,0.4502 -14.340139,2.8052 -19.905611,5.1369 -2.782735,1.1658 -5.193913,2.3345 -7.06328,3.2782 -1.869367,0.9437 -3.289432,1.6746 -3.717517,1.8588 l -2.433283,1.0476 1.960145,1.825 c 0.533797,0.4851 1.646089,1.486 2.703648,2.5684 1.057559,1.0825 2.100421,2.3037 2.433284,2.8726 l 0.777299,1.3518 1.419415,-0.642 c 5.132411,-2.2688 12.432326,-4.9748 18.925538,-6.5226 3.246605,-0.7738 6.29645,-1.2434 8.68547,-1.2505 2.389019,-0.01 3.977986,0.4902 4.596202,1.1153 2.153023,2.1773 4.795537,3.2808 7.232259,3.5147 2.436722,0.2342 4.718591,-0.3137 6.319778,-1.7236 0.800593,-0.7048 1.412797,-1.6792 1.588393,-2.8049 0.175597,-1.126 -0.102589,-2.3251 -0.743503,-3.4134 -1.281833,-2.1768 -3.859663,-4.1179 -8.212332,-5.9819 -3.487123,-1.4931 -7.195046,-2.179 -10.882184,-2.298 l -1.791168,-0.068 z"
+       id="path4748"
+       style="fill:#7ba400;fill-opacity:1;stroke:none" />
+    <path
+       d="m -218.1937,1565.3892 c -3.65017,0.117 -7.31495,0.7319 -10.8146,2.2305 -4.35268,1.864 -6.93048,3.8051 -8.21233,5.9819 -0.64092,1.0883 -0.95289,2.2874 -0.7773,3.4133 0.1756,1.1258 0.8216,2.1001 1.62219,2.805 1.60119,1.4099 3.88306,1.9577 6.31978,1.7236 2.43672,-0.234 5.04543,-1.3375 7.19847,-3.5148 0.61821,-0.6251 2.24098,-1.1222 4.62999,-1.1152 2.38902,0.01 5.43887,0.4766 8.68547,1.2505 6.49322,1.5477 13.79314,4.2538 18.92554,6.5225 l 1.41942,0.6421 0.77729,-1.3518 c 0.33287,-0.5689 1.37573,-1.7901 2.43328,-2.8726 1.05757,-1.0825 2.13606,-2.0833 2.66986,-2.5685 l 1.99394,-1.825 -2.46708,-1.0476 c -0.47156,-0.2028 -2.06166,-1.0395 -4.19065,-2.0953 -2.129,-1.0558 -4.89069,-2.3692 -8.04336,-3.6162 -6.30532,-2.4941 -14.22526,-4.8173 -22.16991,-4.5624 z"
+       id="path4746"
+       style="fill:#7ba400;fill-opacity:1;stroke:none" />
+    <path
+       d="m -216.6729,1581.4083 c -11.27963,0.087 -22.49602,4.1353 -26.42816,13.1127 -1.54561,3.5289 -2.0486,6.0234 -1.14905,8.0772 0.44977,1.0268 1.35341,1.8052 2.33189,2.1291 0.97849,0.3237 2.00505,0.3087 2.97402,0.1009 1.93793,-0.4152 3.85976,-1.5367 5.54248,-3.0415 1.68272,-1.5049 3.12807,-3.4195 3.68371,-5.6777 0.18992,-0.7718 0.52755,-1.2506 1.18286,-1.6898 0.65529,-0.4392 1.66661,-0.7958 2.94021,-0.98 2.54721,-0.3685 6.10322,-0.063 9.76693,0.6082 7.3274,1.3445 15.07535,4.0766 17.50612,4.9343 l 1.72358,0.6082 0.50693,-1.7236 c 0.75761,-2.4785 1.92603,-4.9519 3.41336,-7.4349 l 0.77729,-1.3519 -1.25043,-0.9124 c -6.24257,-4.6019 -14.98036,-6.825 -23.52174,-6.7592 z"
+       id="path4742"
+       style="fill:#7ba400;fill-opacity:1;stroke:none" />
+    <path
+       d="m -47.390725,1581.4083 c -8.54117,-0.064 -17.279102,2.1572 -23.521739,6.7592 l -1.284233,0.9124 0.811094,1.3519 c 1.479902,2.4741 2.659007,4.9678 3.413357,7.435 l 0.506934,1.7235 1.68978,-0.6082 c 2.430299,-0.8579 10.212522,-3.5899 17.539917,-4.9343 3.663693,-0.6722 7.219726,-0.9768 9.76693,-0.6082 1.273602,0.1843 2.284919,0.5408 2.940217,0.98 0.6553,0.4392 0.992931,0.918 1.182846,1.6898 0.555655,2.2582 2.001003,4.1728 3.683721,5.6777 1.682719,1.5048 3.604548,2.6263 5.542479,3.0415 0.968967,0.2078 1.961736,0.2229 2.940218,-0.1009 0.978482,-0.3239 1.915914,-1.1023 2.365692,-2.1291 0.899547,-2.0538 0.396549,-4.5482 -1.14905,-8.0771 -3.932132,-8.9773 -15.14839,-13.0257 -26.428163,-13.1127 z"
+       id="path4740"
+       style="fill:#7ba400;fill-opacity:1;stroke:none" />
+    <path
+       d="m -199.80889,1608.1068 c -5.72647,8.8089 -6.84451,19.7536 -2.90642,28.2532 3.84029,8.2883 12.76155,13.9293 25.88742,12.4705 1.63498,2.1724 8.70891,10.5117 22.20372,9.2263 3.73241,-0.3554 6.80281,-2.761 9.02342,-4.9342 2.22062,-2.1733 3.64993,-4.2921 3.64993,-4.2921 l 2.02774,-3.0077 -3.61613,0.3379 c 0,0 -4.06082,0.3811 -8.07715,0.169 -2.00817,-0.106 -3.99749,-0.3908 -5.33971,-0.8449 -0.6711,-0.227 -1.17123,-0.4952 -1.41941,-0.7098 -0.24819,-0.2144 -0.25703,-0.2665 -0.27037,-0.4054 -0.0884,-0.9212 0.20185,-1.3776 1.11526,-2.0278 0.91341,-0.6502 2.43168,-1.2288 4.02167,-1.5884 3.17999,-0.7189 6.55635,-0.7097 6.55635,-0.7097 l 3.37956,0 -1.99394,-2.7374 c 0,0 -2.32914,-3.2443 -6.65773,-5.4073 -4.3286,-2.1632 -10.82852,-3.23 -18.68898,0.6758 -2.73757,1.3605 -6.01045,1.1786 -8.3813,-0.2365 -2.37086,-1.4151 -3.92328,-3.884 -3.37956,-7.773 l 0.20277,-1.3857 -1.35183,-0.4731 c -1.60303,-0.552 -3.28423,-1.7388 -4.83277,-3.2443 l -0.16897,-0.169 -0.20278,-0.1019 c -3.528,-1.9119 -6.27035,-4.8804 -7.60401,-10.3414 l 0,-0.034 c -0.0874,-0.3495 -0.084,-0.3899 -0.0338,-0.169 l -2.16292,0.068 -0.98007,-0.6083 z"
+       id="path4738"
+       style="fill:#496000;fill-opacity:1;stroke:none" />
+    <path
+       d="m -64.25473,1608.1068 -0.946277,0.6084 -2.196714,-0.1009 c 0.04812,-0.1921 0.01409,-0.1048 -0.06759,0.2366 -1.333667,5.461 -4.07601,8.4296 -7.604011,10.3414 l -0.202774,0.102 -0.168978,0.1689 c -1.548541,1.5055 -3.19595,2.6923 -4.798976,3.2444 l -1.351824,0.4731 0.202775,1.3857 c 0.543713,3.8889 -1.0087,6.3578 -3.379562,7.7729 -2.370861,1.4152 -5.643746,1.597 -8.381309,0.2366 -7.86047,-3.906 -14.39417,-2.839 -18.72277,-0.6759 -4.3286,2.163 -6.65774,5.4073 -6.65774,5.4073 l -1.96013,2.7375 3.37956,0 c 0,0 3.34282,-0.01 6.52255,0.7096 1.58986,0.3592 3.10844,0.9044 4.02167,1.5547 0.91323,0.6501 1.23762,1.1383 1.14905,2.0615 -0.0133,0.1391 -0.0222,0.191 -0.27036,0.4055 -0.24819,0.2146 -0.74831,0.4828 -1.41942,0.7097 -1.34219,0.4541 -3.36534,0.7388 -5.3735,0.8449 -4.01633,0.2121 -8.04335,-0.1688 -8.04335,-0.1689 l -3.61613,-0.338 2.02773,3.0078 c 0,0 1.39551,2.1187 3.61613,4.2921 2.22062,2.1731 5.29098,4.5789 9.02343,4.9341 13.494356,1.2853 20.547287,-7.0525 22.169919,-9.2262 13.122925,1.4561 22.030624,-4.1845 25.887433,-12.4706 3.955697,-8.4985 2.885484,-19.4428 -2.838831,-28.2531 z"
+       id="path4581"
+       style="fill:#496000;fill-opacity:1;stroke:none" />
+  </g>
+</svg>
diff --git a/public/img/korap-logo-solo.svg b/public/img/korap-logo-solo.svg
index e74b29a..0478e5a 100644
--- a/public/img/korap-logo-solo.svg
+++ b/public/img/korap-logo-solo.svg
@@ -10,7 +10,6 @@
    version="1.1"
    width="292.90839"
    height="104.8784"
-   transform="scale(.6)"
    id="svg2">
   <defs
      id="defs4" />
diff --git a/public/img/loading.gif b/public/img/loading.gif
deleted file mode 100644
index c9aaeda..0000000
--- a/public/img/loading.gif
+++ /dev/null
Binary files differ
diff --git a/public/kwic-4.0.css b/public/kwic-4.0.css
new file mode 100644
index 0000000..64f1232
--- /dev/null
+++ b/public/kwic-4.0.css
@@ -0,0 +1,220 @@
+@charset "utf-8";
+
+/*
+  light orange: #f4eebb;
+  dark orange: #ffa500;
+  dark green: #496000;
+  light green: #7ba400;
+
+  Search for: [orth=erstens]
+*/
+
+ol {
+  width: auto;
+  overflow: hidden;
+  list-style-type: none;
+  font-size: 10pt;
+  margin: 0;
+  padding: 0;
+  text-indent: 0;
+  border: 1px solid #ccc;
+  font-family: verdana, tahoma, arial;
+  text-shadow: 1px 1px rgba(255, 255, 255, 0.4);
+}
+
+ol > li {
+  border-style: solid;
+  border-color: #ffa500;
+  border-width: 0;
+}
+
+ol > li:not(.active) {
+  width: 99999%;
+  margin-left: -49999.5%;
+  background-color: #f5f5f5;
+  overflow: hidden;
+  white-space: no-wrap;
+  cursor: pointer;
+  padding: 10px 0;
+  text-indent: 0;
+}
+
+ol > li:nth-of-type(even) {
+  background-color: #ddd;
+}
+
+ol > li > div.snippet > span,
+ol > li > div.snippet > span > span {
+  white-space: no-wrap !important;
+}
+
+ol.free-aligned > li:not(.active) > div.snippet > span.left {
+  display: inline-block;
+  text-align: right;
+  width: 50.046%;
+}
+
+ol.free-aligned > li:not(.active) > div.snippet > span.separator {
+  width: 0px;
+  height: 1em;
+  margin-bottom: -2px;
+  display: inline-block;
+  line-height: 100%;
+  border: 1px solid #009EE0;
+  margin-left: 2px;
+  margin-right: 2px;
+}
+
+ol.free-aligned > li > div.snippet > span.right {
+  text-align: left;
+}
+
+ol.left-aligned > li > div.snippet > span.context-left {
+  display: inline-block;
+  text-align: right;
+  width: 50.01%;
+}
+
+ol.right-aligned {
+  text-align: right;
+}
+
+ol.right-aligned > li:not(.active) > div.snippet > span.context-right {
+  display: inline-block;
+  text-align: left;
+  width: 49.915%;
+}
+
+li > div.snippet > span {
+  color: #666;
+}
+
+.match {
+  font-weight: bold;
+  text-shadow: 1px 1px rgba(255, 255, 255, 0.9);
+  color: #111;
+  padding-left: 4pt;
+  padding-right: 2pt;
+}
+
+em, em.level-0 {
+  border-bottom-width: 2px;
+  border-bottom-style: solid;
+  padding-bottom: 0px;
+  font-style: normal;
+}
+
+em > em, em.level-1 {
+  padding-bottom: 3px;
+}
+
+em > em > em, em.level-2 {
+  padding-bottom: 6px;
+}
+
+.class-0 { border-color: #c1002b; }
+.class-1 { border-color: #009ee0; }
+.class-2 { border-color: #f29400; }
+
+span.more:before {
+  content: "…";
+  padding-left: 2pt;
+  padding-right: 2pt;
+}
+
+/* active view */
+ol > li.active {
+  text-align: left;
+  width: auto;
+  cursor: normal;
+  white-space: wrap;
+  height: auto;
+  border-width: 2px;
+  background-color: #f4eebb;
+  position: relative;
+  min-height: 68pt;
+}
+
+ol > li.active > div.snippet {
+  margin: 5pt 10pt;
+  margin-right: 3em;
+  margin-bottom: 24pt;
+}
+
+ol > li.active > div.snippet > span {
+  line-height: 1.4em;
+  width: auto;
+}
+
+ol > li.active > div.snippet > span.context-left {
+  margin-left: 0;
+  display: inline;
+  overflow: visible;
+  text-align: left;
+  width: auto;
+}
+
+/* Korap-Actions: */
+ol > li ul.action {
+  display: none;
+}
+
+ol > li ul.action li {
+  cursor: pointer;
+  color: white;
+  text-decoration: none;
+}
+
+ol > li.active ul.action {
+  background-color: #ffa500;
+  font-size: 12pt;
+  color: white;
+  text-shadow: none;
+  display: block;
+  margin: 0;
+  padding: 0;
+  z-index: 4;
+  text-indent: 0;
+  list-style-type: none;
+  list-style-position: inline;
+}
+
+/*
+ol > li.active ul.action.right {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 1.2em;
+}
+
+ol > li.active ul.action.right li {
+  float: left;
+  padding-left: 1em;
+}
+*/
+
+ol > li.active ul.action.right {
+  position: absolute;
+  float: right;
+  text-align: center;
+  padding: 0pt 3pt;
+  height: 100%;
+  width: 1.2em;;
+  right: 0;
+  top: 0;
+}
+
+ol > li:not(.active) p {
+  display: none;
+}
+
+ol > li.active p {
+  background-color: #ffa500;
+  color: white;
+  text-shadow: none;
+  padding: 3pt 10pt;
+  margin: 5pt 0pt 0pt 0pt;
+  position: absolute;
+  width: 100%;
+  bottom: 0;
+}
\ No newline at end of file
diff --git a/public/style.css b/public/style.css
index dff0bcb..0ad372e 100644
--- a/public/style.css
+++ b/public/style.css
@@ -8,9 +8,11 @@
 
 #top {
   background-color: #7ba400;
-  padding: 10pt 0 10pt 30pt;
+  padding: 0pt;
+  padding-top: 10px;
   position: relative;
-  height: 62.5px;
+  height: 70px;
+  padding-left: 30px;
 }
 
 #button-right {
@@ -216,16 +218,6 @@
   margin-bottom: 40px;
 }
 
-/*
-iframe {
-  border-width: 0;
-  border-top: 1px solid #ccc;
-  border-bottom: 1px solid #ccc;
-  height: 300px;
-  width: 100%;
-}
-*/
-
 #tutorial {
   position: fixed;
   z-index: 9999;
@@ -253,8 +245,27 @@
   min-height: 100%;
   border-width: 0;
   border-radius: 10px;
-  background-image: url('img/loading.gif');
+  background-image: url('img/crab.svg');
+  background-size: 10%;
   background-repeat: no-repeat;
   background-position: center center;
   background-color: white;
+}
+
+h1 {
+    margin: 0;
+    left: 0;
+    top: 0;
+    background-image: url('/img/korap-logo-solo.svg');
+    position: absolute;
+    width: 260px; /* like sidebars*/
+    height: 80px; /* like #top */
+    z-index: 999;
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: 65%;
+}
+
+h1 span {
+    margin-left: -3000px;
 }
\ No newline at end of file
diff --git a/public/translatehtml.js b/public/translatehtml.js
new file mode 100644
index 0000000..4a1f4c6
--- /dev/null
+++ b/public/translatehtml.js
@@ -0,0 +1,147 @@
+var cleanRegex = /^([^\/]+?\/)?[^\:]+?\:/;
+var splitRegex = /^(.+?):([^:]+?)$/;
+
+// SnippetTree constructor
+function SnippetTree (obj) {
+  this.children = [];
+  this.data = obj;
+
+  // Replace title
+  this.cleanTitle = function (title) {
+    return title.replace(cleanRegex, "");
+  };
+
+  // Add new child to tree
+  this.addChild = function (childData) {
+    var c = new SnippetTree (childData);
+    this.children.push(c);
+    return c;
+  };
+
+  // Recursively parse children
+  this.parseChildren = function (children) {
+    for (var i in children) {
+      var c = children[i];
+      if (c.nodeType === 1) {
+	if (c.getAttribute("title")) {
+	  var title = this.cleanTitle(c.getAttribute("title"));
+	  var childTree = this.addChild({ type : title });
+	  if (c.hasChildNodes())
+	    childTree.parseChildren(c.childNodes);
+	}
+	else if (c.hasChildNodes())
+	  this.parseChildren(c.childNodes);
+      }
+      else if (c.nodeType === 3)
+	if (c.nodeValue.match(/[-a-z0-9]/i)) {
+	  this.addChild({
+	    type : "leaf",
+	    word : c.nodeValue
+	  });
+	};
+    };
+    return this;
+  };
+};
+
+
+// SnippetTable constructor
+function SnippetTable (obj) {
+  this.info = [];
+  this.overall = {};
+  this.pos = 0;
+  this.load = function (children) {
+    for (var i in children) {
+      var c = children[i];
+
+      // element with title
+      if (c.nodeType === 1) {
+	if (c.getAttribute("title")) {
+	  if (splitRegex.exec(c.getAttribute("title"))) {
+
+	    // Create object on position unless it exists
+	    if (!this.info[this.pos]) {
+	      this.info[this.pos] = {};
+	    };
+
+	    // Fill position with info
+	    this.info[this.pos][RegExp.$1] = RegExp.$2;
+	    this.overall[RegExp.$1] = 1;
+	  };
+	};
+
+	// depth search
+	if (c.hasChildNodes())
+	  this.load(c.childNodes);
+      }
+
+      // Leaf node - store string on position and go to next string
+      else if (c.nodeType === 3)
+	if (c.nodeValue.match(/[-a-z0-9]/i))
+	  this.info[this.pos++]["-s"] = c.nodeValue;
+    };
+    return this;
+  };
+};
+
+
+// Make tree from snippet
+function translateTree (snippet) {
+  var html = document.createElement("tree");
+  html.innerHTML = snippet;
+  return new SnippetTree({ type : "ROOT" }).parseChildren(html.childNodes);
+};
+
+
+// Make table from snippet
+function translateTable (snippet) {
+  // Create wrapper element
+  var html = document.createElement("table");
+  html.innerHTML = snippet;
+
+  // Create table object and load data from HTML
+  var info = new SnippetTable();
+  info.load(html.childNodes);
+
+  // Sort keys
+  var overallArray = [];
+  for (i in info.overall) {
+    overallArray.push(i);
+  };
+  overallArray.sort();
+
+  // Create HTML based on info
+  var d = document;
+  var table = d.createElement('table');
+  var tr = d.createElement('tr');
+  table.appendChild(tr);
+  var th = d.createElement('th');
+  tr.appendChild(th);
+
+  // Header line with surface strings
+  for (i in info.info) {
+    th = d.createElement('th');
+    tr.appendChild(th);
+    th.appendChild(d.createTextNode(info.info[i]["-s"]));
+  };
+
+  // Annotations
+  for (i in overallArray) {
+    i = overallArray[i];
+
+    tr = d.createElement('tr');
+    table.appendChild(tr);
+    th = d.createElement('th');
+    tr.appendChild(th);
+    th.appendChild(d.createTextNode(i));
+    for (t in info.info) {
+      var td = d.createElement('td');
+      tr.appendChild(td);
+      if (info.info[t][i] !== undefined)
+	td.appendChild(d.createTextNode(info.info[t][i]));
+    };
+  };
+
+  // return HTML object
+  return table;
+};