function tabManagement(color, tab) {

    // first, check to see if this tab is currently active
    var currentClass = tab.className;
    if (currentClass.indexOf("inactive") != -1) {
        // reset all tabs to inactive
        resetTabs();
        // set clicked tab to active
        document.getElementById(color + 'Tab').className = 'active_' + color;
        // change separator color
        document.getElementById('tabSep').className = 'tabSep_' + color;
        // hide all detail areas
        resetDetails();
        // show the detail area for the selected tab
        document.getElementById('classes_' + color + 'Studio').style.display = 'block';
    }

}

function resetTabs() {
    document.getElementById('orangeTab').className = 'inactive_orange';
    document.getElementById('blueTab').className = 'inactive_blue';
    document.getElementById('purpleTab').className = 'inactive_purple';
    //document.getElementById('yellowTab').className = 'inactive_yellow';
}

function resetDetails() {
    document.getElementById('classes_orangeStudio').style.display = 'none';
    document.getElementById('classes_blueStudio').style.display = 'none';
    document.getElementById('classes_purpleStudio').style.display = 'none';
    //document.getElementById('classes_yellowStudio').style.display = 'none';
}