function tab_debug(msg) {
    if (DEBUG) {
        alert("TAB: "+msg);
    }
}
function tab_create(conf) {

    // check if container id is given
    if (conf.container == null) {
        tab_debug("no container id given");
	return;
    }

    // check if given container id is valid
    if (document.getElementById(conf.container) == null) {
        tab_debug("container ["+conf.container+"] not found");
	return;
    }

    // check if loading text is given
    if (conf.loading == null) {
        conf.loading = "Lade...";
	return;
    }

    // check if user styles are given
    if (conf.styles == null) {
        conf.styles = {};
    }

    // container for cardbox
    var container = document.getElementById(conf.container);

    // assign style for container
    if (conf.styles.tab_container == null) {
        container.className = "tab_container";
    } else {
        container.className = conf.styles.tab_container;
    }

    // assign card box configuration to container element
    container.conf = conf;

    // container for the tabs
    var tabs = document.createElement("div");
    tabs.className = "tab_tab_container";

    // round edge for first tab
    var div = document.createElement("div");
    div.className = "tab_first";
    tabs.appendChild(div);

     // build tabs
    var length = conf.tabs.length;
    for (var i=0; i<length; i++) {

        div = document.createElement("div");
        div.className = "tab_center";
        div.innerHTML = conf.tabs[i].title;
        div.onclick = new Function("tab_select(this);");
	div.index = i;
        tabs.appendChild(div);

	conf.tabs[i].tag = div;

        // add separators
        if (i < length - 1) {
            div = document.createElement("div");
            div.className = "tab_separator";
            tabs.appendChild(div);
        }
    }

    // round edge for last tab
    div = document.createElement("div");
    div.className = "tab_last";
    tabs.appendChild(div);

    // append tab container to main container
    container.appendChild(tabs);

    // container for the pages
    var pages = document.createElement("div");
    pages.className = "tab_page_container";

    // append page container to main container
    container.appendChild(pages);
}

function tab_select_by_user(conf, label) {
    var container = document.getElementById(conf.container);
    for (var i=0; i<conf.tabs.length; i++) {
        if (conf.tabs[i].label == label) {
	    tab_select(conf.tabs[i].tag);
	    return;
	}
    }
}

function tab_select(tab) {
    var tab_container = tab.parentNode;
    var container = tab_container.parentNode;
    var page_container = container.childNodes[1];

    // show "loading" while waiting for new content
    page_container.className = "tab_loading";
    page_container.innerHTML = container.conf.loading;
    
    var length = (tab_container.childNodes.length - 1) / 2;
    for (var i=0; i<length; i++) {
        tab_container.childNodes[i*2+1].className = "tab_center";
        if (i<length-1) {
            tab_container.childNodes[i*2+2].className = "tab_separator";
        }
        tab_container.childNodes[0].className = "tab_first";
        tab_container.childNodes[length*2].className = "tab_last";
    }
    
    tab_container.childNodes[tab.index*2+1].className = "tab_center_selected";

    if (tab.index > 0) {
        tab_container.childNodes[tab.index*2].className = "tab_separator_selected2";
    } else {
        tab_container.childNodes[tab.index*2].className = "tab_first_selected";
    }

    if (tab.index<length-1) {
        tab_container.childNodes[tab.index*2+2].className = "tab_separator_selected";
    }
    if (tab.index == length-1) {
        tab_container.childNodes[length*2].className = "tab_last_selected";
    }

    while (page_container.childNodes.length > 0) {
        page_container.removeChild(page_container.firstChild);
    }

    page_container.appendChild(new Function(container.conf.tabs[tab.index].click)());
}