/*= requires 'jquery.flickr.js' from rpheath.com */
/*= requires 'jquery.cycle.lite.min.js' */

(function($) {
  
    $.template = function(string, o) {
        return string.replace(/{\s([^{}]*)\s}/g, 
            function (a, b) {
                var r = o[b];
                return typeof r === 'string' || typeof r === 'number' ? r : a;
            } 
        );
    };

    $.fn.flickr_feed = function(opts) {

        options = $.extend({}, $.fn.flickr_feed.defaults, opts);

        var $this = this;

        $.flickr.settings = {
            api_key:         options.api_key,
            thumbnail_size: 'sq'
        }
        
        $.getJSON($.flickr.url('flickr.photos.search', {'user_id': options.user_id, 'per_page':options.limit, 'extras': 'url_m'}), function(data) {
            var photos = (data.photos === undefined ? data.photoset : data.photos)
            var html = ($.map(photos.photo, function(photo) {
            
                var old_dim = {w:photo.width_m, h:photo.height_m}
                var new_dim = {w:options.image_width, h:options.image_height};
                
                var old_aspect_ratio  = ( old_dim.w / old_dim.h);
                var new_aspect_ratio  = ( new_dim.w / new_dim.h );
                                
                var new_w = new_dim.w;
                var new_h = new_dim.h;
                                
                return $.template(options.template, { 
                    IMAGE_DETAIL_URI:   ['http://www.flickr.com/photos', photo.owner, photo.id].join('/'),
                    IMAGE_SRC:          photo.url_m,
                    IMAGE_WIDTH:        new_h * old_aspect_ratio,
                    IMAGE_HEIGHT:       new_h,
                    IMAGE_DESCRIPTION:  photo.title,                    
                    ACCOUNT_URI:        "http://www.flickr.com/photos/" + options.user_name
                });
            })).join('\n');

            $this.html(html);
            $this.cycle();
        })

    };

    $.fn.flickr_feed.defaults = {
        user_name:      'cascadianfarm',
        user_id:        'cascadianfarm',
        image_width:    209,
        image_height:   122,
        limit:          '5',
        template: 
                        '<div class="image-with-caption">\n' +
                        '    <a href="{ IMAGE_DETAIL_URI } "><img src="{ IMAGE_SRC }" width="{ IMAGE_WIDTH }" height="{ IMAGE_HEIGHT }" alt="" title="" /></a>\n' +
                        '    <div class="caption-area">\n' +
                        '        <div class="caption"><a href="{ IMAGE_DETAIL_URI }">{ IMAGE_DESCRIPTION }</a></div>\n' +
                        '        <div class="more"><a href="{ ACCOUNT_URI }">See All</a></div>\n' +        
                        '    </div>\n' +
                        '</div>'
    };
  
})(jQuery);