/* 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 findObjPos(obj) {
    var curleft = curtop = 0;
    if (obj.offsetParent) {
        do {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);
        return [curleft, curtop];
    }
}

function showBubble(areaId) {
    var areaCoords = areaId.getAttribute('coords').split(',');
    var divsInteractive = document.getElementById("divInteractiveFeatures").getElementsByTagName("div");
    var currImg = divsInteractive[0].getElementsByTagName("img")[0];
    for (var i = 0; i < divsInteractive.length; i++) {
        if (divsInteractive[i].style.display == "block") {
            currImg = divsInteractive[i].getElementsByTagName("img")[0];
            break;
        }
    }
    var imgPos;
    if (currImg)
        imgPos = findObjPos(currImg);
    var areaLeft = parseInt(areaCoords[0]) + parseInt(imgPos[0]) - 110;
    var areaTop = parseInt(areaCoords[1]) + parseInt(imgPos[1]) - 108;
    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 showBubble(areaId)
{
    var areaCoords = areaId.getAttribute('coords').split(',');
    var areaLeft = parseInt(areaCoords[0]) + 300;
    var areaTop = parseInt(areaCoords[1]) + 338;
    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");
}