function slideSwitch() {
	var $active = $('#slideshow div.active');
	
	if ( $active.length == 0 ) $active = $('#slideshow div').last();

	var $next =  $active.next().length ? $active.next()
		: $('#slideshow div').first();
		
	$active.addClass('last-active')
		.animate({opacity: 0.0}, 1000);
			
	$next.css({opacity: 0.0})
		.addClass('active')
		.animate({opacity: 1.0}, 1000, function() {
			$active.removeClass('active last-active');
		});
}

function titleSwitch() {
	var $active = $('.gray_box_text a.active');
	
	if ( $active.length == 0 ) $active = $('.gray_box_text a').last();

	var $next =  $active.next().length ? $active.next()
		: $('.gray_box_text a').first();
			
	$active.addClass('last-active');
			
	$next.addClass('active')
	$active.removeClass('active last-active');

}

function dotSwitch() {
	var $active = $('.dot img.active');
		
		if ( $active.length == 0 ) $active = $('.dot img').last();
	
		var $next =  $active.next().length ? $active.next()
			: $('.dot img').first();		
	
		$active.removeClass('active')
			.attr('src', 'images/gray_dot.png');
	
		$next.addClass('active').attr('src', 'images/red_dot.png');
}

$(function() {
	$('.dot img').css({cursor: 'pointer'});
	slideID = setInterval( "slideSwitch()", 5000 );
	titleID = setInterval( "titleSwitch()", 5000 );
	dotID = setInterval( "dotSwitch()", 5000 );
});

$(function() {
	$('.dot img').click(function() {
		clearInterval(slideID);
		clearInterval(titleID); 
		clearInterval(dotID);
		
		var index = $('.dot img').index(this);

		$('#slideshow div.active').animate({opacity: 0.0}, 1000).removeClass('active');
		$('#slideshow div').eq(index).animate({opacity: 1.0}, 1000).addClass('active');
		
		$('.gray_box_text a.active').removeClass('active');
		$('.gray_box_text a').eq(index).addClass('active');
		
		$('.dot img.active').removeClass('active').attr('src', 'images/gray_dot.png')
			.css({cursor: 'pointer'});
		$('.dot img').eq(index).addClass('active').attr('src', 'images/red_dot.png')
			.css({cursor: 'default'});

	});
});