let sumQuantity = 0;
let totalQuantity = 0;
$(function(){
	$(".details").each(function() {
		
		$(".details").click(function(event){
		    $('#showName').empty();
		    $('#showSize').empty();
		    $('#showPrice').empty();
		    $('#showId').empty();
		    $('#showStock').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 sizeField = document.createElement("p");
		    let priceField = document.createElement("p");
		    let stockField = 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.previousElementSibling.previousElementSibling).children('img').attr('src');
		    let name = $(event.target.parentNode.previousElementSibling.previousElementSibling.previousElementSibling.previousElementSibling.previousElementSibling.textContent);
		    let size = $(event.target.parentNode.previousElementSibling.previousElementSibling.previousElementSibling.previousElementSibling.textContent);
		    let price =$(event.target.parentNode.previousElementSibling.previousElementSibling.previousElementSibling.textContent);
		    let id = $(event.target.parentNode.previousElementSibling.previousElementSibling.value);
		    let stock = $(event.target.parentNode.previousElementSibling.value);
		    console.log(stock);
		    nameField.textContent = name.selector;
		    $('#showName').append(nameField);
		    sizeField.textContent = size.selector;
		    $('#showSize').append(sizeField);
		    priceField.textContent = price.selector;
		    $('#showPrice').append(priceField);
		    idField.value = id.selector;
		    $('#showId').append(idField);
		    $('#showImage').attr('src', src);
		    
            stockField.textContent = "stock ";
            stockField.insertAdjacentHTML('beforeend', stock.selector);
            $('#showStock').append(stockField);
            
            //stock0の時BTN非表示
            if($(event.target.parentNode.previousElementSibling.value) == 0){
            	$('#cartBtn').hide();
            }
            
            
		
			//[#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){
	sumQuantity = parseInt($("#shoping-cart-span").text()) + parseInt($(event.target.previousElementSibling.previousElementSibling).children('select').val());
//	let totalQuantity = sumQuantity + parseInt($("#shoping-cart-span").text());
	let data = {
			shoesId: parseInt($(event.target.previousElementSibling.previousElementSibling.previousElementSibling.previousElementSibling).children('input').val()),
			quantity: parseInt($(event.target.previousElementSibling.previousElementSibling).children('select').val())
	};
	
	$.ajax({
	      type: "POST",
	      url: "/limited/inputCart",
	      contentType: 'application/json',
	      dataType: "json",
	      data: JSON.stringify(data)
	})
	.fail(function(){
		alert("購入数が在庫数を上回っています。");
	})
	
	//[#modal-content]と[#modal-overlay]をフェードアウトした後に…
			$( "#modal-content,#modal-overlay" ).fadeOut( "slow" , function(){
			//[#modal-overlay]を削除する
			$('#modal-overlay').remove() ;
	
	} ) ;
			
	$("#shoping-cart-span").text(sumQuantity);
});


//ユニーク機能
//$("#limitedListBox").css("display", "none");
//let count = 0;
//$("#secret").on("click", function() {
//	count ++;
//	if (count % 2 == 1) {		
//		$("#limitedListBox").css("display", "flex");
//	} else {
//		$("#limitedListBox").css("display", "none");
//	}
//});



//アニメーション

var fadeIn = function(element, time, callback) {
    var fadeTime     = (time) ? time : 400,
        keyFrame     = 30,
        stepTime     = fadeTime / keyFrame,
        maxOpacity   = 1,
        stepOpacity  = maxOpacity / keyFrame,
        opacityValue = 0,
        sId          = '';
 
    if (!element) return;
 
    if (element.getAttribute('data-fade-stock-display') !== undefined &&
        element.getAttribute('data-fade-stock-display') !== null) {
        element.style.display = element.getAttribute('data-fade-stock-display');
    }
 
    var setOpacity = function(setNumber) {
        if ('opacity' in element.style) {
            element.style.opacity = setNumber;
        } else {
            element.style.filter = 'alpha(opacity=' + (setNumber * 100) + ')';
 
            if (navigator.userAgent.toLowerCase().match(/msie/) &&
                !window.opera && !element.currentStyle.hasLayout) {
                element.style.zoom = 1;
            }
        }
    };
 
    if (!callback || typeof callback !== 'function') callback = function() {};
 
    setOpacity(0);
 
    sId = setInterval(function() {
        opacityValue = Number((opacityValue + stepOpacity).toFixed(12));
 
        if (opacityValue > maxOpacity) {
            opacityValue = maxOpacity;
            clearInterval(sId);
        }
 
        setOpacity(opacityValue);
 
        if (opacityValue === maxOpacity) callback();
    }, stepTime);
 
    return element;
};

/**
 * Fade-Out
 * @param {Element} element 適用する要素
 * @param {Number} [time=400] 効果時間（ミリ秒で指定）
 * @param {Function} [callback] 完了後のコールバック関数
 */
var fadeOut = function(element, time, callback) {
    var fadeTime     = (time) ? time : 400,
        keyFrame     = 30,
        stepTime     = fadeTime / keyFrame,
        minOpacity   = 0,
        stepOpacity  = 1 / keyFrame,
        opacityValue = 1,
        sId          = '';
 
    if (!element) return;
 
    element.setAttribute('data-fade-stock-display', element.style.display.replace('none', ''));
 
    var setOpacity = function(setNumber) {
        if ('opacity' in element.style) {
            element.style.opacity = setNumber;
        } else {
            element.style.filter = 'alpha(opacity=' + (setNumber * 100) + ')';
 
            if (navigator.userAgent.toLowerCase().match(/msie/) &&
                !window.opera && !element.currentStyle.hasLayout) {
                element.style.zoom = 1;
            }
        }
    };
 
    if (!callback || typeof callback !== 'function') callback = function() {};
 
    setOpacity(1);
 
    sId = setInterval(function() {
        opacityValue = Number((opacityValue - stepOpacity).toFixed(12));
 
        if (opacityValue < minOpacity) {
            opacityValue = minOpacity;
            element.style.display = 'none';
            clearInterval(sId);
        }
 
        setOpacity(opacityValue);
 
        if (opacityValue === minOpacity) callback();
    }, stepTime);
 
    return element;
};


$("#limitedListBox").css("display", "none");
let sampleElmt     = document.getElementById('limitedListBox'),
fadeInBtnElmt  = document.getElementById('secret'),
fadeOutBtnElmt = document.getElementById('secret');


let count = 0;
fadeInBtnElmt.onclick = function() {
	count ++;
	if (count % 2 == 1) {
		//フェードイン
		$("#limitedListBox").css("display", "flex");
		fadeIn(sampleElmt, 1500);		
	} else {
		//フェードアウト
		$("#limitedListBox").css("display", "flex");
		fadeOut(sampleElmt, 1500);		
	}
};