$(function(){
	$(".details").each(function() {
		
		$(".details").click(function(event){
		    $('#showName').empty();
		    $('#showPrice').empty();
		    $('#showId').empty();
		    //以下デモ参照
			//キーボード操作などにより、オーバーレイが多重起動するのを防止する
			// $( this ).blur() ;	//ボタンからフォーカスを外す
			// if( $( "#modal-overlay" )[0] ) return false ;		//新しくモーダルウィンドウを起動しない (防止策1)
			// //if($("#modal-overlay")[0]) $("#modal-overlay").remove() ;		//現在のモーダルウィンドウを削除して新しく起動する (防止策2)
	
			//オーバーレイを出現させる
			$( "body" ).append( '<div id="modal-overlay"></div>' ) ;
			$( "#modal-overlay" ).fadeIn( "slow" ) ;
	
			//コンテンツをセンタリングする
			centeringModalSyncer() ;
		
			//コンテンツをフェードインする
		    $( "#modal-content" ).fadeIn( "slow" ) ;
		    
		
		    //一覧画面から情報取得
		    let nameField = document.createElement("p");
		    let priceField = document.createElement("p");
		    let idField = document.createElement("input");
		    idField.setAttribute("type", "hidden");
		    let name = $(event.target.parentNode.children[1].textContent);
		    let price =$(event.target.parentNode.children[2].textContent);
		    let id =$(event.target.parentNode.children[3].value);
		    nameField.textContent = name.selector;
		    $('#showName').append(nameField);
		    priceField.textContent = price.selector;
		    $('#showPrice').append(priceField);
		    idField.value = id.selector;
		    $('#showId').append(idField);
		
			//[#modal-overlay]、または[#modal-close]をクリックしたら…
			$( "#modal-overlay,#modal-close" ).unbind().click( function(){
	
				//[#modal-content]と[#modal-overlay]をフェードアウトした後に…
				$( "#modal-content,#modal-overlay" ).fadeOut( "slow" , function(){
	
					//[#modal-overlay]を削除する
					$('#modal-overlay').remove() ;
	
				} ) ;
	
			} ) ;
		} ) ;
	
	});

	//リサイズされたら、センタリングをする関数[centeringModalSyncer()]を実行する
	$( window ).resize( centeringModalSyncer ) ;

	//センタリングを実行する関数
	function centeringModalSyncer() {

		//画面(ウィンドウ)の幅、高さを取得
		var w = $( window ).width() ;
		var h = $( window ).height() ;

		// コンテンツ(#modal-content)の幅、高さを取得
		// jQueryのバージョンによっては、引数[{margin:true}]を指定した時、不具合を起こします。
		var cw = $( "#modal-content" ).outerWidth( {margin:true} );
		var ch = $( "#modal-content" ).outerHeight( {margin:true} );
		var cw = $( "#modal-content" ).outerWidth();
		var ch = $( "#modal-content" ).outerHeight();

		//センタリングを実行する
		$( "#modal-content" ).css( {"left": ((w - cw)/2) + "px","top": ((h - ch)/2) + "px"} ) ;

	}

} ) ;





//モーダル表示
//let details = document.getElementsByClassName("js-modal-open");
//$(".js-modal-open").each(function() {	
//	$(".js-modal-open").on("click", function(){
//		$('.js-modal').fadeIn();
//		return false;
//	});
//	$(".js-modal-close").on("click", function(){
//		$('.js-modal').fadeIn();
//		return false;
//	});
//});



//モーダル内情報表示

//モーダルフォーム送信
//$('#ok-btn').on('click', function(){
//	
//});

