var map = null;
var photos = null;
var markers = [];
var points = [];
var markercnt = 0;
var dicon = null;

function load() {
if (GBrowserIsCompatible()) {
map = new GMap2( $("map") );
map.addControl(new GLargeMapControl3D());
map.addControl(new GMenuMapTypeControl(true, false));
map.setCenter(new GLatLng(49.47946, 8.502522), 16);
map.setMapType(G_SATELLITE_MAP);
map.addMapType(G_PHYSICAL_MAP);
map.addMapType(G_SATELLITE_3D_MAP);

dicon = new GIcon();
dicon.image = "http://www.panoramio.com/img/panoramio-marker.png";
dicon.iconSize = new GSize(23, 23);
dicon.iconAnchor = new GPoint(10, 10);
dicon.infoWindowAnchor = new GPoint(10, 0);
getPanoramio();
}

var el = document.createElement("div");
el.innerHTML = "<a href='#¥' onclick=' getPanoramio(); return false;' >更新</a>";
el.style.position="absolute";
el.style.bottom="470px";
el.style.left="470px";
$("map").appendChild( el );
}

window.onload=function() { load(); 
}

function getPanoramio(){
var b = map.getBounds();
var ne = b.getNorthEast();
var sw = b.getSouthWest();
var minx = sw.lng();
var miny = sw.lat();
var maxx = ne.lng();
var maxy = ne.lat();
var url = "http://www.panoramio.com/map/get_panoramas.php?order=popularity&set=public&from=0&to=30&minx="+minx+"&miny="+miny+"&maxx="+maxx+"&maxy="+maxy+"&size=small&callback=setPanoramio";
var el = document.createElement("script");
el.setAttribute("type","text/javascript");
el.setAttribute("src", url);
document.getElementsByTagName("head").item(0).appendChild(el);
}

function setPanoramio(o){
photos = o.photos;
for(var i=0; i<photos.length;i++){
var p = photos[i];
var icon = new GIcon( dicon );
icon.image = p.photo_file_url;
var str = "<p>"+p.photo_title+"</p><br />";
str += "<a href='"+p.photo_url+"' title='写真へ' target='_blank'>";
str += "<img src='"+p.photo_file_url+"' style='width:"+p.width+"; height:"+p.height+"; border:0;' />";
str += "</a>";
str += "<br />";
str += "Posted by <a href='"+p.owner_url+"' target='_blank'>"+p.owner_name+"</a></div>";
var lat = p.latitude;
var lon = p.longitude;
setMarker(markercnt, lat, lon, str, icon);
var li = document.createElement("li");
li.innerHTML = "<a href='#' onclick='markers["+markercnt+"].myStrOpen(); return false;'>"+p.photo_title+"</a>";
li.id = "marker_"+markercnt;
$("sidebar").appendChild(li);
markercnt ++;
}

if( markercnt > 100){
var start = markers.length - 100 - 30;
if(start < 0) start = 0;
var end = markers.length - 100;
for(var i = start; i < end; i++){
map.removeOverlay(markers[i]);
if( $("marker_"+i) ) $("markers").removeChild($("marker_"+i));
}
}
}

function  setMarker(id, lat, lon, str, icon){
points[id] = new GLatLng( lat, lon );
markers[id] = new GMarker(points[id], icon);
map.addOverlay(markers[id]);
GEvent.addListener(markers[id], 'click', function(){
markers[id].openInfoWindowHtml(str);
});
markers[id].myStrOpen = function (){
markers[id].openInfoWindowHtml(str);
}
}