// Crossfade using jQuery
// Copyright (C) Matthew Dawkins 2010
// www.matthewdawkins.co.uk

// Description:
// This script uses jQuery to create a simple yet customisable fading slideshow of objects. The code can be used more than once on a page if necessary. The structure is flexible too, so you can use whatever objects or markup you like as long as it follows the rough structure outlined below (unordered list would be fine). The container object will be automatically given CSS properties to make it a block element of the size of the first child item, and each child item will be placed in the top left corner of the container - if all children are the same size (which is normal) then it will just work like a slideshow. The child items themselves can be anything you like, incidentally, not just images. For backwards compatibility, if Javascript is not enabled all child items will be displayed at once; this also ensures that it is SEO-friendly. Finally, there is an optional variable to set the fades to happen in sequence rather than at the same time, which is useful if you want the first item to disappear completely before the next one appears.

// Usage:
// Include jQuery:
// <script type="text/javascript" src="jquery.js"></script>
// Include this file:
// <script type="text/javascript" src="crossfade.js"></script>
// Give your container a unique id, and each child item the class "crossfade":
// <item id="crossfade1">
//   <subitem class="crossfade" />
//   <subitem class="crossfade" />
// </item>
// Then tell crossfade() what to do with it. Tell it the id of the container, how long to pause on each item, and how long the fade process should take (in milliseconds):
// <script type="text/javascript">var cf1 = crossfade('crossfade1',4000,500);</script>
// Or, if you want to do the fades in sequence rather than at the same time, use this:
// <script type="text/javascript">var cf1 = crossfade('crossfade1',4000,500,true);</script>

// Sets up the crossfade timer once the page has finished loading
function crossfade(item,delay,fadeLen,exclusive) {
	exclusive = typeof(exclusive) != 'undefined' ? exclusive : false;
	$(document).ready(function(){
		prepFade('#'+item);
		setInterval('new doFade("#'+item+'",'+fadeLen+','+exclusive+')',delay)
	});
}

// Prepares the items prior to beginning the crossfade process
function prepFade(item) {
	// Give the container some styles to make it work
	$(item).css('height',$(item+' .crossfade:first').height()).css('width',$(item+' .crossfade:first').width()).css('position','relative').css('display','block');
	// Hide all the child items and absolutely position them inside the container
	$(item+' .crossfade').hide().css('position','absolute');
	// Show the first item
	$(item+' .crossfade:first').show();
}

// Fade between two items
function doFade(item,fadeLen,exclusive) {
	// make a note of the currently displayed item
	var currItem=$(item+' .crossfade:visible');
	// optionally, time fade in to be triggered after fade out has finished
	if (exclusive) {
		// fade out visible item
		currItem.fadeOut(fadeLen,function() {
			// if last item, fade in first item
			if (!currItem.next().hasClass('crossfade')) $(item+' .crossfade:first').fadeIn(fadeLen);
			// otherwise, fade in next item
			else $(currItem.next().fadeIn(fadeLen));
		});
	}
	// otherwise, fade out and in at the same time
	else {
		// if last item, fade in first item
		if (!currItem.next().hasClass('crossfade')) $(item+' .crossfade:first').fadeIn(fadeLen);
		// otherwise, fade in next item
		else $(currItem.next().fadeIn(fadeLen));
		// fade out visible item
		currItem.fadeOut(fadeLen);
	}
}