var map;
var centerLatitude = 52.5166667;
var centerLongitude = 13.4;
var startZoom = 13;
// create an icon for the clusters
var iconCluster = new GIcon();
iconCluster.image = "http://googlemapsbook.com/chapter7/icons/cluster.png";
iconCluster.shadow = "http://googlemapsbook.com/chapter7/icons/cluster_shadow.png";
iconCluster.iconSize = new GSize(26, 25);
iconCluster.shadowSize = new GSize(22, 20);
iconCluster.iconAnchor = new GPoint(13, 25);
iconCluster.infoWindowAnchor = new GPoint(13, 1);
iconCluster.infoShadowAnchor = new GPoint(26, 13);
// create an icon for the pins
var iconSingle = new GIcon();
iconSingle.image = "http://googlemapsbook.com/chapter7/icons/single.png";
iconSingle.shadow = "http://googlemapsbook.com/chapter7/icons/single_shadow.png";
iconSingle.iconSize = new GSize(12, 20);
iconSingle.shadowSize = new GSize(22, 20);
iconSingle.iconAnchor = new GPoint(6, 20);
iconSingle.infoWindowAnchor = new GPoint(6, 1);
iconSingle.infoShadowAnchor = new GPoint(13, 13);


function initializeClusters(centerLatitude,centerLongitude,startZoom) {
	map = new GMap2(document.getElementById("map_canvas"));
	map.addControl(new GSmallMapControl());
	map.setCenter(new GLatLng(centerLatitude, centerLongitude), startZoom);
	updateMarkers();
	GEvent.addListener(map, 'zoomend', function() {		
		updateMarkers();
	});
	GEvent.addListener(map, 'moveend', function() {
		updateMarkers();
	});
}

var updateIsRunning = false;
function updateMarkers() {
	if (updateIsRunning == false) {
		updateIsRunning = true;
		// remove the existing points
		map.clearOverlays();
		// create the boundary for the data to provide
		// initial filtering
		var bounds = map.getBounds();
		var southWest = bounds.getSouthWest();
		var northEast = bounds.getNorthEast();
		var getVars = northEast.toUrlValue() + '/' + southWest.toUrlValue()+ '/';
		// log the URL for testing
		//GLog.writeUrl('/a_getGoogleMapCluster/getCitiesArr/' + getVars);
		// retrieve the points
		var request = GXmlHttp.create();
		request.open('GET', '/a_getGoogleMapCluster/getCitiesArr/' + getVars, true);
		request.onreadystatechange = function() {
			if (request.readyState == 4) {
				var jscript = request.responseText;
				var points;
				eval(jscript);
				// create each point from the list
				for (i in points) {
					var point = new GLatLng(points[i].lat, points[i].lng);
					
					var marker = createMarker(point, points[i].type,points[i].title,points[i].links);
					map.addOverlay(marker);
				}
				updateIsRunning = false;
			}
		}
		request.send(null);
	} else {
	 return true;
	}
}
function createMarker(point, type, html, link) {
	
	var ssicon = new GIcon();
	if (type == 'cm') {
		ssicon.image ="/images/public/googleMapCM.png";
	} else if (type == 'cz') {
		ssicon.image ="/images/public/googleMapCZ.png";
	} else if (type == 'z') {
		ssicon.image ="/images/public/googleMapGray.png";
	} else {
		ssicon.image ="/images/public/googleMap.png";
	}
//	ssicon.iconSize = new GSize(35,35);
	ssicon.iconAnchor = new GPoint(9, 30);
	ssicon.infoWindowAnchor = new GPoint(5, 1);

	var marker = new GMarker(point, ssicon);
	
	var newZoomLevel = map.getZoom();
	
	if (type == 'm' || type == 'z') {
		
		if(link !=''){
			GEvent.addListener(marker, "click", function()
			{window.open(link)});
		}
	
		GEvent.addListener(marker, "mouseover", function()
		{showInfo(html);});
		
	
		GEvent.addListener(marker, "mouseout", function()
		{hideInfo();});
	} else {
		
			GEvent.addListener(marker, "mouseover", function()
			{showInfo(html);});
				
			
			GEvent.addListener(marker, "mouseout", function()
			{hideInfo();});
			
			GEvent.addListener(marker, "click", function() {
				hideInfo();//to prevent comment being displayed after one zoom
				
				if (newZoomLevel < 5) {
					newZoomLevel = newZoomLevel + 3;
				} else if (newZoomLevel < 10) {
					newZoomLevel = newZoomLevel + 2;
				} else {
					newZoomLevel = newZoomLevel + 1;				
				}
				
				map.setCenter(point, newZoomLevel); 
			});
				
		
	}
	
	return marker;	
}

function showInfo(info_text) {	
	var hg = $('map_canvas').offsetHeight;
	var mt = hg - hg/5;
	var wh = $('map_canvas').offsetWidth-20;
	
		
	var elDiv = new Element('div', {'id':'window_info', 'html': info_text, 'styles': {'background-color':'#000000','color':'#ffffff','font-weight':'bold','opacity':'.6','height':(hg/5-10)+'px','width':wh+'px','padding':'5px 5px 5px 15px'}}).injectInside('map_canvas1');
	
	
}

function hideInfo(){
	if(document.getElementById("window_info")){
		document.getElementById("window_info").destroy();
	}
}