//const
var ITEM_NUM = 3;
var FIRST_NUM = 1;
var TINTARVAL_TIME = 5000;
var ITEMS_NAME = '.box_';
var FADE_SPEED = 1000;
//var
var currentNum = FIRST_NUM;
var preNum = 0;	
var timer;

jQuery(document).ready(function(){
	for(var i=currentNum; i<=ITEM_NUM; i++){
		//fade
		if(i!=currentNum) fadeAction(i, 0);
		
		eval('$(".mainVisual .box_'+i+'").mouseover(function(){mouseOverListener(0, false);});');
		eval('$(".mainVisual .box_'+i+'").mouseout(function(){mouseOutListener();});');
	}
	
	//timer
	timer = setInterval("timerListener()", TINTARVAL_TIME);
});

function timerListener(){
	num = currentNum;
	num++;
	if(num>ITEM_NUM){
		num = FIRST_NUM;
	}
	imageChange(num);
}

function mouseOverListener(num, changeFlag){
	if(changeFlag) imageChange(num);
	clearInterval(timer);
}

function mouseOutListener(){
	clearInterval(timer);
	timer = setInterval("timerListener()", TINTARVAL_TIME);
}

function imageChange(num){
	if(currentNum!=num){
		preNum = currentNum;
		currentNum = num;
		fadeAction(preNum, 'hide');
		fadeAction(currentNum, 'view');
	}
}

function fadeAction(ITEM_NUM, viewType){
	path = ITEMS_NAME + ITEM_NUM;
	
	(viewType=='view')? alpha = 1 : alpha = 0;
	(viewType=='view')? zIndex = 3 : zIndex = 0;
	
	$(path).fadeTo(FADE_SPEED, alpha);
	$(path).css('z-index', zIndex);
}