//Global variables
var markers = [];				//array con i punti di interesse
var elencoPuntiMangiare = [];	//array con i nomi dei posti dove mangiare
var elencoPuntiDormire = [];	//array con i nomi dei posti dove dormire
var myIcons = [];				//it contains all the needed icons
var mapOfLari;					//initialize the object that will contain the GMap
var language='it';				//global variable for the map language

/*
 *TYPE*
affittacamere
agriturismo
beb
hotel
enoteca
pizzeria
ristorante
ristorante-pizzeria
bar
*/

function myMarker(markerPoint, markername, htmlText, iconType, mType) {
	if(iconType == undefined) iconType = G_DEFAULT_ICON;
	var marker = new GMarker(markerPoint, {icon:iconType, title:markername});
	marker.markerName = markername;
	marker.html = htmlText;
	marker.icon = iconType;
	marker.point = markerPoint;
	marker.markerType = mType;	//type of marker: mangiare, dormire, etc.
	GEvent.addListener(marker, "click", function() {
		marker.openInfoWindowHtml(htmlText);
	});
	markers.push(marker);
	return marker;
}

function viewPoint(pointName) { //used to show a point clicked in a list
	for(var a in markers) {
		if(markers[a].markerName == pointName) {
			if(mapOfLari.getCurrentMapType() != G_HYBRID_MAP) {
				mapOfLari.setMapType(G_HYBRID_MAP);
			}
			mapOfLari.setCenter(markers[a].point);
			markers[a].openInfoWindowHtml(markers[a].html);
			break;
		}
	}
}

function createIcon(typeOfIcon) {
	var newIcon = new GIcon();
	newIcon.image = "../images/" + typeOfIcon + ".png";
	//newIcon.image = "../images/affittacamere.png";
	newIcon.iconSize = new GSize(35,33);
	switch (typeOfIcon) {
		case "ristorante":
			newIcon.iconAnchor = new GPoint(0,32);
			newIcon.infoWindowAnchor = new GPoint(0,32);
			newIcon.imageMap=[0,32,6,23,6,2,8,0,30,0,33,2,33,24,31,26,9,27];
			break;
		case "bar":
			newIcon.iconAnchor = new GPoint(0,35);
			newIcon.infoWindowAnchor = new GPoint(0,35);
			newIcon.imageMap=[0,35,6,23,6,2,8,0,30,0,33,2,33,24,31,26,9,27];
			break;
		
		default:
			newIcon.iconAnchor = new GPoint(35,0);
			newIcon.infoWindowAnchor = new GPoint(35,0);
			newIcon.imageMap=[34,0,25,7,3,7,0,10,0,31,3,34,25,34,28,31,28,9];
	}
	return newIcon;
}

/* Create a set of customized controls. We need tree buttons to set predefined zoom levels:
 * - visualize only the town
 * - zoom out to the proximity (let's say ~3km radius from the castle)
 * - panoramic zoom on the whole communal territory
*/
// step1: define the empty function:
function PredefinedZoomControl() {
}

// step2: assign the prototipe object to a GControl() object:
PredefinedZoomControl.prototype = new GControl();

//step3: create a DIV for each control container and place them inside in a container
//			DIV wich is returned as our control element.
PredefinedZoomControl.prototype.initialize = function(map) {
	var container = document.createElement("div");

	var maxZoom = document.createElement("div");
	maxZoom.setAttribute('id', "zoom1");
	this.setButtonStyle_(maxZoom);
	maxZoom.style.font = "bold small Arial";
	maxZoom.style.border = "2px solid #00CC00";
	container.appendChild(maxZoom);
	maxZoom.appendChild(document.createTextNode("Lari"));
	GEvent.addDomListener(maxZoom, "click", function() {
		map.setCenter(new GLatLng(43.566026,10.592097), 17, G_SATELLITE_MAP);
		document.getElementById("zoom2").style.font = "normal small Arial";
		document.getElementById("zoom2").style.border = "1px solid black";
		document.getElementById("zoom3").style.font = "normal small Arial";
		document.getElementById("zoom3").style.border = "1px solid black";
		maxZoom.style.font = "bold small Arial";
		maxZoom.style.border = "2px solid #00CC00";
	});
	GEvent.addDomListener(maxZoom, "mouseover", function() {
		maxZoom.style.backgroundColor = "#00DD00";
	});
	GEvent.addDomListener(maxZoom, "mouseout", function() {
		maxZoom.style.backgroundColor = "white";
	});

	var medZoom = document.createElement("div");
	medZoom.setAttribute('id', "zoom2");
	this.setButtonStyle_(medZoom);
	container.appendChild(medZoom);
	switch(language) {
		case 'it':
			medZoom.appendChild(document.createTextNode("Dintorni"));
			break;
		case 'en':
			medZoom.appendChild(document.createTextNode("Proximity"));
			break;
		case 'de':
			medZoom.appendChild(document.createTextNode("Umgebung"));
			break;
		case 'fr':
			medZoom.appendChild(document.createTextNode("Alentours"));
			break;
		default: //use english as a default value
			medZoom.appendChild(document.createTextNode("Proximity"));
			break;
	}
	GEvent.addDomListener(medZoom, "click", function() {
		//recenter map and change map apparence:
		map.setCenter(new GLatLng(43.564026,10.602097), 13, G_HYBRID_MAP);
		document.getElementById("zoom1").style.font = "normal small Arial";
		document.getElementById("zoom1").style.border = "1px solid black";
		document.getElementById("zoom3").style.font = "normal small Arial";
		document.getElementById("zoom3").style.border = "1px solid black";
		medZoom.style.font = "bold small Arial";
		medZoom.style.border = "2px solid #00CC00";
	});
	GEvent.addDomListener(medZoom, "mouseover", function() {
		medZoom.style.backgroundColor = "#00DD00";
	});
	GEvent.addDomListener(medZoom, "mouseout", function() {
		medZoom.style.backgroundColor = "white";
	});

	var minZoom = document.createElement("div");
	minZoom.setAttribute('id', "zoom3");
	this.setButtonStyle_(minZoom);
	container.appendChild(minZoom);
	switch(language) {
		case 'it':
			minZoom.appendChild(document.createTextNode("Comune"));
			break;
		case 'en':
			minZoom.appendChild(document.createTextNode("County"));
			break;
		case 'de':
			minZoom.appendChild(document.createTextNode("Gemeinde"));
			break;
		case 'fr':
			minZoom.appendChild(document.createTextNode("Commune"));
			break;
		default: //use english as a default value
			minZoom.appendChild(document.createTextNode("County"));
			break;
	}
	GEvent.addDomListener(minZoom, "click", function() {
		map.setCenter(new GLatLng(43.585583,10.602064), 12, G_HYBRID_MAP);
		document.getElementById("zoom1").style.font = "normal small Arial";
		document.getElementById("zoom1").style.border = "1px solid black";
		document.getElementById("zoom2").style.font = "normal small Arial";
		document.getElementById("zoom2").style.border = "1px solid black";
		minZoom.style.font = "bold small Arial";
		minZoom.style.border = "2px solid #00CC00";
	});
	GEvent.addDomListener(minZoom, "mouseover", function() {
		minZoom.style.backgroundColor = "#00DD00";
	});
	GEvent.addDomListener(minZoom, "mouseout", function() {
		minZoom.style.backgroundColor = "white";
	});

	map.getContainer().appendChild(container);
	return container;
}

//step4: set default control position:
PredefinedZoomControl.prototype.getDefaultPosition = function() {
	return new GControlPosition(G_ANCHOR_BOTTOM_LEFT, new GSize(7,25));
}

//step5: set the proper CSS properties for the given button element:
PredefinedZoomControl.prototype.setButtonStyle_ = function(button) {
	button.style.color = "#0000cc";
	button.style.backgroundColor = "white";
	button.style.font = "small Arial";
	button.style.border = "1px solid black";
	button.style.padding = "2px";
	button.style.marginBottom = "3px";
	button.style.textAlign = "center";
	button.style.width = "60px";
	button.style.cursor = "pointer";
	button.style.position = "static";
}

function mostraMappa(lang) {
	if (GBrowserIsCompatible()) {
		language = lang;	//set up the global variable used to know what languare the map should talk
		//create the map
		mapOfLari = new GMap2(document.getElementById("map"));
		var Castello = new GLatLng(43.566026,10.592097);
		mapOfLari.setCenter(Castello, 17, G_SATELLITE_MAP);
		mapOfLari.addControl(new GSmallMapControl());
		mapOfLari.addControl(new GMapTypeControl());
		mapOfLari.addControl(new PredefinedZoomControl());
		mapOfLari.addControl(new GOverviewMapControl(new GSize(100,200)));

		myIcons["ristorante"] = createIcon("ristorante");
		myIcons["enoteca"] = createIcon("ristorante");
		myIcons["bar"] = createIcon("bar");
		myIcons["pizzeria"] = createIcon("ristorante");
		myIcons["ristorante-pizzeria"] = createIcon("ristorante");
		myIcons["hotel"] = createIcon("hotel");
		myIcons["agriturismo"] = createIcon("agriturismo");
		myIcons["beb"] = createIcon("beb");
		myIcons["affittacamere"] = createIcon("affittacamere");

		var requestD = GXmlHttp.create();
		switch (lang) {
			case "it":
			case "en":
			case "de":
			case "fr":
				requestD.open("GET", "../retrieve_data.php?lang="+lang, true);
				break;
			default:
				requestD.open("GET", "../retrieve_data.php", true);
				break;
		}
		requestD.onreadystatechange = function() {
			if(requestD.readyState == 4) {
				var XmlDoc = GXml.parse(requestD.responseText);
				//read the array of markers and loop through it
				var markers = XmlDoc.documentElement.getElementsByTagName("marker");
	
				for(var i=0; i<markers.length; i++) {
					var pointType = markers[i].getAttribute("type");
					var lat = parseFloat(markers[i].getAttribute("lat"));
					var lng = parseFloat(markers[i].getAttribute("lng"));
					var point = new GLatLng(lat,lng);
					var dist = point.distanceFrom(Castello)/1000;
					var currName = markers[i].getAttribute("name");
					var address = markers[i].getAttribute("address");
					var tel = markers[i].getAttribute("tel");
					var mobile = markers[i].getAttribute("mobile");
					var email = markers[i].getAttribute("email");
					var www = markers[i].getAttribute("www");

					var html = '<strong>' + currName + '</strong><br><em>' + address + '</em><br>';
					if(tel != '') {
						html += 'tel. ' + tel;
					}
					if(mobile != '') {
						html += '&nbsp\; cell. ' + mobile;
					}
					if(email != '') {
						html += '<br>email: <a href="mailto:' + email + '">' + email + '</a>';
					}
					if(www != '') {
						html += '<br>www: <a href="' + www + '" target="_blank">' + www + '</a>';
					}	
					switch(lang) {
						case 'it':
							html += '<br><em>Distanza dal Castello: ' + dist.toFixed(2) + ' km</em>';
							break;
						case 'en':
							html += '<br><em>Distance from the Castle: ' + dist.toFixed(2) + ' km</em>';
							break;
						case 'de':
							html += '<br><em>Entfernung zur Burg: ' + dist.toFixed(2) + ' km</em>';
							break;
						case 'fr':
							html += '<br><em>Distance du Ch&acirc;teau: ' + dist.toFixed(2) + ' km</em>';
							break;
						default:
							html += '<br><em>Distance from the Castle: ' + dist.toFixed(2) + ' km</em>';
							break;
					}
	
					mapOfLari.addOverlay(new myMarker(point, currName, html, myIcons[pointType], pointType));
					switch (pointType) {
						case "ristorante":
						case "ristorante-pizzeria":
						case "pizzeria":
						case "enoteca":
						case "bar":
							elencoPuntiMangiare.push(currName);
							break;
						case "hotel":
						case "agriturismo":
						case "beb":
						case "affittacamere":
							elencoPuntiDormire.push(currName);
							break;
					}
				}
				elencoPuntiDormire.sort();
				for(var i=0, s = elencoPuntiDormire.length; i < s; i++) {
					elencoPuntiDormire[i] = '<a href="javascript:viewPoint(\'' + elencoPuntiDormire[i] + '\');">' + elencoPuntiDormire[i] + '</a>';
				}
				elencoPuntiDormire = elencoPuntiDormire.join('<br>');
				document.getElementById("elencoD").innerHTML = elencoPuntiDormire;

				elencoPuntiMangiare.sort();
				for(var i=0, s=elencoPuntiMangiare.length; i < s; i++) {
					elencoPuntiMangiare[i] = '<a href="javascript:viewPoint(\'' + elencoPuntiMangiare[i] + '\');">' + elencoPuntiMangiare[i] + '</a>';
				}
				elencoPuntiMangiare = elencoPuntiMangiare.join('<br>');
				document.getElementById("elencoM").innerHTML = elencoPuntiMangiare;
			}
		}
		requestD.send(null);

	}
	else { //it seems that the browser isn't compatible with GMaps...
		alert("Il browser che stai utilizzando non &#232; compatibile con google map!");
		document.getElementById("map").innerHTML = "<p style='font-weight: bold'>Browser non compatibile!</p>";
	}
}

function checkWhatToDisplay() { //control check box status and change map consequently
	if(document.getElementById("mangiarechk").checked == false) {
		document.getElementById("elencoM").style.backgroundColor = "#EEEEEE";
		document.getElementById("elencoM").innerHTML = "";
		mapOfLari.closeInfoWindow();
		for(var i=0, s=markers.length; i<s; i++) {
			switch (markers[i].markerType) {
				case "ristorante":
				case "enoteca":
				case "pizzeria":
				case "ristorante-pizzeria":
				case "bar":
					markers[i].hide();
					break;
			}
		}
		document.getElementById("mangiarechk").checked = false; //ensure that the box is unchecked
	} else {
		document.getElementById("elencoM").style.backgroundColor = "white";
		document.getElementById("elencoM").innerHTML = elencoPuntiMangiare;
		for(var i=0, s=markers.length; i<s; i++) {
			switch (markers[i].markerType) {
				case "ristorante":
				case "enoteca":
				case "pizzeria":
				case "ristorante-pizzeria":
				case "bar":
					markers[i].show();
					break;
			}
		}
		document.getElementById("mangiarechk").checked = true; //ensure that the box is checked
	}

	if(document.getElementById("dormirechk").checked == false) {
		document.getElementById("elencoD").style.backgroundColor = "#EEEEEE";
		document.getElementById("elencoD").innerHTML = "";
		mapOfLari.closeInfoWindow();
		for(var i=0, s=markers.length; i<s; i++) {
			switch (markers[i].markerType) {
				case "hotel":
				case "agriturismo":
				case "beb":
				case "affittacamere":
					markers[i].hide();
					break;
			}
		}
		document.getElementById("dormirechk").checked = false; //ensure that the box is unchecked
	} else {
		document.getElementById("elencoD").style.backgroundColor = "white";
		document.getElementById("elencoD").innerHTML = elencoPuntiDormire;
		for(var i=0, s=markers.length; i<s; i++) {
			switch (markers[i].markerType) {
				case "hotel":
				case "agriturismo":
				case "beb":
				case "affittacamere":
					markers[i].show();
					break;
			}
		}
		document.getElementById("dormirechk").checked = true; //ensure that the box is checked
	}
}