1 files changed, 98 insertions, 0 deletions
diff --git a/alignment_matrix/alignment-matrix.js b/alignment_matrix/alignment-matrix.js
new file mode 100644
index 0000000..ae486af
--- /dev/null
+++ b/alignment_matrix/alignment-matrix.js
@@ -0,0 +1,98 @@
+// need max length of strings to determine offsets
+function max_string_length(a)
+{
+  max = -1;
+  for (i = 0; i < a.length; i++) {
+    l = a[i].length
+    if (l > max) max = l;
+  }
+  return max;
+};
+
+//TODO data
+var fr = ["michael", "geht", "davon", "aus", "dass", "er", "im", "haus", "bleibt", "."]
+var en = ["michael", "assumes", "that", "he", "will", "stay", "in", "the", "house", "."]
+var a = {0:[0], 1:[1,2,3], 2:[5], 3:[6], 4:[8], 5:[8], 6:[7], 7:[7], 8:[8], 9:[9]};
+
+//var fr = ['das', 'ist', 'ein', 'kleiner', 'test', '.'];
+//var en = ['this', 'test', 'is', 'a', 'little', '.'];
+//var a = {0:[0], 1:[4], 2:[1], 3:[2], 4:[3], 5:[5]};
+//var fr = ['Versandhandel'];
+//var en = ['mail', 'order'];
+//var a = {0:[0], 1:[0]};
+
+var alignment_matrix = function (en, fr, a)
+{
+  // vars
+  top = true;                     // false = fr at the bottom (Arabic?)
+  max_en = max_string_length(en); // offset left
+  max_fr = max_string_length(fr); // offset top/bottom
+  char_size = 10;                 // font width
+  margin  = -10;                  // margin text to matrix
+  block_width = 24;               // height and width of a rect in the matrix
+  block_height = 24;              // ^
+  x_offset = max_en*char_size;    // offset left
+  if (top) {
+    y_offset = (max_fr*char_size+(-margin));
+  } else {
+    y_offset = 0;
+  }
+  paper_width  = max_en*char_size + en.length*block_width + 4*block_width;              //FIXME +4*block_width ?
+  paper_height = max_fr*char_size + (-margin) + fr.length*block_height + 4*block_width; // ^
+
+  // collect rectangles for later manipulation
+  a_rect = []
+
+  var paper = Raphael("holder", paper_width, paper_height);
+
+  for (var row = 0; row < en.length; row += 1) {
+    // leftmost col: en
+    if (top) {
+      var t = paper.text(x_offset + margin, y_offset + row*block_height + block_height/2, en[row]);
+    } else {
+      var t = paper.text(x_offset + margin, row*block_height + block_height/2, en[row])
+    }
+    t.attr({'font-size': 10, 'font-family': 'Andale Mono', 'text-anchor': 'end'});
+
+    a_rect.push([]);
+    for (var col = 0; col < fr.length; col += 1) {
+      var r = paper.rect(x_offset + block_width*col, y_offset + block_height*row, block_width, block_height);
+      r.attr({stroke:"black", fill:"white"});
+      a_rect[row].push(r);
+      r.node.onclick = function () { // something useful?
+        var this_rect = r;
+        return function () {
+          this_rect.attr({fill:"gray"});
+        }
+      }();
+    }
+  }
+
+  // top/bottom row: fr
+  x_start = block_height*en.length + (-margin);
+  for (i = 0; i < fr.length; i++) {
+    for (j = 0; j < fr[i].length; j++) {
+      if (top) {
+        y_start = max_fr*char_size;
+        var ch = paper.text(x_offset + i*block_width + block_width/4, y_start - j*6.5, fr[i][j]).rotate(270); // j*6.5 = letter spacing
+
+      } else {
+        var ch = paper.text(x_offset + i*block_width + block_width/2, x_start+ j*6.5, fr[i][j]).rotate(90);
+      }
+      ch.attr({'font-size': 10, 'font-family': 'Andale Mono', 'text-anchor': 'start'})
+    }
+  }
+
+  // fill alignment rectangles
+  for (i = 0; i < en.length; i++) {
+    for (j = 0; j < a[i].length; j++) {
+      a_rect[i][a[i][j]].attr({fill:"#000"});
+    }
+  }
+};
+
+
+$(document).ready(function() {
+  $("#holder").fadeIn();
+});
+