// globals
var xhr = false;

// arrays to hold copies of the markers and html used by the sidebar
var gmarkers = [];
var htmls = [];
var sidebar_html = "";

// map, cluster and info bubble
var map = null;
var mc = null;
var infowindow = null;

// icon locations
var codebase = "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer";
var chartbase = "http://chart.apis.google.com/chart";

// our normal pin to show on the map
var npic = new google.maps.MarkerImage(
	chartbase + "?chst=d_map_pin_letter_withshadow&chld=|66FF66|202020",
	new google.maps.Size(40, 37),
	new google.maps.Point(0, 0),
	new google.maps.Point(13, 37),
	new google.maps.Size(27, 25)
);
// various cluster pin styles
var styles = [[
	{url: chartbase + "?chst=d_map_pin_letter_withshadow&chld=|FF66FF|202020", width: 27, height: 25},
	{url: chartbase + "?chst=d_map_pin_letter_withshadow&chld=|FF66FF|202020", width: 27, height: 25},
	{url: chartbase + "?chst=d_map_pin_letter_withshadow&chld=|FF66FF|202020", width: 27, height: 25},
	{url: chartbase + "?chst=d_map_pin_letter_withshadow&chld=|FF66FF|202020", width: 27, height: 25},
	{url: chartbase + "?chst=d_map_pin_letter_withshadow&chld=|FF66FF|202020", width: 27, height: 25}
],[
	{url: codebase + "/images/m1.png", width: 27, height: 25},
	{url: codebase + "/images/m2.png", width: 27, height: 25},
	{url: codebase + "/images/m3.png", width: 27, height: 25},
	{url: codebase + "/images/m4.png", width: 27, height: 25},
	{url: codebase + "/images/m5.png", width: 27, height: 25}
],[
	{url: codebase + "/images/people35.png", width: 27, height: 25},
	{url: codebase + "/images/people45.png", width: 27, height: 25},
	{url: codebase + "/images/people55.png", width: 27, height: 25}
],[
	{url: codebase + "/images/conv30.png", width: 27, height: 25},
	{url: codebase + "/images/conv40.png", width: 27, height: 25},
	{url: codebase + "/images/conv50.png", width: 27, height: 25}
]];

// who does not like a good old fashioned cluster, cause thats what we have here
var style = 0;
var mcOptions = {
	gridSize: 30,
	maxZoom: 6,
	zoomOnClick: false,
	averageCenter: true,
	minimumClusterSize: 5,
	title: "Group of Pins",
	styles: styles[style]
};
// functions to read xml data
function makeRequest(url) {
	if (window.XMLHttpRequest) {
		xhr = new XMLHttpRequest();
	} else {
		if (window.ActiveXObject) {
			try {
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e) { }
		}
	}
	if (xhr) {
		xhr.onreadystatechange = showContents;
		xhr.open("GET", url, true);
		xhr.send(null);
	} else {
		document.write("Error making the ajax request");
	}
}

function showContents() {
	var xmldoc = '';
	if (xhr.readyState === 4)
	{
		// Run on server (200) or local machine (0)
		if (xhr.status === 200 || xhr.status === 0) {
			xmldoc = xhr.responseXML;
			makeMarkers(xmldoc);
		} else {
			document.write("Unable to read the map pin data, result was - " + xhr.status);
		}
	}
}

// Create the map and load our data
function initialize() {
	// create the map
	var latlng = new google.maps.LatLng(43.802819, 11.099289);
	var options = {
		zoom: 5,
		center: latlng,
		scrollwheel: false,
		mapTypeId: google.maps.MapTypeId.SATELLITE,
		mapTypeControlOptions: {
			style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
		},
		zoomControl: true,
		zoomControlOptions: {
			style: google.maps.ZoomControlStyle.LARGE
		}
	};
	
	map = new google.maps.Map(document.getElementById("map"), options);
	
	// load the members
	makeRequest("https://girovagandoinmontagna.com/gim/index.php?PHPSESSID=bded11ec8dabec036d9fcce76982743d&action=googlemap;sa=.xml");
	
	// Our own initial state button since its gone walkies in the v3 api
	var reset = document.getElementById("googleMapReset");
	reset.style.filter = "alpha(opacity=0)";
	reset.style.mozOpacity = "0";
	reset.style.opacity = "0";
}

// Read the output of the marker xml
function makeMarkers(xmldoc) {
	var markers = xmldoc.documentElement.getElementsByTagName("marker");
	for (var i = 0; i < markers.length; ++i) {
		var point = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")));
		var html = markers[i].childNodes[0].nodeValue;
		var label = markers[i].getAttribute("label");
		var marker = createMarker(point, npic, label, html, i);
	}
	// send the markers array to the cluster script
	mc = new MarkerClusterer(map, gmarkers, mcOptions);
	
	google.maps.event.addListener(mc, "clusterclick", function(cluster) {
		if (infowindow)
			infowindow.close();
		var clusterMarkers = cluster.getMarkers();
		map.setCenter(cluster.getCenter());

		// build the info window content
		var content = "<div style=\"text-align:left\">";
		var numtoshow = Math.min(cluster.getSize(),10);
		for (var i = 0; i < numtoshow; ++i) {
			content = content + "<img src=\"" + clusterMarkers[i].icon.url + "\" width=\"12\" height=\"12\" />   " + clusterMarkers[i].title + "<br />";
		}
		if (cluster.getSize() > numtoshow)
			content = content + "<br />Plus [" + (cluster.getSize() - numtoshow) + "] other Pins";
		content = content + "</div>";

		infowindow = new google.maps.InfoWindow;
		myLatlng = new google.maps.LatLng(cluster.getCenter().lat(), cluster.getCenter().lng());
		infowindow.setPosition(myLatlng);
		infowindow.setContent(content);
		infowindow.open(map);
	});
	// put the assembled sidebar_html contents into the sidebar div
	document.getElementById("googleSidebar").innerHTML = sidebar_html;
}

// Create a marker and set up the event window
function createMarker(point, pic, name, html, i) {
	// map marker
	var marker = new google.maps.Marker({
		position: point,
		map: map,
		icon: pic,
		clickable: true,
		title: name.replace(/\[b\](.*)\[\/b\]/gi, "$1")
	});

	// listen for a marker click
	google.maps.event.addListener(marker, "click", function() {
		if (infowindow)
			infowindow.close();
		infowindow = new google.maps.InfoWindow({content: html, maxWidth:240});
		infowindow.open(map, marker);
	});
	
	// save the info used to populate the sidebar
	gmarkers.push(marker);
	htmls.push(html);
	name = name.replace(/\[b\](.*)\[\/b\]/gi, "<strong>$1</strong>");

	// add a line to the sidebar html	
		sidebar_html += '<a href="javascript:finduser(' + i + ')">' + name + '</a><br /> ';
	// return the marker....

	return marker;
}

// Picks up the sidebar click and opens the corresponding info window
function finduser(i) {
	if (infowindow)
		infowindow.close();
	infowindow = new google.maps.InfoWindow({content: htmls[i], maxWidth:240});
	infowindow.open(map, gmarkers[i]);
}

function resetMap() {
	// reset the map to inital values
	infowindow.close();
	map.setCenter(new google.maps.LatLng(43.802819, 11.099289));
    map.setZoom(5);
    map.setMapTypeId(google.maps.MapTypeId.SATELLITE);
}
	
google.maps.event.addDomListener(window, "load", initialize);