function get_X(obj){
    var ParentObj = obj;
    var left = obj.offsetLeft;
    while (ParentObj = ParentObj.offsetParent) {
        left += ParentObj.offsetLeft;
    }
    return left;
}

function get_Y(obj){
    var ParentObj = obj;
    var top = obj.offsetTop;
    while (ParentObj = ParentObj.offsetParent) {
        top += ParentObj.offsetTop;
    }
    return top;
}

/**
 * 根据矩形任意对角的两点得到矩形的x,y,h,w参数
 * @param {Object} xa
 * @param {Object} ya
 * @param {Object} xb
 * @param {Object} yb
 */
function getRectFromDiagonal(xa, ya, xb, yb){
    return {
        xa: xa,
        ya: ya,
        xb: xb,
        yb: yb,
        x: Math.min(xa, xb),
        y: Math.min(ya, yb),
        w: Math.abs(xa - xb),
        h: Math.abs(ya - yb)
    };
}

/**
 * 连接两个层
 * @param {Object} div1
 * @param {Object} div2
 */
function ConnectX(div1, div2){

    var x1 = get_X(div1);
    var x2 = get_X(div2);
    var y1 = get_Y(div1);
    var y2 = get_Y(div2);
    var w1 = div1.offsetWidth;
    var w2 = div2.offsetWidth;
    var h1 = div1.offsetHeight;
    var h2 = div2.offsetHeight;
    var rect = getRectFromDiagonal((x1 + w1 / 2), (y1 + h1 / 2), (x2 + w2 / 2), (y2 + h2 / 2));
    var tmpw = rect.w / 2;//优化效率用的临时变量
    var rectA = {
        x: rect.x,
        y: rect.y,
        h: rect.h,
        w: tmpw
    };
    var rectB = {
        x: rect.x + tmpw,
        y: rect.y,
        h: rect.h,
        w: tmpw
    };
    
    $("#lines").append("<div id='conn_" + div1.id + "_to_" + div2.id + "_a' class='connector'></div>");
    $("#lines").append("<div id='conn_" + div1.id + "_to_" + div2.id + "_b' class='connector'></div>");
    
    if ((rect.xa < rect.xb && rect.ya < rect.yb) || rect.xa > rect.xb && rect.ya > rect.yb) {
        $("#conn_" + div1.id + "_to_" + div2.id + "_a").css({
            "left": rectA.x,
            "top": rectA.y,
            "width": rectA.w,
            "height": rectA.h,
            "border-width": "2px 2px 0px 0px"
        });
        $("#conn_" + div1.id + "_to_" + div2.id + "_b").css({
            "left": rectB.x,
            "top": rectB.y,
            "width": rectB.w,
            "height": rectB.h,
            "border-width": "0px 0px 2px 0px"
        });
        
    }
    else {
        $("#conn_" + div1.id + "_to_" + div2.id + "_a").css({
            "left": rectA.x,
            "top": rectA.y,
            "width": rectA.w,
            "height": rectA.h,
            "border-width": "0px 2px 2px 0px"
        });
        $("#conn_" + div1.id + "_to_" + div2.id + "_b").css({
            "left": rectB.x,
            "top": rectB.y,
            "width": rectB.w,
            "height": rectB.h,
            "border-width": "2px 0px 0px 0px"
        });
        
    }
}

/**
 * 连接两个层
 * @param {Object} div1
 * @param {Object} div2
 */
function ConnectY(div1, div2){
    var x1 = get_X(div1);
    var x2 = get_X(div2);
    var y1 = get_Y(div1);
    var y2 = get_Y(div2);
    var w1 = div1.offsetWidth;
    var w2 = div2.offsetWidth;
    var h1 = div1.offsetHeight;
    var h2 = div2.offsetHeight;
    var rect = getRectFromDiagonal((x1 + w1 / 2), (y1 + h1 / 2), (x2 + w2 / 2), (y2 + h2 / 2));
    var tmph = rect.h / 2;//优化效率用的临时变量
    var rectA = {
        x: rect.x,
        y: rect.y,
        h: tmph,
        w: rect.w
    };
    var rectB = {
        x: rect.x,
        y: rect.y + tmph,
        h: tmph,
        w: rect.w
    };
    
    $("#lines").append("<div id='conn_" + div1.id + "_to_" + div2.id + "_a' class='connector'></div>");
    $("#lines").append("<div id='conn_" + div1.id + "_to_" + div2.id + "_b' class='connector'></div>");
    
    if ((rect.xa < rect.xb && rect.ya < rect.yb) || rect.xa > rect.xb && rect.ya > rect.yb) {
        $("#conn_" + div1.id + "_to_" + div2.id + "_a").css({
            "left": rectA.x,
            "top": rectA.y,
            "width": rectA.w,
            "height": rectA.h,
            "border-width": "0px 0px 2px 2px"
        });
        $("#conn_" + div1.id + "_to_" + div2.id + "_b").css({
            "left": rectB.x,
            "top": rectB.y,
            "width": rectB.w,
            "height": rectB.h,
            "border-width": "0px 2px 0px 0px"
        });
    }
    else {
        $("#conn_" + div1.id + "_to_" + div2.id + "_a").css({
            "left": rectA.x,
            "top": rectA.y,
            "width": rectA.w,
            "height": rectA.h,
            "border-width": "0px 2px 2px 0px"
        });
        $("#conn_" + div1.id + "_to_" + div2.id + "_b").css({
            "left": rectB.x,
            "top": rectB.y,
            "width": rectB.w,
            "height": rectB.h,
            "border-width": "0px 0px 0px 2px"
        });
    }
}