<?php
	require("__include-common.php");
	require("../account/__logincheck.php");
	html_header('Popup Study', '', '#ffffff');
	main_proc();
	html_footer();
	exit();
function main_proc() {
	$con = my_mysqli_connect(_DB_SCHEMA);
	$sql = $_SESSION['study_mycheck_sql'];
	$rs= my_mysqli_query($sql);
	$row = mysqli_num_rows($rs);
	if ($row == 0) {
		return;
	}
?>
<style>
body {
	margin: 10px;
	background-color: #ffffff;
}
span#page {
	float: left;
	margin-right: 10px;
}
span.page_cnt {
	color: blue;
	font-weight: bold;
}
ul#hide_select {
	float: left;
}
ul#hide_select li {
	display: inline;
}
div#page_control {
	clear: both;
}
</style>
<div id="page_menu">
	<span id="page">
		<span class="page_cnt" id="current_rec">1</span> / <span class="page_cnt"><?= $row ?></span> 件
	</span>
	<ul id="hide_select">
	<li><input id="question_off" type="checkbox"><label for="question_off" class="CheckBoxLabelClass">質問を隠す</label></li>
	<li><input id="answer_off" type="checkbox"><label for="answer_off" class="CheckBoxLabelClass">解答を隠す</label></li>
	</ul>
</div>
<div id="page_control">
	<span id="page_move">
		<button onclick="m_auto_stop();m_first();">←先頭</button>
		<button onclick="m_auto_stop();m_end();">最後→</button>
		<button onclick="m_auto_stop();m_skip_p();">←10</button>
		<button onclick="m_auto_stop();m_skip_n();">10→</button>
		<button id="random_button" onclick="m_auto_stop();m_random();">ランダム</button>
		<br>
		<button id="auto_button" onclick="m_auto();">Auto</button>
		<select id="auto_interval" onChange="intervalChange();">
		<option value="1000">1
		<option value="2000">2
		<option value="3000">3
		<option value="4000">4
		<option value="5000">5
		<option value="6000">6
		<option value="7000">7
		<option value="8000">8
		</select>
		<button onclick="m_auto_stop();m_previous();">←前</button>
		<button onclick="m_auto_stop();m_next();">次→</button>
	</span>
	<span style="padding-left:10px;"><button onclick="view_hidden();">●</button></span>
	<img onclick="menu_hidden();" style="display:inline;padding:5px 0 0 10px;" src="../icon/arrow_left.png">
</div>
<img id="menu_view" onclick="menu_hidden();" style="display:none;" src="../icon/arrow_right.png">
<div id="memo_list">
<?php
	$display = '';
	$ix = 1;
	while ($rec=mysqli_fetch_array($rs)) {
?>
	<div id="<?= $ix ?>" style="display:<?= $display ?>">
		<button onclick="(new Audio('http://tts-api.com/tts.mp3?q=<?= urlencode($rec['c_answer']) ?>')).play();return false;" style="margin:0 0 0 2px;padding:0;"><img src="../icon/speaker.png"></button>
		<p class="study_mycheck_answer" style="display:;"><?= $rec['c_answer'] ?></p>
		<p class="study_mycheck_question" style="display:;"><?= $rec['c_question'] ?></p>
		<p class="study_mycheck_answer2" style="display:none;"><?= $rec['c_answer'] ?></p>
	</div>
<?php
		$display = 'none';
		$ix++;
	}
?>
</div>
<script>
document.onkeydown = keyPress;
function keyPress( e ) {
	e = e || window.event;
	// alert( "キーコード：" + e.keyCode );
	if (e.keyCode == 13 || e.keyCode == 32) {	// [Enter],[Space] : 解答表示 & 次
		if ($(".study_mycheck_question").css("display") == "none" ||
		($(".study_mycheck_answer").css("display") == "none" && $(".study_mycheck_answer2").css("display") == "none")) {
			m_auto_stop();view_hidden();
		} else {
			m_auto_stop();
			if (random) {
				m_random();
			} else {
				m_next();
			}
		}
		return false;
	} else if (e.keyCode == 39) {		// [→] : 次
		m_auto_stop();m_next();
		return false;
	} else if (e.keyCode == 37) {		// [←] : 前
		m_auto_stop();m_previous();
		return false;
	} else if (e.keyCode == 36) {		// [Home] : 先頭
		m_auto_stop();m_first();
		return false;
	} else if (e.keyCode == 35) {		// [End] : 最後
		m_auto_stop();m_end();
		return false;
	} else if (e.keyCode == 240 ) {		// [Caps Lock] : Skip(10) Back
		m_auto_stop();m_skip_p();
		return false;
	} else if (e.keyCode == 9 ) {		// [Tab] : Skip(10) Next
		m_auto_stop();m_skip_n();
		return false;
	} else if (e.keyCode == 82) {		// R : ランダム
		m_auto_stop();m_random();
		return false;
	} else if (e.keyCode == 65) {		// A : Auto
		m_auto();
		return false;
	} else if (e.keyCode == 72) {		// H : メニュー On/off
		menu_hidden();
		return false;
	}
	return true;		// その他 (ファンクションキーなどを有効にするため)
}
</script>
<script>
var menu = true;
function menu_hidden() {
	if (menu) {
		if (!auto) {
		//	m_auto();	// Ver.6.08で変更
		}
		$("#page_menu").css("display","none");
		$("#page_control").css("display","none");
		$("#menu_view").css("display","");
		menu = false;
	} else {
		$("#page_menu").css("display","");
		$("#page_control").css("display","");
		$("#menu_view").css("display","none");
		menu = true;
	}
}
$(function() {
	if ($.cookie('study_auto_interval')) {
		$("#auto_interval").val($.cookie('study_auto_interval'));
	}
	if ($.cookie('study_pop_display_question') == 'off') {
		$(".study_mycheck_question").css("display","none");
		$("#question_off").attr("checked", true);
	} else if ($.cookie('study_pop_display_answer') == 'off') {
		$(".study_mycheck_answer").css("display","none");
		$("#answer_off").attr("checked", true);
	}
	$("#question_off").click(function() {
		$(".study_mycheck_answer2").css("display","none");
		if (this.checked) {
			$(".study_mycheck_question").css("display","none");
			$(".study_mycheck_answer").css("display","");
			$("#answer_off").attr("checked", "");
			$.cookie('study_pop_display_question','off',{ path:'<?= MY_SESSION_PATH ?>', expires:365 });
			$.cookie('study_pop_display_answer','',{ path:'<?= MY_SESSION_PATH ?>', expires:365 });
		} else {
			$(".study_mycheck_question").css("display","");
			$.cookie('study_pop_display_question','',{ path:'<?= MY_SESSION_PATH ?>', expires:365 });
		}
	});
	$("#answer_off").click(function() {
		$(".study_mycheck_answer2").css("display","none");
		if (this.checked) {
			$(".study_mycheck_answer").css("display","none");
			$(".study_mycheck_question").css("display","");
			$("#question_off").attr("checked", "");
			$.cookie('study_pop_display_answer','off',{ path:'<?= MY_SESSION_PATH ?>', expires:365 });
			$.cookie('study_pop_display_question','',{ path:'<?= MY_SESSION_PATH ?>', expires:365 });
		} else {
			$(".study_mycheck_answer").css("display","");
			$.cookie('study_pop_display_answer','',{ path:'<?= MY_SESSION_PATH ?>', expires:365 });
		}
	});
});
var rec_cnt = <?= $row ?>;
var current_rec = 1;
function m_first() {
	random_reset();
	$("#"+current_rec).css("display","none");
	current_rec = 1;
	$("#"+(current_rec)).css("display","");
	$("#current_rec").html(current_rec);
	reset_taiyaku();
}
function m_skip_p() {
	random_reset();
	if (current_rec <= 1) return;
	$("#"+current_rec).css("display","none");
	if (current_rec <= 10) {
		current_rec = 1;
	} else {
		current_rec = current_rec - 10;
	}
	$("#"+(current_rec)).css("display","");
	$("#current_rec").html(current_rec);
	reset_taiyaku();
}
function m_previous() {
	random_reset();
	if (current_rec <= 1) return;
	$("#"+current_rec).css("display","none");
	$("#"+(--current_rec)).css("display","");
	$("#current_rec").html(current_rec);
	reset_taiyaku();
}
function m_next() {
	random_reset();
	$("#"+current_rec).css("display","none");
	if (current_rec >= rec_cnt) {
		current_rec = 0;
	}
	$("#"+(++current_rec)).css("display","");
	$("#current_rec").html(current_rec);
	reset_taiyaku();
}
function m_skip_n() {
	random_reset();
	if (current_rec >= rec_cnt) return;
	$("#"+current_rec).css("display","none");
	if (current_rec >= rec_cnt - 10) {
		current_rec = rec_cnt;
	} else {
		current_rec = current_rec + 10;
	}
	$("#"+(current_rec)).css("display","");
	$("#current_rec").html(current_rec);
	reset_taiyaku();
}
function m_end() {
	random_reset();
	$("#"+current_rec).css("display","none");
	current_rec = rec_cnt;
	$("#"+(current_rec)).css("display","");
	$("#current_rec").html(current_rec);
	reset_taiyaku();
}
function reset_taiyaku() {
	if ($.cookie('study_pop_display_question') == 'off') {
		$(".study_mycheck_question").css("display","none");
		$("#question_view").attr("checked", "");
	} else if ($.cookie('study_pop_display_answer') == 'off') {
		$(".study_mycheck_answer2").css("display","none");
		$("#answer_view").attr("checked", "");
	}
}
function m_random() {
	random = true;
	$("#random_button").css("background","#fff399");
	$("#"+current_rec).css("display","none");
	current_rec = ransu(1, rec_cnt);
	$("#"+(current_rec)).css("display","");
	$("#current_rec").html(current_rec);
	reset_taiyaku();
}
function random_reset() {
	random = false;
	$("#random_button").css("background","");
}
var auto = false;
var random = false;
var tid1;
var tid2;
function m_auto_skip() {
	if (auto) {
		if (random) {
			m_random();
		} else {
			m_next();
		}
		tid1 = setTimeout('auto_view_question()', $("#auto_interval").val());
	}
}
function auto_view_question() {
	if (auto) {
		if ($.cookie('study_pop_display_question') == 'off') {
			view_question();
		}
		if ($.cookie('study_pop_display_answer') == 'off') {
			view_answer();
		}
		tid2 = setTimeout('m_auto_skip()', $("#auto_interval").val());
	}
}
function m_auto() {
	if (auto) {
		auto = false;
		$("#auto_button").css("background","");
	} else {
		if (!random) {
			current_rec--;
		}
		auto = true;
		$("#auto_button").css("background","#fff399");
		m_auto_skip();
	}
}
function m_auto_stop() {
	clearTimeout(tid1);
	clearTimeout(tid2);
	auto = false;
	$("#auto_button").css("background","");
}
function view_question() {
	if ($(".study_mycheck_question").css("display") == "none") {
		$(".study_mycheck_question").css("display","");
	} else {
		$(".study_mycheck_question").css("display","none");
	}
}
function view_answer() {
	if ($(".study_mycheck_answer2").css("display") == "none") {
		$(".study_mycheck_answer2").css("display","");
	} else {
		$(".study_mycheck_answer2").css("display","none");
	}
}
function view_hidden() {
	if ($.cookie('study_pop_display_question') == 'off') {
		view_question();
	}
	if ($.cookie('study_pop_display_answer') == 'off') {
		view_answer();
	}
}
function intervalChange() {
	$.cookie('study_auto_interval',$("#auto_interval").val(),{ path:'<?= MY_SESSION_PATH ?>', expires:365 });
}
function ransu(min, max) {
	return min + Math.floor( Math.random() * (max-min+1) );
}
</script>
</body>
</html>
<?php
}
?>
