(function($j){
	$j.fn.flickrfeed = function(userid, tags, limit) {	
		// Functions
		var	limit=limit;
		return this.each(function(i, e) {
			var $e = $j(e);
			// Add feed class to user div
			if (!$e.hasClass('flickrFeed')) $e.addClass('flickrFeed');
			// Define Flickr feed API address
			var api = 'http://api.flickr.com/services/feeds/photos_public.gne?lang=en-us&format=json&jsoncallback=?';
			if (userid != '') api += '&id=' + userid;
			if (tags != '') api += '&tags=' + tags;
			// Send request
			$j.getJSON(api, function(data){
				// Process the feeds
				_callback(e, data, limit);
			});				
		});
	};
	// Callback function to create HTML
	var _callback = function(e, data, limit) {
		// Set defaults;
		var	limit=limit;
		if (limit=="" | limit==null){
			limit=12;
		}
		var scrollItems = 3;
		if (!data) {
			return false;
		}
		var html = '';	
		//var desc = data.description;	
		//if (desc == '') {
		var desc = data.title;
		//}
		var feeds = data.items;
		var count = feeds.length;
		if (count > limit) count = limit;
		// Add feeds
		for (var i=0; i<count; i++) {
			if (i % scrollItems  == 0){
				html += '<div>';
			}
			// Get individual feed
			var photo= feeds[i];
			var imageLarge = photo.media.m;
			imageLarge = imageLarge .replace('_m', '');
			var link = '<a href="'+ imageLarge + '" title="'+ photo.title +'">';
			// Add feed row
			html += '<div class="item">';
			// Select image size
			var imageSmall = photo.media.m;
			imageSmall = imageSmall.replace('_m', '_m');
			// Add the image
			html += link +'<img src="'+ imageSmall +'" alt="'+ photo.title +'" /></a>'
			// Add the title and description 
			html += '<div class="teaser noShow">'+photo.title+'</div>';
			html += '</div>';
			if (i % scrollItems  == (scrollItems-1)){
				html += '</div>';
			}
		}
		$j(e).html(html);
		createSlideShow();
	};
})(jQuery);

function createSlideShow(){
	// Show Banner
	$j(".main_image .desc").show(); //Show Banner
	$j(".main_image .teaser").animate({ opacity: 0.85 }, 1 ); //Set Opacity
	// Create thumbnail listing
	$j(".items div .item").click(function(){ 
		//Set Variables
		var imgAlt = $j(this).find('img').attr("alt"); //Get Alt Tag of Image
		var imgTitle = $j(this).find('a').attr("href"); //Get Main Image URL
		var imgDesc = $j(this).find('.teaser').html(); 	//Get HTML of teaser
		var imgDescHeight = $j(".main_image").find('.teaser').height();	//Calculate height of teaser	
			$j(".main_image .teaser").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
				$j(".main_image .teaser").html(imgDesc).animate({ opacity: 0.85,	marginBottom: "0" }, 250 );
				$j(".main_image img").attr({ src: imgTitle , alt: imgAlt});
			});
		$j(".items div .item").removeClass('active'); //Remove class of 'active' on all lists
		$j(".items div .item").animate({ opacity: .75,	marginBottom: "0" }, 250 );
		$j(this).addClass('active');  //add class of 'active' on this list only
		$j(this).animate({ opacity: 1,	marginBottom: "0" }, 250 );
		return false;
	})
	.hover(function(){
		$j(this).addClass('hover');
		}, function() {
		$j(this).removeClass('hover');
	});	
	$j(".items div .item a:first").click(); 
}
	
	

