var slidenum = 0;
var intervalid;
var imagelist = new Array();

/* ready
----------------------------------------------- */
$(function() {

	// load
	$(window).bind("load", load);

});

/* load
----------------------------------------------- */
function load() {

	// load unbind
	$(window).unbind("load");
	
	// slide
	setSlide();

}

/* setSlide
----------------------------------------------- */
function setSlide() {

	$("#thumbnail").show();
	$("#thumbnail").css({ opacity:0 });
	$("#thumbnail").animate({ opacity:1 }, 500);
	$("#thumbnail li img").css({ opacity:0 });
	$("#thumbnail li").bind("click", slideClick);

	$("#mainimage li").show();
	$("#mainimage li").css({ opacity:0 });

	// slide start	
	startSlide();

}
function startSlide() {

	clearInterval(intervalid);

	$("#thumbnail li img").stop();
	$("#thumbnail li img").animate({ opacity:0.5 }, 500);
	$("#thumbnail li img").eq(slidenum).stop();
	$("#thumbnail li img").eq(slidenum).animate({ opacity:1 }, 500);

	$("#mainimage li").stop();
	$("#mainimage li").animate({ opacity:0 }, 2000, "easeInOutQuad");
	$("#mainimage li").eq(slidenum).stop();
	$("#mainimage li").eq(slidenum).animate({ opacity:1 }, 2000, "easeInOutQuad", function() {
		intervalid = setInterval(startSlide, 2000);
	});

	slidenum++;
	if (slidenum > $("#mainimage li").length - 1) {
		slidenum = 0;
	}
	
}
function slideClick() {

	clearInterval(intervalid);
	
	slidenum = $(this).index();
	
	// slide start	
	startSlide();

}