;(function($) {
	
	$.fn.extend({
		portfolios: function(options) {
			return this.each(function() {
				new $.Portfolios(this, options);
			});
		}
	});
	
	$.Portfolios = function(element, options) {
		
		var defaults = {
			// default options
		};
		this.options = $.extend({}, defaults, options || {});
		
		this.element = $(element);
				
		this.setup();
		
	};
	
	$.extend($.Portfolios.prototype, {
		
		setup: function() {
			
			this.container = this.element.parent();
			this.container.addClass('enabled');
			this.container.append($('<div class="rodeo-full"></div>'));
			this.container.append($('<div class="rodeo-info"></div>'));
			this.info = $('.rodeo-info', this.container);
			this.imgContainer = $('.rodeo-full', this.container);
			var self = this;
			
			var images = this.element.find('img');
			images.each(function(i){
				var img		= $(images[i]).css('display', 'none');
				var src		= img.attr('src');
				var li		= img.parent();
				var title	= img.attr('alt');
				var caption	= img.siblings('.rodeo-title').text();
				var desc	= $('.rodeo-description', li).html();
								
				li.addClass('loading');
				
				var newImg 	= new Image();
				
				$(newImg).load(function() {
					
					var thumb = img.clone(true).addClass('thumb').css('display', 'none');
					
					var w = Math.ceil( img.width() / img.height() * li.height() );
					var h = Math.ceil( img.height() / img.width() * li.width() );
					if (w < h) {
						thumb.css({ height: 'auto', width: li.width(), marginTop: -(h-li.height())/2 });
					} else {
						thumb.css({ width: 'auto', height: li.height(), marginLeft: -(w-li.width())/2 });
					}
					img.remove();
					li.prepend(thumb);
					thumb.wrap('<span></span>');
					thumb.fadeIn('fast');
					li.removeClass('loading');
					
					thumb.bind('click', function() {
						self.replace(newImg, caption, desc)
					});
									
				}).attr({'src': src, 'alt': title});
								
			});
			
			var firstImage	= $('img:eq(0)').clone();
			var imgAlt		= firstImage.attr('alt');
			var caption		= '<p class="rodeo-title">' + $('img:eq(0)').siblings('.rodeo-title').text() + '</p>';
			var desc		= '<p class="rodeo-description">' + $('.rodeo-description:eq(0)').html() + '</p>';
						
			$('.rodeo-full').html(firstImage);
			$('.rodeo-full img').fadeIn('fast');
			self.info.append(caption + desc);
			
		},
		
		replace: function(img, caption, desc) {
			
			var self = this;
			
			var img		= $(img).css('display', 'none');
			var caption	= '<p class="rodeo-title">' + caption + '</p>';
			var desc	= '<p class="rodeo-description">' + desc + '</p>';
			
			if($('img', this.imgContainer).get(0)) {
				
				$('img', this.imgContainer).fadeOut('fast');
				self.imgContainer.html(img);
				img.fadeIn('fast', function() {
					if(caption) {
						self.info.html(caption + desc);
					}
				});
			} else {
				
				self.imgContainer.html(img);
				img.fadeIn('fast');
				
			}
			
		}
		
	});
	
})(jQuery);