/*
 * ImageRotation v0.2
 * Alex Panayotopoulos, Copyright (C) 2009 VisitScotland.com
 * 
 * Set up rotation of a set of images via the JQuery libraries
 * This script refers to 'images'; however, it can alse be applied to arbitrary elements, even those without
 * any image content at all. Notably, it can be applied to anchor tags which *contain* images, thus providing
 * a relevant link address for each image in a slideshow sequence.
 *
 * flipTime: time (in milliseconds) that each image is displayed for
 * fadeTime: time (in milliseconds) that an image takes to fade away
 * cssSelector: denotes the images to be rotated (e.g. '.slide', '#slideshow img')
 */
function ImageRotation(flipTime, fadeTime, cssSelector) {
	this.fadeTime = fadeTime;
	this.cssSelector = cssSelector;
	
	// Set the opacity of all images to 0
	$(cssSelector).css({opacity: 0.0});

	// Get the first image and display it
	var first = $(cssSelector + ':first');
	first.css({opacity: 1.0, zIndex: 500});
	first.addClass('show');

	// Call the rotator function to run the slideshow
	var self = this;
	setInterval(function() { self.rotate(); }, flipTime);

	this.rotate = function() {
		// Get the currently active image
		var current = $(this.cssSelector + '.show');

		// Get next image, when it reaches the end, rotate it back to the first image
		var next = ((current.next().length)
				? ((current.next().hasClass('show')) ? $(this.cssSelector + ':first') :current.next())
				: $(this.cssSelector + ':first'));
		
		// Set the fade in effect for the next image, the show class has higher z-index
		next.css({opacity: 0.0, zIndex: 500})
			.addClass('show')
			.animate({opacity: 1.0}, this.fadeTime);

		// Hide the current image
		current.animate({opacity: 0.0}, this.fadeTime)
			.css({zIndex: 'auto'})
			.removeClass('show');
	};
}