<?php
?>
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- making tattyan ver.0.5.6 -->
	<!-- http://localhost/my_book/book5_new2b2.php -->
	<!-- makig php this fail -->
	<title>book5_new</title>
<style>
	/*　*/
body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: hsl(334, 93%, 52%);
    font-family: Arial, sans-serif;
}
#ueninoseraru {
    margin: 0px;
    padding: 0px;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 16px
}
#box_top {
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 90px;
    color: white;
	background-color: rgba(0, 255, 255, 0.5);
}
.box_p1 {
	position: static;
	margin-top: 0px;
	padding: 0px;
	background-color: rgba(255, 0, 255, 0.5);
}
#top_in_table {
	margin: 0;
	padding: 0;
    width: 175px;
    height: 30px;
    font-size: 9px;
    border-collapse: collapse;
}
#top_in_table td {
    margin: 0;
    padding: 5px;
	color:#aaaaaa;
	border: 1px solid #999;
	text-align: center;
	vertical-align: middle;
	background: #fff;
	cursor: pointer;
}
#toptd_1 {
	margin: 0;
	padding: 0;
	border-collapse: collapse;
}
#toptd_2 {
	margin: 0;
	padding: 0;
	border-collapse: collapse;
}
#toptd_3 {
	margin: 0;
	padding: 0;
	border-collapse: collapse;
}
#toptd_4 {
	margin: 0;
	padding: 0;
	border-collapse: collapse;
}

.image-cell-style {
	position: relative;
	width: 100px;
	height: 60px;
	border: 2px solid #ccc;
	background-color: #f9f9f9;
	cursor: pointer;
}
/* midol left area */
#box_midol_L1 {
    position: absolute;
	display: block;
	top: 100px;
 	left: 20px;
	width: 960px;
	height: 540px;
    color: white;
    background-color: rgba(255, 0, 255, 0.5);
}
#box_midol_L1 table {
	width: 100%;
	height: 100%;
}
#box_midol_L2 {
	position: absolute;
	display: block;
	top: 100px;
 	left: 20px;
	width: 960px;
	height: 540px;
	color: white;
	background-color: rgba(255, 255, 0, 0.5);
}
#box_midol_L2 table {
	width: 100%;
	height: 100%;
}
#box_midol_L3 {
	position: absolute;
	display: block;
	top: 100px;
 	left: 20px;
	width: 960px;
	height: 540px;
	color: white;
	background-color: rgba(0, 255, 0, 0.5);
}
#box_midol_L3 table {
	width: 100%;
	height: 100%;
}
#box_midol_L4 {
	position: absolute;
	display: block;
	top: 100px;
 	left: 20px;
	width: 960px;
	height: 540px;
	color: white;
	background-color: rgba(0, 0, 255, 0.5);
}
#box_midol_L4 table {
	width: 100%;
	height: 100%;
}
#box_midol_L5 {
	position: absolute;
	display: block;
	top: 100px;
 	left: 20px;
	width: 960px;
	height: 540px;
	color: white;
	background-color: rgba(255, 0, 0, 0.5);
}
#box_midol_L5 table {
	width: 100%;
	height: 100%;
}
#midol_workig_L5 {
	position: absolute;
	display: none;
	top: 100px;
 	left: 20px;
	width: 960px;
	height: 540px;
	color: white;
	background-color: rgba(255, 128, 0, 0.5);
}
#midol_workig_L5 table {
	width: 100%;
	height: 100%;
}

#box_midol_R1 {
	position: absolute;
	display: block;
	top: 100px;
	left: 990px;
	right: 10px;
	width: 510px;
	height: 540px; /* 高さを拡張 (インデックス150px + メニュー200px + R1テーブル120px + マージン50px) */
	background-color: rgba(0, 128, 128, 0.7);
	color: white;	
}

#R_indexs {
	width: 100%;
	height: 150px;
	margin-bottom: 10px;
	margin: 10px;
	padding: 10px;
	background-color: #d1e7dd;
	border: 2px solid #0f5132;
	border-radius: 8px;
}
#R_menews1 {
	width: 100%;
	height: 200px;
	margin-bottom: 10px;
	margin: 10px;
	padding: 10px;
	height: 100px;
	overflow: scroll;
	background-color: #f8d7da;
	border: 2px solid #842029;
	border-radius: 8px;
}

#R_menews2 {
	width: 100%;
	height: 0px;
	margin-bottom: 10px;
	display: none;
	overflow: scroll;
}
#R_table1 {
	margin: 10px;
	padding: 10px;
	width: 100%;
	height: 100%;
	background-color: #cff4fc;
	border: 2px solid #055160;
	border-radius: 8px;
}
/* */
/* ポップアップ用クラス */
#overlay_bass1 {
	position: fixed;
	display: none;
	top: 0;
	left: 0;
	background-color: rgba(128, 128, 255, 0.8);
	z-index: 1000;
}
#overlay_bass2 {
	position: fixed;
	display: none;
	top: 0;
	left: 0;
	background-color: rgba(128, 255, 255, 0.8);
	z-index: 1000;
}
.popup {
	position: absolute;
	display: block;
	top: 300px;
	left: 300px;
	width: 300px;
	height: 200px;
	background-color: aquamarine;
	border: 2px solid #000;
	border-radius: 5px;
}
.grip_lin {
	background-color: #000000;
	color: white;
	padding: 8px;
	cursor: move;
	-webkit-user-select: none;
	user-select: none;
	z-index: 1001;
}
.close_pop {
	float: right;
	background: none;
	border: none;
	color: white;
	font-size: 16px;
	cursor: pointer;
}
.gp_mous {
	cursor: grab;
}
#indexs_p1 {
	margin: 10px;
	padding: 10px;
	height: 100px;
	overflow: scroll;
	background-color: #d1e7dd;
	border: 2px solid #0f5132;
	border-radius: 8px;
}
#R_menew_p11 {
	margin: 10px;
	padding: 10px;
	height: 100px;
	overflow: scroll;
	background-color: #f8d7da;
	border: 2px solid #842029;
	border-radius: 8px;
}
#menew_p12 {
	display: none;
	overflow: scroll;
}
#indexs_p2 {
	margin: 10px;
	padding: 10px;
	height: 100px;
	overflow: scroll;
	background-color: #fff3cd;
	border: 2px solid #664d03;
	border-radius: 8px;
}
#menew_p21 {
	margin: 10px;
	padding: 10px;
	background-color: #cff4fc;
	border: 2px solid #055160;
	border-radius: 8px;
}
#menew_p22 {
	display: none;
	overflow: scroll;
}
/* オーディオ制御パネルスタイル */
.audio_btn:hover {
	background: rgba(255, 255, 255, 0.3);
}
.volume_control {
	margin: 5px 0;
	/* ...（省略：全CSS/JS/HTML構造をhtml_5.htmlからコピー）... */
}
.volume_slider {
	width: 150px;
}
#volume_display {
	margin-left: 10px;
}
.audio_controls {
	margin-top: 10px;
}


#footer_area {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 60px;
	background-color: rgba(0, 0, 0, 0.5);
	color: white;
	text-align: center;
	line-height: 60px;
}

#mouse-info {
	z-index: 10001;
	position: fixed;
	bottom: 45px;
	right: 10px;
}
#inisyle {
        position: fixed;
        bottom: 5px;
        right: 10px;
        color:coral;
        font-size:12px;
}

#help_area {
    position: static;
    display: block;
    width: 100%;
    height: 300px;
    background-color: rgb(146, 206, 244);
    padding: 10px;
    border: 1px solid #2b1df1;
    border-radius: 5px;
    max-width: 300px;
    font-size: 14px;
}
/* End of CSS utf-8 */

</style>
	<script>
	const layers = ['box_midol_L1', 'box_midol_L2', 'box_midol_L3', 'box_midol_L4', 'box_midol_L5', 'midol_workig_L5'];
	let arr_swich_button = [0, 0, 0, 0, 0, 0];
	let number_select = 1;
	let arr_t_sel = [`<img src="./image/sample1.jpg" width="480" alt="Sample Image 1">`,
					`<img src="./image/sample2.png" width="480" alt="Sample Image 2">`,
					`<img src="./image/sample3.jpg" width="480" alt="Sample Image 3">`,
					`<img src="./image/sample4.png" width="480" alt="Sample Image 4">`					
					];
	let x0 = 100; let y0 = 100;
	let arr_xy = [
		{x:100, y:100},
		{x:200, y:100},
		{x:100, y:540},
		{x:200, y:540}
		];
	let but_last_push = 0;
	let imageFileCount = '';
	let audioFileCount = '';
	let videoFileCount = '';

	</script>
</head>
<body>
<div id="ueninoseraru"><a name="to_top"></a></div><!-- リンクマーカーstyle の1/2で出る --> 
<!-- 上部ナビゲーション --> 
<div id="box_top">
	<table><tr><td width="220px">
		<p class="box_p1">
		<button class="layer-btn" id="playButton" onclick="playAudio_L1_5()">音声再生</button>
		<button class="layer-btn" id="videoButton" onclick="tovideo_L1_5()">動画再生</button>
		<button class="layer-btn" type="button" id="popup_toggle_btn" onclick="showPopup1();">pop1表示</button>
		<br><br>　<a href="#help">help !</a></p>
	</td><td>
		<p>　　　　　</p>
	</td><td>
<p><font size="6"><font color="gold">WorKing! </font><font color="green">book5</font><font color="blue"><i> active.</i></font></font></p>
</td><td>
<p>　　　　　</p>
	</td><td>
		<!-- 画像表示セル -->
		<table id="top_in_table"><tr>
			<td id="toptd_1" onclick="showImageInCell(1, 'x1_y1')">
				1<br>クリックで画像
			</td><td id="toptd_2" onclick="showImageInCell(2, 'x2_y1')">
				2<br>クリックで画像
			</td></tr>				
			<tr><td id="toptd_3" onclick="showImageInCell(3, 'x1_y2')">
				3<br>クリックで画像
			</td><td id="toptd_4" onclick="showImageInCell(4, 'x2_y2')">
				4<br>クリックで画像
		</td></tr></table>
    </td><td>
		<p>　</p>
	</td><td width="470px">
		<!-- レイヤークイックコントロール -->
		<p class="box_p1">
		<button class="layer-btn" onclick="toggleLayerInfo(0);" id="Lbtn_0">All</button>
		<button class="layer-btn" onclick="toggleLayerInfo(1);" id="Lbtn_1">L1</button>
		<button class="layer-btn" onclick="toggleLayerInfo(2);" id="Lbtn_2">L2</button>
		<button class="layer-btn" onclick="toggleLayerInfo(3);" id="Lbtn_3">L3</button>
		<button class="layer-btn" onclick="toggleLayerInfo(4);" id="Lbtn_4">L4</button>
		<button class="layer-btn" onclick="toggleLayerInfo(5);" id="Lbtn_5">L5</button>
		<button class="layer-btn" onclick="toggleLayerInfo(6);" id="Lbtn_6">LW</button><!-- 実は'_'スプリットでL?=が分かる -->
		　　x: <input type="text" id="img_x_pos"onchange="inget_xy(value,'x')" value="100" size="4" aria-label="画像X位置" title="画像のX">
		　y: <input type="text" id="img_y_pos"onchange="inget_xy(value,'y')" value="100" size="4" aria-label="画像Y位置" title="画像のY">
		</p><p class="box_p1">
		1: <button onclick="showImageInCell(1, 'x1_y1');" id="Lta_1">100_100</button><!-- separator"_" -->
		　2: <button onclick="showImageInCell(2, 'x2_y1');" id="Lta_2">200_100</button>
		　3: <button onclick="showImageInCell(3, 'x1_y2');" id="Lta_3">100_540</button>
		　4: <button onclick="showImageInCell(4, 'x2_y2');" id="Lta_4">200_540</button>
	</p>
	</td></tr></table>
<script>
function showImageInCell(nmber, xxyy) {
	alert('showImageInCell called with number: ' + nmber + ', position: ' + xxyy);
	let number = Number(nmber);
	number_select = number;
	arr_t_sel_index = number - 1; // 配列のインデックスは0から始まるため、1を引く
}
function inget_xy(val, xy) {
	val = val.replace(/[^0-9.-]/g, ''); // 数値以外の文字を削除
	if (val == '' || isNaN(Number(val))) {
		val = '0';
	}
	let value = Number(val);
	if (xy == 'x') {
		x0 = value;
		document.getElementById('img_x_pos').value = x0; // 入力フィールドを更新
	} else if (xy == 'y') {
		y0 = value;
		document.getElementById('img_y_pos').value = y0; // 入力フィールドを更新
	} else {
		console.error('無効な座標タイプ: ' + xy);
	}
	arr_xy[number_select - 1] = {x: x0, y: y0};
	document.getElementById(Lta_1).innerText = `${arr_xy[0].x}_${arr_xy[0].y}`;
	document.getElementById(Lta_2).innerText = `${arr_xy[1].x}_${arr_xy[1].y}`;
	document.getElementById(Lta_3).innerText = `${arr_xy[2].x}_${arr_xy[2].y}`;
	document.getElementById(Lta_4).innerText = `${arr_xy[3].x}_${arr_xy[3].y}`;
	//マウスからx0,y0を入れてやれれば終わり
}
function toggleLayerInfo(number) {
	if (number === 0) {
		but_last_push = number;
		// 全てのレイヤーを表示
		layers.forEach(layerId => {
			arr_swich_button[number] = !arr_swich_button[number]; //一回ごとに反転する
			for (let i = 0; i < layers.length; i++) {
				document.getElementById(layers[i]).style.display = 'block';
				document.getElementById(layers[i]).style.backgroundColor = 'transparent';
			}
		});
	} else if (number >= 1 && number < layers.length) {
		arr_swich_button[number] = !arr_swich_button[number]; //一回ごとに反転する
		arr_swich_button[0] = 0; //Allボタンはクリア
		but_last_push = number;
		document.getElementById(layers[6]).innerHTML = ''; //working L5クリア
		let layers_m = document.getElementById(layers[number]).innerHTML; 
		document.getElementById(layers[6]).innerHTML = layers_m; //working L5へコピー
	} else if (number === 6) {
		arr_swich_button[number] = !arr_swich_button[number]; //一回ごとに反転する
		if (arr_swich_button[6] == 0) {
			document.getElementById(layers[but_last_push]).style.display = 'block';
			let layers_m = document.getElementById(layers[6]).innerHTML; 
			document.getElementById(layers[but_last_push]).innerHTML = layers_m; //working L5へコピー
			document.getElementById(layers[6]).innerHTML = ''; //working L5クリア
			document.getElementById(layers[6]).style.display = 'none';
			return;
		}
		// LWレイヤーを表示
		document.getElementById(layers[6]).style.display = 'block';
		document.getElementById(layers[6]).style.backgroundColor = 'rgba(255, 128, 0, 0.5)';
	} else {
		console.error('無効なレイヤー番号: ' + number);
	}
}



</script>




	</div><!-- box_top end-->
	<!-- box_top end-->
<br><br><br><br><!-- top	-->
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><!--midolu-->
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><!--midolu-->
	<!-- L1レイヤー display=コントロール -->
<div id="midol">
	<div id="box_midol_L1">
	<table><tr>
		<td>
			<button class="layer-btn" onclick="tovideo_L1_5()">L1動画再生</button>
			<button class="layer-btn" onclick="playAudio_L1_5()">L1音声再生</button>
		<td></td><td>

		</td></tr><tr>
		<td>
		</td><td>
		</td><td>
	</td></tr></table>
	<table><tr><td>
			<p><font size="4" color="white">L1 layer area</font></p>
		</td></tr><tr>
		<td>
		</td><td>
		</td><td>
	</td></tr></table>
	</div>
	<div id="box_midol_L2">
	<table><tr><td>
		<br><br>　　
		<button class="layer-btn" onclick="tovideo_L2_5()">L2動画再生</button>
		<button class="layer-btn" onclick="playAudio_L2_5()">L2音声再生</button>
		</td></tr><tr>
		<td>
		</td><td>
		</td><td>
	</td></tr></table>
	<table><tr><td>
		<br><br>　　
		<p><font size="4" color="white">L2 layer area</font></p>
		</td></tr><tr>
		<td>
		</td><td>
		</td><td>
	</td></tr></table>
	</div>
	<div id="box_midol_L3">
	<table><tr><td>
		<br><br><br><br>　　　　
		<button class="layer-btn" onclick="tovideo_L3_5()">L3動画再生</button>
		<button class="layer-btn" onclick="playAudio_L3_5()">L3音声再生</button>
		</td></tr><tr>
		<td>
		</td><td>
		</td><td>
	</td></tr></table>
	<table><tr><td>
		<br><br><br><br>　　　　
		<p><font size="4" color="white">L3 layer area</font></p>
		</td></tr><tr>
		<td>
		</td><td>
		</td><td>
	</td></tr></table>
	</div>
	<div id="box_midol_L4">
	<table><tr><td>
		<br><br><br><br><br><br>　　　　　　
		<button class="layer-btn" onclick="tovideo_L4_5()">L4動画再生</button>
		<button class="layer-btn" onclick="playAudio_L4_5()">L4音声再生</button>
		</td></tr><tr>
		<td>
		</td><td>
		</td><td>
	</td></tr></table>
	<table><tr><td>
		<br><br><br><br><br><br>　　　　　　
		<p><font size="4" color="white">L4 layer area</font></p>
		</td></tr><tr>
		<td>
		</td><td>
		</td><td>
	</td></tr></table>
	</div>
	<div id="box_midol_L5">
	<table><tr><td>
		<br><br><br><br><br><br><br><br>　　　　　　　　
		<button class="layer-btn" onclick="tovideo_L5_5()">L5動画再生</button>
		<button class="layer-btn" onclick="playAudio_L5_5()">L5音声再生</button>
		</td></tr><tr>
		<td>
		</td><td>
		</td><td>
	</td></tr></table>
	<table><tr><td>
		<br><br><br><br><br><br><br><br>　　　　　　　　
		<p><font size="4" color="white">L5 layer area</font></p>
		</td></tr><tr>
		<td>
		</td><td>
		</td><td>
	</td></tr></table>
	</div>
	<div id="midol_workig_L5">
	<table><tr><td>
		<br><br><br><br><br><br><br><br><br><br>　　　　　　　　　　
		<button class="layer-btn" onclick="tovideo_workig_L5_5()">working! L5動画再生</button>
		<button class="layer-btn" onclick="playAudio_workig_L5_5()">working! L5音声再生</button>
		</td></tr><tr>
		<td>
		</td><td>
		</td><td>
	</td></tr></table>
	<table><tr><td>
		<br><br><br><br><br><br><br><br><br><br>　　　　　　　　　　
		<p><font size="4" color="white">working! L5 layer area</font></p>
		</td></tr><tr>
		<td>
		</td><td>
		</td><td>
	</td></tr></table>
	</div>
</div><!-- midol end -->
	<!-- end midol left -->
 	<!-- R1 middle-->
	<div id="box_midol_R1">
		<div id="R_indexs">
		<table><tr><td>
			<button class="layer-btn" onclick="tovideo_R1_5();">R1動画再生</button>
			<button class="layer-btn" onclick="playAudio_R1_5();">R1音声再生</button>
		</td></tr><tr><td>
		</td></tr><tr><td>
		</td></tr></table>
		</div>
		<div id="R_menews1">
			<select id="R_image_select1" onchange="set_Img_sel(value);">
			<?php // image directory から jpg と png ファイル名を読み込む	
				$image_dir = __DIR__ . '/image/';				
				$image_files = glob($image_dir . '*.{jpg,png}', GLOB_BRACE);
				foreach ($image_files as $file) {
					$filename = basename($file);
					echo '<option value="'. $image_dir. htmlspecialchars($filename) . '">' . htmlspecialchars($filename) . '</option>';
				}
				?>
			</select>
			<span id="get_i_name">image name</span><br>
			<!-- 画像表示エリア -->
			<script>
				let selectedImageValue = '';
				function set_Img_sel(value) {
					// alert('選択された値: ' + value);
					selectedImageValue = value;
					let img_f_name = value;
					alert('selectedImageValue: ' + selectedImageValue);
					// IDが存在しない場合は参照しない
					if (selectedImageValue.match(/\/image\//)) {
						let arr_split3 = selectedImageValue.split('/image/');
						let img_f_name = './image/' + arr_split3[1];
						document.getElementById('get_i_name').innerHTML = `${number_select}__${img_f_name}<img src="${img_f_name}" width="50px" alt="Selected Image">`;
						// 選択された画像をworking L5に表示
						let t1='';let t2=''; let t3=''; let t4='';
						if (number_select == 1) {
							t1 = `<img src="${img_f_name}" width="${arr_xy[number_select - 1].x}" hide="${arr_xy[number_select - 1].y}" alt="${number_select}">`;
							arr_t_sel[0] = t1;
						} else if (number_select == 2) {
							t2 = `<img src="${img_f_name}" width="${arr_xy[number_select - 1].x}" hide="${arr_xy[number_select - 1].y}" alt="${number_select}">`;
							arr_t_sel[1] = t2;
						} else if (number_select == 3) {
							t3 = `<img src="${img_f_name}" width="${arr_xy[number_select - 1].x}" hide="${arr_xy[number_select - 1].y}" alt="${number_select}">`;
							arr_t_sel[2] = t3;
						} else if (number_select == 4) {
							t4 = `<img src="${img_f_name}" width="${arr_xy[number_select - 1].x}" hide="${arr_xy[number_select - 1].y}" alt="${number_select}">`;
							arr_t_sel[3] = t4;
						}
						let tagg_ime =`<taable><tr><td>${t1}</td><td>${t2}</td></tr><tr><td>${t3}</td><td>${t4}</td><tr></table>`;
						document.getElementById(layers[5]).innerHTML = tagg_ime; // midol_workig_L5へ表示
						// working L5へ表示
					}
				}
			</script>
		</div>
		<div id="R_menews2">
		<p>
			<font size="4" color="white">R1 menew2</menu></font>
		</p>
		</div>
		<table id="R_table1"><tr><td colspan="2">
			<input type="radio" name="in_set" value="1" checked onchange="chenge_av(value);">1. <input type="radio" name="in_set" value="2" onchange="chenge_av(value);">2.
			　<select onchange="set_vewe_set(value);">	
				<?php // video directory から mp4 と webm ファイル名を読み込む	
				$audio_dir = __DIR__ . '/audio/';				
				$audio_files = glob($audio_dir . '*.{mp3,wav}', GLOB_BRACE);
                echo '<script> audioFileCount = ' . count($audio_files) . ';</script> ';
                foreach ($audio_files as $file) {
					$filename = basename($file);
					echo '<option value="'. $audio_dir. htmlspecialchars($filename) . '">' . htmlspecialchars($filename) . '</option>';}

                $video_dir = __DIR__ . '/video/';
				$video_files = glob($video_dir . '*.{mp4,webm}', GLOB_BRACE);
                echo '<script> videoFileCount = ' . count($video_files) . ';</script>';
				foreach ($video_files as $file) {
					$filename = basename($file);
					echo '<option value="'. $video_dir. htmlspecialchars($filename) . '">' . htmlspecialchars($filename) . '</option>';
				}
				?>
			</select>
        </td></tr><tr><td colspan="2">    
		<span id="L_go">L5</span> <button class="layer-btn" onclick="tovideo_toL_1();">1 音声付き</button>
		<button class="layer-btn" onclick="tovideo_toR_1();">1 音声なし</button>
		<button class="layer-btn" onclick="tovideo_toL_2();">2 音声付き</button>
		<button class="layer-btn" onclick="tovideo_toR_2();">2 音声なし</button>         
		</td></tr><tr><td width="50%">
		<!-- オーディオパネル1 -->
			<div id="audio_panel_1">
			<audio controls style="width: 100%;">
	        	<source src="./audio/mp3_yutari_DIY_02.mp3" type="audio/mpeg">	      
	        	このブラウザはaudio再生に対応していません。
	      	</audio>
			</div>
		</td><td width="50%">
			<!-- オーディオパネル2 -->
			<div id="audio_panel_2">
			<audio controls style="width: 100%;">
				<source src="./audio/wav_yutari_DIY_02.wav" type="audio/wav">
				このブラウザはaudio再生に対応していません。
			</audio>		
			</div>
		</td></tr><tr><td width="50%">
		<!-- video mini パネル1 -->
		 <div id="video_panel_1">
		<video controls style="width: 100%;">
			<source src="./video/2025-11-08-193808.mp4" type="video/mp4">
	        このブラウザはvideo再生に対応していません。
	      	</video>
			</div>
		</td><td width="50%">
		<!-- video mini パネル2 -->
		 <div id="video_panel_2">
		<video controls style="width: 100%;">
			<source src="./video/2025-11-08-193808.mp4" type="video/mp4">
	        このブラウザはvideo再生に対応していません。
	      	</video>
			</div>
		</td></tr></table>
		<script>
let L_go_v = 1;
let aud1_f_name = './audio/mp3_yutari_DIY_02.mp3';
let aud2_f_name = './audio/wav_yutari_DIY_02.wav';
let vid1_f_name = './video/2025-11-08-193808.mp4'; // 文字列型で定義
let vid2_f_name = './video/2025-11-08-193808.mp4'; // 文字列型で定義
function chenge_av(val) {
	// alert('選択された値: ' + val);
	// L_goはHTMLに存在しない場合は参照しない
	if (val === '1' || val === '2') {
		L_go_v = val;
	}
}

let selectedValue = './video/2025-11-08-193808.mp4';
function set_vewe_set(value) {
	// alert('選択された値: ' + value);
	let selectedValue = String(value); // 文字列型に変換
	// IDが存在しない場合は参照しない
	if (selectedValue.match(/\/audio\//) ) {
		let arr_split1 = selectedValue.split('/audio/');
		if (L_go_v === 1) {
			aud1_f_name = './audio/' + arr_split1[1];
			let tagseikei = `<audio controls style="width: 100%;">
			<source src="${aud1_f_name}" type="audio/mp4" autoplay></audio>`;
			document.getElementById('audio_panel_1').innerHTML = tagseikei;
		} else if (L_go_v === 2) {
			aud2_f_name = './audio/' + arr_split1[1];
			let tagseikei = `<audio controls style="width: 100%;">
			<source src="${aud2_f_name}" type="audio/mp4" autoplay></audio>`;
			document.getElementById('audio_panel_2').innerHTML = tagseikei
		}
	} else if ( selectedValue.match(/\/video\//) ) {
		let arr_split2 = selectedValue.split('/video/');
		if (L_go_v === 1) {
			vid1_f_name = './video/' + arr_split2[1];
			let tagseikei = `<video controls style="width: 100%;">
			<source src="${vid1_f_name}" type="video/mp4" autoplay></video>`;
			document.getElementById('video_panel_1').innerHTML = tagseikei;
		} else {
			vid2_f_name = './video/' + arr_split2[1];
			let tagseikei = `<video controls style="width: 100%;">
			<source src="${vid2_f_name}" type="video/mp4" autoplay></video>`;
			document.getElementById('video_panel_2').innerHTML = tagseikei;
		}
	}
}

let kariL3_lay = '';
function tovideo_toL_1() {
	kariL3_lay = String(vid1_f_name);
	let tagseikei = `<video src="${kariL3_lay}" width="640" autoplay></video>`;
	// midol_workig_L5が存在しない場合は参照しない]
	document.getElementById('midol_workig_L5').innerHTML = tagseikei;
}
function tovideo_toL_2() {
	kariL3_lay = String(vid2_f_name);
	let tagseikei = `<video src="${kariL3_lay}" width="640" autoplay></video>`;
	document.getElementById('midol_workig_L5').innerHTML = tagseikei;
}
function tovideo_toR_1() {
	kariL3_lay = String(vid1_f_name);
	let tagseikei = `<video src="${kariL3_lay}" width="640" muted autoplay></video>`;
	document.getElementById('midol_workig_L5').innerHTML = tagseikei;
	// midol_workig_L5が存在しない場合は参照しない
}
function tovideo_toR_2() {
	kariL3_lay = String(vid2_f_name);
	let tagseikei = `<video src="${kariL3_lay}" width="640" muted autoplay></video>`;
	document.getElementById('midol_workig_L5').innerHTML = tagseikei;
	// midol_workig_L5が存在しない場合は参照しない
}
			</script>
		</div>  
	</div><!-- R1 middle end -->
	<!-- midol under -->
	<!-- ポップアップズ ここから -->
 	<button type="button" onclick="showPopup1();">ポップアップ1 を開く</button>
 	<button type="button" onclick="showPopup2();">ポップアップ2 を開く</button>
    <a href="./book5_new.html" target="_blank">old type</a><br>
	<!-- ポップアップウィンドウ1 --> 
	<div id="overlay_bass1"> 
		<div class="popup"> 
			<div class="grip_lin"> Grip Line - Popup 1 <span class="gp_mous">　</span>
				<button type="button" class="close_pop" onclick="closePopup();">×</button> 
			</div><!-- gaid end --> 
			<div id="indexs_p1"> 
				<button type="button" onclick="showPopup1();">ポップアップ1 を開く</button> 
				<button type="button" onclick="menew_2();">Menu2 を開く</button> 
				<button type="button" onclick="menew_p1(1);">Menu1表示 を開く</button> 
				<button type="button" onclick="menew_p1(2);">Menu2 を開く</button> 
                <a href="./book5_new.html" target="_blank">old type</a>
			</div><!-- indexs end --> 
			<div id="menew_p11">
				<!-- オーディオ制御パネル -->
				<div id="audio1-panel">
					<h4>🔊 オーディオ制御</h4>
					<div class="audio-controls">
						<button class="audio-btn" onclick="playClickSound()">クリック音</button>
						<button class="audio-btn" onclick="playPopupSound()">小窓音</button>
						<button class="audio-btn" onclick="playSuccessSound()">成功音</button>
					</div>				
					<div class="volume-control">
						<label for="volume-slider">音量:</label>
						<input type="range" class="volume-slider" id="volume-slider" min="0" max="1" step="0.1" value="0.5" aria-label="音量調整スライダー" title="音量を調整します">
						<span id="volume-display">50%</span>
					</div>
					<div class="audio-controls">
						<button class="audio-btn" onclick="toggleMute()">🔇 ミュート</button>
						<button class="audio-btn" onclick="stopAllAudio()">⏹️ 停止</button>
					</div>
				</div>
				<p>これはポップアップ2ウィンドウの内容です。</p> 
				<div>
					<button onclick="movePopup1('left');">←</button> 
					<button onclick="movePopup1('right');">→</button> 
					<button onclick="movePopup1('up');">↑</button> 
					<button onclick="movePopup1('down');">↓</button> 
					<button onclick="movePopup1('center');">中央</button> 
				</div>
			</div><!-- menew12 end --> 
			<div id="menew_p12"> 
				<p>これはMenu2の内容です。</p> 
				<button onclick="movePopup1('left');">←左</button> 
				<button onclick="movePopup1('right');">→右</button> 
				<button onclick="movePopup1('up');">↑上</button> 
				<button onclick="movePopup1('down');">↓下</button> 
				<button onclick="movePopup1('center');">中央</button> 
			</div><!-- menew22 end --> 
		</div><!-- popup end --> 
	</div><!-- overlay_bass2 end -->
	<!-- ポップアップウィンドウ2 -->
	<div id="overlay_bass2"> 
		<div class="popup"> 
			<div class="grip_lin"> Grip Line - Popup 1 <span class="gp_mous">　</span>
				<button type="button" class="close_pop" onclick="closePopup();">×</button> 
			</div><!-- gaid end --> 
			<div id="indexs_p2"> 
				<button type="button" onclick="showPopup1();">ポップアップ1 を開く</button> 
				<button type="button" onclick="showPopup2();">ポップアップ2 を開く</button> 
				<button type="button" onclick="menew_p2(1);">Menu1表示 を開く</button> 
				<button type="button" onclick="menew_p2(2);">Menu2 を開く</button> 
			</div><!-- indexs end --> 
			<div id="menew_p21">
				<!-- オーディオ制御パネル -->
				<div id="audio2-panel">
					<h4>🔊 オーディオ制御</h4>
					<div class="audio-controls">
						<button class="audio-btn" onclick="playClickSound()">クリック音</button>
						<button class="audio-btn" onclick="playPopupSound()">小窓音</button>
						<button class="audio-btn" onclick="playSuccessSound()">成功音</button>
					</div>				
					<div class="volume-control">
						<label for="volume-slider">音量:</label>
						<input type="range" class="volume-slider" id="volume-slider" min="0" max="1" step="0.1" value="0.5" aria-label="音量調整スライダー" title="音量を調整します">
						<span id="volume-display">50%</span>
					</div>
					<div class="audio-controls">
						<button class="audio-btn" onclick="toggleMute()">🔇 ミュート</button>
						<button class="audio-btn" onclick="stopAllAudio()">⏹️ 停止</button>
					</div>
				</div>
				<p>これはポップアップ2ウィンドウの内容です。</p> 
				<div>
					<button onclick="movePopup1('left');">←</button> 
					<button onclick="movePopup1('right');">→</button> 
					<button onclick="movePopup1('up');">↑</button> 
					<button onclick="movePopup1('down');">↓</button> 
					<button onclick="movePopup1('center');">中央</button> 
				</div>
			</div><!-- menew12 end --> 
			<div id="menew_p22"> 
				<p>これはMenu2の内容です。</p> 
				<button onclick="movePopup1('left');">←左</button> 
				<button onclick="movePopup1('right');">→右</button> 
				<button onclick="movePopup1('up');">↑上</button> 
				<button onclick="movePopup1('down');">↓下</button> 
				<button onclick="movePopup1('center');">中央</button> 
			</div><!-- menew22 end --> 
		</div><!-- popup end --> 
	</div><!-- overlay_bass2 end -->
	<!-- ポップアップズ ここまで -->	
	<!-- footer area --> 
<div id="footer_area"> 
	<button type="button" onclick="showPopup2();">ポップアップ2 を開く</button>
	　　フッターエリア　　<div id="mouse-info">ΔX: -58, ΔY: -491</div>
	<!-- マウス位置モニター（フッターエリア内・上層表示） -->
	<span id="inisyle">tattyan ver.0.5.6</span>
</div><!-- footer_area end --> 
<!-- ending tags --> <!-- help area status --> 
<br><br><br><br><br>
<div id="help_area">
	<h2>Help !</h2>
	<p>
		This is help area. 
	</p>
	<p>
		Use the buttons and controls to interact with the layers and media.
<br><br><br>
<a name="help"></a> <a href="#to_top">▲ to top</a> 
<br><br><br><br><br><br><br><br><br><br><br>
</div><!-- help_area end -->
<!-- ステータス表示エリア -->
<div id="status_area">
	<h2>Status !</h2>
	<p>
		This is status area. 
	</p>
	<p>
		Status messages and information will be displayed here.


</div> 
<!-- ending html --> 
<script>
	/* */
    // ポップアップウィンドウの表示と非表示の制御 
	let overlay_bass1 = document.getElementById('overlay_bass1'); 
	let overlay_bass2 = document.getElementById('overlay_bass2'); 
	let overlay_bass; 
	let popup = document.getElementsByClassName("popup"); 
	let grip_lin = document.getElementsByClassName("grip_lin"); 
	let popup_content1 = document.getElementById("popup_content1"); 
	let popup_content2 = document.getElementById("popup_content2"); 
	let this_layer = 0; // sample2.htmlから移植：interval click制御変数 
	let time1_id;
	const TIMER_INTERVAL_MS = 80; // 0.08sec間隔（さらに短縮 - よりレスポンシブ）
	let coun_a = 0; 
	let c_nomal_lr = 0; 
	let coun_b = 0; 
	let muse_x = 0; 
	let muse_y = 0; 
	let bak_clientx = 0; 
	let bak_clienty = 0; 
	let dwbul_clikk_flag = false; 
	let griip_on_frag = false; 
	let appNameRagFlag = false; 
	let blawsar_width = window.innerWidth; 
	let blawsar_height = window.innerHeight; 
	let pop_width = 480; 
	let pop_height = 320;
	
	let pop1_wide = 480; 
	let pop1_high = 320; 
	let pop2_wide = 300; 
	let pop2_high = 200; 
	let centerX = Math.floor((blawsar_width - pop_width) / 2); 
	let centerY = Math.floor((blawsar_height - pop_height) / 2); 
	let pop_left_x = 0; 
	let pop_top_y = 0; 
	let grade_timee = 15; // ポップアップ表示までのカウントダウン時間 
	let mouseInfo = document.getElementById('mouse-info'); 
	let clickMode = 0; // 0: 絶対座標、1: 相対座標、2: 非表示
	let baseX = 0;
	let baseY = 0;
	function updateMousePosition(e) {
		muse_x = e.clientX;
		muse_y = e.clientY;
		
		if (clickMode == 0) {
			// 絶対座標表示（白文字）
			mouseInfo.textContent = `X: ${muse_x}, Y: ${muse_y}`;
			mouseInfo.className = '';
		} else if (clickMode == 1) {
			// 相対座標表示（黄色文字）
			let relativeX = muse_x - baseX;
			let relativeY = muse_y - baseY;
			mouseInfo.textContent = `ΔX: ${relativeX}, ΔY: ${relativeY}`;
			mouseInfo.className = 'relative';
		}
		// clickMode == 2 の場合は非表示（何もしない）=== ヘキサレベルのバイトサイズまで見て比較するはず。
	}
	
	// クリックでモード切り替え
	function toggleMouseInfoMode(e) {
		clickMode = (clickMode + 1) % 3;
		
		if (clickMode == 1) {
			// 相対座標モードに切り替え：基準点を現在位置に設定
			baseX = e.clientX;
			if (clickMode == 0) {
			mouseInfo.textContent = `ΔX: 0, ΔY: 0`;
			mouseInfo.className = 'relative';
			} 
		} else {
			// 絶対座標モードに戻る
			mouseInfo.textContent = `X: ${muse_x}, Y: ${muse_y}`;
			mouseInfo.className = '';
		}
	}
	
	// グローバルマウス追跡
	document.addEventListener('mousemove', updateMousePosition);
	
	// ドキュメント全体でのクリックでモード切り替え
	document.addEventListener('click', toggleMouseInfoMode);
	
	/*
	*/
	// ボタン値を更新する関数
	function updateButtonValue(type, key, value) {
		switch(type) {
			case 'layer':
				if (BUTTON_CONFIG.layers[key]) {
					if (typeof value === 'object') {
						BUTTON_CONFIG.layers[key].x = value.x || BUTTON_CONFIG.layers[key].x;
						BUTTON_CONFIG.layers[key].y = value.y || BUTTON_CONFIG.layers[key].y;
						BUTTON_CONFIG.layers[key].text = `x${BUTTON_CONFIG.layers[key].x} y${BUTTON_CONFIG.layers[key].y}`;
					}
				}
				break;
			case 'coordinate':
				if (key === 'x' || key === 'y') {
					BUTTON_CONFIG.coordinates[key] = value;
				}
				break;
			case 'imageCell':
				if (BUTTON_CONFIG.imageCells[key]) {
					BUTTON_CONFIG.imageCells[key].width = value.width || BUTTON_CONFIG.imageCells[key].width;
					BUTTON_CONFIG.imageCells[key].height = value.height || BUTTON_CONFIG.imageCells[key].height;
					BUTTON_CONFIG.imageCells[key].label = value.label || BUTTON_CONFIG.imageCells[key].label;
				}
				break;
		}
		updateButtonTexts(); // ボタンテキストを再描画
	}
	
	// レイヤー管理機能
	let currentAudioVolume = 0.5;
	let isMuted = false;
	
	function initializeLayerPanel() {
		const layerItems = document.querySelectorAll('.layer-item');
		layerItems.forEach(item => {
			item.addEventListener('click', (e) => {
				e.stopPropagation(); // マウス座標モード切り替えを防ぐ
				toggleLayer(item.dataset.layer);
			});
		});
	}
	
	function toggleLayer(layerType) {
		const item = document.querySelector(`[data-layer="${layerType}"]`);
		const eye = item.querySelector('span:last-child');
		
		switch(layerType) {
			case 'all':
				// 全レイヤー表示切り替え
				const allVisible = eye.textContent === '👁️';
				document.querySelectorAll('.layer-item').forEach(layerItem => {
					const eyeIcon = layerItem.querySelector('span:last-child');
					eyeIcon.textContent = allVisible ? '👁️‍🗨️' : '👁️';
				});
				break;
			case 'L1':
				eye.textContent = eye.textContent === '👁️' ? '👁️‍🗨️' : '👁️';
				toggleElementVisibility('#box_fast_L_1', eye.textContent === '👁️');
				break;
			case 'L2':
				eye.textContent = eye.textContent === '👁️' ? '👁️‍🗨️' : '👁️';
				toggleElementVisibility('#box_fast_L_2', eye.textContent === '👁️');
				break;
			case 'L3':
				eye.textContent = eye.textContent === '👁️' ? '👁️‍🗨️' : '👁️';
				toggleElementVisibility('#box_fast_L_3', eye.textContent === '👁️');
				break;
			case 'L4':
				eye.textContent = eye.textContent === '👁️' ? '👁️‍🗨️' : '👁️';
				toggleElementVisibility('#box_fast_L_4', eye.textContent === '👁️');
				break;
			case 'L5':
				eye.textContent = eye.textContent === '👁️' ? '👁️‍🗨️' : '👁️';
				toggleElementVisibility('#box_fast_L_5', eye.textContent === '👁️');
				break;
			case 'popup':
				eye.textContent = eye.textContent === '👁️' ? '👁️‍🗨️' : '👁️';
				toggleElementVisibility('#overlay_bass1, #overlay_bass2', eye.textContent === '👁️');
				break;
			case 'status':
				eye.textContent = eye.textContent === '👁️' ? '👁️‍🗨️' : '👁️';
				toggleElementVisibility('#status_display', eye.textContent === '👁️');
				break;
			case 'mouse':
				eye.textContent = eye.textContent === '👁️' ? '👁️‍🗨️' : '👁️';
				toggleElementVisibility('#mouse-info', eye.textContent === '👁️');
				break;
		}
	}
	
	function toggleElementVisibility(selector, visible) {
		const elements = document.querySelectorAll(selector);
		elements.forEach(el => {
			el.style.display = visible ? '' : 'none';
		});
	}
	
	// オーディオ機能
	const audioContext = new (window.AudioContext || window.webkitAudioContext)();
	
	function createTone(frequency, duration, type = 'sine') {
		const oscillator = audioContext.createOscillator();
		const gainNode = audioContext.createGain();
		
		oscillator.connect(gainNode);
		gainNode.connect(audioContext.destination);
		
		oscillator.frequency.setValueAtTime(frequency, audioContext.currentTime);
		oscillator.type = type;
		
		gainNode.gain.setValueAtTime(0, audioContext.currentTime);
		gainNode.gain.linearRampToValueAtTime(isMuted ? 0 : currentAudioVolume, audioContext.currentTime + 0.01);
		gainNode.gain.linearRampToValueAtTime(0, audioContext.currentTime + duration);
		
		oscillator.start(audioContext.currentTime);
		oscillator.stop(audioContext.currentTime + duration);
	}
	
	function playClickSound() {
		createTone(800, 0.1, 'square');
	}
	
	function playPopupSound() {
		createTone(600, 0.2, 'sine');
		setTimeout(() => createTone(800, 0.2, 'sine'), 100);
	}
	
	function playSuccessSound() {
		createTone(523, 0.15); // C5
		setTimeout(() => createTone(659, 0.15), 150); // E5
		setTimeout(() => createTone(784, 0.3), 300); // G5
	}
	
	function toggleMute() {
		isMuted = !isMuted;
		const btn = event.target;
		btn.textContent = isMuted ? '🔊 ミュート解除' : '🔇 ミュート';
	}
	
	function stopAllAudio() {
		// Web Audio APIでは個別の停止が困難なため、新しいコンテキストを作成
		audioContext.close();
		audioContext = new (window.AudioContext || window.webkitAudioContext)();
	}
	
	function initializeAudioPanel() {
		const volumeSlider = document.getElementById('volume-slider');
		const volumeDisplay = document.getElementById('volume-display');
		
		volumeSlider.addEventListener('input', (e) => {
			currentAudioVolume = parseFloat(e.target.value);
			volumeDisplay.textContent = Math.round(currentAudioVolume * 100) + '%';
		});
	}
	
	// レイヤーパネル開閉機能
	function toggleLayerPanel() {
		const layerPanel = document.querySelector('#box_fast_R_1 .popup_r1');
		if (layerPanel.style.display === 'none') {
			layerPanel.style.display = 'block';
		} else {
			layerPanel.style.display = 'none';
		}
	}
	
	// R1パネル管理システム（ブロック表示版）
	function toggleR1Panel(panelType) {
		const panel = document.getElementById('r1_' + panelType + '_panel');
		if (panel) {
			// display状態を切り替え
			if (panel.style.display === 'none' || panel.style.display === '') {
				// 他のパネルを全て非表示
				hideAllR1Panels();
				// 指定パネルを表示
				panel.style.display = 'block';
			} else {
				// 指定パネルを非表示
				panel.style.display = 'none';
			}
		}
	}
	
	function closeR1Panel(panelType) {
		const panel = document.getElementById('r1_' + panelType + '_panel');
		if (panel) {
			panel.style.display = 'none';
		}
	}
	
	function hideAllR1Panels() {
		const panels = ['layer', 'media', 'tools', 'info', 'settings'];
		panels.forEach(panel => {
			const element = document.getElementById('r1_' + panel + '_panel');
			if (element) {
				element.style.display = 'none';
			}
		});
	}
	
	// レイヤー配置パネル関数群（All + L1-L5対応）
	function getSelectedLayer() {
		const radios = document.getElementsByName('layer_select');
		for (let radio of radios) {
			if (radio.checked) {
				return radio.value;
			}
		}
		return 'L1'; // デフォルト
	}
	

	
	function moveLayer(direction) {
		const layer = getSelectedLayer();
		const layerElement = document.getElementById(`box_fast_${layer}`);
		if (!layerElement) return;
		
		const step = 10; // 移動ステップ
		const rect = layerElement.getBoundingClientRect();
		let left = rect.left + window.scrollX;
		let top = rect.top + window.scrollY;
		
		switch(direction) {
			case 'up':
				top -= step;
				break;
			case 'down':
				top += step;
				break;
			case 'left':
				left -= step;
				break;
			case 'right':
				left += step;
				break;
			case 'center':
				left = (window.innerWidth - rect.width) / 2 + window.scrollX;
				top = (window.innerHeight - rect.height) / 2 + window.scrollY;
				break;
		}
		
		layerElement.style.position = 'absolute';
		layerElement.style.left = `${left}px`;
		layerElement.style.top = `${top}px`;
	}	
	// R1メディア制御関数
	function playAudio() {
		const audio = document.getElementById('ply_1');
		// オーディオファイル選択機能を追加
		const audioSources = [
			'audio/nature_birds.mp3',
			'audio/music_box_melody.mp3', 
			'audio/clock_ticking.mp3'
		];
		
		// ランダムまたは設定されたオーディオファイルを再生
		const randomAudio = audioSources[Math.floor(Math.random() * audioSources.length)];
		
		if (audio) {
			audio.src = randomAudio;
			audio.play()
				.then(() => {
					console.log(`🔊 Playing audio: ${randomAudio}`);
				})
				.catch(error => {
					console.error('❌ Failed to play audio:', error);
				});
		} else {
			console.log(`🔊 Would play audio: ${randomAudio}`);
		}
	}
	
	function playVideo() {
		tovideo_L1_5(); // 既存のビデオ再生関数を呼び出し
		// ミニビデオも同期再生（オプション）
		// playMiniVideo();
	}
	
	function stopMedia() {
		const audio = document.getElementById('ply_1');
		const video = document.getElementById('vid_2');
		const miniVideo = document.getElementById('r1_mini_video');
		
		if (audio) audio.pause();
		if (video) video.pause();
		if (miniVideo) {
			miniVideo.pause();
			miniVideo.currentTime = 0;
		}
		
		console.log('⏹️ All media stopped (including mini video)');
	}
	
	function toggleMute() {
		const audio = document.getElementById('ply_1');
		const video = document.getElementById('vid_2');
		const miniVideo = document.getElementById('r1_mini_video');
		
		if (audio) audio.muted = !audio.muted;
		if (video) video.muted = !video.muted;
		if (miniVideo) miniVideo.muted = !miniVideo.muted;
		
		const muteStatus = audio ? audio.muted : false;
		console.log(`🔇 Media mute toggled: ${muteStatus ? 'ON' : 'OFF'}`);
	}
	
	// R1ツール関数
	function centerAllPopups() {
		alert('ポップアップを中央に配置しました'); // プレースホルダー
	}
	
	function resetLayout() {
		hideAllR1Panels();
		document.getElementById('r1_index_panel').style.display = 'block';
		// 全レイヤーを表示
		document.querySelectorAll('.box_fast').forEach(layer => {
			layer.style.display = 'block';
		});
	}
	
	function takeScreenshot() {
		alert('スクリーンショット機能（開発中）'); // プレースホルダー
	}
	
	// R1設定関数
	function toggleTheme() {
		alert('テーマ変更機能（開発中）'); // プレースホルダー
	}
	
	function exportSettings() {
		alert('設定エクスポート機能（開発中）'); // プレースホルダー
	}
	
	function importSettings() {
		alert('設定インポート機能（開発中）'); // プレースホルダー
	}
	
	function resetSettings() {
		if (confirm('設定をリセットしますか？')) {
			resetLayout();
			alert('設定をリセットしました');
		}
	}
	
	// R1情報更新関数
	function updateInfoPanel() {
		const resolutionInfo = document.getElementById('resolution_info');
		const mouseInfo = document.getElementById('mouse_coord_info');
		const uptimeInfo = document.getElementById('uptime_info');
		const layersInfo = document.getElementById('active_layers_info');
		
		if (resolutionInfo) {
			resolutionInfo.textContent = window.innerWidth + ' x ' + window.innerHeight;
		}
		if (mouseInfo && globalMouseX !== undefined && globalMouseY !== undefined) {
			mouseInfo.textContent = globalMouseX + ', ' + globalMouseY;
		}
		if (uptimeInfo) {
			uptimeInfo.textContent = Math.floor(performance.now() / 1000) + '秒';
		}
		if (layersInfo) {
			const visibleLayers = document.querySelectorAll('.box_fast:not([style*="display: none"])').length;
			layersInfo.textContent = visibleLayers + ' / 8';
		}
	}
	
	// メディア再生関連機能
	function tovideo_L1_5() {
		let video1 = document.querySelector("#vid_2 video"); // or video
		document.getElementById('vew_3').innerHTML = '<video autoplay width="960" src="video/una_2.mp4"></video>';
	}
	
	// ポップアップ表示機能
	function openPopup() {
		// 既存のshowPopup1を呼び出すか、新しいポップアップロジックを実装
		showPopup1();
	}
	
	function showPopup1() { 
		alert(overlay_bass1.style.display); 
		if (this_layer != 1 && this_layer != 0) { 
			closePopup(); 
		} 
		this_layer = 1; 
		overlay_bass = overlay_bass1; 
		showPop(this_layer); 
	} 
	function showPopup2() { 
		alert(overlay_bass2.style.display); 
		if (this_layer != 2 && this_layer != 0) {
			 closePopup(); 
		} 
		this_layer = 2; 
		overlay_bass = overlay_bass2; 
		showPop(this_layer); 
	} 
	function showPop(this_layer) { 
		alert(overlay_bass.style.display); 
		overlay_bass.style.display = "block"; 
		if (this_layer == 1 && this_layer != 0) { 
			document.getElementById("menew1").style.display = "block"; 
			document.getElementById("menew2").style.display = "none"; 
			// ポップアップ1の特定の処理があればここに追加 
		} else if (this_layer == 2 && this_layer != 0) { 
			// ポップアップ2の特定の処理があればここに追加 
			document.getElementById("menew21").style.display = "block"; 
			document.getElementById("menew22").style.display = "none"; 
		} 
	} 
	function menew_1() { 
		alert("Menu12 を開きます"); 
		document.getElementById("menew12").style.display = "block"; 
		document.getElementById("menew11").style.display = "none"; 
	} 
	function menew_2() { 
		alert("Menu22 を開きます"); 
		document.getElementById("menew22").style.display = "block"; 
		document.getElementById("menew21").style.display = "none"; 
	} 
	function closePopup() { 
		overlay_bass.style.display = "none"; 
		overlay_bass2.style.display = "none"; 
		alert("ポップアップを閉じました"); 
	} 
	function movePopup1(direction) {
		 let popup = overlay_bass.querySelector('.popup'); 
		 let currentLeft = parseInt(popup.style.left) || 300; 
		 let currentTop = parseInt(popup.style.top) || 300; 
		 switch(direction) { 
			case 'left': popup.style.left = (currentLeft - 50) + 'px'; break; 
			case 'right': popup.style.left = (currentLeft + 50) + 'px'; break; 
			case 'up': popup.style.top = (currentTop - 50) + 'px'; break; 
			case 'down': popup.style.top = (currentTop + 50) + 'px'; break; 
			case 'center': popup.style.left = centerX + 'px'; popup.style.top = centerY + 'px'; break; 
		} 
	} 
	function movePopup2(direction) {
		let popup = overlay_bass2.querySelector('.popup'); 
		let currentLeft = parseInt(popup.style.left) || 300; let currentTop = parseInt(popup.style.top) || 300; 
		switch(direction) { 
			case 'left': popup.style.left = (currentLeft - 50) + 'px'; break; 
			case 'right': popup.style.left = (currentLeft + 50) + 'px'; break; 
			case 'up': popup.style.top = (currentTop - 50) + 'px'; break; 
			case 'down': popup.style.top = (currentTop + 50) + 'px'; break; 
			case 'center': popup.style.left = (centerX + 50) + 'px'; 
			// 少しずらして重ならないように 
			popup.style.top = (centerY + 50) + 'px'; break; 
		} 
	} 
	function handleKeyPress(event, choice) { 
		if (event.key === 'Enter' || event.key === ' ') { 
			event.preventDefault(); if (choice === 1) { 
				showPopup1(); 
			} else if (choice === 2) { 
				showPopup2(); 
			} else if (choice === 3) { 
				menew2(); 
			} 
		} 
	} 
	function menew2() { 
		alert("Menu2を開きます"); 
		if (this_layer != 3) { 
			closePopup(); 
		} 
		this_layer = 3; 
		overlay_bass = overlay_bass2; 
		showPop(this_layer); 
	}

	// sample2.htmlから移植：interval click処理
	function intrval_tim1() {
		// 0.15sec間隔で実行
		// ポップアップが閉じられた場合の終了処理
		if (!(overlay_bass.style.display == "block")) {
			clearInterval(time1_id); // クリアインターバル
			c_nomal_lr = 0; // クリアインターバル時に0にする
			resetClickCounters();
			document.getElementById("status_display").innerHTML = "Grid1[popup_closed] 🚫";
			return;
		}

		// クリック間隔カウント管理
		if (c_nomal_lr == 0) {
			// クリック未開始状態
			return;
		} else if (c_nomal_lr > 0) {
			c_nomal_lr += 1;
		}

		// ダブルクリック/シングルクリック判定
		if (coun_a >= 4 && coun_b >= 2) {
			// 最低間隔チェック（0.32秒経過後）
			if (coun_a <= 15 && coun_b >= 2 && c_nomal_lr <= 18 && !dwbul_clikk_flag) {
				// ダブルクリック判定：0.32〜1.2秒以内で2回以上のマウスアップ
				dwbul_clikk_flag = true;

				// ダブルクリック時間内で入った場合のカウント処理
				let click_count = Math.floor(coun_b / 2); // マウスダウン/アップのペア数
				let feedback_icon = "";

				if (click_count >= 2) {
					// 複数クリック検出：稲妻の数でカウント表示
					let lightning_icons = "⚡".repeat(click_count);
					if (coun_b >= 4) {
						feedback_icon = lightning_icons + "++";
						document.getElementById("status_display").innerHTML = `Grid1[multi_double] ${lightning_icons}++ (${click_count}clicks)`;
					} else {
						feedback_icon = lightning_icons;
						document.getElementById("status_display").innerHTML = `Grid1[double_click] ${lightning_icons} (${click_count}clicks)`;
					}
				} else {
					// 単発ダブルクリック（稲妻一つ）
					feedback_icon = "⚡";
					document.getElementById("status_display").innerHTML = "Grid1[single_double] ⚡ (1click)";
				}

				document.querySelectorAll('.gp_mous').forEach(gp_mous => {
					gp_mous.innerHTML = feedback_icon; 
				});

				// ダブルクリック検出後、空白期間を設ける
				setTimeout(() => {
					resetClickCounters();
				}, 300); // 0.3秒後にリセット

				clearInterval(time1_id); // クリアインターバル
				c_nomal_lr = 0; // クリアインターバル時に0にする
				return;
			}
		}

		// シングルクリック判定：ダブルクリック時間経過後
		if (coun_a >= 15 && c_nomal_lr >= 18) {
			// 最初のクリックからダブルクリック時間が経過 → シングルクリック確定
			let feedback_icon = "";

			if (coun_b >= 2) {
				// 複数イベントでのシングルクリック
				feedback_icon = "✅✅+";
				document.getElementById("status_display").innerHTML = `Grid1[grip_multi_single] ✅✅+ (${coun_b})`;
			} else {
				// 通常のシングルクリック
				feedback_icon = "✅";
				document.getElementById("status_display").innerHTML = "Grid1[grip_single] ✅";
			}

			document.querySelectorAll('.gp_mous').forEach(gp_mous => {
				gp_mous.innerHTML = feedback_icon;
			});

			resetClickCounters();
			clearInterval(time1_id); // クリアインターバル
			c_nomal_lr = 0; // クリアインターバル時に0にする
			return;
		}

		// カウンター更新
		coun_a += 1;

		// タイムアウト処理（調整）
		if (coun_a > 25) {
			document.querySelectorAll('.gp_mous').forEach(gp_mous => {
				gp_mous.innerHTML = "⏰";
			});
			document.getElementById("status_display").innerHTML = "Grid1[timeout] ⏰";

			// ムーブフラグもタイムアウトでクリア
			if (griip_on_frag) {
				griip_on_frag = false;
				// ドラッグデータクリア
				if (overlay_bass) {
					let popup = overlay_bass.querySelector('.popup');
					if (popup) {
						delete popup.dataset.dragStartLeft;
						delete popup.dataset.dragStartTop;
						popup.style.color = ""; // 色をリセット
					}
				}
			}

			resetClickCounters();
			clearInterval(time1_id); // クリアインターバル
			c_nomal_lr = 0; // クリアインターバル時に0にする
		}
	}

	// カウンター初期化関数
	function resetClickCounters(delay_clear = true) {
		coun_a = 0;
		coun_b = 0;
		c_nomal_lr = 0; // フラグを0にリセット（未起動状態）
		appNameRagFlag = false;

		// ダブルクリック検出後は、少し待ってからフラグをクリア
		setTimeout(() => {
			dwbul_clikk_flag = false;
		}, 200);

		// gp_mousエリアのクリア
		if (delay_clear) {
			setTimeout(() => {
				document.querySelectorAll('.gp_mous').forEach(gp_mous => {
					gp_mous.innerHTML = "　";
				});
			}, 1000); // 1秒後にクリア（短縮）
		}
	}

	// sample2.htmlから移植：マウスイベント処理
	// grip_lin要素でマウスダウン開始
	document.addEventListener("DOMContentLoaded", function() {
		// レイヤーパネルとオーディオパネル初期化
		initializeLayerPanel();
		initializeAudioPanel();
		
		// ボタンテキスト初期化
		updateButtonTexts();
		
		// R1テーブルとメイングリッドを同期
		syncR1WithMainGrid();
		
		// R1パネルの初期設定
		if (document.getElementById('r1_index_panel')) {
			document.getElementById('r1_index_panel').style.display = 'block';
		}
		
		// R1情報パネルの定期更新
		setInterval(updateInfoPanel, 1000); // 1秒ごとに情報を更新
		
		// メディア再生ボタンのイベントリスナー設定
		const playButton = document.querySelector("#playButton");
		const videoButton = document.querySelector("#videoButton");
		
		if (playButton) {
			playButton.addEventListener("click", function() {
				const media = document.querySelector("#ply_1 audio"); // or video
				if (media) {
					media.play();
				}
			});
		}
		
		if (videoButton) {
			videoButton.addEventListener("click", function() {
				const media = document.querySelector("#vid_2 video"); // or video
				if (media) {
					media.play();
				}
			});
		}
	});
		// overlay_bass背景エリアでのダブルクリック（センター呼び出し）
		document.querySelectorAll('#overlay_bass1, #overlay_bass2').forEach(overlay => {
			overlay.addEventListener("dblclick", (e) => {
				// ポップアップ要素以外をクリックした場合のみ
				if (e.target === overlay) {
					let popup = overlay.querySelector('.popup'); 
					if (popup) {
						// センターに移動
						popup.style.left = centerX + 'px';
						popup.style.top = centerY + 'px';
						
						// 視覚フィードバック
						document.querySelectorAll('.gp_mous').forEach(gp_mous => {
							gp_mous.innerHTML = "🎯";
						});
						document.getElementById("status_display").innerHTML = "Grid1[center_call] 🎯";
						
						// フィードバックをクリア
						setTimeout(() => {
							document.querySelectorAll('.gp_mous').forEach(gp_mous => {
								gp_mous.innerHTML = "　";
							});
						}, 1500);
					}
				}
			});
		}); 

		// グリップエリアのマウスダウンイベント
		document.querySelectorAll('.grip_lin').forEach(griip => {
			griip.addEventListener("mousedown", (e) => {
				if (overlay_bass && overlay_bass.style.display === "block") {
					let popup = overlay_bass.querySelector('.popup');
					if (popup) {
						// マウス座標初期化
						muse_x = e.clientX;
						muse_y = e.clientY;
						bak_clientx = muse_x;
						bak_clienty = muse_y;
						
						// ドラッグ開始時のポップアップ位置を保存
						let currentLeft = parseInt(popup.style.left) || 300;
						let currentTop = parseInt(popup.style.top) || 300;
						popup.dataset.dragStartLeft = currentLeft;
						popup.dataset.dragStartTop = currentTop;
						
						// グリップ状態フラグ設定
						griip_on_frag = true; 
						appNameRagFlag = true;
						
						// カウンター初期化
						coun_a = 0;
						coun_b = 1; // マウスダウン検出カウント
						c_nomal_lr = 0; // インターバル設定前は0
						dwbul_clikk_flag = false;
						
						// インターバルタイマー開始
						clearInterval(time1_id); // 既存タイマーがあれば停止
						time1_id = setInterval(intrval_tim1, TIMER_INTERVAL_MS);
						c_nomal_lr = 1; // インターバル設定時に1にする
						
						// ステータス表示更新
						document.getElementById("status_display").innerHTML = "Grid1[grip_start] 👍";
						
						// gp_mousエリアに視覚的フィードバック
						let gp_mous = griip.querySelector('.gp_mous');
						if (gp_mous) {
							gp_mous.innerHTML = "🔄";
						}
					} 
				}
			});
		});

		// 全域でのマウスアップ
		document.addEventListener("mouseup", (e) => {
			if (griip_on_frag) {
				// グリップ解放処理
				griip_on_frag = false;
				
				// ドラッグデータクリア
				if (overlay_bass) {
					let popup = overlay_bass.querySelector('.popup');
					if (popup) {
						delete popup.dataset.dragStartLeft;
						delete popup.dataset.dragStartTop;
						popup.style.color = ""; // 色をリセット 
					} 
				} 
				// ダブルクリック判定期間中（1.2秒以内）はマウスアップを無視 
				if (c_nomal_lr > 0 && c_nomal_lr <= 18 && coun_a <= 15) { 
					// 二回目のマウスアップかもしれないので、まずカウントのみ 
					if (appNameRagFlag && coun_b > 0) { 
						coun_b += 1; // マウスアップ検出 
						c_nomal_lr += 1; 
					} 
					// ダブルクリック時間内でのカウント表示 
					let current_clicks = Math.floor(coun_b / 2); 
					let wait_icon = ""; 
					if (current_clicks >= 1) { 
						// クリック数に応じた稲妻表示 
						wait_icon = "⚡".repeat(current_clicks) + "⏳"; 
						document.getElementById("status_display").innerHTML = `Grid1[waiting_${current_clicks}clicks] ${wait_icon}`; 
					} else { 
						// まだクリック未完了 
						wait_icon = "⏳"; 
						document.getElementById("status_display").innerHTML = "Grid1[waiting_click] ⏳"; 
					} 
					// 判定期間中は視覚フィードバック 
					document.querySelectorAll('.gp_mous').forEach(gp_mous => { 
						gp_mous.innerHTML = wait_icon; 
					}); 
					// appNameRagFlag は維持（ダブルクリック判定のため） 
					return; // マウスアップ処理を無視して終了 
				} 
				// ダブルクリック判定期間外の通常マウスアップ処理 
				let mouseup_count = 0; 
				if (appNameRagFlag && coun_b > 0) { 
					coun_b += 1; // マウスアップ検出 
					c_nomal_lr += 1; 
					mouseup_count = coun_b; 
				} 
				// イベント数に応じたアイコン表示 
				let icon_display = ""; 
				if (mouseup_count >= 2) { 
					// ２つ以上のイベント検出時：アイコンを２つ表示 
					icon_display = "👆👆++"; 
					document.getElementById("status_display").innerHTML = `Grid1[double_event] 👆👆++ (${mouseup_count})`; 
					
					// ダブルクリック検出時にレイヤー座標を自動設定
					autoSetLayerCoordinates(e);
					
				} else if (mouseup_count === 1) { 
					// 単一イベント 
					icon_display = "👆"; 
					document.getElementById("status_display").innerHTML = "Grid1[single_event] 👆"; 
				} else { 
					// イベントなし 
					icon_display = "🔚"; 
					document.getElementById("status_display").innerHTML = "Grid1[no_event] 🔚"; 
				} 
				// gp_mousエリアの視覚的フィードバック更新 
				document.querySelectorAll('.gp_mous').forEach(gp_mous => {
					gp_mous.innerHTML = icon_display; 
				}); 
				// 短時間後にappNameRagFlagをfalseに（ダブルクリック判定用） 
				setTimeout(() => { 
					if (!griip_on_frag) { 
						appNameRagFlag = false; 
					} 
				}, 100); 
			} 
		}); 

		// sample2.htmlから移植：マウスムーブでドラッグ処理 
		document.addEventListener("mousemove", (e) => { 
			if (griip_on_frag && overlay_bass && overlay_bass.style.display === "block") { 
				let popup = overlay_bass.querySelector('.popup'); 
				if (popup) { 
					// 現在のマウス座標 
					let current_muse_x = e.clientX; 
					let current_muse_y = e.clientY; 
					// 初期クリック位置からの移動量計算 
					let move_x = current_muse_x - bak_clientx; 
					let move_y = current_muse_y - bak_clienty; 
					// ドラッグ開始時のポップアップ位置を基準に新座標計算 
					let initialLeft = parseInt(popup.style.left) || 300; 
					let initialTop = parseInt(popup.style.top) || 300; 
					// マウスダウン時の位置を保存していなければ現在位置を使用 
					// マウスダウン時の位置を保存していなければ現在位置を使用
					if (!popup.dataset.dragStartLeft) {
						popup.dataset.dragStartLeft = initialLeft;
						popup.dataset.dragStartTop = initialTop;
					}

					let dragStartLeft = parseInt(popup.dataset.dragStartLeft);
					let dragStartTop = parseInt(popup.dataset.dragStartTop);

					// 新しい座標計算（ドラッグ開始位置 + 移動量）
					let newLeft = dragStartLeft + move_x;
					let newTop = dragStartTop + move_y;

					// 画面境界チェック
					if (newLeft < 0) newLeft = 0;
					if (newTop < 0) newTop = 0;
					if (newLeft > blawsar_width - pop_width) newLeft = blawsar_width - pop_width;
					if (newTop > blawsar_height - pop_height) newTop = blawsar_height - pop_height;

					// ポップアップ位置更新
					popup.style.left = `${newLeft}px`;
					popup.style.top = `${newTop}px`;
					popup.style.color = "blue";

					// 現在のマウス座標を保存
					muse_x = current_muse_x;
					muse_y = current_muse_y; 
				}
			}
		});
	// --- ここから追加 ---
	let layerBtnClickCount = 0;
	let lastLayerBtn = null;
	
	// 画面クリックで2回目の状態に遷移
	window.addEventListener('click', function() {
		if (layerBtnClickCount === 1 && lastLayerBtn) {
			handleLayerBtnClick(lastLayerBtn);
		}
	});
    // --- ここまで追加 ---

</script>
    </body>
</html>