;(function($) {

	$.fn.thumbviewer = function(options) {

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

		return this.each(function() {
			if ($("div.panel").length > 0){
				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="fileadmin/images/layout/token_backarrow.gif" width="8" height="11"/>')
						.after('<img class="scrollButtons right" src="fileadmin/images/layout/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);