/*
* 2011.07.05
* TONARI COMPANY
* http://www.tonaricompany.com
*/

var imageIndex = 0;

var max_imageIndex = 0;

var aniTime = 1500;

$(document).ready(function() {
		
   $("#contents_main .main_img ul li").css({"position":"absolute","top":"0px"});
   $("#contents_main .main_img ul li:gt(0)").hide();
	 
	 $("#contents_main #imgnavi li").eq(0).addClass("active");
	 
	 	max_imageIndex = $("#contents_main .main_img ul li").length;
		
		//alert(max_imageIndex);
		
	setnavi(max_imageIndex);
		
	 if(max_imageIndex > 1){
			
			rotateSwitch = function(){		
			play = setInterval(function(){
				nextFade();
			}, 4000);
			};
			
			rotateSwitch();
			
			$("#contents_main #imgnavi li").hover(function() {
			clearInterval(play);
			var index = $("#contents_main #imgnavi li").index(this);
			if(index != imageIndex){
				selectFade(index);
			}
			}, function() {
			rotateSwitch();
			});
			
			
			$("#contents_main .main_img ul li").hover(function() {
			clearInterval(play);
			}, function() {
			rotateSwitch();
			});	
			
	 }
});


function nextFade(){
		var oldIndex = imageIndex;
		

		imageIndex = ++imageIndex % $("#contents_main .main_img ul li").size();
		
		//alert(imageIndex);
		
		$("#contents_main .main_img ul li:eq("+oldIndex+")").fadeOut(aniTime);
		$("#contents_main .main_img ul li:eq("+imageIndex+")").fadeIn(aniTime);
		
		$("#contents_main #imgnavi li").eq(oldIndex).removeClass("active");
		$("#contents_main #imgnavi li").eq(imageIndex).addClass("active");
		
}

function prevFade(){
		var oldIndex = imageIndex;
		//alert(oldIndex)
		if( --imageIndex < 0 ) imageIndex=$("#contents_main .main_img ul li").size()-1;
		$("#contents_main .main_img ul li:eq("+oldIndex+")").fadeOut(aniTime);
		$("#contents_main .main_img ul li:eq("+imageIndex+")").fadeIn(aniTime);
		
		$("#contents_main #imgnavi li").eq(oldIndex).removeClass("active");
		$("#contents_main #imgnavi li").eq(imageIndex).addClass("active");
}

function selectFade(num){
		var oldIndex = imageIndex;
		imageIndex = num;
		$("#contents_main .main_img ul li:eq("+oldIndex+")").fadeOut("slow");
		$("#contents_main .main_img ul li:eq("+num+")").fadeIn("slow");
		
		$("#contents_main #imgnavi li").eq(oldIndex).removeClass("active");
		$("#contents_main #imgnavi li").eq(imageIndex).addClass("active");
		
}

/*
<ul class="navi">
					<li><a href="#"><img src="common/img/main_img/dot.png" width="21" height="21" /></a></li>
				</ul>
				*/
				
function setnavi(total){
	/* make navi*/
	var _html;
	
	_html = '<ul id="imgnavi">';
	
	for(var i=0; i<total; i++){
		if(i==0){
		_html += '<li class="active"><a href="#"><img src="common/img/main_img/dot.png" width="21" height="21" /></a></li>';
		}else{
			_html += '<li><a href="#"><img src="common/img/main_img/dot.png" width="21" height="21" /></a></li>';
		}
		
	}
	_html += '</ul>';
	
	$("#contents_main .main_img").after(_html);
}