/*
    功能：
        实现分割条功能，用于调节左右两个窗格的宽度。

    用法：
        在 body 的 onload 中调用 spInit() 即可，其中
            leftPane, splitterHandle, rightPane -
                是三个 DIV 对象，它们应各自存在于一个 TD 对象中，而这三个 TD 应在同一个 TR 中。
            totalWidth - 两个窗格的总宽度
            leftWidth - 左窗格的宽度

    注意：
        leftPane 和 rightPane 要在 style 中设置 overflow-x 为 scroll/hidden/auto，不能是 visible
*/

var spTotalWidth = 700;
var spLeftWidth = 200;
var spOldLeftWidth = 200;
var spDefFactor = 0.3;

var spLeftPane, spLeftPaneTD;
var spHandle, spHandleTD;
var spRightPane, spRightPaneTD;

var spResizeFunc = null;

function spInit(leftPane, splitterHandle, rightPane, totalWidth, leftWidth) {
    spLeftPane  = leftPane;       spLeftPaneTD  = spGetAncestorOfTag(spLeftPane, "TD");
    spHandle    = splitterHandle; spHandleTD    = spGetAncestorOfTag(spHandle,   "TD");
    spRightPane = rightPane;      spRightPaneTD = spGetAncestorOfTag(spRightPane,"TD");

    spTotalWidth = totalWidth;
    spLeftWidth = leftWidth;
    spOldLeftWidth = leftWidth;
    spDefFactor = leftWidth / totalWidth;

    spReposition();

    spLeftPaneTD.style.layoutGrid = "none";
    spLeftPaneTD.style.padding = "0";
    spRightPaneTD.style.layoutGrid = "none";
    spRightPaneTD.style.padding = "0";

    spHandleTD.onmousedown = spDragBegin;
    spHandleTD.onmousemove = spDragMove;
    spHandleTD.onmouseup   = spDragEnd;
    spHandleTD.style.cursor = "E-resize";
    spHandleTD.style.layoutGrid = "none";
    spHandleTD.style.padding = "0";

    spHandle.onclick = spJump;
    spHandle.onmouseenter = new Function("this.style.backgroundColor='yellow'");
    spHandle.onmouseleave = new Function("this.style.backgroundColor='transparent'");
    spHandle.style.cursor = "hand";
}

function spRegResizeFunc(resizeFunc) {
    spResizeFunc = resizeFunc;
    spReposition();
}

function spGetAncestorOfTag(from, tag) {
    while (from != null) {
        if (from.tagName == tag) return from;
        from = from.parentNode;
    }
    return null;
}

function spJump() {
    if (spLeftWidth == 0) {
        if (spOldLeftWidth == 0) spOldLeftWidth = spTotalWidth * spDefFactor;
        spLeftWidth = spOldLeftWidth;
    } else {
        spOldLeftWidth = spLeftWidth;
        spLeftWidth = 0;
    }
    spReposition();
}

function spReposition() {
    spLeftPaneTD.style.width  = spLeftWidth;
    spLeftPane.style.width    = spLeftWidth;
    spRightPaneTD.style.width = spTotalWidth - spLeftWidth;
    spRightPane.style.width   = spTotalWidth - spLeftWidth;
    if (spLeftWidth == 0)
        spHandle.innerHTML = "&gt;<br>&gt;<br>&gt;";
    else
        spHandle.innerHTML = "&lt;<br>&lt;<br>&lt;";

    if (typeof(spResizeFunc) == "function") spResizeFunc(spLeftWidth, spTotalWidth - spLeftWidth);
}

var spDragging = false;
var spBeginMouseX;
var spCurBarX;

function spDragBegin() {
    if (event.srcElement != spHandleTD) return;
    spDragging = true;
    spBeginMouseX = event.clientX;
    spCurBarX = spLeftWidth;
    event.srcElement.setCapture();
}

function spDragMove(){
    if (event.button==1 && spDragging) {
        var nDeltaX = event.clientX - spBeginMouseX;
        spCurBarX += nDeltaX;
        spLeftWidth = spCurBarX;
        if (spLeftWidth < 0) spLeftWidth = 0;
        if (spLeftWidth > spTotalWidth) spLeftWidth = spTotalWidth;
        spOldLeftWidth = spLeftWidth;
        spBeginMouseX = event.clientX;

        spReposition();
        return false;
    } else {
        spDragEnd();
    }
}

function spDragEnd() {
    spDragging = false;
    event.srcElement.releaseCapture();
}
