$(function() {

	//クリックでカレントにクラスを追加。
	//カレント以外にオーバーとアウトを反応させる。
	var selects = $("#imgBox > li")
	selects.click(function(){
		var indexs = selects.index(this);
		selects.removeClass("current");
		selects.eq(indexs).addClass("current");
		
		$("#imgBox > li").bind("mouseover", function(){
			if(!selects.eq(indexs))$(this).css("border-color", "red");
		});
		$("#imgBox > li").bind("mouseout", function(){
			if(!selects.eq(indexs))$(this).css("border-color", "black");
		});
		
		var imgStr = $(this).find("img").attr("src");
		var start = imgStr.indexOf("f=")+2;
		var end = imgStr.indexOf("jpg")+3;
		var srcValue = imgStr.substring(start,end);
		
		$("#targetImage").fadeOut(200,	function() {
		$(".itemImg").empty();
		$(".itemImg").append("<img src='" + srcValue + "' id='targetImage' />");
		
		$("#targetImage").css("display", "none");
			$("#targetImage").ready(function() {
				$("#targetImage").fadeIn(1200);
			});
		});	
		
	});
});