(function($) { var opts
	$.fn.fancyFlickr = function(options) {
 		var opts = $.extend($.fn.fancyFlickr.settings, options);
		
		$.fn.fancyFlickr.settings.el=$(this);
		
		$.getJSON(
			"http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
			{
				id: opts.flickrId,
				format: 'json'
			},
			$.fn.fancyFlickrCallback  
		);
	}
		
	$.fn.shuffle = function(array) {		
		var j, x, i = array.length;
		
		while (i) {
			j = parseInt(Math.random() * i);
			x = array[--i];
			array[i] = array[j];
			array[j] = x;
		}
		
		return array;
	}
		
	$.fn.fancyFlickrCallback = function(data) {		
		var textToInsert = '';
		
		data.items=$.fn.shuffle(data.items);

		$.each(data.items, function (i, item) {
			
			if (i == $.fn.fancyFlickr.settings.numPics){
				return false;
			}
			
			/*the json does not contain links for image thumbnails and large pics, only for medium size pics
			so we need to create the urls for these image sizes (_t.jpg, _b.jpg, _m.jpg specify the image size in the url) 
			*/

			var imgThumb = item.media.m.split('m.jpg')[0] + 't.jpg';
			
			var imgMedium = item.media.m.split('m.jpg')[0] + 'm.jpg';
			
			var imgMediumLarge = item.media.m.split('_m.jpg')[0] + '.jpg';
			
			var imgLarge = item.media.m.split('m.jpg')[0] + 'b.jpg';
			
			imgId=item.media.m.match(/\/(.*)\/(.*)_(.*)_/);

			//get and format images
			textToInsert += '<div class="flickr">';
			textToInsert += '<a class="fancyFlickrImg" rel="fancyFlickr" href="' + imgLarge + '" title="' + item.title + ' #'+imgId[2]+'#">';
			textToInsert += '<img src="' + imgMedium + '" />';
			textToInsert += '</a>';
			textToInsert += '</div>';
		
		});

		//clear contents of div
		$.fn.fancyFlickr.settings.el.empty();
		
		//add images to div
		$.fn.fancyFlickr.settings.el.append(textToInsert);
		
		$.fn.cycle.updateActivePagerLink = function(pager, currSlideIndex) { 
			imgPager=$(pager).find('img');
			
			imgPager.attr('src',imgPager.attr('src').replace(/circle_on.png/,'circle_off.png'));
			
			imgPagerAttiva=imgPager.filter('img:eq('+currSlideIndex+')');
			
			imgPagerAttiva.attr('src',imgPagerAttiva.attr('src').replace(/circle_off.png/,'circle_on.png'));
		};
		
		$.fn.fancyFlickr.settings.el.cycle({
			pager:  '#nav', 
			pagerAnchorBuilder: function(idx, slide) { 
				return '<img src="img/circle_off.png" width="8" height="8" />'; 
			} 
		});
		
		//fancybox code to create image gallery
		$.fn.fancyFlickr.settings.el.find("a[rel=fancyFlickr]").fancybox({
			closeClick:false,
			helpers : {
				title : {
					type : 'inside'
				}
			},
			afterLoad : function(){
				imgId=this.title.match(/#([0-9]*)#/);
				
				this.title=this.title.replace(/#[0-9]*#/,'');
				
				this.title='<a href="http://www.flickr.com/photos/paneeinternet2011/'+imgId[1]+'/" target="_blank">'+this.title+'</a>';
			}
		});
	};
	
	$.fn.fancyFlickr.settings = {
		flickrId: '',
		numPics: 10,
		el:null
	};
})(jQuery);