// Get the id on the body
// Which allows to tell which navigation is highlighted
var bodyId = document.getElementsByTagName('body');

// Get the div which holds the main navigation arrow
var elem = getElementsByClassName('mnArrow', 'div');

// Get the div which holds the div of the main navigation arrow
var arrow = document.getElementById('mn_arrow');

// Function that determines where to position the arrow
	function positionMainNavArrow()
	{	
		// Add 'nav-' to the body id to match the id of the main navigation li
		var navId = 'nav-' + bodyId[0].id;
		
		// Get the selected navigation item
		var navItem = document.getElementById(navId);
		
		if (navItem != '')
		{
			// Determine the center of the selected navigation item
			var num = Math.floor(navItem.offsetLeft + (navItem.offsetWidth / 2)) - 8;	
			
			// Make it visible
			// By default it's invisible to prevent user with javascript disabled to see it
			arrow.className = 'show';
			
			// Apply the styles to the arrow div
			elem[0].style.background = 'url(/common/images/mainNav_arrow.gif) no-repeat center top'
			elem[0].style.backgroundPosition = num + 'px top';
		}
	}

// Hide the arrow on mouse over
	function hideArrow(id)
	{	
		// Check to see if the id passed from the main navigation item matches the body id
		if (id == bodyId[0].id)
		{
			// hide the arrow
			elem[0].style.background = 'none';
		}
	}

positionMainNavArrow();