$(document).ready(
	function(){
		initEightBall();
	}
);

var onBack = false;
var currentMessage = 0;
var timeOutReset = null;

function initEightBall() {
	$("#eightball-dice").css({opacity:0});
//	$("#eightball-border-extra").css({opacity:0});
	clearTimeout(timeOutReset);
	onBack = false;
	
	$("#eightball").click(
		function() {
			if (!onBack) {
				rotateFromFront();
			} else {
				shake();
			}
			return false;
		}
	);
}

function rotateFromFront() {
	var totalLength = 500;
	$('#eightball-logo')
		.animate({height: 220, marginTop: "-40px"}, totalLength/3, "easeInQuart")
		.animate({height: 60, marginTop: "-10px"}, totalLength/8, "linear")
		.animate({height: 0, marginTop: "0px", opacity: 0}, totalLength/8, "linear")
			
		;

	$('#eightball-viewport').delay(totalLength*0.8).css({display: 'block', opacity: 0, height: 0, marginTop: 270})
		.animate({opacity: 1, height: 60, marginTop: 250}, totalLength/8, "linear")
		.animate({height: 220, marginTop: 100, width: 300}, totalLength/8, "linear")
		.animate({height: 300, marginTop: 0}, totalLength/3, "easeOutQuart",
			function() {
				onBack = true;
				shake();
			}
		);
	
	

	/*
	$('#eightball-logo').animate({scaleY: .95, marginTop: "-50px"}, totalLength/14)
						.animate({scaleY: .79, marginTop: "-90px"}, totalLength/14)
						.animate({scaleY: .60, marginTop: "-110px"}, totalLength/14)
						.animate({scaleY: .34, marginTop: "-130px"}, totalLength/14)
						.animate({scaleY: .11, marginTop: "-140px"}, totalLength/14).fadeOut(0)
						.animate({scaleY: .05, marginTop: "-145px"}, totalLength/14)
						;
						
	$('#eightball-viewport').delay(totalLength/2)
						.animate({scaleY: .01, marginTop: "155px"}, totalLength/14)
						.animate({scaleY: .05, marginTop: "150px"}, totalLength/14)
						.animate({scaleY: .11, marginTop: "145px"}, totalLength/14)
						.animate({scaleY: .34, marginTop: "125px"}, totalLength/14)
						.animate({scaleY: .60, marginTop: "105px"}, totalLength/14)
						.fadeIn(0)
						.animate({scaleY: .79, marginTop: "85px"}, totalLength/14)
						.animate({scaleY: .95, marginTop: "45px"}, totalLength/14)
						.animate({scaleY: 1.0, marginTop: "0px"}, totalLength/14, 
							function() {
								onBack = true;
								shake();
							}
						);
*/
return false;
}

function shake() {
	var totalLength = 1515;
	clearTimeout(timeOutReset);
	
	$('#eightball').animate({marginLeft: "20px", marginTop: "70px"}, 45)
				   .animate({marginLeft: "20px", marginTop: "10px"}, 303)
				   .animate({marginLeft: "40px"}, 151)
				   .animate({marginLeft: "40px"}, 106)
				   .animate({marginLeft: "5px"}, 106)
				   .animate({marginLeft: "30px"}, 106)
				   .animate({marginLeft: "10px"}, 75)
				   .animate({marginLeft: "30px"}, 106)
				   .animate({marginLeft: "20px"}, 212)
				   .animate({marginLeft: "20px", marginTop:"70px"}, 500);
	
	var top = Math.floor((Math.random() * 40) - 20);
	var left = Math.floor((Math.random() * 40) - 20);
	var rotation = Math.floor((Math.random() * 20) - 10);

	var diceAnimation = {top:top+"px", left:left+"px", opacity:1};
	if (!$('html').hasClass('ie9')) diceAnimation.rotate = rotation+"deg";
	$("#eightball-dice")
	.animate({opacity:0})
	.delay(1250)
	.animate(diceAnimation);
	
	window.setTimeout("getNewMessage()", 300);
	
//	$("#eightball-border-extra").delay(1515).animate({opacity:1});
	
	timeOutReset = setTimeout( "resetBall()", 5000 );
}

function getNewMessage() {
	currentMessage += 1;
	var index = Math.ceil(Math.random()*$("#all-messages li").length);  //nth-child indexes start at 1
//	var index = currentMessage;
	$("#eightball-dice-text").html($("#all-messages li:nth-child("+index+")").html());
}

function resetBall() {

	var totalLength = 500;
	$("#eightball-dice").animate({opacity:0}, 500, function() {
//		$("#eightball-border-extra").css({opacity:0});
		
		
		onBack = false;

		$('#eightball-viewport')
			.animate({height: 220, marginTop: 100, width: 300}, totalLength/3, "easeInQuart")
			.animate({height: 60, marginTop: 250}, totalLength/8, "linear")
			.animate({opacity: 0, height: 0, marginTop: 290}, totalLength/8, "linear");

		$('#eightball-logo').delay(totalLength*0.8)
			.animate({height: 60, marginTop: "-10px", opacity: 1}, totalLength/8, "linear")
			.animate({height: 220, marginTop: "-40px"}, totalLength/8, "linear")
			.animate({height: 300, marginTop: "0px"}, totalLength/3, "easeOutQuart");


		
		/*

		$('#eightball-viewport').animate({scaleY: 1.0, marginTop: "0px"}, totalLength/14)	
								.animate({scaleY: .95, marginTop: "45px"}, totalLength/14)
								.animate({scaleY: .79, marginTop: "85px"}, totalLength/14)
								.animate({scaleY: .60, marginTop: "105px"}, totalLength/14)
								.fadeOut(0)
								.animate({scaleY: .34, marginTop: "125px"}, totalLength/14)
								.animate({scaleY: .11, marginTop: "145px"}, totalLength/14)
								.animate({scaleY: .05, marginTop: "150px"}, totalLength/14)
								.animate({scaleY: .01, marginTop: "155px"}, totalLength/14,
									function() {
										onBack = false;
									}
								);

		$('#eightball-logo').delay(totalLength/2)
							.animate({scaleY: .05, marginTop: "-145px"}, totalLength/14)
							.animate({scaleY: .11, marginTop: "-140px"}, totalLength/14)
							.fadeIn(0)
							.animate({scaleY: .34, marginTop: "-130px"}, totalLength/14)
							.animate({scaleY: .60, marginTop: "-110px"}, totalLength/14)
							.animate({scaleY: .79, marginTop: "-90px"}, totalLength/14)
							.animate({scaleY: .9, marginTop: "-50px"}, totalLength/14)
							.animate({scaleY: 1, marginTop: "0px"}, totalLength/14);
							
		*/
	})
}