/* begin toggle info bubble
*************************************************************/

function changeTabs(tabId)
{
    if (tabId.className == "deselected")
    {
        tabId.className = "selected";
        selectedTab.className = "deselected";
        selectedTab = tabId;
        
        for (var i = 0; i < interactiveLinks.length; i ++)
        {
            if (tabId == interactiveLinks[i])
            {
                interactiveDivs[i].style.display = "block";
                selectedDiv.style.display = "none";
                selectedDiv = interactiveDivs[i];
            }
        }
        return false;
    }
    
    else if (tabId.className == "selected") 
    {
        return false;
    }
}

function showBubble(areaId)
{
    var areaCoords = areaId.getAttribute('coords').split(',');
    var areaLeft = parseInt(areaCoords[0]) + 100;
    var areaTop = parseInt(areaCoords[1]) + 205;
    objDivFeatureBubble.style.display = 'block';
    objDivFeatureBubble.style.left = areaLeft + 'px';
    objDivFeatureBubble.style.top = areaTop + 'px';
    
    for (var i = 0; i < interactiveMapAreas.length; i ++)
    {
        objDivFeatureBubbleDivs[i].style.display = "none";
        
        if (areaId == interactiveMapAreas[i])
        {
            objDivFeatureBubbleDivs[i].style.display = "block";
        }
    }
}

function prepareMapAreas()
{
    for (var i = 0; i < interactiveMapAreas.length; i ++)
    {
        interactiveMapAreas[i].onmouseover = function()
        {
        	return showBubble(this);
        }
        
        interactiveMapAreas[i].onmouseout = function()
        {
        	objDivFeatureBubble.style.display = "none";
        }
    }
}

function prepareTabs()
{
    for (var i = 0; i < interactiveLinks.length; i ++)
    {
        interactiveLinks[i].onclick = function()
        {
            return changeTabs(this);
        }
    }
}

/* end toggle info bubble
*************************************************************/

/* begin tabs
*************************************************************/

function tabClickHandler(elementId)
{
    element = elementId;
    elementNav = elementId + "Nav";
    if(document.getElementById(elementNav))
    {
        objUlRoleNav = document.getElementById(elementNav);
        arrayRoleNavAnchors = objUlRoleNav.getElementsByTagName("a");
        objUlRoles = document.getElementById(element);
        arrayRolesLi = objUlRoles.getElementsByTagName("li");
        selectedTabIndex = 0;
        for(i = 0; i < arrayRoleNavAnchors.length; i++)
        {
            arrayRoleNavAnchors[i].index = i;
            arrayRoleNavAnchors[i].onclick = function()
            {
                if(this.index != selectedTabIndex)
                {
                    this.className = 'selected';
                    arrayRoleNavAnchors[selectedTabIndex].className = 'deselected';
                    arrayRolesLi[this.index].className = 'selected';
                    arrayRolesLi[selectedTabIndex].className = 'deselected';
                    selectedTabIndex = this.index;
                    return false;
                }
                else
                {
                    return false;
                }
            }
        }
    }
}

/* ends tabs
*************************************************************/

window.onload = function() {
    
    // image map/info bubble
    if(document.getElementById("divInteractiveFeatures"))
    {
        interactiveUl = document.getElementById("divInteractiveFeatures");
        interactiveLinks = interactiveUl.getElementsByTagName("a");
        interactiveDivs = interactiveUl.getElementsByTagName("div");
        interactiveMapAreas = interactiveUl.getElementsByTagName("area");
        objDivFeatureBubble = document.getElementById("divFeatureBubble");
        objDivFeatureBubbleDivs = objDivFeatureBubble.getElementsByTagName("div");
		selectedTab = interactiveLinks[0];
        selectedDiv = interactiveDivs[0];
		prepareTabs();
        prepareMapAreas();
		
		// tab clicks
    	tabClickHandler("ulRoles");
    }
}