(function($) {
	$.fn.wis_carrousel = function(banners, idPrefix, options) {
		var settings = {
			autoplay: true,
			random: false,
			showDots: true,
			duration: 1500,
			startAt: 0,
			timeout: 10000
		};
		if (options) $.extend(settings, options);
		var self = this;
		var autoSlideHandle = null;
		var bannerIx = settings.startAt;
		var getBanner = function(offset) {
			bannerIx += offset;
			if (bannerIx < 0) {
				bannerIx = banners.length - 1;
			} else if (bannerIx >= banners.length) {
				bannerIx = 0;
			}
			return banners[bannerIx];
		}
		
		var activateBanner = function(offset) {
			if (animating) return;
			clearTimeout(autoSlideHandle);
			var oldBanner = banners[bannerIx];
			var newBanner = getBanner(offset);
			if ( settings.showDots) {
				$('.bannerStep_' + oldBanner, self).removeClass('active');
				$('.bannerStep_' + newBanner, self).addClass('active');
			}
			animate(offset, oldBanner, newBanner);
		};

		var animating = false;
		var animate = function(offset, oldBanner, newBanner) {
			if (animating) return;
			animating = true;
			var oldBannerEl = $('#' + idPrefix + oldBanner);
			var newBannerEl = $('#' + idPrefix + newBanner);
			
			newBannerEl.css({display: 'block'});
			self.css('value', 0).animate({value: self.width()}, {
				duration: settings.duration,
				step: function(now, fx) {
					oldBannerEl.css({left: (-offset * now) + 'px'});
					newBannerEl.css({left: (-offset * (now - fx.end)) + 'px'});
				},
				complete: function() {
					//oldBannerEl.css({display: 'none'});
					animating = false;
					autoSlide();
				}
			});
		}
		
		var leftButton = $('<div class="slidebutton left"></div>')
			.appendTo(self)
			.click(function() {
				activateBanner(-1);
			});
		var rightButton = $('<div class="slidebutton right"></div>')
			.appendTo(self)
			.click(function() {
				activateBanner(1);
			});
		
		if (settings.showDots) {
			var stepsContainer = $('<div class="bannerSteps"></div>').appendTo(self);
			for (var i = 0; i < banners.length; i++) {
				(function(ij) {
					var id = "bannerStep_" + banners[ij];
					var step = $('<div class="bannerStep ' + id + '"></div>')
						.data('banner', banners[ij])
						.click(function() {
							activateBanner(ij-bannerIx);
						})
						.appendTo(stepsContainer);
				}(i));
			}
		
			$('.bannerStep_' + banners[0], self).addClass('active');
		}
		var autoSlide = function() {
			autoSlideHandle = setTimeout(function() {
				activateBanner(1);
				autoSlide();
			}, settings.timeout);
		}
		if (settings.autoplay) {
			autoSlide();
		}
	};
})(jQuery);