var map = null;
var webcamMarkers = [];
var webcamMarkersId = [];
var i = null;
var tooltip = null;
var moveendHandle = null;
var lang = null;
var placeIcon = null;
var baseIcon = null;
var webcamIcon = null;
var orgLon = null;
var orgLat = null;
var baseLon = null;
var baseLat = null;
var baseMarker = null;

function load(lat,lon,l)
{
	lang = l;
	orgLon = lon;
	orgLat = lat;
	baseLon = lon;
	baseLat = lat;
	if (GBrowserIsCompatible())
	{
		baseIcon = new GIcon(G_DEFAULT_ICON);
		baseIcon.iconSize=new GSize(22,19);
		baseIcon.shadowSize=new GSize(59,32);
		baseIcon.iconAnchor=new GPoint(11,19);
		baseIcon.infoWindowAnchor=new GPoint(11,0);
		webcamIcon = new GIcon(baseIcon, "/images/webcam2.png", null, "/images/webcam.shadow.png");
		
		placeIcon = new GIcon(G_DEFAULT_ICON);
		placeIcon.iconSize=new GSize(18,40);
		placeIcon.iconAnchor=new GPoint(0,40);
		placeIcon.image = "/images/flagpole4.png";
		placeIcon.shadow = "/images/null.gif";
		
		map = new GMap2(document.getElementById("map"));
		map.setCenter(new GLatLng(lat,lon), 8);
		map.addMapType(G_PHYSICAL_MAP);
		map.setMapType(G_PHYSICAL_MAP);
		
		moveendHandle = GEvent.addListener( map, "moveend", function() { newCenter(lang); } );
		GEvent.addListener( map, "zoomend", function() { newZoomLevel(map); } );
	}
	tooltip = document.createElement("div");
	document.getElementById("map").appendChild(tooltip);
	tooltip.style.visibility="hidden";
	
	newCenter(lang);
}

function createMarker(point,id,html,label)
{
	html = html.replace(/!BOLDEND/g,'</b>');
	html = html.replace(/!BOLD/g,'<b>');
	html = html.replace(/!IMAGEEND/g,'" width="80" height="60" border="1">');
	html = html.replace(/!IMAGE/g,'<img src="');
	html = html.replace(/!LINEBREAK/g,'<br>');
	html = html.replace(/!LINKSTARTEND/g,'">');
	html = html.replace(/!LINKSTART/g,'<a href="');
	html = html.replace(/!LINKEND/g,'</a>');
	html = html.replace(/!MORE/g,'&raquo;');
	html = '<div>' + html + '</div>';
	var marker = new GMarker(point,webcamIcon);
	marker.tooltip = '<div class="marker">&nbsp;'+label+'&nbsp;</div>';
	GEvent.addListener(marker, "click", function() {
		tooltip.style.visibility="hidden";
		GEvent.removeListener(moveendHandle);
		marker.openInfoWindowHtml(html);
	});
	GEvent.addListener(marker, "infowindowclose", function() {
		moveendHandle = GEvent.addListener( map, "moveend", function() { newCenter(lang); } );
	});
        GEvent.addListener(marker,"mouseover", function() {
		showTooltip(marker);
        });        
        GEvent.addListener(marker,"mouseout", function() {
		tooltip.style.visibility="hidden";
        });        
	webcamMarkers.push(marker);
	return marker;
}

function showTooltip(marker) {
	tooltip.innerHTML = marker.tooltip;
	var point=map.getCurrentMapType().getProjection().fromLatLngToPixel(map.getBounds().getSouthWest(),map.getZoom());
	var offset=map.getCurrentMapType().getProjection().fromLatLngToPixel(marker.getPoint(),map.getZoom());
	var anchor=marker.getIcon().iconAnchor;
	var width=marker.getIcon().iconSize.width;
	var pos = new GControlPosition(G_ANCHOR_BOTTOM_LEFT, new GSize(offset.x - point.x - anchor.x + width,- offset.y + point.y +anchor.y)); 
	pos.apply(tooltip);
	tooltip.style.visibility="visible";
}

function newCenter(lang)
{
	var bounds = map.getBounds();
	var sw = bounds.getSouthWest();
	var ne = bounds.getNorthEast();
	var lonmin = sw.lng();
	var lonmax = ne.lng();
	var latmin = sw.lat();
	var latmax = ne.lat();
	
	map.clearOverlays();
	var point = new GLatLng(baseLat,baseLon);
	var baseMarker = new GMarker(point,placeIcon);
	map.addOverlay(baseMarker);
	
	var url = "/include/webcam.php?lang="+lang+"&lonmin="+lonmin+"&lonmax="+lonmax+"&latmin="+latmin+"&latmax="+latmax;
	GDownloadUrl( url, function( data, responseCode) {
		var xml = GXml.parse(data);
		var webcams = xml.documentElement.getElementsByTagName("webcam");
		for( i = 0; i < webcams.length; i++ )
		{
			var point = new GLatLng( parseFloat(webcams[i].getAttribute("lat")), parseFloat(webcams[i].getAttribute("lon")));
			var html = webcams[i].getAttribute("name");
			var label = webcams[i].getAttribute("label");
			var marker = createMarker(point,i,html,label);
			map.addOverlay(marker);			
		}
	});	
}

function newZoomLevel(map)
{
	if(map.getZoom() < 8)
		map.setZoom(8);		
	if(map.getZoom() > 10)
		map.setZoom(10);		
		
}