/*
 * global vars and data
 *
 */
var shapes_by_id = {},
    r,
    curDrag = null,
    curEd = null,
    curEdShape = null,
    shapes = [],
    target_shapes = [],
    texts = [],
    connections = {},
    margin = 30,
    padding = margin/3,
    xbegin = 80,
    ybegin = 5,
    box_height = 50,
    line_margin = 150,
    ysource = ybegin,
    ytarget = ysource+line_margin;
    font_size = 20,
    font_width = -1,
    id = 0,
    connect_mode = false,
    connect_mode_shape = null,
    edit_mode = false,
    rm_shape = null,
    text_att = { 'fill': '#000', 'stroke': 'none', 'text-anchor': 'start', 'font-size': font_size, 'font-family': 'Times New Roman' },
    shape_att = { fill: "#eee", stroke: "#000", "fill-opacity": 0, "stroke-width": 1 }
    source = ["Das", "ist ein", "kleines", "Haus", "gewesen", "."], // data
    target = ["This", "has been", "a", "small", "house", "."],      // ^
    align  = [0, 1, 3, 4, 1, 5],
    new_pos = -1,
    old_pos = -1;

/*
 * connection
 *
 */
Raphael.fn.connection = function (obj1, obj2, line, bg)
{
  if (obj1.line && obj1.from && obj1.to) {
    line = obj1;
    obj1 = line.from;
    obj2 = line.to;
  }
  if (!obj1.getBBox() || !obj2.getBBox())
    return;
  var bb1 = obj1.getBBox(),
      bb2 = obj2.getBBox(),
      x1 = bb1.x+bb1.width/2,
      y1 = bb1.y+bb1.height,
      x2 = bb2.x+bb2.width/2,
      y2 = bb2.y,
      path = ["M", x1, y1, "L", x2, y2];
  if (line && line.line) {
    line.bg && line.bg.attr({path: path});
    line.line.attr({path: path});
  } else {
    return {
      bg: bg && bg.split && this.path(path).attr({stroke: bg.split("|")[0], fill: "none", "stroke-width": bg.split("|")[1] || 3}),
      line: this.path(path).attr({stroke: "#000", fill: "none"}),
      from: obj1,
      to: obj2
    };
  }
};
var conn_str = function (obj1, obj2)
{
  return obj1["id_"]+"-"+obj2["id_"];
}
var make_conn = function(obj1, obj2)
{
  connections[conn_str(obj1,obj2)] = r.connection(obj1, obj2);
},
rm_conn = function(id1, id2)
{
  var b = false;
  for (var i=0; i<source.length; i++) {
    for (var j=0; j<target_shapes.length; j++) {
      if (i==id1 && target_shapes[j]["id_"]==id2) {
        var key = id1+"-"+id2;
        var q = connections[key];
        q.line.remove();
        delete connections[key];
        b = true;
        break;
      }
    }
    if (b)
      break;
  }
}
make_conns_from_a = function (align)
{
  var offset = source.length-1;
  for (var i=0; i < align.length; i++) {
    make_conn(shapes[i], shapes[offset+align[i]+1]);
  }
}

/*
 * drag'n drop
 *
 */
var dragger = function ()
{
  if (edit_mode) return;
  curDrag = this;
  old_pos = curDrag["grid_"];
  if (this.type == "text")
    curDrag = this.pair;
  curDrag.toFront();
  // remember original coords
  this.ox = this.attr("x");
  this.oy = this.attr("y");
  this.pair.ox = this.pair.attr("x");
  this.pair.oy = this.pair.attr("y");
  if (this.type != "text")
    this.animate({ "fill-opacity": .2 }, 500);
  if (this.pair.type != "text")
    this.pair.animate({ "fill-opacity": .2 }, 500);
},
move = function (dx, dy)
{
  if (edit_mode) return;
  var att = { x: this.ox + dx, y: this.oy };
  this.attr(att);
  att = { x: this.pair.ox + dx, y: this.pair.oy };
  this.pair.attr(att);
  for (key in connections) {
    r.connection(connections[key]);
  }
  r.safari();
};

/*
 * snap-to-grid
 *
 */
var collide = function collide(obj)
{
  if (!obj["id_"])
    return;
  debug();
  if (obj.type != 'rect') {
    return;
  }
  if (obj["rm_shape"]) {
    curDrag["delete_me_"] = true;
    return;
  }
  if (curDrag["grid_tmp_"] > obj["grid_tmp_"]) { // right -> left
    /*if (curDrag.getBBox().width < obj.getBBox().width &&
        curDrag.getBBox().x > (obj.getBBox().x+obj.getBBox().width/3)) {
      return;
    }*/
    att = { x: obj.attr("x")+curDrag.getBBox().width+(margin-2*padding) };
    obj.attr(att);
    att = { x: obj.pair.attr("x")+curDrag.getBBox().width+(margin-2*padding) };
    obj.pair.attr(att);
  } else { // left -> right
    /*if (curDrag.getBBox().width < obj.getBBox().width &&
        curDrag.getBBox().x < (obj.getBBox().x+obj.getBBox().width/3)) {
      return;
    }*/
    att = { x: obj.attr("x")-(curDrag.getBBox().width+(margin-2*padding)) };
    obj.attr(att);
    att = { x: obj.pair.attr("x")-(curDrag.getBBox().width+(margin-2*padding)) };
    obj.pair.attr(att);
  }
  // switch grid pos
  new_pos = obj["grid_tmp_"];
  var tmpx = curDrag["grid_tmp_"];
  curDrag["grid_tmp_"] = obj["grid_tmp_"];
  obj["grid_tmp_"] = tmpx;
  //snap_to_grid(true,true);
},
debug = function () {
  var s = "";
  for (var i=0; i<target_shapes.length; i++) {
    s+= target_shapes[i]["id_"] + " " ;
  }
  document.getElementById("debug").innerHTML = s;
}
debug1 = function () {
  var s = "";
  for (var i=0; i<target_shapes.length; i++) {
    s+= target_shapes[i]["id_"] + "(" + target_shapes[i]["grid_"]+") " ;
  }
  document.getElementById("debug").innerHTML = s;
  document.getElementById("debug").innerHTML += " new:"+new_pos + " old:"+old_pos;
}
debug2 = function () {
  var s = "";
  for (var i=0; i<target_shapes.length; i++) {
    s+= target_shapes[i]["grid_tmp_"] + " " ;
  }
  document.getElementById("debug").innerHTML = s;
}
up = function () {
  debug();
  if (this["delete_me_"]) {
    var del = shapes_by_id[this["id_"]];
    for (key in connections) {
      if (key.split("-")[1] == curDrag["id_"]) {
        rm_conn(key.split("-")[0], key.split("-")[1]);
      }
    }
    var i=source.length;
    for (; i<shapes.length; i++) {
      if (shapes[i] == this) {
        break;
      }
    }
    shapes.splice(i, 1);
    for (var i=0; i<target_shapes.length; i++) {
      if (target_shapes[i] == this) {
        break;
      }
    }
    target_shapes.splice(i, 1);
    delete shapes_by_id[this["id_"]];
    del.pair.remove();
    del.remove();
    snap_to_grid(true);

    return;
  }
  if (this.type != "text")
    this.animate({"fill-opacity": 0}, 500);
  if (this.pair.type != "text")
    this.pair.animate({"fill-opacity": 0}, 500);

  snap_to_grid(true);
},
snap_to_grid = function (anim=false,drag=false)
{
  // just x coord, y is fixed in drag
  var d = xbegin;
  var d2 = 0;
  var b = false;
  // just target objs
  target_shapes.sort(function(a, b) {
    return a["grid_"]-b["grid_"];
  });
  /*for (var i=0; i < target_shapes.length; i++) {
    if (target_shapes[i]["id_"] == curDrag["id_"]) {
      b = true;
      target_shapes[i]["grid_"] = new_pos;
      continue;
    }
    if (b && (new_pos>old_pos)) {
      target_shapes[i]["grid_"] += 1;
    } else if (b && new_pos<old_pos) {
      target_shapes[i]["grid_"] -= 1;
    }
  }*/
  if (new_pos == old_pos)
    return;
  curDrag["grid_"] = new_pos;
  cur_id = curDrag["id_"];
  if (new_pos > old_pos) {
    for (var i=0; i < target_shapes.length; i++) {
      pos = target_shapes[i]["grid_"];
      id = target_shapes[i]["id_"];
      if (id == cur_id)
        continue;
      if (pos >= old_pos && pos <= new_pos) {
        target_shapes[i]["grid_"] -= 1;
      } else {
        continue;
      }
    }
  } else if (new_pos < old_pos) {
    for (var i=0; i < target_shapes.length; i++) {
      pos = target_shapes[i]["grid_"];
      id = target_shapes[i]["id_"];
      if (id == cur_id)
        continue;
      if (pos >= new_pos && pos <= old_pos) {
        target_shapes[i]["grid_"] += 1;
      } else {
        continue;
      }
    }
  }
  debug1();
  target_shapes.sort(function(a, b) {
    return a["grid_"]-b["grid_"];
  });
  for (var i = 0; i < target_shapes.length; i++) {
    var obj = target_shapes[i];
    if (!obj || !obj.attrs) { // removed
      return;
    }
    att = { x:d };
    if (anim) {
      obj.attr(att);
    } else {
      obj.attr(att);
    }
    att = { x: obj.getBBox().x+padding };
    if (anim) {
      obj.pair.animate(att,125);
    } else {
      obj.pair.attr(att);
    }
    d += obj.getBBox().width+(margin-2*padding);
  }
  for (key in connections) {
    r.connection(connections[key]);
  }
};

/*
 * objs
 *
 */
var make_obj = function(x, text, type)
{
  var y;
  if (type == "source") {
    y = ysource;
  } else if (type == "target") {
    y = ytarget;
  }
  // make text obj
  texts.push(r.text(x, y+(box_height/2), text).attr(text_att));
  // make shape obj
  var x_shape = texts[texts.length-1].getBBox().x-padding,
      x_width = texts[texts.length-1].getBBox().width+(2*padding);
  shapes.push(r.rect(x_shape, y, x_width, box_height, 5).attr(shape_att));
  tx = texts[texts.length-1];
  sh = shapes[shapes.length-1];
  // fix z-index
  tx.toBack();
  sh.toFront();
  // pair text/shape
  tx.pair = shapes[shapes.length-1];
  sh.pair = texts[texts.length-1];
  // meta
  sh["type_"] = type;
  sh["id_"] = id;
  shapes_by_id[id] = sh;
  if (type == "target") {
    sh.drag(move, dragger, up).onDragOver( function(obj) { collide(obj); })
    sh.attr({ cursor: "move" });
    tx.drag(move, dragger, up);
    sh["grid_"] = id;
    sh["grid_tmp_"] = id;
    sh.click(function() {
      if (connect_mode) {
        if (connections[conn_str(connect_mode_shape,this)]) {
          rm_conn(connect_mode_shape["id_"], this["id_"]);
        } else {
          make_conn(connect_mode_shape, this);
        }
        connect_mode_shape.attr({"fill-opacity": 0});
        connect_mode = false;
        connect_mode_shape = null;
      }
    });
    target_shapes.push(sh);
    // inline text editing
    r.inlineTextEditing(tx);
    sh.dblclick(function(){
      if (edit_mode) return;
      edit_mode = true;
      this.pair.toFront();
      curEd = this.pair;
      curEdShape = this;
      var input = curEd.inlineTextEditing.startEditing();
      input.addEventListener("keypress", function(e) {
        if (e.keyCode==27||e.keyCode==37||e.keyCode==38||e.keyCode==39||e.keyCode==40) { // esc, arrows, backspace
          return;
        } else if (e.keyCode == 8) { // backspace
          curEdShape.animate({width:curEdShape.getBBox().width-font_width},125);
          setTimeout(function(){snap_to_grid(true);},125);
        } else if (e.keyCode == 13) { // enter
          e.preventDefault();
          curEd.inlineTextEditing.stopEditing();
          curEdShape.toFront();
          curEd.toBack();
          curEdShape.animate({width:curEd.getBBox().width+(margin-padding)},125);
          setTimeout(function(){snap_to_grid(true);},125);
          edit_mode = false;
        } else {
          curEdShape.animate({width:(this.value.length*font_width)+2*font_width+2*padding},25);
          setTimeout(function(){
            snap_to_grid(true);
            r.setSize(r.width+font_width, r.height);
          },25);
        }
      });
      input.addEventListener("blur", function(e) {
          curEd.inlineTextEditing.stopEditing();
          curEdShape.toFront();
          curEd.toBack();
          curEdShape.animate({width:curEd.getBBox().width+(margin-padding)},125);
          setTimeout(function(){snap_to_grid(true);},125);
          edit_mode = false;
      }, true);
    });
  } else if (type == "source") {
    sh.click(function() {
      if (connect_mode) {
        if (this != connect_mode_shape)
          return;
        this.animate({"fill-opacity": 0}, 250);
        connect_mode = false;
        connect_mode_shape = null;
      } else {
        this.animate({"fill-opacity": .5}, 250);
        connect_mode = true;
        connect_mode_shape = this;
      }
    });
  }
  id++;
},
add_obj = function()
{
  var max=0, max_idx=-1;
  for (var i=0; i < shapes.length; i++) {
    if (shapes[i]["grid_"] > max) {
      max_idx = i;
      max = shapes[i]["grid_"];
    }
  }
  if (!shapes[max_idx]) {
    make_obj(xbegin+padding, "X", "target", 0);
  } else {
    make_obj(shapes[max_idx].getBBox().x2+(margin-padding),
             "NEW",
             "target",
             max+1);
  }
  r.setSize(r.width+target_shapes[target_shapes.length-1].getBBox().width+margin, r.height);

  snap_to_grid(true);
},
make_objs = function (a, type)
{
  for (var i=0; i < a.length; i++) {
    var x = 0;
    if (i == 0) {
      x = xbegin+padding;
    } else {
      x = margin+texts[texts.length-1].getBBox().x2;
    }
    make_obj(x, a[i], type);
  }
};

/*
 * data
 *
 */
var extract_data = function ()
{
  el = document.getElementById("data");
  d = {};
  d["source"] = [];
  d["target"] = [];
  d["align"] = [];
  // target
  var ids = [];
  target_shapes.sort(function(a, b) {
    return a["grid_"]-b["grid_"];
  });
  for (var i=0; i<target_shapes.length; i++) {
    d["target"].push(target_shapes[i].pair.attr("text"));
    ids.push(target_shapes[i]["id_"]);
  }
  // alignment
  for (key in connections) {
    var a = key.split('-');
    var src = a[0], tgt = ids.indexOf(parseInt(a[1]));
    d["align"].push(src+'-'+tgt);
  }
  // source
  for (var i=0; i<shapes.length; i++) {
    if (shapes[i]["type_"] == "source") {
      d["source"].push(shapes[i].pair.attr("text"));
    } else {
      break;
    }
  }
  // output
  s = JSON.stringify(d);
  el.innerHTML = s;

  return s;
}


///////////////////////////////////////////////////////////////////////////////

var init = function ()
{
  // canvas
  r = Raphael("holder",0,0);
  var c = 0,
      d = 0,
      a = null;
  for (var i=0; i<source.length; i++) {
    c += source[i].length;
  }
  for (var i=0; i<target.length; i++) {
    d += target[i].length;
  }
  font_width = r.text(-100,-100,'m').getBBox().width;
  var paper_width  = xbegin+(Math.max(source.length,target.length)*(margin+padding))
                      +(Math.max(c,d)*font_width),
      paper_height = ybegin+2*box_height+line_margin;
  r.setSize(paper_width, paper_height);
  rm_shape = r.rect(5, line_margin+ybegin, 50, box_height).attr({"fill":"#fff","stroke":0}).animate({"fill":"red"}, 2000);
  rm_shape.toBack();
  rm_shape["rm_shape"] = true;
  // source objs
  make_objs(source, "source");
  // target objs
  make_objs(target, "target");
  // initial connections from alignment
  make_conns_from_a(align);
},
reset = function()
{
  shapes_by_id = {};
  curDrag = null;
  curEd = null;
  curEdShape = null;
  shapes = [];
  target_shapes = [];
  texts = [];
  connections = {};
  margin = 30;
  padding = margin/3;
  xbegin = 80;
  ybegin = 5;
  box_height = 50;
  line_margin = 150;
  ysource = ybegin;
  ytarget = ysource+line_margin;
  font_size = 20;
  font_width = -1;
  id = 0;
  connect_mode = false;
  connect_mode_shape = null;
  edit_mode = false;
  rm_shape = null;

  document.getElementById("holder").parentElement.removeChild(document.getElementById("holder"));
  var new_holder = document.createElement("div");
  new_holder.setAttribute("id","holder");
  document.getElementById("wrapper").appendChild(new_holder);

  init();
};

window.onload = function ()
{
  init();
};