/******************************************************** 
セレクタの記法
要素=要素
id=#***
class=.***
 *******************************************************/


$(function(){
	
	
	
	

/****************************************************************************************/
/***  goods faq a要素のリンクをクリックすると、faqが手前に表示される */
/****************************************************************************************/
  $("body").append("<div id='glayLayer'></div><div id='overLayer'></div>");
	$("#glayLayer").click(function(){
		$(this).hide();
		$("#overLayer").hide();
	});
  $(".faq").click(function(){
		$("#glayLayer").show();
/*************************************************************************
loadするテキストは読込元HTMLファイルと同じフォルダ内に置くこと！
**************************************************************************/
$("#overLayer").show().html("<img src='../images/close.png' class='close' />").load("faq_"+$(this).attr("href")+".txt").css({
			marginTop:"-"+$("#overLayer").height()/2+"px",
			marginLeft:"-"+$("#overLayer").width()/2+"px"
			});
		return false; /* a要素に設定したclickイベントを無効にする */
  });


$("#overLayer img.close").click(function(){
	  $("#glayLayer").hide;
		$("#overLayer").hide;
});


/****************************************************************************************/
/***  a直後のspan要素で表示したいテキストを囲み、class名を"tooltipにする"*/
/****************************************************************************************/
  $("span.tooltip").css({
		opacity: "0.9",
		position: "absolute",
		display: "none"
	});
	$("a").mouseover(function(){
		$("span.tooltip").fadeIn();
	}).mouseout(function(){
		$("span.tooltip").fadeOut();
	}).mousemove(function(e){
		$("span.tooltip").css({
			"top" : e.pageY+10+"px",
			"letf": e.pageX+10+"px"
		});
	});

/****************************************************************************************
  製品紹介カルーセルパネル
****************************************************************************************/
//初期設定
$("#carouselInner").css("width",770*$("#carouselInner ul.column").size()+"px");
$("#carouselInner ul.column:last").prependTo("#carouselInner");
$("#carouselInner").css("margin-left","-800px");

//戻るボタン
$("#carouselPrev").click(function(){
	$("#carouselNext,#crouselPrev").hide();
  $("#carouselInner").animate({marginLeft : parseInt($("#carouselInner").css("margin-left"))+770+"px"},"slow","swing",
	function(){
		$("#carouselInner").css("margin-left","-770px");
		$("#carouselInner ul.column:last").prependTo("#carouselInner");
		$("#carouselNext,#carouselPrev").fadeIn();
	});
});

//進むボタン
$("#carouselNext").click(function(){
	$("#carouselNext,#crouselPrev").hide();
  $("#carouselInner").animate({marginLeft : parseInt($("#carouselInner").css("margin-left"))-770+"px"},"slow","swing",
	function(){
		$("#carouselInner").css("margin-left","-770px");
		$("#carouselInner ul.column:first").appendTo("#carouselInner");
		$("#carouselNext,#carouselPrev").fadeIn();
	});
});

//自動スライド設定
var timerID = setInterval(function(){
	$("#carouselNext").click();
},5000);

　$("#carouselPrev img,#carouselNext img").click(function(){
	clearInterval(timerID);
});

/****************************************************************************************
goods サンプル写真をモーダルウィンドウに表示
サンプル写真サイズ：w240*h180
****************************************************************************************/
  $("body").append("<div id='glayLayer'></div><div id='overLayer2'></div>");
	$("#glayLayer").click(function(){
		$(this).hide();
		$("#overLayer2").hide();
	});
  $(".detail").click(function(){
		$("#glayLayer").show();
/*************************************************************************
loadする写真は読込元HTMLファイルと同じフォルダ内に置く必要なし
**************************************************************************/
$("#overLayer2").show().html("<img src='../images/"+$(this).attr("href")+"_detail.png' />").css({
			marginTop:"-"+$("#overLayer2").height()/2+"px",
			marginLeft:"-"+$("#overLayer2").width()/2+"px"
			});
		return false; /* a要素に設定したclickイベントを無効にする */
  });
$("#overLayer img.close").click(function(){
	  $("#glayLayer").hide;
		$("#overLayer2").hide;
});
/*************************************************************************
タブパネル
**************************************************************************/
//パネルの非表示化
$("div.panel div:not("+$("ul.tab li a.selected").attr("href")+")").hide();
$("ul.tab li a").click(function(){
	$("ul.tab li a").removeClass("selected");
	$(this).addClass("selected");
  $("div.panel div").fadeOut("fast");
  $($(this).attr("href")).fadeIn("fast");
  return false;
});
/*************************************************************************
タブパネル ここまで
**************************************************************************/



});