/**
 * @author Mark
 */
            // Jquery Function Definitions
            //
            // This function grabs the flickr feed
            (function($){
                // Anonymous Function Passing in jQuery So I can use $ shorthand without 
                // having to worry about other libraries using $.
                $.fn.dd_grabFlickrSet = function(params){
                    // Loop for each matching passed in DOM Elements
                    return this.each(function(){
                        // There should only be one request since the feed is
                        // provided in the request but I'll handle all in the
                        // event that the same slide show is wanted more than
                        // once on the same page.
                        //
                        var $flickr_set = $(this);
                        if (params.clearTarget == true) {
                            $flickr_set.empty();
                        }                        
                        //
                        // Array to hold slide information
                        //
                        var slides = new Array();
                        //
                        // slideshow container divs
                        //
                        var $show = $('<div>').
                            addClass('dd_slideshow').
                            data('playing',params.autoStart).
                            prepend('<div>').
                               find('div').
                               css('width',params.width).
                               css('height',params.height).
                               addClass('dd_slide').
                               end().
                            prepend('<div>').
                               find('div:first').
                               addClass('dd_navigation_container').
                               prepend($('<div>').
                                   addClass('dd_navigation')).
                               end().
                            prependTo($flickr_set);
                        //
                        // Variable to make manageing navigation easier
                        //
                        var $nav_div   = $show.find('div.dd_navigation');
                        //
                        // variable to make managing slides easier
                        //
                        var $slide_div = $show.find('div.dd_slide');
                        //
                        // variable to keep track of the slide we are on
                        //
                        var slide = 1;
                        //
                        // Variable to hold slideset number
                        //
                        var slide_set = 0;
                        //
                        // The URL to request flickr set
                        //
                        var request_url = 'http://api.flickr.com/services/rest/' +
                        '?method=flickr.photosets.getPhotos' +
                        '&api_key=' +
                        params.apiKey +
                        '&photoset_id=' +
                        params.set +
                        '&format=json&jsoncallback=?';
                        //
                        // Un-comment and past the url in the alert box to 
                        // test your URL and varify your api key and set id                   
                        // alert(request_url);
                        //
                        // Make the initial AJAX call to retrieve the set
                        // and populate the slides array with the information
                        // we will use within our slideshow.
                        //
                        var img_count = 0; // Total numbe of images
                        $.getJSON(request_url, function(data){
                            photos = (data.photos === undefined ? 
                                 data.photoset : data.photos)
                            $.map(photos.photo, function(photo){
                                img_count++;
                                slides[img_count] = {
                                     // The URL for the thumbnail we will use
                                     thumb_url:   'http://farm' + photo.farm +
                                                  '.static.flickr.com/' +
                                                   photo.server +
                                                  '/' +
                                                   photo.id +
                                                  '_' +
                                                   photo.secret +
                                                   params.thumbnailSize +
                                                  '.jpg',
                                     // The URL of the image we will pull from 
                                     // flickr
                                     img_url:     'http://farm' + photo.farm +
                                                  '.static.flickr.com/' +
                                                   photo.server +
                                                  '/' +
                                                   photo.id +
                                                  '_' +
                                                   photo.secret +
                                                   params.imageSize +
                                                  '.jpg',
                                     // The URL of the flickr page that contins
                                     // the image within the relevent set.
                                     flickr_url:  'http://www.flickr.com/photos/' +
                                                   params.owner + '/' + 
                                                   photo.id + '/in/set-' +
                                                   params.set + '/',
                                     alt:          photo.title
                                }
                            });
                            //
                            // Function to display desired slide
                            //
                            var $load_slide = function(slide_number) {
                                // Keep our global slide position up to date
                                slide = slide_number;
                                if (slide >= img_count) {
                                    slide = 1;
                                    side_set = 1;
                                    $load_thumbs(slide);
                                }
                                var $loading = $('<h1>').
                                               text(params.loadingText).
                                               attr('id','dd_loading').
                                               addClass('animated').
                                               css('opacity','0.6').
                                               css('z-index',params.zIndex + 2).
                                               show();
                                $('#dd_loading').remove();
                                $slide_div.append($loading);
                                var $pre_slide = $slide_div.
                                    find('#' + 'slide_' + params.set + '_' + slide);
                                if ($pre_slide.size() == 1) {
                                    $slide_div.find('.animated').
                                        stop(true, true).
                                        css('z-index', params.zIndex).
                                        fadeOut(params.fadeOut);
                                    $pre_slide.addClass('animated').
                                        fadeIn(params.fadeIn).
                                        css('z-index', params.zIndex + 1);
                                }
                                else {
                                    $slide_div.append($('<a>').
                                        prepend($('<img>').
                                        css('opacity', '0').
                                        attr('id', 'slide_' + params.set + '_' + slide).
                                        attr('src', slides[slide].img_url).load(function(){
                                            $slide_div.find('.animated').
                                                stop(true, true).
                                                css('z-index', params.zIndex).
                                                fadeOut(params.fadeOut);
                                            $(this).addClass('animated').animate({
                                                opacity: '1.0'
                                                }, params.fadeIn).css('z-index', params.zIndex + 1);
                                        })).
                                        attr('href', slides[slide_number].flickr_url)
                                    );
                                }
                                if ($show.data('playing')) {
                                    if (slide % params.thumbnailsPerPage == 0) {
                                       slide_set++;
                                       $load_thumbs(slide);
                                    }  
                                    var intervalID = setTimeout(function(){
                                        if ($show.data('playing')) $load_slide(slide+1);
                                    }, params.betweenSlides);
                                    $show.data('timer',intervalID);
                                }                                 
                            };
                            //
                            // Function to display thumbnail's
                            //
                            var $load_thumbs = function(start_posn) {
                                // We don't want to try and load more
                                // thumbnails than exist.
                                var end_posn = start_posn +  params.thumbnailsPerPage;
                                if (end_posn > img_count) {
                                    end_posn = img_count;
                                }
                                $nav_div.empty();

                                for (var i = start_posn; i < end_posn; i++) {
                                    // Create the thumbnail add attach hover
                                    // to make is full opacity when hovered over.
                                    // Additionally we call load_image when clicked.
                                    $thumb = $('<img>').
                                        attr('title', slides[i].alt).
                                        attr('src', slides[i].thumb_url).
                                        css('opacity', '0.4').
                                        fadeIn('slow').
                                        hover(function(){
                                           $(this).css('opacity', '1');
                                        }, function(){
                                           $(this).css('opacity', '0.4');
                                        }).
                                        data('id',i).
                                        click(function() {
                                            clearTimeout($show.data('timer'));
                                            $show.data('playing',false);
                                            $slide_div.find('.animated').
                                                stop(true, true);
                                            var $play = $('<a>')
                                                .attr('id','dd_play_slideshow')
                                                .text(params.playText)
                                                .click(function () {
                                                    $show.data('playing',true);
                                                    $load_slide(slide + 1);
                                                    $('#dd_play_slideshow').remove();
                                                });
                                                $nav_div.append($play);
                                            $load_slide($(this).data('id'));
                                        });
                                    $nav_div.append($thumb);
                                } // for loop
                            } // load_thumbs
                            if (slide_set === 0) {
                                slide_set = 1;
                                $load_thumbs(slide_set);
                                $load_slide(slide);
                            }
                        });
                    }); //For each matching element
                }; // dd_grabFlickrFeed          
            })(jQuery);