jQuery.easing.def = "easeInOutCubic";

// conf
var w = 610; // block width
var betweenAnimate = 7; // seconds
var totalPages = 5; // total boxes
var animationSpeed = 700; // milliseconds

// default active
var page = 1;
var page_was = 1;

var animating = false;
var si = setInterval(next, betweenAnimate*1000);

function pressMove(arg) {if (page==arg) return; page_was = page; move(arg);}

function move(arg) {
	if (animating) return;
	animating = true;
	
	document.getElementById('pag'+page_was).className = '';
	document.getElementById('pag'+arg).className = 'active';
	clearInterval(si);
	
	var toX = '-='+w;
	document.getElementById('movingbox'+arg).style.left = w+'px';
	
	$('#movingbox'+arg).animate({left:toX}, animationSpeed, done);
	$('#movingbox'+page_was).animate({left:toX}, animationSpeed);
	page = arg;
}
function done() {
	animating = false;
	si = setInterval(next, betweenAnimate*1000);
}
		
// automatically
function next() {
	page_was = page;
	page++;
	if (page>totalPages) page = 1;
	move(page);
}