/**
 * Slideshow Script
 *
 * This controls the slideshow on any given page.  The slides go in the 
 * folder defined below as PIXDIR, each in it's own subdirectory.  
 * Name each pic slideshow-#.jpg.  If more pics are added,
 * just make sure the NUMPIX variable below is changed to reflect
 * the number of slides there are.  Images should be 487 x 332.
 * 
 * FINALLY, to tell the page which subdirectory of images to load, there
 * needs to be a script tag placed above the one for this file like this:
 * <script type="text/javascript">var slideshowdir = 'index';</script> 
 * where 'index' is replaced by whatever subdirectory of PIXDIR you want to load 
 * slides from.
 *
 * @author James Revillini <james@revillini.com>
 *
 **/

//CONSTANTS
var PIXDIR = './images/slideshows/';	//location of images
var MAXWIDTH = 974;		//width of layout
var FADETIME = 1000;	//milliseconds for each pic to fade in
var TIMEOUT = 5000;		//milliseconds to pause after each cycle
var NUMSLIDES = 4;		//# of cards to put on the page (the script really only supports 4 though.)


//YOU ARE NOW PAST THE CONFIGURABLE AREA - YOU SHOULD TURN BACK! 





//GLOBAL VARIABLES
var currentlevel = 0;
var currentpic = 0;
var currentz = 100;
var currentpixdir = PIXDIR;
var currentnumpix = 0;

//INITIALIZATION
$(function () {

	//set the correct slideshow; if non-true value is returned, get out of dodge because this is not a page where a slideshow is needed
	if (!change_slideshow()) return false;
	
	//loop thru each card in the picture space and set it up
	$('#picturespace div.card').hide().each(prepare_picture_card);
	
	
	//determine how many files are in the directory we're now going to read from
	count_files();
		
	setTimeout(fade0, 1000);	//we pause a little to allow the slides to load

});




//SUPPORTING FUNCTIONS

//gets a picture card ready for display (position, image, etc)
function prepare_picture_card (index) {

	//capture jQueryied card object
	$this = $(this);
	
	//set the image to use
	var bgpic = 'slideshow-' + currentpic + '.jpg';
	var bgposition = 'top left';
	//if this is an EVEN card align pic to the right side, and increasethe pic number for the next card
	if ( $this.hasClass('even') ) {
		bgposition = 'top right';
		//count how many pics used
		currentpic++;
	}
	
	//set position of the card
	var y = 0;
	var x = (MAXWIDTH / NUMSLIDES * index);
	//if we went too long, start laying them from the beginning again, but underneath the others
	if (x + (MAXWIDTH / NUMSLIDES ) > MAXWIDTH ) {
		x -= MAXWIDTH;
	}
	
	//set card dimensions
	var w = MAXWIDTH/NUMSLIDES;
	
	//set position and background of each card. firsdt two cards should be one pic, second two cards should be next pic, etc.
	$this.css({
		backgroundImage 	: 'url(' + currentpixdir + bgpic + ')',
		backgroundPosition	: bgposition,
		top			: y,
		left			: x,
		width			: w
	});

}

//TODO these fade functions could totally be refactored
function fade0 () {
	
	//hide cards on current level
	hide_current_cards();

	//set bgpics of each card on current level
	repic_current_cards();
	
	//move cards on current level higher
	move_current_cards();
	
	//fade in 0,1,2,3
	
	//get cards on current level
	$cards = $('#picturespace div.level' + currentlevel);
	
	setTimeout( function () { $cards.eq(0).fadeIn(1000); }, 0 * FADETIME);
	setTimeout( function () { $cards.eq(1).fadeIn(1000); }, 1 * FADETIME);
	setTimeout( function () { $cards.eq(2).fadeIn(1000); }, 2 * FADETIME);
	setTimeout( function () { $cards.eq(3).fadeIn(1000); }, 3 * FADETIME);
	
	
	//set current level
	currentlevel = currentlevel?0:1;
	
	//set timer to call next transition
	setTimeout (fade1, TIMEOUT);
	
}

function fade1 () {
	
	//hide cards on current level
	hide_current_cards();

	//set bgpics of each card on current level
	repic_current_cards();
	
	//move cards on current level higher
	move_current_cards();
	
	//fade in 0,2,1,3
	
	//get cards on current level
	$cards = $('#picturespace div.level' + currentlevel);
	
	setTimeout( function () { $cards.eq(0).fadeIn(1000); }, 0 * FADETIME);
	setTimeout( function () { $cards.eq(2).fadeIn(1000); }, 1 * FADETIME);
	setTimeout( function () { $cards.eq(1).fadeIn(1000); }, 2 * FADETIME);
	setTimeout( function () { $cards.eq(3).fadeIn(1000); }, 3 * FADETIME);
	
	
	//set current level
	currentlevel = currentlevel?0:1;
	
	//set timer to call next transition
	setTimeout (fade2, TIMEOUT);
	
}

function fade2 () {
	
	//hide cards on current level
	hide_current_cards();
	
	//set bgpics of each card on current level
	repic_current_cards();
	
	//move cards on current level higher
	move_current_cards();
	
	//fade in 0,3,1,2
	
	//get cards on current level
	$cards = $('#picturespace div.level' + currentlevel);
	
	setTimeout( function () { $cards.eq(0).fadeIn(1000); }, 0 * FADETIME);
	setTimeout( function () { $cards.eq(3).fadeIn(1000); }, 1 * FADETIME);
	setTimeout( function () { $cards.eq(1).fadeIn(1000); }, 2 * FADETIME);
	setTimeout( function () { $cards.eq(2).fadeIn(1000); }, 3 * FADETIME);
	
	
	//set current level
	currentlevel = currentlevel?0:1;
	
	//set timer to call next transition
	setTimeout (fade3, TIMEOUT);
	
}

function fade3 () {
	
	//hide cards on current level
	hide_current_cards();
	
	//set bgpics of each card on current level
	repic_current_cards();
	
	//move cards on current level higher
	move_current_cards();
	
	//fade in 1,2,0,4
	
	//get cards on current level
	$cards = $('#picturespace div.level' + currentlevel);
	
	setTimeout( function () { $cards.eq(1).fadeIn(1000); }, 0 * 1000);
	setTimeout( function () { $cards.eq(2).fadeIn(1000); }, 1 * 1000);
	setTimeout( function () { $cards.eq(0).fadeIn(1000); }, 2 * 1000);
	setTimeout( function () { $cards.eq(3).fadeIn(1000); }, 3 * 1000);
	
	
	//set current level
	currentlevel = currentlevel?0:1;
	
	//set timer to call next transition
	setTimeout (fade0, TIMEOUT);
	
}

function hide_current_cards () {
	$('#picturespace div.level' + currentlevel).hide();
}

function move_current_cards () {
	$('#picturespace div.level' + currentlevel).each(function () {
		$this = $(this);
		$this.css('zIndex', currentz++);
	});
}

function repic_current_cards () {
	$('#picturespace div.level' + currentlevel).each(function () {
		$this = $(this);
		$this.css('background-image', 'url('+currentpixdir+'slideshow-' +currentpic+'.jpg)');
		if ($this.hasClass('even')) {
			//go to next pic for next card
			currentpic++;
			
			//but if we're out of cards, go back to first
			if (currentpic == currentnumpix) {
				currentpic = 0;
			}
		}
	});
}

/**
 * this runs when the page is loaded.  it expects there to be a globally defined
 * variable called slideshowdir which defines the subdirectory to find pix in for
 * the slideshow.  we also check to make sure there's a place to put the slides.
 *
 * ex. this loads images from 'images/slideshows/bricco/' : var slideshowdir = 'bricco';
 */
function change_slideshow () {
	
	if ( window.slideshowdir && ($('#picturespace .card').size() > 0) ) {
		currentpixdir = PIXDIR + slideshowdir.toLowerCase() + '/';
		currentpic = 0;
		return true;
	}
	
}


/**
 * count the files in the currentpixdir
 */
function count_files () {
	
	currentnumpix = 0;
	
	$.ajax({
		type: "GET",
		url : './count-files.php?d=' + currentpixdir,
		success : function (n) {
			currentnumpix = parseInt(n);
		},
		error : function () {
			console.log('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa');
		}
	});
	
}