// create our transition as a plugin
jQuery.fn.slideshow = function () {
  return this.each(function () { 
    // cache the copy of jQuery(this) - the start image
    var $$ = $(this), timeout = null, transition_time = 2000;

		function next() {
			var next = $$.find('li.active').fadeOut(transition_time, function() {
				$(this).removeClass('active');
			}).next();

			if ( next.length === 0 ) {
				next = $$.find('li:first-child');
			}

			next.fadeIn(transition_time, function() {
				$(this).addClass('active');
			});

			return false;
		}

		$$.find('li:first-child').addClass('active');
		timeout = setInterval(next, 5000);
	});
};

$(function() {
	$('ol.slideshow').slideshow();
});



// create our transition as a plugin
// $.fn.crossfade = function () {
//   return this.each(function () { 
//     // cache the copy of jQuery(this) - the start image
//     var $$ = $(this);
//     
//     // get the target from the backgroundImage + regexp
//     var target = $$.css('backgroundImage').replace(/^url|[()]/g, ''));
//     
//     // nice long chain: wrap img element in span
//     $$.wrap('<span style="position: relative;"></span>')
//       // change selector to parent - i.e. newly created span
//       .parent()
//       // prepend a new image inside the span
//       .prepend('<img>')
//       // change the selector to the newly created image
//       .find(':first-child')
//       // set the image to the target
//       .attr('src', target);
//     
//     // position the original image
//     $$.css({
//       'position' : 'absolute', 
//       'left' : 0, 
//       // this.offsetTop aligns the image correctly inside the span
//       'top' : this.offsetTop
//     });
//     
//     // note: the above CSS change requires different handling for Opera and Safari,
//     // see the full plugin for this.
//     
//     // similar effect as single image technique, except using .animate 
//     // which will handle the fading up from the right opacity for us
//     $$.hover(function () {
//       $$.stop().animate({
//           opacity: 0
//       }, 250);
//     }, function () {
//       $$.stop().animate({
//           opacity: 1
//       }, 3000);
//     });
//   });
// };
// 
// // Not only when the DOM is ready, but when the images have finished loading,
// // important, but subtle difference to $(document).ready();
// $(window).bind('load', function () {
//   // run the cross fade plugin against selector
//   $('img.fade').crossfade();
// });