;(function($) {
	
	$.fn.thumbviewer = function(options) {

		var settings = jQuery.extend(true, {}, $.fn.thumbviewer.defaults, options);

		return this.each(function() {
			var $this = $(this).css({overflow:"visible"});
			var $panels = $("div.panel", $this).wrapAll("<div class='scrollContainer'></div>");
			var $container = $(".scrollContainer", $this);
			$container.wrap("<div class='scroll'></div>");
			var $scroll = $(".scroll", $this).css({overflow:'hidden'});

			$panels
				.css({'opacity': settings.opacity})
				.each(function() {
					$(this).hover(function() { // hover in
						var $thumb = $(this);
						$thumb.stop().fadeTo(250, 1, function() {
							$thumb.css('filter', '');
						});
					}, function() { // hover out
						$(this).stop().fadeTo(250, settings.opacity);
					});
				});

			$container.css('width', $panels[0].offsetWidth * $panels.length + 10);
			
			if ($container.width() > $this.width() + 10) {
				$scroll
					.before('<img class="scrollButtons left" src="images/global/black/token_backarrow.gif" width="8" height="11"/>')
					.after('<img class="scrollButtons right" src="images/global/black/token_forwardarrow.gif" width="8" height="11"/>');
			}

			var offset = parseInt($container.css('paddingLeft'), 10) * -1;
			
			var start = 0;
			$panels.each(function(i) {
				if ($(this).hasClass("current")) {
					start = i;
					$scroll.scrollTo(".current");
				}
			});
			var scrollOptions = {
				target: $scroll,
				items: $panels,
				prev: 'img.left',
				next: 'img.right',
				axis: 'x',
				offset: offset,
				duration: 400,
				easing:'swing',
				constant: false,
				exclude: settings.exclude,
				start: start
			};

			$this.serialScroll(scrollOptions);
		});
	};
	
	$.fn.thumbviewer.defaults = {
		exclude: 0,
		opacity: 0.3
	};
	
})(jQuery);
