var box1 = "#box1";
var box2 = "#box2";
var box3 = "#box3";
var ball = "#ball";

var animationTime = 200;
var rotateTime = 5000;

var currentBox = 3;

function rotateBox() {
	if(currentBox <= 3){
		++currentBox;
		if(currentBox == 4){
			currentBox = 1;
		}
		rotateTheBox();
	}
	timer = setTimeout("rotateBox()",rotateTime);
}

function rotateTheBox(){
	if(currentBox == 1) {
		$(box1).addClass('active');
		$(box2).removeClass('active');
		$(box3).removeClass('active');
		
		$(ball).addClass('ballPosition1');
		$(ball).removeClass('ballPosition2');
		$(ball).removeClass('ballPosition3');
		
		$(ball).animate({ left: '0' }, animationTime, function() {
			// Animation complete.
		});
	}
	if(currentBox == 2) {
		$(box2).addClass('active');
		$(box1).removeClass('active');
		$(box3).removeClass('active');
		
		$(ball).addClass('ballPosition2');
		$(ball).removeClass('ballPosition1');
		$(ball).removeClass('ballPosition3');
		
		$(ball).animate({ left: '341' }, animationTime, function() {
			// Animation complete.
		});
	}
	if(currentBox == 3) {
		$(box3).addClass('active');
		$(box1).removeClass('active');
		$(box2).removeClass('active');
		
		$(ball).addClass('ballPosition3');
		$(ball).removeClass('ballPosition1');
		$(ball).removeClass('ballPosition2');
		
		$(ball).animate({ left: '681' }, animationTime, function() {
			// Animation complete.
		});
	}
}

rotateBox();

$(function mouseHoverBoxChange() {
	
	$(box1).hover(function() {
		$(box1).addClass('active');
		$(box2).removeClass('active');
		$(box3).removeClass('active');
		
		$(ball).addClass('ballPosition1');
		$(ball).removeClass('ballPosition2');
		$(ball).removeClass('ballPosition3');
		
		$(ball).animate({ left: '0' }, animationTime, function() {
			// Animation complete.
		});
		
		clearTimeout(timer);
	});
	
	$(box2).hover(function() {
		$(box2).addClass('active');
		$(box1).removeClass('active');
		$(box3).removeClass('active');
		
		$(ball).addClass('ballPosition2');
		$(ball).removeClass('ballPosition1');
		$(ball).removeClass('ballPosition3');
		
		$(ball).animate({ left: '341' }, animationTime, function() {
			// Animation complete.
		});
		
		clearTimeout(timer);
	});
	
	$(box3).hover(function() {
		$(box3).addClass('active');
		$(box1).removeClass('active');
		$(box2).removeClass('active');
		
		$(ball).addClass('ballPosition3');
		$(ball).removeClass('ballPosition1');
		$(ball).removeClass('ballPosition2');
		
		$(ball).animate({ left: '681' }, animationTime, function() {
			// Animation complete.
		});
		
		clearTimeout(timer);
	});
	
});