/**************************************

User Interface functions for cards on home page.

***************************************/


card1_status = "front";
card2_status = "front";
card3_status = "front";
cardImagesLoaded = 0;
function countLoadedCardImages()
{
	cardImagesLoaded ++;
	//alert ("count " + cardImagesLoaded);
	if (cardImagesLoaded == 12) {
		playAnimation();
	}
}

function playAnimation()
{
	var card1 = document.getElementById("card1");
	if (card1) {
		card1.style.display = "block";
	}
	var card2 = document.getElementById("card2");
	if (card2) {
		card2.style.display = "block";
	}
	var card3 = document.getElementById("card3");
	if (card3) {
		card3.style.display = "block";
	}
	animating1_time = window.setTimeout(function(){animateCard(1)},100);
	animating2_time = window.setTimeout(function(){animateCard(2)},400);
	animating3_time = window.setTimeout(function(){animateCard(3)},700);
}

function animateCard(cardNumber)
{
	window.clearTimeout(window['animating' + cardNumber + "_time"]);
	handleCard(cardNumber);
	window['aniTimeout_' + cardNumber] = window.setTimeout(function(){handleCard(cardNumber)},1000);
}

//create image objects
var preloadFront1 = new Image();
var preloadBack1 = new Image();
var preloadfront_to_back1 = new Image();
var preloadback_to_front1 = new Image();

var preloadFront2 = new Image();
var preloadBack2 = new Image();
var preloadfront_to_back2 = new Image();
var preloadback_to_front2 = new Image();

var preloadFront3 = new Image();
var preloadBack3 = new Image();
var preloadfront_to_back3 = new Image();
var preloadback_to_front3 = new Image();

//*******************************************************
//					PRELOAD IMAGES
//*******************************************************
function preloadImages()
{
	//on load functions
	preloadFront1.onload = countLoadedCardImages;
	preloadBack1.onload = countLoadedCardImages;
	preloadfront_to_back1.onload = countLoadedCardImages;
	preloadback_to_front1.onload = countLoadedCardImages;
	
	preloadFront2.onload = countLoadedCardImages;
	preloadBack2.onload = countLoadedCardImages;
	preloadfront_to_back2.onload = countLoadedCardImages;
	preloadback_to_front2.onload = countLoadedCardImages;
	
	preloadFront3.onload = countLoadedCardImages;
	preloadBack3.onload = countLoadedCardImages;
	preloadfront_to_back3.onload = countLoadedCardImages;
	preloadback_to_front3.onload = countLoadedCardImages;
	
	//load image
	preloadFront1.src = "/images/home_cards/button1-f.jpg";
	preloadBack1.src = "/images/home_cards/button1-b.jpg";
	preloadfront_to_back1.src = "/images/home_cards/button1f.gif";
	preloadback_to_front1.src = "/images/home_cards/button1b.gif";
	
	preloadFront2.src = "/images/home_cards/button2-f.jpg";
	preloadBack2.src = "/images/home_cards/button2-b.jpg";
	preloadfront_to_back2.src = "/images/home_cards/button2f.gif";
	preloadback_to_front2.src = "/images/home_cards/button2b.gif";
	
	preloadFront3.src = "/images/home_cards/button3-f.jpg";
	preloadBack3.src = "/images/home_cards/button3-b.jpg";
	preloadfront_to_back3.src = "/images/home_cards/button3f.gif";
	preloadback_to_front3.src = "/images/home_cards/button2b.gif";
}

function mouseoverCard(cardNumber)
{
	window.clearTimeout(window['aniTimeout_' + cardNumber]);
	window.clearTimeout(window['animating' + cardNumber + '_time']);
	var card = document.getElementById("card" + cardNumber);
	if (card) {
		currentImage = card.src;
		if (currentImage != "/images/home_cards/button" + cardNumber + "-f.jpg" && window['card' + cardNumber + "_status"] != "goingToBack" && window['card' + cardNumber + "_status"] != "back") {
			window['card' + cardNumber + "_status"] = "front";
			handleCard(cardNumber);
		}
		else {
			if (window['card' + cardNumber + "_status"] == "goingToBack" || window['card' + cardNumber + "_status"] == "back") {
				window.clearTimeout(window['aniTimeout_' + cardNumber]);
			}
		}
	}
}

function mouseoutCard(cardNumber)
{
	var card = document.getElementById("card" + cardNumber);
	if (card) {
		currentImage = card.src;
		if (currentImage != "/images/home_cards/button" + cardNumber + "-b.jpg" && window['card' + cardNumber + "_status"] != "goingToFront") {
			window['card' + cardNumber + "_status"] = "back";
			handleCard(cardNumber);
		}
	}
}

function handleCard(cardNumber)
{
	if (window['aniTimeout_' + cardNumber]) {
		window.clearTimeout(window['aniTimeout_' + cardNumber]);
	}
	window.clearTimeout(window['timeout_' + cardNumber]);
	var status = window['card' + cardNumber + "_status"];
	var card = document.getElementById("card" + cardNumber);
	if (card) {
		if (status == "front") {
			window['card' + cardNumber + "_status"] = "goingToBack";
			card.src = "/images/home_cards/button" + cardNumber + "f.gif";
			window['timeout_' + cardNumber] = window.setTimeout(function(){showBackCard(cardNumber)},300);
		}
		else {
			window['card' + cardNumber + "_status"] = "goingToFront";
			card.src = "/images/home_cards/button" + cardNumber + "b.gif";
			window['timeout_' + cardNumber] = window.setTimeout(function(){showFrontCard(cardNumber)},300);
		}
	}
}

function showBackCard(cardNumber)
{
	window['card' + cardNumber + "_status"] = "back";
	window.clearTimeout(window['timeout_' + cardNumber]);
	var card = document.getElementById("card" + cardNumber);
	if (card) {
		card.src = "/images/home_cards/button" + cardNumber + "-b.jpg";
	}
}

function showFrontCard(cardNumber)
{
	window['card' + cardNumber + "_status"] = "front";
	window.clearTimeout(window['timeout_' + cardNumber]);
	var card = document.getElementById("card" + cardNumber);
	if (card) {
		card.src = "/images/home_cards/button" + cardNumber + "-f.jpg";
	}
}