//** Construct Tabview **//
function constructTabview(TabViewId, CurrentId, tabsClsName, pagesClsName, pageClsName){
    var TabView = document.getElementById(TabViewId);
    var Tabs = TabView.firstChild;
    
    while (Tabs.className != tabsClsName){
        Tabs = Tabs.nextSibling;
    }
    
    var Tab = Tabs.firstChild;
    var i = 0;

    do{
        if (Tab.tagName == "A"){
            i++;
            Tab.href = "javascript:switchTab('" + TabViewId + "', " + i + ", '" + tabsClsName + "', '" + pagesClsName + "', '" + pageClsName + "');";
            Tab.className = (i == CurrentId) ? "Current" : "";
            Tab.blur();
        }
    }

    while (Tab = Tab.nextSibling);

    var Pages = TabView.firstChild;
    
    while(Pages.className != pagesClsName){
        Pages = Pages.nextSibling;
    }
    
    var Page = Pages.firstChild;
    var i = 0;

    do{
        if (Page.className == pageClsName){
            i++;
            if (Pages.offsetHeight){
                //***** Comment the line below to let auto-height ***** //
                //Page.style.height = (Pages.offsetHeight - 2) + "px";
                
            }
            Page.style.display = (i == CurrentId) ? 'block' : 'none';
        }
    }
    
    while (Page = Page.nextSibling);
}

//** Listen tabs' click event to switch tabs **//
function switchTab(TabViewId, id, tabsClsName, pagesClsName, pageClsName) { 
    constructTabview(TabViewId, id, tabsClsName, pagesClsName, pageClsName); 
}

//** Initialize the Tabview **//
function initTabview(TabViewId, tabsClsName, pagesClsName, pageClsName) { 
    constructTabview(TabViewId, 1, tabsClsName, pagesClsName, pageClsName); 
}