dynamic slideshow script, with featured image changer

dynamicslideshow

(function($, window, document) {

	var slideshow = $('.slideshow'),
		viewport = $('.thumbs-view', slideshow),
		ctrls = $('.ctrl', slideshow),
		next_btn = ctrls.filter('.next'),
		prev_btn = ctrls.filter('.prev'),

		slides_holder = $('.thumbs', slideshow),
		slides = $('li', slides_holder),
		slide_count = slides.length,
		curr_slide = slides.eq(0),

		slide_width = slides.outerWidth(true),
		slide_height = slides.outerHeight(true),

		visible_slides = 3,
		groups_from_viewable = Math.ceil(slide_count/visible_slides)-1,
		scroll_amt = visible_slides*slide_width,
		max_scroll = (slide_count-visible_slides)*slide_width,

		curr_group_index = 0,
		is_rolling = false,
		rotate = true,
		auto_rotate = true,
		interval = 5,

		// stage vars
		stage = $('.stage', slideshow),
		anchor = $('> a', stage),
		caption_area = $('figcaption', slideshow),
		banner = $('img', stage),
		title = $('p strong', stage),
		excerpt = $('p + p', stage),
		auto_timer = null;

	// rotate should be possible only if number of slides is greater than visible slies
	rotate = (slide_count>visible_slides) ? rotate : false;

	function init() {

		// init viewport and make sure of fail-safe layout
		viewport.css({
			position: "relative",
			width: scroll_amt,
			height: slide_height,
			overflow:"hidden"
		});


		slides_holder.css({
			position: "relative",
			width: slide_count*slide_width
		});

		if (rotate) {

			if (slide_count<visible_slides*3) {

				groups_from_viewable = slide_count-1;
				
				var max = visible_slides;
				while (--max) {
					slides.clone().appendTo(slides_holder);
				}
				
				slides = $('li', slides_holder);
				slide_count = slides.length;

			}

			// position slides then re-initialize slides
			slides_holder.prepend(slides.slice(-visible_slides));
			slides = $('li', slides_holder);
			curr_group_index = 1;

			slides_holder.css({
				width: slide_count*slide_width,
				left: -visible_slides*slide_width
			});

			curr_slide = slides.eq(curr_group_index*visible_slides);
		}

		slides.eq(curr_group_index*visible_slides).addClass('active').siblings().removeClass('active');
		updateStage(curr_slide);

		// init ctrls
		if (curr_group_index == 0 && !rotate) {
			prev_btn.addClass('disabled');
		}

		if (slide_count > visible_slides) {
			ctrls.fadeIn();
		}

		// group rotation
		ctrls.on('click', function(ev) {

			ev.preventDefault();

			var btn = $(this),
				is_next = btn.is(next_btn),
				dir = (is_next) ? -1 : 1;

			if (btn.is('.disabled') || is_rolling) return;

			is_rolling = true;

			if (auto_timer && auto_rotate) {
				clearTimeout(auto_timer);
				auto_timer = null;
			}

			curr_group_index = (is_next) ? ++curr_group_index : --curr_group_index;

			rotateGroup(curr_group_index);

		});

		// on item click
		slides.on('click', function(ev) {

			ev.preventDefault();

			if ($(this).is('.active') || is_rolling) return;

			is_rolling = true;

			if (auto_timer && auto_rotate) {
				clearTimeout(auto_timer);
				auto_timer = null;
			}

			updateStage($(this));

		});

		$('img', slides_holder).css({opacity:1});

	} // end of initialization


	init();

	// group sliding
	function rotateGroup(group_index) {

		slides_holder.animate({
			left: -scroll_amt*group_index
		}, function() {

			ctrls.removeClass('disabled');

			if (group_index <= 0) {

				if (rotate) {
					
					curr_group_index = 1;

					slides_holder.append(slides.slice(0, -visible_slides));
					slides = $('li', slides_holder);

					slides_holder.css({
						left: -curr_group_index*visible_slides*slide_width
					});

				} else {
					prev_btn.addClass('disabled');
				}

			}

			if (group_index >= groups_from_viewable) {

				if (rotate) {

					curr_group_index = 1;

					slides_holder.prepend(slides.slice(-2*visible_slides));
					slides = $('li', slides_holder);

					slides_holder.css({
						left: -curr_group_index*visible_slides*slide_width
					});
					

				} else {
					next_btn.addClass('disabled');
				}

			}

			updateStage(slides.eq(curr_group_index*visible_slides));

		});


	}

	// stage changer
	function updateStage(slide) {

		var data = $(slide).find('a').data(),
			new_banner = banner.clone();

		new_banner.fadeIn();

		caption_area.slideUp(function() {

			anchor.attr('href', $(slide).find('a').attr('href'));
			new_banner.attr({
				'src': $(slide).find('img').attr('src'),
				alt: data.title
			});
			title.text(data.title);
			excerpt.text(data.excerpt);

			new_banner.insertBefore(banner);

			banner.fadeOut(function() {
				caption_area.slideDown(function() {
					is_rolling = false;

					if (auto_rotate && !auto_timer) autoRotate();
				});
				banner.remove();
				banner = new_banner;
			});

		});

		$(slide).addClass('active').siblings().removeClass('active');
		curr_slide = slide;

	}


	// auto rotate method
	function autoRotate() {

		auto_timer = setTimeout(function() {
			
			var curr = curr_slide,
				next = (curr.next().length) ? curr.next() : slides.eq(0);

			var i = Math.floor(next.index()/visible_slides);

			if (curr_group_index != i) {
				curr_group_index = i;
				rotateGroup(curr_group_index);
			} else {
				updateStage(next);
			}

			is_rolling = true;

			autoRotate();

		}, interval*1000);

	}

})(jQuery, window, document);