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

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

// Get the div which holds the div of the main navigation arrow
var arrow = $('#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.attr('id');
		
		// Get the selected navigation item
		var navItem = $(navId);
		
		if (navItem != null)
		{
		    
			// Determine the center of the selected navigation item
		    var num = Math.floor((navItem.width() / 2) );
			/*- navItem.offset().left*/
			
			// Make it visible
			// By default it's invisible to prevent user with javascript disabled to see it
			arrow.addClass('show');
			
			// Apply the styles to the arrow div
			if ($.browser.msie && $.browser.version < 7) {
			    elem.css('background', 'url(../common/images/mainNav_arrow.gif) no-repeat center top');
			}
			else {
			    elem.css('background', 'url(../common/images/mainNav_arrow.png) no-repeat center top');
			}
			elem.css('background-position', 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.css('background', 'none');
		}
	}

positionMainNavArrow();