// Yeah, yeah
// this was first only for one slider per page, then i needed two
// should make it properly object oriented

var sliders = [];

$(function() {
	// Get all the sliders in the page
	var sliderElems = $('.image-slider').get();
	
	// Initialise globals
	for (i in sliderElems) {
	  var slider = {
	  					'ref': sliderElems[i],
						'id': sliderElems[i].id,
						'nextImage': 1,
						'quickJump': false,
						'quickJumpId': 0,
						'images': $('.image', sliderElems[i])
					};
	  
	  sliders.push(slider);
	}
	
	// Start the animation
	for (i in sliders) {
		changeImage(sliders[i]);
	}
});

function changeImage(slider) {
	if (! slider.quickJump) {
		showImage(slider, slider.nextImage);
		pickNextImage(slider);
		window.setTimeout(function() {changeImage(slider)}, 4000);
	}

	slider.quickJump = false;
}

function pickNextImage(slider) {
	slider.nextImage++;
	if (slider.nextImage > slider.images.length)
		slider.nextImage = 1;
}

function chooseImage(slider, imageId) {
	if (slider.quickJump) {
		// Second button click
		// Clear previous timeout
		window.clearTimeout(slider.quickJumpId);
	}

	slider.quickJump = true;
	slider.nextImage = imageId;
	showImage(slider, imageId);
	pickNextImage(slider);

	// Current timing event will be ignored due to quickJump param
	slider.quickJumpId = window.setTimeout(function() {changeImage(slider)}, 4000);
}

function showImage(slider, imageId) {
	// Fade old image
	//$('#' + slider.id + ' .fader').fadeIn('slow',
	$('.fader', slider.ref).fadeIn('slow',
	  // Callback:
		function() {
			// Show next image
			$('.image', slider.ref).hide();
			$('.image' + imageId, slider.ref).show();
			
			// Unfade new image
			$('.fader', slider.ref).fadeOut('slow');
		});
	
	$('.choices .choice', slider.ref).removeClass('selected');
	$('.choices .choice', slider.ref).eq(imageId-1).addClass('selected');
}