(function($) {
$(function(){
	var _imgNum = 0;
	var _imgSize = 0;
	var _current = 0;
	var _timer = 4000;

	_imgSize = $('#topbanner ul li').width();
		
	$('#topbanner ul li').each(function(){
		$(this).css('margin-left', -_imgSize);
		if (_imgNum == _current) {
			$(this).css('margin-left', '0px');
		} else {
		}
		_imgNum++;
	});

	$('#topbanner_thum li').mouseover(function() {
		var thisNum = $('#topbanner_thum li').index(this);
		if(thisNum  != _current) {
			imageMove(thisNum );
		}
	});

	timerID = setInterval(function(){
		imageMove(_current +1);
	}, _timer);
	
	$('#topbanner_thum li,#topbanner ul li').hover(function(){
	clearInterval(timerID)
	},function(){
	timerID = setInterval(function(){
		imageMove(_current +1);
	}, _timer);
	});

	function imageMove(next) {
		var pos;
		if (_current < next) {
			pos = -_imgSize;
		} else {
			pos = _imgSize;
		}
		
		if (next == _imgNum) {
			next = 0;
		} else if(next == -1) {
			next = (_imgNum-1);
		}

		$("#topbanner li").eq(next)
		.css("margin-left", pos)
		.animate({
			marginLeft: "0"
		},"slow");
		
		$("#topbanner li").eq(_current)
		.animate({
			marginLeft: -pos
		},"slow");
		
		$('#topbanner_thum li').eq(_current).removeClass('active');
		$('#topbanner_thum li').eq(next).addClass('active');
		
		_current = next;
	}
});
})(jQuery);