// Settings
var fadeSpeed = 'slow';
var pauseSpeed = 5000;

var thumbsList = '#thumbs';
var fullsList = '#fulls';

// Init
$(function(){
	// Reverse "full" elements (for proper z-indexing)
	var fulls = $(fullsList+' li'); $(fullsList).empty(); fulls.each(function(){ $(fullsList).prepend(this); });
	// Start auto-fading (if necessary)
	if(fulls.length > 1) {
		timer = setTimeout(function() { fadeTo(1); }, pauseSpeed);
	}
	// Stop fading when user clicks on a "thumbs" item
	$(thumbsList+' li').click(function() { userJump( $(thumbsList+' li').index(this) ); });
});

// Fade function
var current = 0;
var timer = null;
function fadeTo( index ) {	
	var fulls = $(fullsList+' li'); var max = fulls.length - 1;
	var thumbs = $(thumbsList+' li');
	
	if(index < current) {
		var prev = current;
		fulls.eq(max - index).fadeIn(fadeSpeed, function(){
			fulls.eq(max - prev).css({display: 'none'});
		});
		thumbs.removeClass('current').eq(current = index).addClass('current');
	} else if(index > current) {
		fulls.eq(max - index).css({display: 'block'});
		fulls.eq(max - current).fadeOut(fadeSpeed);
		thumbs.removeClass('current').eq(current = index).addClass('current');
	}
		
	if(timer != null) { 
		timer = setTimeout(function() {
			if(current + 1 > max) {
				fadeTo( 0 );
			} else {
				fadeTo( current + 1 );
			}
		}, pauseSpeed);
	}
}

// disable auto-fade when user clicks (userJump function is called)
function userJump( index ) { clearTimeout( timer ); timer = null; fadeTo( index ); }