//<![CDATA[
var map;
var zoomDefault = 10; 
var zoomMin = 1;
var geocoder;

function load(ll) {
    if (GBrowserIsCompatible()) {
        geocoder = new GClientGeocoder();
        map = new GMap2(document.getElementById('map'));
	
	var userLatLng;
	if (ll) {
	    userLatLng = GLatLng.fromUrlValue(ll);
	} else if (google.loader.ClientLocation && google.loader.ClientLocation.latitude) {
	    userLatLng = new GLatLng(google.loader.ClientLocation.latitude,
				     google.loader.ClientLocation.longitude);
	} else {
	    userLatLng = new GLatLng(40.756054, -73.986951);
	}

	//alert('you are at lat=' + google.loader.ClientLocation.latitude + 'long=' +
	//		 google.loader.ClientLocation.longitude );
	//new GLatLng(40, 0);
	setGPS(userLatLng);
	centerMap(userLatLng, zoomDefault);
	//map.setCenter(userLatLng, zoomDefault);
	
	var ovMap=new GOverviewMapControl(new GSize(150,150)); 
	map.addControl(ovMap); 
	
	// ====== Restricting the range of Zoom Levels =====
	// Get the list of map types      
	var mt = map.getMapTypes();
	    // Overwrite the getMinimumResolution() and getMaximumResolution() methods
	for (var i=0; i<mt.length; i++) {
	    mt[i].getMinimumResolution = function() {return zoomMin;};
	    mt[i].getMaximumResolution = function() {return 14;};
	}
	//alert(mt.length);
	map.setMapType(G_PHYSICAL_MAP); 
	G_PHYSICAL_MAP.getMinimumResolution = function () { return zoomMin;}; 
	G_PHYSICAL_MAP.getMaximumResolution = function() {return 14;};
	
        //map.addControl(new GSmallMapControl());
        //map.addControl(new GMapTypeControl());
	
	map.setUI(map.getDefaultUI());
	//map.enableGoogleBar();
	
	searchWebcamsIn(map.getBounds(), 1000);
	moveListener = GEvent.addListener(map, "moveend", 
			   function() {
			       setGPS(map.getCenter());
			       searchWebcamsIn(map.getBounds(), 1000);});
    }
}

function setGPS(center) {
    var gpsDiv = document.getElementById("gps");
    var newNode = document.createTextNode('GPS (latitude='+center.lat()+', longitude='+center.lng()+')');
    gpsDiv.replaceChild( newNode, gpsDiv.firstChild );

    var linktext='<a href="http://www.123cam.com/webcam_map.php?ll='+center.toUrlValue()+'" target="_top">123Cam</a>';
    var txtArea = document.getElementById('linktext');
    txtArea.value = linktext;    
}

function displayMapInfo() {
    var mapInfo = document.getElementById("mapInfo");
    if (mapInfo.style.display == 'block') {  
	mapInfo.style.display = 'none';
    } else {
	mapInfo.style.display = 'block';
    }

}

function searchLocation() {
    var address = document.getElementById('addressInput').value;
    geocoder.getLatLng(address, function(latlng) {
	if (!latlng) {
            alert(address + ' Sorry could not locate "'+ address+'"');
	} else {	    
	    centerMap(latlng, zoomDefault);
	    searchWebcamsIn(map.getBounds(), 1000);
	    //searchLocationsNear(latlng);
	}
    });
}

function centerMap(center, zoomLevel) {
    map.setCenter(center, zoomLevel);
}

function searchLocationsNear(center, radius, maxnum) {
    //var radius = 9999;//document.getElementById('radiusSelect').value;
    //var maxnum = 5000;
    //alert(radius);
    var searchUrl = 'webcam_genxml.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius + '&maxnum=' + maxnum;
    GDownloadUrl(searchUrl, function(data) {
	var xml = GXml.parse(data);
	var markers = xml.documentElement.getElementsByTagName('marker');
	map.clearOverlays();
	
	//var sidebar = document.getElementById('sidebar');
	//sidebar.innerHTML = '';
	if (markers.length == 0) {
            //sidebar.innerHTML = 'No results found.';
            //map.setCenter(new GLatLng(40, 0), 4);
            return;
	}
	
	//	var bounds = new GLatLngBounds();
	var prevDist = -1000;
	//if (typeof markersArray === 'undefined') {
        markersArray=[];
	//}
	for (var i = 0; i < markers.length; i++) {
	    var distance = parseFloat(markers[i].getAttribute('distance'));	   
	    
	    //if (distance - prevDist > 200) {
	    var id = markers[i].getAttribute('id');
            var name = markers[i].getAttribute('name');
            var address = markers[i].getAttribute('address');
            
            var point = new GLatLng(parseFloat(markers[i].getAttribute('lat')),
                parseFloat(markers[i].getAttribute('lng')));
            var url = 'http://www.123-cams.com/webcam.php?var=' + id;
            var marker = createMarker(point, name, url);
            map.addOverlay(marker);
	    // markersArray.push(marker); //cluster
	    
            //var sidebarEntry = createSidebarEntry(marker, name, address, distance);
            //sidebar.appendChild(sidebarEntry);
            //bounds.extend(point);
	    prevDist = distance;
	    //}
	}
	//map.setCenter(bounds.getCenter(), 1);//map.getBoundsZoomLevel(bounds));
	/*	if (typeof cluster === 'undefined') {
	
	} else {
	    ///cluster.removeMarkers();
	    cluster.clearMarkers();
	    delete cluster;
	}
	///cluster=new ClusterMarker(map, { markers:markersArray } );
	var zoom = null;
        var size = 80;
        var style = null;
	cluster=new MarkerClusterer(map, markersArray, {maxZoom: zoom, gridSize: size});
	*/ //cluster
	//cluster.refresh();
	//cluster.fitMapToMarkers();
	
    });
}

function searchWebcamsIn(bounds, maxnum) {
    //var radius = 9999;//document.getElementById('radiusSelect').value;
    //var maxnum = 5000;
    //alert(radius);

    var searchUrl = 'webcam_genxml.php?lat=' + bounds.getSouthWest().lat() + '&lng=' + bounds.getSouthWest().lng() + '&lat2=' + bounds.getNorthEast().lat() + '&lng2=' + bounds.getNorthEast().lng() + '&maxnum=' + maxnum;
    GDownloadUrl(searchUrl, function(data) {
	var xml = GXml.parse(data);
	var markers = xml.documentElement.getElementsByTagName('marker');
	map.clearOverlays();
	
	//var sidebar = document.getElementById('sidebar');
	//sidebar.innerHTML = '';
	if (markers.length == 0) {
            //sidebar.innerHTML = 'No results found.';
            //map.setCenter(new GLatLng(40, 0), 4);
            return;
	}
	
//	var bounds = new GLatLngBounds();
	var prevDist = -1000;
	//if (typeof markersArray === 'undefined') {
            markersArray=[];
	//}
	for (var i = 0; i < markers.length; i++) {
	    //var distance = parseFloat(markers[i].getAttribute('distance'));	   
	    
	    //if (distance - prevDist > 200) {
	    var id = markers[i].getAttribute('id');
            var name = markers[i].getAttribute('name');
            var address = markers[i].getAttribute('address');
	    var pays = markers[i].getAttribute('pays');
	    var image = markers[i].getAttribute('image');
	    //var image = "http://www.123-cam.com/images/" + pays + "/" + id + ".jpg"
            var point = new GLatLng(parseFloat(markers[i].getAttribute('lat')),
                parseFloat(markers[i].getAttribute('lng')));
            var url = 'http://www.123-cam.com/webcam.php?var=' + id;
            var marker = createMarker(point, name, url, image);
            map.addOverlay(marker);
	}
    });
}

function createMarker(point, name, url, image) {
	var marker = new GMarker(point);
	//var html = '<a href="' + url + '">' + name + '</a>';
	var html = '<img src="http://www.123-cam.com/'+image+'" width="80" height="60" alt="'+image+'" border="1"><a href="' + url + '" onclick="window.open(\'' + url + '\'); return false;">  ' + name + '</a>';

	//var html = '<b>' + name + '</b> <br/>' + url;
	GEvent.addListener(marker, 'click', function() {
	    GEvent.removeListener(moveListener);
	    map.setCenter(marker.getPoint());
	    setGPS(map.getCenter());            
	    marker.openInfoWindowHtml(html);
	    moveListener = GEvent.addListener(map, "moveend", 
					      function() {
						  GEvent.removeListener(moveListener);
						  moveListener = GEvent.addListener(map, "moveend", 
										    function() {
											setGPS(map.getCenter());
											searchWebcamsIn(map.getBounds(), 1000);
										    });
					      })
	});
    return marker;
}

function createSidebarEntry(marker, name, address, distance) {
      var div = document.createElement('div');
      var html = '<b>' + name + '</b> (' + distance.toFixed(1) + ')<br/>' + address;
      div.innerHTML = html;
      div.style.cursor = 'pointer';
      div.style.marginBottom = '5px'; 
      GEvent.addDomListener(div, 'click', function() {
        GEvent.trigger(marker, 'click');
      });
      GEvent.addDomListener(div, 'mouseover', function() {
        div.style.backgroundColor = '#eee';
      });
      GEvent.addDomListener(div, 'mouseout', function() {
        div.style.backgroundColor = '#fff';
      });
      return div;
    }
    //]]>