var currentTab = 0;

function ChangeTab(id, selectedCss, btnCss, defaultTab) {
    try {
        if (currentTab == 0) {
            toggleTab(getTab("tab" + defaultTab), false);
            selectItem(getTab("item" + defaultTab), getTab("selection" + defaultTab), false, selectedCss, btnCss);
        }
        toggleTab(getTab("tab" + currentTab), false);
        selectItem(getTab("item" + currentTab), getTab("selection" + currentTab), false, selectedCss, btnCss);
        toggleTab(getTab("tab" + id), true);
        selectItem(getTab("item" + id), getTab("selection" + id), true, selectedCss, btnCss);

        currentTab = id;
    }
    catch (e) {
        window.alert(e.description);
    }
}

function getTab(id) {
    return document.getElementById(id);
}

function toggleTab(tab, show) {
    if (tab) {
        tab.style.visibility = (show) ? "visible" : "hidden";
        tab.style.display = (show) ? "block" : "none";
    }
}
function selectItem(item, selection, selected, selectedCss, btnCss) {
    if ((item) && (selection)) {
        if (item.className.indexOf("first") == -1) {
            item.className = (selected) ? selectedCss : btnCss;
        } else {
            item.className = "first" + (selected) ? selectedCss : btnCss;

        }
        selection.style.visibility = (selected) ? "visible" : "hidden";

    }
}

function AddClass(id, hoverCss) {
    try {
        hoverItem(getTab("item" + id), hoverCss);

    }
    catch (e) {
        window.alert(e.description);
    }
}

function hoverItem(item, hoverCss) {
    if (item) {
        item.className = item.className + " " + hoverCss;
    }
}
function RemoveClass(id, hoverCss) {
    try {
        unhoverItem(getTab("item" + id), hoverCss);

    }
    catch (e) {
        window.alert(e.description);
    }
}
function unhoverItem(item, hoverCss) {
    if (item) {
        item.className = item.className.replace(" " + hoverCss, "");
    }
}