var cardbackwidth = 238;
var currentlyshowing = '';

// Preload Cards images
var cardimages = [
	'cardback1.png',
	'cardback2.png',
	'cardback3.png',
	'cardback4.png',
	'deck1_card1.png',
	'deck1_card2.png',
	'deck1_card3.png',
	'deck1_card4.png',
	'deck2_card1.png',
	'deck2_card2.png',
	'deck2_card3.png',
	'deck2_card4.png',
	'deck3_card1.png',
	'deck3_card2.png',
	'deck3_card3.png',
	'deck3_card4.png',
	'deck4_card1.png',
	'deck4_card2.png',
	'deck4_card3.png',
	'deck4_card4.png',
	'year1_card1.png',
	'year1_card2.png',
	'year1_card3.png',
	'year1_card4.png',
	'year2_card1.png',
	'year2_card2.png',
	'year2_card3.png',
	'year2_card4.png',
	'year3_card1.png',
	'year3_card2.png',
	'year3_card3.png',
	'year3_card4.png',
	'year4_card1.png',
	'year4_card2.png',
	'year4_card3.png',
	'year4_card4.png'
];

var cardimgs = [];
for (i = 0; i < cardimages.length; i++)
{
	cardimgs[i] = new Image;
	cardimgs[i].src = HttpRootPath + 'images/'+cardimages[i];
}

Event.observe(window, 'load', function()
{
	initCards();
});

function initCards()
{
	complete = 0;
	for (i = 0; i < cardimgs.length; i++)
	{
		if (cardimgs[i].complete) complete++;
	}
	
	if (complete == cardimgs.length)
	{
		// Start the show...
		$('cards_loading').hide();
		$('cards_wrapper').setStyle('display: block;');
	}else{
		// Wait half a second and check again...
		window.setTimeout('initCards();', 500);
	}
}

function showCards(id)
{
	if ($('deck'+id) && $('cardback'+id))
	{
		currentlyshowing = id;

		$$('#cardback'+id+' a')[0].blur();

		// Slide each cardback to where it belongs
		for (i = 1; i <= 4; i++)
		{
			if (i == id)
			{
				// Reset this deck's position

				// Hide the deck of cards
				$('deck'+id).hide();

				// Reset the Back button
				$('deck'+id+'_back').hide();
				$('deck'+id+'_back').setStyle('margin-top: 0px;');

				// Hide the quote for this deck
				$('deck'+id+'_quote').setOpacity(0);

				// Slide each card in this deck (instantly) back to it's initial position (happens invisibly)
				for (j = 1; j <= 4; j++)
				{
					$('deck'+id+'_card'+j).setStyle('background-color: transparent;');
					new Effect.Move('deck'+id+'_card'+j, { duration: 0, x: 0, y: 0, mode: 'absolute'});
					window.setTimeout('$(\'deck'+id+'_card'+j+'\').show();', 10);
				}

				// Perform animation
				if (id != 1)
				{
					// Slide selected cardback to alpha position
					new Effect.Move('cardback'+i, { duration: .5, x: ((id - 1) * cardbackwidth * -1), mode: 'relative' });

					// Display cards for this deck
					window.setTimeout('$(\'deck'+i+'\').setStyle(\'display: block;\');', 500);

					// Hide cardback (revealing top card on deck below)
					window.setTimeout('$(\'cardback'+i+'\').hide();', 490);
				}else{
					// First card doesn't slide, so make the transition instant

					// Display cards for this deck
					$('deck'+i).setStyle('display: block;');

					// Hide cardback (revealing top card on deck below)
					$('cardback'+i).hide();
				}

				// "Deal" out cards for this section
				window.setTimeout('new Effect.Move(\'deck'+i+'_card2\', { duration: .6, x: 220, mode: \'relative\' });', 500);
				window.setTimeout('new Effect.Move(\'deck'+i+'_card3\', { duration: .6, x: 455, mode: \'relative\' });', 1100);
				window.setTimeout('new Effect.Move(\'deck'+i+'_card4\', { duration: .6, x: 680, mode: \'relative\' });', 1700);

				// Show "Back" button
				window.setTimeout('$(\'deck'+id+'_back\').show();', 2300);

				// Fade in Quote
				window.setTimeout('$(\'deck'+id+'_quote\').setOpacity(0);', 2250);
				window.setTimeout('$(\'deck'+id+'_quote\').setStyle(\'display: block;\');', 2255);
				window.setTimeout('$(\'deck'+id+'_quote\').fade({from: 0, to: 1, duration: .4});', 2300);

				// Deactivate loading lock
				window.setTimeout('currentlyshowing = \'\';', 2300);
			}else{
				// Slide all other cardbacks offscreen
				new Effect.Move('cardback'+i, { duration: .5, x: -1000, y: ((i - 3) * 300), mode: 'relative' });
				$('cardback'+i).fade({ duration: .5, from: 1, to: 0});

				// Hide the cards
				for (j = 1; j <= 5; j++)
				{
					if ($('deck'+i+'_card'+j))
					{
						$('deck'+i+'_card'+j).hide();
					}
				}
			}
		}
	}
}

function showCardsMenu(deckid)
{
	if ($('deck'+deckid))
	{
		// Hide the back button for this deck
		$('deck'+deckid+'_back').hide();

		// Slide cards off-screen
		for (i = 1; i <= 4; i++)
		{
			new Effect.Move('deck'+deckid+'_card'+i, { duration: .5, x: 1000, y: ((i - 3) * 300), mode: 'absolute'});
			$('deck'+deckid+'_card'+i).setStyle('background-color: #fff;');
			$('deck'+deckid+'_card'+i).fade({ duration: .5, from: 1, to: 0});
			window.setTimeout('$(\'deck'+deckid+'_card'+i+'\').setStyle(\'background-color: transparent;\');', 500);
		}
	}

	// Slide each cardback (instantly) back to it's initial position (happens invisibly)
	for (i = 1; i <= 4; i++)
	{
		new Effect.Move('cardback'+i, { duration: 0, x: 0, y: 0, mode: 'absolute' });
		$('cardback'+i).show();
		$('cardback'+i).setOpacity(0);
		window.setTimeout('$(\'cardback'+i+'\').fade({from: 0, to: 1, duration: .25});', 500);
	}
}

function selectCardsTab(id)
{
	if ($('cardstab_'+id))
	{
		if (id != 'overview') $('cardstab_overview').removeClassName('selected');
		if (id != 'firstyear') $('cardstab_firstyear').removeClassName('selected');
		if (id != 'secondyear') $('cardstab_secondyear').removeClassName('selected');
		if (id != 'thirdyear') $('cardstab_thirdyear').removeClassName('selected');
		if (id != 'fourthyear') $('cardstab_fourthyear').removeClassName('selected');

		$('cardstab_'+id).addClassName('selected');
		$('cardstab_'+id).blur();
	}
}

function showYearCards(id)
{
	if (id == 0)
	{
		// Slide all year cards offscreen
		for (y = 1; y <= 4; y++)
		{
			if ($('year'+y) && $('year'+y).getStyle('display') != 'none')
			{
				ycs = $$('#year'+y+' .yearcard');
				for (i = 0; i < ycs.length; i++)
				{
					new Effect.Move(ycs[i], { duration: 1, x: (i < 2 ? -1000 : 1000), y: ((i + 1) % 2 == 0 ? 1000 : -1000), mode: 'relative' });
					$(ycs[i]).fade({ duration: 1, from: 1, to: 0});
				}

				window.setTimeout('$(\'year'+y+'\').setStyle(\'display: none;\');', 1000);
			}
		}
		// Slide all decks of cards offscreen
		for (i = 1; i <= 4; i++)
		{
			if ($('deck'+i) && $('deck'+i).getStyle('display') != 'none')
			{
				cs = $$('#deck'+i+' .card');
				for (j = 0; j < cs.length; j++)
				{
					$(cs[j]).setStyle('background-color: #fff;');
					new Effect.Move(cs[j], { duration: 1, x: (j < 2 ? -1000 : 1000), y: ((j + 1) % 2 == 0 ? 1000 : -1000), mode: 'relative' });
					$(cs[j]).fade({ duration: 1, from: 1, to: 0});
				}
			}
		}

		// Fade in cardbacks
		$('cardbacks').setStyle('display: block;');
		for (i = 1; i <= 4; i++)
		{
			new Effect.Move('cardback'+i, { duration: 0, x: 0, y: 0, mode: 'absolute' }); // Start by moving them offscreen...
			$('cardback'+i).setOpacity(0);
			$('cardback'+i).setStyle('display: block;');
			window.setTimeout('$(\'cardback'+i+'\').fade({duration: .5, from: 0, to: 1});', 1000);

			$('deck'+i+'_back').setStyle('margin-top: -20000px;');
		}
	}else if ($('year'+id))
	{

		// Slide all year cards offscreen
		for (y = 1; y <= 4; y++)
		{
			if (id != y && $('year'+y) && $('year'+y).getStyle('display') != 'none')
			{
				ycs = $$('#year'+y+' .yearcard');
				for (i = 0; i < ycs.length; i++)
				{
					new Effect.Move(ycs[i], { duration: 1, x: (i < 2 ? -1000 : 1000), y: ((i + 1) % 2 == 0 ? 1000 : -1000), mode: 'relative' });
					$(ycs[i]).fade({ duration: 1, from: 1, to: 0});
				}

				window.setTimeout('$(\'year'+y+'\').setStyle(\'display: none;\');', 1000);
			}
		}
		
		// Slide all cardbacks offscreen
		cbs = $$('.cardback');
		for (i = 0; i < cbs.length; i++)
		{
			new Effect.Move(cbs[i], { duration: 1, x: (i < 2 ? -1000 : 1000), y: ((i + 1) % 2 == 0 ? 1000 : -1000), mode: 'relative' });
			$(cbs[i]).fade({ duration: 1, from: 1, to: 0});
		}

		// Slide all decks of cards offscreen
		for (i = 1; i <= 4; i++)
		{
			if ($('deck'+i) && $('deck'+i).getStyle('display') != 'none')
			{
				$('deck'+i+'_back').hide();

				cs = $$('#deck'+i+' .card');
				for (j = 0; j < cs.length; j++)
				{
					$(cs[j]).setStyle('background-color: #fff;');
					new Effect.Move(cs[j], { duration: 1, x: (j < 2 ? -1000 : 1000), y: ((j + 1) % 2 == 0 ? 1000 : -1000), mode: 'relative' });
					$(cs[j]).fade({ duration: 1, from: 1, to: 0});
				}
			}
		}

		// Fade in year cards
		window.setTimeout('$(\'year'+id+'\').setStyle(\'display: block;\');', 1000);
		for (i = 1; i <= 4; i++)
		{
			new Effect.Move('year'+id+'_card'+i, { duration: 0, x: 0, y: 0, mode: 'absolute' }); // Start by moving them offscreen...
			$('year'+id+'_card'+i).setOpacity(0);
			$('year'+id+'_card'+i).setStyle('display: block;');
			window.setTimeout('$(\'year'+id+'_card'+i+'\').fade({duration: .5, from: 0, to: 1});', 1000);
		}
	}
}