var menuItems = 10;
var selectedIndex = 0;

//==============================================================================

function getCSS( elem ){
    return document.defaultView && document.defaultView.getComputedStyle ?
        document.defaultView.getComputedStyle(elem, null)
        : elem.currentStyle || elem.style;
}

//==============================================================================

function getWidth(e) {
    var style = getCSS(e);
    // alert(e.offsetWidth);
    // return parseFloat(style.width.slice(0,-2));
    return (e.offsetWidth);
}

//==============================================================================

function getButtonWidth (availableWidth, buttonElement, numButtons) {

    // Get the style associated with this button
    var style = getCSS(buttonElement);

    // Class margin
    var leftMargin = parseFloat(style.marginLeft.slice(0,-2));
    var rightMargin = parseFloat(style.marginRight.slice(0,-2));

    // Class padding
    var leftPadding = parseFloat(style.paddingLeft.slice(0,-2));
    var rightPadding = parseFloat(style.paddingRight.slice(0,-2));

    // Class border
    var leftBorder = parseFloat(style.borderLeftWidth.slice(0,-2));
    var rightBorder = parseFloat(style.borderRightWidth.slice(0,-2));

    var borderWidth = leftMargin + rightMargin + leftPadding + rightPadding +
        leftBorder + rightBorder;
    var grossWidth = availableWidth / numButtons;
    var netWidth = grossWidth - borderWidth;
    
    return netWidth;
}

//==============================================================================

function initPageTabs() {

    // Create tab items 
    var tabToolbar = document.getElementById("tabToolbar");

    // Check for the presence of the object
    if (tabToolbar) {
	
	    // Get net width of the toolbar
	    var tbWidth = getWidth(tabToolbar);
	
	    for (var i=0; i<menuItems; i++) {
	
	        // Create the button
	        var liElement = document.createElement("li");
	        if (i == selectedIndex)
	            liElement.className = "tabItem selectedOff";
	        else 
	            liElement.className = "tabItem off";
	        liElement.innerHTML = "Tab " + i;
	
	        // Add the button to the toolbar
	        tabToolbar.appendChild(liElement);
	
	        // Set width on button - if this is the first time through, 
	        // calculate the available width
	        var netWidth;
	        if (i==0)
	            netWidth = getButtonWidth(tbWidth, liElement, menuItems);
	        liElement.style.width = Math.floor(netWidth) + "px"; 
	
	        // Associate some behavior with the buttons
	        addEventHandler(liElement, "mouseover", toggle);
	        addEventHandler(liElement, "mouseout", toggle);
	        addEventHandler(liElement, "click", switchIndex);
	    }
	
	    // Set the initial text
	    var tabContent = document.getElementById("tabContent");
	    tabContent.innerHTML = "This is tab #" + selectedIndex
    }
}

//==============================================================================

function toggle(e) {

    var me = getActivatedObject(e);

    // Toggle the view
    if (me.className == "tabItem selectedOff")
        me.className = "tabItem selectedOn";
    else if (me.className == "tabItem off")
        me.className = "tabItem on";
    else if (me.className == "tabItem selectedOn")
        me.className = "tabItem selectedOff";
    else
        me.className = "tabItem off";
}

//==============================================================================

function switchIndex(e) {

    var me = getActivatedObject(e);
    
    // Turn all the buttons 'off' except the selected in
    var tabToolbar = document.getElementById("tabToolbar");
    var buttons = tabToolbar.getElementsByTagName("li");
    for (var i=0; i<buttons.length; i++)
    {
        if (buttons[i] == me)
        {
            buttons[i].className = "tabItem selectedOn";
            selectedIndex = i;
        }
        else 
        {
            buttons[i].className = "tabItem off";
        }
    }

    // Switch the content
    var tabContent = document.getElementById("tabContent");
    tabContent.innerHTML = "This is tab #" + selectedIndex
}

//==============================================================================