function ShowTab(tab_id, content_id, image_name)
{
    // Update which tab is shown as active
    var tab = document.getElementById('tab-bar').firstChild;
    while(tab.tagName == null || tab.tagName.toUpperCase() != 'A') tab = tab.nextSibling;
    while(tab)
    {
        if(tab.tagName != null && tab.tagName.toUpperCase() == 'A')
        {
            while(!tab.className || tab.className.substring(0,3) != "tab") 
            {
                tab = tab.nextSibling;
            }
            if(tab.id != tab_id)
            {
                tab.className = 'tab';
            }
            else
            {
                tab.className = 'tab tab-active';
            }
        }
        tab = tab.nextSibling;
    }
    
    // Update which content page is shown
    tab = document.getElementById('content-display').firstChild;
    while(tab.className != 'tab-content') tab = tab.nextSibling;
    while(tab)
    {
        if(tab.className == 'tab-content')
        {
            if(tab.id != content_id)
            {
                // tab.style.visibility = 'hidden';
                tab.style.display = 'none';
            }
            else
            {
                // tab.style.visibility = 'visible';
                tab.style.display = 'block';
            }
        }
        tab = tab.nextSibling;
    }
    
    // Update the image in the left gutter. If no image was specified, use the default.
    if(image_name)
    {
        document.getElementById('gutter-image').setAttribute('src', 'images/'+image_name);
    }
    else
    {
        document.getElementById('gutter-image').setAttribute('src', 'images/butterfly-small.jpg');
    }
 }