$(function(){
	var scrollTimer;
	$('.fadein img:gt(0)').hide();
	function slideshow(){
		$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');

		var $active = $('#topImgControl li.active');
		if($active.length == 0)$active = $('#topImgControl li:last');
		var $next =  $active.next().length ? $active.next() : $('#topImgControl li:first');
		$active.addClass('last-active');
		$next.css({opacity: 0.0})
			.addClass('active')
			.animate({opacity: 1.0}, 1000, function() {
				$active.removeClass('active last-active');
			});
	}
	
	$('#topImgControl li').click(function(){
		if($(this).attr('class') == 'active') return false;
		clearInterval(scrollTimer);
		var clickIndex = $('#topImgControl li').index(this);
		var activeIndex = $('#topImgControl li').index($("li.active"));
		var scrollCount =  clickIndex - activeIndex < 0 ? $('#topImgControl li').length - (activeIndex - clickIndex) : clickIndex - activeIndex;
		for(var loop = 0; loop < scrollCount; loop++){
			$('.fadein :first-child').hide().next('img').show().end().appendTo('.fadein');
			var $active = $('#topImgControl li.active');
			if($active.length == 0)$active = $('#topImgControl li:last');
			var $next =  $active.next().length ? $active.next() : $('#topImgControl li:first');
			$active.addClass('last-active');
			$next.addClass('active');
			$active.removeClass('active last-active');
		}
		scrollTimer = setInterval(slideshow, 5000);
	});
	
	scrollTimer = setInterval(slideshow, 5000);
});