turnstile_pos = 0;
turnstile_timer = false;

$(function() {
	// Load data for the turnstile.
	$.ajax({
		dataType: 'json',
		success: function(json, textStatus) {
			turnstile_data = json.turnstile_data;
			
			// Display the appropriate number of picker items.
			var picker = $('.turnstile .picker');
			$('.turnstile .picker').empty();
			for (var i = 0; i < turnstile_data.length; i++) {
				picker.append('<li>' + (i + 1) + '</li>');
			}
			
			// Respond to picker clicks by skipping to the specified slide
			// in the turnstile.
			$('.picker li').click(function() {
				// Which slide was clicked?
				var index = $('.picker li').index(this);
				
				// Make sure that isn't the current slide.
				if ($('.picker li').eq(index).hasClass('current')) {
					return;
				}
				
				// Navigate to the slide with the clicked index.
				animateSlide(index);
			});

			// Display the first item.
			animateSlide(0);
		},
		url: 'admin/homepage.php'
	});
});

function animateSlide(id) {
	// Update the global turnstile position.  If we're navigating to this
	// slide out of order, the position will reflect where the turnstile
	// was, which is most likely incorrect.
	turnstile_pos = id;

	// Get the data for the requested slide.
	data = turnstile_data[id];

	// Clear the animation queue and timer, if they exist.
	if ($.fxqueue('single').stop) {
		$.fxqueue('single').stop();
	}

	// Do a simple hide of all turnstile elements in case they're visible for
	// some reason (for example, if the user clicked on a different slide).
	$('.turnstile h1')
		.add('.turnstile h2')
		.add('.turnstile p')
		.add('.turnstile .read_more')
		.add('.turnstile .images')
		.css('opacity', '0');
		
	clearTimeout(turnstile_timer);

	// Reset elements to their initial positions.
	$('.turnstile h1').css('left', '40px');
	$('.turnstile h2').css('left', '-40px');
	$('.turnstile .read_more').css('left', '0');

	// Initialize the content of elements using the turnstile data.
	$('.turnstile h1 a').html(data.title);
	$('.turnstile h2').html(data.subtitle);
	$('.turnstile p').html(data.caption);

	// Initialize the image crossfader.
	$('.turnstile .images').empty();

	// Images are inserted in the reverse order.  This allows the crossfader to
	// set the opacity of the last image in the stack to 0, revealing the one
	// before it, and so on.
	for (var i = 0; i < data.images.length; i++) {
		var graphic = $('<a><img height="166" width="166" /></a>');
		graphic.find('img').attr('src', data.images[i]);
		$('.turnstile .images').prepend(graphic);
	}
	
	// Apply links to the destination web site.  (This needs to happen after the
	// images are inserted into the crossfader.)
	$('.turnstile .read_more a')
		.add('.turnstile h1 a')
		.add('.turnstile .images a')
		.attr('href', data.href);
	
	// Update the picker to match the position of the current story.
	updatePicker(id);
	
	// Animate the main title sliding in from the right, and the subtitle
	// sliding in from the left.
	$('.turnstile h1').animate(
		{ left: 0, opacity: 1 },
		{ easing: 'swing', queue: 'single', scope: 'titles', duration: 1500 }
	);
	$('.turnstile h2').animate(
		{ left: 0, opacity: 1 },
		{ easing: 'swing', queue: 'single', scope: 'titles', duration: 1500 }
	);

	// Fade in the paragraph.
	$('.turnstile p').animate(
		{ opacity: 1 },
		{ easing: 'swing', queue: 'single', scope: 'part2', duration: 1000 }
	);

	// Fade in the first image.
	$('.turnstile .images').animate(
		{ opacity: 1 },
		{
			easing: 'swing',
			queue: 'single',
			scope: 'part2',
			preDelay: 1250,
			duration: 1000,
			complete: function() {
				// If we have only one image, no crossfading logic is required.
				// Just queue for the next story.
				if ($('.turnstile .images img').length == 1) {
					clearTimeout(turnstile_timer);
					turnstile_timer = setTimeout(doSingleOut, 7500);
				} else {			
					// Fade out all the images in the stack except the last two.
					// (The first gets a longer postDelay; the second doesn't fade until
					// the container DIV fades. 
					for (var i = data.images.length - 1; i > 1; i--) {
						$('.turnstile .images img').eq(i).animate(
							{ opacity: 0 },
							{ queue: 'image_crossfader', easing: 'swing', preDelay: 500, duration: 1000 }
						);
					}
	
					// Queue the fade for the last image, and prep the callback.
					$('.turnstile .images img').eq(1).animate(
						{ opacity: 0 },
						{
							queue: 'image_crossfader',
							easing: 'swing',
							preDelay: 500,
							duration: 1000,
							complete: function() {
								// In animation done.
								clearTimeout(turnstile_timer);
								turnstile_timer = setTimeout(doSingleOut, 5000);
							}
						}
					);
				}
			}
		}
	);

	// Fade in the "Read More" link.
	$('.turnstile .read_more').animate({ opacity: 1 }, { easing: 'swing', queue: 'single', scope: 'part2', preDelay: 1750, duration: 1000 });
};

function doSingleOut() {
	// Slide titles and "Read More" link to the right.
	$('.turnstile h1').animate(
		{ left: '80px', opacity: 0 },
		{ easing: 'swing', queue: 'single', scope: 'out', duration: 1000 }
	);
	
	$('.turnstile h2').animate(
		{ left: '50px', opacity: 0 },
		{ easing: 'swing', queue: 'single', scope: 'out', preDelay: 250, duration: 1000 }
	);
	
	$('.turnstile .read_more').animate(
		{ left: '30px', opacity: 0 },
		{ easing: 'swing', queue: 'single', scope: 'out', preDelay: 250, duration: 1000 }
	);
	
	// Fade paragraph.
	$('.turnstile p').animate(
		{ opacity: 0 },
		{ easing: 'swing', queue: 'single', scope: 'out', preDelay: 500, duration: 1000 }
	);
	
	// Fade image crossfader more slowly.  Execute callback after the fader
	// has been completely removed.
	$('.turnstile .images').animate(
		{ opacity: 0 },
		{ easing: 'swing', queue: 'single', scope: 'out', preDelay: 1000, duration: 1500, complete: nextTurnstile }
	);
};

// Update the picker.
function updatePicker(id) {
	var items = $('.turnstile .picker li')
	items.removeClass('current');
	items.eq(id).addClass('current');
}

function nextTurnstile() {
	if (turnstile_pos == turnstile_data.length - 1) {
		turnstile_pos = 0;
	} else {
		turnstile_pos += 1;
	}

	animateSlide(turnstile_pos);
};