jQuery(function($){
	$('.slider').each(function(){
		var _this = this,
			$nav = $('UL.navigation', this),
			$circles = $('LI', $nav),
			$content = $('.slider-content .changeable', this),
			$active = $(),
			changeSlide = function(){
				var next = $active.index() + 1 != $circles.length ? $active.index() + 1 : 0;
				$circles.eq(next).click();
			},
			timeout = null;
		
		$circles.click(function(){
			$active.removeClass('active');
			$active = $(this).addClass('active');
			clearTimeout(timeout);
			timeout = setTimeout(changeSlide, 4000);
			$content.fadeTo(300, 0, function(){
				$content.html($('SPAN', $active).clone()).fadeTo('300', 1);
			});
		}).eq(0).click();
		$content.mouseover(function(){
			clearTimeout(timeout);
		});
		$content.mouseout(function(){
			timeout = setTimeout(changeSlide, 4000);
		});
	});
});