var map;
var locationsUnfolded = false;

var countries = {
	Chine :				{x:1,y:0,name:'Chine',locations:[
		'<strong>Guangdong Province</strong>: Shenzhen, Shantou,Guangzhou',
		'<strong>Fujian Province</strong>: Xiamen',
		'<strong>Zhejiang Province</strong>: Hangzhou, Ningbo',
		'Shanghai',
		'<strong>Jiangsu Province</strong>: Nanjing',
		'<strong>Shandong Province</strong>: Qingdao',
		'Beijing',
		'<strong>Sichuan Province</strong>: Chengdu'
	]},
	Inde :				{x:2,y:0,name:'Inde'},
	Bangladesh :		{x:3,y:0,name:'Bangladesh'},
	Birmanie :			{x:4,y:0,name:'Birmanie'},
	Thailande :			{x:0,y:1,name:'Thailande'},
	Vietnam :			{x:1,y:1,name:'Vietnam', locations:[
		'Ho chi minh city'
	]},
	Cambodge :			{x:2,y:1,name:'Cambodge'},
	Taiwan :			{x:3,y:1,name:'Taiwan', locations:[
		'Taipei','Kaoshiung'
	]},
	Pakistan :			{x:4,y:1,name:'Pakistan', locations:[
		'Karachi'
	]},
	Turquie :			{x:0,y:2,name:'Turquie'},
	CoreeDuSud :		{x:1,y:2,name:'Corée du Sud'},
	Indonesie :			{x:2,y:2,name:'Indonesie'},
	Malaisie :			{x:3,y:2,name:'Malaisie', locations:[
		'Singapour', 'Kuala Lumpurt',
		'<strong>Borneo</strong>: Kota Kinabalu'
	]},
	Philippines :		{x:4,y:2,name:'Philippines'},
	Bulgarie :			{x:0,y:3,name:'Bulgarie'},
	Pologne :			{x:1,y:3,name:'Pologne'},
	Roumanie :			{x:2,y:3,name:'Roumanie'},
	Iran :				{x:3,y:3,name:'Iran'},
	EmiratsArabesUnis :	{x:4,y:3,name:'Emirats Arabes Unis'},
	Israel :			{x:0,y:4,name:'Israel'},
	Liban :				{x:1,y:4,name:'Liban'},
	ArabieSaoudite :	{x:2,y:4,name:'Arabie Saoudite'},
	Croatie :			{x:3,y:4,name:'Croatie'},
	RepubliqueTcheque :	{x:4,y:4,name:'République Tcheque'}
};


Event.observe(window, 'load', function loadMap(){
	
	map = $('map');
	
	var countriesMap = $('Countries');
	var i;
	var area;
	
	for(
		i=0, area = countriesMap.down();
		area != undefined;
		area = countriesMap.down(++i)
	){			
		var infos = eval('countries.' + area.className);
		
		if(infos != undefined){
			
			if(infos.locations != undefined){
				
				area.href = 'Javascript:unfoldLocations(' + Object.toJSON(infos) + ');';
			}
			else{
				area.href = 'Javascript:;';
				area.style.cursor = 'default';
			}
			
			//area.onclick = unfoldLocations.bind(infos);
			//IE ne gère pas le onclick...
			area.onmouseover = highlightCountry.bind(infos);
			area.onmouseout = function(){
				if(!locationsUnfolded)
				
					playdownCountry();
			};
		}
	}
	
	map.down('img').onclick = foldLocations;
});

function highlightCountry(){
	
	if(!locationsUnfolded){
	
		map.style.backgroundPosition = '-' + (this.x * 565) + 'px -' + (this.y * 410) +'px';
		var elm = map.down('#CountryName');
		elm.update('<h1>' + this.name + '</h1>');
		map.down('#CountryName').show();
	}
}

function playdownCountry(){
	
	map.style.backgroundPosition = '0px 0px';
	map.down('#CountryName').update('<h1>&nbsp;</h1>');
	map.down('#CountryName').hide();
	
}

function unfoldLocations(){
	
	var args = $A(arguments);
	
	if(args.length == 1)

		var infos = args[0];
	
	else
		
		var infos = this;
	
	// Si aucune location n'est affichée
	if(!locationsUnfolded){
		
		if(infos.locations == undefined) return;
		
		var html = '<h1>' + infos.name + '</h1>';
		
		html += '<div id="countryLocations" style="display:none;"><ul>';
		
		for(var i=0; i<infos.locations.length; i++)
			
			html += '<li>' + infos.locations[i] + '</li>'
		
		html += '</ul></div>';
		
		map.down('#CountryName').update(html);
		
		//Effect.Grow('countryLocations');
		Effect.SlideDown('countryLocations');
		
		locationsUnfolded = true;
	}
	// Sinon c'est que l'utilisateur veut fermer les
	// locations ouvertes
	else
		
		foldLocations();
}

function foldLocations(){
	
	locationsUnfolded = false;
	
	var list = map.down('#CountryName').down('ul');
	
	if(list != undefined){
		
		Effect.SlideUp('countryLocations',{afterFinish:playdownCountry});
	}
}