// Tab
function show(id) {//display an html element
    element = document.getElementById(id);
    if (element != null) element.style.display = 'block';
}

function hide(id) {//hide an html element
    element = document.getElementById(id);
    if (element != null) element.style.display = 'none';
}

function getElementsByClassDustin(searchClass, node, tag) {
    var classElements = new Array();
    if (node == null)
        node = document;
    if (tag == null)
        tag = '*';
    var els = node.getElementsByTagName(tag);
    var elsLen = els.length;
    var pattern = new RegExp("(^|\\s)" + searchClass + "(\\s|$)");
    for (i = 0, j = 0; i < elsLen; i++) {
        if (pattern.test(els[i].className)) {
            classElements[j] = els[i];
            j++;
        }
    }
    return classElements;
}

function getElementsByClass(searchClass, node, tag) {
    //if is Netscape we use the native procedure
    if (navigator.appName == "Netscape") return document.getElementsByClassName(searchClass);
    else return getElementsByClassDustin(searchClass, node, tag);
}


function ShowTab(id) {
    //hidding the boxes
    var eBox = getElementsByClass("Box", document.getElementById('Box_Container'), "div"); //all the boxes
    for (i in eBox) hide(eBox[i].id);
    //show the box
    show('Box' + id);

    //change tab class
    var eTab = getElementsByClass("Tab_Selected", document.getElementById('Tab_Container'), "span"); //all the tabs
    for (i in eTab) eTab[i].className = 'Tab';
    //set on the tab
    document.getElementById('Tab' + id).className = 'Tab_Selected';
}
// Tab