// 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:[9], 5:[9], 6:[7], 7:[7], 8:[8], 9:[10]};

//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': 12, 'font-family': 'Courier', '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:"#aaa"});
        }
      }();
    }
  }

  // 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': 12, 'font-family': 'Courier', '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();
});