/**********************************
 GLOBAL VARIABLES
 ***********************************/

// miscellaneous globals
var widgetWidth = "20";
var widgetHeight = "16";
var currState = "";
var displayTarget = "_self";

var json;

/**********************************
 DATA COLLECTIONS
 ***********************************/
var expansionState = "";
// constructor for outline item objects
function outlineItem(text, uri) {
    this.text = text;
    this.uri = uri;
}


/**********************************
 TOGGLE DISPLAY AND ICONS
 ***********************************/
// invert item state (expanded to/from collapsed)
function swapState(currState, currVal, n) {
    var newState = currState.substring(0, n);
    newState += currVal ^ 1 // Bitwise XOR item n;
    newState += currState.substring(n + 1, currState.length);
    return newState;
}

// retrieve matching version of 'minus' images
function getExpandedWidgetState(imgURL) {
    if (imgURL.indexOf("Start") != -1) {
        return expandedWidgetStart.src;
    }
    if (imgURL.indexOf("End") != -1) {
        return expandedWidgetEnd.src;
    }
    return expandedWidget.src;
}

// retrieve matching version of 'plus' images
function getCollapsedWidgetState(imgURL) {
    if (imgURL.indexOf("Start") != -1) {
        return collapsedWidgetStart.src;
    }
    if (imgURL.indexOf("End") != -1) {
        return collapsedWidgetEnd.src;
    }
    return collapsedWidget.src;
}

// toggle an outline mother entry, storing new state value;
// invoked by onclick event handlers of widget image elements
function toggle(img, blockNum) {
    //alert(img.id + ", " + blockNum);
    var newString = "";
    var expanded, n;
    // modify state string based on parameters from IMG
    expanded = currState.charAt(blockNum);
    currState = swapState(currState, expanded, blockNum);
    // dynamically change display style
    if (expanded == "0") {
        document.getElementById("OLBlock" + blockNum).style.display = "block";
        img.src = getExpandedWidgetState(img.src);
    } else {
        if (document.getElementById("OLBlock" + blockNum) != null) {
            document.getElementById("OLBlock" + blockNum).style.display = "none";
            img.src = getCollapsedWidgetState(img.src);
        }
    }
}

function initNavPane(vis) {
    json = eval("(" + jsonPlainData + ")");

    initExpMenu();

    var tpArray = eval("(" + togglePointsPlainData + ")");
    //alert("tpArray: " + tpArray[0]['imageId']);

    var togglePoints = new Array();
    for (var i = 0; i < tpArray.length; i++) {
        var tpObj = {
            "img": document.getElementById(tpArray[i]['imageId']),
            "blockNum": tpArray[i]['blockNum']
        };

        togglePoints.push(tpObj);
    }


    if (vis != null && vis == "true") {
        document.getElementById("navpane").style.display = "block";
    } else if (vis != null && vis == "false") {
        document.getElementById("navpane").style.display = "none";
    }

    navigate(togglePoints);

}

function navigate(togglePoints) {
    //alert("togglePoints: " + togglePoints[0]['img']);
    for (var i = 0; i < togglePoints.length; i++) {
        var tp = togglePoints[i];
        toggle(tp['img'], tp['blockNum']);
    }
}

function initNavPaneNew(isVisible) {
    //alert("pathname: " + document.location.pathname + "\nhost: " + document.location.host);

    json = eval("(" + jsonPlainData + ")");

    if (isVisible != null && isVisible == "true") {
        buildTree(0, json['childNodes'][0]);
    }

}

function expandAll() {
    var newState = "";
    while (newState.length < currState.length) {
        newState += "1";
    }
    currState = newState;
    initExpand();
}

function collapseAll() {
    var newState = "";
    while (newState.length < currState.length) {
        newState += "0";
    }
    currState = newState;
    initExpand();
}

/*********************************
 OUTLINE HTML GENERATION
 **********************************/
// apply default expansion state from outline's header
// info to the expanded state for one element to help
// initialize currState variable
function calcBlockState(n) {
    // get default expansionState data
    var expandedData = (expansionState.length > 0) ? expansionState.split(",") : null;
    if (expandedData) {
        for (var j = 0; j < expandedData.length; j++) {
            if (n == expandedData[j] - 1) {
                return "1";
            }
        }
    }
    return "0";
}

// counters for reflexive calls to drawOutline()
var currID = 0;
var blockID = 0;
// generate HTML for outline
function drawOutline(ol, prefix) {
    var output = "";
    var nestCount, link, nestPrefix, lastInnerNode;
    prefix = (prefix) ? prefix : "";
    for (var i = 0; i < ol.childNodes.length; i++) {
        blockID = ol.childNodes[i]['item']['blockNumber'];
        nestCount = (ol.childNodes[i].childNodes) ? ol.childNodes[i].childNodes.length : 0;
        output += "<div class='OLRow' id='line" + currID++ + "'>\n";
        if (nestCount > 0) {
            output += prefix;
            //output += "<img id='widget" + (currID - 1) + "' src='" + ((i == ol.childNodes.length - 1 && blockID != 0) ? collapsedWidgetEnd.src : (blockID == 0) ? collapsedWidgetStart.src : collapsedWidget.src);
            output += "<img id='" + ol.childNodes[i]['item']['widgetId'] + "' src='" + ((i == ol.childNodes.length - 1 && blockID != 0) ? collapsedWidgetEnd.src : (blockID == 0) ? collapsedWidgetStart.src : collapsedWidget.src);
            output += "' height=" + widgetHeight + " width=" + widgetWidth;
            output += " title='Click to expand/collapse nested items.' onClick='toggle(this," + blockID + ")'>&nbsp;";
            //link = (ol.childNodes[i].item.uri) ? ol.childNodes[i].item.uri : "";
            link = (ol.childNodes[i].item.uri) ? formatUrl(ol.childNodes[i].item.uri) : "";
            if (link) {
                output += "<a href='" + link + "' class='itemTitle' title='" +
                          link + "' target='" + displayTarget + "'>";
            } else {
                output += "<a class='itemTitle' title='" + link + "'>";
            }
            output += "<span style='position:relative; top:-3px; height:11px'>" + ol.childNodes[i].item.text + "</span></a>";
            currState += calcBlockState(currID - 1);
            //output += "<span class='OLBlock' blocknum='" + blockID + "' id='OLBlock" + blockID++ + "'>";
            output += "<span class='OLBlock' blocknum='" + blockID + "' id='OLBlock" + blockID + "'>";
            nestPrefix = prefix;
            nestPrefix += (i == ol.childNodes.length - 1) ?
                          "<img src='" + emptySpace.src + "' height=" + widgetHeight + " width=" + widgetWidth + ">" :
                          "<img src='" + chainSpace.src + "' height=" + widgetHeight + " width=" + widgetWidth + ">"
            output += drawOutline(ol.childNodes[i], nestPrefix);
            output += "</span></div>\n";
        } else {
            output += prefix;
            //output += "<img id='widget" + (currID - 1) + "' src='" + ((i == ol.childNodes.length - 1) ? nodeWidgetEnd.src : nodeWidget.src);
            output += "<img id='" + ol.childNodes[i]['item']['widgetId'] + "' src='" + ((i == ol.childNodes.length - 1) ? nodeWidgetEnd.src : nodeWidget.src);
            output += "' height=" + widgetHeight + " width=" + widgetWidth + ">";
            //link = (ol.childNodes[i].item.uri) ? ol.childNodes[i].item.uri : "";
            link = (ol.childNodes[i].item.uri) ? formatUrl(ol.childNodes[i].item.uri) : "";
            if (link) {
                output += "&nbsp;<a href='" + link + "' class='itemTitle' title='" +
                          link + "' target='" + displayTarget + "'>";
            } else {
                output += "&nbsp;<a class='itemTitle' title='" + link + "'>";
            }
            output += "<span style='position:relative; top:-3px; height:11px'>" + ol.childNodes[i].item.text + "</span></a>";
            output += "</div>\n";
        }
    }
    return output;
}


function buildTree(i, menuItem) {
    var href = formatUrl(menuItem['item']['uri']);

    var paddingLeft = i * 10;
    var out = "<span style='padding-left:" + paddingLeft + "px;'><a href='";
    out += href + "'>" + menuItem['item']['text'] + "<a/></span><br>";

    document.getElementById("navpane").innerHTML += out;
    if (menuItem['childNodes'] != null && menuItem['childNodes'].length > 0) {
        var currentIndent = i + 1;
        for (var j = 0; j < menuItem['childNodes'].length; j++) {
            buildTree(currentIndent, menuItem['childNodes'][j]);
        }
    }

}

function createIndent(deep) {
    var out = "";
    for (var i = 0; i < deep; i++) {
        out += "&nbsp;&nbsp;"
    }

    return out;

}

function formatUrl(pathInfo) {
    var urlParts = document.location.pathname.substring(1).split("/", 2);
    var url = document.location.protocol + "//" + document.location.host;
    if (!mapping) {
        mapping = urlParts[1];
    }
    url += "/" + urlParts[0] + "/" + mapping + "/" + pathInfo;

    return url;
}

/*********************************
 OUTLINE INITIALIZATIONS
 **********************************/
// expand items set in expansionState var, if any
function initExpand() {
    for (var i = 0; i < currState.length; i++) {
        if (document.getElementById("OLBlock" + i) != null) {
            if (currState.charAt(i) == 1) {
                document.getElementById("OLBlock" + i).style.display = "block";
            } else {
                document.getElementById("OLBlock" + i).style.display = "none";
            }
        }
    }
}

// initialize first time -- invoked onload
function initExpMenu(xFile) {
    // wrap whole outline HTML in a span
    var olHTML = "<span id='renderedOL'>" + drawOutline(json) + "</span>";
    // throw HTML into 'content' div for display
    document.getElementById("navpane").innerHTML = olHTML;
    initExpand();
}