// SECONDS PER SLIDE
var wait	= 20;

var current = 0;
var interval= 0;

$(document).ready( function() {
	var layer = 0;
	
	// SET UP THE SLIDES (HIDE AND ADD REL)
	$("#fader_viewer .slide").each( function() { 
		$(this).attr("rel",layer);
		$(this).css("display", "none");
		layer+=1;
	});
	
	// SET UP THE THUMBS (REL AND CLICK ACTION)
	layer = 0;
	$("#fader_thumbs li").each( function() {
		$(this).attr("rel",layer);
		$(this).click( function() {
			current = $(this).attr("rel");
			$("#fader_viewer .active").removeClass("active").fadeOut(1000);
			$("#fader_viewer .slide[rel=" + current + "]").addClass("active").fadeIn(1000);
			
			$("#fader_thumbs li").fadeTo(400, 0.5).removeClass("active");
			$("#fader_thumbs li[rel=" + current + "]").fadeTo(400, 1.0).addClass("active");
		});
		
		layer+=1;
	});
	
	// SET THE FIRST SLIDE ACTIVE
	$("#fader_viewer .slide[rel=0]").css("display","block").addClass("active");
	$("#fader_thumbs li[rel=0]").fadeTo(100, 1.0).addClass("active");
	
	
	// START THE SLIDESHOW
	interval = setInterval("next_slide()", (1000 * wait));
	
});


// SHOW NEXT SLIDE
function next_slide() {
	current = $("#fader_viewer .active").attr("rel");
	
	if (current == 3) { current = 0; }
	else { current = parseInt(current) + 1; }
	
	// TRANSITION SLIDES
	$("#fader_viewer .active").removeClass("active").fadeOut(1000);
	$("#fader_viewer .slide[rel=" + current + "]").addClass("active").fadeIn(1000);
	
	// TRANSITION THUMBS
	$("#fader_thumbs li").fadeTo(400, 0.5).removeClass("active");
	$("#fader_thumbs li[rel=" + current + "]").fadeTo(400, 1.0).addClass("active");
}