var speed = 600;			
var diaporama;
var control ;
$(function() {
    diaporama = $('ul.diaporama');	
	control = $('ul.control');
	var interval = setInterval(function(){nextImg()}, (12000));
	$(diaporama).find("li.image").hide();
	$(diaporama).find("li.image:first-child").addClass("active").fadeIn(speed);
	$(control).find('li.btn:first-child').addClass("btn_active");
	
	$('.btn').click(function() {
		var btn = $(this);
		$(diaporama).find("li.active").fadeOut(speed);
		$(diaporama).find("li.active").removeClass('active');
		$(diaporama).find('li.' + btn.attr('id')).addClass('active').fadeIn(speed);
		clearInterval(interval);
		 interval = setInterval(function(){nextImg()}, (12000));
		nextBtn();
	});
});

function nextImg() {
	$(diaporama).find("li.active").fadeOut(speed);
	if(!$(diaporama).find("li.active").is('li.last'))
	{
		$(diaporama).find("li.active").next().addClass("active").prev().removeClass("active");
		$(diaporama).find("li.active").fadeIn(speed, nextBtn());
	}
	else
	{
		$(diaporama).find("li.image:first-child").addClass("active").fadeIn(speed, nextBtn());
		$(diaporama).find("li.last").removeClass("active");
	}
}
	
function nextBtn() {
	setTimeout(function() {
		$(control).find('li').removeClass('btn_active');
		$(control).find('#' + $(diaporama).find('li.active').attr('alt')).addClass('btn_active');
	}, 500);
}