function InitSidebarNavigationStyles() {
    var divArray = document.getElementsByTagName("div");
    var mainDiv;

    //*** Table
    for (var i = 0; i < divArray.length; i++) {
        if (divArray[i].className == 'sidebar_navigation_webtreeview') {
            mainDiv = divArray[i];
            var tableArray = mainDiv.getElementsByTagName("table");
            for (var j = 0; j < tableArray.length; j++) {
                tableArray[j].className = "sidebar_navigation_webtreeview_table";
            }
            break;
        }
    }

    if (mainDiv != null) {
        //*** Rows
        var tableRowArray = mainDiv.getElementsByTagName("tr");
        for (var j = 0; j < tableRowArray.length; j++) {
            tableRowArray[j].onmouseover = onMouseOver;
            tableRowArray[j].onmouseout = onMouseOut;
            tableRowArray[j].className = "unhoverRow";
        }

        //*** Cells
        var tableRowArray = mainDiv.getElementsByTagName("tr");
        for (var j = 0; j < tableRowArray.length; j++) {
            var tableCellsArray = tableRowArray[j].getElementsByTagName("td");
            for (var k = 0; k < tableCellsArray.length - 1; k++) {
                if (k == 0) {
                    tableCellsArray[k].className = "sidebar_navigation_webtreeview_cell1 sidebar_navigation_webtreeview_cell";
                }
                else {
                    tableCellsArray[k].className = "sidebar_navigation_webtreeview_cell";
                }
            }
            tableCellsArray[tableCellsArray.length - 1].className = "sidebar_navigation_webtreeview_cell2";
        }

        //*** Links
        var linksArray = mainDiv.getElementsByTagName("a");
        for (var j = 0; j < linksArray.length; j++) {
            if (linksArray[j].className.indexOf("sidebar_navigation_selected_treenode") > -1) {
                var element = linksArray[j];
                while (element.parentNode.tagName.toLowerCase() != "div") {
                    element = element.parentNode;
                }
                element.className += " tableSelected";
                updateParentNavigationElementStyles(element, " tableSelected_parent ");
                break;
            }
        }
    }
}

function onMouseOver(e) {
    var element;
    if (!e) {
        e = event;
        element = e.srcElement;
    } else {
        element = e.target;
    }

    this.className = "hoverRow";
    updateNavigationElementStyles(element, "tableHover", "tableUnhover");
}

function onMouseOut(e) {
    var element;
    if (!e) {
        e = event;
        element = e.srcElement;
    } else {
        element = e.target;
    }

    this.className = "unhoverRow";
    updateNavigationElementStyles(element, "tableUnhover", "tableHover");
}

function updateNavigationElementStyles(currentElement, newClassName, oldClassName) {

    var element = currentElement;

    //*** Select the table which is the top level element per link
    while (element.tagName.toLowerCase() != "table") {
        element = element.parentNode;
    }

    //*** If it isn't a top level item, then get this elements parent div
    if (element.parentNode.className != "sidebar_navigation_webtreeview") {
        while (element.parentNode.tagName.toLowerCase() != "div") {
            element = element.parentNode;
        }
    }
    
    //*** Apply the className to the element
    if (element.parentNode.tagName.toLowerCase() == "div") {
        if (element.className.indexOf(oldClassName) > -1) {
            element.className = element.className.replace(oldClassName, newClassName);
        }
        else {
            element.className += " " + newClassName;
        }
    }
}

function updateParentNavigationElementStyles(currentElement, classname) {
    var element = currentElement;
    var parentDepth = getDepthToNavigationDiv(currentElement);

    while (element.className != "sidebar_navigation_webtreeview") {
        //*** If its a div then look at the previous sibling
        if (element.tagName != null && element.tagName.toLowerCase() == "div") {
            element = element.previousSibling;
        }
        //*** If its a table then set the class attribute and look at it's parent
        else if (element.tagName != null && element.tagName.toLowerCase() == "table" && element != currentElement) {
            element.className += classname;
            element = element.parentNode;
        }
        //*** Other lets just look at it's parent
        else {
            element = element.parentNode;
        }
    }
}

function getDepthToNavigationDiv(currentElement) {
    var counter = 0;
    var element = currentElement;

    while (element.parentNode.className != "sidebar_navigation_webtreeview") {
        element = element.parentNode;
        counter++;
    }
    return counter;
}