var navs = ['n-sedans', 'n-convertibles', 'n-suvs', 'n-hybrids', 'n-fperformance' ];

// functions adapted from MooTools 1.11.
function hasClass(el, className){
	return (' ' + el.className + ' ').indexOf(' ' + className + ' ') > -1;
}

function addClass(el, className){
	if (el.className == undefined) el.className = '';
	if (!hasClass(el, className)) el.className = clean(el.className + ' ' + className);
}

function removeClass(el, className){
	el.className = clean(el.className.replace(new RegExp('(^|\\s)' + className + '(?:\\s|$)'), '$1'));
	return this;
}

function clean(string){
	return string.replace(/\s{2,}/g, ' ').replace(/^\s+|\s+$/g, '');
}

function getEventTarget(e) {
	var targ;
	if (!e) var e = window.event;
	if (e.target) targ = e.target;
	else if (e.srcElement) targ = e.srcElement;
	if (targ.nodeType == 3) // defeat Safari bug
		targ = targ.parentNode;
	// ie gets the <a> instead of the <li>
	while (targ) {
		for (i = 0; i < navs.length; ++i) {
			if (navs[i] == targ.id) {
				return targ;
			}
		}
		targ = targ.parentNode;
	}
	return targ;
}


function getCoordinates(el) {
	var position = getPosition(el);
	var obj = {
		'width': el.offsetWidth,
		'height': el.offsetHeight,
		'left': position.x,
		'top': position.y
	};
	obj.right = obj.left + obj.width;
	obj.bottom = obj.top + obj.height;
	return obj;
}

function getPosition(el){
	var left = 0, top = 0;
	do {
		left += el.offsetLeft || 0;
		top += el.offsetTop || 0;
		el = el.offsetParent;
	} while (el);
	return {'x': left, 'y': top};
}

// Primary Global Navigation - Implementation
addEvent(window, 'load', function() {
	// Set up hover effects for the nav sections using Javascript because li:hover is not supported on IE6.
	for (i = 0; i < navs.length; ++i) {
		var li = document.getElementById(navs[i]);
		addEvent(li, 'mouseover', topNavMouseOver);
		addEvent(li, 'mouseout', topNavMouseOut);
	}
});

/**
 * Event handler for the mouseover event of the navigation sections.
 * Sets the hover state background.
 */
function topNavMouseOver(event) {
	// clear the hover state from all sections (except the current page's section, navActive)
	for (i = 0; i < navs.length; ++i) {
		var li = document.getElementById(navs[i]);
		if (!hasClass(li, 'navActive')) {
			removeClass(li, 'navHover');
		}
	}
	// set the hover state for this section
	addClass(getEventTarget(event), 'navHover');
}

/**
 * Event handler for the mouseout event of the navigation sections.
 * Clears the hover state background, unless this is the section 
 * containing the current page.
 */
function topNavMouseOut(event) {
	var target = getEventTarget(event);
	if (!hasClass(target, 'navActive')) {
		var p = getCoordinates(target);
		var client = {
			'x': event.pageX ? event.pageX - window.pageXOffset : event.clientX,
			'y': event.pageY ? event.pageY - window.pageYOffset : event.clientY
		};
		
		// mouseout events are send when entering nested blocks, so ignore those
		if (client.x <= p.left || client.y <= p.top || 
				client.x >= p.right || client.y >= p.bottom) {
			removeClass(target, 'navHover');
		}
	}
}