document.observe('dom:loaded', function(ev){

	showOnHover = false;

	function clear()
	{
		
		// menus - make them all inactive
		$$('ul.leftNav li.active').each(function(el){
			el.removeClassName('active');
		});

		// hide all the balloons
		$$('.balloon').each(function(el){
			el.hide();
		});

	}

	function show(area, pointerX, pointerY)
	{
		
		// activate the menu
		$('menu-' + area).addClassName('active');
		
//		alert(pointerX + ',' + pointerY);
		
		// show the balloon
		var balloon = $('balloon-' + area);
		balloon.setStyle({
			top: pointerY - balloon.getHeight() + 4 + 'px',
			left: pointerX - (balloon.getWidth() / 2) + 'px'
		}).show();
		
	}

	function getCenterPoint(area)
	{
		var area = $('area-' + area);
		var map = $('map');
		var mapPosition = map.positionedOffset();
		var coordinates = area.coords;
		
		coordinates = coordinates.split(',');
		
		var totalX = 0;
		var counter = 1;
		coordinates.each(function(i){
			if(counter % 2 == 1) {
				totalX = totalX + parseInt(i);
			}
			counter = counter + 1;
		});
		
		var avX = Math.ceil(totalX / coordinates.length * 2)
		var positionX = mapPosition.left + avX;
		
		var totalY = 0;
		var counter = 1;
		coordinates.each(function(i){
			if(counter % 2 == 0) {
				totalY = totalY + parseInt(i);
			}
			counter = counter + 1;
		});
		
		var avY = Math.ceil(totalY / coordinates.length * 2)
		var positionY = mapPosition.top + avY;
		
		return {
			x: positionX,
			y: positionY 
		}
	}
	
	$('worldmap').observe('click', function(el) {
		clear();
	});
	
	$$('ul.leftNav li a').each(function(el){
		el.observe('click', function(ev){
			Event.stop(ev);

			var el = Event.element(ev).up('li');

			var area = el.identify().substr(el.identify().indexOf('-') + 1);

			var center = getCenterPoint(area);

			clear();
			show(area, center.x, center.y);	
		});
	});
	
	$$('area').each(function(el){
		el.observe('click', function(ev){
			Event.stop(ev);

			var el = Event.element(ev);
			
			var area = el.identify().substr(el.identify().indexOf('-') + 1);

			clear();
			show(area, Event.pointerX(ev), Event.pointerY(ev));
		});
		if(showOnHover) {
			el.observe('mouseover', function(ev){
				Event.stop(ev);

				var el = Event.element(ev);
			
				var area = el.identify().substr(el.identify().indexOf('-') + 1);

				clear();
				var center = getCenterPoint(area);
				// show(area, center.x, center.y);
				show(area, ev.pointerX(), ev.pointerY());
			});
			el.observe('mouseout', function(ev){
			});
		}
	});
});