// Javascript library for the /api page. (Panoramio API examples)

var photos;
var map;


$(function() {
  var scriptTag = document.createElement('script');
  scriptTag.src = 'http://www.panoramio.com/map/get_panoramas.php' +
    '?order=upload_date&set=4389221&from=0&to=100&callback=storePhotos&size=small';
  scriptTag.type = 'text/javascript';
  document.getElementsByTagName('head')[0].appendChild(scriptTag);
});

function storePhotos(photosJSON) {
  map = new GMap2(document.getElementById('map'));
  map.setCenter(new GLatLng(-33.880677, 151.3), 11);
  map.addControl(new GLargeMapControl());
  var icon = new GIcon();
  icon.image = '/img/panoramio-marker.png';
  icon.shadow = '/img/panoramio-shadow.png';
  icon.iconSize = new GSize(18, 18);
  icon.shadowSize = new GSize(22, 22);
  icon.iconAnchor = new GPoint(9, 9);
  icon.infoWindowAnchor = new GPoint(9, 0);

  var photos = photosJSON.photos;
  for (var i = 0; i < photos.length; i++) {
    var lat = photos[i].latitude;
    var lng = photos[i].longitude;
    var marker = new GMarker(new GLatLng(lat, lng), icon);
    marker.photo = photos[i];
    map.addOverlay(marker, icon);
    $('#exp2 .license').before(
        '<div><a target="_blank" title="Photo by ' +
        escape(photos[i].owner_name) + '" href="' +
        encodeURI(photos[i].photo_url) + '"><img src="' +
        'http://mw2.google.com/mw-panoramio/photos/square/' +
        escape(photos[i].photo_id) + '.jpg" alt="" /></a></div>');
  }

  GEvent.addListener(map, 'click', function(overlay, point) {
    if (!overlay || !overlay.photo) {
      return;
    }
    var p = overlay.photo;
    if (p.photo_title.length > 33) {
      p.photo_title = p.photo_title.substring(0, 33) + '&#8230;';
    }

    overlay.openInfoWindowHtml(
        '<div id="infowin" style="height:' + (p.height + 30) + 'px">' + 
		'<p><a target="_blank" class="photo_title" href="' + p.photo_url +
        '"><strong>' + p.photo_title + '<\/strong><\/a></p>' +
        '<a id="photo_infowin" target="_blank" href="' + p.photo_url + '">' +
        '<img width="' + p.width + '" height="' + p.height + '" src="' +
        p.photo_file_url + '"/><\/a>' +
        '<div style="overflow: hidden; width: 240px;">' +
        
        '<\/div>');
  });
}