$(function(){
	
	var _imgArray = [];
	
	$("#thum a").each(function(){
		_imgArray.push($(this).attr("href"));
	});
	
	function loopImageLoader(i){
		var image1 = new Image();
		image1.src = _imgArray[i];
		image1.onload = function(){
			i++;
			if(_imgArray.length != i){
				loopImageLoader(i);
			}
		}
	}
	loopImageLoader(0);
	
	
	$(window).bind("load", function(){
																	
		var thumbnail = $("#thum a");
		var total = thumbnail.size();
		var imgNum = 0;
		var interval = 5;
		var fade1 = 1;
		var flag = 0;
	
		$("#mainImg img").css("display","none");
		$("#mainImg").css("display","block");
		$("#mainImg img, #thum, #mainBtn").fadeIn(fade1*1000);
		slidePlay();
		
		function slidePlay(){
			timerID = setInterval(function(){nextImage();}, interval*1000);
		}
		
		function slideStop(){
			clearInterval(timerID);
		}
		
		function nextImage(){
			imgNum++;
			if(imgNum>=total){
				imgNum=0;
			}
		
			flag = 1;
			var nextImg = thumbnail.eq(imgNum).attr("href");
			$("#mainImg img").before("<img src='" + nextImg + "' width=960 height=450 />");
			$("#mainImg img:last").fadeOut(fade1*1000, function(){
				$(this).remove();
				flag = 0;
			});

			thumbnail.removeClass("select");
			thumbnail.eq(imgNum).addClass("select");
			thumChange();
		}
		
		
		thumbnail.bind("click",imageChange);
		
		
		function imageChange(){
			var imagePath = $(this).attr("href");
			var mainImage = $(this).parents("#content").find("#mainImg img");
			
			if(imagePath != mainImage.attr("src") && flag == 0) {
				flag = 1;
				thumbnail.removeClass("select");
				$(this).addClass("select");
				slideStop();
				$("#mainImg img").before("<img src='" +imagePath + "' width=960 height=450 />");
				$("#mainImg img:last").fadeOut(fade1*1000, function(){
					$(this).remove();
					slidePlay();
					flag = 0;
				});
				
				imgNum =  $(this).parents("#mainImgBlock").find("#thum a").index(this);
				thumChange();
				
			}
			return false;                    
		}
		
		
		function thumChange(){
			$(".select").html("<img src='img/thum_on.gif' width='17' height='17' />");
			$("#thum a:not(.select)").html("<img src='img/thum.gif' width='17' height='17' />");
		}
		
	});
	
});