var map = null;
var markers = new Array();
var webcamids = new Array();

$(function() {
	if (GBrowserIsCompatible()) {
		map = new GMap2(document.getElementById("gmap"));

		map.addControl(new GSmallMapControl());
		map.setCenter(new GLatLng(_featlat, _featlon), _featzoom);

		// Wire google maps listeners
		GEvent.addListener(map, "moveend", function() {
			loadMarkers();
		});

		GEvent.addListener(map, "click", function(overlay, point) {
		 	if (overlay) {
		   		if (overlay.myhtml) {
		       		map.openInfoWindowHtml(overlay.latlng, overlay.myhtml);
		     	}
		   	}
		 });

		// Load the markers for the first time
		loadMarkers();
	}
});

function loadMarkers() {
	var bounds = map.getBounds();
	var zoomLevel = map.getZoom();

    $.post("/map/markers", {zoom: zoomLevel, 
        swLat: bounds.getSouthWest().lat(), swLon: bounds.getSouthWest().lng(), 
        neLat: bounds.getNorthEast().lat(), neLon: bounds.getNorthEast().lng()},
    	function(data) {
        	processMarkers(data, _smallMarkerSize);
    	}, "json"
   	);
}

function processMarkers(webcams, markerSize) {
	var marker = null;
	
	var markersInView = new Array();
	var idsInView = new Array();
	 
	// Loop through the new webcams
	for (var i = 0; i < webcams.length; i++) {
		var idx = markers.indexOf(webcams[i].id);

		if (idx == -1) {
			var info_html = "<table class='infowindow'>";
			info_html += "<tr><td class='img'><a href='/webcam/" + webcams[i].url + "' target='_blank'>";
			info_html += "<img src='/images/previews/daylight/" + webcams[i].smallimg + "_small.jpg' /></a><td>";
			info_html += "<td><p><b>" + webcams[i].loc + "</b><br />" + webcams[i].sdesc;
			info_html += "<br /><a href='/webcam/" + webcams[i].url + "' target='_blank'>Show webcam</a></p></td></tr>";
			info_html += "</table>";
			
			marker = new WebcamMarker(new GLatLng(webcams[i].latitude, webcams[i].longitude), 
		    	{image: "/images/previews/mini/" + webcams[i].img + ".jpg", 
		    		height: markerSize, width: markerSize});
			marker.myhtml = info_html;
			
			map.addOverlay(marker);
			markersInView[webcams[i].id] = marker;
		} else {
			markersInView[webcams[i].id] = markers[webcams[i].id];
		}
		
		idsInView.push(webcams[i].id);
	}

	// Now remove the markers outside of the viewport
	for (var i = 0; i < webcamids.length; i++) {
		var idx = markersInView.indexOf(webcamids[i]);

		if (idx == -1) {
			marker = markers[webcamids[i]];
			map.removeOverlay(marker);
		}
	}

	markers = markersInView;
	webcamids = idsInView;
}