var paper;
var drawList = new Array();

function init() {
    $(window).bind('resize', function() {
        centerContainerVertically();
    });
    centerContainerVertically();
/*
    paper = Raphael("canvas", 220, 400);
    var i = 0;
    while (i < drawList.length) {
        var c = drawList[i];
        drawConnection(paper, c.x0, c.y0, c.x1, c.y1);
        i = i + 1;
    }
*/
}

function centerContainerVertically() {
    var elt = $("#container");
    var top = ( $(window).height() - elt.height() - 50 ) / 2+$(window).scrollTop();
    if (top < 10) {
        top = 10;
    }
    elt.css("margin-top", top + "px");
    elt.css("display", "block");
}

function setAttr(lines) {
    var i;
    for (i=0; i < lines.length; i++) {
        lines[i].attr("stroke", "#aaa");
        lines[i].attr("stroke-linejoin", "miter");
        lines[i].attr("stroke-width", "1");
    }
}

function drawLine(paper, x0, y0, x1, y1) {
    return paper.path("M" + (x0+0.5) + " " + (y0+0.5) + "L" + (x1+0.5) + " " + (y1+0.5));
}

function drawConnection(paper, x0, y0, x1, y1) {
    var lines = new Array();
    lines[lines.length] = drawLine(paper, x0, y0, x0, y1);
    lines[lines.length] = drawLine(paper, x0, y1, x1, y1);
    setAttr(lines);
}

function drawMenuConnection(from, to) {
    var eltFrom = $(from);
    var eltTo = $(to);
    var x0 = eltFrom.position().left + eltFrom.outerWidth() - 10;
    var y0 = eltFrom.position().top + eltFrom.outerHeight() + 6;
    var x1 = x0; //eltTo.position().left + eltTo.outerWidth() + 25;
    var y1 = eltTo.position().top + eltTo.outerHeight() + 10; // / 2 + 5;
    var c = new Object();
    c.x0 = x0;
    c.y0 = y0;
    c.x1 = x1;
    c.y1 = y1;
    drawList[drawList.length] = c;
}