/*
Used to create the interaction with the map and the places of interest list on the side of the map.

there needs to be defined a hash code in this format:
<script type="text/javascript">
	var place_locations = new Hash()
	var offsets = new Array();
	offsets[0] = $H( {div: "map-symbolsWest", x: 52, y: 92, title: "test", url: "#"} )
	offsets[1] = $H( {div: "map-symbolsWest", x: 163, y: 348, title: "test1", url: "#"} )
	place_locations.set("history", offsets)
	offsets = new Array();
	offsets[0] = $H( {div: "map-symbolsWest", x: 363, y: 117, title: "test2", url: "#"} )
	offsets[1] = $H( {div: "map-symbolsWest", x: 200, y: 121, title: "test3", url: "#"} )
	place_locations.set("nature", offsets)
	offsets = new Array();
	offsets[0] = $H( {div: "map-symbolsWest", x: 368, y: 236, title: "test4", url: "#"} )
	offsets[1] = $H( {div: "map-symbolsWest", x: 161, y: 156, title: "test5", url: "#"} )
	offsets[2] = $H( {div: "map-symbolsWest", x: 264, y: 269, title: "test6", url: "#"} )
	place_locations.set("culture", offsets);
</script>
*/

document.observe('dom:loaded', function() {
	setup_images();
	add_place_markers();
	
	$$('.highlight_link').invoke('observe', 'click', function(event) {
		highlight(event.element())
		event.stop();
	});
});

//SYMBOL look up hash
var symbol_url = new Hash();
function setup_images()
{
	symbol_url.set('activity0', '/common/graphics/square_icons/brown_20.png');
	symbol_url.set('activity1', '/common/graphics/square_icons/green_20.png');
	symbol_url.set('activity2', '/common/graphics/square_icons/purple_20.png');
	symbol_url.set('activity3', '/common/graphics/square_icons/orange_20.png');
	symbol_url.set('activity4', '/common/graphics/square_icons/red_20.png');
	symbol_url.set('activity5', '/common/graphics/square_icons/light_blue_20.png');
	symbol_url.set('square', '/stylesheets/blank.gif')
}

function highlight(element) {
	parent_div = element.parentNode
	feature_type = parent_div.className
	hide_text = "hide highlight"
	highlight_class_name = feature_type+'HighlightedFeature'
	
	if (element.innerHTML == hide_text)	{
		element.innerHTML = "highlight on map"
		var allSymbols = $$('.'+highlight_class_name);
		allSymbols.each(function(elem){Element.remove(elem);});
	}
	else {
		element.innerHTML = hide_text
		setMapSymbols(feature_type, place_locations.get(feature_type), new Array(20,20), new Array(8,8), 'highlighted ' + highlight_class_name)
	}
}

function add_place_markers () {
	headers = $$('#destination-stops div')
	headers.each(function(node){ 
		setMapSymbols('square', place_locations.get(node.className), new Array(6,6), new Array(3,3), "place_marker " + node.className)
		})
				
//	setMapSymbols('airport', place_locations.get('airport'), new Array(30,30), new Array(14,14), "airport")
}

function setMapSymbols(place_type, coordinates, symbolSize, ImageOffset, class_name) {
	var symbolSizeWidth = symbolSize[0];
	var symbolSizeHeight = symbolSize[1];
	var ImageOffsetleft = ImageOffset[0];
	var ImageOffsettop = ImageOffset[1];

	//build the image html
	for(keyVar=0;keyVar<(coordinates.length);keyVar++) {
		if(coordinates[keyVar])	{
			coord = coordinates[keyVar];
			
			var symbolID = class_name+'symbol'+place_type+keyVar;
			//get rid of whitespace:
			symbolID = symbolID.replace(' ','-');			
			var title = coord.get('title');
			var symbolHTML = '<div class="'+class_name+'" id="'+symbolID+'"><a href="'+coord.get('url')+'" title="'+title+'"><img class="symbol alpha '+class_name+'" src="'+symbol_url.get(place_type)+'" alt="'+title+'" title="'+title+'" width="'+symbolSizeWidth+'" height="'+symbolSizeHeight+'" /></a></div>';
			var mapRegion = $(coord.get('div'));
			new Insertion.Bottom(mapRegion, symbolHTML);
	
			var x = coord.get('x');
			var y = coord.get('y');
			var leftOffset = x-ImageOffsetleft;
			var bottomOffset = y-ImageOffsettop;
			
			$(symbolID).style.position = "absolute";
			$(symbolID).style.left = leftOffset+'px';
			$(symbolID).style.bottom = bottomOffset+'px';
		}
	}
}