// ============================================================================
//  flickr_gmap.js
//
//  Geotagged photos, which were uploaded at flickr, can be plotted on 
//  Google Maps in your website. Firstly, you should geotag your photos.
//  Secondly, you should get flickr and Google Maps API key.
//  Visit and get api-key in http://www.flickr.com/services/api/keys/apply/
//  and http://code.google.com/apis/maps/signup.html
//
//  Copyright 2009 Hitoshi Taguchi <tagchan@gmail.com>
//  http://www.tagchan.net/
//
// ============================================================================

// Input your flickr api-key and user-id
var apikey = "e0c65155a65b79c9a6c9bd0776908bb3";
var userid = "7593934@N02";

// Input your Google Maps API Key
var maps_key = "ABQIAAAANb5JuD4i3v_Isz_A_z4ipxTrwmVSgF6tOzG2piSiw3F-ORmacRQGqjoiQ55HzLvszowcXYUDT1mXwA";

var ini_pages = 1;
var max_pages;
var page = 1;

function load(){
  getjsonSearch(apikey, userid, ini_pages);
}

function getjsonSearch(key, id, p){
  var req_url = "http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=" + key + "&user_id=" + id + "&sort=date-taken-desc&extras=geo,date_taken,owner_name&per_page=50&page="+ p +"&format=json&jsoncallback=jsonPhoto";
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = req_url;
  document.getElementsByTagName("head")[0].appendChild(script);
  return;
}

// Parse JSON file and create marker for Google Maps
function jsonPhoto( obj ){
  max_pages = obj.photos.pages;
  sidebar_html = "<ul style='margin:1px;'>";
  for(var i=1; i<= max_pages; i++){
    if(i==page){
      sidebar_html += "-"+ i +"";
    } else {
      sidebar_html += "-<a href='javascript:change_page("+ i +")'>"+ i +"</a>";
    }
  }
  // Each picture which is geotagged
  for(var i=0; i<obj.photos.photo.length; i++){
    var photo = obj.photos.photo[i];
    // URL of photos. The format of URL is witten in http://www.flickr.com/services/api/misc.urls.html
    var str = "http://static.flickr.com/" + photo.server +"/"+ photo.id +"_"+ photo.secret + "_t.jpg";
    if( photo.longitude > -0.001 && photo.longitude < 0.001 && photo.latitude > -0.001 && photo.latitude < 0.001 ){
    //alert("ou");
    } else {
      // Get parameters from JSON file and make points
      var point = new GLatLng(photo.latitude, photo.longitude);
      var title = photo.title;
      var owner = photo.ownername;
      var lng = photo.longitude;
      var lat = photo.latitude;
      var location_accuracy = photo.accuracy;
      var date = photo.datetaken;

      var id_url = "http://www.flickr.com/photos/" + userid + "/"+ photo.id +"/";
      var div = document.createElement("img");
      div.src = str;

      // create markers points
      var marker = createMarker(point, i, title, date, str, lat, lng, id_url, location_accuracy, owner);
      // create sidebar contents
      sidebar_html += "<li> <a href='javascript:spotZoom("+ i +")'><b>" + title + "</b></a> " + date + " [<a href='" + id_url + "'><span style='color: rgb(0, 99, 220);'>flick</span><span style='color: rgb(255, 0, 132);'>r</span></a>]</li>";
      map.addOverlay(marker);
    }
  }

  for(var i=1; i<= max_pages; i++){
    if(i==page){
      sidebar_html += "-"+ i +"";
    } else {
      sidebar_html += "-<a href='javascript:change_page("+ i +")'>"+ i +"</a>";
    }
  }
  sidebar_html += "</ul>";
  document.getElementById("sidebar").innerHTML = sidebar_html;
  return;
}


function change_page(p){
  page = p;
  map.clearOverlays();
  getjsonSearch(apikey, userid, p);
}

// Create markers
function createMarker(point, index, title, date, str, lat, lng, id_url, location_accuracy, owner) {
  markerPoints[index] = point;
  var marker = new GMarker(point, photoIcon);
  markers[index] = marker;
  var html = createMarkerContent(point, index, title, date, str, lat, lng, id_url, location_accuracy, owner);
  GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml(html);
  });
  return marker;
}

// Create markers content "fukidashi"
function createMarkerContent(point, index, title, date, str, lat, lng, id_url, location_accuracy, owner) {
  var html = "<div style='width:250px;height:170px;font-size:11px;'><div style='font-size:14px;color:#ffffff;background:#8fabbe;'>" + title + "</b></div> <b>" + date + " [<a href='" + id_url + "'><span style='color: rgb(0, 99, 220);'>flick</span><span style='color: rgb(255, 0, 132);'>r</span></a>] by "+ owner +"</b><br><a href='" + id_url + "'><img src= '" + str + "'></a><br>Lat: " + lat + ", Lon:" + lng + "<br>Location accuracy: " + location_accuracy + "<br>[<a href='javascript:zoomin(" + lat + "," + lng + ");'>zoom in<\/a>]</div>";
  markerContents[index] = html;
  return html;
}

// Zoom-in
function zoomin(latn, lonn) { 
  map.setCenter(new GLatLng(latn,lonn), 15);
}

// Zoom a marker, when a sidebar list is clicked.
function spotZoom(index) {
  map.panTo(markerPoints[index]);
  markers[index].openInfoWindowHtml(markerContents[index]);
}

// show coordinates and zoom number
function updateStatus(){
  var point = map.getCenter();
  var status = "<b>Current zoom level:</b>  "+map.getZoom()+" <b>Map center location:</b> Lon "+ Math.round(point.x*100000)/100000 + "&deg;, Lat " + Math.round(point.y*100000)/100000+ "&deg;";
  document.getElementById("status").innerHTML = status;
}