var currentlySelectedNode = "tab1";
var tmpTab = "url('css/images/tabUnselected_over.png')";
var tmpTab2 = "url('css/images/tabunselected.png')";
var selectedTab = "url('css/images/tabSelected.png')";

window.onload = function() {
    document.getElementById("ltab1").onmouseover = function() {
        tabControl('selected', 'tab1');
    }
    document.getElementById("ltab1").onclick = function() {
        contentControl('tab1', 'navContent1', 'ltab1')
    }
    document.getElementById("ltab2").onmouseover = function() {
        tabControl('selected', 'tab2');
    }
    document.getElementById("ltab2").onclick = function() {
        contentControl('tab2', 'navContent2', 'ltab2')
    }
    document.getElementById("ltab3").onmouseover = function() {
        tabControl('selected', 'tab3');
    }
    document.getElementById("ltab3").onclick = function() {
        contentControl('tab3', 'navContent3', 'ltab3')
    }
}

function checkTab(tab) {
    if (tab != currentlySelectedNode) {
        document.getElementById(tab).style.backgroundImage = tmpTab2;
    } else {
        document.getElementById(tab).style.backgroundImage = selectedTab;
    }
}

function tabControl(type, tab) {
    if (tab != currentlySelectedNode) {
        document.getElementById(tab).style.backgroundImage = tmpTab;
        if (tab != currentlySelectedNode) {
            document.getElementById(tab).onmouseout = function() {
                checkTab(tab);
            }
        }
    }
}

function contentControl(tab, content, ltab) {
    //navContent1
    if (tab != currentlySelectedNode) {
        //clear content
        document.getElementById("navContent1").style.display = "none";
        document.getElementById("navContent2").style.display = "none";
        document.getElementById("navContent3").style.display = "none";

        //clear - reset tabs
        document.getElementById("tab1").style.backgroundImage = tmpTab2;
        document.getElementById("tab2").style.backgroundImage = tmpTab2;
        document.getElementById("tab3").style.backgroundImage = tmpTab2;
        document.getElementById("ltab1").className = "unselected";
        document.getElementById("ltab2").className = "unselected";
        document.getElementById("ltab3").className = "unselected";


        //set newly selected node
        currentlySelectedNode = tab;

        //set new tab
        document.getElementById(tab).style.backgroundImage = selectedTab;
        document.getElementById(ltab).className = "selected";

        //move white block
        switch (tab) {
            case "tab1":
                document.getElementById("topNavUnderWhite").style.left = "17px";
                break;
            case "tab2":
                document.getElementById("topNavUnderWhite").style.left = "215px";
                break;
            case "tab3":
                document.getElementById("topNavUnderWhite").style.left = "413px";
                break;
        }

        //display new content
        document.getElementById(content).style.display = "block";
    }
}