// ============================================================================
//  flickr_gmap.js
//
//  Geotagged photos, which were uploaded at flickr site, can be plotted on 
//  Google Maps in your website. Firstly, you shold geotag your photos.
//  You can geotag your photos easily using bookmarklet.
//  See http://labs.sumaato.net/tools/flickr_geocode_bookmarklet/.
//  Secondly, you should get flickr api key.
//  Visit and get api-key in http://www.flickr.com/services/api/keys/apply/
//
//  Copyright 2007 Hitoshi Taguchi <tagchan@gmail.com>
//  http://www.tagchan.net/
//
// ============================================================================

// Get JSON file
function getJSON() {
  // Input your api-key and user-id
  var apikey = "fe5f2c5bfc261f4dfaac82d7a9a4929a";
  var userid = "28110754@N04";

  // Get the JSON file
  //   See API method (http://www.flickr.com/services/api/)
  //   and flickr.photos.search (http://www.flickr.com/services/api/flickr.photos.search.html)
  var req_url = "http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=" + apikey + "&user_id=" + userid + "&sort=date-taken-desc&extras=geo,date_taken,owner_name&format=json";
  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 jsonFlickrApi( obj ){
  sidebar_html = "<ul>";
  // Each picture which is geotagged
  for(var i=0; i<obj.photos.photo.length; i++){
    var photo = obj.photos.photo[i];
    if(photo.latitude>0){

      // 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";

      // 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/cyberwonk/"+ photo.id +"/";
      var div = document.createElement("img");
      div.src = str;
      //document.getElementsByTagName("body")[0].appendChild(div);

      // 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>]";
      map.addOverlay(marker);
    }
  }
  sidebar_html += "</ul>";
  document.getElementById("sidebar").innerHTML = sidebar_html;
  return;
}


// 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;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 + "' align='left' /></a>Lat: " + lat + ", Lon:" + lng + "<br>Location accuracy: " + location_accuracy + "<br>[<a href='javascript:zoomin(" + lat + "," + lng + ");'>zoom in<\/a>]<br clear='all' /></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;
}