//requires jquery.
//and ya i know i could'a done some stuff in the templtaing and hardcoded some inline js and it woulda worked but I wanted to do it this way as this was more fun and i wanted to get more experience with jquery.

var img_names = {};
$(setup_topnav);

function setup_topnav() {
	//find topnav images and:
		//preload images for other states
		// and set up rollover events.
	
	//regular ones
	$('#topnav_container img.topnav_item').each(function(){
		bindNavImgEvents(this, preloadNavStates(this), 0);
	});

	//live/opened 'active' ones
	$('#topnav_container img.topnav_item_active').each(function(){
		bindNavImgEvents(this, preloadNavStates(this), 1);
	});
}

function bindNavImgEvents(img, navname, active) {
	var nohover_state_src = active ? 'on_src' : 'off_src';
	$(img).bind('mouseover', {'navname':navname}, function(e){ 
		img.src = img_names[e.data.navname]['hover_src'];
	})
	$(img).bind('mouseout', {'navname':navname}, function(e){ 
		img.src = img_names[e.data.navname][nohover_state_src];
	})
	
	//also if it was active we should set the active state src right away.
	if (active) { img.src = img_names[navname]['on_src']; }
}

function preloadNavStates(img) {
	var navname = img.src.match(/topnav_off__(.*?)\.gif/)[1];
	var hoverstate = new Image();
	var onstate    = new Image();
	var hover_src  = '/images/topnav_hover__' + navname + '.gif'; 
	var on_src     = '/images/topnav_on__'    + navname + '.gif'; 
	var off_src    = '/images/topnav_off__'   + navname + '.gif'; 
	hoverstate.src = hover_src;
	onstate.src    = on_src;
	img_names[navname] = {'hover_src':hover_src, 'on_src':on_src, 'off_src':off_src};
	
	return navname;
}