/*
Les valeurs à afficher sont stockées dans un tableau d'objets.
Chaque objet possède trois propriétés:
id: le code ISO du pays sur 2 caractères
nom: le nom du pays en Français
val: la valeur numérique à traiter (ici: le nombre de sites e-monsite créés dans chaque pays)
*/

var valeurs = new Array(
	{id:'FR', nom:'France',val:26967},
	{id:'MA', nom:'Maroc', val:17679},
	{id:'BE', nom:'Belgique', val:11545},
	{id:'CA', nom:'Canada', val:11660},
	{id:'DZ', nom:'Algérie', val:5734},
	{id:'CH', nom:'Suisse', val:3259},
	{id:'CI', nom:'Côte d\'Ivoire', val:2334},
	{id:'TN', nom:'Tunisie', val:2285},
	{id:'SN', nom:'Sénégal', val:1515},
	{id:'CM', nom:'Cameroun', val:718},
	{id:'BJ', nom:'Bénin', val:474},
	{id:'MQ', nom:'Martinique', val:428},
	{id:'MG', nom:'Madagascar', val:373},
	{id:'GP', nom:'Guadeloupe', val:373},
	{id:'RE', nom:'Réunion', val:362},
	{id:'BF', nom:'Burkina Faso', val:333},
	{id:'TG', nom:'Togo', val:321},
	{id:'GA', nom:'Gabon', val:262},
	{id:'ML', nom:'Mali', val:259},
	{id:'MA', nom:'Maroc', val:257},
	{id:'HT', nom:'Haiti', val:244},
	{id:'ES', nom:'Espagne', val:230},
	{id:'CG', nom:'Congo', val:215},
	{id:'IT', nom:'Italie', val:182},
	{id:'DE', nom:'Allemagne', val:180},
	{id:'LU', nom:'Luxembourg', val:146},
	{id:'US', nom:'États Unis', val:143},
	{id:'MR', nom:'Mauritanie', val:121},
	{id:'GN', nom:'Guinée', val:143},
	{id:'CN', nom:'Chine', val:113},
	{id:'JP', nom:'Japon', val:103}		
);

// On demande à l'API Google de charger le package "Geomap"
google.load('visualization', '1', {'packages': ['geomap']});

// Une fois le package chargé, on lancera la fonction initGeoMap()
google.setOnLoadCallback(initGeoMap);

// Fonction principale
function initGeoMap()
{
		
	/**
	On affichera l'objet GeoMap dans l'élément du DOM qui porte l'id 'map_canevas'
	Ici, c'est un objet div qu'on a déclaré comme ceci: <div id="map_canevas"></div>
	*/
	var container = document.getElementById('map_canvas');
	
	/**
	On crée un objet GeoMap dans ce conteneur
	*/
	var geomap = new google.visualization.GeoMap(container);

	/**
	On crée un objet DataTable (une sorte de super tableau fourni par Google) qui stockera les données
	*/
	var data = new google.visualization.DataTable();
	
	/**
	On déclare une première colone, qui stockera le code ISO du pays
	*/
	data.addColumn('string', 'Country');
	
	/**
	puis une seconde pour la valeur à lui attribuer
	*/
	data.addColumn('number', 'Nombre de sites');
		
	/**
	Enfin une troisième, pour afficher le nom du pays plutot que son code ISO
	*/
	data.addColumn('string', 'HOVER', 'HoverText');
		
	/**
	On initialise le nombre de lignes de ce tableau
	C'est la propriété length (longueur) du tableau valeurs
	*/
	data.addRows(valeurs.length);
		
	/**
	on copie chaque valeur dans l'objet dataTable
	*/
	for(var i=0; i<valeurs.length;i++)
	{
		// ligne i, colonne 0
		data.setValue(i, 0, valeurs[i].id);
		// ligne i, colonne 1
		data.setValue(i, 1, valeurs[i].val);
		// ligne i, colonne 2
		data.setValue(i, 2, valeurs[i].nom);
	}
	
	/**
	On précise les options d'affichage de l'objet GeoMap
	*/
	var options = {};
	
	// mode d'affichage (regions ou markers)
	options['dataMode']		= 'regions';
	// niveau de zoom
	options['region']		= 'world';
	// dimensions
	options['width']		= 550;
	options['height']		= 344;
	// couleurs hexa (ici celles d'Awelty)
	options['colors']		= [0xE0FFD4, 0xA5EF63, 0x50AA00, 0x267114];
	// forcer l'affichage de la légende
	options['showLegend']	= true;
	
	/**
	On demande le dessin de l'objet GeoMap en lui fournissant nos données et options
	*/
	geomap.draw(data, options);
	
}