$(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);
		    let src = $(event.target.parentNode.previousElementSibling.previousElementSibling.previousElementSibling.previousElementSibling).children('img').attr('src');
		    let name = $(event.target.parentNode.previousElementSibling.previousElementSibling.previousElementSibling.textContent);
		    let price =$(event.target.parentNode.previousElementSibling.previousElementSibling.textContent);
		    let id =$(event.target.parentNode.previousElementSibling.value);
		    nameField.textContent = name.selector;
		    $('#showName').append(nameField);
		    priceField.textContent = price.selector;
		    $('#showPrice').append(priceField);
		    idField.value = id.selector;
		    $('#showId').append(idField);
		    $('#showImage').attr('src', src);
		
			//[#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"} ) ;

	}

} ) ;


//カートに追加
$('.cartBtn').on('click', function(event){
	let data = {
			shoesId: parseInt($(event.target.previousElementSibling.previousElementSibling.previousElementSibling).children('input').val()),
			quantity: parseInt($(event.target.previousElementSibling.previousElementSibling).children('select').val())
	};
	console.log(data);
	$.ajax({
	      type: "POST",
	      url: "/limited/inputCart",
	      contentType: 'application/json',
	      dataType: "json",
	      data: JSON.stringify(data)
	});
	//[#modal-content]と[#modal-overlay]をフェードアウトした後に…
			$( "#modal-content,#modal-overlay" ).fadeOut( "slow" , function(){
			//[#modal-overlay]を削除する
			$('#modal-overlay').remove() ;
	
	} ) ;
});