$(document).ready(function() {
	var max = 5;
	var INTERVAL = 7000;
	
	$('#navbar span').click(function() {
        var boxId = $(this).text();
		$('#navbar span').removeClass('activebtn');
		$(this).toggleClass('activebtn');
		
		$('.box').removeClass('active');
		$('#'+boxId).toggleClass('active');
    });
	
	setInterval(changebox, INTERVAL);
	
	function changebox() {
		var current = $('.active').attr('id');
				
		if (current == max) {
			current = 1; 
		} else {
			current = parseInt(current) + 1;
		}
		$('.box').removeClass('active');
		$('#'+current).toggleClass('active');
		
		$('#navbar span').removeClass('activebtn');
		$('#b'+current).toggleClass('activebtn');
	};
	
});