var fade = 800;
var Time = 8000;
var autoPlay = true;
var btnNavi = true;
var currentNo = 0;
var backNo = 0;
var mainImage;
var itv;
	
$(function()
{
	mainImage = $("#main-img ul > li").size();
	
	if (mainImage < 2) return;
	
	$("ul#list li").hide();
	$("ul#list li:eq(0)").fadeIn(1000);

	if (btnNavi)
	{
		$("#main-img ul#list").after("<div id=\"box\"><ul id=\"navi\"></ul></div>");
		for (i = 0; i < mainImage; i++)
		{
			$("ul#navi").append("<li id=\"imageNo_" + i + "\"><a href=\"javascript:void(0);\"><span>" + eval(i + 1) + "</span></a></li>");
		}
		$("ul#navi li a:eq(" + currentNo + ")").addClass("current");
		
		$("ul#navi li").click(function()
		{
			var targetNo = $(this).attr("id").replace("imageNo_", "");
			if (targetNo != currentNo)
			{
				backNo = currentNo;
				currentNo = targetNo;
				changeImage();
				if (autoPlay)
				{
					clearInterval(itv);
					itv = setInterval("setNo()",Time);
				}
			}
		});
	}
	if (autoPlay) itv = setInterval("setNo()",Time);
});

function setNo()
{
	backNo = currentNo;
	currentNo++;
	if (currentNo >= mainImage)
	{
		currentNo = 0;
	}
	changeImage();
}
	
function changeImage()
{		
	$("ul#list li:eq(" + backNo + ")").fadeOut(fade);
	$("ul#list li:eq(" + currentNo + ")").fadeIn(fade);
	
	if (btnNavi)
	{
		$("ul#navi li a:eq(" + backNo + ")").removeClass("current");
		$("ul#navi li a:eq(" + currentNo + ")").addClass("current");
	}
}