// JavaScript Document


var keyIndex = {
	A:0,
	B:0,
	C:0,
	D:0,
	F:0,
	G:0,
	H:0
};
var nextIndex = {
	A:0,
	B:0,
	C:0,
	D:0,
	F:0,
	G:0,
	H:0
};

$(window).load(function () {
		$('#A dl dd ul li').eq(0).addClass('now');
		$('#B dl dd ul li').eq(0).addClass('now');
		$('#C dl dd ul li').eq(0).addClass('now');
		$('#D dl dd ul li').eq(0).addClass('now');
		$('#E dl dd ul li').eq(0).addClass('now');
		$('#F dl dd ul li').eq(0).addClass('now');
		$('#G dl dd ul li').eq(0).addClass('now');
		$('#H dl dd ul li').eq(0).addClass('now');

		$('#A .img img').eq(0).addClass('fst');
		$('#B .img img').eq(0).addClass('fst');
		$('#C .img img').eq(0).addClass('fst');
		$('#D .img img').eq(0).addClass('fst');
		$('#E .img img').eq(0).addClass('fst');
		$('#F .img img').eq(0).addClass('fst');
		$('#G .img img').eq(0).addClass('fst');
		$('#H .img img').eq(0).addClass('fst');
});

$(function(){
	$('.listBox dl dd ul li img').click(function(){

		var idcate =$(this).parent().parent().parent().parent().parent().parent().parent().attr("id");
		var id =$(this).parent().parent().parent().parent().parent().attr("id");

		nextIndex[id] = $("#" + id + " " + "dl dd ul li img").index(this);
		if (nextIndex[id] == keyIndex[id] ) {
			return;
		}
		
	
		keyIndex[id] = nextIndex[id];
		

		//次に表示されるサムネイル
		var $nextT = $("#" + id + " " + "dl dd ul li").eq(nextIndex[id]);

		//今表示中のサムネイル
		var $now = $("#" + id + " " + "dl dd ul li.now");


		//次に表示されるimg要素を抽出
		var $next = $("#" + id + " " + ".img img").eq(nextIndex[id]);

		//先頭のimg要素
		var $fst = $("#" + id + " " + ".img img.fst");
		
		$nextT.addClass('now');
		$now.removeClass('now');
		
		$next.addClass('fst');
		$fst.removeClass('fst');
		
		return false;
	});
});