// Global settings
var elementHeight = 20;
var elementWidth  = 100;
var braceWidth    = 4;
var vSpacing      = 4;
var fontSize      = 11;
var fontColor     = "black";
var font          = "Arial";

var imageNames = new Object();

imageNames.Node        = "images/node.gif";
imageNames.pNode       = "images/pnode.gif";
imageNames.mNode       = "images/mnode.gif";
imageNames.firstNode   = "images/firstnode.gif";
imageNames.pfirstNode  = "images/pfirstnode.gif";
imageNames.mfirstNode  = "images/mfirstnode.gif";
imageNames.lastNode    = "images/lastnode.gif";
imageNames.plastNode   = "images/plastnode.gif";
imageNames.mlastNode   = "images/mlastnode.gif";
imageNames.singleNode  = "images/singlenode.gif";
imageNames.psingleNode = "images/psinglenode.gif";
imageNames.msingleNode = "images/msinglenode.gif";
imageNames.pstartNode  = "images/pstartnode.gif";
imageNames.mstartNode  = "images/mstartnode.gif";

imageNames.vertline    = "images/vertline.gif";
imageNames.leftBrace   = "images/leftbrace.gif";;
imageNames.rightBrace  = "images/rightbrace.gif";;
imageNames.background  = "images/bg.gif";;

function display(_tree, name)
{
    if (_tree[0] == name)
    {
        displayTree(_tree, "", "startNode");
        return true;
    }
    for (var i = 2; i < _tree.length; i++)
        if (display (_tree[i], name))
            return true;
    return false;
}

function displayTree(_tree, _branchNumber, _nodeType)
{
    document.write("<TABLE class=diagram CELLSPACING=0 CELLPADDING=0><TR><TD VALIGN=TOP>");
    document.write("<DIV id='line" + _branchNumber + "' style='height:" + (elementHeight + vSpacing) + "px; width:16px; overflow:hidden; cursor:hand; cursor:pointer;'><IMG ");
    if (_tree.length > 2)
        document.write("onClick=\"switchBranch('" + _branchNumber + "', ", + (_tree.length - 3) +");\"");
    document.write(" id='node" + _branchNumber + "' SRC='");
    switch (_nodeType)
    {
    case "firstNode":
        if (_tree.length == 2)
            document.write(imageNames.firstNode);
        else
            document.write(imageNames.pfirstNode);
        break;
    case "middleNode":
        if (_tree.length == 2)
            document.write(imageNames.Node);
        else
            document.write(imageNames.pNode);
        break;
    case "lastNode":
        if (_tree.length == 2)
            document.write(imageNames.lastNode);
        else
            document.write(imageNames.plastNode);
        break;            
    case "singleNode":
        if (_tree.length == 2)
            document.write(imageNames.singleNode);
        else
            document.write(imageNames.psingleNode);
        break;
    case "startNode":
        document.write(imageNames.pstartNode);
        break;
    }
    document.write("' BORDER=0>");
    if ((_nodeType != "lastNode") && (_nodeType != "singleNode") && (_nodeType != "startNode"))
        for (var i = 1; i < (countSubNodes(_tree)) * (elementHeight + vSpacing) / 22; i++)
            document.write("<IMG SRC='" + imageNames.vertline + "' BORDER=0>");
    document.write("</DIV><TD VALIGN=TOP><IMG SRC='" + imageNames.leftBrace + "' HEIGHT=" + elementHeight + " WIDTH=" + braceWidth + "><TD VALIGN=TOP>");
    document.write("<DIV onclick='document.location=\"" + _tree[1] + "\";'> ");
    document.write("<table class=diagram cellspacing='0' cellpadding='0'><tr><td align='center' valign='middle' style='width: " + elementWidth + "; height: " + elementHeight +
                   "; color: " + fontColor + "; font: " + fontSize + "px " + font +
                   "; text-align: center; cursor: pointer; cursor: hand; background-image:url(" + imageNames.background +"); overflow: hidden; -moz-user-select: none;'>");
    document.write(_tree[0]);
    document.write("</table></DIV><TD VALIGN=TOP><IMG SRC='" + imageNames.rightBrace + "' HEIGHT=" + elementHeight + " WIDTH=" + braceWidth + ">");

    if (_tree.length > 2)
    {
        document.write("<TD VALIGN=TOP><DIV STYLE='display:none;' id='branch" + _branchNumber + "'>");
        if (_tree.length == 3)
            displayTree(_tree[2], _branchNumber + ".1", "singleNode");
        else
        for (var i = 2; i < _tree.length; i++)
            if (i == 2)
                displayTree(_tree[i], _branchNumber + "." + (i - 1) , "firstNode");
            else if (i == _tree.length - 1)
                displayTree(_tree[i], _branchNumber + "." + (i - 1), "lastNode");
            else displayTree(_tree[i], _branchNumber + "." + (i - 1), "middleNode");
        document.write("</DIV>");
    };
    document.write("</TR></TABLE>");
}

function switchBranch(branch, nElements)
{
    var objBranch = document.getElementById("branch" + branch).style;
    var objNode = document.getElementById("node" + branch);
    if (objBranch.display == "block")
        closeBranch(branch);
    else
    {
        showBranch(branch);
        vLine(branch, nElements);
    }
}

function closeBranch(branch)
{
    var objBranch = document.getElementById("branch" + branch).style;
    var objNode = document.getElementById("node" + branch);
    var n = 1;

    while (document.getElementById("node" + branch + "." + n))
    {
        if (document.getElementById("branch" + branch + "." + n))
            if (document.getElementById("branch" + branch + "." + n).style.display == "block")
                closeBranch(branch + "." + n);
        n++;
    }
    vLine(branch, -(n - 2));
    objBranch.display = "none";
    objNode.src = objNode.src.replace(RegExp(imageNames.mNode, "gi"), imageNames.pNode);
    objNode.src = objNode.src.replace(RegExp(imageNames.mfirstNode, "gi"), imageNames.pfirstNode);
    objNode.src = objNode.src.replace(RegExp(imageNames.mlastNode, "gi"), imageNames.plastNode);
    objNode.src = objNode.src.replace(RegExp(imageNames.msingleNode, "gi"), imageNames.psingleNode);
    objNode.src = objNode.src.replace(RegExp(imageNames.mstartNode, "gi"), imageNames.pstartNode);
}

function showBranch(branch)
{
    var objBranch = document.getElementById("branch" + branch).style;
    var objNode = document.getElementById("node" + branch);
    objBranch.display = "block";
    objNode.src = objNode.src.replace(RegExp(imageNames.pNode, "gi"), imageNames.mNode);
    objNode.src = objNode.src.replace(RegExp(imageNames.pfirstNode, "gi"), imageNames.mfirstNode);
    objNode.src = objNode.src.replace(RegExp(imageNames.plastNode, "gi"), imageNames.mlastNode);
    objNode.src = objNode.src.replace(RegExp(imageNames.psingleNode, "gi"), imageNames.msingleNode);
    objNode.src = objNode.src.replace(RegExp(imageNames.pstartNode, "gi"), imageNames.mstartNode);
}

function countSubNodes(_tree)
{
    if (_tree.length == 2)
        return 1;
    var n = 0;
    for (var i = 2; i < _tree.length; i++)
        n += countSubNodes(_tree[i]);
    return n;
}

function vLine(branch, n)
{
    var objBranch = document.getElementById("branch" + branch).style;
    var parent = "line" + branch.replace(/\.\d+$/g, "");
    var vLineDiv = document.getElementById("line" + branch).style;
    var parent = branch.replace(/\.\d+$/g, "");
    if (objBranch.display != "block")
        n = -n;
    vLineDiv.height = parseInt(vLineDiv.height) + (elementHeight + vSpacing) * n;
    if (parent != branch)
        vLine(parent, n)
}