var numberOfSpots = 1;
var currentSpot = 1;
var variable1 = null;
var variable2 = null;
var isPaused = false;
var timerIdentifier;

$(document).ready(function() {

	if($(".aSpotPlayer").is(":visible")) {
		//initialize number of spots after html is loaded
		numberOfSpots = $(".spot").length;

		//show first hidden one
		$(".aSpotPlayer .spot:hidden:first").fadeIn("fast");
		setDot(1);
		
		//hide all
		$(".aSpotPlayerNavOverlay .next").children(":visible").fadeOut("slow");
		$(".aSpotPlayerNavOverlay .previous").children(":visible").fadeOut("slow");
		
		//movement - arrows
		$(".aSpotPlayer .previous").click(function() {
			flipAPlayer("left");
		});
		
		$(".aSpotPlayer .next").click(function() {
			flipAPlayer("right");
		});
		
		//movement - dots
		$(".dot").click(function() {
			lastClickedDot = this;
			clickDot(this);
		});
		
		//movement - puase
		$(".pause").click(function() {
			togglePause();
		});
		$(".play").click(function() {
			togglePause();
		});
		
		//hovering
		$(".aSpotPlayerNavOverlay .next").hover(
		function () {
			$(this).children(":first").show();
		}, 
		function () {
			$(this).children(":first").fadeOut("fast");
		}
		);
		$(".aSpotPlayerNavOverlay .previous").hover(
		function () {
			$(this).children(":first").show();
		}, 
		function () {
			$(this).children(":first").fadeOut("fast");
		}
		);
		
		//hover glow
		$(".aSpotPlayerNavOverlay .more").hover(
			function () {
				$(this).addClass("fuzz");
			},
			function () {
				$(this).removeClass("fuzz");
			}
		);
		$(".aSpotPlayerNavOverlay .previous").hover(
			function () {
				$(this).addClass("fuzz");
			},
			function () {
				$(this).removeClass("fuzz");
			}
		);
		$(".aSpotPlayerNavOverlay .next").hover(
			function () {
				$(this).addClass("fuzz");
			},
			function () {
				$(this).removeClass("fuzz");
			}
		);
		determineColor(currentSpot);
		timerIdentifier = setInterval ( "doTimedFlip('right')", 6000 );
	}
	//
	// EDIT MODE JAVASCRIPT edit mode javascript
	//
	if($(".spotContentSelection").is(":visible")) {
	
		//at page load show first content spot
		eShowSpotContent(0);
		
		$(".colorPicker li").click(function() {
			ePickColor(this.innerHTML);
		});

		$(".spotModeSwitcher li").click(function() {
			eSwitchToMode(this.innerHTML);
		});
		
		$(".spotContentSelection li").click(function() {
			eShowSpotContent(this.innerHTML.charAt(5) - 1);
		});
		
	}
});
function eSwitchToMode(modeName) {
	//switching mode deletes all spot data since C# code 
	//expects to know what mode its in based on which fields are filled in
	$(".spotContent:visible input").val("");
	eSwitchToModeWithoutDelete(modeName);
}
function eSwitchToModeWithoutDelete(modeName) {
	var trimmed = modeName.replace(/^\s+|\s+$/g, '');
	$(".spotModeSwitcher:visible li.current").removeClass("current");
	if(trimmed == "Custom Mode") {
		$(".spotContent:visible .contentCustom").show();
		$(".spotContent:visible .contentProduct").hide();
		$(".spotModeSwitcher:visible li.custom").addClass("current");
	}
	else if(trimmed == "Product Info Mode") {
		$(".spotContent:visible .contentProduct").show();
		$(".spotContent:visible .contentCustom").hide();
		$(".spotModeSwitcher:visible li.product").addClass("current");
	}
}
function eDetermineMode(spotNumber) {
	ifCustom = $(".spotContent").eq(spotNumber).find(".contentCustom input:first").val();
	ifProduct = $(".spotContent").eq(spotNumber).find(".contentProduct input:first").val();
	
	if((ifCustom != "" || ifCustom != null) && (ifProduct == "" || ifProduct == null )) {
		eSwitchToModeWithoutDelete("Custom Mode");
	}
	else {
		eSwitchToModeWithoutDelete("Product Info Mode");
	}
}
function eShowSpotContent(spotNumber) {
	$(".spotContent").hide();
	$(".spotContent").eq(spotNumber).fadeIn("fast");
	$(".spotContentSelection li.current").removeClass("current");
	$(".spotContentSelection li").eq(spotNumber).addClass("current");
	eDetermineMode(spotNumber);
}
function ePickColor(number) {
	$(".spotContent:visible").find(".pickedColor").val("c" + number);
}
function togglePause() {
	if(isPaused) {
		isPaused = false;
		//clearInterval(timerIdentifier);
		timerIdentifier = setInterval ( "doTimedFlip('right')", 6000 );
		$(".play").removeClass("play").addClass("pause");
		flipAPlayer("right");
	}
	else {
		isPaused = true;
		restartTimer();
		clearInterval(timerIdentifier);
		$(".pause").removeClass("pause").addClass("play");
	}
}
function restartTimer() {

}
function doTimedFlip() {
	if(!isPaused) {
		flipAPlayer("right");
	};
}
function flipAPlayer(direction) {
	//if its not paused restart timer on click
	if(!isPaused) {
		clearInterval(timerIdentifier);
		timerIdentifier = setInterval ( "doTimedFlip('right')", 6000 );
	}
	if(numberOfSpots > 1) {
		if(direction == "right") {
			currentSpot++
		}
		else {
			currentSpot--
		}
		if(currentSpot == 0) {
			currentSpot = numberOfSpots;
		}
		else if(currentSpot > numberOfSpots) {
			currentSpot = 1;
		}
	}
	//alert("spot number: " + currentSpot + ", number of spots: " + numberOfSpots);
	moveToSpot(currentSpot);
	setDot(currentSpot);
	determineColor(currentSpot);
}
function determineColor(spotNumber) {
	//set color
	if($(".colorMode").eq(spotNumber - 1).hasClass("c1")) {
		setColor("#22408f", "#d4dcd3");
	}
	else if($(".colorMode").eq(spotNumber - 1).hasClass("c2")) {
		setColor("#d5ac29", "#cde7e7");
	}
	else if($(".colorMode").eq(spotNumber - 1).hasClass("c3")) {
		setColor("#00a453", "#ddd5b6");
	}
	else if($(".colorMode").eq(spotNumber - 1).hasClass("c4")) {
		setColor("#0097cc", "#ecddd1");
	}
	else if($(".colorMode").eq(spotNumber - 1).hasClass("c5")) {
		setColor("#ee3124", "#d9d7b3");
	}
}

function setDot(number) {
	if(number <= numberOfSpots) {
		$(".dot.current").removeClass("current");
		$(".dot").eq(number-1).addClass("current");
	}
}
function setColor(mColor, bColor) {
	//$(".aSpotPlayerTitleArea").animate( { backgroundColor: mColor }, 1000 );
	$(".aSpotPlayer").animate( { backgroundColor: mColor }, 1 );
}
function moveToSpot(number) {
	$(".spot:visible").hide();
	$(".spot").eq(number-1).fadeIn("slow");
	determineColor(number);
	if(!isPaused) {
		clearInterval(timerIdentifier);
		timerIdentifier = setInterval ( "doTimedFlip('right')", 6000 );
	}
	$('.LOEKidzASpotPlayer .groupHeader span').sifr({font: '/zondervan/include/fonts/CFatty', width: 255});
	
	$(".aSpotPlayerNavOverlay .previous a").fadeOut("fast");
	$(".aSpotPlayerNavOverlay .next a").fadeOut("fast");
	
}
function clickDot(dot) {
	for (i=0; i < numberOfSpots; i++) {
		var rootOne = 1 + i;
		variable1 = $(".dot").get(i);
		variable2 = dot;
		if(dot == $(".dot").get(i)) {
			setDot(rootOne);
			moveToSpot(rootOne);
			currentSpot = rootOne;
		}
	}
}
function hideArrows() {
	$(".aSpotPlayerNavOverlay .next").children(":visible").fadeOut("slow");
	$(".aSpotPlayerNavOverlay .previous").children(":visible").fadeOut("slow");
}