// JavaScript Document
 

$(document).ready(function(){
	$(".joel").animate( {opacity: 0.0}, 1);
    $(".trucker").animate( {opacity: 0.0}, 1);
    $(".trippy").animate( {opacity: 0.0}, 1);
    $(".mashable").animate( {opacity: 0.0}, 1);
    $(".hammer").animate( {opacity: 0.0}, 1);
	
	automate();
});
var oldImage = ".att";
function changeImage(image, stopA){
	if(stopA == 'stop'){
		window.clearTimeout(animationTimer);
		stopAnimation = 'false';
	} else {
		automate();
	}
	
	if (image == ".mashable"){
		$('.active').animate({
			'left' : "683px",
			'top' : "30px"
		});
	} else if (image == ".trippy"){
		$('.active').animate({
			'left' : "806px",
			'top' : "30px"
		});
	} else if (image == ".att"){
		$('.active').animate({
			'left' : "560px",
			'top' : "30px"
		});
	}  else if (image == ".hammer"){
		$('.active').animate({
			'left' : "560px",
			'top' : "90px"
		});
	} else if (image == ".trucker"){
		$('.active').animate({
			'left' : "683px",
			'top' : "90px"
		});
	} else if (image == ".joel"){
		$('.active').animate({
			'left' : "806px",
			'top' : "90px"
		});
	}
	
	if (image != oldImage){
		$(oldImage).animate( {opacity: 0.0}, 2000);
		$(image).animate( {opacity: 1.0}, 2000);
		oldImage = image;
	}
	
	
}

var stopAnimation = "false";
var animationTimer = '';
var	oldImage ='.att'
function automate(change){
		if (stopAnimation == "false"){
			animationTimer = window.setTimeout(function() { setBox(); }, 7000); // set time
		}
};

//sets which box to load and to fade
function setBox(){
	 // adds 1 to the current box
	if (oldImage == '.att'){									   
		image = '.mashable';
	} else if (oldImage == '.mashable'){									   
		image = '.trippy';
	} else if (oldImage == '.trippy'){									   
		image = '.hammer';
	} else if (oldImage == '.hammer'){									   
		image = '.trucker';
	} else if (oldImage == '.trucker'){									   
		image = '.joel';
	} else if (oldImage == '.joel'){									   
		image = '.att';
	}
	
	changeImage(image) // starts the function fade as if it was clicked with a newBox to load
};

