var $ready = true;

//fade first banner in
$('#ct_container #ct_wrapper #banner #buttons .1').css('background','#667d95');
$('#ct_container #ct_wrapper #banner #banners #1').fadeIn('slow');
$('#ct_container #ct_wrapper #banner #banners #1').addClass('active');

function fadeIt($active,$next){
	if($ready == true){
		//disable another fade until this fade is complete
		$ready = false;
		
		//update class
		$active.removeClass('active');
		$next.addClass('active');
		
		//reset button color
		$('#ct_container #ct_wrapper #banner #buttons div').css('background','#d1d3d4');
		
		//update color of selected button
		$id = parseInt($next.attr('id'));
		$('#ct_container #ct_wrapper #banner #buttons div.' + $id).css('background','#667d95');
		
		//fade active banner out and fade next banner in
		$active.fadeOut('slow',function(){$next.fadeIn('slow',function(){ $next.css('z-index', '1000'); $ready = true;});});
	}
};

function slideshow(){
	//find active banner
	var $active = $('#ct_container #ct_wrapper #banner #banners div.active');	
	
	//find next banner - reset if at end
	if ( $active.length == 0 ) $active = $('#ct_container #ct_wrapper #banner #banners div:last');
	var $next =  $active.next().length ? $active.next()
		: $('#ct_container #ct_wrapper #banner #banners div:first');
	
	//fade in/out banners
	fadeIt($active,$next);	
};

//adjust speed of slideshow
show = setInterval("slideshow()", 8000 );	

$('#ct_container #ct_wrapper #banner #buttons div').click(function(){
	//find which banner was selected
    var $id = parseInt($(this).attr('class'));
	
	//find active and next banner
	$active = $('#ct_container #ct_wrapper #banner #banners div.active');
	$next = $('#ct_container #ct_wrapper #banner #banners div#' + $id);
	
	//fade in/out banners
	fadeIt($active,$next);

	//stop slideshow so they can read banner
	clearInterval(show);
});