var hovers = [ ['nav-about', 'img/nav_about-snapon.gif', 'img/nav_hover_about-snapon.gif'],
				['nav-owning', 'img/nav_owning-a-franchise.gif', 'img/nav_hover_owning-a-franchise.gif'],
				['nav-compare', 'img/nav_compare-snapon.gif', 'img/nav_hover_compare-snapon.gif'],
				['nav-contact', 'img/nav_contact-us.gif', 'img/nav_hover_contact-us.gif']	]

var hoversidx = { 'nav-about' : 0, 'nav-owning' : 1, 'nav-compare':2, 'nav-contact':3 }

jQuery.preloadImages = function()
{
	for(var i = 0; i<arguments.length; i++)
	{
		jQuery("<img>").attr("src", arguments[i]);
	}
}

$(function(){
	for(var i=0; i<hovers.length; i++) {
		var nav = hovers[i]
		var nav_item = $('#'+nav[0]);
		nav_item.hover(function() {
			var id = $(this).attr('id');
			var item = hovers[hoversidx[id]];
			$(this).attr("src", item[2]);
		}, function() {
			var id = $(this).attr('id');
			var item = hovers[hoversidx[id]];
			$(this).attr("src", item[1]);
		});
		$.preloadImages(nav[2]);
	}
});