var navArrowSlider = function(navWrap, navElementsArray, activeID, arrowY, leftOffset) {
	var youAreHere = new Fx.Tween($(navWrap), {
		duration: 1200,
		transition: Fx.Transitions.Elastic.easeOut  //adjust transition effect here
	});


$$(navElementsArray).each(function(item){
item.addEvent('mouseenter', function() {
//var thisPos = item.getPosition(navWrap).x + item.getSize().x - leftOffset;
var thisPos = item.getPosition(navWrap).x;
youAreHere.cancel();
youAreHere.start('background-position', thisPos + 'px ' + arrowY + 'px');
});
});

var currentArrow = function() {
youAreHere.cancel();
//var activePos = $(activeID).getPosition(navWrap).x + $(activeID).getSize().x - leftOffset;
var activePos = $(activeID).getPosition(navWrap).x;
$(navWrap).setStyle('background-position', '10px ' + arrowY + 'px'); //Fixes positioning in Firefox 2
youAreHere.start('background-position', activePos + 'px ' + arrowY + 'px');
};

//correct IE rendering problem (without this, it wont go to the active nav onload)
//var activePos = $(activeID).getPosition(navWrap).x + $(activeID).getSize().x;
var activePos = $(activeID).getPosition(navWrap).x;
$(navWrap).setStyle('background-position', activePos + 'px ' + arrowY + 'px');
//works to set image to starting position in other browsers
currentArrow();

$(navWrap).addEvent('mouseleave', currentArrow);
}; 
	
window.addEvent('domready', function() {
	navArrowSlider(
		'nav_wrap', // ID of nav wrap
		'ul#nav li', // Array selector of nav elements 
		'active_nav', // ID of current nav element
		'16px', //  Background position y of background image
		'0' //  INT ONLY - How far left from the right edge of the nav element that the image settles
	); 	
});