// point array
var point_types=[];point_types[0]='View Point';point_types[1]='Car Parking';point_types[2]='Maritime';point_types[3]='Other';var customIcons = [];customIcons[0] = new GIcon();customIcons[0].image='imgs/icon_d_view.png';customIcons[0].iconAnchor = new GPoint(0, 0);customIcons[0].iconSize = new GSize(25, 25);customIcons[0].shadow = 'imgs/icon_s_view.png';customIcons[0].shadowSize = new GSize(38.0, 25.0);customIcons[0].infoWindowAnchor = new GPoint(5, 1);customIcons[1] = new GIcon();customIcons[1].image='imgs/icon_m_view.png';customIcons[1].iconAnchor = new GPoint(0, 0);customIcons[1].iconSize = new GSize(25, 25);customIcons[1].shadow = 'imgs/icon_s_view.png';customIcons[1].shadowSize = new GSize(38.0, 25.0);customIcons[1].infoWindowAnchor = new GPoint(5, 1);customIcons[2] = new GIcon();customIcons[2].image='imgs/icon_d_park.png';customIcons[2].iconAnchor = new GPoint(0, 0);customIcons[2].iconSize = new GSize(25, 25);customIcons[2].shadow = 'imgs/icon_s_park.png';customIcons[2].shadowSize = new GSize(38.0, 25.0);customIcons[2].infoWindowAnchor = new GPoint(5, 1);customIcons[3] = new GIcon();customIcons[3].image='imgs/icon_m_park.png';customIcons[3].iconAnchor = new GPoint(0, 0);customIcons[3].iconSize = new GSize(25, 25);customIcons[3].shadow = 'imgs/icon_s_park.png';customIcons[3].shadowSize = new GSize(38.0, 25.0);customIcons[3].infoWindowAnchor = new GPoint(5, 1);customIcons[4] = new GIcon();customIcons[4].image='imgs/icon_d_maritime.png';customIcons[4].iconAnchor = new GPoint(0, 0);customIcons[4].iconSize = new GSize(25, 25);customIcons[4].shadow = 'imgs/icon_s_maritime.png';customIcons[4].shadowSize = new GSize(38.0, 25.0);customIcons[4].infoWindowAnchor = new GPoint(5, 1);customIcons[5] = new GIcon();customIcons[5].image='imgs/icon_m_maritime.png';customIcons[5].iconAnchor = new GPoint(0, 0);customIcons[5].iconSize = new GSize(25, 25);customIcons[5].shadow = 'imgs/icon_s_maritime.png';customIcons[5].shadowSize = new GSize(38.0, 25.0);customIcons[5].infoWindowAnchor = new GPoint(5, 1);customIcons[6] = new GIcon();customIcons[6].image='imgs/icon_d_info.png';customIcons[6].iconAnchor = new GPoint(0, 0);customIcons[6].iconSize = new GSize(25, 25);customIcons[6].shadow = 'imgs/icon_s_info.png';customIcons[6].shadowSize = new GSize(38.0, 25.0);customIcons[6].infoWindowAnchor = new GPoint(5, 1);customIcons[7] = new GIcon();customIcons[7].image='imgs/icon_m_info.png';customIcons[7].iconAnchor = new GPoint(0, 0);customIcons[7].iconSize = new GSize(25, 25);customIcons[7].shadow = 'imgs/icon_s_info.png';customIcons[7].shadowSize = new GSize(38.0, 25.0);customIcons[7].infoWindowAnchor = new GPoint(5, 1);icon_cluster= new GIcon();icon_cluster.image='imgs/icon_cluster.png';icon_cluster.iconAnchor = new GPoint(25, 25);icon_cluster.iconSize = new GSize(50, 50);icon_cluster.shadow = 'imgs/icon_s_cluster.png';icon_cluster.shadowSize = new GSize(76.0, 50.0);icon_cluster.infoWindowAnchor = new GPoint(5, 1);
// default lat, lon and zoom levels
var center_lat=51.96117;
var center_lon=1.353624;
var start_zoom=5;
var map_type=0;

// min zoom level for markers
var detail_zoom=8;

//var description='Center point';
// the google map
var map;
// google map event listener
var myEventListener;

// list of markers currently on map
var marker_list=new Object;

// geocoder
var geocoder;

// globals holding types of marker to show
var load_ptype=0;
var load_owner=0;

// status bar to show all text information
// global reference
var status_bar;

function StatusControl() {
	// create local vars
	this.statusDiv=document.createElement("div");
	this.currentTextNode=document.createTextNode("");
	this.statusDiv.appendChild(this.currentTextNode);
}

// subclass
StatusControl.prototype = new GControl();

// initialise
StatusControl.prototype.initialize = function(map) {
	var container = document.createElement("div");
	
	container.appendChild(this.statusDiv);
		
	map.getContainer().appendChild(container);
	
	this.setButtonStyle_(this.statusDiv);
	return container;
}

// default positioning
StatusControl.prototype.getDefaultPosition = function()
{
 	return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(100, 7));
}

// CSS for the button element.
StatusControl.prototype.setButtonStyle_ = function(button)
{
	button.style.textDecoration = "none";
	button.style.color = "black";
	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 = "12em";
	button.style.cursor = "pointer";
}

// display given text inside status bar
StatusControl.prototype.setText = function(newtext)
{
	// create new text node
	var newTextNode=document.createTextNode(newtext);
	// replace text node
	this.statusDiv.replaceChild(newTextNode, this.currentTextNode);
	// keep new text node
	this.currentTextNode=newTextNode;
}

// end status bar

function createMarker(id, userid, username, point, label, ptype)
{
	/// create a new marker from given data
	/// return the new marker

	var iptype=ptype-1;

	// user not logged in 
	iptype=iptype*2;
	

	// html for displaying in info window
	var html = '<table><tr><td class="map_label">' + label + '</td></tr><tr><td class="map_update">Created by ' + username  + '</td></tr>';
	//html=html+'<tr><td class="map_update">Last updated on ' + updated + '<td/></tr>';

	

	// new marker

	// check if cluster or normal marker

	if(ptype==0)
	{
		// cluster marker
		var marker = new GMarker(point,{draggable: false, icon: icon_cluster});
	}else{
		// standard marker
		var marker = new GMarker(point,{draggable: false, icon: customIcons[iptype]});
	
		// add an event listener to capture mouse clicks
		GEvent.addListener(
			// marker to attach event to
			marker,
			// event
			'click',
			// function to apply on event
			function()
			{
				// allow user to view details
				var html2="<tr><td><a href=\"view_marker.php?marker_id="+id+"&amp;maplat="+map.getCenter().lat()+"&amp;maplon="+map.getCenter().lng()+"&amp;mapzoom="+map.getZoom()+"&amp;maptype="+map_type+"\" >Details</a></td></tr>";
				// display info window
				marker.openInfoWindowHtml(html+html2+"</table>");
			}
		);
	}

	return marker;
}

function removeAllMarkers()
{
	// remove all markers from marker list
	
	// clear array
	//marker_list=null;
	marker_list=new Object;

	// clear map
	map.clearOverlays();
//alert("cleared");
}
function addAMarker(id, marker)
{
	// add marker to list and map
	// add to list
	//if(marker_list[''+id]==null)
	if((id==0)||!(''+id in marker_list))
	{
		marker_list[''+id]=marker;
		// add to map
		map.addOverlay(marker);
	}

//alert("adding");
}
function removeMarker(i)
{
	// remove marker at index i from map and array
	
	// remove from map
	map.removeOverlay(marker_list[i]);

	// remove marker from array
	delete marker_list[''+i];
	//marker_list.splice(i,1);
}
function load(/*GLatLngBounds*/ new_boundary)
{
	var zoom=map.getZoom();
	//if(zoom<detail_zoom)
		// do not load markers
	//	return;
//if(marker_list.length>0) alert(""+marker_list.length);
	ptype=load_ptype;
	owner=load_owner;
	/// load all markers
	// display only those of ptype
	// ptype 0 displays all
	// display markers owner by owner
	// owner 0 displays all

	// clear map of all markers
	if(zoom<detail_zoom)
	{
 		map.clearOverlays();
	}else{
			// clear map of markers outside boundary
		//	var rl;
			for(key in marker_list)
			{
		//alert(''+key);
		//rl=rl+', '+key;
				if(new_boundary.containsLatLng((marker_list[''+key].getLatLng()))==false)
				{
					// marker is outside boundary
					// remove it
					removeMarker(key);
					//rl=rl+', '+key;
					//Alert("Removing");
				}
			}
		//alert(rl);
		/*
		// add marker
		map.addOverlay(marker)
		
		//remove marker from array
		removeOverlay(overlay)
		marker_list.splice(index,howmany
		clear array
		clearOverlays()
		marker_list=null
		*/
	}
	// get new boundary data
	var lat_ne=new_boundary.getNorthEast().lat();
	var lon_ne=new_boundary.getNorthEast().lng();
	var lat_sw=new_boundary.getSouthWest().lat();
	var lon_sw=new_boundary.getSouthWest().lng();

	

	//document.getElementById("messagediv").innerHTML = "Please Wait...Loading Markers"; 
	status_bar.setText("Loading Markers...");
	// download markers from database
	GDownloadUrl(
		// database script returning xml
		"map_data.php?lat_ne="+lat_ne+"&lon_ne="+lon_ne+"&lat_sw="+lat_sw+"&lon_sw="+lon_sw+"&zoom="+zoom+"&ptype="+ptype+"&owner="+owner,
		// function to apply after data downloaded
		function(data)
		{
			// parse the xml data
			var xml = GXml.parse(data);
			var markers = xml.documentElement.getElementsByTagName("marker");

			// for each marker
			for (var i = 0; i < markers.length; i++)
			{
				// get marker data

				// marker id
				var id = markers[i].getAttribute("id");
				// userid
				var userid=markers[i].getAttribute("userid");
				// user name
				var username=markers[i].getAttribute("username");
				// marker label
				var label = markers[i].getAttribute("label");
				// marker description
				//var description = markers[i].getAttribute("description");
				// marker type
				var ptype = markers[i].getAttribute("ptype");
				// marker location
				var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
							parseFloat(markers[i].getAttribute("lon")));
				// date created
				//var created=markers[i].getAttribute("created");
				// date last updated
				//var updated=markers[i].getAttribute("updated");

				// create marker from data
				var marker = createMarker(id, userid, username, point, label, ptype);
			
				// add marker to list
				//mgr.addMarker(marker, 0, 17);
				addAMarker(id, marker);
			}
			status_bar.setText("Ready");
		}
	);
	// redraw markers
	//mgr.refresh();
	//document.getElementById("messagediv").innerHTML ="All markers loaded";
}


function init()
{
	/// starting google map function
	// initialise
	if(GBrowserIsCompatible())
	{
		map=new GMap2(document.getElementById("map"), {draggableCursor: 'crosshair', draggingCursor: 'pointer'});

		// center
		var location=new GLatLng(center_lat, center_lon);
		map.setCenter(location, start_zoom);

		// map type
		map.setMapType(map.getMapTypes()[map_type]);

		// specify user controls
		map.addControl(new GLargeMapControl());
		map.addControl(new GMapTypeControl());
		map.addControl(new GOverviewMapControl());
		status_bar=new StatusControl();
		map.addControl(status_bar);
		

		// use geocoder
		geocoder = new GClientGeocoder();

		// use marker manager
		//mgr = new MarkerManager(map, {trackMarkers:true});

		// load markers for whole visible map
		load(map.getBounds());

		// add listeners to alter boundary when zooming and panning
		GEvent.addListener(map,'zoomend', function()
		{
			// remove all existing markers
			//mgr.clearMarkers();
			removeAllMarkers();
			// load markers
			load(map.getBounds());
		});

		GEvent.addListener(map,'moveend', function()
		{
			// load markers
			load(map.getBounds());
			
		});

		GEvent.addListener(map,'maptypechanged', function()
		{
			// map type changed
			// map, satellite, hybrid
			for(var i = 0; i < map.getMapTypes().length; i++)
			{
				if (map.getCurrentMapType() == map.getMapTypes()[i])
				{
					map_type = i;
				}
			} 

//alert(""+map_type);
			
		});


	}else{
		// browser not compatible
		alert('Your browser is not compatible with the Google Maps API!');
	}
}



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