//-+-+-+-+- GARALLY IMAGE -+-+-+-+-//

$(document).ready(function(){
	
	//---LOAD IMAGES
	function initGarallyImages() {
		var imageCache = new Object();
		$("#main_area img").each(function(i) {
			var imgSrc = this.src;
			imageCache[imgSrc] = new Image();
			imageCache[imgSrc].src = imgSrc;
		});
	}
	initGarallyImages();
	
	function GarallyImage() {
		
		var mainImageArray = $("#main_area div");
		var thumImageArray = $("#thum_area ul li");
		var linkArray = $("#thum_area ul li a");
		var arrayLength = mainImageArray.length;
		var thumCurrent = $("#thum_area .current");
		var thumCurrentLink = $("#thum_area .current a");
		
		var processFlag = false;
		var nextImageNum = 0;
		
		var changeTimer;
		var displayTimer;
		var displayDuration = 2000;
		var hiddenDuration = 300;
		var changeTimerDuration = 4000;
		mouseoverFlag = false;
		
		function imageChange(nextImgNum){
			if(!processFlag){
				processFlag = true;
				
				clearTimeout(displayTimer);
				clearTimeout(changeTimer);
				
				nextImageNum = nextImgNum;
				nextImageNum += 0;
				
				imageHidden();
				//console.log(nextImageNum);
				
				changeTimer = setTimeout(function() {
					processFlag = false;
					
					imageDisplay(nextImageNum);
					moveThumbCurrent(nextImageNum);
					
					nextImageNum += 1;
					if(nextImageNum >= arrayLength){
						nextImageNum = 0;
					}
					displayTimer = setTimeout(function() {
						imageChange(nextImageNum);
					}, changeTimerDuration);
				}, hiddenDuration);
			}else{
				return true;
			}
		}
		imageChange(nextImageNum);
		
		//DISPLAY
		function imageDisplay(num){
			$(mainImageArray[num]).animate({
				opacity: 1
			}, displayDuration, "easeOutQuint");
			$(mainImageArray[num]).css("z-index",5);
		}
		//HIDDEN
		function imageHidden(){
			$(mainImageArray).animate({
				opacity: 0
			}, hiddenDuration, "easeInQuart");
			$(mainImageArray).css("z-index",1);
		}
		
		//THUMBNAIL
		function moveThumbCurrent(num){
			var thumHeight = 47;
			var thumCurrentPosition = num * thumHeight - 1;
			$(thumCurrent).animate({
				top: thumCurrentPosition + "px"
			}, hiddenDuration, "easeOutQuint");
			
			//LINK SET
			var link = $(linkArray[num]).attr("href");
			$(thumCurrentLink).attr("href",link);
			
			//MOUSE CURSOR
			if(num == 0){
				$(thumCurrentLink).css("cursor","default");
			}else{
				$(thumCurrentLink).css("cursor","pointer");
			}
		}
		
		//MOUSE OVER
		thumImageArray.mouseover(function(){
			processFlag = false;
			if(!mouseoverFlag){
				mouseoverFlag = true;
				var nextImg;
				for(i = 0; i < arrayLength; i ++){
					if(this == thumImageArray[i]){
						nextImg = i
					}
				}
				imageChange(nextImg);
				mouseoverFlag = false;
			}
		});
		thumImageArray.mouseout(function(){
			return true;
		});
		
		//MOUSE CURSOR
		$(linkArray[0]).mouseover(function(){
			$(this).css("cursor","default");
		});
	}
	GarallyImage();
})