//Goes out to Flickr and grabs photos

var $numberThumbs = 8;

$(function () {

    jQuery('#latestPics').append('<div class="thumbLoader"></div>');

    //assign your api key equal to a variable
    var apiKey = 'f8682c3b5ebfdb5ae95a6c39d7a9614f';

    //the initial json request to flickr

    $.getJSON('http://api.flickr.com/services/rest/?&method=flickr.people.getPublicPhotos&api_key=' + apiKey + '&user_id=35099762@N04&per_page=' + $numberThumbs + '&page=1&extras=url_m,url_o&format=json&jsoncallback=?',
        function (data) {

            //loop through the results with the following function
            $.each(data.photos.photo, function (i, item) {

                var photoURLm, photoID;

                photoURLm = 'http://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_m.jpg';

                //turn the photo id into a variable
                photoID = item.id;

                $.getJSON('http://api.flickr.com/services/rest/?&method=flickr.photos.getInfo&api_key=' + apiKey + '&photo_id=' + photoID + '&format=json&jsoncallback=?',
                    function (data) {
                        var imgCont, photoTitle;

                        if (data.photo.title._content !== '') {
                            photoTitle = data.photo.title._content;
                        }
                        imgCont = '<a href="gallery.php" title=" ' + photoTitle + '"><img class="flickrThumbs" height="50" width="50" src="' + photoURLm + '" alt="' + photoTitle + '" title="' + photoTitle + '" /></a>';
                        //change to keep aspect ratio and give background color
                        //append the 'imgCont' variable to the document

                        $('#latestPics').append(imgCont);
                    });
            });
        });
});


function loadThumbs() {
    if ($('#latestPics img').size() === $numberThumbs) {
        $('.thumbLoader').toggle('fade', 400, function () {
            $('.flickrThumbs').each(function () {
                $(this).toggle('fade', 1200);
            });
        });
    } else {
        setTimeout(loadThumbs, 50);
    }
}
$(window).load(loadThumbs);