// JavaScript Document

 (function($) {
$(function(){
	var _imgNum = 0;	//?????
	var _imgSize = 0;	//??????
	var _current = 0;	//?????
	var _timer = 5000;	//??????

	//???????
	$('#container').append('<div id="pagenation"><ul></ul></div>');

	//???????
	_imgSize = $('#banner ul li').width();

	//?????????????
	$('#banner ul li').each(function(){
		//???????????
		$(this).css('margin-left', -_imgSize);
		//????????????????????
		if (_imgNum == _current) {
			//current???????????????????
			$('#pagenation ul').append('<li class="active"><a href="#"><img src="images/pagenation.gif" width="12" height="24" /></a></li>');
			$(this).css('margin-left', '0px');
		} else {
			$('#pagenation ul').append('<li><a href="#"><img src="images/pagenation.gif" width="12" height="24" /></a></li>');
		}
		//????????????_imgNum????
		_imgNum++;
	});

	//????????
	//$('#btn-next').click(function(){
		//imageMove(_current +1);
	//});
	//$('#btn-prev').click(function(){
		//imageMove(_current -1);
	//});*//
	//????????????
	$('#pagenation ul li').click(function() {
		var thisNum = $('#pagenation li').index(this);
		//?????????????????????
		if(thisNum  != _current) {
			imageMove(thisNum );
		}
	});
	//???????imageMove???
	setInterval(function(){
		imageMove(_current +1);
	}, _timer);

	function imageMove(next) {
		//??????????????????????????????
		var pos;
		if (_current < next) {
			pos = -_imgSize;
		} else {
			pos = _imgSize;
		}

		//?????????1??????????
		if (next == _imgNum) {
			next = 0;
		} else if(next == -1) {
			next = (_imgNum-1);
		}

		//????????
		$("#banner li").eq(next)
		//????????????
		.css("margin-left", pos)
		.animate({marginLeft: "0"},"fast");

		//?????????
		$("#banner li").eq(_current)
		.animate({marginLeft: -pos},"fast");

		//???????????????????????
		$('#pagenation li').eq(_current).removeClass('active');
		$('#pagenation li').eq(next).addClass('active');

		//??????????????
		_current = next;
	}
});
})(jQuery);