From 04563ca60c3ffb2c02edf5e09582528d837aa925 Mon Sep 17 00:00:00 2001
From: Patrick Simianer <p@simianer.de>
Date: Wed, 28 Oct 2015 13:43:08 +0100
Subject: mv

---
 common.js                    |  58 -------
 external/lfpe-apache.conf    |   8 +
 footer.php                   |   4 +-
 img/ajax-loader-large.gif    | Bin 19110 -> 0 bytes
 img/institut_cl.png          | Bin 3301 -> 0 bytes
 img/logo_neu_204x107.jpg     | Bin 14111 -> 0 bytes
 index.php                    |   2 +-
 interface.php                |  13 +-
 js/common.js                 |  58 +++++++
 js/lfpe.js                   | 357 +++++++++++++++++++++++++++++++++++++++++++
 lfpe-apache.conf             |   8 -
 lfpe.css                     | 101 ------------
 lfpe.js                      | 357 -------------------------------------------
 placeholder.png              | Bin 1421 -> 0 bytes
 static/ajax-loader-large.gif | Bin 0 -> 19110 bytes
 static/institut_cl.png       | Bin 0 -> 3301 bytes
 static/lfpe.css              | 101 ++++++++++++
 static/logo_neu_204x107.jpg  | Bin 0 -> 14111 bytes
 static/placeholder.png       | Bin 0 -> 1421 bytes
 19 files changed, 534 insertions(+), 533 deletions(-)
 delete mode 100644 common.js
 create mode 100644 external/lfpe-apache.conf
 delete mode 100644 img/ajax-loader-large.gif
 delete mode 100644 img/institut_cl.png
 delete mode 100644 img/logo_neu_204x107.jpg
 create mode 100644 js/common.js
 create mode 100644 js/lfpe.js
 delete mode 100644 lfpe-apache.conf
 delete mode 100644 lfpe.css
 delete mode 100644 lfpe.js
 delete mode 100644 placeholder.png
 create mode 100644 static/ajax-loader-large.gif
 create mode 100644 static/institut_cl.png
 create mode 100644 static/lfpe.css
 create mode 100644 static/logo_neu_204x107.jpg
 create mode 100644 static/placeholder.png

diff --git a/common.js b/common.js
deleted file mode 100644
index 11dcdba..0000000
--- a/common.js
+++ /dev/null
@@ -1,58 +0,0 @@
-var data,
-    ui_type;
-
-
-/*
- * hacky way to remove class from node
- *
- */
-function removeClass(node, className)
-{
-  node.className =
-    node.className.replace(" "+className,'');
-  node.className =
-    node.className.replace(" "+className,''); // ???
-
-  return false;
-}
-
-/*
- *
- *
- */
-function toggleDisplay(node)
-{
-  if (node.style.display=='none') {
-    node.style.display = 'block';
-  } else {
-    node.style.display = 'none';
-  }
-
-  return false;
-}
-
-/*
- * trim string
- *
- */
-function trim(s)
-{
-  return s.replace(/^\s+|\s+$/g, '');
-}
-
-/*
- * cross-site request
- *
- */
-function CreateCORSRequest(method, url)
-{
-  var xhr = new XMLHttpRequest();
-  if ("withCredentials" in xhr) {
-    xhr.open(method, url, true);
-  } else {
-    xhr = null;
-  }
-
-  return xhr;
-}
-
diff --git a/external/lfpe-apache.conf b/external/lfpe-apache.conf
new file mode 100644
index 0000000..adeca26
--- /dev/null
+++ b/external/lfpe-apache.conf
@@ -0,0 +1,8 @@
+Alias /lfpe /fast_scratch/simianer/lfpe/lfpe/
+
+<Directory /fast_scratch/simianer/lfpe/lfpe>
+	Options +FollowSymLinks
+	AllowOverride All
+	order allow,deny
+	allow from all
+</Directory>
diff --git a/footer.php b/footer.php
index f2d1aa9..8709538 100644
--- a/footer.php
+++ b/footer.php
@@ -1,7 +1,7 @@
 <!-- Footer -->
 <p id="footer">
-  <img id="uni" style="width:129px" src="img/logo_neu_204x107.jpg" />
-  <img id="cl" style="width:128px"  src="img/institut_cl.png" /><br />
+  <img id="uni" style="width:129px" src="static/logo_neu_204x107.jpg" />
+  <img id="cl" style="width:128px"  src="static/institut_cl.png" /><br />
   &copy;2015 Heidelberg University/Institute for Computational Linguistics
 </p>
 <!-- /Footer -->
diff --git a/img/ajax-loader-large.gif b/img/ajax-loader-large.gif
deleted file mode 100644
index 1fe22da..0000000
Binary files a/img/ajax-loader-large.gif and /dev/null differ
diff --git a/img/institut_cl.png b/img/institut_cl.png
deleted file mode 100644
index 6c56df6..0000000
Binary files a/img/institut_cl.png and /dev/null differ
diff --git a/img/logo_neu_204x107.jpg b/img/logo_neu_204x107.jpg
deleted file mode 100644
index 870dcb4..0000000
Binary files a/img/logo_neu_204x107.jpg and /dev/null differ
diff --git a/index.php b/index.php
index e574c63..20cb704 100644
--- a/index.php
+++ b/index.php
@@ -3,7 +3,7 @@
   <meta charset="utf-8" />
   <title>Post-editing application</title>
   <script src="lfpe.js"></script>
-  <link rel="stylesheet" type="text/css" href="lfpe.css" />
+  <link rel="stylesheet" type="text/css" href="static/lfpe.css" />
 </head>
 
 <body onload="">
diff --git a/interface.php b/interface.php
index 559b249..5425858 100644
--- a/interface.php
+++ b/interface.php
@@ -2,13 +2,14 @@
 <head>
   <meta charset="utf-8" />
   <title>Post-editing application (Session: #<?php echo $_GET["key"]; ?>)</title>
-  <script src="common.js"></script>
-  <script src="lfpe.js"></script>
-  <link rel="stylesheet" type="text/css" href="lfpe.css" />
+  <link rel="stylesheet" type="text/css" href="static/lfpe.css" />
+  <script src="js/common.js" charset="utf-8"></script>
+  <script src="js/lfpe.js" charset="utf-8"></script>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" charset="utf-8"></script>
   <script src="https://raw.githubusercontent.com/DmitryBaranovskiy/raphael/v2.1.2/raphael-min.js" type="text/javascript" charset="utf-8"></script>
   <script src="https://raw.githubusercontent.com/marmelab/Raphael.InlineTextEditing/fd578f0eddd4172e6d9b3fde4cb67576cf546dc1/raphael.inline_text_editing.js" charset="utf-8"></script>
-  <script src="derivation_editor/derivation-editor.js" charset="utf-8"></script>
+  <script src="js/derivation_editor/derivation-editor.js" charset="utf-8"></script>
+
 </head>
 
 <body>
@@ -17,7 +18,7 @@
 
 <!-- Derivation editor -->
 <div id="derivation_editor">
-  <div id="holder"><img style="margin:.4em" src="placeholder.png" /></div>
+  <div id="holder"><img style="margin:.4em" src="static/placeholder.png" /></div>
   <input type="button" value="+" onClick="DE_add_object()" />
   <input type="button" value="Reset" onClick="DE_init();" />
 </div>
@@ -48,7 +49,7 @@
 <div>
   <button id="pause_button" type="button" onclick="pause()">Pause</button>
   <button id="next" type="button" onclick="Next()">Start/Continue</button>
-  <span id="status"><strong>Working, please wait for next segment</strong> <img src="img/ajax-loader-large.gif" width="20px" /></span>
+  <span id="status"><strong>Working, please wait for next segment</strong> <img src="static/ajax-loader-large.gif" width="20px" /></span>
 </div>
 <!-- /Buttons -->
 
diff --git a/js/common.js b/js/common.js
new file mode 100644
index 0000000..11dcdba
--- /dev/null
+++ b/js/common.js
@@ -0,0 +1,58 @@
+var data,
+    ui_type;
+
+
+/*
+ * hacky way to remove class from node
+ *
+ */
+function removeClass(node, className)
+{
+  node.className =
+    node.className.replace(" "+className,'');
+  node.className =
+    node.className.replace(" "+className,''); // ???
+
+  return false;
+}
+
+/*
+ *
+ *
+ */
+function toggleDisplay(node)
+{
+  if (node.style.display=='none') {
+    node.style.display = 'block';
+  } else {
+    node.style.display = 'none';
+  }
+
+  return false;
+}
+
+/*
+ * trim string
+ *
+ */
+function trim(s)
+{
+  return s.replace(/^\s+|\s+$/g, '');
+}
+
+/*
+ * cross-site request
+ *
+ */
+function CreateCORSRequest(method, url)
+{
+  var xhr = new XMLHttpRequest();
+  if ("withCredentials" in xhr) {
+    xhr.open(method, url, true);
+  } else {
+    xhr = null;
+  }
+
+  return xhr;
+}
+
diff --git a/js/lfpe.js b/js/lfpe.js
new file mode 100644
index 0000000..1cf88bf
--- /dev/null
+++ b/js/lfpe.js
@@ -0,0 +1,357 @@
+/*
+ * Timer
+ *
+ */
+var Timer = {
+  start_t: 0,
+  pause_start_t: 0,
+  pause_acc_t: 0,
+  paused: false,
+
+  start: function() {
+    this.start_t = Date.now();
+    this.pause_start_t = 0;
+    this.pause_acc_t = 0;
+    this.paused = false;
+  },
+  pause: function() {
+    this.paused = true;
+    this.pause_start_t = Date.now();
+  },
+  unpause: function() {
+    this.paused = false;
+    this.pause_acc_t += Date.now()-this.pause_start_t;
+    this.pause_start_t = 0;
+  },
+  get: function() {
+    return (Date.now()-this.start_t)-this.pause_acc_t;
+  }
+}
+
+/*
+ * pause/unpause timer
+ *
+ */
+function pause()
+{
+  var paused          = document.getElementById("paused");
+  var button          = document.getElementById("pause_button");
+  var next_button     = document.getElementById("next");
+  var target_textarea = document.getElementById("target_textarea")
+  var initialized     = document.getElementById("init");
+
+  if (paused.value == 0) {
+    button.innerHTML = "Unpause";
+    paused.value = 1;
+    next.setAttribute("disabled", "disabled");
+    target_textarea.setAttribute("disabled", "disabled");
+    Timer.pause();
+  } else {
+    button.innerHTML = "Pause";
+    paused.value = 0;
+    next.removeAttribute("disabled");
+    if (initialized.value != "") {
+      target_textarea.removeAttribute("disabled");
+    }
+    Timer.unpause();
+  }
+}
+
+/*
+ * no newline on return in textarea
+ *
+ */
+function catch_return(e)
+{
+  if (e.keyCode == 13) {
+    e.preventDefault();
+    Next();
+  }
+
+  return false;
+}
+
+/*
+ *
+ *
+ */
+function working()
+{
+  // elements
+  var button              = document.getElementById("next");
+  var pause_button        = document.getElementById("pause_button");
+  var target_textarea     = document.getElementById("target_textarea")
+  var raw_source_textarea = document.getElementById("raw_source_textarea");
+  var current_seg_id      = document.getElementById("current_seg_id");
+  var source              = document.getElementById("source");
+  var status              = document.getElementById("status");
+  var oov_correct         = document.getElementById("oov_correct");
+  var last_post_edit      = document.getElementById("last_post_edit");
+
+  // show 'working' message
+  status.style.display = "block";
+
+  // disable button and textarea
+           button.setAttribute("disabled", "disabled");
+     pause_button.setAttribute("disabled", "disabled");
+  target_textarea.setAttribute("disabled", "disabled");
+}
+
+/*
+ *
+ *
+ */
+function not_working()
+{
+  // elements
+  var button              = document.getElementById("next");
+  var pause_button        = document.getElementById("pause_button");
+  var target_textarea     = document.getElementById("target_textarea")
+  var raw_source_textarea = document.getElementById("raw_source_textarea");
+  var current_seg_id      = document.getElementById("current_seg_id");
+  var source              = document.getElementById("source");
+  var status              = document.getElementById("status");
+  var oov_correct         = document.getElementById("oov_correct");
+  var last_post_edit      = document.getElementById("last_post_edit");
+
+  // hide 'working' message
+  status.style.display = "none";
+
+  // enable buttons
+          document.getElementById("next").removeAttribute("disabled");
+  document.getElementById("pause_button").removeAttribute("disabled");
+}
+
+/*
+ * next button
+ *
+ */
+function Next()
+{
+  // elements
+  var button              = document.getElementById("next");
+  var pause_button        = document.getElementById("pause_button");
+  var target_textarea     = document.getElementById("target_textarea")
+  var raw_source_textarea = document.getElementById("raw_source_textarea");
+  var current_seg_id      = document.getElementById("current_seg_id");
+  var source              = document.getElementById("source");
+  var status              = document.getElementById("status");
+  var oov_correct         = document.getElementById("oov_correct");
+  var last_post_edit      = document.getElementById("last_post_edit");
+
+  working();
+
+  // get metadata stored in DOM
+  var base_url = "http://coltrane.cl.uni-heidelberg.de";
+  var port     = document.getElementById("port").value;
+  var key      = document.getElementById("key").value;
+
+  // url
+  next_url = base_url+":"+port+"/next?key="+key;
+
+  // post edit
+  var post_edit = '';
+
+  // extract data from interfaces
+  if (ui_type == 'g') {
+    post_edit = JSON.parse(DE_extract_data())["target"].join(" ")
+  } else {
+    post_edit = trim(target_textarea.value);
+  }
+
+  // send data
+  // ???
+  if (oov_correct.value=="false" && post_edit != "") {
+      // compose request
+      next_url += "&example="+encodeURIComponent(source.value)+"%20%7C%7C%7C%20"+encodeURIComponent(post_edit)+"&duration="+Timer.get();
+      // no change?
+      if (post_edit == last_post_edit.value) {
+        next_url += "&nochange=1";
+      }
+      // update document overview
+      document.getElementById("seg_"+(current_seg_id.value)+"_t").innerHTML=post_edit;
+  // OOV correction mode
+  } else if (oov_correct.value=="true") {
+     var l = document.getElementById("oov_fields").children.length;
+     var src = [];
+     var tgt = [];
+     for (var i=0; i<l/2; i++) {
+       src.push(trim(document.getElementById("oov_src"+i).value));
+       tgt.push(trim(document.getElementById("oov_tgt"+i).value));
+       if (tgt[tgt.length-1] == "") { // empty correction
+         alert("Please provide translations for all OOV words.");
+         not_working();
+
+         return;
+       }
+     }
+     var l = document.getElementById("oov_fields").children.length;
+     for (var i=0; i<l; i++)
+       { document.getElementById("oov_fields").children[0].remove(); }
+     $("#oov_form").css("display", "none");
+     next_url += "&correct="+encodeURIComponent(src.join("\t"))
+                 +"%20%7C%7C%7C%20"+encodeURIComponent(tgt.join("\t"))
+  // ???
+  } else {
+    if (source.value != "") {
+      alert("Please provide a post-edit.");
+      target_textarea.removeAttribute("disabled", "disabled");
+         pause_button.removeAttribute("disabled", "disabled");
+               button.removeAttribute("disabled", "disabled");
+      return;
+    }
+  }
+
+  // confirm to server
+  if (document.getElementById("init").value != "") {
+    var xhr_confirm = CreateCORSRequest('get', base_url+":"+port+"/confirm");
+    xhr_confirm.send(); // FIXME: handle errors
+  }
+
+  // build request
+  var xhr = CreateCORSRequest('get', next_url);
+  if (!xhr) {
+    alert("Error: 2"); // FIXME: do something reasonable
+  }
+
+  // 'next' request's callbacks
+  xhr.onload = function() {
+    document.getElementById("init").value = 1; // for pause()
+     // translation system is currently handling a request
+     // FIXME: maybe poll server for result?
+     if (xhr.responseText == "locked") {
+       alert("Translation system is locked, try again in a moment (reload page and click 'Start/Continue' again).");
+       not_working();
+
+       return;
+     }
+
+    data = JSON.parse(xhr.responseText)
+    document.getElementById("data").value = xhr.responseText;
+
+    // done, disable interface
+    if (data["fin"]) {
+      raw_source_textarea.setAttribute("disabled", "disabled");
+          target_textarea.setAttribute("disabled", "disabled");
+      status.style.display              = "none";
+      button.innerHTML                  = "Session finished, thank you!";
+            button.setAttribute("disabled", "disabled");
+      pause_button.setAttribute("disabled", "disabled");
+      if (current_seg_id.value)
+        removeClass(document.getElementById("seg_"+current_seg_id.value), "bold");
+
+      return;
+
+    // enter OOV correct mode
+    } else if (data["oovs"]) {
+      var append_to = document.getElementById("oov_fields");
+      for (var i=0; i<data["oovs"].length; i++) {
+        var node_src = document.createElement("input");
+        var node_tgt = document.createElement("input");
+        node_src.type = "text";
+        node_tgt.type = "text";
+        node_src.id = "oov_src"+i;
+        node_tgt.id = "oov_tgt"+i;
+        node_src.value = data["oovs"][i];
+        node_src.setAttribute("disabled", "disabled");
+        append_to.appendChild(node_src);
+        append_to.appendChild(node_tgt);
+      }
+      oov_correct.value = true;
+
+      $("#oov_form").css("display", "block");
+      not_working();
+
+    // translation mode
+    } else {
+      var id          = data["progress"];
+      var src         = data["source"];
+      var translation = data["transl_detok"];
+      var raw_source  = data["raw_source"];
+
+      // update interface
+      oov_correct.value         = false;
+      status.style.display      = "none";
+      target_textarea.value     = translation;
+      raw_source_textarea.value = raw_source;
+      button.innerHTML          = "Next";
+               button.removeAttribute("disabled");
+      target_textarea.removeAttribute("disabled", "disabled");
+         pause_button.removeAttribute("disabled", "disabled");
+      document.getElementById("seg_"+id).className += " bold";
+      if (id > 0) {
+        removeClass(document.getElementById("seg_"+(id-1)), "bold");
+      }
+      target_textarea.rows     = Math.round(translation.length/80)+1;
+      raw_source_textarea.rows = Math.round(raw_source.length/80)+1;
+      target_textarea.focus();
+      target_textarea.selectionStart = 0;
+      target_textarea.selectionEnd   = 0;
+
+      // remember aux data in DOM
+      current_seg_id.value = id;
+      source.value         = src;
+      last_post_edit.value = translation;
+
+      // confirm to server
+      var xhr_confirm = CreateCORSRequest('get', base_url+":"+port+"/confirm");
+      xhr_confirm.send(); // FIXME: handle errors
+
+      // load data into graphical UI
+      if (ui_type == "g") {
+        DE_init();
+      }
+
+      // start timer
+      Timer.start();
+    }
+  };
+
+  xhr.onerror = function() {}; // FIXME: do something reasonable
+
+  xhr.send(); // send 'next' request
+
+  return;
+}
+
+/*
+ * init text interface
+ *
+ */
+function init_text_editor()
+{
+  document.getElementById("target_textarea").value     = "";
+  document.getElementById("raw_source_textarea").value = "";
+  document.getElementById("target_textarea").setAttribute("disabled", "disabled");
+
+  return false;
+}
+
+/*
+ * init site
+ *
+ */
+window.onload = function ()
+{
+  // reset vars
+  document.getElementById("source").value              = "";
+  document.getElementById("current_seg_id").value      = "";
+  document.getElementById("paused").value              = "";
+  document.getElementById("oov_correct").value         = false;
+  document.getElementById("displayed_oov_hint").value  = false;
+  document.getElementById("init").value                = "";
+
+  not_working();
+
+  ui_type = document.getElementById("ui_type").value;
+
+  // graphical derivation editor
+  if (ui_type == "g") {
+    document.getElementById("derivation_editor").style.display = "block";
+  // text based editor
+  } else {
+    init_text_editor();
+    document.getElementById("textboxes").style.display = "block";
+  }
+};
+
diff --git a/lfpe-apache.conf b/lfpe-apache.conf
deleted file mode 100644
index adeca26..0000000
--- a/lfpe-apache.conf
+++ /dev/null
@@ -1,8 +0,0 @@
-Alias /lfpe /fast_scratch/simianer/lfpe/lfpe/
-
-<Directory /fast_scratch/simianer/lfpe/lfpe>
-	Options +FollowSymLinks
-	AllowOverride All
-	order allow,deny
-	allow from all
-</Directory>
diff --git a/lfpe.css b/lfpe.css
deleted file mode 100644
index c6220e3..0000000
--- a/lfpe.css
+++ /dev/null
@@ -1,101 +0,0 @@
-html {
-  font-family: Arial, Helvetica, sans-serif;
-  font-size: 18px
-}
-
-textarea {
-  font-size: 2em;
-  width:     100%
-}
-
-button {
-  margin:     1em;
-  padding:    .25em;
-  background: #fff;
-  font-weight: bold
-}
-
-.bold { font-weight:bold }
-.small { font-size:.8em }
-.xtrasmall { font-size:.6em }
-
-div#wrapper {
-  margin:  2em;
-  padding: 1em
-}
-
-span#status {
-  display: none;
-  float:   right
-}
-
-/* Edit */
-#textboxes, #derivation_editor {
-  display: none
-}
-#raw_source_textarea, #target_textarea {
-  font-family: "Times New Roman", Georgia, Serif;
-}
-#oov_form { display: none }
-#oov_fields {
-  padding: 1em;
-  margin: .25em
-
-}
-#oov_fields input {
-  text-align: center;
-  padding: .4em
-}
-/* /Edit */
-
-/* Derivation editor */
-#derivation_editor input {
-  background: #ccc;
-  font-size: 60%;
-  padding: .4em
-}
-/* /Derivation edtior */
-
-/* Session overview */
-div#overview_wrapper { margin-top:1em }
-table#overview { font-size:.8em }
-table#overview td.seg_text { width: 45% }
-table#overview td { border-bottom: 1px solid #000 }
-table#overview .doc_title { background-color: #eee }
-/* /Session overview */
-
-/* Header */
-div#header {
-  margin-bottom: 2em;
-  text-align:right
-}
-img#uni {}
-img#cl {
-  margin-bottom:20px;
-  margin-left:10px;
-  vertical-align:bottom
-}
-/* /Header */
-
-/* Footer */
-p#footer {
-  text-align:  right;
-  font-size:   .5em;
-  margin:      0;
-  padding:     0;
-  color:       #303030
-}
-/* /Footer */
-
-/* Help */
-div#help {
-  margin-top: .5em;
-  font-size:  .8em;
-  width:      70%;
-  text-align: justify
-}
-div#help a { color:#ccc }
-div#help:hover { color: #000 }
-div#help:hover a { color: #000 }
-/* /Help */
-
diff --git a/lfpe.js b/lfpe.js
deleted file mode 100644
index 1cf88bf..0000000
--- a/lfpe.js
+++ /dev/null
@@ -1,357 +0,0 @@
-/*
- * Timer
- *
- */
-var Timer = {
-  start_t: 0,
-  pause_start_t: 0,
-  pause_acc_t: 0,
-  paused: false,
-
-  start: function() {
-    this.start_t = Date.now();
-    this.pause_start_t = 0;
-    this.pause_acc_t = 0;
-    this.paused = false;
-  },
-  pause: function() {
-    this.paused = true;
-    this.pause_start_t = Date.now();
-  },
-  unpause: function() {
-    this.paused = false;
-    this.pause_acc_t += Date.now()-this.pause_start_t;
-    this.pause_start_t = 0;
-  },
-  get: function() {
-    return (Date.now()-this.start_t)-this.pause_acc_t;
-  }
-}
-
-/*
- * pause/unpause timer
- *
- */
-function pause()
-{
-  var paused          = document.getElementById("paused");
-  var button          = document.getElementById("pause_button");
-  var next_button     = document.getElementById("next");
-  var target_textarea = document.getElementById("target_textarea")
-  var initialized     = document.getElementById("init");
-
-  if (paused.value == 0) {
-    button.innerHTML = "Unpause";
-    paused.value = 1;
-    next.setAttribute("disabled", "disabled");
-    target_textarea.setAttribute("disabled", "disabled");
-    Timer.pause();
-  } else {
-    button.innerHTML = "Pause";
-    paused.value = 0;
-    next.removeAttribute("disabled");
-    if (initialized.value != "") {
-      target_textarea.removeAttribute("disabled");
-    }
-    Timer.unpause();
-  }
-}
-
-/*
- * no newline on return in textarea
- *
- */
-function catch_return(e)
-{
-  if (e.keyCode == 13) {
-    e.preventDefault();
-    Next();
-  }
-
-  return false;
-}
-
-/*
- *
- *
- */
-function working()
-{
-  // elements
-  var button              = document.getElementById("next");
-  var pause_button        = document.getElementById("pause_button");
-  var target_textarea     = document.getElementById("target_textarea")
-  var raw_source_textarea = document.getElementById("raw_source_textarea");
-  var current_seg_id      = document.getElementById("current_seg_id");
-  var source              = document.getElementById("source");
-  var status              = document.getElementById("status");
-  var oov_correct         = document.getElementById("oov_correct");
-  var last_post_edit      = document.getElementById("last_post_edit");
-
-  // show 'working' message
-  status.style.display = "block";
-
-  // disable button and textarea
-           button.setAttribute("disabled", "disabled");
-     pause_button.setAttribute("disabled", "disabled");
-  target_textarea.setAttribute("disabled", "disabled");
-}
-
-/*
- *
- *
- */
-function not_working()
-{
-  // elements
-  var button              = document.getElementById("next");
-  var pause_button        = document.getElementById("pause_button");
-  var target_textarea     = document.getElementById("target_textarea")
-  var raw_source_textarea = document.getElementById("raw_source_textarea");
-  var current_seg_id      = document.getElementById("current_seg_id");
-  var source              = document.getElementById("source");
-  var status              = document.getElementById("status");
-  var oov_correct         = document.getElementById("oov_correct");
-  var last_post_edit      = document.getElementById("last_post_edit");
-
-  // hide 'working' message
-  status.style.display = "none";
-
-  // enable buttons
-          document.getElementById("next").removeAttribute("disabled");
-  document.getElementById("pause_button").removeAttribute("disabled");
-}
-
-/*
- * next button
- *
- */
-function Next()
-{
-  // elements
-  var button              = document.getElementById("next");
-  var pause_button        = document.getElementById("pause_button");
-  var target_textarea     = document.getElementById("target_textarea")
-  var raw_source_textarea = document.getElementById("raw_source_textarea");
-  var current_seg_id      = document.getElementById("current_seg_id");
-  var source              = document.getElementById("source");
-  var status              = document.getElementById("status");
-  var oov_correct         = document.getElementById("oov_correct");
-  var last_post_edit      = document.getElementById("last_post_edit");
-
-  working();
-
-  // get metadata stored in DOM
-  var base_url = "http://coltrane.cl.uni-heidelberg.de";
-  var port     = document.getElementById("port").value;
-  var key      = document.getElementById("key").value;
-
-  // url
-  next_url = base_url+":"+port+"/next?key="+key;
-
-  // post edit
-  var post_edit = '';
-
-  // extract data from interfaces
-  if (ui_type == 'g') {
-    post_edit = JSON.parse(DE_extract_data())["target"].join(" ")
-  } else {
-    post_edit = trim(target_textarea.value);
-  }
-
-  // send data
-  // ???
-  if (oov_correct.value=="false" && post_edit != "") {
-      // compose request
-      next_url += "&example="+encodeURIComponent(source.value)+"%20%7C%7C%7C%20"+encodeURIComponent(post_edit)+"&duration="+Timer.get();
-      // no change?
-      if (post_edit == last_post_edit.value) {
-        next_url += "&nochange=1";
-      }
-      // update document overview
-      document.getElementById("seg_"+(current_seg_id.value)+"_t").innerHTML=post_edit;
-  // OOV correction mode
-  } else if (oov_correct.value=="true") {
-     var l = document.getElementById("oov_fields").children.length;
-     var src = [];
-     var tgt = [];
-     for (var i=0; i<l/2; i++) {
-       src.push(trim(document.getElementById("oov_src"+i).value));
-       tgt.push(trim(document.getElementById("oov_tgt"+i).value));
-       if (tgt[tgt.length-1] == "") { // empty correction
-         alert("Please provide translations for all OOV words.");
-         not_working();
-
-         return;
-       }
-     }
-     var l = document.getElementById("oov_fields").children.length;
-     for (var i=0; i<l; i++)
-       { document.getElementById("oov_fields").children[0].remove(); }
-     $("#oov_form").css("display", "none");
-     next_url += "&correct="+encodeURIComponent(src.join("\t"))
-                 +"%20%7C%7C%7C%20"+encodeURIComponent(tgt.join("\t"))
-  // ???
-  } else {
-    if (source.value != "") {
-      alert("Please provide a post-edit.");
-      target_textarea.removeAttribute("disabled", "disabled");
-         pause_button.removeAttribute("disabled", "disabled");
-               button.removeAttribute("disabled", "disabled");
-      return;
-    }
-  }
-
-  // confirm to server
-  if (document.getElementById("init").value != "") {
-    var xhr_confirm = CreateCORSRequest('get', base_url+":"+port+"/confirm");
-    xhr_confirm.send(); // FIXME: handle errors
-  }
-
-  // build request
-  var xhr = CreateCORSRequest('get', next_url);
-  if (!xhr) {
-    alert("Error: 2"); // FIXME: do something reasonable
-  }
-
-  // 'next' request's callbacks
-  xhr.onload = function() {
-    document.getElementById("init").value = 1; // for pause()
-     // translation system is currently handling a request
-     // FIXME: maybe poll server for result?
-     if (xhr.responseText == "locked") {
-       alert("Translation system is locked, try again in a moment (reload page and click 'Start/Continue' again).");
-       not_working();
-
-       return;
-     }
-
-    data = JSON.parse(xhr.responseText)
-    document.getElementById("data").value = xhr.responseText;
-
-    // done, disable interface
-    if (data["fin"]) {
-      raw_source_textarea.setAttribute("disabled", "disabled");
-          target_textarea.setAttribute("disabled", "disabled");
-      status.style.display              = "none";
-      button.innerHTML                  = "Session finished, thank you!";
-            button.setAttribute("disabled", "disabled");
-      pause_button.setAttribute("disabled", "disabled");
-      if (current_seg_id.value)
-        removeClass(document.getElementById("seg_"+current_seg_id.value), "bold");
-
-      return;
-
-    // enter OOV correct mode
-    } else if (data["oovs"]) {
-      var append_to = document.getElementById("oov_fields");
-      for (var i=0; i<data["oovs"].length; i++) {
-        var node_src = document.createElement("input");
-        var node_tgt = document.createElement("input");
-        node_src.type = "text";
-        node_tgt.type = "text";
-        node_src.id = "oov_src"+i;
-        node_tgt.id = "oov_tgt"+i;
-        node_src.value = data["oovs"][i];
-        node_src.setAttribute("disabled", "disabled");
-        append_to.appendChild(node_src);
-        append_to.appendChild(node_tgt);
-      }
-      oov_correct.value = true;
-
-      $("#oov_form").css("display", "block");
-      not_working();
-
-    // translation mode
-    } else {
-      var id          = data["progress"];
-      var src         = data["source"];
-      var translation = data["transl_detok"];
-      var raw_source  = data["raw_source"];
-
-      // update interface
-      oov_correct.value         = false;
-      status.style.display      = "none";
-      target_textarea.value     = translation;
-      raw_source_textarea.value = raw_source;
-      button.innerHTML          = "Next";
-               button.removeAttribute("disabled");
-      target_textarea.removeAttribute("disabled", "disabled");
-         pause_button.removeAttribute("disabled", "disabled");
-      document.getElementById("seg_"+id).className += " bold";
-      if (id > 0) {
-        removeClass(document.getElementById("seg_"+(id-1)), "bold");
-      }
-      target_textarea.rows     = Math.round(translation.length/80)+1;
-      raw_source_textarea.rows = Math.round(raw_source.length/80)+1;
-      target_textarea.focus();
-      target_textarea.selectionStart = 0;
-      target_textarea.selectionEnd   = 0;
-
-      // remember aux data in DOM
-      current_seg_id.value = id;
-      source.value         = src;
-      last_post_edit.value = translation;
-
-      // confirm to server
-      var xhr_confirm = CreateCORSRequest('get', base_url+":"+port+"/confirm");
-      xhr_confirm.send(); // FIXME: handle errors
-
-      // load data into graphical UI
-      if (ui_type == "g") {
-        DE_init();
-      }
-
-      // start timer
-      Timer.start();
-    }
-  };
-
-  xhr.onerror = function() {}; // FIXME: do something reasonable
-
-  xhr.send(); // send 'next' request
-
-  return;
-}
-
-/*
- * init text interface
- *
- */
-function init_text_editor()
-{
-  document.getElementById("target_textarea").value     = "";
-  document.getElementById("raw_source_textarea").value = "";
-  document.getElementById("target_textarea").setAttribute("disabled", "disabled");
-
-  return false;
-}
-
-/*
- * init site
- *
- */
-window.onload = function ()
-{
-  // reset vars
-  document.getElementById("source").value              = "";
-  document.getElementById("current_seg_id").value      = "";
-  document.getElementById("paused").value              = "";
-  document.getElementById("oov_correct").value         = false;
-  document.getElementById("displayed_oov_hint").value  = false;
-  document.getElementById("init").value                = "";
-
-  not_working();
-
-  ui_type = document.getElementById("ui_type").value;
-
-  // graphical derivation editor
-  if (ui_type == "g") {
-    document.getElementById("derivation_editor").style.display = "block";
-  // text based editor
-  } else {
-    init_text_editor();
-    document.getElementById("textboxes").style.display = "block";
-  }
-};
-
diff --git a/placeholder.png b/placeholder.png
deleted file mode 100644
index d8e99e1..0000000
Binary files a/placeholder.png and /dev/null differ
diff --git a/static/ajax-loader-large.gif b/static/ajax-loader-large.gif
new file mode 100644
index 0000000..1fe22da
Binary files /dev/null and b/static/ajax-loader-large.gif differ
diff --git a/static/institut_cl.png b/static/institut_cl.png
new file mode 100644
index 0000000..6c56df6
Binary files /dev/null and b/static/institut_cl.png differ
diff --git a/static/lfpe.css b/static/lfpe.css
new file mode 100644
index 0000000..c6220e3
--- /dev/null
+++ b/static/lfpe.css
@@ -0,0 +1,101 @@
+html {
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 18px
+}
+
+textarea {
+  font-size: 2em;
+  width:     100%
+}
+
+button {
+  margin:     1em;
+  padding:    .25em;
+  background: #fff;
+  font-weight: bold
+}
+
+.bold { font-weight:bold }
+.small { font-size:.8em }
+.xtrasmall { font-size:.6em }
+
+div#wrapper {
+  margin:  2em;
+  padding: 1em
+}
+
+span#status {
+  display: none;
+  float:   right
+}
+
+/* Edit */
+#textboxes, #derivation_editor {
+  display: none
+}
+#raw_source_textarea, #target_textarea {
+  font-family: "Times New Roman", Georgia, Serif;
+}
+#oov_form { display: none }
+#oov_fields {
+  padding: 1em;
+  margin: .25em
+
+}
+#oov_fields input {
+  text-align: center;
+  padding: .4em
+}
+/* /Edit */
+
+/* Derivation editor */
+#derivation_editor input {
+  background: #ccc;
+  font-size: 60%;
+  padding: .4em
+}
+/* /Derivation edtior */
+
+/* Session overview */
+div#overview_wrapper { margin-top:1em }
+table#overview { font-size:.8em }
+table#overview td.seg_text { width: 45% }
+table#overview td { border-bottom: 1px solid #000 }
+table#overview .doc_title { background-color: #eee }
+/* /Session overview */
+
+/* Header */
+div#header {
+  margin-bottom: 2em;
+  text-align:right
+}
+img#uni {}
+img#cl {
+  margin-bottom:20px;
+  margin-left:10px;
+  vertical-align:bottom
+}
+/* /Header */
+
+/* Footer */
+p#footer {
+  text-align:  right;
+  font-size:   .5em;
+  margin:      0;
+  padding:     0;
+  color:       #303030
+}
+/* /Footer */
+
+/* Help */
+div#help {
+  margin-top: .5em;
+  font-size:  .8em;
+  width:      70%;
+  text-align: justify
+}
+div#help a { color:#ccc }
+div#help:hover { color: #000 }
+div#help:hover a { color: #000 }
+/* /Help */
+
diff --git a/static/logo_neu_204x107.jpg b/static/logo_neu_204x107.jpg
new file mode 100644
index 0000000..870dcb4
Binary files /dev/null and b/static/logo_neu_204x107.jpg differ
diff --git a/static/placeholder.png b/static/placeholder.png
new file mode 100644
index 0000000..d8e99e1
Binary files /dev/null and b/static/placeholder.png differ
-- 
cgit v1.2.3