// JavaScript Document

var map;
var centerLatitude = 29.4419;
var centerLongitude =-8.5419; 
var startZoom = 4;
var xmlhttp,myxmlhttp;
var markers;
var highlightCircle;
var currentMarker;
var iconeVert = new GIcon();
var updateInterval = 5000;

var myxmlhttp = GXmlHttp.create();

iconeVert.image = "vert.png";
iconeVert.shadow = "ombre.png";
iconeVert.iconSize = new GSize(12, 20);
iconeVert.shadowSize = new GSize(22, 20);
iconeVert.iconAnchor = new GPoint(6, 20);
iconeVert.infoWindowAnchor = new GPoint(4, 1);

var deselectCurrent = function() {};

function initializePoint(pointData) {
	var point = new GLatLng(pointData.latitude, pointData.longitude);
	var marker = new GMarker(point,{icon: iconeVert, title: pointData.nom});
	var listItem = document.createElement('li');
	var listItemLink = listItem.appendChild(document.createElement('a'));
	listItemLink.href = "#";


  
	listItemLink.onmouseover = function() {	marker.setImage("rouge.png");}
	listItemLink.onmouseout = function() { marker.setImage("vert.png");}

	listItemLink.innerHTML ='<div><img src="./img/'+pointData.nom+'.png" /><strong>' + pointData.nom + ' </strong>' + ', ' + pointData.ville +'</div>';
	var focusPoint = function() {
		deselectCurrent();
		listItem.className = 'current';
		marker.setImage("rouge.png");
		deselectCurrent = function() { listItem.className = ''; marker.setImage("vert.png");}
		marker.openInfoWindowHtml(pointData.nom+':'+ pointData.ville);
		map.panTo(point);
		return false;
	}
	listItemLink.onclick = focusPoint;
	GEvent.addListener(marker, 'click', focusPoint);	
	GEvent.addListener(marker, 'mouseover', function() { marker.setImage("rouge.png"); });
	GEvent.addListener(marker, 'mouseout', function() { marker.setImage("vert.png"); });
	GEvent.addListener(marker, 'infowindowclose', function(){marker.setImage("vert.png");});	
	document.getElementById('sidebar-list').appendChild(listItem);
	map.addOverlay(marker);
}

function windowHeight() {
	// Standard browsers (Mozilla, Safari, etc.)
	if (self.innerHeight)
		return self.innerHeight;
	// IE 6
	if (document.documentElement && document.documentElement.clientHeight)
		return document.documentElement.clientHeight;
	// IE 5
	if (document.body)
		return document.body.clientHeight;
	// Just in case.
	return 0;
}

function handleResize() {
	var height = 400;
	document.getElementById('map').style.height = height + 'px';
	document.getElementById('sidebar').style.height = (height-150) + 'px';
}

function changeBodyClass(from, to) {
	document.body.className = document.body.className.replace(from, to);
	return false;
}

function setAlertText(str) {
	document.getElementById('alert').innerHTML = '<p>' + str + '</p>';
}

function initData() {
	map = new GMap(document.getElementById("map"));
	map.addControl(new GMapTypeControl());
	map.addControl(new GLargeMapControl());
	map.addControl(new GOverviewMapControl(new GSize(70,80)));
	map.setCenter(new GLatLng(centerLatitude, centerLongitude), startZoom);
	var bounds = new GLatLngBounds();
	for(id in markers) {
		initializePoint(markers[id]);
		bounds.extend(new GLatLng(markers[id].latitude, markers[id].longitude));
	}
	map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
	changeBodyClass('loading', 'standby');
	var divt = document.createElement('div');
	divt.style.margin = "0";
	divt.style.padding = "0";
	divt.style.textAlign = "left";
	divt.style.backgroundColor = "#FFF9DD";
	divt.style.borderTop = "1px solid #dddddd";
	divt.innerHTML = "";
	var linkt = divt.appendChild(document.createElement('a'));
	//linkt.innerHTML = "Maroc API google maps almassa almassae";
	//linkt.title = "API Google Maps";
	linkt.style.textDecoration = "none";
	linkt.style.font = "0.8em Helvetica, sans-serif";
	linkt.style.color = "blue";
	document.getElementById('sidebar').appendChild(divt);
}



function init() {

	handleResize();
	xmlhttp = GXmlHttp.create();
	xmlhttp.open('GET', 'http://www.almassa.fr/carte-maroc/json.php', true);
	xmlhttp.onreadystatechange = function() {
		if (xmlhttp.readyState == 4) {
       		if (xmlhttp.status != 200) 
       			setAlertText('Impossible d\'acéder aux données de la carte.');
       		else
       		{
			     	var responseText = xmlhttp.responseText;
				    markers = eval(responseText);
			     if (!markers)
					    setAlertText('Erreur de données.');
				   else
					    initData();
			    }
     }
  }
    xmlhttp.send(null);

}

window.onresize = handleResize;

window.onunload = GUnload;