$(document).ready(function() {

url = "http://api.flickr.com/services/rest/?method=flickr.photosets.getPhotos&api_key=b10e0d99395c039db14565a7eed11b69&photoset_id=" + set + "&extras=url_m&per_page=50&format=json&nojsoncallback=1" 

$.getJSON(url, function(data) {

    $("<img  />").attr({ src: data.photoset.photo[0].url_m, 
                        title: data.photoset.photo[0].title,
                        alt: data.photoset.photo[0].title,
                        width: 500
                        }).appendTo("#big_photo")

    $.each(data.photoset.photo, function(i,item){                                          
      photo = $("<img  />").attr({ src: item.url_m, 
                          title: item.title,
                          alt: item.title
                          });
                          

      if(item.height_m > item.width_m ){
        photo.attr({ 'class': 'tall'});
      } else {
        photo.attr({ 'class': 'wide'});
      }
      photo.appendTo("#gallery");
    
    });

    $('#gallery').width( ( $('#gallery').children().size() * 132 ) );

    $('#gallery img').click(function(){
      $('#big_photo img').attr( {src: $(this).attr('src'), 'class': $(this).attr('class') } );
      return false;
    });

    $('#next_photo').click(function(){
      if( $('#gallery').position().left >= -($('#gallery').width() - 660 )) {
        $('#gallery').animate({ left: "-=528" }, 500 );
      } else {
        $('#gallery').animate({ left: "0px" }, 500 );
      }
      return false;
    });

    $('#prev_photo').click(function(){
      if( $('#gallery').position().left < 0) {
        $('#gallery').animate({ left: "+=528" }, 500 );
      } else {
        $('#gallery').animate({ left: "0px" }, 500 );
      }
      return false;
    });
    

});


});