<?php
use BcMath\Number;
?>
<!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 me_script='book5_new5b5_4.php' chenge neede.-->
	<!-- http://localhost/my_book/pack_in_5_php/book5_new5b5_4.php  ok-->
    <!-- 付属 ./pack_in_5_php/v5_seet1.css v0 v5_seet1.css?v=2025120301-->
    <!-- javascript まだなし。 html_5b2 ok--> 
	<!-- makig php this fail -->
	<title>book5_new</title>
<!-- 動いていたの動かなくなってる。配列要素が消えてたり。動かないのをコピーされてる? -->
<link rel="stylesheet" type="text/css" href="./v5_seet1.css?v=2025120301">
<style>
/* 追加のシート */

</style>
<!-- note: 
"C:\Apache2.2\htdocs\my_book\pack_in_5_php\master\rede_main.txt"
C:\Apache2.2\htdocs\my_book\pack_in_5_php\sample\
0 to 35
C:\Apache2.2\htdocs\my_book\pack_in_5_php\sample\maik\
maik to sample maik
"C:\Apache2.2\htdocs\my_book\pack_in_5_php\sample\0\0.txt"
1234567890
abcdefg to sample

"C:\Apache2.2\htdocs\my_book\pack_in_5_php\sample\3\30.txt"
1234567890
sample 30 to sample
abcdefg
-->
	<script>
    let me_script = "book5_new5b5_4.php";
    let  muse_on = true;
	let is_end_stator = false;
	let gloval_waking = ['allt_number=0','field_no=0', 'to_working=0','edit_number=5','table_field=0' ]; /* 実行状況 */	
	let layers = ['box_midol_L1', 'box_midol_L2', 'box_midol_L3', 'box_midol_L4', 'box_midol_L5', 'midol_workig_L5'];

	function set_layers() {
		return;
		// layers = ['box_midol_L1', 'box_midol_L2', 'box_midol_L3', 'box_midol_L4', 'box_midol_L5', 'midol_workig_L5'];
		layers = [layer1, layer2, layer3, layer4, layer5, layerWA];
	}
// 6レイヤー × 4枠 のサイズ（例：width, height）
let BOX_WIDTH = 880;     //  orignal 960 = 11 880px;
let BOX_HEIGHT = 560;    //  orignal 600 = 7  560px;
// resizabule box set
/* ここではhtmlがアクティブになっていないからcss設定はここでは無効
layer1.style.width = BOX_WIDTH + 'px';
layer1.style.height = BOX_HEIGHT + 'px';
layer2.style.width = BOX_WIDTH + 'px';
layer2.style.height = BOX_HEIGHT + 'px';
layer3.style.width = BOX_WIDTH + 'px';
layer3.style.height = BOX_HEIGHT + 'px';
layer4.style.width = BOX_WIDTH + 'px';
layer4.style.height = BOX_HEIGHT + 'px';
layer5.style.width = BOX_WIDTH + 'px';
layer5.style.height = BOX_HEIGHT + 'px';
layerWA.style.width = BOX_WIDTH + 'px';
layerWA.style.height = BOX_HEIGHT + 'px';
*/
let t_number = 0; // レイヤー番号 0=all 1=L1 ... 5=L5 6=WA
	/* layerSizes: ６レイヤー分の　イメージテーブル、テキストテーブルサイズ配列 */
let t_all = 0; // all表示フラグ 0=個別 1=all nomal L1 になる。
	//	let t_number = 0; // L1～L5用
//	let field_no = 0; // 4つ枠用
let LT_n_i_t = 0; // : 0 base=none/imge+text nomal : 1 image table : 2 text table

let layerSizes = []; // L1~L5 + WA に入れるイメージテーブルとtextテーブルのサイズ配列
  // 4枠: 左上, 右上, 左下, 右下 : width, height; tag imge1~4 tag text1~4
layerSizes[0] = [
	[BOX_WIDTH/2, BOX_HEIGHT/2], [BOX_WIDTH/2, BOX_HEIGHT/2], // imge saiz。
	[BOX_WIDTH/2, BOX_HEIGHT/2], [BOX_WIDTH/2, BOX_HEIGHT/2],
	[BOX_WIDTH/2, BOX_HEIGHT/2], [BOX_WIDTH/2, BOX_HEIGHT/2], // text saiz。
	[BOX_WIDTH/2, BOX_HEIGHT/2], [BOX_WIDTH/2, BOX_HEIGHT/2],
	["imag/mp4","2"],["3","4"],["text/audio","2"],["3","4"] ];  // imge1~4 tag text1~4 tag。
layerSizes[1] = [
	[BOX_WIDTH/2, BOX_HEIGHT/2], [BOX_WIDTH/2, BOX_HEIGHT/2],  
    [BOX_WIDTH/2, BOX_HEIGHT/2], [BOX_WIDTH/2, BOX_HEIGHT/2], 
    [BOX_WIDTH/2, BOX_HEIGHT/2], [BOX_WIDTH/2, BOX_HEIGHT/2], 	
	[BOX_WIDTH/2, BOX_HEIGHT/2], [BOX_WIDTH/2, BOX_HEIGHT/2], 
	[BOX_WIDTH/2, BOX_HEIGHT/2], [BOX_WIDTH/2, BOX_HEIGHT/2],
	["imag/mp4","2"],["3","4"],["text/audio","2"],["3","4"] ]; 
layerSizes[2] = [
	[BOX_WIDTH/2, BOX_HEIGHT/2], [BOX_WIDTH/2, BOX_HEIGHT/2], 
    [BOX_WIDTH/2, BOX_HEIGHT/2], [BOX_WIDTH/2, BOX_HEIGHT/2], 
    [BOX_WIDTH/2, BOX_HEIGHT/2], [BOX_WIDTH/2, BOX_HEIGHT/2], 
	[BOX_WIDTH/2, BOX_HEIGHT/2], [BOX_WIDTH/2, BOX_HEIGHT/2], 
	["imag/mp4","2"],["3","4"],["text/audio","2"],["3","4"] ];
layerSizes[3] = [
	[BOX_WIDTH/2, BOX_HEIGHT/2], [BOX_WIDTH/2, BOX_HEIGHT/2], 
    [BOX_WIDTH/2, BOX_HEIGHT/2], [BOX_WIDTH/2, BOX_HEIGHT/2], 
    [BOX_WIDTH/2, BOX_HEIGHT/2], [BOX_WIDTH/2, BOX_HEIGHT/2], 
	[BOX_WIDTH/2, BOX_HEIGHT/2], [BOX_WIDTH/2, BOX_HEIGHT/2], 
	["imag/mp4","2"],["3","4"],["text/audio","2"],["3","4"] ];
layerSizes[4] = [
	[BOX_WIDTH/2, BOX_HEIGHT/2], [BOX_WIDTH/2, BOX_HEIGHT/2],
    [BOX_WIDTH/2, BOX_HEIGHT/2], [BOX_WIDTH/2, BOX_HEIGHT/2], 
    [BOX_WIDTH/2, BOX_HEIGHT/2], [BOX_WIDTH/2, BOX_HEIGHT/2], 
	[BOX_WIDTH/2, BOX_HEIGHT/2], [BOX_WIDTH/2, BOX_HEIGHT/2], 
	["imag/mp4","2"],["3","4"],["text/audio","2"],["3","4"] ];
layerSizes[5] = [
	[BOX_WIDTH/2, BOX_HEIGHT/2], [BOX_WIDTH/2, BOX_HEIGHT/2],
    [BOX_WIDTH/2, BOX_HEIGHT/2], [BOX_WIDTH/2, BOX_HEIGHT/2], 
    [BOX_WIDTH/2, BOX_HEIGHT/2], [BOX_WIDTH/2, BOX_HEIGHT/2], 
	[BOX_WIDTH/2, BOX_HEIGHT/2], [BOX_WIDTH/2, BOX_HEIGHT/2], 
	["imag/mp4","2"],["3","4"],["text/audio","2"],["3","4"] ];

	/* Lx2_T_IT: ６レイヤー分の　イメージテーブル、テキストテーブル開始座標格納配列 */
let T_Offset_top = 0;
let T_Offset_left = 0;
let Lx2_T_IT = [
	T_Offset_top,T_Offset_left, T_Offset_top,T_Offset_left,   // table Image, Text開始座標　L1~L6
	T_Offset_top,T_Offset_left, T_Offset_top,T_Offset_left,
	T_Offset_top,T_Offset_left, T_Offset_top,T_Offset_left,
	T_Offset_top,T_Offset_left, T_Offset_top,T_Offset_left ];

let hold_L5_copy = 0; // L5内容保持フラグ 0=更新 1=保持
/* // 例：L2の3番目の枠のサイズをセット(image table)
layerSizes[1][1][0] = 320; // [width:320, height]
layerSizes[1][1][1] = 240; // [width, height:240]

// 例：L5の1番目の枠のサイズを取得 arr size[4][0] = [width(0), height(1)]
let size = layerSizes[4][0]; // [width, height] */
let tile_no_in = 8;//'8(; // レイアウトタイル番号入力用 0=dummy(レイヤーclouse) 1=single 2=2wbox 3=2Hbox 4=1/3w3 5=1/3H3 6=2hafeW1single 7=1single2Whafe 8=Quad(max)
let tile_no = 8; // レイアウトタイル番号 0=dummy(レイヤーclouse) 1=single 2=2wbox 3=2Hbox 4=1/3w3 5=1/3H3 6=2hafeW1single 7=1single2Whafe 8=Quad(max)
//  9 ~= max
let WL_vew = 0; // ワーキングレイヤービュー 0=all 1=image 1.0 =text 0 2=text image= 0.5 text=1.0
let tile_number0 = 8; // tilep_click5_cl用グローバル変数

	let arr_swich_button = [0, 0, 0, 0, 0, 0, 0];
	//let t_number = 0; // L1～L5用
	let field_no = 0; // 4つ枠用
	let field_select = 0;
	let arr_t_sel = ['<img src="image/damiy1.png" width="100%" height="100%" alt="Sample Image 1">',
					'<img src="image/damiy2.png" width="100%" height="100%" alt="Sample Image 2">',
					'<img src="image/damiy3.png" width="100%" height="100%" alt="Sample Image 3">',
					'<img src="image/damiy4.png" width="100%" height="100%" alt="Sample Image 4">'					
					];
	let x0 = 100; let y0 = 100;
	let arr_xy1 = [100, 100];
	let arr_xy2 = [200, 100];
	let arr_xy3 = [100, 540];
	let arr_xy4 = [200, 540];
	let arr_itag1_2 = ["", ""];
	let arr_itag3_4 = ["", ""];
	let arr_ttag1_2 = ["", ""];
	let arr_ttag3_4 = ["", ""];
	let but_last_push = 0;
	let imageFileCount = '';
	let audioFileCount = '';
	let videoFileCount = '';
	let revase = 0;
	let layers_m = '';
	let layers_mb = '';




	</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 id="Ran_all" onclick="Ran_all();">Ran All</button> <span id="Ran_all_span"> </span><br>
		<button id="Read_master" onclick="Read_master('0');">読み込み</button>
		<button id="popup1_btn1" onclick="showPopup1();">pop1表示</button>
		<input type="text" id="ukewatashi_fail" value="./sample/0/0.txt">
        <br>　2.2 saver　<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="show_I_Cell('fil1')">
				1<br>クリックで画像
			</td><td id="toptd_2" onclick="show_I_Cell('fil2')">
				2<br>クリックで画像
			</td></tr>				
			<tr><td id="toptd_3" onclick="show_I_Cell('fil3')">
				3<br>クリックで画像
			</td><td id="toptd_4" onclick="show_I_Cell('fil4')">
				4<br>クリックで画像
		</td></tr></table>
    </td><td>
		<p>　</p>
	</td><td width="540px">
		<!-- レイヤークイックコントロール -->
		<p class="box_p1">
		<button id="Lbtn_0" onclick="tog_l_i('all');">All</button>
		<button id="Lbtn_1" onclick="tog_l_i('L1');">L1</button>
		<button id="Lbtn_2" onclick="tog_l_i('L2');">L2</button>
		<button id="Lbtn_3" onclick="tog_l_i('L3');">L3</button>
		<button id="Lbtn_4" onclick="tog_l_i('L4');">L4</button>
		<button id="Lbtn_5" onclick="tog_l_i('L5');">L5</button>
		<button id="Lbtn_6" onclick="tog_l_i('WA');">WA</button>
		x: <input type="text" id="img_x_pos" value="100" size="2" maxlength="5">
		y: <input type="text" id="img_y_pos" value="100" size="2" maxlength="5">
		<button class="layer-btn" onclick="inget_xy();">Get</button><!-- 実は'_'スプリットでL?=が分かる -->
        <span>　</span><button onclick="show_info();">x</button>
    </p><p class="box_p1">
        -><button id="Lta_0" onclick="I_lot();"><-></button>
		1:<button id="Lta_1" onclick="show_I_Cell('fil1');">100_100</button><!-- separator"_" -->
		2:<button id="Lta_2" onclick="show_I_Cell('fil2');">200_100</button>
		3:<button id="Lta_3" onclick="show_I_Cell('fil3');">100_540</button>
		4:<button id="Lta_4" onclick="show_I_Cell('fil4');">200_540</button>
		CR<button onclick="tilep_click5_cl(tile_number0);">CL</button>
		　write <button onclick="tensya();">W</button>
	</p>
	</td></tr></table>
<script>
    let te_field_noin = 'fil1'; // 初期値
function I_lot() {
	let lt_nit = LT_n_i_t + 1;
	if (lt_nit > 2){lt_nit = 0;}
	if (lt_nit == 0){
		document.getElementById('L6_T_Image').style.opacity = 1.0;
		document.getElementById('L6_T_Text').style.opacity = 1.0;
	} else if (lt_nit == 1){
		document.getElementById('L6_T_Image').style.opacity = 1.0;
		document.getElementById('L6_T_Text').style.opacity = 0.0;
	} else if (lt_nit == 2){
		document.getElementById('L6_T_Image').style.opacity = 0.5;
		document.getElementById('L6_T_Text').style.opacity = 1.0;
	}
	LT_n_i_t = lt_nit; // 0~2
	let tmp_tile_no_in = LT_n_i_t; // 現在のLT_n_i_tを渡す
	show_I_Cell_back(te_field_noin, tmp_tile_no_in); // te_field_noinはグローバル
	document.getElementById('Lta_0').innerText = '<' + LT_n_i_t + '>';
	WL_vew = LT_n_i_t; // ワーキングレイヤービュー 0=all 1=image 1.0 =text 0 2=text image= 0.5 text=1.0
}
function show_I_Cell_back(te_field_noin, tile_no) {   //popupからも来る。
	tile_no = Number(tile_no);
	let tmp_field_no = te_field_noin; // グローバルに保存してある。
	show_I_Cell(tmp_field_no);
}
function show_I_Cell(te_field_no) {
    te_field_noin = te_field_no; // グローバルに保存
	// 0,0 (L1, fil1) 0 = image+text 1=image only 2=text only　tile_no = 8
	let tail_color1 = '#777';
	let tail_color2 = '#777';
	let tail_color3 = '#777';
	let tail_color4 = '#777';
	if (te_field_no == 'fil1'){field_no = 0;}
	if (te_field_no == 'fil2'){field_no = 1;}
	if (te_field_no == 'fil3'){field_no = 2;}
	if (te_field_no == 'fil4'){field_no = 3;}
	if (tile_no > 0 && tile_no < 9){tail_color1 = '#fff'; }
	if (tile_no > 1 && tile_no < 9){tail_color2 = '#fff'; }
	if (tile_no > 2 && tile_no < 9){tail_color3 = '#fff'; }
	if (tile_no > 7 && tile_no < 9){tail_color4 = '#fff'; }

	field_select = field_no;
	if (document.getElementById('Lbtn_0').style.backgroundColor == '#ff0'){
		gloval_waking[0] = 'allt_number=0';
		gloval_waking[1] = 'field_no=all';
	}else{
		gloval_waking[0] = 't_number='+ t_number;
		gloval_waking[1] = 'field_no='+ field_no;
	}
	gloval_waking[4] = 'table_field='+ field_no;
	alert('showImageInCell called with field_no: ' + field_no + ', tile_no: ' + tile_no + ', LT_n_i_t: ' + LT_n_i_t + ', t_number: ' + t_number);
    arr_xy1[0] = layerSizes[t_number][0][0];
	arr_xy1[1] = layerSizes[t_number][0][1]; // 変えたのが反映してくる。
	arr_xy2[0] = layerSizes[t_number][1][0];
	arr_xy2[1] = layerSizes[t_number][1][1];
	arr_xy3[0] = layerSizes[t_number][2][0];
	arr_xy3[1] = layerSizes[t_number][2][1];
	arr_xy4[0] = layerSizes[t_number][3][0];
	arr_xy4[1] = layerSizes[t_number][3][1];
    arr_itag1_2 = ["", ""];
	arr_itag3_4 = ["", ""];
    arr_ttag1_2 = ["", ""];
    arr_ttag3_4 = ["", ""];
	inget_xy(); // 座標取り込み
	if (field_no == 0){
		if (LT_n_i_t == 0){
			document.getElementById('toptd_1').style.backgroundColor = 'rgba(140, 140, 245, 1)';
		} else if (LT_n_i_t == 1){
			document.getElementById('toptd_1').style.backgroundColor = 'rgba(140, 245, 140, 1)';
		} else if (LT_n_i_t == 2){
			document.getElementById('toptd_1').style.backgroundColor = 'rgba(245, 140, 140, 1)';
		} else {
			document.getElementById('toptd_1').style.backgroundColor = tail_color1;
		}
		    document.getElementById('toptd_2').style.backgroundColor = tail_color2;
 		    document.getElementById('toptd_3').style.backgroundColor = tail_color3;
 		    document.getElementById('toptd_4').style.backgroundColor = tail_color4;
  		// ここで画像を表示するコードを追加
		document.getElementById("toptd_1").innerHTML = '1<br>' + arr_xy1[0] + '_' + arr_xy1[1];//1<br>クリックで画像
		document.getElementById("toptd_2").innerHTML = '2<br>' + arr_xy2[0] + '_' + arr_xy2[1];
		document.getElementById("toptd_3").innerHTML = '3<br>' + arr_xy3[0] + '_' + arr_xy3[1];
		document.getElementById("toptd_4").innerHTML = '4<br>' + arr_xy4[0] + '_' + arr_xy4[1];
		if (LT_n_i_t == 0){
			document.getElementById("Lta_1").style.backgroundColor = 'rgba(140, 140, 245, 1)';
		} else if (LT_n_i_t == 1){
			document.getElementById("Lta_1").style.backgroundColor = 'rgba(140, 245, 140, 1)';
		} else if (LT_n_i_t == 2){
			document.getElementById("Lta_1").style.backgroundColor = 'rgba(245, 140, 140, 1)';
		}		
			document.getElementById("Lta_2").style.backgroundColor = '#fff';

			document.getElementById("Lta_3").style.backgroundColor = '#fff';

			document.getElementById("Lta_4").style.backgroundColor = '#fff';	
			document.getElementById("Lta_1").innerHTML = arr_xy1[0] + '_' + arr_xy1[1];
			document.getElementById("Lta_2").innerHTML = arr_xy2[0] + '_' + arr_xy2[1];
		document.getElementById("Lta_3").innerHTML = arr_xy3[0] + '_' + arr_xy3[1];
		document.getElementById("Lta_4").innerHTML = arr_xy4[0] + '_' + arr_xy4[1];
	}
	if (field_no == 1){
		document.getElementById('toptd_1').style.backgroundColor = tail_color1;
		if (LT_n_i_t == 0){
		    document.getElementById('toptd_2').style.backgroundColor = 'rgba(140, 140, 245, 1)';
		} else if (LT_n_i_t == 1){
		    document.getElementById('toptd_2').style.backgroundColor = 'rgba(140, 245, 140, 1)';
		} else if (LT_n_i_t == 2){
		    document.getElementById('toptd_2').style.backgroundColor = 'rgba(245, 140, 140, 1)';
		} else {
		    document.getElementById('toptd_2').style.backgroundColor = tail_color2;
		}
 		document.getElementById('toptd_3').style.backgroundColor = tail_color3;
 		document.getElementById('toptd_4').style.backgroundColor = tail_color4;
		
		// ここで画像を表示するコードを追加
		document.getElementById("toptd_1").innerHTML = '1<br>' + arr_xy1[0] + '_' + arr_xy1[1];//1<br>クリックで画像
		document.getElementById("toptd_2").innerHTML = '2<br>' + arr_xy2[0] + '_' + arr_xy2[1];
		document.getElementById("toptd_3").innerHTML = '3<br>' + arr_xy3[0] + '_' + arr_xy3[1];
		document.getElementById("toptd_4").innerHTML = '4<br>' + arr_xy4[0] + '_' + arr_xy4[1];
		document.getElementById("Lta_1").style.backgroundColor = '#fff';
		
		if (LT_n_i_t == 0){
			document.getElementById("Lta_2").style.backgroundColor = 'rgba(140, 140, 245, 1)';
		} else if (LT_n_i_t == 1){
			document.getElementById("Lta_2").style.backgroundColor = 'rgba(140, 245, 140, 1)';
		} else if (LT_n_i_t == 2){
			document.getElementById("Lta_2").style.backgroundColor = 'rgba(245, 140, 140, 1)';
		}
		document.getElementById("Lta_3").style.backgroundColor = '#fff';
		document.getElementById("Lta_4").style.backgroundColor = '#fff';	
		document.getElementById("Lta_1").innerHTML = arr_xy1[0] + '_' + arr_xy1[1];
		document.getElementById("Lta_2").innerHTML = arr_xy2[0] + '_' + arr_xy2[1];
		document.getElementById("Lta_3").innerHTML = arr_xy3[0] + '_' + arr_xy3[1];
		document.getElementById("Lta_4").innerHTML = arr_xy4[0] + '_' + arr_xy4[1];
	}
	if (field_no == 2){
		document.getElementById('toptd_1').style.backgroundColor = tail_color1;
		document.getElementById('toptd_2').style.backgroundColor = tail_color2;
		if (LT_n_i_t == 0){
			document.getElementById('toptd_3').style.backgroundColor = 'rgba(140, 140, 245, 1)';
		} else if (LT_n_i_t == 1){
			document.getElementById('toptd_3').style.backgroundColor = 'rgba(140, 245, 140, 1)';
		} else if (LT_n_i_t == 2){
			document.getElementById('toptd_3').style.backgroundColor = 'rgba(245, 140, 140, 1)';
		} else {
			document.getElementById('toptd_3').style.backgroundColor = tail_color3;
		}
 		document.getElementById('toptd_4').style.backgroundColor = tail_color4;

		// ここで画像を表示するコードを追加
		document.getElementById("toptd_1").innerText = '1<br>' + arr_xy1[0] + '_' + arr_xy1[1];//1<br>クリックで画像
		document.getElementById("toptd_2").innerHTML = '2<br>' + arr_xy2[0] + '_' + arr_xy2[1];
		document.getElementById("toptd_3").innerHTML = '3<br>' + arr_xy3[0] + '_' + arr_xy3[1];
		document.getElementById("toptd_4").innerHTML = '4<br>' + arr_xy4[0] + '_' + arr_xy4[1];
		document.getElementById("Lta_1").style.backgroundColor = '#fff';
		document.getElementById("Lta_2").style.backgroundColor = '#fff';
		if (LT_n_i_t == 0){
			document.getElementById("Lta_3").style.backgroundColor = 'rgba(140, 140, 245, 1)';
		} else if (LT_n_i_t == 1){
			document.getElementById("Lta_3").style.backgroundColor = 'rgba(140, 245, 140, 1)';
		} else if (LT_n_i_t == 2){
			document.getElementById("Lta_3").style.backgroundColor = 'rgba(245, 140, 140, 1)';
		}
		document.getElementById("Lta_4").style.backgroundColor = '#fff';
		document.getElementById("Lta_1").innerHTML = arr_xy1[0] + '_' + arr_xy1[1];
		document.getElementById("Lta_2").innerHTML = arr_xy2[0] + '_' + arr_xy2[1];
		document.getElementById("Lta_3").innerHTML = arr_xy3[0] + '_' + arr_xy3[1];
		document.getElementById("Lta_4").innerHTML = arr_xy4[0] + '_' + arr_xy4[1];
	}
	if (field_no == 3){
		document.getElementById('toptd_1').style.backgroundColor = tail_color1;
		document.getElementById('toptd_2').style.backgroundColor = tail_color2;
		document.getElementById('toptd_3').style.backgroundColor = tail_color3;
 		if (LT_n_i_t == 0){
			document.getElementById('toptd_4').style.backgroundColor = 'rgba(140, 140, 245, 1)';
		} else if (LT_n_i_t == 1){
			document.getElementById('toptd_4').style.backgroundColor = 'rgba(140, 245, 140, 1)';
		} else if (LT_n_i_t == 2){
			document.getElementById('toptd_4').style.backgroundColor = 'rgba(245, 140, 140, 1)';
		}else {
			document.getElementById('toptd_4').style.backgroundColor = tail_color4;
		}

		document.getElementById("toptd_1").innerHTML = '1<br>' + arr_xy1[0] + '_' + arr_xy1[1];//1<br>クリックで画像
		document.getElementById("toptd_2").innerHTML = '2<br>' + arr_xy2[0] + '_' + arr_xy2[1];
		document.getElementById("toptd_3").innerHTML = '3<br>' + arr_xy3[0] + '_' + arr_xy3[1];
		document.getElementById("toptd_4").innerHTML = '4<br>' + arr_xy4[0] + '_' + arr_xy4[1];
		document.getElementById("Lta_1").style.backgroundColor = '#fff';
		document.getElementById("Lta_2").style.backgroundColor = '#fff';
		document.getElementById("Lta_3").style.backgroundColor = '#fff';
		if (LT_n_i_t == 0){
			document.getElementById("Lta_4").style.backgroundColor = 'rgba(140, 140, 245, 1)';
		} else if (LT_n_i_t == 1){
			document.getElementById("Lta_4").style.backgroundColor = 'rgba(140, 245, 140, 1)';
		} else if (LT_n_i_t == 2){
			document.getElementById("Lta_4").style.backgroundColor = 'rgba(245, 140, 140, 1)';
		}
		document.getElementById("Lta_1").innerHTML = arr_xy1[0] + '_' + arr_xy1[1];
		document.getElementById("Lta_2").innerHTML = arr_xy2[0] + '_' + arr_xy2[1];
		document.getElementById("Lta_3").innerHTML = arr_xy3[0] + '_' + arr_xy3[1];
		document.getElementById("Lta_4").innerHTML = arr_xy4[0] + '_' + arr_xy4[1];
	}
}


let val_xs = '';
let val_ys = '';
let val_x = 0;
let val_y = 0;
function inget_xy() {
	val_xs = document.getElementById('img_x_pos').value;
	val_ys = document.getElementById('img_y_pos').value;
	alert('inget_xy called with input values: ' + val_xs + ', ' + val_ys);	
	val_xs = val_xs.replace(/[\-]?[^0-9]?|[\.]/g, ''); // - 消す12 .78消す -a1b2 -> 12
	val_ys = val_ys.replace(/[\-]?[^0-9]?|[\.]/g, ''); // - 消す12 .78消す 空'' -> 0
	document.getElementById("img_x_pos").value = val_xs; // 入力フィールドを更新
	document.getElementById("img_y_pos").value = val_ys; // 入力フィールドを更新

	val_y = Number(val_ys);
	alert('inget_xy called with value: ' + val_x + ', ' + val_y);
	if (val_x == '' || Number.isFinite(val_x) == false) {
		val_x = 0;
	} else {
		// 正の整数に制限
		val_x = Math.abs(Math.floor(val_x));
		// 小数点があったら切り捨てる pxで出すから
		val_x = Math.floor(val_x);
		val_x = Math.min(val_x, BOX_WIDTH); // 最大値制限
	}
	if (val_y == '' || Number.isFinite(val_y) == false) {
		val_y = 0;
	} else {
		// 正の整数に制限
		val_y = Math.abs(Math.floor(val_y));
		// 小数点があったら切り捨てる
		val_y = Math.floor(val_y);
		val_y = Math.min(val_y, BOX_HEIGHT); // 最大値制限
	}
	// return (x0, y0); このルーチンでグローバルx0,y0を更新する
	if (field_no == 0){
		arr_xy1[0] = val_x;
		arr_xy1[1] = val_y;
	}
	if (field_no == 1){
		arr_xy2[0] = val_x;
		arr_xy2[1] = val_y;
	}
	if (field_no == 2){
		arr_xy3[0] = val_x;
		arr_xy3[1] = val_y;
	}
	if (field_no == 3){
		arr_xy4[0] = val_x;
		arr_xy4[1] = val_y;
	}
	x0 = val_x;
	y0 = val_y;
} 


function show_info() {
    if (mousenavi.style.display == 'none') {
        muse_on = true;
        mousenavi.style.display = 'block';
    } else {
        muse_on = false;
        mousenavi.style.display = 'none';
    }
}

</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 id="L1_T_Image"><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 id="L1_T_Text"><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 id="L2_T_Image"><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 id="L2_T_Text"><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 id="L3_T_Image"><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 id="L3_T_Text"><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 id="L4_T_Image"><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 id="L4_T_Text"><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 id="L5_T_Image"><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 id="L5_T_Text"><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">
	<div id="L6_T_Image"><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></table>
	</div>
	<div id="L6_T_Text"><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></table>
	</div>
	</div>
</div><!-- midol end -->
	<!-- end midol left -->
	 <script>
	// 初期表示設定 再定義設定
	let layer1 = document.getElementById(layers[0]);
	let layer2 = document.getElementById(layers[1]);
	let layer3 = document.getElementById(layers[2]);
	let layer4 = document.getElementById(layers[3]);
	let layer5 = document.getElementById(layers[4]);
	let layerWA = document.getElementById(layers[5]);
	layers = [layer1, layer2, layer3, layer4, layer5, layerWA];

	layer1.style.width = BOX_WIDTH + 'px';
	layer1.style.height = BOX_HEIGHT + 'px';
	layer2.style.width = BOX_WIDTH + 'px';
	layer2.style.height = BOX_HEIGHT + 'px';
	layer3.style.width = BOX_WIDTH + 'px';
	layer3.style.height = BOX_HEIGHT + 'px';
	layer4.style.width = BOX_WIDTH + 'px';
	layer4.style.height = BOX_HEIGHT + 'px';
	layer5.style.width = BOX_WIDTH + 'px';
	layer5.style.height = BOX_HEIGHT + 'px';
	layerWA.style.width = BOX_WIDTH + 'px';
	layerWA.style.height = BOX_HEIGHT + 'px';

	document.getElementById('L6_T_Image').style.opacity = 1.0;
	document.getElementById('L6_T_Text').style.opacity = 1.0;
	
	/* R の位置調整 効かない　シート直接編集リセットスタート
	let R_style_left = BOX_WIDTH + 20; // boxの幅 + マージン20px
	let R_BOX_RIGHT = R_style_left;
	document.getElementById('#box_midol_R1').style.left = R_style_left + 'px';
 	*/
	function tog_l_i(te_number) {
	// te_number: 'all', 'L1', 'L2', 'L3', 'L4', 'L5', 'WA'
	// but_last_push 1~5 only 6=WA copy back no.


// 考え直しが必要 /////////////////////////////////////////////////

	if (is_end_stator != true) {
		alert('Layer toggle disabled at end state.');
		return;
	}
	if (te_number == 'all'){t_number = 0; t_all = 1;}
	if (te_number == 'L1'){t_number = 0;}
	if (te_number == 'L2'){t_number = 1;}
	if (te_number == 'L3'){t_number = 2;}
	if (te_number == 'L4'){t_number = 3;}
	if (te_number == 'L5'){t_number = 4;}
	if (te_number == 'WA'){t_number = 5;}
	if (t_number >  0 && t_number < 6) {
		but_last_push = t_number; // L1~5
	} else {
		but_last_push = 6; // WA L6
	}
	alert('01 tog_L_Info called with t_number: ' + t_number);
	revase = arr_swich_button[t_number];	
	if (revase == 0) {
		arr_swich_button[t_number] = 1;
		alert('02 Setting '+ t_number + ' arr_swich_button[' + t_number + '] to 1' + ' is ' + arr_swich_button[t_number]);
		revase = 1;  // push on next on = off
	} else {
		arr_swich_button[t_number] = 0;
		revase = 0;
	}
	if (t_number == 0) {		
		but_last_push = t_number;
		// 全てのレイヤーを表示
		alert('03 Showing all layers' + t_number + ', state: ' + arr_swich_button[t_number]);
		if (arr_swich_button[0] == 1) {
			document.getElementById('Lbtn_0').style.backgroundColor = '#ff0';
			for (let i =1; i <=5; i++) {
				document.getElementById(`Lbtn_${i}`).style.backgroundColor = '#99f';
				layers[i-1].style.display = 'block';
				layers[i-1].style.backgroundColor = 'transparent';
			}	
			arr_swich_button[6] = 0;
			document.getElementById('Lbtn_6').style.backgroundColor = '#999';
			layers[5].style.backgroundColor = 'rgba(128, 128, 128, 0.3)';		
			but_last_push = 0;
			t_number = 0; // All時はt_number=0
		}else{
			document.getElementById('Lbtn_0').style.backgroundColor = '#999';
			tensya();
			arr_swich_button[6] = 0;
			but_last_push = 6;
		}
	} else if (t_number != 0 || arr_swich_button[t_number] == 0) {
		document.getElementById('Lbtn_0').style.backgroundColor = '#999';
		arr_swich_button[0] = 0;
	}
	alert('04 Setting '+ t_number + ' arr_swich_button[' + t_number + '] to 1' + ' is ' + arr_swich_button[t_number]);
		
	if (t_number > 0 && t_number < 6 && arr_swich_button[t_number] == 1) {	
		// L1~5レイヤーを表示		
		layers[t_number - 1].style.display = 'block';
		if (t_number == 1){
		arr_xy1[0] = layerSizes[0][0][0];arr_xy1[1] = layerSizes[0][0][1]; // 変えたのが反映してくる。
		arr_xy2[0] = layerSizes[0][1][0];arr_xy2[1] = layerSizes[0][1][1];
		arr_xy3[0] = layerSizes[0][2][0];arr_xy3[1] = layerSizes[0][2][1];
		arr_xy4[0] = layerSizes[0][3][0];arr_xy4[1] = layerSizes[0][3][1];
		if (hold_L5_copy != 1)
			arr_itag1_2[0] = layerSizes[0][4][0];arr_itag3_4[1] = layerSizes[0][4][1];
			arr_ttag1_2[0] = layerSizes[0][5][0];arr_ttag3_4[1] = layerSizes[0][5][1];
		}
		if (t_number == 2){
		arr_xy1[0] = layerSizes[1][0][0];arr_xy1[1] = layerSizes[1][0][1];
		arr_xy2[0] = layerSizes[1][1][0];arr_xy2[1] = layerSizes[1][1][1];
		arr_xy3[0] = layerSizes[1][2][0];arr_xy3[1] = layerSizes[1][2][1];
		arr_xy4[0] = layerSizes[1][3][0];arr_xy4[1] = layerSizes[1][3][1];
		if (hold_L5_copy != 1){
			arr_itag1_2[0] = layerSizes[1][4][0];arr_itag3_4[1] = layerSizes[1][4][1];
			arr_ttag1_2[0] = layerSizes[1][5][0];arr_ttag3_4[1] = layerSizes[1][5][1];
		}
		}
		if (t_number == 3){
		arr_xy1[0] = layerSizes[2][0][0];arr_xy1[1] = layerSizes[2][0][1];
		arr_xy2[0] = layerSizes[2][1][0];arr_xy2[1] = layerSizes[2][1][1];
		arr_xy3[0] = layerSizes[2][2][0];arr_xy3[1] = layerSizes[2][2][1];
		arr_xy4[0] = layerSizes[2][3][0];arr_xy4[1] = layerSizes[2][3][1];
		if (hold_L5_copy != 1){
			arr_itag1_2[0] = layerSizes[2][4][0];arr_itag3_4[1] = layerSizes[2][4][1];
			arr_ttag1_2[0] = layerSizes[2][5][0];arr_ttag3_4[1] = layerSizes[2][5][1];
		}
	}
		if (t_number == 4){
		arr_xy1[0] = layerSizes[3][0][0];arr_xy1[1] = layerSizes[3][0][1];
		arr_xy2[0] = layerSizes[3][1][0];arr_xy2[1] = layerSizes[3][1][1];
		arr_xy3[0] = layerSizes[3][2][0];arr_xy3[1] = layerSizes[3][2][1];
		arr_xy4[0] = layerSizes[3][3][0];arr_xy4[1] = layerSizes[3][3][1];
		if (hold_L5_copy != 1){
			arr_itag1_2[0] = layerSizes[3][4][0];arr_itag3_4[1] = layerSizes[3][4][1];
			arr_ttag1_2[0] = layerSizes[3][5][0];arr_ttag3_4[1] = layerSizes[3][5][1];
		}
	}
		if (t_number == 5){
		arr_xy1[0] = layerSizes[4][0][0];arr_xy1[1] = layerSizes[4][0][1];
		arr_xy2[0] = layerSizes[4][1][0];arr_xy2[1] = layerSizes[4][1][1];
		arr_xy3[0] = layerSizes[4][2][0];arr_xy3[1] = layerSizes[4][2][1];
		arr_xy4[0] = layerSizes[4][3][0];arr_xy4[1] = layerSizes[4][3][1];
		if (hold_L5_copy != 1)
			arr_itag1_2[0] = layerSizes[0][4][0];arr_itag3_4[1] = layerSizes[0][4][1];
			arr_ttag1_2[0] = layerSizes[0][5][0];arr_ttag3_4[1] = layerSizes[0][5][1];
		}
	} else if (t_number == 6 && arr_swich_button[6] == 1) {
		// WAレイヤーを表示

		// L6(5) は上書きされていく最後が最後に残る。
		layerSizes[5][0][0] = layerSizes[t_number][0][0];
		layerSizes[5][0][1] = layerSizes[t_number][0][1];
		layerSizes[5][1][0] = layerSizes[t_number][1][0];
		layerSizes[5][1][1] = layerSizes[t_number][1][1];
		layerSizes[5][2][0] = layerSizes[t_number][2][0];
		layerSizes[5][2][1] = layerSizes[t_number][2][1];
		layerSizes[5][3][0] = layerSizes[t_number][3][0];
		layerSizes[5][3][1] = layerSizes[t_number][3][1];
		layerSizes[5][4][0] = layerSizes[t_number][4][0];
		layerSizes[5][4][1] = layerSizes[t_number][4][1];
		layerSizes[5][5][0] = layerSizes[t_number][5][0];
		layerSizes[5][5][1] = layerSizes[t_number][5][1];
		layerSizes[5][6][0] = layerSizes[t_number][6][0];
		layerSizes[5][6][1] = layerSizes[t_number][6][1];

		alert('05 Setting '+ t_number);	

		// L1~5レイヤーを表示		

		layers[t_number - 1].style.backgroundColor = 'transparent';
		layers_m = layers[t_number - 1].innerHTML;
		alert('0501 layers_m length: ' + layers_m.length); 
		layers[5].style.display = 'block';
		alert('0502 Setting WA layer display to block');// top eria put scope not L eria.
		if (hold_L5_copy != 1) {
			//layers[5].innerHTML = ''; //working L5クリア
			// テーブルを消さず透明にする。
			alert('0503 layers_mb length: ' + layers_mb.length);
			layers_mb = ''; //クリア
			layers_mb = layers_m; // bak が出来るが
			alert('0504 layers_mb updated length: ' + layers_mb.length);
			layers[5].innerHTML = layers_mb; //working L5へコピー
		} else {
			alert('Hold L5 copy active, not updating WA layer content.');
		}
		alert('0505 layers[5] innerHTML set, length: ' + layers[5].innerHTML.length);
		layers[5].style.backgroundColor = 'rgba(128, 128, 128, 0.3)';
	} 
	alert('06 Setting '+ t_number + ' arr_swich_button[' + t_number + '] to ' + arr_swich_button[t_number] + ' is ' + arr_swich_button[t_number]);

	if (t_number >= 1 && t_number < 6) {
		alert('Setting '+ t_number + ' '+ arr_swich_button[t_number] );
		for (let i = 1; i < 6; i++) {
			if (i == t_number) {							
				if (arr_swich_button[i] == 1) {

					document.getElementById(`Lbtn_${i}`).style.backgroundColor = '#ff0';			
				} else {
					document.getElementById(`Lbtn_${i}`).style.backgroundColor = '#999';			
				}
			} else {
				arr_swich_button[i] = 0;
				document.getElementById(`Lbtn_${i}`).style.backgroundColor = '#999';
			}
		}
	}
	if (t_number == 6 && arr_swich_button[6] == 1) {
		// WAレイヤーを表示
		// 戻すbut_last_push は　keeping.
		document.getElementById('Lbtn_6').style.backgroundColor = '#ff0';
		gloval_waking[3] = 'edit_number=' + but_last_push;
		layers[5].style.backgroundColor = 'rgba(128, 128, 128, 0.3)';
	} else if (t_number == 6 && arr_swich_button[6] == 0) {
		// WAレイヤーを非表示
		tensya();
	}
	gloval_waking[2] = 'to_working=' + t_number;
	alert('07 tog_L_Info completed with to_working: ' + gloval_waking[2]);
}

function tensya() {   // write　button to working L5
	alert('tensya called');
	if (but_last_push == 0 || but_last_push == 6) {
		alert('No layer selected to transfer from.');
		return;
	}
	if (t_number == 5){ // 最後に選択されたL1~5にL5から更新　サイズもコピー
		layerSizes[but_last_push][0][0] = layerSizes[5][0][arr_xy1[0]]; // t i xy
		layerSizes[but_last_push][0][1] = layerSizes[5][0][arr_xy1[1]]; // t t xy
		layerSizes[but_last_push][1][0] = layerSizes[5][1][arr_xy2[0]];
		layerSizes[but_last_push][1][1] = layerSizes[5][1][arr_xy2[1]]; 
		layerSizes[but_last_push][2][0] = layerSizes[5][2][arr_xy3[0]];
		layerSizes[but_last_push][2][1] = layerSizes[5][2][arr_xy3[1]]; 
		layerSizes[but_last_push][2][2] = layerSizes[5][2][arr_xy3[2]];
		layerSizes[but_last_push][3][0] = layerSizes[5][3][arr_xy4[0]];
		layerSizes[but_last_push][3][1] = layerSizes[5][3][arr_xy4[1]]; 
		layerSizes[but_last_push][4][0] = layerSizes[5][4][arr_it1[0]];
		layerSizes[but_last_push][4][1] = layerSizes[5][4][arr_it1[1]];
		layerSizes[but_last_push][5][0] = layerSizes[5][5][arr_tt1[0]];
		layerSizes[but_last_push][5][1] = layerSizes[5][5][arr_tt1[1]];
		alert('Layer sizes copied from WA to L' + but_last_push);
		// ディスプレーワーク
	}
	layers[but_last_push - 1].style.display = 'block';
	layers_m = layers[5].innerHTML; 
	layers[but_last_push - 1].innerHTML = layers_m; //working L5へコピー
	//layers[5].innerHTML = ''; //working L5クリア
	//document.getElementById('L6_T_Image').style.opacity = 0;
	//document.getElementById('L6_T_Text').style.opacity = 0;
	gloval_waking[3] = 'edit_number=5';
	arr_swich_button[6] = 0;
	t_number = 5;
	document.getElementById('Lbtn_6').style.backgroundColor = '#55F'; // 転写済み。
	return;
}
function is_stato_set_top() {
	is_end_stator = true;
	alert('is_end_stator set to true');
	val_xs = BOX_WIDTH / 2;
	val_ys = BOX_HEIGHT / 2;	
	document.getElementById('img_x_pos').value = val_xs;
	document.getElementById('img_y_pos').value = val_ys;

	tog_l_i('all');         // Allレイヤー表示
	show_I_Cell('fil1');    // 場所1選択
	getarrs_get();		   // 配列取得
	// 初期位置セット task_step_1(0, 0); // all set step 0: no set ok; step_no=1~5 no_no=1~4
}

function tilep_click5_cl(tile_number) {
	document.getElementById('L6_T_Image').style.opacity = 1.0;
	document.getElementById('L6_T_Text').style.opacity = 1.0;
	alert('tilep_click5_cl called with tile_no: ' + tile_number);
						// image sizes
						layerSizes[5][0][0] = 'null'; // width
						layerSizes[5][0][1] = 'null'; // height
						layerSizes[5][1][0] = 'null'; // width
						layerSizes[5][1][1] = 'null'; // height
						layerSizes[5][2][0] = 'null'; // width
						layerSizes[5][2][1] = 'null'; // height
						layerSizes[5][3][0] = 'null'; // width
						layerSizes[5][3][1] = 'null'; // height
						// box image and text names
						layerSizes[5][4][0] = 'null'; // width
						layerSizes[5][4][1] = 'null'; // height
						layerSizes[5][5][0] = 'null'; // width
						layerSizes[5][5][1] = 'null'; // height
						layerSizes[5][6][0] = 'null'; // width
						layerSizes[5][6][1] = 'null'; // height
						layerSizes[5][7][0] = 'null'; // width
						layerSizes[5][7][1] = 'null'; // height
						// box_i_name
						layerSizes[5][8][0] = '';
						layerSizes[5][8][1] = '';
						layerSizes[5][9][0] = '';
						layerSizes[5][9][1] = '';
						layerSizes[5][10][0] = '';
						layerSizes[5][10][1] = '';
						layerSizes[5][11][0] = '';
						layerSizes[5][11][1] = '';
						switch (tile_no) {
							case 0: // clear all
								tilep_clic_show(tile_no);
								return;
								break;
							case 1: // 1box
								// image
								layerSizes[5][0][0] = BOX_WIDTH; // width
								layerSizes[5][0][1] = BOX_HEIGHT; // height
								//text
								layerSizes[5][4][0] = BOX_WIDTH; // width
								layerSizes[5][4][1] = BOX_HEIGHT; // height
								// box image and text names
								layerSizes[5][8][0] = `<img src="./sys_img/damiy0.png" alt="ダミー画像1" width="${BOX_WIDTH}px" height="${BOX_HEIGHT}px">`;
								layerSizes[5][10][0] = '';
								// display
								break;
							case 2: // 2box w half
								// image
								layerSizes[5][0][0] = Math.floor(BOX_WIDTH / 2);
								layerSizes[5][0][1] = BOX_HEIGHT;
								layerSizes[5][1][0] = Math.floor(BOX_WIDTH / 2);
								layerSizes[5][1][1] = BOX_HEIGHT;
								// text
								layerSizes[5][4][0] = Math.floor(BOX_WIDTH / 2);
								layerSizes[5][4][1] = BOX_HEIGHT;
								layerSizes[5][5][0] = Math.floor(BOX_WIDTH / 2);
								layerSizes[5][5][1] = BOX_HEIGHT;
								// box image and text names
								layerSizes[5][8][0] = `<img src="./sys_img/damiy0.png" alt="ダミー画像1" width="${Math.floor(BOX_WIDTH / 2)}px" height="${BOX_HEIGHT}px">`;
								layerSizes[5][8][1] = `<img src="./sys_img/damiy0.png" alt="ダミー画像2" width="${Math.floor(BOX_WIDTH / 2)}px" height="${BOX_HEIGHT}px">`;
								layerSizes[5][10][0] = '';
								layerSizes[5][10][1] = '';
								// display
								break;
							case 3:  // 2box h half
								// image
								layerSizes[5][0][0] = BOX_WIDTH ;
								layerSizes[5][0][1] = Math.floor(BOX_HEIGHT / 2);
								layerSizes[5][1][0] = BOX_WIDTH ;
								layerSizes[5][1][1] = Math.floor(BOX_HEIGHT / 2);
								// text
								layerSizes[5][4][0] = BOX_WIDTH ;
								layerSizes[5][4][1] = Math.floor(BOX_HEIGHT / 2);
								layerSizes[5][5][0] = BOX_WIDTH ;
								layerSizes[5][5][1] = Math.floor(BOX_HEIGHT / 2);
								// box image and text names
								layerSizes[5][8][0] = `<img src="./sys_img/damiy0.png" alt="ダミー画像1" width="${BOX_WIDTH}px" height="${Math.floor(BOX_HEIGHT / 2)}px">`;
								layerSizes[5][8][1] = `<img src="./sys_img/damiy0.png" alt="ダミー画像2" width="${BOX_WIDTH}px" height="${Math.floor(BOX_HEIGHT / 2)}px">`;
								layerSizes[5][10][0] = '';
								layerSizes[5][10][1] = '';
								// display
								break;
							case 4:  // 3box w third
								// image
								layerSizes[5][0][0] = Math.floor(BOX_WIDTH / 3);
								layerSizes[5][0][1] = BOX_HEIGHT;
								layerSizes[5][1][0] = Math.floor(BOX_WIDTH / 3);
								layerSizes[5][1][1] = BOX_HEIGHT;
								layerSizes[5][2][0] = Math.floor(BOX_WIDTH / 3);;
								layerSizes[5][2][1] = BOX_HEIGHT;
								// text
								layerSizes[5][4][0] = Math.floor(BOX_WIDTH / 3);
								layerSizes[5][4][1] = BOX_HEIGHT;
								layerSizes[5][5][0] = Math.floor(BOX_WIDTH / 3);
								layerSizes[5][5][1] = BOX_HEIGHT;
								layerSizes[5][6][0] = Math.floor(BOX_WIDTH / 3);
								layerSizes[5][6][1] = BOX_HEIGHT;
								// box image and text names
								layerSizes[5][8][0] = `<img src="./sys_img/damiy0.png" alt="ダミー画像1" width="${Math.floor(BOX_WIDTH / 3)}px" height="${BOX_HEIGHT}px">`;
								layerSizes[5][8][1] = `<img src="./sys_img/damiy0.png" alt="ダミー画像2" width="${Math.floor(BOX_WIDTH / 3)}px" height="${BOX_HEIGHT}px">`;
								layerSizes[5][9][0] = `<img src="./sys_img/damiy0.png" alt="ダミー画像3" width="${Math.floor(BOX_WIDTH / 3)}px" height="${BOX_HEIGHT}px">`;
								layerSizes[5][10][0] = '';
								layerSizes[5][10][1] = '';
								layerSizes[5][11][0] = '';
								// display
								break;
							case 5: // 3box h third
								// image
								layerSizes[5][0][0] = BOX_WIDTH;
								layerSizes[5][0][1] = Math.floor(BOX_HEIGHT / 3);
								layerSizes[5][1][0] = BOX_WIDTH;
								layerSizes[5][1][1] = Math.floor(BOX_HEIGHT / 3);
								layerSizes[5][2][0] = BOX_WIDTH;
								layerSizes[5][2][1] = Math.floor(BOX_HEIGHT / 3);
								// text
								layerSizes[5][4][0] = BOX_WIDTH;
								layerSizes[5][4][1] = Math.floor(BOX_HEIGHT / 3);
								layerSizes[5][5][0] = BOX_WIDTH;
								layerSizes[5][5][1] = Math.floor(BOX_HEIGHT / 3);
								layerSizes[5][6][0] = BOX_WIDTH;
								layerSizes[5][6][1] = Math.floor(BOX_HEIGHT / 3);
								// box image and text names
								layerSizes[5][8][0] = `<img src="./sys_img/damiy0.png" alt="ダミー画像1" width="${BOX_WIDTH}px" height="${Math.floor(BOX_HEIGHT / 3)}px">`;
								layerSizes[5][8][1] = `<img src="./sys_img/damiy0.png" alt="ダミー画像2" width="${BOX_WIDTH}px" height="${Math.floor(BOX_HEIGHT / 3)}px">`;
								layerSizes[5][9][0] = `<img src="./sys_img/damiy0.png" alt="ダミー画像3" width="${BOX_WIDTH}px" height="${Math.floor(BOX_HEIGHT / 3)}px">`;
								layerSizes[5][10][0] = '';
								layerSizes[5][10][1] = '';
								layerSizes[5][11][0] = '';
							// display
								break;
							case 6: // 3box w half h single
								// image
								layerSizes[5][0][0] = Math.floor(BOX_WIDTH / 2);
								layerSizes[5][0][1] = Math.floor(BOX_HEIGHT / 2);
								layerSizes[5][1][0] = Math.floor(BOX_WIDTH / 2);
								layerSizes[5][1][1] = Math.floor(BOX_HEIGHT / 2);
								layerSizes[5][2][0] = BOX_WIDTH;
								layerSizes[5][2][1] = Math.floor(BOX_HEIGHT /2);
								// text
								layerSizes[5][4][0] = Math.floor(BOX_WIDTH / 2);
								layerSizes[5][4][1] = Math.floor(BOX_HEIGHT / 2);
								layerSizes[5][5][0] = Math.floor(BOX_WIDTH / 2);
								layerSizes[5][5][1] = Math.floor(BOX_HEIGHT / 2);
								layerSizes[5][6][0] = BOX_WIDTH;
								layerSizes[5][6][1] = Math.floor(BOX_HEIGHT / 2);
								// box image and text names
								layerSizes[5][8][0] = `<img src="./sys_img/damiy0.png" alt="A digital workspace showing a main subject centered within a vibrant interface. The subject is surrounded by control buttons and colored panels, designed for editing and arranging media. No visible text is present. The environment is functional and supports creative work with a neutral emotional tone." width="${Math.floor(BOX_WIDTH / 2)}px" height="${Math.floor(BOX_HEIGHT / 2)}px">`;
								layerSizes[5][8][1] = `<img src="./sys_img/damiy0.png" alt="A digital workspace showing a main subject centered within a vibrant interface. The subject is surrounded by control buttons and colored panels, designed for editing and arranging media. No visible text is present. The environment is functional and supports creative work with a neutral emotional tone." width="${Math.floor(BOX_WIDTH / 2)}px" height="${Math.floor(BOX_HEIGHT / 2)}px">`;
								layerSizes[5][9][0] = `<img src="./sys_img/damiy0.png" alt="A digital workspace showing a main subject centered within a vibrant interface. The subject is surrounded by control buttons and colored panels, designed for editing and arranging media. No visible text is present. The environment is functional and supports creative work with a neutral emotional tone." width="${BOX_WIDTH}px" height="${Math.floor(BOX_HEIGHT / 2)}px">`;
								layerSizes[5][10][0] = '';
								layerSizes[5][10][1] = '';
								layerSizes[5][11][0] = '';
								// display
								break;
							case 7:  // 3box w single h half
								// image
								layerSizes[5][0][0] = BOX_WIDTH;
								layerSizes[5][0][1] = Math.floor(BOX_HEIGHT / 2);
								layerSizes[5][1][0] = Math.floor(BOX_WIDTH / 2);
								layerSizes[5][1][1] = Math.floor(BOX_HEIGHT / 2);
								layerSizes[5][2][0] = Math.floor(BOX_WIDTH / 2);
								layerSizes[5][2][1] = Math.floor(BOX_HEIGHT /2);
								// text
								layerSizes[5][4][0] = BOX_WIDTH;
								layerSizes[5][4][1] = Math.floor(BOX_HEIGHT / 2);
								layerSizes[5][5][0] = Math.floor(BOX_WIDTH / 2);
								layerSizes[5][5][1] = Math.floor(BOX_HEIGHT / 2);
								layerSizes[5][6][0] = Math.floor(BOX_WIDTH / 2);
								layerSizes[5][6][1] = Math.floor(BOX_HEIGHT / 2);
								// box image and text names
								layerSizes[5][8][0] = `<img src="./sys_img/damiy0.png" alt="A digital workspace showing a main subject centered within a vibrant interface. The subject is surrounded by control buttons and colored panels, designed for editing and arranging media. No visible text is present. The environment is functional and supports creative work with a neutral emotional tone." width="${BOX_WIDTH}px" height="${Math.floor(BOX_HEIGHT / 2)}px">`;
								layerSizes[5][8][1] = `<img src="./sys_img/damiy0.png" alt="A digital workspace showing a main subject centered within a vibrant interface. The subject is surrounded by control buttons and colored panels, designed for editing and arranging media. No visible text is present. The environment is functional and supports creative work with a neutral emotional tone." width="${Math.floor(BOX_WIDTH / 2)}px" height="${Math.floor(BOX_HEIGHT / 2)}px">`;
								layerSizes[5][9][0] = `<img src="./sys_img/damiy0.png" alt="A digital workspace showing a main subject centered within a vibrant interface. The subject is surrounded by control buttons and colored panels, designed for editing and arranging media. No visible text is present. The environment is functional and supports creative work with a neutral emotional tone." width="${Math.floor(BOX_WIDTH / 2)}px" height="${Math.floor(BOX_HEIGHT / 2)}px">`;
								layerSizes[5][10][0] = '';
								layerSizes[5][10][1] = '';
								layerSizes[5][11][0] = '';
								// display
								break;
							case 8:  // 4box
								// image
								layerSizes[5][0][0] = Math.floor(BOX_WIDTH / 2);
								layerSizes[5][0][1] = BOX_HEIGHT / 2;
								layerSizes[5][1][0] = Math.floor(BOX_WIDTH / 2);
								layerSizes[5][1][1] = BOX_HEIGHT / 2;
								layerSizes[5][2][0] = Math.floor(BOX_WIDTH / 2);
								layerSizes[5][2][1] = BOX_HEIGHT /2;
								layerSizes[5][3][0] = Math.floor(BOX_WIDTH / 2);
								layerSizes[5][3][1] = BOX_HEIGHT /2;
								// text
								layerSizes[5][4][0] = Math.floor(BOX_WIDTH / 2);
								layerSizes[5][4][1] = BOX_HEIGHT / 2;
								layerSizes[5][5][0] = Math.floor(BOX_WIDTH / 2);
								layerSizes[5][5][1] = BOX_HEIGHT / 2;
								layerSizes[5][6][0] = Math.floor(BOX_WIDTH / 2);
								layerSizes[5][6][1] = BOX_HEIGHT / 2;
								layerSizes[5][7][0] = Math.floor(BOX_WIDTH / 2);
								layerSizes[5][7][1] = BOX_HEIGHT / 2;
								// box image and text names
								layerSizes[5][8][0] = `<img src="./sys_img/damiy0.png" alt="A digital workspace showing a main subject centered within a vibrant interface. The subject is surrounded by control buttons and colored panels, designed for editing and arranging media. No visible text is present. The environment is functional and supports creative work with a neutral emotional tone." width="${Math.floor(BOX_WIDTH / 2)}px" height="${Math.floor(BOX_HEIGHT / 2)}px">`;
								layerSizes[5][8][1] = `<img src="./sys_img/damiy0.png" alt="A digital workspace showing a main subject centered within a vibrant interface. The subject is surrounded by control buttons and colored panels, designed for editing and arranging media. No visible text is present. The environment is functional and supports creative work with a neutral emotional tone." width="${Math.floor(BOX_WIDTH / 2)}px" height="${Math.floor(BOX_HEIGHT / 2)}px">`;
								layerSizes[5][9][0] = `<img src="./sys_img/damiy0.png" alt="A digital workspace showing a main subject centered within a vibrant interface. The subject is surrounded by control buttons and colored panels, designed for editing and arranging media. No visible text is present. The environment is functional and supports creative work with a neutral emotional tone." width="${Math.floor(BOX_WIDTH / 2)}px" height="${Math.floor(BOX_HEIGHT / 2)}px">`;
								layerSizes[5][9][1] = `<img src="./sys_img/damiy0.png" alt="A digital workspace showing a main subject centered within a vibrant interface. The subject is surrounded by control buttons and colored panels, designed for editing and arranging media. No visible text is present. The environment is functional and supports creative work with a neutral emotional tone." width="${Math.floor(BOX_WIDTH / 2)}px" height="${Math.floor(BOX_HEIGHT / 2)}px">`;
								layerSizes[5][10][0] = '';
								layerSizes[5][10][1] = '';
								layerSizes[5][11][0] = '';
								layerSizes[5][11][1] = '';
								// display
								break;
							default:
								// image
								layerSizes[5][0][0] = Math.floor(BOX_WIDTH / 2);
								layerSizes[5][0][1] = BOX_HEIGHT / 2;
								layerSizes[5][1][0] = Math.floor(BOX_WIDTH / 2);
								layerSizes[5][1][1] = BOX_HEIGHT / 2;
								layerSizes[5][2][0] = Math.floor(BOX_WIDTH / 2);
								layerSizes[5][2][1] = BOX_HEIGHT /2;
								layerSizes[5][3][0] = Math.floor(BOX_WIDTH / 2);
								layerSizes[5][3][1] = BOX_HEIGHT /2;
								// text
								layerSizes[5][4][0] = Math.floor(BOX_WIDTH / 2);
								layerSizes[5][4][1] = BOX_HEIGHT / 2;
								layerSizes[5][5][0] = Math.floor(BOX_WIDTH / 2);
								layerSizes[5][5][1] = BOX_HEIGHT / 2;
								layerSizes[5][6][0] = Math.floor(BOX_WIDTH / 2);
								layerSizes[5][6][1] = BOX_HEIGHT / 2;
								layerSizes[5][7][0] = Math.floor(BOX_WIDTH / 2);
								layerSizes[5][7][1] = BOX_HEIGHT / 2;
								// box image and text names
								layerSizes[5][8][0] = `<img src="./sys_img/damiy0.png" alt="ダミー画像1" width="${Math.floor(BOX_WIDTH / 2)}px" height="${Math.floor(BOX_HEIGHT / 2)}px">`;
								layerSizes[5][8][1] = `<img src="./sys_img/damiy0.png" alt="ダミー画像2" width="${Math.floor(BOX_WIDTH / 2)}px" height="${Math.floor(BOX_HEIGHT / 2)}px">`;
								layerSizes[5][9][0] = `<img src="./sys_img/damiy0.png" alt="ダミー画像3" width="${Math.floor(BOX_WIDTH / 2)}px" height="${Math.floor(BOX_HEIGHT / 2)}px">`;
								layerSizes[5][9][1] = `<img src="./sys_img/damiy0.png" alt="ダミー画像4" width="${Math.floor(BOX_WIDTH / 2)}px" height="${Math.floor(BOX_HEIGHT / 2)}px">`;
								layerSizes[5][10][0] = "<h1>ダミーテキスト1</h1>";
								layerSizes[5][10][1] = "<h1>ダミーテキスト2</h1>";
								layerSizes[5][11][0] = "<h1>ダミーテキスト3</h1>";
								layerSizes[5][11][1] = "<h1>ダミーテキスト4</h1>";
								// display
						}
						tilep_clic_show(tile_number);
}

</script>
 	<!-- R1 middle-->
	<div id="box_midol_R1">
		<div id="R_indexs">
		<table><tr><td>
			<a name="top_R1"></a><button class="layer-btn" onclick="is_stato_set_top();">初期表示設定</button>　
			<button class="layer-btn" onclick="clerr5();">WAクリア</button>　
			<!-- ポップアップボタン -->
			<button class="layer-btn" onclick="showPopup1();">pop1</button>　
			<button class="layer-btn" onclick="showPopup2();">pop2</button>　<a href="#top_R2">to2</a><br>
			<!--<button class="layer-btn" onclick="popup3();">pop3</button><br>-->
			<!-- 連動ポップアップボタン -->
			<br>
			<a name="top_R2"></a><br>
			<button class="layer-btn" onclick="rendou_pop1('1');">連動pop1</button>
            <button class="layer-btn" onclick="rendou_pop1('2');">連動pop2</button>
           	<?php echo 'こんにちは' . PHP_VERSION; ?>　<a href="#top_R1">to1</a><br>
		</td></tr></table>
        <script>
       	function rendou_pop1(renn) {
            alert('rendou_pop1 called');
            let popup01 = window.open('', 'PopupWindow', 'width=400,height=300');
			if (!popup01 || popup01.closed || typeof popup01.closed == 'undefined') { 
				alert('ポップアップがブロックされました。ポップアップブロッカーの設定を確認してください。');
            	popup01.document.close();
				return;
			}
			if (renn == '1') {
				popup01.focus();
				popup01.document.write('<html><head><title>Popup Window</title></head><body>');
            	popup01.document.write('<h1>This is a popup window</h1>');
            	popup01.document.write('<p>連動したポップアップウィンドウの内容です。</p>');
            	popup01.document.write('</body></html>');
			} else if (renn == '2') {
				popup01.focus();
				popup01.document.write('<html><head><title>Popup Window</title></head><body bgcolor="#FFFFCC">');
            	popup01.document.write('<h1>This is a popup window</h1>');
            	popup01.document.write('<p>連動したポップアップウィンドウの内容です。</p>');
            	popup01.document.write('<a href="https://www.php.net/manual/ja/index.php" target="_blank">Helphp!</a><r>');
				popup01.document.write('<br><br>ヘルプセクションへようこそ！ここではポップアップウィンドウの使用方法について説明します。</br>');
				popup01.document.write('no thank you this call!');
				popup01.document.write('<a name="help"></a>助けてやわ。。。</body></html>');
			}
			popup01.document.close();

        }
        </script>
		</div>
		<div id="R_menews1">
			<table><tr><td>
			<!-- 画像選択ボタン -->
			<button class="layer-btn" onclick="img_d_sel();">image1</button><br>
			<span id="img_sel_span">1</span><br>
			<!-- 画像選択ドロップダウン -->
<?php
	global $image_dir;
	$image_dir0 = 'image';
	get_img_files($image_dir0);
	$image_dir0 = 'image1';
	get_img_files($image_dir0);

function get_img_files($image_dir0) {
	$php_d_sel1 = '1';
	if ($image_dir0 == 'image1') {
		$image_dir = __DIR__ . '/image1/';
		$php_d_sel1 = '1';
		$in_d_php_tag = '<select id="R_image1_selec1" onchange="set_Img_sel(value);">';
	} else {
		$image_dir = __DIR__ . '/image/';
		$php_d_sel1 = '';
		$in_d_php_tag = '<select id="R_image_selec" onchange="set_Img_sel(value);">';

	}
	$image_files = [];
	$image_files = glob($image_dir . '*.{jpg,png,gif,jpeg}', GLOB_BRACE);
	 // ファイル名で自然順ソート（1.jpg, 2.jpg, 10.jpg の順になる）
    sort($image_files, SORT_NATURAL | SORT_FLAG_CASE);
	$file = '';
	$size = [];
    $key0 = 0;
    $key_count = count($image_files);
    while ($key0 < $key_count) {
        $file = $image_files[$key0];
    	(string)$filename = basename($file);
    	$size = getimagesize($file); // フルパスで指定
        $key0++; 
    	$Wide_php = $size[0];
    	$height_php = $size[1];
    	$whsize_php = $size[0] * $size[1];
    	// サイズ情報をoptionのvalueに埋め込む
    	$in_d_php_tag .= '<option value="./' . $image_dir0 . '/' . (string)$filename . ';' . $whsize_php . ';' . $Wide_php . ';' . $height_php . ';' . '">' . (string)$filename . '</option>';
	}
	echo  $in_d_php_tag . '</select><br>';
}
?>
			</td><td>
				<span id="get_i_name"><img src="./sys_img/damiy4.png" width="100" height="100"></span><br>
			</td></tr></table>

			<!-- 画像表示エリア -->
			<script>
				let set_img_all = 1;
				let selectedImageValue = '';
				let img_f_name0 = '';
				let img_f_name = '';
				let width_ph = 100; // 画像幅
                let height_ph = 100; // 画像高さ

				//let number_select = field_select - 1; // 0～3
				//let number_select = field_select - 1; // 0～3
				function set_Img_sel(value) {
					// alert('選択された値: ' + value);
					selectedImageValue = `${value}`;
					img_f_name0 = `${value}`;
					alert(`1 selectedImageValue: ${selectedImageValue}`);
					// IDが存在しない場合は参照しない
					if (`${selectedImageValue}`.match(/\/image\d?\//)) {
						let arr_split3 = `${selectedImageValue}`.split('/image');
						let arr_split4 = `${arr_split3[1]}`.split(';');
						let img_f_name1 = `./image${arr_split4[0]}`;//| . // faile.name/ sss/ www/ hhh |の5つ 
						img_f_name = `image${arr_split4[0]}`;// 画像ファイル名
						let size_ph = `${arr_split4[1]}`; // 画像サイズ
                        width_ph = `${arr_split4[2]}`; // 画像幅
                        height_ph = `${arr_split4[3]}`; // 画像高さ
                         //
						alert(`2 img_f_name ${arr_split4[0]} size: ${arr_split4[1]} w: ${arr_split4[2]} h: ${arr_split4[3]} ;`);
						document.getElementById('get_i_name').innerHTML = `<img src="${img_f_name}" width="120px" alt="Selected Image">`;
						// 選択された画像をworking L5に表示
					}
				}

				// 起動最初の画像表示関数
				img_f_name = "./image/damiy4.png"; // 初期画像
				width_ph = 100;
				height_ph = 100;
				function img_d_sel() {   // これは何だったかな　ボタンで入れていた?
					alert(`3 img_d_sel called with selectedImageValue: ${selectedImageValue} i_w${width_ph}, i_h${height_ph}, T_L6_4w${arr_xy4[0]}, T_L6_4h${arr_xy4[1]}`);
					// 画像サイズ調整関数 resizeByMax(maxWidth, maxHeight, currentWidth, currentHeight)
					let arr_xy0 = [0, 0];
					if (field_no == 0 && tile_no > 0 && tile_no < 9) {
						arr_xy0[0] = layerSizes[5][0][0];
						arr_xy0[1] = layerSizes[5][0][1];
					} else if (field_no == 1 && tile_no > 1 && tile_no < 9) {
						arr_xy0[0] = layerSizes[5][1][0];
						arr_xy0[1] = layerSizes[5][1][1];
					} else if (field_no == 2 && tile_no > 2 && tile_no < 9) {
						arr_xy0[0] = layerSizes[5][2][0];
						arr_xy0[1] = layerSizes[5][2][1];
					} else if (field_no == 3 && tile_no > 7 && tile_no < 9) {
						arr_xy0[0] = layerSizes[5][3][0];
						arr_xy0[1] = layerSizes[5][3][1];
					} else {
						alert('img_d_sel: Invalid field_no or tile_no for image placement.');
						return;
					}
					let arr_i_size1 = resizeByMax(width_ph, height_ph, arr_xy0[0], arr_xy0[1]);
					let img_w1 = arr_i_size1[0];
					let img_h1 = arr_i_size1[1];
					let img_tag1 = `<img src="${img_f_name}" width="${arr_i_size1.width}" height="${arr_i_size1.height}" alt="A selected image displayed in the working area showing the main subject in focus. The subject is positioned according to the chosen layout, surrounded by a digital interface with control buttons and colored panels. If the image contains visible text, it is displayed clearly for the user. The overall environment is a vibrant and interactive workspace designed for editing and arranging media. The emotional tone is neutral and functional, supporting creative work.">`;
					alert(`4 img_d_sel: img_tag1: ${img_tag1} img_w1: ${img_w1}, img_h1: ${img_h1}`);
					document.getElementById('L6_T_Image').style.display = 'block';						
					if (field_no == 0 && tile_no > 0 && tile_no < 9) {
						layerSizes[5][8][0] = `${img_tag1}`;
						tilep_clic_show(tile_no);
					} else if (field_no == 1 && tile_no > 1 && tile_no < 9) {
						layerSizes[5][8][1] = `${img_tag1}`;
						tilep_clic_show(tile_no);
					} else if (field_no == 2 && tile_no > 2 && tile_no < 9) {
						layerSizes[5][9][0] = `${img_tag1}`;
						tilep_clic_show(tile_no);
					} else if (field_no == 3 && tile_no > 7 && tile_no < 9) {
						layerSizes[5][9][1] = `${img_tag1}`;
						tilep_clic_show(tile_no);
					} else {
						alert('img_d_sel: Invalid field_no or tile_no for image placement.');
					}
				}	
			</script>
		</div>
		<div id="R_menews2">
		<p>
			<font size="4" color="white">R1 menew2</menu></font>
		</p>
		</div>
        <div id="vizual_T">
	<table id="R_table1" border="1">
    <tr><td colspan="2" height="30px">
		<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 = [];			
			$audio_files = glob($audio_dir . '*.{mp3,wav}', GLOB_BRACE);
            #    echo '<script> audioFileCount = ' . count($audio_files) . ';</script> ';
            $filename = '';
			$file= '';
			$key0 = 0;
        	$key_count = count($audio_files);
        	while ($key0 < $key_count) {
            	$file = $audio_files[$key0];
				$filename = basename($file);
				echo '<option value="'. $audio_dir. htmlspecialchars($filename) . '">' . htmlspecialchars($filename) . '</option>';
			   	$key0++;
        	}
            $video_dir = __DIR__ . '/video/';
			$video_files = [];
			$video_files = glob($video_dir . '*.{mp4,webm}', GLOB_BRACE);
            #    echo '<script> videoFileCount = ' . count($video_files) . '</script>';
           $filename = '';
			$file= '';
			$key0 = 0;
        	$key_count = count($video_files);
			while ($key0 < $key_count) {
				$file = $video_files[$key0];
				$filename = basename($file);
				echo '<option value="'. $video_dir. htmlspecialchars($filename) . '">' . htmlspecialchars($filename) . '</option>';
				$_COOKIE['last_video_file'] = $filename;
			   	$key0++;
			}
			?>
		</select>
    </td></tr>
    <tr><td colspan="2" height="30px">    
		<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="45%" height="40px">
		<!-- オーディオパネル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="45%" height="40px">
			<!-- オーディオパネル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="45%" height="100px">
		<!-- 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="45%" height="100px">
		<!-- 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>
        </div>
		<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 = `<table><tr><td><audio controls style="width: 100%;">
			<source src="${aud1_f_name}" type="audio/mp4" autoplay></audio></td></tr></table>`;
			document.getElementById('audio_panel_1').innerHTML = tagseikei;
		} else if (L_go_v === 2) {
			aud2_f_name = './audio/' + arr_split1[1];
			let tagseikei = `<table><tr><td><audio controls style="width: 100%;">
			<source src="${aud2_f_name}" type="audio/mp4" autoplay></audio></td></tr></table>`;
			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"> 
		1 ベース<p id="p_test1">p_ test1 </p>
		<div id="popup_1"> 
			<div id="grip1_lin"> Grip Line - Popup 1 
				<button type="button" id="close_pop1" onclick="closePopup();">×</button> 
			</div><!-- gaid end --> 
			<!--<p id="popup_content1">	test </p>-->
			<div id="indexs_p1">
				<!--<button type="button" onclick="showPopup1();">ポップアップ1 を開く</button>-->
				<button type="button" onclick="showPopup2();">ポップアップ2 を開く</button> 
				<button type="button" onclick="menew_p1('0');">Menu0表示</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_p10">
				　　<img id="tilep1" src="./sys_img/sys_t1_p1.png" border="1" onclick="tilep_click(1)" alt="tilep1" width="30px">
				<img id="tilep2" src="./sys_img/sys_t2_p1.png" border="1" onclick="tilep_click(2)" alt="tilep2" width="30px">
				<img id="tilep3" src="./sys_img/sys_t2_p2.png" border="1" onclick="tilep_click(3)" alt="tilep3" width="30px">
				<img id="tilep4" src="./sys_img/sys_t3_p1.png" border="1" onclick="tilep_click(4)" alt="tilep4" width="30px">
				<img id="tilep5" src="./sys_img/sys_t3_p2.png" border="1" onclick="tilep_click(5)" alt="tilep5" width="30px">
				<img id="tilep6" src="./sys_img/sys_t3_p3.png" border="1" onclick="tilep_click(6)" alt="tilep6" width="30px">
				<img id="tilep7" src="./sys_img/sys_t3_p4.png" border="1" onclick="tilep_click(7)" alt="tilep7" width="30px">
				<img id="tilep8" src="./sys_img/sys_t4_p1.png" border="1" onclick="tilep_click(8)" alt="tilep8" width="30px"> onClickd<br>
				<p>　これはMenu0の内容です。</p>
				<script>
					function tilep_click(tile_number) {
						document.getElementById('tilep' + tile_no).style.border = '1px solid black';
						tile_no = Number(tile_number);
						document.getElementById('tilep' + tile_no).style.border = '2px solid red';
						let layerWA = document.getElementById('midol_workig_L6');
						alert('Tile ' + tile_number + ' clicked!');
						//layerWA.style.display = 'block';
						// reset layerSizes[5] values
						// image sizes
						layerSizes[5][0][0] = 'null'; // width
						layerSizes[5][0][1] = 'null'; // height
						layerSizes[5][1][0] = 'null'; // width
						layerSizes[5][1][1] = 'null'; // height
						layerSizes[5][2][0] = 'null'; // width
						layerSizes[5][2][1] = 'null'; // height
						layerSizes[5][3][0] = 'null'; // width
						layerSizes[5][3][1] = 'null'; // height
						// box image and text names
						layerSizes[5][4][0] = 'null'; // width
						layerSizes[5][4][1] = 'null'; // height
						layerSizes[5][5][0] = 'null'; // width
						layerSizes[5][5][1] = 'null'; // height
						layerSizes[5][6][0] = 'null'; // width
						layerSizes[5][6][1] = 'null'; // height
						layerSizes[5][7][0] = 'null'; // width
						layerSizes[5][7][1] = 'null'; // height
						// box_i_name
						layerSizes[5][8][0] = '';
						layerSizes[5][8][1] = '';
						layerSizes[5][9][0] = '';
						layerSizes[5][9][1] = '';
						layerSizes[5][10][0] = '';
						layerSizes[5][10][1] = '';
						layerSizes[5][11][0] = '';
						layerSizes[5][11][1] = '';
						switch (tile_no) {
							case 0: // clear all
								tilep_clic_show(tile_no);
								return;
								break;
							case 1: // 1box
								// image
								layerSizes[5][0][0] = BOX_WIDTH; // width
								layerSizes[5][0][1] = BOX_HEIGHT; // height
								//text
								layerSizes[5][4][0] = BOX_WIDTH; // width
								layerSizes[5][4][1] = BOX_HEIGHT; // height
								// box image and text names
								layerSizes[5][8][0] = `<img src="./sys_img/damiy4.png" alt="ダミー画像1" width="${BOX_WIDTH}px" height="${BOX_HEIGHT}px">`;
								layerSizes[5][10][0] = '<h1>ダミーテキスト1</h1>';
								// display
								break;
							case 2: // 2box w half
								// image
								layerSizes[5][0][0] = Math.floor(BOX_WIDTH / 2);
								layerSizes[5][0][1] = BOX_HEIGHT;
								layerSizes[5][1][0] = Math.floor(BOX_WIDTH / 2);
								layerSizes[5][1][1] = BOX_HEIGHT;
								// text
								layerSizes[5][4][0] = Math.floor(BOX_WIDTH / 2);
								layerSizes[5][4][1] = BOX_HEIGHT;
								layerSizes[5][5][0] = Math.floor(BOX_WIDTH / 2);
								layerSizes[5][5][1] = BOX_HEIGHT;
								// box image and text names
								layerSizes[5][8][0] = `<img src="./sys_img/damiy4.png" alt="ダミー画像1" width="${Math.floor(BOX_WIDTH / 2)}px" height="${BOX_HEIGHT}px">`;
								layerSizes[5][8][1] = `<img src="./sys_img/damiy4.png" alt="ダミー画像2" width="${Math.floor(BOX_WIDTH / 2)}px" height="${BOX_HEIGHT}px">`;
								layerSizes[5][10][0] = '<h1>ダミーテキスト1</h1>';
								layerSizes[5][10][1] = '<h1>ダミーテキスト2</h1>';
								// display
								break;
							case 3:  // 2box h half
								// image
								layerSizes[5][0][0] = BOX_WIDTH ;
								layerSizes[5][0][1] = Math.floor(BOX_HEIGHT / 2);
								layerSizes[5][1][0] = BOX_WIDTH ;
								layerSizes[5][1][1] = Math.floor(BOX_HEIGHT / 2);
								// text
								layerSizes[5][4][0] = BOX_WIDTH ;
								layerSizes[5][4][1] = Math.floor(BOX_HEIGHT / 2);
								layerSizes[5][5][0] = BOX_WIDTH ;
								layerSizes[5][5][1] = Math.floor(BOX_HEIGHT / 2);
								// box image and text names
								layerSizes[5][8][0] = `<img src="./sys_img/damiy4.png" alt="ダミー画像1" width="${BOX_WIDTH}px" height="${Math.floor(BOX_HEIGHT / 2)}px">`;
								layerSizes[5][8][1] = `<img src="./sys_img/damiy4.png" alt="ダミー画像2" width="${BOX_WIDTH}px" height="${Math.floor(BOX_HEIGHT / 2)}px">`;
								layerSizes[5][10][0] = '<h1>ダミーテキスト1</h1>';
								layerSizes[5][10][1] = '<h1>ダミーテキスト2</h1>';
								// display
								break;
							case 4:  // 3box w third
								// image
								layerSizes[5][0][0] = Math.floor(BOX_WIDTH / 3);
								layerSizes[5][0][1] = BOX_HEIGHT;
								layerSizes[5][1][0] = Math.floor(BOX_WIDTH / 3);
								layerSizes[5][1][1] = BOX_HEIGHT;
								layerSizes[5][2][0] = Math.floor(BOX_WIDTH / 3);;
								layerSizes[5][2][1] = BOX_HEIGHT;
								// text
								layerSizes[5][4][0] = Math.floor(BOX_WIDTH / 3);
								layerSizes[5][4][1] = BOX_HEIGHT;
								layerSizes[5][5][0] = Math.floor(BOX_WIDTH / 3);
								layerSizes[5][5][1] = BOX_HEIGHT;
								layerSizes[5][6][0] = Math.floor(BOX_WIDTH / 3);
								layerSizes[5][6][1] = BOX_HEIGHT;
								// box image and text names
								layerSizes[5][8][0] = `<img src="./sys_img/damiy4.png" alt="ダミー画像1" width="${Math.floor(BOX_WIDTH / 3)}px" height="${BOX_HEIGHT}px">`;
								layerSizes[5][8][1] = `<img src="./sys_img/damiy4.png" alt="ダミー画像2" width="${Math.floor(BOX_WIDTH / 3)}px" height="${BOX_HEIGHT}px">`;
								layerSizes[5][9][0] = `<img src="./sys_img/damiy4.png" alt="ダミー画像3" width="${Math.floor(BOX_WIDTH / 3)}px" height="${BOX_HEIGHT}px">`;
								layerSizes[5][10][0] = '<h1>ダミーテキスト1</h1>';
								layerSizes[5][10][1] = '<h1>ダミーテキスト2</h1>';
								layerSizes[5][11][0] = '<h1>ダミーテキスト3</h1>';
								// display
								break;
							case 5: // 3box h third
								// image
								layerSizes[5][0][0] = BOX_WIDTH;
								layerSizes[5][0][1] = Math.floor(BOX_HEIGHT / 3);
								layerSizes[5][1][0] = BOX_WIDTH;
								layerSizes[5][1][1] = Math.floor(BOX_HEIGHT / 3);
								layerSizes[5][2][0] = BOX_WIDTH;
								layerSizes[5][2][1] = Math.floor(BOX_HEIGHT / 3);
								// text
								layerSizes[5][4][0] = BOX_WIDTH;
								layerSizes[5][4][1] = Math.floor(BOX_HEIGHT / 3);
								layerSizes[5][5][0] = BOX_WIDTH;
								layerSizes[5][5][1] = Math.floor(BOX_HEIGHT / 3);
								layerSizes[5][6][0] = BOX_WIDTH;
								layerSizes[5][6][1] = Math.floor(BOX_HEIGHT / 3);
								// box image and text names
								layerSizes[5][8][0] = `<img src="./sys_img/damiy4.png" alt="ダミー画像1" width="${BOX_WIDTH}px" height="${Math.floor(BOX_HEIGHT / 3)}px">`;
								layerSizes[5][8][1] = `<img src="./sys_img/damiy4.png" alt="ダミー画像2" width="${BOX_WIDTH}px" height="${Math.floor(BOX_HEIGHT / 3)}px">`;
								layerSizes[5][9][0] = `<img src="./sys_img/damiy4.png" alt="ダミー画像3" width="${BOX_WIDTH}px" height="${Math.floor(BOX_HEIGHT / 3)}px">`;
								layerSizes[5][10][0] = '<h1>ダミーテキスト1</h1>';
								layerSizes[5][10][1] = '<h1>ダミーテキスト2</h1>';
								layerSizes[5][11][0] = '<h1>ダミーテキスト3</h1>';
							// display
								break;
							case 6: // 3box w half h single
								// image
								layerSizes[5][0][0] = Math.floor(BOX_WIDTH / 2);
								layerSizes[5][0][1] = Math.floor(BOX_HEIGHT / 2);
								layerSizes[5][1][0] = Math.floor(BOX_WIDTH / 2);
								layerSizes[5][1][1] = Math.floor(BOX_HEIGHT / 2);
								layerSizes[5][2][0] = BOX_WIDTH;
								layerSizes[5][2][1] = Math.floor(BOX_HEIGHT /2);
								// text
								layerSizes[5][4][0] = Math.floor(BOX_WIDTH / 2);
								layerSizes[5][4][1] = Math.floor(BOX_HEIGHT / 2);
								layerSizes[5][5][0] = Math.floor(BOX_WIDTH / 2);
								layerSizes[5][5][1] = Math.floor(BOX_HEIGHT / 2);
								layerSizes[5][6][0] = BOX_WIDTH;
								layerSizes[5][6][1] = Math.floor(BOX_HEIGHT / 2);
								// box image and text names
								layerSizes[5][8][0] = `<img src="./sys_img/damiy4.png" alt="ダミー画像1" width="${Math.floor(BOX_WIDTH / 2)}px" height="${Math.floor(BOX_HEIGHT / 2)}px">`;
								layerSizes[5][8][1] = `<img src="./sys_img/damiy4.png" alt="ダミー画像2" width="${Math.floor(BOX_WIDTH / 2)}px" height="${Math.floor(BOX_HEIGHT / 2)}px">`;
								layerSizes[5][9][0] = `<img src="./sys_img/damiy4.png" alt="ダミー画像3" width="${BOX_WIDTH}px" height="${Math.floor(BOX_HEIGHT / 2)}px">`;
								layerSizes[5][10][0] = '<h1>ダミーテキスト1</h1>';
								layerSizes[5][10][1] = '<h1>ダミーテキスト2</h1>';
								layerSizes[5][11][0] = '<h1>ダミーテキスト3</h1>';
								// display
								break;
							case 7:  // 3box w single h half
								// image
								layerSizes[5][0][0] = BOX_WIDTH;
								layerSizes[5][0][1] = Math.floor(BOX_HEIGHT / 2);
								layerSizes[5][1][0] = Math.floor(BOX_WIDTH / 2);
								layerSizes[5][1][1] = Math.floor(BOX_HEIGHT / 2);
								layerSizes[5][2][0] = Math.floor(BOX_WIDTH / 2);
								layerSizes[5][2][1] = Math.floor(BOX_HEIGHT /2);
								// text
								layerSizes[5][4][0] = BOX_WIDTH;
								layerSizes[5][4][1] = Math.floor(BOX_HEIGHT / 2);
								layerSizes[5][5][0] = Math.floor(BOX_WIDTH / 2);
								layerSizes[5][5][1] = Math.floor(BOX_HEIGHT / 2);
								layerSizes[5][6][0] = Math.floor(BOX_WIDTH / 2);
								layerSizes[5][6][1] = Math.floor(BOX_HEIGHT / 2);
								// box image and text names
								layerSizes[5][8][0] = `<img src="./sys_img/damiy4.png" alt="ダミー画像1" width="${BOX_WIDTH}px" height="${Math.floor(BOX_HEIGHT / 2)}px">`;
								layerSizes[5][8][1] = `<img src="./sys_img/damiy4.png" alt="ダミー画像2" width="${Math.floor(BOX_WIDTH / 2)}px" height="${Math.floor(BOX_HEIGHT / 2)}px">`;
								layerSizes[5][9][0] = `<img src="./sys_img/damiy4.png" alt="ダミー画像3" width="${Math.floor(BOX_WIDTH / 2)}px" height="${Math.floor(BOX_HEIGHT / 2)}px">`;
								layerSizes[5][10][0] = '<h1>ダミーテキスト1</h1>';
								layerSizes[5][10][1] = '<h1>ダミーテキスト2</h1>';
								layerSizes[5][11][0] = '<h1>ダミーテキスト3</h1>';
								// display
								break;
							case 8:  // 4box
								// image
								layerSizes[5][0][0] = Math.floor(BOX_WIDTH / 2);
								layerSizes[5][0][1] = BOX_HEIGHT / 2;
								layerSizes[5][1][0] = Math.floor(BOX_WIDTH / 2);
								layerSizes[5][1][1] = BOX_HEIGHT / 2;
								layerSizes[5][2][0] = Math.floor(BOX_WIDTH / 2);
								layerSizes[5][2][1] = BOX_HEIGHT /2;
								layerSizes[5][3][0] = Math.floor(BOX_WIDTH / 2);
								layerSizes[5][3][1] = BOX_HEIGHT /2;
								// text
								layerSizes[5][4][0] = Math.floor(BOX_WIDTH / 2);
								layerSizes[5][4][1] = BOX_HEIGHT / 2;
								layerSizes[5][5][0] = Math.floor(BOX_WIDTH / 2);
								layerSizes[5][5][1] = BOX_HEIGHT / 2;
								layerSizes[5][6][0] = Math.floor(BOX_WIDTH / 2);
								layerSizes[5][6][1] = BOX_HEIGHT / 2;
								layerSizes[5][7][0] = Math.floor(BOX_WIDTH / 2);
								layerSizes[5][7][1] = BOX_HEIGHT / 2;
								// box image and text names
								layerSizes[5][8][0] = `<img src="./sys_img/damiy4.png" alt="ダミー画像1" width="${Math.floor(BOX_WIDTH / 2)}px" height="${Math.floor(BOX_HEIGHT / 2)}px">`;
								layerSizes[5][8][1] = `<img src="./sys_img/damiy4.png" alt="ダミー画像2" width="${Math.floor(BOX_WIDTH / 2)}px" height="${Math.floor(BOX_HEIGHT / 2)}px">`;
								layerSizes[5][9][0] = `<img src="./sys_img/damiy4.png" alt="ダミー画像3" width="${Math.floor(BOX_WIDTH / 2)}px" height="${Math.floor(BOX_HEIGHT / 2)}px">`;
								layerSizes[5][9][1] = `<img src="./sys_img/damiy4.png" alt="ダミー画像4" width="${Math.floor(BOX_WIDTH / 2)}px" height="${Math.floor(BOX_HEIGHT / 2)}px">`;
								layerSizes[5][10][0] = '<h1>ダミーテキスト1</h1>';
								layerSizes[5][10][1] = '<h1>ダミーテキスト2</h1>';
								layerSizes[5][11][0] = '<h1>ダミーテキスト3</h1>';
								layerSizes[5][11][1] = '<h1>ダミーテキスト4</h1>';
								// display
								break;
							default:
								// image
								layerSizes[5][0][0] = Math.floor(BOX_WIDTH / 2);
								layerSizes[5][0][1] = BOX_HEIGHT / 2;
								layerSizes[5][1][0] = Math.floor(BOX_WIDTH / 2);
								layerSizes[5][1][1] = BOX_HEIGHT / 2;
								layerSizes[5][2][0] = Math.floor(BOX_WIDTH / 2);
								layerSizes[5][2][1] = BOX_HEIGHT /2;
								layerSizes[5][3][0] = Math.floor(BOX_WIDTH / 2);
								layerSizes[5][3][1] = BOX_HEIGHT /2;
								// text
								layerSizes[5][4][0] = Math.floor(BOX_WIDTH / 2);
								layerSizes[5][4][1] = BOX_HEIGHT / 2;
								layerSizes[5][5][0] = Math.floor(BOX_WIDTH / 2);
								layerSizes[5][5][1] = BOX_HEIGHT / 2;
								layerSizes[5][6][0] = Math.floor(BOX_WIDTH / 2);
								layerSizes[5][6][1] = BOX_HEIGHT / 2;
								layerSizes[5][7][0] = Math.floor(BOX_WIDTH / 2);
								layerSizes[5][7][1] = BOX_HEIGHT / 2;
								// box image and text names
								layerSizes[5][8][0] = `<img src="./sys_img/damiy4.png" alt="ダミー画像1" width="${Math.floor(BOX_WIDTH / 2)}px" height="${Math.floor(BOX_HEIGHT / 2)}px">`;
								layerSizes[5][8][1] = `<img src="./sys_img/damiy4.png" alt="ダミー画像2" width="${Math.floor(BOX_WIDTH / 2)}px" height="${Math.floor(BOX_HEIGHT / 2)}px">`;
								layerSizes[5][9][0] = `<img src="./sys_img/damiy4.png" alt="ダミー画像3" width="${Math.floor(BOX_WIDTH / 2)}px" height="${Math.floor(BOX_HEIGHT / 2)}px">`;
								layerSizes[5][9][1] = `<img src="./sys_img/damiy4.png" alt="ダミー画像4" width="${Math.floor(BOX_WIDTH / 2)}px" height="${Math.floor(BOX_HEIGHT / 2)}px">`;
								layerSizes[5][10][0] = '<h1>ダミーテキスト1</h1>';
								layerSizes[5][10][1] = '<h1>ダミーテキスト2</h1>';
								layerSizes[5][11][0] = '<h1>ダミーテキスト3</h1>';
								layerSizes[5][11][1] = '<h1>ダミーテキスト4</h1>';
								// display
						}
						// ここにタイルがクリックされたときの処理を追加できます
						alert('Tile ' + tile_number + ' processed!');
						tilep_clic_show(tile_no);
                        show_I_Cell_back(te_field_noin, tile_no);
					}
					function tilep_clic_show(tile_number) {
						tile_number0 = tile_number;
						tile_no = Number(tile_number);
						alert('Tile ' + tile_number + ' clicked!');
						if (tile_no != 0) {
							layerWA.style.display = 'block';
						} 
						switch (tile_no) {
							case 0: // clear all
								// hide layerWA
								layerWA.style.display = 'none';
								// clear display areas
								return;
								break;
							case 1: // dummy
								// 1 single box     [5][0][0-1]([5][8][0])       [5][4][0-1]([5][10][0])
								// display
								document.getElementById('L6_T_Image').innerHTML = `<table sellspasing="0"><tr><td width="${layerSizes[5][0][0]}px" height="${layerSizes[5][0][1]}px">${layerSizes[5][8][0]}</td></tr></table>`;

								document.getElementById('L6_T_Text') .innerHTML = `<table sellspasing="0"><tr><td width="${layerSizes[5][4][0]}px" height="${layerSizes[5][4][1]}px">${layerSizes[5][10][0]}</td></tr></table>`;//1
								break;
							case 2: // 2 box w half 500 501     [5][0-1][0-1]([5][8][0-1])       [5][4-5][0-1]([5][10][0-1])
								// display
								document.getElementById('L6_T_Image').innerHTML = `<table sellspasing="0"><tr><td width="${layerSizes[5][0][0]}px" height="${layerSizes[5][0][1]}px">${layerSizes[5][8][0]}</td><td width="${layerSizes[5][1][0]}px" height="${layerSizes[5][1][1]}px">${layerSizes[5][8][1]}</td></tr></table>`;

								document.getElementById('L6_T_Text') .innerHTML = `<table sellspasing="0"><tr><td width="${layerSizes[5][4][0]}px" height="${layerSizes[5][4][1]}px">${layerSizes[5][10][0]}</td><td width="${layerSizes[5][5][0]}px" height="${layerSizes[5][5][1]}px">${layerSizes[5][10][1]}</td></tr></table>`;
								break;
							case 3: // 2 box h half     [5][0-1][0-1]([5][8][0-1])       [5][4-5][0-1]([5][10][0-1])
								// display
								document.getElementById('L6_T_Image').innerHTML = `<table sellspasing="0"><tr><td width="${layerSizes[5][0][0]}px" height="${layerSizes[5][0][1]}px">${layerSizes[5][8][0]}</td></tr><tr><td width="${layerSizes[5][1][0]}px" height="${layerSizes[5][1][1]}px">${layerSizes[5][8][1]}</td></tr></table>`;

								document.getElementById('L6_T_Text') .innerHTML = `<table sellspasing="0"><tr><td width="${layerSizes[5][4][0]}px" height="${layerSizes[5][4][1]}px">${layerSizes[5][10][0]}</td></tr><tr><td width="${layerSizes[5][5][0]}px" height="${layerSizes[5][5][1]}px">${layerSizes[5][10][1]}</td></tr></table>`;
								break;
							case 4:  // 3 1/3w *3        [5][0-1][0-2]([5][8-9][0-1-0])       [5][4-6][0-1-0]([5][10-11][0-1-0])
								document.getElementById('L6_T_Image').innerHTML = `<table sellspasing="0"><tr><td width="${layerSizes[5][0][0]}px">${layerSizes[5][8][0]}</td><td width="${layerSizes[5][1][0]}px">${layerSizes[5][8][1]}</td><td width="${layerSizes[5][2][0]}px">${layerSizes[5][9][0]}</td></tr></table>`;
								document.getElementById('L6_T_Text') .innerHTML = `<table sellspasing="0"><tr><td width="${layerSizes[5][4][0]}px" height="${layerSizes[5][4][1]}px">${layerSizes[5][10][0]}</td><td width="${layerSizes[5][5][0]}px" height="${layerSizes[5][5][1]}px">${layerSizes[5][10][1]}</td><td width="${layerSizes[5][6][0]}px" height="${layerSizes[5][6][1]}px">${layerSizes[5][11][0]}</td></tr></table>`;
								break;
							case 5:  // 3 1/3h *3        [5][0-1][0-2]([5][8-9][0-1-0])       [5][4-6][0-1-0]([5][10-11][0-1-0])
								// display
								document.getElementById('L6_T_Image').innerHTML = `<table sellspasing="0">
								<tr><td width="${layerSizes[5][0][0]}px" height="${layerSizes[5][0][1]}px">${layerSizes[5][8][0]}</td>
								</tr>
								<tr><td width="${layerSizes[5][1][0]}px" height="${layerSizes[5][1][1]}px">${layerSizes[5][8][1]}</td>
								</tr>
								<tr><td width="${layerSizes[5][2][0]}px" height="${layerSizes[5][2][1]}px">${layerSizes[5][9][0]}</td>
								</tr>
								</table>`;

								document.getElementById('L6_T_Text') .innerHTML = `<table sellspasing="0"><tr><td width="${layerSizes[5][4][0]}px" height="${layerSizes[5][4][1]}px">${layerSizes[5][10][0]}</td></tr><tr><td width="${layerSizes[5][5][0]}px" height="${layerSizes[5][5][1]}px">${layerSizes[5][10][1]}</td></tr><tr><td width="${layerSizes[5][6][0]}px" height="${layerSizes[5][6][1]}px">${layerSizes[5][11][0]}</td></tr></table>`;
								break;
							case 6: // 3 1/2w half h single    [5][0-2][0-2]([5][8-9][0-1-0])       [5][4-6][0-1-0]([5][10-11][0-1-0])
								// display
								document.getElementById('L6_T_Image').innerHTML = `<table sellspasing="0">
								<tr><td width="${layerSizes[5][0][0]}px" height="${layerSizes[5][0][1]}px">
										${layerSizes[5][8][0]}
									</td>
									<td width="${layerSizes[5][1][0]}px" height="${layerSizes[5][1][1]}px">
										${layerSizes[5][8][1]}
									</td>
								</tr>
								<tr><td colspan="2" width="${layerSizes[5][2][0]}px" height="${layerSizes[5][2][1]}px">
										${layerSizes[5][9][0]}
									</td>
								</tr>
								</table>`;

								document.getElementById('L6_T_Text') .innerHTML = `<table sellspasing="0"><tr><td width="${layerSizes[5][4][0]}px" height="${layerSizes[5][4][1]}px">${layerSizes[5][10][0]}</td><td width="${layerSizes[5][5][0]}px" height="${layerSizes[5][5][1]}px">${layerSizes[5][10][1]}</td></tr><tr><td colspan="2" width="${layerSizes[5][6][0]}px" height="${layerSizes[5][6][1]}px">${layerSizes[5][11][0]}</td></tr></table>`;
								break;
							case 7: // 3 1w single 1/2h *2  [5][0-2][0-2]([5][8-9][0-1-0])       [5][4-6][0-1-0]([5][10-11][0-1-0])
								// display
								document.getElementById('L6_T_Image').innerHTML = `<table sellspasing="0"><tr>
								<td colspan="2" width="${layerSizes[5][0][0]}px" height="${layerSizes[5][0][1]}px">
									${layerSizes[5][8][0]}
								</td>
								</tr>
								<tr>
									<td width="${layerSizes[5][1][0]}px" height="${layerSizes[5][1][1]}px">
										${layerSizes[5][8][1]}
									</td>
									<td width="${layerSizes[5][2][0]}px" height="${layerSizes[5][2][1]}px">
										${layerSizes[5][9][0]}
									</td>
								</tr></table>`;

								document.getElementById('L6_T_Text') .innerHTML = `<table sellspasing="0"><tr><td colspan="2" width="${layerSizes[5][4][0]}px" height="${layerSizes[5][4][1]}px">${layerSizes[5][10][0]}</td></tr><tr><td width="${layerSizes[5][5][0]}px" height="${layerSizes[5][5][1]}px">${layerSizes[5][10][1]}</td><td width="${layerSizes[5][6][0]}px" height="${layerSizes[5][6][1]}px">${layerSizes[5][11][0]}</td></tr></table>`;
								break;
							case 8:  // 4 quade  [5][0-3][0-1-01]([5][8-11][0-1-0-1])       [5][4-7][0-1-0-1]([5][10-11][0-1-0-1])
								// display
								document.getElementById('L6_T_Image').innerHTML = `<table sellspasing="0">
								<tr>
								<td width="${layerSizes[5][0][0]}px" height="${layerSizes[5][0][1]}px">
								${layerSizes[5][8][0]}
								</td>
								<td width="${layerSizes[5][1][0]}px" height="${layerSizes[5][1][1]}px">
								${layerSizes[5][8][1]}
								</td>
								</tr>
								<tr>
								<td width="${layerSizes[5][2][0]}px" height="${layerSizes[5][2][1]}px">
								${layerSizes[5][9][0]}
								</td>
								<td width="${layerSizes[5][3][0]}px" height="${layerSizes[5][3][1]}px">
								${layerSizes[5][9][1]}
								</td>
								</tr>
								</table>`;

								document.getElementById('L6_T_Text') .innerHTML = `<table sellspasing="0"><tr><td width="${layerSizes[5][4][0]}px" height="${layerSizes[5][4][1]}px">${layerSizes[5][10][0]}</td><td width="${layerSizes[5][5][0]}px" height="${layerSizes[5][5][1]}px">${layerSizes[5][10][1]}</td></tr><tr><td width="${layerSizes[5][6][0]}px" height="${layerSizes[5][6][1]}px">${layerSizes[5][11][0]}</td><td width="${layerSizes[5][7][0]}px" height="${layerSizes[5][7][1]}px">${layerSizes[5][11][1]}</td></tr></table>`;
								break;
							default:
								// display 4 quade max
								document.getElementById('L6_T_Image').innerHTML = `<table sellspasing="0">
								<tr>
								<td width="${layerSizes[5][0][0]}px" height="${layerSizes[5][0][1]}px">
								${layerSizes[5][8][0]}"
								</td>
								<td width="${layerSizes[5][1][0]}px" height="${layerSizes[5][1][1]}px">
								${layerSizes[5][8][1]}"
								</td>
								</tr>
								<tr>
								<td width="${layerSizes[5][2][0]}px" height="${layerSizes[5][2][1]}px">
								${layerSizes[5][9][0]}"
								</td>
								<td width="${layerSizes[5][3][0]}px" height="${layerSizes[5][3][1]}px">
								${layerSizes[5][9][1]}"
								</td>
								</tr>
								</table>`;

								document.getElementById('L6_T_Text') .innerHTML = `<table sellspasing="0"><tr><td width="${layerSizes[5][4][0]}px" height="${layerSizes[5][4][1]}px">${layerSizes[5][10][0]}</td><td width="${layerSizes[5][5][0]}px" height="${layerSizes[5][5][1]}px">${layerSizes[5][10][1]}</td></tr><tr><td width="${layerSizes[5][6][0]}px" height="${layerSizes[5][6][1]}px">${layerSizes[5][11][0]}</td><td width="${layerSizes[5][7][0]}px" height="${layerSizes[5][7][1]}px">${layerSizes[5][11][1]}</td></tr></table>`;								break;
						}
					}
				</script>




			</div><!-- menew10 end -->
			<div id="menew_p11">
				<!-- オーディオ制御パネル -->
				<div id="audio1-panel">
					　<b>🔊 オーディオ制御</b><br>
					<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>
						　　<button class="audio-btn" onclick="toggleMute()">🔇 ミュート</button>
						<button class="audio-btn" onclick="stopAllAudio()">⏹️ 停止</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><br>
						<br>
					</div>
				</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><br>
				<br> 
			</div><!-- menew22 end --> 
		</div><!-- popup end --> 
	</div><!-- overlay_bass2 end -->
	<!-- ポップアップウィンドウ2 -->
	<div id="overlay_bass2"> 
		<br><br> 2ベース
		<div id="popup_2"> 
			<div id="grip2_lin"> Grip Line - Popup 2 
				<button type="button" id="close_pop2" 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="movePopup2('left');">←</button> 
					<button onclick="movePopup2('right');">→</button> 
					<button onclick="movePopup2('up');">↑</button> 
					<button onclick="movePopup2('down');">↓</button> 
					<button onclick="movePopup2('center');">中央</button> 
				</div>
			</div><!-- menew12 end --> 
			<div id="menew_p22"> 
				<p>これはMenu2の内容です。</p> 
				<button onclick="movePopup2('left');">←左</button> 
				<button onclick="movePopup2('right');">→右</button> 
				<button onclick="movePopup2('up');">↑上</button> 
				<button onclick="movePopup2('down');">↓下</button> 
				<button onclick="movePopup2('center');">中央</button> 
			</div><!-- menew22 end --> 
		</div><!-- popup end --> 
	</div><!-- overlay_bass2 end -->
	<!-- ポップアップズ ここまで -->
<br><br><br><br><br>　　　Get<br>　　　<textarea id="output_area" rows="20" cols="80">
<?php 
// echo "<br><br><br><br><br><br>content1: content1<br>";
// main_bessou_dir を取得する関数
global $main_bessou_dir;
global $main_bessou_dir1;
global $steytas0;
global $write_dir0;
    function get_main_bessou_dir() {
        $filename = 'C:\Apache2.2\htdocs\my_book\pack_in_5_php\master\rede_main.txt';
        echo '//#php ' . $filename . "<br>\n";
        $main_bessou_dir = 'C:\Apache2.2\htdocs\my_book\pack_in_5_php\master\\';
        $main_bessou_dir1 = 'C:\Apache2.2\htdocs\my_book\pack_in_5_php\master\\';
        $write_dir0 = 'C:\Apache2.2\htdocs\my_book\pack_in_5_php\master\\';
        $lines = [];
        $line = '';
        if (file_exists($filename) && is_readable($filename)) {
            $lines = file($filename, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
            $key0 = 0;
            $key_count = count($lines);
            while ($key0 < $key_count) {
               // $line = $lines[$key0];
                if (isset($lines[$key0]) && $key0 == 0) {
                    $main_bessou_dir = $lines[0];
                    echo "//#php main_bessou_dir: $main_bessou_dir<br>\n";
                }elseif (isset($lines[$key0]) && $key0 == 1) {
                    $main_bessou_dir1 = $lines[1];
                    echo "//#php stato to end: $main_bessou_dir1<br>\n";
                }elseif (isset($lines[$key0]) && $key0 == 2) {
					if (isset($lines[$key0])) {
						$write_dir0 = $lines[2];
					}else{
						$write_dir0 = $main_bessou_dir;
					}
                    echo "//#php write_dir0: $write_dir0<br>\n";
				} else {
					break;

					// それ以降の行は無視
				}
                $key0++;
            }            
        }
		return ([$main_bessou_dir, $main_bessou_dir1, $write_dir0]);
    }
	list($content, $content1, $write_dir0) = get_main_bessou_dir(); // # 確認: http://localhost/my_book/book5_new5b4_2.php でエラーが消えること
?>
<?php
// ファイル読み込み関数
$steytas0 = '';
//echo "<br><br><br><br><br><br>content: $content<br>";
//echo "content1: $content1<br>";
$php_30dir = 0;
$arr_stat_end = [0, 0];
$content1 = preg_replace('/\r?\n/', ' to', $content1);
$arr_stat_end =  preg_split('/\s?to\s?/', $content1); // "10 to20\r\n30" ok
// arr_stat_end[0]と[1]が数値でない場合は0にする（is_numericで判定）
if (!is_numeric($arr_stat_end[0]) || !is_numeric($arr_stat_end[1])) {
    $arr_stat_end[0] = 0;
    $arr_stat_end[1] = 0;
}
// $filename2 = $content + $php_30dir + '\\0\\.txt';
$all_line = '';
function read_file_lines($filename2, $steytas0) {  // number . 小数点扱いになる。
    $line_out = []; // 初期化
    $lines = [];
    $line = '';
    if (file_exists($filename2) && is_readable($filename2)) {
        $steytas0 .= "read_file_lines called with filename: {$filename2}<br>\n"; // デバッグ用出力
        echo "//#php read_file_lines called with filename: {$filename2}<br>\n"; // デバッグ用出力
		$lines = file($filename2, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
        $key0 = 0;
        $key_count = count($lines);
        while ($key0 < $key_count) {
            $line = $lines[$key0];
            $line_out[$key0] = $line; // 各行を配列に追加
            $key0++;
        }
	    return array_values([$line_out, $steytas0]);
    } else {
        $steytas0 .= "ファイルが存在しないか、読み取り不可: {$filename2}<br>\n"; // デバッグ用出力
        return array_values([$line_out, $steytas0]); // 空の配列を返す
    }
}
// 指定された範囲のファイルを読み込む
// echo '<br><br><br><br><br><br>';//<textarea id="output_area" rows="20" cols="80">';
$line_out = [];
for ($i = (int)$arr_stat_end[0]; $i <= (int)$arr_stat_end[1]; $i++) {
    $php_30dir = (int)(($i / 30) * 3); // 30ファイルごとにディレクトリが変わる
    // echo "php_30dir: $php_30dir<br>";
    $filename2 = (string)$content . (string)$php_30dir . '\\' . (string)$i . '.txt';
    $steytas0 .= "読み込み中のファイル: $filename2<br>\n";
    $arr_lines = array();
    list($arr_lines, $steytas0) = read_file_lines((string)$filename2, (string)$steytas0);
	// 配列全体を表示（デバッグ用）
	$line = '';
	$key0 = 0;
    $key_count = count($arr_lines);
    while ($key0 < $key_count) {
        $line = $arr_lines[$key0];
        // $line_out[$key0] = $line; // 各行を配列に追加
    	if (preg_match('/^#\s/', $line)) {
			$all_line .= '//' . $line . " /\n"; // コメント行はそのまま連結
		} else {
        	$all_line .= '//' . $i . '/*'.$line . " */\n"; // 各行を連結
		}
		$key0++;
	}
    $steytas0 .= "<br> --- $arr_stat_end[0]  in $i out $arr_stat_end[1] --- <br>";
}
// 配列全体を表示
// echo "<pre>" . print_r($arr_lines, true) . "</pre>\n";

echo $all_line;
// print_r($all_line); // テキスターはそのまま表示\nは改行として認識される
//echo '</textarea>test　<textarea rows="20" cols="80">' . $steytas0 . '</textarea><br>';
?>
</textarea> <button id=renew onclick="getarrs_get();">Renew</button> <textarea rows="20" cols="80">
<?php
if (isset($_POST['write'])) {
    $test_arrs = $_POST['test_arrs'];
    echo "フォーム書き込みが受信されました。\n";
    write_maik();
}else{
    // フォームが送信されていない場合の処理
    echo $steytas0 . "\n". "フォームが送信されていません。\n";
}
// ファイル書き込み関数
function write_maik(){
	global $write_dir0;
	$test_arr_str = $_POST['test_arrs'];
	$test_arrs = preg_split('/\r?\n/', $test_arr_str);
	$arr_w_lines = '';
	$write_filename = $write_dir0 . 'written_output.txt';
	$split_dir = ['none'];
	$iii = 0;
	$bak_split_dir = '';
    if (isset($_POST['write']) && $_POST['write'] == 'single') {
		$write_filename = $write_dir0 . "0\\written_output_single.txt";
        while ($iii < count($test_arrs)) {
            // phpコメント行はスキップ
            if (preg_match('/^\/\/#php\s/', $test_arrs[$iii])) {
                $iii++;
                continue;
            }
            $arr_w_lines .= $test_arrs[$iii] . "\n";
            $iii++;
        }
        $dir_path = dirname($write_filename);
        if (!is_dir($dir_path)) {
            mkdir($dir_path, 0777, true);
        }
        file_put_contents($write_filename, $arr_w_lines);
 		echo "データがファイルに書き込まれました: \n$write_filename\n";
		return;
    } else {
        // 複数ファイルに分割して書き込む処理 
        $b_maches = 0; //  d の数値を保持する変数
        $php_30dir = 0;
        while ($iii < count($test_arrs)) {
            // phpコメント行はスキップ
            if (preg_match('/^\/\/#php\s/', $test_arrs[$iii])) {
                $iii++;
                continue;
            }
            $split_dir[0] = preg_split('/\/\*/', $test_arrs[$iii]);
            if(preg_match('/\/\/\d+/', $split_dir[0][0], $matches)){
                $split_dir[0] = preg_replace('/^\/\//', '', $split_dir[0][0]); // # d 
                $b_maches = $split_dir[0];
            }else{
                $split_dir[0] = $b_maches;
            }
            $b_maches = $split_dir[0];
          if ($bak_split_dir != $split_dir[0]) {
                // txt 書き込み
                if ($arr_w_lines != '') {
                    $write_filename = $write_dir0 . (string)$php_30dir . '\\' . (string)$bak_split_dir . '.txt';
                    $dir_path = dirname($write_filename);
                    if (!is_dir($dir_path)) {
                        mkdir($dir_path, 0777, true);
                    }
                    file_put_contents($write_filename, $arr_w_lines);
                    echo "データがファイルに書き込まれました $iii: \n$write_filename\n";
					$arr_w_lines = '';
                }
			}
            $php_30dir = (int)(($b_maches / 30) * 3);
            $bak_split_dir = $split_dir[0];	
			$arr_w_lines .= $test_arrs[$iii] . "\n";
			$iii++;
		}
        $php_30dir = (int)(($b_maches / 30) * 3);
        $write_filename = $write_dir0 . (string)$php_30dir . '\\' . (string)$b_maches . '.txt';
        $dir_path = dirname($write_filename);
        if (!is_dir($dir_path)) {
            mkdir($dir_path, 0777, true);
        }
        file_put_contents($write_filename, $arr_w_lines);
        $arr_w_lines = '';
        echo "データがファイルに書き込まれました end $iii: \n$write_filename\n";
    }    
}
?>
</textarea><br>
	<!-- footer area --> 
<div id="footer_area"> 
	<button type="button" onclick="showPopup2();">ポップアップ2 を開く</button>
	　　フッターエリア　　<br>
	<!-- マウス位置モニター（フッターエリア内・上層表示） -->
	<span id="inisyle">tattyan ver.0.5.6</span>
	</div>
<div id="mouse_navi" ><table align="center"><tr><td><button type="button" onclick="basyo_info();">移動</button>get<button type="button" onclick="mause_get('x');">x</button>
<button type="button" onclick="mause_get('y');">y</button> <button type="button" onclick="mause_get('xy');">xy</button><button type="button" id="mause_close_but" onclick="musee_nav_close();">×</button></td></tr>
<tr><td whide="220px"><span id="mause_codisyon">ivent</span></td></tr><tr><td><span id="mouse_info">X: -58, Y: -491</span></td></tr></table>	
</div><!-- footer_area end -->
<div id="in_form_in"><form method="post" action="./book5_new5b5_1.php">　　　<textarea rows="10" cols="180" name="test_arrs" id="test_arrs"></textarea>
<!-- <button type="button" onclick="getarrs_get();">get arrs</button> -->
<input type="submit" name="write" value="submit"> <input type="submit" name="write" value="single">
</form></div>
<!-- main_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 time4_id;
let mastre = [];
let m_count = 3;
let count_bees= 0;
let stop_resetf = 0;
function Ran_all() {
	if (stop_resetf == 0) {
		m_cont = 0;
		stop_resetf = 1;
		document.getElementById('Ran_all').innerHTML = 'stop';
	} else if (stop_resetf == 1) {
		m_cont = 0;
		stop_resetf = 1;  //stop
		document.getElementById('Ran_all').innerHTML = 'Reset';
		return;
	} else {
		stop_resetf = 0;
		document.getElementById('Ran_all').innerHTML = 'Running';
		stop_resetf = 0;
		stop_reset();
		return;
	}
	m_count = 0;
	count_bees = 0;
	clearInterval(time4_id);
	time4_id = setInterval(Ran_work, 1000); // 1秒ごとにRan_workを呼び出す
	document.getElementById('Ran_all_span').innerHTML = `to end ${length.mastre + 3} sec`;
}
function Ran_work() {
	if (stop_resetf == 1) {
		return;
	}
	// alert('Ran_work called');
	if (m_cont >= length.mastre + 3) {
		stop_resetf = 1;
		stop_reset();
	}

	if (stop_resetf == 0) {
		m_count = m_count + 1;
		if (m_cont < length.mastre + 3 && m_count >= 3) {
			count_bees = m_count - 3;
			if (count_bees <= length.mastre) {
				//let master_name = mastre[count_bees];
				// alert(`master_name: ${master_name}`);
				Read_master(count_bees);
				document.getElementById('Ran_all_span').innerHTML = `to end ${length.mastre - count_bees} sec`;
				m_count = 0;
			}
		}

	}
}
function stop_reset() {
	stop_resetf = 1;
	clearInterval(time4_id);
}
let cheng_w_dir = 'sample'; //初期にはサンプルを入れる。
let my_bass = [];
function Read_master(count_bees) {
    let base_do_id = document.getElementById('main_ukewatashi');
    my_bass = base_do_id.value.split(/\r?\n/);

}



function getarrs_get() {
	// 初期生成できていないときの処理;
    document.getElementById('in_form_in').innerHTML = `<form method="post" action="./${me_script}">　　　<textarea rows="10" cols="180" name="test_arrs" id="test_arrs"></textarea>
<!-- <button type="button" onclick="getarrs_get();">get arrs</button> -->
<input type="submit" name="write" value="submit"> <input type="submit" name="write" value="single"></form>`;
	let arrs_str_id = document.getElementById('output_area');
	let arrs_str = arrs_str_id.value;
	my_bass = arrs_str.split(/\r?\n/);
	document.getElementById('test_arrs').value = 'てすと表示\n';
	for (let i = 0; i < my_bass.length; i++) {
		document.getElementById('test_arrs').value += `${my_bass[i]}\n`;
	}
	// 初期テストもやらないでわかるってすごいなぁout_area受けられるのわかっているん?
     //さすがにそれは無理かじゃデーターどうして得るん　おれは二の手考えているわ。

}




let step_no = 0;
let no_no = 0;
task_step_1(step_no, no_no);

task_step_1(step_no, no_no); // 別のループ処理 1 step ok.

task_step_1(step_no, no_no);

function task_step_1(no_to,no_no) {
	// in no_to: 全部処理　新しいナンバーを+1で得ている。
	step_no = Number(no_to);
	if (no_no == undefined) {
		no_no = 0;
	}
	let no_get = Number(no_no);
	while (no_get < my_bass.length) {
		let line_get = my_bass[no_get];
		// alert(`line_no: ${no_get}`);
		if (line_get.match(/^\/?\/?#/) || line_get.trim() == '') {
			// コメント行または空行はスキップ
			// コメント行や空行は何もせず次の行へ
			no_get = no_get + 1;

			continue;
		} else if (line_get.match(/^\/\/\d+\/\*/)) {
			// コメントでない行の処理
			let line_no = line_get.split('/*')[0].replace('//', '').trim();
			if (Number(step_no) != Number(line_no)) {
				console.log(`次の処理行番号不一致: 期待される行番号 ${no_get}, 実際の行番号 ${line_no}`);
				step_no = Number(line_no); // 行番号を修正
				no_no = no_get;
				//  task_step_1(step_no, no_no);
				return;
			}
			console.log('コメント形式行: ' + line_get);
			no_get = no_get + 1;
			// 未作成の処理系統合
			continue; // 同一ステップ内。
		} else {
			// 非コメント行の処理
			// 命令を知らない場合はAIとして処理（例: コンソール出力）
			console.log('AI命令未定義行: ' + line_get);
			// 処理が完了したら次の行へ
			no_get = no_get + 1;
			return;  // in "//end;/**/;\n" 途中でも止められる。未定コード
		}
	}
	no_no = my_bass.length;
}






// 最大幅・高さを指定して比率でリサイズ（1pxでも超えたら比率調整）
function resizeByMax(width, height, maxWidth, maxHeight) {
  // どちらもmaxを超えている場合
  if (width > maxWidth && height > maxHeight) {
    // どちらの比率が小さいか（＝どちらがより縮小が必要か）
    let ratio = Math.min(maxWidth / width, maxHeight / height);
	let ratio2 = ratio.toFixed(2); // "1.00"（文字列）
	let ratio3 = Math.round(ratio * 100) / 100; // 1.00（数値）
    return {
      width: Math.floor(width * ratio),
      height: Math.floor(height * ratio),
	  ratio: ratio3
    };
  }
  // どちらかだけ超えている場合
  else if (width > maxWidth) {
    let ratio = maxWidth / width;
	let ratio2 = ratio.toFixed(2); // "1.00"（文字列）
	let ratio3 = Math.round(ratio * 100) / 100; // 1.00（数値）
    return {
      width: maxWidth,
      height: Math.floor(height * ratio),
	  ratio: ratio3
    };
  }
  else if (height > maxHeight) {
    let ratio = maxHeight / height;
	let ratio2 = ratio.toFixed(2); // "1.00"（文字列）
	let ratio3 = Math.round(ratio * 100) / 100; // 1.00（数値）
    return {
      width: Math.floor(width * ratio),
      height: maxHeight,
	  ratio: ratio3
    };
  }
  // どちらもmax以下ならそのまま
  else {
    return {
      width: width,
      height: height,
	  ratio: 1.0
    };
  }
}

	// マウス位置モニター制御
	let mouseInfo = document.getElementById('mouse_info');
	let mousenavi = document.getElementById('mouse_navi');
	let blawsar_width = window.innerWidth; 
	let blawsar_height = window.innerHeight;
	let wid_info = blawsar_width - 200; 
	let hei_info = blawsar_height - 100;
	mousenavi.style.top = `${hei_info}px`;
	mousenavi.style.left = `${wid_info}px`;
	
    let mus_info_basyo = 0; // 0 to 3
	function basyo_info() {        // 上右隅と下右隅の移動		alert('移動ボタンが押されました' + mus_info_basyo);
		mus_info_basyo = mus_info_basyo + 1;
		if (mus_info_basyo > 1){
			mus_info_basyo = 0;
		}
		if (mus_info_basyo == 0) {
            mousenavi.style.top = '16px';
	       // mousenavi.style.left = `${wid_info}px`;
			mousenavi.style.background = '#999999';	
			mouseInfo.style.background = '#999999';	
			mouseInfo.innerText = `X: ${muse_x}, Y: ${muse_y}`;			
		} else if(mus_info_basyo == 1){
            mousenavi.style.top = `${hei_info}px`;
	      //  mousenavi.style.left = `${wid_info}px`;
			mousenavi.style.background = '#000000';
			mouseInfo.style.background = '#000000';
			mouseInfo.innerText = `X: ${muse_x}, Y: ${muse_y}`;
		}
	}
	/* */
    // ポップアップウィンドウの表示と非表示の制御 
	let overlay_bass1 = document.getElementById('overlay_bass1'); 
	let overlay_bass2 = document.getElementById('overlay_bass2'); 
    let o_set_width = 1500; // オーバーレイのデフォルト幅
    let o_set_height = 700; // オーバーレイのデフォルト高さ
	let popup1 = document.getElementById("popup_1"); 
	let popup2 = document.getElementById("popup_2"); 
    let p_set_width = 480; // ポップアップのデフォルト幅
    let p_set_height = 320; // ポップアップのデフォルト高さ
	let grip_lin1 = document.getElementById("grip1_lin"); 
	let grip_lin2 = document.getElementById("grip2_lin"); 
	let close_pop1 = document.getElementById("close_pop1"); 
	let close_pop2 = document.getElementById("close_pop2");
	//let popup_content1 = document.getElementById("popup_content1"); 
	//let popup_content2 = document.getElementById("popup_content2"); 
	let this_p_layer = 0; // sample2.htmlから移植：interval click制御変数 
	let time1_id;
	const TIMER_INTERVAL_MS = 160; // 0.160sec間隔（さらに短縮 - よりレスポンシブ）ダブルクリックを1.6sec内で検出
    let time2_id; 
    let TIMER_INTERVAL_MS2 = 1500; // 1sec間隔
	let coun_a = 0;     // タイマー1起動回数
	let c_nomal_lr = 0;  // 
	let coun_b = 0;     // clickで　タイマー1何回起動してるかが入る 0.16 * n sec目のアクション
	let muse_x = 0; // マウス座標x
	let muse_y = 0; // マウス座標y
    let move_x = 0;  // マウス一回前覚えx座標
    let move_y = 0;  // マウス一回前覚えy座標
	let sensitivity = 4; // 動作感度 4ピクセル以上動いたらドラッグ中とみなす
	let move_on = false; // マウス移動中フラグ
    let move_point = false; // 十分に動いたらドラッグ中とみなす
    let e_button = 0; // マウスボタン状態 左0 中央1 右2: 押されている押されたボタンの種類
	let dwbul_clikk_flag = false; // 時間内に二回目のclickでセットされる
	let drag_ing = false;       // クリックしながら位置変移でセットされる
	let appNameRagFlag = false;  // clickアクションでセットされる
    let appNameRagFlag_not = true;   // マウスが離されるとセットされる
    let pop_width = 480; // popup_n.style.width.replace('px',''); 
    let pop_height = 320; // popup_n.style.height.replace('px','');
	let mause_codisyon = document.getElementById("mause_codisyon");    
    // ポップアップサイズ設定
	let pop_left_x = 0 || 300; // スタイルシート設定値left
	let pop_top_y = 0 || 300;   // スタイルシート設定値top
	let clickMode = 0; // 0: 絶対座標、1: 相対座標、2: 保持　3: 解除 to 0
	let baseX = 0;  // マウス一回前覚えx座標3
	let baseY = 0;  // マウス一回前覚えy座標3
	let relativeX = 0;// マウス一回前覚えx座標4
	let relativeY = 0; // マウス一回前覚えy座標4
	let popup_on = false; // popup表示中フラグ
	// let muse_on = true;   //# マウス移動監視フラグ
    let mouseup_count = 0; // clickのみの回数アップ
	// ポップアップ表示機能
    let blawsar0_width = window.innerWidth - 40; 
    let blawsar0_height = 700;
    let tmp_w = ((blawsar0_width - pop_width) / 2) - 20;
    let tmp_h = ((blawsar0_height - pop_height) / 2) - 20;
    let centerX = Math.floor(tmp_w); 
    let centerY = Math.floor(tmp_h);
	function showPopup1() { 
		if (this_p_layer != 1 && this_p_layer != 0) { 
			closePopup(); 
		} 
		this_p_layer = 1; 
        overlay_bass1.style.display = "block";
        overlay_bass1.style.width = (window.innerWidth - 60) + 'px'; //サイドバー分を引く
        overlay_bass1.style.height = '700px';
        blawsar0_width = overlay_bass1.style.width.replace('px', '') || window.innerWidth - 60;
        blawsar0_height = overlay_bass1.style.height.replace('px','') || 700; 
        pop_width = popup1.style.width.replace('px','') || p_set_width;  
        pop_height = popup1.style.height.replace('px','') || p_set_height;
        tmp_w = ((blawsar0_width - pop_width) / 2) - 20;
        tmp_h = ((blawsar0_height - pop_height) / 2) - 20;
        centerX = Math.floor(tmp_w); 
        centerY = Math.floor(tmp_h);
		popup1.style.left = centerX + 'px'; 
		popup1.style.top = centerY + 'px'; 
        popup_on = true;
        showPop(); 
	} 

	function showPopup2() { 
		if (this_p_layer != 2 && this_p_layer != 0) {
			 closePopup(); 
		} 
		this_p_layer = 2; 
        overlay_bass2.style.display = "block";
        overlay_bass2.style.width = (window.innerWidth - 60) + 'px'; //サイドバー分を引く
        overlay_bass2.style.height = '700px';
        blawsar0_width = overlay_bass2.style.width.replace('px', '') || window.innerWidth - 60;
        blawsar0_height = overlay_bass2.style.height.replace('px','') || 700; 
        pop_width = popup2.style.width.replace('px','') || p_set_width;  
        pop_height = popup2.style.height.replace('px','') || p_set_height;
        tmp_w = ((blawsar0_width - pop_width) / 2) - 20;
        tmp_h = ((blawsar0_height - pop_height) / 2) - 20;
        centerX = Math.floor(tmp_w); 
        centerY = Math.floor(tmp_h);
		popup2.style.left = centerX + 'px'; 
		popup2.style.top = centerY + 'px'; 
		popup_on = true;
		showPop(); 
	} 
	function showPop() { 
		alert("ポップアップを開きました");
	}
	function closePopup() { 
		alert("ポップアップを閉じます");
		if (this_p_layer == 1) {
			overlay_bass1.style.display = "none";	
		} else if (this_p_layer == 2) {
			overlay_bass2.style.display = "none";	
		}
		this_p_layer = 0; 
		popup_on = false;
		alert("ポップアップを閉じました"); 
	} 

	/* Menu 表示制御関数 */
	function menew_p1(get1_m_no) { 
		alert("Menu12 を開きます");
		if (get1_m_no == '0') {
			document.getElementById("menew_p10").style.display = "block";
			document.getElementById("menew_p11").style.display = "none"; 
			document.getElementById("menew_p12").style.display = "none";
		} else if (get1_m_no == '1') { 
			document.getElementById("menew_p11").style.display = "block"; 
			document.getElementById("menew_p10").style.display = "none";
			document.getElementById("menew_p12").style.display = "none";
		} else if (get1_m_no == '2') {
			document.getElementById("menew_p12").style.display = "block";
			document.getElementById("menew_p10").style.display = "none"; 
			document.getElementById("menew_p11").style.display = "none"; 
		}
	} 
	function menew_p2(get2_m_no) { 
		alert("Menu22 を開きます"); 
		if (get2_m_no == '1') { 
			document.getElementById("menew_p21").style.display = "block"; 
			document.getElementById("menew_p22").style.display = "none";
		} else if (get2_m_no == '2') {
			document.getElementById("menew_p22").style.display = "block"; 
			document.getElementById("menew_p21").style.display = "none"; 
		}
	} 
	function movePopup1(direction) {
		let currentLeft = 0; 
		let currentTop = 0;
		let pop_width = 0;
		let pop_height = 0;
		if (this_p_layer == 1) {
			currentLeft = parseInt(popup1.style.left) || 300; 
			currentTop = parseInt(popup1.style.top) || 300; 
        	pop_width = popup1.style.width.replace('px','') || p_set_width; 
        	pop_height = popup1.style.height.replace('px','') || p_set_height;
		} else if (this_p_layer == 2) {
			currentLeft = parseInt(popup2.style.left) || 300; 
			currentTop = parseInt(popup2.style.top) || 300;
			pop_width = popup2.style.width.replace('px','') || p_set_width; 
			pop_height = popup2.style.height.replace('px','') || p_set_height;
		}
	    let blawsar0_width = window.innerWidth || o_set_width; 
        let blawsar0_height = window.innerHeight || o_set_height;       
        let tmp_w = Math.floor( centerX);        
        let tmp_h = Math.floor( centerY);
		if (this_p_layer == 1) {
			// overlay_bass1.style.display = "none";
		 	switch(direction) { 
				case 'left': popup1.style.left = (currentLeft - 50) + 'px'; break; 
				case 'right': popup1.style.left = (currentLeft + 50) + 'px'; break; 
				case 'up': popup1.style.top = (currentTop - 50) + 'px'; break; 
				case 'down': popup1.style.top = (currentTop + 50) + 'px'; break; 
				case 'center': popup1.style.left = tmp_w + 'px'; popup1.style.top = tmp_h + 'px'; break; 
			}
		} else if (this_p_layer == 2) {
			// overlay_bass2.style.display = "none";
			switch(direction) { 
				case 'left': popup2.style.left = (currentLeft - 50) + 'px'; break; 
				case 'right': popup2.style.left = (currentLeft + 50) + 'px'; break; 
				case 'up': popup2.style.top = (currentTop - 50) + 'px'; break; 
				case 'down': popup2.style.top = (currentTop + 50) + 'px'; break; 
				case 'center': popup2.style.left = tmp_w + 'px'; popup2.style.top = tmp_h + 'px'; break; 
			} 
		} 
	}
	function movePopup2(direction) {
		let currentLeft = 300; 
		let currentTop = 300; 
        let pop_width = p_set_width; 
        let pop_height = p_set_height;

	
		if (this_p_layer == 1) {
			overlay_bass1.style.display = "none";
			currentLeft = parseInt(popup1.style.left) || 300; 
			currentTop = parseInt(popup1.style.top) || 300; 
	        pop_width = popup1.style.width.replace('px','') || p_set_width; 
       		pop_height = popup1.style.height.replace('px','') || p_set_height;

		} else if (this_p_layer == 2) {
			overlay_bass2.style.display = "none";
			currentLeft = parseInt(popup2.style.left) || 300; 
			currentTop = parseInt(popup2.style.top) || 300;
			pop_width = popup2.style.width.replace('px','') || p_set_width; 
			pop_height = popup2.style.height.replace('px','') || p_set_height;
		}
       	let blawsar0_width = window.innerWidth || o_set_width; 
        let blawsar0_height = window.innerHeight || o_set_height;
        centerX = (blawsar0_width - pop_width) / 2;
        let tmp_w = Math.floor( centerX); 
        centerY = (blawsar0_height - pop_height) / 2;
        let tmp_h = Math.floor( centerY);
		if (this_p_layer == 1) {
			overlay_bass1.style.display = "block";
			switch(direction) { 
				case 'left': popup1.style.left = (currentLeft - 50) + 'px'; break; 
				case 'right': popup1.style.left = (currentLeft + 50) + 'px'; break; 
				case 'up': popup1.style.top = (currentTop - 50) + 'px'; break; 
				case 'down': popup1.style.top = (currentTop + 50) + 'px'; break; 
				case 'center': popup1.style.left = tmp_w + 'px'; popup1.style.top = tmp_h + 'px'; break; 
			} 
		} else if (this_p_layer == 2) {
			overlay_bass2.style.display = "block";
			switch(direction) { 
				case 'left': popup2.style.left = (currentLeft - 50) + 'px'; break; 
				case 'right': popup2.style.left = (currentLeft + 50) + 'px'; break; 
				case 'up': popup2.style.top = (currentTop - 50) + 'px'; break; 
				case 'down': popup2.style.top = (currentTop + 50) + 'px'; break; 
				case 'center': popup2.style.left = tmp_w + 'px'; popup2.style.top = tmp_h + 'px'; break; 
			} 
		}
	} 
	function handleKeyPress(event, choice) { 
		if (event.key == 'Enter' || event.key == ' ') { 
			event.preventDefault(); if (choice == 1) { 
				showPopup1(); 
			} else if (choice == 2) { 
				showPopup2(); 
			} 
		} 
	} 

	// マウス位置表示を閉じる関数
	function musee_nav_close() {
		muse_on = false;
		mousenavi.style.display = 'none';
	}
	function mause_get(axis) {
		if(muse_on == false){
			return;
		}
		let get_xy_inner = mouseInfo.innerText; // "X: xxx, Y: yyy"
		let marr_get_xy = get_xy_inner.split(', ');  // x: xxx と y: yyy に分割
		let mget_x = Number(marr_get_xy[0].split(': ')[1]); // xxx 部分を取得
		let mget_y = Number(marr_get_xy[1].split(': ')[1]); // yyy 部分を取得
		if (mget_x < 0 || isNaN(mget_x)) {mget_x = 0;}
		if (mget_y < 0 || isNaN(mget_y)) {mget_y = 0;}
		if (axis == 'x') {		
			document.getElementById('img_x_pos').value = mget_x;
			alert(`X座標 ${mget_x} をクリップボードにコピーしました`);
		} else if (axis == 'y') {
			document.getElementById('img_y_pos').value = mget_y;
			alert(`Y座標 ${mget_y} をクリップボードにコピーしました`);
		} else if (axis == 'xy') {
			alert(`座標 ${get_xy_inner} をクリップボードにコピーしました`);
			document.getElementById('img_x_pos').value = mget_x;
			document.getElementById('img_y_pos').value = mget_y;	
		}
	}
	
	// クリックでモード切り替え
	function toggleMouseInfoMode(e) {
		if (!(popup_on == true || muse_on == true)) {
			// ポップアップが表示されている場合、またはマウス位置表示がオフの場合は更新しない
			return;
		}
		clickMode = (clickMode + 1) % 4; // 0 → 1 → 2 → 3 → 0 ...
		document.getElementById("mause_codisyon").innerHTML = "click: " + clickMode;
        clearInterval(time3_id);
        time3_id = setInterval(musemonitr_clinig_start, TIMER_INTERVAL_MS3);

		if (clickMode == 1) {
			// 相対座標モードに切り替え：基準点を現在位置に設定
			baseX = e.clientX;
			baseY = e.clientY;
			mouseInfo.style.background = '#999999';
			mousenavi.style.background = '#999999';
			mouseInfo.innerText = `X: 0, Y: 0`;
		} else if (clickMode == 2) {
			// 非表示モードに切り替え
			mouseInfo.style.background = '#0000ff';
			mousenavi.style.background = '#0000ff';
			// xy上書きせずに止めておく
		} else if (clickMode == 3) {
			clickMode = 0;
			// 絶対座標モードに戻る
			mouseInfo.style.background = '#000000';
			mousenavi.style.background = '#000000';
			mouseInfo.style.color = 'white';
			mouseInfo.innerText = `X: ${muse_x}, Y: ${muse_y}`;		
		} else {
			// 絶対座標モードに戻る
			mouseInfo.innerText = `X: ${muse_x}, Y: ${muse_y}`;
		}
	}
	
	// グローバルマウス追跡
	document.addEventListener('mousemove', updateMousePosition);
	
	// ドキュメント全体でのクリックでモード切り替え
	document.addEventListener('click', toggleMouseInfoMode);
	// マウス位置モニター機能
	
	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,3 （何もしない）
        clearInterval(time3_id);
        time3_id = setInterval(musemonitr_clinig_start, TIMER_INTERVAL_MS3);
	}

    let time3_id; 
    let TIMER_INTERVAL_MS3 = 1500; // 2sec間隔
    function musemonitr_clinig_start() {
        if(muse_on == false){
            return;
        }
        document.getElementById("mause_codisyon").innerHTML = '　'; // 0の時
        clearInterval(time3_id); 
    }



	// ボタン値を更新する関数

	// レイヤー管理機能
	let currentAudioVolume = 0.5;
	let isMuted = false;	
	
	// オーディオ機能
	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)();
	}

    // R1パネル表示制御関数
	
	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';
			}
		});
	}
    function initializeAudioPanel() {
        const audio = document.getElementById('ply_1');
        const volumeSlider = document.getElementById('volume_slider');
        const volumeDisplay = document.getElementById('volume_display');
        
        if (!audio || !volumeSlider || !volumeDisplay) return;
        
        // 初期音量設定
        audio.volume = 0.5;
        volumeSlider.value = audio.volume;
        volumeDisplay.textContent = Math.round(audio.volume * 100) + '%';
        
        // スライダー変更時の音量更新
        volumeSlider.addEventListener('input', () => {
            const newVolume = parseFloat(volumeSlider.value);
            audio.volume = newVolume;
            volumeDisplay.textContent = Math.round(newVolume * 100) + '%';
        });
        
        // オーディオ音量変更時のスライダー更新
        audio.addEventListener('volumechange', () => {
            const currentAudioVolume = audio.volume;
            volumeSlider.value = currentAudioVolume;
            volumeDisplay.textContent = Math.round(currentAudioVolume * 100) + '%';
        });
    }

	// 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 openAudioPanel() {
        const panel = document.getElementById('r1_audio_panel');
        if (panel) {
            panel.style.display = 'block';
            initializeAudioPanel();
        }
    }
	// 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.innerText = 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>';
	}

	// クリックでモード切り替え
	// グローバルマウス追跡
    let in_count = 0;
	// sample2.htmlから移植：interval click処理
	function intrval_tim1() {
		// 0.15sec間隔で実行
		// ポップアップが閉じられた場合の終了処理
		if (coun_a > 10) {
            if (muse_on){
                document.getElementById("mause_codisyon").innerHTML = "⏳";
            }
            coun_a = 0;
            coun_b = 0;
			c_nomal_lr = 0; // クリアインターバル時に0にする
            if(muse_on){
			    document.getElementById("mause_codisyon").innerHTML = "🚫";
            }
			clearInterval(time1_id); // クリアインターバル
			return;
		}
        if (coun_a == coun_b) { // coun_a >= 4 && coun_b >= 2
            // マウスアップイベントが発生していない場合のカウントアップ
            if (in_count > 6 || move_point == true) {
                in_count = 0;
            } else {                
                in_count += 1;
            }
            if (muse_on == true){
                switch (in_count) {
                    case 0:
                        if (move_point == true && move_point == true){
                            document.getElementById("mause_codisyon").innerHTML = `✋`; // ドラッグ中
                        } else {
                            document.getElementById("mause_codisyon").innerHTML = `❎`;
                        }
                        break;
                    case 1:
                        switch (e_button) {
                            case 0:
                                document.getElementById("mause_codisyon").innerHTML = `🖱️`; // 左クリック
                                break;
                            case 1:
                                document.getElementById("mause_codisyon").innerHTML = `🖲️`; // 中クリック
                                break;
                            case 2:
                                document.getElementById("mause_codisyon").innerHTML = `🖳️`; // 右クリック
                                break;
                            default:
                                document.getElementById("mause_codisyon").innerHTML = `❓`; // 不明
                            break;
                        }
                        break;
                    case 2:
                        switch (e_button) {
                            case 0:
                                document.getElementById("mause_codisyon").innerHTML = `🖱️🖱️`; // 左クリック
                                break;
                            case 1:
                                document.getElementById("mause_codisyon").innerHTML = `🖲️🖲️`; // 中クリック
                                break;
                            case 2:
                                document.getElementById("mause_codisyon").innerHTML = `🖳️🖳️`; // 右クリック
                                break;
                            default:
                                document.getElementById("mause_codisyon").innerHTML = `❓❓`; // 不明
                            break;
                        }
                        break;
                    case 3:
                        document.getElementById("mause_codisyon").innerHTML = `✅✅✅`;
                        break;
                    case 4:
                        document.getElementById("mause_codisyon").innerHTML = `✅✅✅✅`;
                        break;
                    case 5:
                        document.getElementById("mause_codisyon").innerHTML = `✅✅✅✅✅`;
                        break;
                    default:
                        document.getElementById("mause_codisyon").innerHTML = `OV ${in_count}💦`; // 0の時 
			        break;    
                }
                
            } else if (muse_on == true && move_point == true){
                document.getElementById("mause_codisyon").innerHTML = `✋ Dragging...`; // ドラッグ中
            }
        }
		// ダブルクリック/シングルクリック判定
		if (coun_a >= 2 && coun_b >= 3) {	//二回目が0.16*4経ってから来てる場合。		
			// 最低間隔チェック（0.32秒経過後）
			if (muse_on){
                document.getElementById("mause_codisyon").innerHTML = `🖱️🖱️`; // ダブルクリックとみなす。
			}
			//センターに移動
            if (popup_on == true) {   
	            if (this_p_layer == 1) {
        			overlay_bass1.style.width = (window.innerWidth - 60) + 'px'; //サイドバー分を引く
        			overlay_bass1.style.height = '700px';
        			blawsar0_width = overlay_bass1.style.width.replace('px', '') || window.innerWidth - 60;
        			blawsar0_height = overlay_bass1.style.height.replace('px','') || 700; 
        			pop_width = popup1.style.width.replace('px','') || p_set_width;  
        			pop_height = popup1.style.height.replace('px','') || p_set_height;
        			tmp_w = ((blawsar0_width - pop_width) / 2) - 20;
        			tmp_h = ((blawsar0_height - pop_height) / 2) - 20;
        			centerX = Math.floor(tmp_w); 
        			centerY = Math.floor(tmp_h);
					popup1.style.left = centerX + 'px'; 
					popup1.style.top = centerY + 'px'; 
	            } else if (this_p_layer == 2) {
        			overlay_bass2.style.width = (window.innerWidth - 60) + 'px'; //サイドバー分を引く
        			overlay_bass2.style.height = '700px';
        			blawsar0_width = overlay_bass2.style.width.replace('px', '') || window.innerWidth - 60;
        			blawsar0_height = overlay_bass2.style.height.replace('px','') || 700; 
        			pop_width = popup2.style.width.replace('px','') || p_set_width;  
        			pop_height = popup2.style.height.replace('px','') || p_set_height;
        			tmp_w = ((blawsar0_width - pop_width) / 2) - 20;
        			tmp_h = ((blawsar0_height - pop_height) / 2) - 20;
        			centerX = Math.floor(tmp_w); 
        			centerY = Math.floor(tmp_h);
					popup2.style.left = centerX + 'px'; 
					popup2.style.top = centerY + 'px'; 
	            }
           }
            dwbul_clikk_flag = true; // ダブルクリックとみなす.
			clear_Intervals();        
        }
 		// シングルクリック判定：ダブルクリック時間経過後
		if (coun_a >= 10 && dwbul_clikk_flag == false) {
            dwbul_clikk_flag = false; // ダブルクリックを終了とみなす。
			// 最初のクリックからダブルクリック時間が経過 → シングルクリック確定
			clear_Intervals();           
		} else {
            // まだ判定時間内
    		coun_a += 1;
        }           
    }
	// sample2.htmlから移植：マウスイベント処理
	// grip_lin要素でマウスダウン開始
	function clear_Intervals() {
		clearInterval(time1_id);
		clearInterval(time2_id);
		coun_a = 0;
		coun_b = 0;
		c_nomal_lr = 0;
        in_count = 0;
		if (muse_on){
			document.getElementById("mause_codisyon").innerHTML = "✅";
		}			
	}

	function intrval_tim2() { // timer1の終了より短い時間で動作　ただし、time1のカウントは上がっている。
        // 15sec 後のマウスクリック後に実行される。
        // 最大カウント到達時のリセット
        if (coun_a > 15) {
            coun_a = 0;
            coun_b = 0;            
            c_nomal_lr = 0; // クリアインターバル時に0にする
            clearInterval(time1_id); // 止められなかったら止める
        }
        // 2である。
        clearInterval(time2_id); // クリアインターバル　この後は行われることは無い.        
    }

	// グリップエリアのマウスダウンイベント		
	document.addEventListener("mousedown", (e) => { // singlu dobul の区別はない外か中かも
        if (coun_a < 0 || coun_a > 20) {
            coun_a = 0; // リセット
        }
		muse_x = e.clientX;
		muse_y = e.clientY;
        move_x = muse_x;
        move_y = muse_y;
        e_button = e.button; // 0:左, 1:中, 2:右
    	if (popup_on == true) {
            let currentLeft = 0;
            let currentTop = 0;
			if (this_p_layer == 1) {
                currentLeft = parseInt(popup1.style.left) || 300; 
                currentTop = parseInt(popup1.style.top) || 300;
			} else if (this_p_layer == 2) {
                currentLeft = parseInt(popup2.style.left) || 300; 
                currentTop = parseInt(popup2.style.top) || 300;
			}
		}      
	
		// グリップ状態フラグ設定
		appNameRagFlag = true; // moveで使う
		// グリップエリア内のクリック時処理
		// カウンター初期化	//coun_a = 0;
		coun_b = coun_a; // マウスダウン検出カウント かと磯後に1+されてくるa=b
		// インターバルタイマー開始
		if (appNameRagFlag_not == true) {  //クリックイベントが起きないと休んでいるpcでは0のままなので最初のクリックで1にする。またはタイムアップ後。
			coun_a = 1; // 最初のクリックで1にする
			clearInterval(time1_id); // 既存タイマーがあれば停止
			time1_id = setInterval(intrval_tim1, TIMER_INTERVAL_MS);
			clearInterval(time2_id); // 既存タイマーがあれば停止
			time2_id = setInterval(intrval_tim2, TIMER_INTERVAL_MS2);
			c_nomal_lr = 1; // インターバル設定時に1にする
		}
		// インターバルタイマー開始
        if (coun_a > 15) {
			clear_Intervals();
        }
        appNameRagFlag_not_ = false;		
	});

    // let drag_ing = false; // ドラッグ中フラグ
		// sample2.htmlから移植：マウスムーブでドラッグ処理 
	document.addEventListener("mousemove", (e) => { 
		muse_x = e.clientX; 
		muse_y = e.clientY; 
            // ドラッグ中処理
        if (appNameRagFlag == true) {
            if (muse_x - move_x > 3 && muse_y - move_y > 3 || muse_x - move_x < -3 && muse_y - move_y < -3 || muse_x - move_x > 3 && muse_y - move_y < -3 || muse_x - move_x < -3 && muse_y - move_y > 3) {
                move_point = true; // 十分に動いたらドラッグ中とみなす
            } else {
                move_point = false;
            }
			if (muse_x - move_x > sensitivity && muse_y - move_y > sensitivity || muse_x - move_x < -sensitivity && muse_y - move_y < -sensitivity || muse_x - move_x > sensitivity && muse_y - move_y < -sensitivity || muse_x - move_x < -sensitivity && muse_y - move_y > sensitivity) {
				move_on = true;
			} else {
				move_on = false;
	        }
	        if (popup_on == true && move_on == true) {
                let initialLeft = 0;
                let initialTop = 0;
                let pop_width = 0;
                let pop_height = 0;
				if (this_p_layer == 1) {
                    blawsar0_width = overlay_bass1.style.width.replace('px', '') || window.innerWidth - 60;
                    blawsar0_height = overlay_bass1.style.height.replace('px','') || 700; 
                   	p_set_width = popup1.style.width.replace('px','') || 400;
					p_set_height = popup1.style.height.replace('px','') || 300;
 					pop_width = Number(p_set_width);
                    pop_height = Number(p_set_height);         

                    initialLeft = parseInt(popup1.style.left, 10) 
                    initialTop = parseInt(popup1.style.top,10)
                    if (grip_lin1.style.cursor == 'move') {
                        grip_lin1.style.cursor = 'grabbing'; // ドラッグ中カーソルに変更
                        drag_ing = true; // 実は二つか寝ている。
                    } else {
                        grip_lin1.style.cursor = 'move'; // 通常カーソルに戻す
                        document.getElementById('close_pop1').style.color = "red"; // ドラッグなし
                        drag_ing = false;
                    }
				} else if (this_p_layer == 2) {
                    blawsar0_width = overlay_bass2.style.width.replace('px', '') || window.innerWidth - 60;
                    blawsar0_height = overlay_bass2.style.height.replace('px', '') || 700;
                   	p_set_width = popup2.style.width.replace('px','') || 400;
                    p_set_height = popup2.style.height.replace('px','') || 300;
                    pop_width = Number(p_set_width);
                    pop_height = Number(p_set_height);                    

                    initialLeft = parseInt(popup2.style.left, 10)
                    initialTop = parseInt(popup2.style.top, 10)
                    if (grip_lin2.style.cursor == 'move') {
                        grip_lin2.style.cursor = 'grabbing'; // ドラッグ中カーソルに変更
                        drag_ing = true;
                    } else {
                        grip_lin2.style.cursor = 'move'; // 通常カーソルに戻す
                        document.getElementById('close_pop2').style.color = "red"; // ドラッグなし
                        drag_ing = false;
                    }
				}
				// ドラッグ開始時のポップアップ位置を基準に新座標計算 
				// マウスダウン時の位置を保存していなければ現在位置を使用
				let dragStartLeft = 0;
				let dragStartTop = 0;
                if (this_p_layer == 1) {
 					dragStartLeft = parseInt(popup1.style.left, 10);
					dragStartTop = parseInt(popup1.style.top, 10);
                } else if (this_p_layer == 2) {
                    dragStartLeft = parseInt(popup2.style.left, 10);
                    dragStartTop = parseInt(popup2.style.top, 10);
                }
				if (dragStartLeft > 1500) { dragStartLeft = 300; } // 異常値対策
				if (dragStartTop > 800) { dragStartTop = 300; }

                // 新しい座標計算（pop 左上に + (右移動量増える は - で出てくる）
                let newLeft = - Number(move_x - muse_x);
                newLeft = Number(dragStartLeft + newLeft);
				let newTop = - Number(move_y - muse_y);
                newTop = Number(dragStartTop + newTop);

				// 画面境界チェック
				if (newLeft < 0){ drag_ing = false; newLeft = 3; } // 20 マージン
				if (newTop < 0) { drag_ing = false; newTop = 3; }
 				if (newLeft > blawsar0_width - p_set_width + 20) {
                    drag_ing = false;
                    if (this_p_layer == 1) {
                        newLeft = blawsar0_width - p_set_width + 17;
                        popup1.style.left = `${newLeft-3}px`;
                        grip_lin1.style.cursor = 'move'; // 通常カーソルに戻す
                        document.getElementById('close_pop1').style.color = "red"; // ドラッグなし
                    } else if (this_p_layer == 2) {
                        newLeft = blawsar0_width - p_set_width + 17;
                        popup2.style.left = `${newLeft-3}px`;
                        grip_lin2.style.cursor = 'move'; // 通常カーソルに戻す
                        document.getElementById('close_pop2').style.color = "red"; // ドラッグなし
                    }                        
                }					
				if (newTop > blawsar0_height - p_set_height + 20) {
                    drag_ing = false;
                    if (this_p_layer == 1) {
                        newTop = blawsar0_height - p_set_height + 17;
                        popup1.style.top = `${newTop-3}px`;
                        grip_lin1.style.cursor = 'move'; // 通常カーソルに戻す
                        document.getElementById('close_pop1').style.color = "red"; // ドラッグなし
                    } else if (this_p_layer == 2) {
                        newTop = blawsar0_height - p_set_height + 17;
                        popup2.style.top = `${newTop-3}px`;
                        grip_lin2.style.cursor = 'move'; // 通常カーソルに戻す
                        document.getElementById('close_pop2').style.color = "red"; // ドラッグなし
                    }
				}
                // デバッグ表示
                 document.getElementById('p_test1').innerText = ` ${-(move_x - muse_x)}: (top ${popup1.style.left}:: ${dragStartLeft} , ${-(move_y - muse_y)}: left ${popup1.style.top})`; // デバッグ用表示


                // ポップアップ位置更新
                if (drag_ing == true) { 
                    // playClickSound(); // クリック音再生                      
					// ポップアップ位置更新
                    if (this_p_layer == 1) {
                        popup1.style.left = `${newLeft}px`;
                        popup1.style.top = `${newTop}px`;
                        grip_lin1.style.cursor = 'grabbing'; // ドラッグ中カーソルに変更
                        document.getElementById('close_pop1').style.color = "blue"; // ドラッグ中
                    } else if (this_p_layer == 2) {
                        popup2.style.left = `${newLeft}px`;
                        popup2.style.top = `${newTop}px`;
                        grip_lin2.style.cursor = 'grabbing'; // ドラッグ中カーソルに変更                
                        document.getElementById('close_pop2').style.color = "blue"; // ドラッグ中
                    }
                } 
				move_x = muse_x;
            	move_y = muse_y;                
            } 
		}
	});
	
		// 全域でのマウスアップ
	document.addEventListener("mouseup", (e) => { // 何回もclick後に来る。
		muse_x = e.clientX;
		muse_y = e.clientY;		
		// グリップエリア情報更新
		appNameRagFlag = false; // ドラッグ中フラグ解除
        appNameRagFlag_not_ = true;
		drag_ing = false;   // grip_lin要素内でドラッグしてたのが終了
        move_point = false; // クリックしながら位置関係なしに動いたらtrue
	}); 
	// sample2.htmlから移植：マウスムーブでドラッグ処理 
	// --- ここから追加 ---
	

is_end_stator = true;
// set_layers(); // all in page load
is_stato_set_top();
    // --- ここまで追加 ---

</script>
    <input type="text" id="xBox" placeholder="X座標">
<input type="text" id="yBox" placeholder="Y座標">
<script>
document.addEventListener('mousemove', function(e) {
  document.getElementById('xBox').value = e.clientX;
  document.getElementById('yBox').value = e.clientY;
});
</script>
    </body>
</html>
<!-- note: CSSは外部ファイルに分離しました 
@charset "utf-8";
/* CSS utf-8 *//* making tattyan ver.0.5.6  seetv5_1 v5_seet.css */
	/* main 12/03 modele */
body {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	background-color: hsl(334, 93%, 52%);
	font-family: Arial, sans-serif;
}
/* Removed stray closing brace */
#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;
}

#Lbtn_0, #Lbtn_1, #Lbtn_2, #Lbtn_3, #Lbtn_4, #Lbtn_5, #Lbtn_6 {
	margin: 0 2px;
	padding: 5px 10px;
	background-color: #999;
	border: none;
	color: white;
	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%;
}
#L1_T_Image {
	position: absolute; /* 乗っているベースの	0,0 位置 */
	top: 0px;
	left: 0px;
}
#L1_T_Text {
	position: absolute; /* 乗っているベースの	0,0 位置 */
	top: 0px;
	left: 0px;
}

#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%;
}
#L2_T_Image {
	position: absolute; /* 乗っているベースの	0,0 位置 */
	top: 0px;
	left: 0px;
}
#L2_T_Text {
	position: absolute; /* 乗っているベースの	0,0 位置 */
	top: 0px;
	left: 0px;
}

#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%;
}
#L3_T_Image {
	position: absolute; /* 乗っているベースの	0,0 位置 */
	top: 0px;
	left: 0px;
}
#L3_T_Text {
	position: absolute; /* 乗っているベースの	0,0 位置 */
	top: 0px;
	left: 0px;
}

#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%;
}
#L4_T_Image {
	position: absolute; /* 乗っているベースの	0,0 位置 */
	top: 0px;
	left: 0px;
}
#L4_T_Text {
	position: absolute; /* 乗っているベースの	0,0 位置 */
	top: 0px;
	left: 0px;
}

#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%;
}
#L5_T_Image {
	position: absolute; /* 乗っているベースの	0,0 位置 */
	top: 0px;
	left: 0px;
}
#L5_T_Text {
	position: absolute; /* 乗っているベースの	0,0 位置 */
	top: 0px;
	left: 0px;
}

#midol_workig_L5 {
	position: absolute;
	display: block;
	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%;
}
#L6_T_Image {
	position: absolute; /* 乗っているベースの	0,0 位置 */
	top: 0px;
	left: 0px;
}
#L6_T_Text {
	position: absolute; /* 乗っているベースの	0,0 位置 */
	top: 0px;
	left: 0px;
}
	
/* R */
#box_midol_R1 {
	position: absolute;
	display: block;
	top: 100px;
	left: 903px;
	width: 510px;
	height: 560px; /* 高さを拡張 (インデックス150px + メニュー200px + R1テーブル120px + マージン50px) */
	background-color: rgba(0, 128, 128, 0.7);
	color: #333;	
}

#R_indexs {
    display: block;
    overflow: scroll;
	width: 470px;
	height: 40px;
	margin-bottom: 10px;
	margin: 10px;
	padding: 10px;
    color: blue;
	background-color: #d1e7dd;
	border: 2px solid #0f5132;
	border-radius: 8px;
}
#R_menews1 {
	display: block;
	overflow: scroll;
    width: 470px;
	height: 200px;
	margin-bottom: 10px;
	margin: 10px;
	padding: 10px;
	height: 100px;
    color: red;
	overflow: scroll;
	background-color: #f8d7da;
	border: 2px solid #842029;
	border-radius: 8px;
}
#R_menews2 {
	display: none;
	overflow: scroll;
	width: 500px;
	height: 0px;
    color: green;
	margin-bottom: 10px;
}
#R_menews2 {
    display: none;
    overflow: scroll;
}
#vizual_T {
    display: block;
    overflow: scroll;
    margin: 10px;
    width: 490px;
    height: 300px; /* 高さを拡張 (インデックス150px + メニュー200px + R1テーブル120px + マージン50px) */
    background-color: rgba(128, 0, 128, 0.5);
    color: purple;  
}
#R_table1 {
	margin: 0px;
	padding: 3px;
	width: 480px;
	height: 100%;
    color: purple;
	background-color: #cff4fc;
	border: 2px solid #055160;
	border-radius: 8px;
}

/* */
/* ポップアップ用クラス */
#overlay_bass1 {
	position: absolute;
	display: none;
	top: 20px;
	left: 20px;
	width: 1510px;
	height: 700px;
	background: hsl(152, 69%, 19%, 0.9);
}	
/* ポップアップ用IDスタイル */
#popup_1 {
	position: absolute;
	display: block;
	top: 300px;
	left: 300px;
	width: 480px;
	height: 320px;
	background-color: aquamarine;
	border: 2px solid #000;
	border-radius: 5px;
}
/* グリップラインスタイル */
#grip1_lin {
	width: 470px;
	height: 32px;
	background-color: #000000;
	color: white;
	padding: 8px;
	cursor: move;
	-webkit-user-select: none;
	user-select: none;
}
#close_pop1 {
	float: right;
	background: none;
	border: none;
	color: white;
	font-size: 16px;
	cursor: pointer;	
	border: 2px solid #000;
	border-radius: 5px;
}
/* ポップアップ内容スタイル */
#indexs_p1 {
	margin: 10px;
	padding: 10px;
	height: 100px;
	overflow: scroll;
	background-color: #d1e7dd;
	border: 2px solid #1f4131;
	border-radius: 8px;
}
#menew_p11 {
	display: none;
	overflow: scroll;
}
#menew_p12 {
	display: none;
	overflow: scroll;
}

/* 2 ポップアップ用クラス */
#overlay_bass2 {
	position: absolute;
	display: none;
	top: 20px;
	left: 20px;
	width: 1510px;
	height: 700px;
	background: hsl(152, 69%, 19%, 0.7);
}	
/* ポップアップ用IDスタイル */
#popup_2 {
	position: absolute;
	display: block;
	top: 300px;
	left: 300px;
	width: 480px;
	height: 320px;
	background-color: aquamarine;
	border: 2px solid #000;
	border-radius: 5px;
}
#grip2_lin {
	width: 470px;
	height: 32px;
	background-color: #333333;
	color: white;
	padding: 8px;
	cursor: move;
	-webkit-user-select: none;
	user-select: none;
}
#close_pop2 {
	float: right;
	background: none;
	border: none;
	color: white;
	font-size: 16px;
	cursor: pointer;
	border: 2px solid #000;
	border-radius: 5px;
}
/* ポップアップ内容スタイル */	
#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 */
#footer_area {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 60px;
	background-color: rgba(0, 0, 0, 0.5);
	color: white;
	line-height: 60px;
}
#mouse_navi {
	position: fixed;
	top:300px;
	left: 100px;
	width: 180px;
	color: coral;
	background: #000;
}
#mouse_navi table {
	width: 100%;
	border-collapse: collapse;
}
#mouse_navi td {
	border: 1px solid #555;
	padding: 5px;
	text-align: center;
	vertical-align: middle;
	font-size: 12px;
	color: white;
}
#mause_close_btn {
	position: absolute;
	top: 0;
	right: 0;
	background: red;
	color: white;
	border: none;
	cursor: pointer;
	font-size: 12px;
	padding: 2px 5px;
}
#mause_codisyon {
    font-size: smaller;
    color: gray;
}

#mouse_info {
	color: white;
	background: #000;
	font-size: 12px;
}
#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 */
-->