// When the DOM is loaded, initilize initPage
DOMAssistant.DOMReady(initPage);

function initPage() {
	// Get a reference to the containing div with id='map'
 	var map = $$('map');

	// Check if map exists
	if(map) {

		// Get all the areas of the imagemap
		var country_list = map.getElementsByTagName('AREA');

		// Loop through all areas
		for(var i=0; i<country_list.length; i++){
			$(country_list[i]).style.display = 'none';

			// Assign an action to the mouseover event
			$(country_list[i]).addEvent('mouseover', function(e) {
				// Get the id from the hovered area
				var country_id = this.id;

				// Extract the "country"-part of the id = the id of the list-item
				country_id = country_id.substring(country_id.indexOf('_')+1, country_id.length);

				// Set the <li> to "display: inline" = show it
				$$(country_id).setStyle('display', 'inline');
			});

			// Assign an action to the mouseout event
			$(country_list[i]).addEvent('mouseout', function(e) {
				// Get the id from the hovered area
				var country_id = this.id;

				// Extract the "country"-part of the id = the id of the list-item
				country_id = country_id.substring(country_id.indexOf('_')+1, country_id.length);

				// Set the <li> to "display: none" = hide it
                                var detail_id = country_id + "Details";
                                if ($$(detail_id).getStyle('display') != 'inline') {
				$$(country_id).setStyle('display', 'none');
                                }
			});

			$(country_list[i]).addEvent('click', function(e) {
		                for(var j=0; j<country_list.length; j++){
                                    var id = $(country_list[j]).id;
				    id = id.substring(id.indexOf('_')+1, id.length);// + 'Details';				
                                    if ($$(id) != null) {
				        $$(id).setStyle('display', 'none');
                                    }
				    id = id + 'Details';				
                                    if ($$(id) != null) {
				        $$(id).setStyle('display', 'none');
                                    }
                                }
				var country_id = this.id;
				country_id = country_id.substring(country_id.indexOf('_')+1, country_id.length) ;//+ 'Details';				
				$$(country_id).setStyle('display', 'inline');
				country_id = country_id + 'Details';				
				$$(country_id).setStyle('display', 'inline');
				
				DOMAssistant.preventDefault(e);
				
			});
		}
	}
}