// 		oranje, groen, paars, rood, geel
var hover = {
	oranje : ['oranje-gaten', 'groen', 'paars', 'rood', 'geel'],
	groen  : ['oranje', 'groen-gaten', 'paars', 'rood-overstap', 'geel'],
	paars  : ['oranje', 'groen', 'paars-gaten', 'rood', 'geel'],
	rood   : ['oranje', 'groen-overstap', 'paars', 'rood-gaten', 'geel'],
	geel   : ['oranje', 'groen', 'paars', 'rood', 'geel-gaten'],
};
var normal = ['oranje', 'groen', 'paars', 'rood', 'geel'];

var imageRoot = "/images/lijnen/";

function showLine(color) {
	var i, img, span;
	console.log(color);
	for (i=0; i<5; i++) {
		img = hover[color][i];
		span = $("#nav span." + normal[i]);
		$(".color", span).attr('src', imageRoot+img+".png");
		$(".ds", span).attr('src', imageRoot+img+"-ds.png");
		
		// display the right links
		$("#nav-menu li ul").hide();
		$("#nav-menu ." + color + " ul").show();
		
	}
}

$().ready(function () {
	$("#nav map area").hover(function(e) {
		showLine(e.currentTarget.className);
	});
	$("#nav-menu > li").hover(function(e) {
		showLine(e.currentTarget.className);
	});
// 	showLine('geel');
});