var previous_onload = window.onload;
window.onload = routes_popup_init;

var current_popup = null;

function toggle_popup(id, keep_showing) {
	var popup = document.getElementById(id);
	
	if(!popup) return;
	
	if((current_popup && current_popup != popup) || (keep_showing && current_popup == popup)) {
		current_popup.style.display = 'none';
	}

	popup.style.display = (popup.style.display == 'none' ? '' : 'none');
	current_popup = popup;
}

// map & button image and page locations
var map_image_small_link = '/images/structure/maps_small/map_%%%route%%%.jpg';
var map_button_link = '/images/structure/route_buts/%%%route%%%.jpg';
var page_link = '?category=%%%route%%%';

var popup_route = null;
var naam_route = null;
var map_route_small = null;
var map_button = null;
var link_route = null;

function routes_popup_init() {
	popup_route = document.getElementById('popup_route');
	if(!popup_route) return;

	naam_route = document.getElementById('naam_route');
	if(!naam_route) return;

	map_route_small = document.getElementById('map_route_small');
	if(!map_route_small) return;

	map_button = document.getElementById('map_button');
	if(!map_button) return;

	link_route = document.getElementById('link_route');
	if(!link_route) return;
	
	var areas = null;
	var maps = document.getElementsByTagName('map');
	for(var i = 0; i < maps.length; i++) {
		if(maps[i].name == 'kaart_sliced_Map') {
			areas = maps[i].getElementsByTagName('area');
		}
	}
	
	for(var i = 0; i < areas.length; i++) {
		var route_code = areas[i].href.split('#');
		if(route_code[1]) {
			var coords = areas[i].coords.split(',');
			areas[i].href = "javascript:route_popup('" + route_code[1] + "', " + coords[0] + ", " + coords[1] + ")";
		}
	}
}

var current_route_code = null;

function route_popup(route_code, coord_x, coord_y) {
	naam_route.href = page_link.replace('%%%route%%%', route_code);
	naam_route.innerHTML = route_code + ' - ' + route_codes_names_array[route_code];
	
	map_route_small.src = map_image_small_link.replace('%%%route%%%', route_code);
	map_button.src = map_button_link.replace('%%%route%%%', route_code);
	map_button.setAttribute('alt', route_code); 
	
	link_route.href = page_link.replace('%%%route%%%', route_code);
	
	popup_route.style.top = coord_y + 'px';
	popup_route.style.left = 15 + coord_x + 'px';
	
	toggle_popup('popup_route', current_route_code != route_code);
	
	current_route_code = route_code;
}