function hoverInTab(pos) {
    tabItem = document.getElementById("tab" + pos.toString());

    if (pos == 1)
        tabItem.className = "active";
    else if (pos == 2)
        tabItem.className = "activeFee";
    else if (pos == 3)
        tabItem.className = "activeResearch";
   
}

function hoverOutTab(pos) {
    tabItem = document.getElementById("tab" + pos.toString());

    if (pos == 1 && document.getElementById("features").style.display == "none")
        tabItem.className = "inactive";
    else if (pos == 2 && document.getElementById("fees").style.display == "none")
        tabItem.className = "inactiveFee";
    else if (pos == 3 && document.getElementById("research").style.display == "none")
        tabItem.className = "inactiveResearch";
}

function displayTabInfo(pos) {
    hideAll();
    tabItem = document.getElementById("tab" + pos.toString());

    switch (pos) {
        case 1:
            document.getElementById("features").style.display = "block";
            tabItem.className = "active";
            break;
        case 2:
            document.getElementById("fees").style.display = "block";
            tabItem.className = "activeFee";
            break;
        case 3:
            document.getElementById("research").style.display = "block";
            tabItem.className = "activeResearch";
            break;
    }
}

function hideAll() {
    document.getElementById("features").style.display = "none";
    document.getElementById("fees").style.display = "none";
    document.getElementById("research").style.display = "none";

    document.getElementById("tab1").className = "inactive";
    document.getElementById("tab2").className = "inactiveFee";
    document.getElementById("tab3").className = "inactiveResearch";
}

function hoverInTabMargin(pos) {
    tabItem = document.getElementById("tab" + pos.toString());

    if (pos == 1)
        tabItem.className = "activeFeatures";
    else if (pos == 2)
        tabItem.className = "activeApprovedInvestments";
    else if (pos == 3)
        tabItem.className = "activeFees";
    else if (pos == 4)
        tabItem.className = "activeSavingsGearing";

}

function hoverOutTabMargin(pos) {
    tabItem = document.getElementById("tab" + pos.toString());

    if (pos == 1 && document.getElementById("features").style.display == "none")
        tabItem.className = "inactiveFeatures";
    else if (pos == 2 && document.getElementById("ApprovedInvestments").style.display == "none")
        tabItem.className = "inactiveApprovedInvestments";
    else if (pos == 3 && document.getElementById("Fees").style.display == "none")
        tabItem.className = "inactiveFees";
    else if (pos == 4 && document.getElementById("SavingsGearing").style.display == "none")
        tabItem.className = "inactiveSavingsGearing";
}


function displayTabInfoMargin(pos) {
    hideAllMargin();
    tabItem = document.getElementById("tab" + pos.toString());

    switch (pos) {
        case 1:
            document.getElementById("features").style.display = "block";
            tabItem.className = "activeFeatures";
            break;
        case 2:
            document.getElementById("ApprovedInvestments").style.display = "block";
            tabItem.className = "activeApprovedInvestments";
            break;
        case 3:
            document.getElementById("Fees").style.display = "block";
            tabItem.className = "activeFees";
            break;
        case 4:
            document.getElementById("SavingsGearing").style.display = "block";
            tabItem.className = "activeSavingsGearing";
            break;
    }
}

function hideAllMargin() {
    document.getElementById("features").style.display = "none";
    document.getElementById("ApprovedInvestments").style.display = "none";
    document.getElementById("Fees").style.display = "none";
    document.getElementById("SavingsGearing").style.display = "none";

    document.getElementById("tab1").className = "inactiveFeatures";
    document.getElementById("tab2").className = "inactiveApprovedInvestments";
    document.getElementById("tab3").className = "inactiveFees";
    document.getElementById("tab4").className = "inactiveSavingsGearing";
}