$(function() {
	$("body").append("<img src='/data/assets/themes/finix/images/menu_underline.gif' id='top-nav-underline' />"); // Add the underline image to the page
	
	var selected_item = $("#top-nav li").find(".selected").parent(); // Get the menu item that is selected for this page
	if(selected_item.size() <= 0) // If there is no selected menu item, use the first one
		selected_item = $("#top-nav li").first();
		
	var offset = $(selected_item).offset(); // Get the offset of the menu item, relative to the document
	$("#top-nav-underline")
		.css({
			position: "absolute",
			top: offset.top + 28, // The image should be below the menu item
			left: offset.left + 5 // And directly under it
		})
	
	$("#top-nav li").hover(top_nav_mouseover, top_nav_mouseout); // Bind the menu and image together
});

var top_nav_mouseover = function() {
	var offset = $(this).offset(); // Get the offset of the menu item, relative to the document
	var bump_amount = 20; // Amount to pass the menu item by and then return by, in pixels
	
	var new_left_final = offset.left; // This is the final left offset, after the animation is done
	// This is the left offset with the bump accounted for. We need to check whether we're animating towards the left or the right so we can add/subtract the bump amount
	var new_left_bump = ( ($("#top-nav-underline").offset().left - offset.left) < 0) ? (offset.left + bump_amount) : (offset.left - bump_amount);
	
	// Animate to the bump
	$("#top-nav-underline")
		.stop()
		.animate({ // Animate to the bump
			left: new_left_bump
		}, {
			duration: 500,
			complete: function() {
				// Animate to the final position
				$("#top-nav-underline").animate({
					left: new_left_final
				}, 250);
		}
	});
};


var top_nav_mouseout = function() {
	var selected_item = $("#top-nav li").find(".selected").parent(); // Get the menu item that is selected for this page
	if(selected_item.size() <= 0) // If there is no selected menu item, use the first one
		selected_item = $("#top-nav li").first();
		
	var offset = $(selected_item).offset(); // Get the offset of the menu item, relative to the document
	
	$("#top-nav-underline").stop().animate( { // Animate to the original position
			left: offset.left
		}, 1500)
		
};