var map, manager;
var centerLatitude = -41, centerLongitude = 174, startZoom = 6;


function createMarkerClickHandler(marker, text, link,imageid) {
	return function() {
		marker.openInfoWindowHtml(
			'<h3>' + text + '</h3>' +
			'<img style="border:solid 1px black;width:165px;height:120px;" src="getimage.aspx?imageid=' + imageid + '"/><p><a href="' + link + '">Go to garden page &raquo;</a></p>'
		);
		return false;
	};
}


function createMarker(pointData) {
	var latlng = new GLatLng(pointData.latitude, pointData.longitude);

var icon = new GIcon();

  var icon = new GIcon();
  icon.image = "images/lightblue" + pointData.abbr + ".png";
  icon.shadow = "";  /* no marker shadow used in favour of map usability */
  //icon.iconSize = new GSize(17, 19);  
  icon.iconAnchor = new GPoint(0, 19);
  icon.infoWindowAnchor = new GPoint(15, 1);

	opts = {
		"icon": icon,
		"clickable": true,
		"labelText": pointData.abbr,
		"labelOffset": new GSize(-16, -16)
	};
	var marker = new LabeledMarker(latlng, opts);
	var handler = createMarkerClickHandler(marker, pointData.name, pointData.wp,pointData.imageid);
	
	GEvent.addListener(marker, "click", handler);

	var listItem = document.createElement('li');
	listItem.innerHTML = '<div style="width:25px;"><img style="float:left;" src="images/lightblue' + pointData.abbr+'.png" /></div><div style="width:150px;float:left"><a href="' + pointData.wp + '">' + pointData.name + '</a></div>';
	listItem.getElementsByTagName('a')[0].onclick = handler;

	document.getElementById('sidebar-list').appendChild(listItem);

	return 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 = windowHeight() - document.getElementById('toolbar').offsetHeight - 30;
	document.getElementById('map').style.height = height + 'px';
	document.getElementById('sidebar').style.height = height + 'px';
}

function init() {
	handleResize();
	
	map = new GMap(document.getElementById("map"));
	
	map.setCenter(new GLatLng(centerLatitude, centerLongitude), startZoom);
	       map.addControl(new GLargeMapControl());
                                map.addControl(new GMapTypeControl());

	manager = new GMarkerManager(map);
	
	// This is a sorting trick, don't worry too much about it.
	//markers.sort(function(a, b) { return (a.abbr > b.abbr) ? +1 : -1; }); 
	
	batch = [];
	for(id in markers) {
		batch.push(createMarker(markers[id]));
	}
	manager.addMarkers(batch, 4);
	manager.refresh();
}

window.onresize = handleResize;
window.onload = init;
window.onunload = GUnload;