var infowindow;
var map;

function initialize() {
	var myOptions = {
		zoom: 12,
		center: new google.maps.LatLng(51.526261049659425, -0.141448974609375),
		mapTypeId: google.maps.MapTypeId.ROADMAP
	}
	map = new google.maps.Map(document.getElementById("map-canvas-charge"), myOptions);
	downloadUrl("scripts/gmap-charge-points.xml", function(data) {
		var markers = data.documentElement.getElementsByTagName("marker");
		for (var i = 0; i < markers.length; i++) {
			var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")));
			var marker = createMarker(markers[i].getAttribute("name"), markers[i].getAttribute("addr"), markers[i].getAttribute("chrg"), markers[i].getAttribute("park"), markers[i].getAttribute("points"), latlng);
		}
	});
}

// icon for marker
var markerIcon = new google.maps.MarkerImage('http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=ev|83b41a|000000',
	new google.maps.Size(21,34),// size of image file
	new google.maps.Point(0,0),// origin
	new google.maps.Point(10,34)// anchor (x and y of the base point)
);

// icon for marker
var markerIconFreeCharge = new google.maps.MarkerImage('http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=ev|7bbddf|000000',
	new google.maps.Size(21,34),// size of image file
	new google.maps.Point(0,0),// origin
	new google.maps.Point(10,34)// anchor (x and y of the base point)
);

// icon for marker
var markerIconFreeBoth = new google.maps.MarkerImage('http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=ev|ffff75|000000',
	new google.maps.Size(21,34),// size of image file
	new google.maps.Point(0,0),// origin
	new google.maps.Point(10,34)// anchor (x and y of the base point)
);

// icon for marker
var markerIconFreePark = new google.maps.MarkerImage('http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=ev|ff75ff|000000',
	new google.maps.Size(21,34),// size of image file
	new google.maps.Point(0,0),// origin
	new google.maps.Point(10,34)// anchor (x and y of the base point)
);

// shadow for marker
var markerShadow = new google.maps.MarkerImage('http://maps.gstatic.com/intl/en_gb/mapfiles/shadow50.png',
	new google.maps.Size(37,34),
	new google.maps.Point(0,0),
	new google.maps.Point(10,33)
);


function createMarker(name, addr, chrg, park, points, latlng) {
	var theMarkerIcon = markerIcon;
	if (chrg == 'Free') {
		if (park == 'Free') {
			theMarkerIcon = markerIconFreeBoth;
		} else {
			theMarkerIcon = markerIconFreeCharge;
		}
	} else if (park == 'Free') {
		theMarkerIcon = markerIconFreePark;
	}
	var marker = new google.maps.Marker({
		position: latlng,
		map: map,
		icon: theMarkerIcon,
		shadow: markerShadow
	});
	google.maps.event.addListener(marker, "click", function() {
		if (infowindow) infowindow.close();
		infowindow = new google.maps.InfoWindow({
			content: '<p><strong>' + name + '</strong><br />' + addr + '</p><p>No of Points: ' + points + '</p><p>Charge Cost: ' + chrg + '</p><p>Park Cost: ' + park + '</p>'
		});
		infowindow.open(map, marker);
	});
	return marker;
}


// http://maps.gstatic.com/intl/en_gb/mapfiles/shadow50.png
// http://chart.apis.google.com/chart?chst=d_map_pin_shadow
// "\d+" : new Array\(("\d+\.\d+"), "([-]?\d+\.\d+)[ ]?", "<div class=\\"markerwindow\\"><div class=\\"pointname\\">([^<]+)</div><div class=\\"address\\">([^<]+<br />[^<]+)</div><div class=\\"details\\"><strong>Charge </strong>: (.*?)&nbsp;&nbsp;<strong>Park</strong>: (.*?)&nbsp;&nbsp;<strong>No. points</strong>: (\d+)</div></div>"\),