$(document).ready(function () { setInterval( "slideSwitch();", 5000 ); });

function slideSwitch() {	 
	var $active = $('#featured-images IMG.active');
	// set variables for current and previous boxes. get total number of boxes.
	var $current = $active.index() + 2;
	var $previous = $active.index() + 1;
	var $numChildren = $("#featured-boxes").children().length + 1;
	//add and remove classes for selected box.
	$("#featured-boxes span:nth-child(" + $current + ")").addClass('box-active');
	$("#featured-boxes span:nth-child(" + $previous + ")").removeClass('box-active');
	if ($current >= $numChildren) { $("#featured-boxes span:first-child").addClass('box-active'); }    
	if ( $active.length == 0 ) $active = $('#featured-images IMG:last');
	// use this to pull the images in the order they appear in the markup
	var $next =  $active.next().length ? $active.next()
	   : $('#featured-images IMG:first');
	
	// uncomment the 3 lines below to pull the images in random order
	    // var $sibs  = $active.siblings();
	    // var rndNum = Math.floor(Math.random() * $sibs.length );
	    // var $next  = $( $sibs[ rndNum ] );
	$active.addClass('last-active');
	$next.css({opacity: 0.0})
		.addClass('active')
		.animate({opacity: 1.0}, 1000, function() {
		$active.removeClass('active last-active');
	});		
}