(function($){
	$.fn.hubThumbnail = function(options)
	{
		
		opts = jQuery.extend(
			{
				maxRowsToShow : 3,
				maxColsToShow : 2,
				paginate: true,
				paginateArray:[],
				paginationContainer: $('.panelSectionHeader'),
				thumbnailContainer: $('.panelCaseStudyList')
			}, options);
		
		return this.each(function(){
			new $ht(this,opts);
		});
		
	};
	
	$.hubThumbnail = function(e,o)
	{
		//get the height of the first thumbnail and wrap container and position
		var h = o.thumbnailContainer.find('li').eq(0).outerHeight(true) * o.maxRowsToShow;
		o.thumbnailContainer.wrap('<div class="container" style="height:'+h+'px;overflow:hidden;position:relative;" ></div>')
		o.thumbnailContainer.css({'position':'absolute','top':0})
		
		var numItems = o.thumbnailContainer.find('li').size();
		
		//no pagination if thumbs dont exceed a page's worth - JL
		if(numItems <= (o.maxRowsToShow*o.maxColsToShow)) {
			o.paginate = false;
		}
		// Add paginaition: only if it is true
		else if(o.paginate){
			
			o.paginationContainer.append('<ul class="pagination"></ul>');
			var pageArea = $('ul.pagination');
			var c = 0;
			var pageBy = (o.maxRowsToShow*o.maxColsToShow)-0;
			
			for(var i=0;i<numItems;i+=pageBy){
			 	c++;
				pageArea.append('<li><a href="#" >'+c+'</a></li>')
			}
			
			pageArea.find('li a').eq(0).addClass('active');
			
			pageArea.find('li').click(function(){
				pageArea.find('li a').removeClass('active');
				$(this).find('a').addClass('active');
				
				var ix = Number($(this).find('a').text())-1;
				o.thumbnailContainer.stop();
				o.thumbnailContainer.animate({
					'top': -(h*ix)
				},'slow','swing');
				return false;
			});
		}
	}
	
	var $ht = $.hubThumbnail;
	
})(jQuery);