window.onunload = function() {};

$(function(){
	 //jsonファイルを取得して、読み込みが完了したら関数を実行する
	 $.getJSON("data/data.json", function(data){
     	for(var i in data){
       	 	$("#nav").append("<li><a href='" + data[i].link + "'><img src='" + data[i].nav + "' /></a></li>");
        	$("#mainimg").append("<div><a href='" + data[i].link + "'><img src='" + data[i].img + "' width='580' height='294' alt='" + data[i].alt + "' /></a></div>");
    	}

	
	$("#mainimg div").eq(0).css("display" , "block");
	$("#nav li").eq(0).css("opacity" , 0.5);
	var navLength = $("#mainimg div").size();
	var navNum = 0;	
	var presence = navNum;
	function slide(){
		if(navNum > navLength - 2){
			$("#mainimg div").eq(0).fadeIn("normal");
			$("#mainimg div").eq(presence).fadeOut("normal");
			$("#nav li").eq(presence).css("opacity" , 1);
			$("#nav li").eq(0).css("opacity" , 0.5);
			navNum = -1;
			presence = navNum;
		}else{
			$("#mainimg div").eq(navNum + 1).fadeIn("normal");
			$("#mainimg div").eq(presence).fadeOut("normal");
			$("#nav li").eq(presence).css("opacity" , 1);
			$("#nav li").eq(navNum + 1).css("opacity" , 0.5);
		}
		//console.log(navNum);
		navNum++;
		presence = navNum;
	}
	var timer = setInterval(slide , 5000);
	
	$("#nav li").mouseover(function(){
		var navIndex = $("#nav li").index(this);
		if(navNum !== navIndex){
			presence = navNum;
			navNum = navIndex -1;
			slide();
			clearInterval(timer);
			timer = setInterval(slide , 5000);
		}
	});
	});
});