var ASSET_ROOT = "home/";
var BAR_BUTTON_UP = "barButton.png";
var BAR_BUTTON_DOWN = "barButtonDown.png";
var AUTOMOVE_DELAY = 5000;
var AUTOMOVE_RESTART_DELAY = 4000;

var inA;
var timer;
var restartTimer;

var screens;
var currentIndex;

var inTransition;

function requestAnimationElements() {			
	$.ajax({
		  url: ASSET_ROOT+'data/EcastMainPage.json',
		  dataType: 'json',
		  success: setupAnimation
		});
}

function setupAnimation(data) {
	inA = true;
	screens = data;
	currentIndex = 0;
	
	for (var i = 0; i < data.length; i++) {
		$("#barButtons").append('<img class="barButton">');
	}
	
	updateBarButtons(1);
	
	$("#bgA").attr("src", ASSET_ROOT+'images/'+screens[0].bg);
	$("#bgB").attr("src", ASSET_ROOT+'images/'+screens[1].bg);
	$("#devA").attr("src", ASSET_ROOT+'images/'+screens[0].device);
	$("#devB").attr("src", ASSET_ROOT+'images/'+screens[1].device);
	$("#textA").attr("src", ASSET_ROOT+'images/'+screens[0].text);
	$("#textB").attr("src", ASSET_ROOT+'images/'+screens[1].text);
	
	$("#textB").css("left", -500);
	$("#devB").css("left", 800);
	
	
	$(".devImage").click(goToPage);
	$(".textImage").click(goToPage);
	$("#learnMore").click(goToPage);

	$(".barButton").click(goToScreen);

	
	startTimer();
}

function animateToNext() {
	
	inTransition = true;
	currentIndex = nextIndex();
	updateBarButtons(currentIndex+1);
	
	$("#learnMore").animate({left: 750}, 400);

	if (inA) {
		$("#bgA").fadeOut('slow',transitionComplete);
		$("#devA").animate({left: 800}, 500);
		$("#devB").animate({left: 460}, 500, afterDeviceEnter);
		
		$("#textA").animate({left: -500}, 500);
		$("#textB").animate({left: 45}, 500);
	} else {
		$("#bgA").fadeIn('slow',transitionComplete);
		$("#devA").fadeIn('slow');
		$("#devB").animate({left: 800}, 500);
		$("#devA").animate({left: 460}, 500, afterDeviceEnter);
		
		$("#textB").animate({left: -500}, 500);
		$("#textA").animate({left: 45}, 500);

	}
}

function afterDeviceEnter() {
	$("#learnMore").css("left", "480px");
	$("#learnMore").delay(100).animate({left: 360}, 200);

}

function transitionComplete() {
	if (inA) {
		$("#bgA").attr("src", ASSET_ROOT+'images/'+screens[nextIndex()].bg);
		$("#devA").attr("src", ASSET_ROOT+'images/'+screens[nextIndex()].device);
		$("#textA").attr("src", ASSET_ROOT+'images/'+screens[nextIndex()].text);

	} else {
		$("#bgB").attr("src", ASSET_ROOT+'images/'+screens[nextIndex()].bg);
		$("#devB").attr("src", ASSET_ROOT+'images/'+screens[nextIndex()].device);
		$("#textB").attr("src", ASSET_ROOT+'images/'+screens[nextIndex()].text);
	}
	inA = !inA;
	inTransition = false;
} 

function updateBarButtons(index) {
	$("#barButtons .barButton").attr("src", ASSET_ROOT+'images/' + BAR_BUTTON_UP);
	$("#barButtons .barButton:nth-child("+ (index) +")").attr("src", ASSET_ROOT+'images/' + BAR_BUTTON_DOWN);
}

function nextIndex() {
	return (currentIndex+1)%screens.length;
}

function goToPage() {
	window.location = screens[currentIndex].link;
} 

function goToScreen(event) {
	if (!inTransition) {
		var index = $("#barButtons .barButton").index(event.target);
		if (currentIndex != index) {
			currentIndex = index-1;
			
			
			if (!inA) {
				$("#bgA").attr("src", ASSET_ROOT+"images/"+screens[index].bg);
				$("#devA").attr("src", ASSET_ROOT+"images/"+screens[index].device);
				$("#textA").attr("src", ASSET_ROOT+"images/"+screens[index].text);
	
			} else {
				$("#bgB").attr("src", ASSET_ROOT+"images/"+screens[index].bg);
				$("#devB").attr("src", ASSET_ROOT+"images/"+screens[index].device);
				$("#textB").attr("src", ASSET_ROOT+"images/"+screens[index].text);
			}
			animateToNext();
			
			if (timer) {
				clearInterval(timer);
				timer = null;
			}
			if (restartTimer) {
				clearTimeout(restartTimer);
				restartTimer = null;
			}
			restartTimer = setTimeout("startTimer()", AUTOMOVE_RESTART_DELAY);
		}
	}
}

function startTimer() {
	timer = setInterval("animateToNext()", AUTOMOVE_DELAY);
}