window.onload = initialize;

function initialize() {
	var latlng = new google.maps.LatLng(35.68171868938779, 139.7672186817169);
	var myOptions = {
		zoom: 15,
		center: latlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	google.maps.event.addListener(map, 'click', function(event) {
		h_locationClick(event.latLng);
	});
	h_locationClick(latlng);
}
  
function h_locationClick(location) {
	document.getElementById("latlng").innerHTML = "location : " + location.lat() + ", " + location.lng();
	var url = "imageList.php?lat=" + location.lat() + "&lon=" + location.lng();
	var script  = document.createElement( 'script' );
    script.type = 'text/javascript';
    script.src  = url;
    document.body.appendChild( script );
	show_waiting("photos");
} 


function remove_children ( id ) {
    var div = document.getElementById( id );
    while ( div.firstChild ) { 
        div.removeChild( div.lastChild );
    }
};

function show_waiting ( id ) {
	remove_children(id);
    var div = document.getElementById( id );
	var img = document.createElement( 'img' );
    img.src = 'img/wait.png';
    img.style.border = '0';
    div.appendChild(img);
};



function callback(obj) {
	remove_children("photos");
    var div = document.getElementById("photos");
    
	for( var i=0; i<obj.length; i++ ) {
        var photo = obj[i];
		
        var linkNode = document.createElement( 'a' );
        linkNode.href = photo.link;
		linkNode.target = 'photo';

        var img = document.createElement( 'img' );
        img.src = photo.src;
		if (photo.title) {img.alt = photo.title + " "};
		img.style.border = '0';
        linkNode.appendChild( img );
        div.appendChild( linkNode );
    }
}