// Load up the images into an array and instantiate a counter
var slide_details = [{url:"images/cards/card1.png",alt:"Division (3,6,7,8,9)"},			
				{url:"images/cards/card1A.png",alt:"Division (3,6,7,8,9)"},
				{url:"images/cards/card2.png",alt:"Division (3,6,7,8,9)"},
				{url:"images/cards/card2A.png",alt:"Division (3,6,7,8,9)"},
				{url:"images/cards/card3.png",alt:"Division (3,6,7,8,9)"},
				{url:"images/cards/card3A.png",alt:"Division (3,6,7,8,9)"},
				{url:"images/cards/card4.png",alt:"Multiplication (1,2,4,5,10)"},
				{url:"images/cards/card4A.png",alt:"Multiplication (1,2,4,5,10)"},
				{url:"images/cards/card5.png",alt:"Multiplication (1,2,4,5,10)"},
				{url:"images/cards/card5A.png",alt:"Multiplication (1,2,4,5,10)"},
				{url:"images/cards/card6.png",alt:"Multiplication (1,2,4,5,10)"},
				{url:"images/cards/card6A.png",alt:"Multiplication (1,2,4,5,10)"},
				{url:"images/cards/card7.png",alt:"Multiplication (3,6,7,8,9)"},
				{url:"images/cards/card7A.png",alt:"Multiplication (3,6,7,8,9)"},
				{url:"images/cards/card8.png",alt:"Multiplication (3,6,7,8,9)"},
				{url:"images/cards/card8A.png",alt:"Multiplication (3,6,7,8,9)"},
				{url:"images/cards/card9.png",alt:"Multiplication (3,6,7,8,9)"},
				{url:"images/cards/card9A.png",alt:"Multiplication (3,6,7,8,9)"},
				{url:"images/cards/card10.png",alt:"Division (1,2,4,5,10)"},
				{url:"images/cards/card10A.png",alt:"Division (1,2,4,5,10)"},
				{url:"images/cards/card11.png",alt:"Division (1,2,4,5,10)"},
				{url:"images/cards/card11A.png",alt:"Division (1,2,4,5,10)"}];
var slides = new Array();
$.each(slide_details, function(index, slideDetails) {
	var img = $(new Image());
	img.load(function() {
		slides[index] = img;
	}).attr("src", slideDetails.url);
	img.attr("alt", slideDetails.alt)
	img.css({'position':'relative','left':'75px','top':'0px'});
	img.height(230);
	
});
var slide_counter = 1; //remember current slide index

/**
 * On ready flip the first card on a pause 
 */  
$(document).ready(function() {
	// Set the caption for the first card
	$("#cardcaption").html(slide_details[0].alt);

	// Set a pause
	setTimeout( "flipCard();", 3000);
});

/**
 * Replace the current card with a new front using a fade in and out
*/
function newCard() {
	$("#cardcaption").fadeOut('slow');
	$("#carddemo img").fadeOut('slow', function() {
		// Remove the old image
		var oldimg = $("#carddemo img");
		oldimg.remove();
		
		// Add the new slide
		var newslide = slides[slide_counter];
		$("#carddemo").append(newslide);
		
		// Increment the counter so that the pointer in the array is correcy
		incrementCounter();
		
		// Get the new card and position it
		var img = $("#carddemo img");
		img.hide();
		img.css({'position':'relative','left':'0px'});
		img.width(150);
		img.fadeIn('slow', function() {
			// Set the caption
			setTimeout( "flipCard();", 3000);
		});
		
		// Add the caption
		$("#cardcaption").html(img.attr("alt"));
		$("#cardcaption").fadeIn('slow');
		
	});
}

/**
 * Flips the card and displays the next iimage (i.e. the back)
 */
function flipCard() {
	$("#carddemo img").animate({width:'toggle',height:'230',left:'+=75'}, 1000, function() {
		// Remove the front of the card
		$("#carddemo img").remove();
		
		// Add the back of the card
		$("#carddemo").append(slides[slide_counter]);
		$("#carddemo img").width(0);
		$("#carddemo img").css({'left':'75px'});
		$("#carddemo img").animate({width:'150',height:'230',left:'-=75'}, 1000, function() {
			setTimeout( "newCard();", 5000);
		})
		incrementCounter();
	});
}

/**
 * Increment the counter and reset it when the end of the array is reached
 */
function incrementCounter() {
	slide_counter++;
	if (slide_counter == slides.length) {
		slide_counter = 0;
	}
}