var imageIndex = 0;

$(document).ready(function() {
													 
   $("#top_img ul li > img").css({"position":"absolute","top":"0px"});
   $("#top_img ul li > img:gt(0)").hide();
	 
   rotateSwitch = function(){		
		play = setInterval(function(){
			nextFade();
		}, 7000);
	};
	
	rotateSwitch();
	 
	$("#g_navi ul li").hover(function() {
		clearInterval(play);
		var index = $("#g_navi ul li").index(this);
		if(index != imageIndex){
			selectFade(index);
		}
	}, function() {
		rotateSwitch();
	});
	
	
	$("#top_img ul li").hover(function() {
		clearInterval(play);
	}, function() {
		rotateSwitch();
	});	
	
});


function nextFade(){
		var oldIndex = imageIndex;
		imageIndex = ++imageIndex % $("#top_img ul li > img").size();
		$("#top_img ul li > img:eq("+oldIndex+")").fadeOut("slow");
		$("#top_img ul li > img:eq("+imageIndex+")").fadeIn("slow");
}

function prevFade(){
		var oldIndex = imageIndex;
		if( --imageIndex < 0 ) imageIndex=$("#top_img ul li > img").size()-1;
		$("#top_img ul li > img:eq("+oldIndex+")").fadeOut("slow");
		$("#top_img ul li > img:eq("+imageIndex+")").fadeIn("slow");
}

function selectFade(num){
		var oldIndex = imageIndex;
		imageIndex = num;
		$("#top_img ul li > img:eq("+oldIndex+")").fadeOut("slow");
		$("#top_img ul li > img:eq("+num+")").fadeIn("slow");
		
}