$(document).ready(function() {

    var onMouseOutOpacity = 0.6;

    function removePhoto() {
        $('#photo').empty();
        $('#photo').append('<div id="photo-container"></div>');
        $('#thumbs .selected').css('opacity', 1.0).fadeTo('fast', onMouseOutOpacity);
        $('#thumbs .selected').removeClass('selected');
    }

    function loadPhoto(photo_item) {
        // Add prev/next links
        $('#photo-container').append('<ul id="controls"></ul>');
        $('#controls').append('<li><a href="javascript:" id="previous"><span>Newer</span></a></li>');
        $('#controls').append('<li><a href="javascript:" id="next"><span>Older</span></a></li>');

        $('#next').click(function() {
            $('a.thumb', $(photo_item).parent().next()).trigger('click');
            return false;
        });
        $('#previous').click(function() {
            $('a.thumb', $(photo_item).parent().prev()).trigger('click');
            return false;
        });

        if ($(photo_item).has("span.videoOverlay").length) {
           var photo_id = $(photo_item).find('img').attr('id');
           $('#photo-container').append('<div id="video-wrapper"><object type="application/x-shockwave-flash" width="500" height="281" data="http://www.flickr.com/apps/video/stewart.swf?v=71377" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"> <param name="flashvars" value="intl_lang=en-us&photo_secret=81294cc048&photo_id=' + photo_id + '&hd_default=false"></param> <param name="movie" value="http://www.flickr.com/apps/video/stewart.swf?v=71377"></param> <param name="bgcolor" value="#000000"></param> <param name="allowFullScreen" value="true"></param><param name="show_info" value="false"></param><embed type="application/x-shockwave-flash" src="http://www.flickr.com/apps/video/stewart.swf?v=71377" bgcolor="#000000" allowfullscreen="true" flashvars="intl_lang=en-us&photo_secret=81294cc048&photo_id=' + photo_id + '&hd_default=false&show_info=false" height="281" width="500"></embed></object></div>')

        } else {
            $('#photo-container').append('<img src="' + $(photo_item).attr('href') + '"/>');
        }   

        // $('#controls').css('width', $('#photo-container').css('width'));
        // $('#controls').css('height', $('#photo-container').css('height'));

        // Add metadata
        $(photo_item).parent().children('.metadata').clone().appendTo('#photo-container');
        // $('#photo-container').append(metadata);

        $(photo_item).addClass('selected');
        $('#thumbs .selected').css('opacity', 1.0);
    }

  function photoCallback() {
        // Get photo info from Flickr
        $('#thumbs li').each(getPhotoInfo);

        $('#thumbs').find('img').batchImageLoad({
            loadingCompleteCallback: function() {
                $('#loading').css('display', 'none');
                $('#loading').css('width', $('#photo').css('width'));
                $('#loading').css('height', 500);
                $('#thumbs').slideDown("slow");
            }});

        // Initially set opacity on thumbs and add
        // additional styling for hover effect on thumbs

        $('#thumbs').find('ul').addClass('thumbs');
        $('#thumbs input').each(function() { $(this).remove() });
        $('#thumbs').find('a').addClass('thumb');

        $('a.thumb').click(function() {
            var photo_item = this;
            $('#photo').fadeOut(200, function() { 
                $('#photo').css('display', 'none');
                removePhoto(); 
                $('#loading').css('display', 'block');
                loadPhoto(photo_item); 
                $('#photo').find('img').batchImageLoad({
                    loadingCompleteCallback: function() {
                        $('#loading').css('display', 'none');
                        $('#photo').delay(100).fadeIn(200);
                     }
                });
            });
            return false;
        });

        $('#thumbs ul.thumbs li a').css('opacity', onMouseOutOpacity).hover(
            function () {
              $(this).not('.selected').fadeTo('fast', 1.0);
            }, 
            function () {
              $(this).not('.selected').fadeTo('fast', onMouseOutOpacity);
            }
          );
        // $('a.thumb').first().trigger('click');

    }

    function getPhotoInfo() {
        var photo_item = this;

        $(photo_item).append('<ul class="metadata"></ul>');
        var metadata = $(photo_item).find('.metadata');
        var photo_id = $(photo_item).find('img').attr('id');

        var url = 'http://api.flickr.com/services/rest/?format=json&jsoncallback=?&api_key='
            + '1fbbc05c3831c7819b2f3d96e0a68681'
            + '&method=flickr.photos.getInfo'
            + '&photo_id=' + photo_id;

        // $.getJSON(url, function(info) {
$.ajax({
    type: 'GET',
    url: url,
    dataType: 'json',
    async: false,
    success: function(info) {
                if (info.photo.media == 'video')
                    $('a', photo_item).append('<span class="videoOverlay"></span>');

                // $(metadata).append('<li class="date">' +  info.photo.dates.taken + '</li>');
                $(metadata).append('<li class="date">' +  info.photo.dates.taken.substring(0,10) + '</li>');
                $(metadata).append('<li class="flickr-enlarge"><a href="' +  info.photo.urls.url[0]._content + '/sizes/l/" target="_blank">Enlarge</a></li>');
                $(metadata).append('<li class="flickr-url"><a href="' +  info.photo.urls.url[0]._content + '" target="_blank">Flickr</a></li>');

                // If the element is "first", click it.
                if ($('a.thumb').first().attr('href') == $(photo_item).find('a.thumb').attr('href'))  
                    $('a.thumb').first().trigger('click');
            }});
    } 
    
    var key = '1fbbc05c3831c7819b2f3d96e0a68681';

    // Adjust the photo div's height
    // $('#photo').css('height', $(window).height() - 48);

    $('#thumbs').flickr({
        api_key: key,
        user_id: '28085303@N00',
        type: 'search',
        sort: 'date-taken-desc',
        tags: 'Rachel, Gabriel',
        per_page: 100,
        callback: photoCallback});

});