function select_radio(e){
	//let img_scroll_elms = document.getElementsByClassName("img_scroll_elm");
	let img_scroll_elm = document.getElementById("img_scroll_box");
	let width = 300;
	if(img_scroll_elm){
		//let img_scroll_elm = img_scroll_elms[0];
		width = img_scroll_elm.clientWidth;
	}

	let radio_elms = document.getElementsByName("select");
	let radio_length = radio_elms.length;
	let radio_elm_list = [];
	let value;
	for(let i=0;i<radio_length;i++){
		let radio_elm = radio_elms[i];
		let checked = radio_elm.checked;
		let radio_value = radio_elm.value;
		radio_elm_list[radio_value] = radio_elm;
		if(checked){
			value = radio_value;
		}
	}
	value = Number(value) + Number(e);
	if(value < 1){
		value = 1;
	}
	if(value > 5){
		value = 5;
	}

	let img_elms = document.getElementsByClassName("imgs");
	let img_length = img_elms.length;
	for(let i=0;i<img_length;i++){
		let img_elm = img_elms[i];
		//img_elm.classList.remove("selected_img");
	}
	let target_img = document.getElementById("img"+value);
	//target_img.classList.add("selected_img");

	// チェックを変える
	let target_radio_elm = radio_elm_list[value];
	target_radio_elm.checked = true;

	// この方法はスクロールアニメーションがブラウザに依存する
	// ChromeやFireFoxのみがアニメーションに対応している模様
	// Safariではアニメーションがなかった
	/*
	let target_img_elm = document.getElementById("img_elm"+value);
	target_img_elm.scrollIntoView({behavior: "smooth"});
	*/

	// スクロール前の状態のスクロール位置
	let img_scroll_box = document.getElementById("img_scroll_box");
	let now_scroll_position = img_scroll_box.scrollLeft;

	// スクロール後に移動したい位置
	let new_scroll_position = (value - 1) * width;

	// 移動量
	let scroll_width = new_scroll_position - now_scroll_position;

	$("#img_scroll_box").animate(
		{
			scrollLeft: $("#img_scroll_box").scrollLeft() + scroll_width,
		},
		200
	)
	//img_scroll_box.scrollLeft = new_scroll_position;
}

function allow_next(){
	/*
	console.log("next");
	let elm_width = $("#img_scroll_box").width();
	console.log(elm_width);
	let move_width = 300;
	$("#img_scroll_box").animate(
		{
			scrollLeft: $("#img_scroll_box").scrollLeft() + move_width,
		},
		100
	)
	*/
	select_radio(1);
}
function allow_prev(){
	/*
	console.log("prev");
	let elm_width = $("#img_scroll_box").width();
	let move_width = 300;
	$("#img_scroll_box").animate(
		{
			scrollLeft: $("#img_scroll_box").scrollLeft() - move_width,
		},
		100
	)
	*/
	select_radio(-1);
}

function swipe(){

}

var startX = null;
var endX = null;
var startY = null;
var endY = null;
var swipe_rate = null;

function get_start_swipe(event) {
	//event.preventDefault();
	startX = event.touches[0].pageX;
	startY = event.touches[0].pageY;
}

function get_end_swipe(event) {
	endX = event.touches[0].pageX;
	endY = event.touches[0].pageY;

	let moveX = endX - startX;
	let moveY = endY - startY;
	let moveRate = moveX / moveY;

	// 垂直方向から15度以上の方向にフリックした場合のみ、ページのスクロールをキャンセル
	if(moveRate > Math.tan(15 * Math.PI/180)) {
		if(event.cancelable){
			event.preventDefault();
		}
	}
}

function get_swipe_width(event) {
	//event.preventDefault();
	if( 50 < (endX - startX) ) {
		// 右に50px以上
		allow_prev();
	} else if((endX - startX) < -50){
		// 左に50px以上
		allow_next();
	} else {
		// 動かさない
	}
}


function post_move(url){
	// post_formをurlをactionにPOSTする
	let form_elm = document.getElementById("post_form");
	form_elm.action = "./"+url+".php";
	form_elm.submit();
}
function set_save_flag(){
	let save_flag_elm = document.getElementById("save_flag");
	save_flag_elm.value = "Y";
}


function data_submit(e){
	let post_url = e.url;

	let form = document.createElement("form");
	form.setAttribute("action", post_url);
	form.setAttribute("method", "post");
	form.style.display = "none";
	document.body.appendChild(form);

	let data = e.data;
	for(key in data){
		let input = document.createElement('input');
		input.setAttribute('type', 'hidden');
		input.setAttribute('name', key);
		input.setAttribute('value', data[key]);
		form.appendChild(input);
	}

	// submit
	form.submit();
}


function loading(){
	$("body").append('<div id="modal-bg"></div>');
	$("body").append('<div class="sk-fading-circle">');

	$(".sk-fading-circle").append('<div class="sk-circle1 sk-circle"></div>');
	$(".sk-fading-circle").append('<div class="sk-circle2 sk-circle"></div>');
	$(".sk-fading-circle").append('<div class="sk-circle3 sk-circle"></div>');
	$(".sk-fading-circle").append('<div class="sk-circle4 sk-circle"></div>');
	$(".sk-fading-circle").append('<div class="sk-circle5 sk-circle"></div>');
	$(".sk-fading-circle").append('<div class="sk-circle6 sk-circle"></div>');
	$(".sk-fading-circle").append('<div class="sk-circle7 sk-circle"></div>');
	$(".sk-fading-circle").append('<div class="sk-circle8 sk-circle"></div>');
	$(".sk-fading-circle").append('<div class="sk-circle9 sk-circle"></div>');
	$(".sk-fading-circle").append('<div class="sk-circle10 sk-circle"></div>');
	$(".sk-fading-circle").append('<div class="sk-circle11 sk-circle"></div>');
	$(".sk-fading-circle").append('<div class="sk-circle12 sk-circle"></div>');

	$("#modal-bg,.sk-fading-circle").show();
}

function loading_end(){
	$('#modal-bg,.sk-fading-circle').remove();
}

function popup(e){
	$("body").append('<div id="popup-bg"></div>');
	$("#popup-bg,#"+e).show();

	$(".popup-close").click(function(){
		$("#"+e+",#popup-bg").hide();
		$('#popup-bg').remove() ;
	});
}

function modal(e){
	$("body").append('<div id="modal-bg"></div>');

	$("#modal-bg,#modal-"+e).fadeIn("fast");

	$(".modal-del,#modal-close").click(function(){
		$("#modal-"+e+",#modal-bg").fadeOut("fast",function(){
			$('#modal-bg').remove() ;
		});
	});
}

/*
	e = {
		"url":"post url",
		"data":{"name":"value","name":"value"}
	};
*/
function data_submit(e){
	let post_url = e.url;

	let form = document.createElement("form");
	form.setAttribute("action", post_url);
	form.setAttribute("method", "post");
	form.style.display = "none";
	document.body.appendChild(form);

	let data = e.data;
	for(key in data){
		let input = document.createElement('input');
		input.setAttribute('type', 'hidden');
		input.setAttribute('name', key);
		input.setAttribute('value', data[key]);
		form.appendChild(input);
	}

	// submit
	form.submit();
}

function set_title(id,ratio,name){
	// id はグラフを挿入した要素のID
	var title = d3.select('#'+id+' .c3-chart-arcs-title');
	title.html('');
	title.insert('tspan').text(ratio).attr('x', 0).attr('dy', 0).attr('class', 'donut-chart-title-header');
	title.insert('tspan').text(name).attr('dy', 30).attr('x', 0).attr('class', 'donut-chart-title-value');
}
function get_data(data){
	console.log(donut.internal.cache);
}
function dataRound(value,base){
	// value -> パーセントにした値
	// base -> 小数点何桁まで表示するか
	return Math.round(value * Math.pow(10, base)) / Math.pow(10, base);
}
