<?php
/**
 * Description: Use to create shortcode [midiSynth].
 *
 * @package     midi-Synth
 * @category    class php
 * @author      Oleg Klenitsky
 * @copyright   2024 Oleg Klenitsky
 * @license     GPL-2.0-or-later
 */

if ( ! defined( "ABSPATH" ) ) {
	exit();
}

class midiSynth_Shortcode {
  /**
	 * Add new shortcode [midiSynth].
	 */
	public function __construct() {
		add_shortcode( "midiSynth", array( $this, "midiSynth_shortcode" ) );
	}
	/**
	 * Creates midiSynth shortcode.
	 */
	public function midiSynth_shortcode() {
		?>
		<script type="text/javascript">
			let resumed = confirm("Continue running the midi-Synth ?");
			if(resumed){
				var context = new AudioContext();
			}
		</script>

		<div class="midi_container">
			<select id="sel_kbd" onchange="SelectMidi(this.selectedIndex-1)">
				<option value="none" >midi keyboard: none</option>
			</select>

			<?php
			// Set variables for control knobs.
			$LittlePhatty  = plugin_dir_url( __FILE__ ) . "img-ctrl/LittlePhatty.png";
			$vernier100    = plugin_dir_url( __FILE__ ) . "img-ctrl/vernier100.png";
			$vernier127    = plugin_dir_url( __FILE__ ) . "img-ctrl/vernier127.png";
			$switch_toggle = plugin_dir_url( __FILE__ ) . "img-ctrl/switch_toggle.png";
			$vsliderbody   = plugin_dir_url( __FILE__ ) . "img-ctrl/vsliderbody.png";
			$vsliderknob   = plugin_dir_url( __FILE__ ) . "img-ctrl/vsliderknob.png";

			// Load external midi file.
			$path_mid_file = plugin_dir_url( __FILE__ ) . "sound/ws.mid";

			$plugine_info = get_plugin_data( __DIR__ . "/midiSynth.php" );
			$plugin_name  = $plugine_info["Name"];
			$plugin_ver   = $plugine_info["Version"];
			$lbl          = $plugin_name . " v." . $plugin_ver;

			?>
			<div id="appearance">

				<a class="lbl_ver" href="https://wordpress.org/plugins/midi-synth/" target="_blank" ><?php echo esc_html($lbl) ?></a>

				<webaudio-knob id="vol" style="position: absolute; left: 249px; top: 30px;" src="<?php echo esc_html($LittlePhatty); ?>" min="0" max="1" step="0.01" value="0.5" tooltip="volume %s factor"></webaudio-knob>

	      <webaudio-knob id="rev" style="position: absolute; left: 330px; top: 30px;" src="<?php echo esc_html($LittlePhatty); ?>" min="0" max="1" step="0.01" value="0.2" tooltip="reverb %s sec"></webaudio-knob>

	      <webaudio-knob id="conv_duration" style="position: absolute; left: 249px; top: 137px;" src="<?php echo esc_html($LittlePhatty); ?>" min="0" max="1" step="0.01" value="0" tooltip="duration %s sec"></webaudio-knob>

	      <webaudio-knob id="conv_decay" style="position: absolute; left: 330px; top: 137px;" src="<?php echo esc_html($LittlePhatty); ?>" min="0" max="1" step="0.01" value="0" tooltip="decay %s sec"></webaudio-knob>


	      <webaudio-knob id="comp_threshold" style="position: absolute; left: 440px; top: 30px;" src="<?php echo esc_html($LittlePhatty); ?>" min="-100" max="0" step="1" value="-24" tooltip="threshold %s dB"></webaudio-knob>

	      <webaudio-knob id="comp_knee" style="position: absolute; left: 520px; top: 30px;" src="<?php echo esc_html($LittlePhatty); ?>" min="0" max="40" step="1" value="30" tooltip="knee %s dB"></webaudio-knob>

	      <webaudio-knob id="comp_ratio" style="position: absolute; left: 600px; top: 30px;" src="<?php echo esc_html($LittlePhatty); ?>" min="1" max="20" step="1" value="12" tooltip="ratio %s dB"></webaudio-knob>

	      <webaudio-knob id="comp_attack" style="position: absolute; left: 480px; top: 137px;" src="<?php echo esc_html($LittlePhatty); ?>" min="0.001" max="1" step="0.001" value="0.003" tooltip="attack %s sec"></webaudio-knob>

	      <webaudio-knob id="comp_release" style="position: absolute; left: 560px; top: 137px;" src="<?php echo esc_html($LittlePhatty); ?>" min="0" max="1" step="0.01" value="0.25" tooltip="release %s sec"></webaudio-knob>

	      <webaudio-knob id="prog" style="position: absolute; left: 685px; top: 55px;z-index: 1;" src="<?php echo esc_html($vernier127); ?>" min="0" max="127" step="1" value="0" tooltip="fine control(+Shift)"></webaudio-knob>

	      <div id="standardMidi" title="Load SoundFonts">
	      	<webaudio-switch id="GM" type="radio" name="standard" group="radio2" colors="white;#000;#A0A378" width="15" height="15" value="1" onchange="selStandMidi(id);"></webaudio-switch>
	      	<p id="p_GM" onclick="selStandMidi(id.slice(2));">GM</p>

	      	<webaudio-switch id="GS" type="radio" name="standard" group="radio2" colors="white;#000;#A0A378" width="15" height="15" value="0" onchange="selStandMidi(id);"></webaudio-switch>
	      	<p id="p_GS" onclick="selStandMidi(id.slice(2));">GS</p>

	      	<webaudio-switch id="XG" type="radio" name="standard" group="radio2" colors="white;#000;#A0A378" width="15" height="15" value="0" onchange="selStandMidi(id);"></webaudio-switch>
	      	<p id="p_XG" onclick="selStandMidi(id.slice(2));">XG</p>
	    	</div>

	      <div id="progNameStr">
	      	<webaudio-param id="prog_num" link="prog"></webaudio-param>
	      	<p id="prog_name" style="font-size: 14px;margin:0 0 0 5px;">program name</p>
	    	</div>

	      <webaudio-slider id="oct" style="position:absolute;left:828px;top:48px;" src="<?php echo esc_html($vsliderbody); ?>" knobsrc="<?php echo esc_html($vsliderknob); ?>" value="0" min="-2" max="+2" step="1" height="120" tooltip="Octave shift %s"></webaudio-slider>

	      <webaudio-slider id="ch" style="position:absolute;left:877px;top:48px;" src="<?php echo esc_html($vsliderbody); ?>" knobsrc="<?php echo esc_html($vsliderknob); ?>" value="1" min="1" max="16" step="1" height="120" tooltip="Channel Ch %s"></webaudio-slider>

	      <webaudio-switch id="qlt" midilearn="1" style="position:absolute;left:917px;top:50px;" src="<?php echo esc_html($switch_toggle); ?>" value="1" height="56" width="56"></webaudio-switch>

	      <webaudio-switch id="sus" midilearn="1" style="position:absolute;left:917px;top:110px;" src="<?php echo esc_html($switch_toggle); ?>" value="0" height="56" width="56"></webaudio-switch>

	      <div style="position: absolute;display: flex;top: 233px;left: 10px;margin: 0;border: none;height: 30px;align-items: center;">
	      	<webaudio-tinysynth id="tinysynth" src="<?php echo esc_html($path_mid_file); ?>" style="height: 30px;cursor: pointer;" quality="1" loop="0" disabledrop="0" mastervol="0.3" onclick="SequencerScale();">
					</webaudio-tinysynth>
					<webaudio-switch id="loop" colors="#A0A378;#000;#A0A378" style="margin:0 5px;" tooltip="Loop" value="0"></webaudio-switch>

					<input type="file" id="file_mid" accept=".mid" style="display:none;" onchange="loadMidi(this.files);"/>
					<button class="btn_synth" for="file_mid" style="margin-right:15px;" title="Load midi" onclick="document.getElementById('file_mid').click();">File midi</button>

					<div id="inform_panel" >inform panel</div>

					<div style="position: absolute;display: flex;left: 680px;margin: 0;border: none;height: 30px;width: 280px;">
						<button class="btn_synth" id="shotBtn" style="flex:.8;" title="Shot key">C4</button>

						<button class="btn_synth" id="kbdBtn" style="flex:.8;" title="Midi keyboard" onclick="OpenKbd();">Kbd</button>

						<button class="btn_synth" id="editorBtn" style="flex:1.5;" title="Timbre Editor" onclick="OpenEditor();">Editor</button>

						<button class="btn_synth" id="graphBtn" style="flex:1.5;" title="AudioNodes Graph" onclick="OpenGraph();">Graph</button>

						<button class="btn_synth" id="sequencerBtn" style="flex:1.5;" title="Sequencer" onclick="winSequencer();">Sequencer</button>
					</div>
				</div>

				<canvas id="canvas_midi" style="position:absolute;top: 42px;left: 27px;" width="180" height="180" title="Click me"></canvas>

				<webaudio-slider id="scaleX" style="position:absolute;left:12px;top:35px;" src="<?php echo esc_html($vsliderbody); ?>" knobsrc="<?php echo esc_html($vsliderknob); ?>" value="4" min="0" max="7" step="1" tooltip="fftSize %s" conv="['4096','2048','1024','512','256','128','64','32'] [x]" height="191" width="10" knobwidth="10" knobheight="10"></webaudio-slider>
				<webaudio-slider id="scaleY" style="position:absolute;left:212px;top:35px;" src="<?php echo esc_html($vsliderbody); ?>" knobsrc="<?php echo esc_html($vsliderknob); ?>" value="4" min="1" max="10" step="1" tooltip="amplitude %s" height="191" width="10" knobwidth="10" knobheight="10"></webaudio-slider>

				<div id="btns_osc">
					<webaudio-switch id="sw0" type="radio" group="radio1" colors="white;#000;#A0A378" width="15" height="15" value="1" onchange="p_swX_click(id);"></webaudio-switch>
					<p id="p_sw0" onclick="p_swX_click(id.slice(2));">Σ</p>

					<webaudio-switch id="sw1" type="radio" group="radio1" colors="red;#000;#A0A378" width="15" height="15" value="0" onchange="p_swX_click(id);"></webaudio-switch>
					<p id="p_sw1" onclick="p_swX_click(id.slice(2));">g1</p>

					<webaudio-switch id="sw2" type="radio" group="radio1" colors="blue;#000;#A0A378" width="15" height="15" value="0" onchange="p_swX_click(id);"></webaudio-switch>
					<p id="p_sw2" onclick="p_swX_click(id.slice(2));">g2</p>

					<webaudio-switch id="sw3" type="radio" group="radio1" colors="green;#000;#A0A378" width="15" height="15" value="0" onchange="p_swX_click(id);"></webaudio-switch>
					<p id="p_sw3" onclick="p_swX_click(id.slice(2));">g3</p>

					<webaudio-switch id="sw4" type="radio" group="radio1" colors="brown;#000;#A0A378" width="15" height="15" value="0"></webaudio-switch>
					<p id="p_sw4" onclick="p_swX_click(id.slice(2));">g4</p>
				</div>
			</div>

			<webaudio-keyboard style="display: none;" id="kbd" keys="88" min="21" width="980" height="160"></webaudio-keyboard>
			<div id="win_edit" style="display: none;">
				<div id="sf2viewer" style="display: none;height: 246px; width: 720px; overflow-x: hidden;overflow-y: auto;border-left: .5px solid black;">
					<table id="soundViewerGSXG">
						<caption>SounfFonts Viewer</caption>
						<thead>
							<tr>
								<th id="Preset_th1" style="padding:0;width:60px;cursor:pointer;" onclick="soundViewerGSXG_info(id);">Preset 0</th>
								<th id="keyRange_th2" style="padding:0;width:75px;cursor:pointer;" onclick="soundViewerGSXG_info(id);">keyRange</th>
								<th id="Generators_th3" style="padding:0;width:180px;cursor:pointer;" onclick="soundViewerGSXG_info(id);">Generators</th>
								<th id="Modulators_th4" style="padding:0;width:65px;cursor:pointer;" onclick="soundViewerGSXG_info(id);">Modulators</th>
								<th id="Sample_th5" style="padding:0;width:145px;cursor:pointer;" onclick="soundViewerGSXG_info(id);">Sample</th>
								<th id="curNote_th6" style="padding:0;width:75px;cursor:pointer;" onclick="soundViewerGSXG_info(id);">curNote</th>
							</tr>
						</thead>
						<tbody>
						</tbody>
						<tfoot>
					  	<tr>
					  		<td id="infoSF" colspan="6" style="padding: 0;">
					  			<button id="bank_view" class="btn_sequencer" style="height: 19px;width:60px;margin:0;" onclick="infoFileSF();">Bank</button>
					  		</td>
					  	</tr>
					  	</tr>
					  </tfoot>
					</table>
				</div>
				<table id="soundeditorGM">
					<thead>
						<tr>
							<td colspan="13" style="text-align:left;padding-left:5px;width:100px;">
								<div style="display:flex;">
									<div style="display:flex;width:120px;">
										<label>Oscillators :</label>
										<select id="oscs" onchange="tblTimbreGM()"><option>1</option><option>2</option><option>3</option><option>4</option></select>
									</div>
									<label style="width:100%;" id="head_soundeditorGM">Timbre Editor</label>
								</div>
							</td>
						</tr>
					</thead>
					<tbody>
						<?php
							$str1  = "output destination";
							$str2  = "waveform";
							$str3  = "volume";
							$str4  = "tune factor according to note#";
							$str5  = "fixed frequency in Hz";
							$str6  = "attack time (1nd parameter of the AHDSR envelope)";
							$str7  = "hold time (2nd parameter of the AHDSR envelope)";
							$str8  = "decay time (3nd parameter of the AHDSR envelope)";
							$str9  = "sustain level (4nd parameter of the AHDSR envelope)";
							$str10 = "release time (5nd parameter of the AHDSR envelope)";
							$str11 = "pitch bend";
							$str12 = "pitch bend speed factor";
							$str13 = "volume key tracking factor";
							$path_img_ahdsr = set_url_scheme( plugins_url("/img/AHDSR.png", __FILE__), "https" );
							$path_img_threshold = set_url_scheme( plugins_url("/img/webaudiothreshold.png", __FILE__), "https" );
							$path_img_knee      = set_url_scheme( plugins_url("/img/webaudioknee.png", __FILE__), "https" );
							$path_img_ratio     = set_url_scheme( plugins_url("/img/webaudioratio.png", __FILE__), "https" );
							// For Sequensor (area win_part1)
							$speaker     = set_url_scheme( plugins_url("img/speaker.png", __FILE__), "https" );
							$speaker_on  = set_url_scheme( plugins_url("img/speaker_on.gif", __FILE__), "https" );
							$speaker_off = set_url_scheme( plugins_url("img/speaker_off.png", __FILE__), "https" );
							$online_convert = set_url_scheme( plugins_url("img/online_convert.png", __FILE__), "https" );
						?>
						<tr>
							<th id="soundeditorGM_th1" style="padding:0;width:100px;" title="<?php echo esc_html($str1); ?>" onclick="soundeditorGM_info(id);">G</th>
							<th id="soundeditorGM_th2" style="padding:0;width:80px;" title="<?php echo esc_html($str2); ?>" onclick="soundeditorGM_info(id);">W</th>
							<th id="soundeditorGM_th3" title="<?php echo esc_html($str3); ?>" onclick="soundeditorGM_info(id);">V</th>
							<th id="soundeditorGM_th4" title="<?php echo esc_html($str4); ?>" onclick="soundeditorGM_info(id);">T</th>
							<th id="soundeditorGM_th5" title="<?php echo esc_html($str5); ?>" onclick="soundeditorGM_info(id);">F</th>
							<th id="soundeditorGM_th6" style="background-color: #BFDCEA;" title="<?php echo esc_html($str6); ?>" onclick="soundeditorGM_info(id);">A</th>
							<th id="soundeditorGM_th7" style="background-color: #BFDCEA;" title="<?php echo esc_html($str7); ?>" onclick="soundeditorGM_info(id);">H</th>
							<th id="soundeditorGM_th8" style="background-color: #BFDCEA;" title="<?php echo esc_html($str8); ?>" onclick="soundeditorGM_info(id);">D</th>
							<th id="soundeditorGM_th9" style="background-color: #BFDCEA;" title="<?php echo esc_html($str9); ?>" onclick="soundeditorGM_info(id);">S</th>
							<th id="soundeditorGM_th10" style="background-color: #BFDCEA;" title="<?php echo esc_html($str10); ?>" onclick="soundeditorGM_info(id);">R</th>
							<th id="soundeditorGM_th11" title="<?php echo esc_html($str11); ?>" onclick="soundeditorGM_info(id);">P</th>
							<th id="soundeditorGM_th12" title="<?php echo esc_html($str12); ?>" onclick="soundeditorGM_info(id);">Q</th>
							<th id="soundeditorGM_th13" title="<?php echo esc_html($str13); ?>" onclick="soundeditorGM_info(id);">K</th>
						</tr>
					  <tr id="prog1">
						  <td style="padding-left:5px;text-align:left;" title="program1">g1<select id="g1" style="width:30px;" onchange="tblTimbreGM();"><option value="0">g0</option></select><label class="osc_num"></label></td>

						  <td><select id="w1" onchange="tblTimbreGM()"><option value="sine">sine</option><option value="sawtooth">sawtooth</option><option value="square">square</option><option value="triangle">triangle</option><option value="w9999">w9999</option><option value="n0">n0</option><option value="n1">n1</option></select></td>
						  <td><input id="v1"  oninput="tblTimbreGM()" value="0" size="4"/></td>
						  <td><input id="t1"  oninput="tblTimbreGM()" value="0" size="4"/></td>
						  <td><input id="f1"  oninput="tblTimbreGM()" value="0" size="4"/></td>
						  <td><input id="a1"  oninput="tblTimbreGM()" value="0" size="4"/></td>
						  <td><input id="h1"  oninput="tblTimbreGM()" value="0" size="4"/></td>
						  <td><input id="d1"  oninput="tblTimbreGM()" value="0" size="4"/></td>
						  <td><input id="s1"  oninput="tblTimbreGM()" value="0" size="4"/></td>
						  <td><input id="r1"  oninput="tblTimbreGM()" value="0" size="4"/></td>
						  <td><input id="p1"  oninput="tblTimbreGM()" value="0" size="4"/></td>
						  <td><input id="q1"  oninput="tblTimbreGM()" value="0" size="4"/></td>
						  <td><input id="k1"  oninput="tblTimbreGM()" value="0" size="4"/></td>
					  </tr>
					  <tr id="prog2">
						  <td style="padding-left:5px;text-align:left;" title="program2">g2<select id="g2" style="width:30px;" onchange="tblTimbreGM()"><option value="0">g0</option><option value="1">g1</option></select><label class="osc_num"></label></td>

						  <td><select id="w2" onchange="tblTimbreGM();"><option value="sine">sine</option><option value="sawtooth">sawtooth</option><option value="square">square</option><option value="triangle">triangle</option><option value="w9999">w9999</option><option value="n0">n0</option><option value="n1">n1</option></select></td>
						  <td><input id="v2"  oninput="tblTimbreGM()" value="0" size="4"/></td>
						  <td><input id="t2"  oninput="tblTimbreGM()" value="0" size="4"/></td>
						  <td><input id="f2"  oninput="tblTimbreGM()" value="0" size="4"/></td>
						  <td><input id="a2"  oninput="tblTimbreGM()" value="0" size="4"/></td>
						  <td><input id="h2"  oninput="tblTimbreGM()" value="0" size="4"/></td>
						  <td><input id="d2"  oninput="tblTimbreGM()" value="0" size="4"/></td>
						  <td><input id="s2"  oninput="tblTimbreGM()" value="0" size="4"/></td>
						  <td><input id="r2"  oninput="tblTimbreGM()" value="0" size="4"/></td>
						  <td><input id="p2"  oninput="tblTimbreGM()" value="0" size="4"/></td>
						  <td><input id="q2"  oninput="tblTimbreGM()" value="0" size="4"/></td>
						  <td><input id="k2"  oninput="tblTimbreGM()" value="0" size="4"/></td>
					  </tr>
					  <tr id="prog3">
						  <td style="padding-left:5px;text-align:left;" title="program3">g3<select id="g3" style="width:30px;" onchange="tblTimbreGM();"><option value="0">g0</option><option value="1">g1</option><option value="2">g2</option></select><label class="osc_num"></label></td>

						  <td><select id="w3" onchange="tblTimbreGM();"><option value="sine">sine</option><option value="sawtooth">sawtooth</option><option value="square">square</option><option value="triangle">triangle</option><option value="w9999">w9999</option><option value="n0">n0</option><option value="n1">n1</option></select></td>
						  <td><input id="v3"  oninput="tblTimbreGM()" value="0" size="4"/></td>
						  <td><input id="t3"  oninput="tblTimbreGM()" value="0" size="4"/></td>
						  <td><input id="f3"  oninput="tblTimbreGM()" value="0" size="4"/></td>
						  <td><input id="a3"  oninput="tblTimbreGM()" value="0" size="4"/></td>
						  <td><input id="h3"  oninput="tblTimbreGM()" value="0" size="4"/></td>
						  <td><input id="d3"  oninput="tblTimbreGM()" value="0" size="4"/></td>
						  <td><input id="s3"  oninput="tblTimbreGM()" value="0" size="4"/></td>
						  <td><input id="r3"  oninput="tblTimbreGM()" value="0" size="4"/></td>
						  <td><input id="p3"  oninput="tblTimbreGM()" value="0" size="4"/></td>
						  <td><input id="q3"  oninput="tblTimbreGM()" value="0" size="4"/></td>
						  <td><input id="k3"  oninput="tblTimbreGM()" value="0" size="4"/></td>
					  </tr>
					  <tr id="prog4">
						  <td style="padding-left:5px;text-align:left;" title="program4">g4<select id="g4" style="width:30px;" onchange="tblTimbreGM();"><option value="0">g0</option><option value="1">g1</option><option value="2">g2</option><option value="3">g3</option></select><label class="osc_num"></label></td>

						  <td><select id="w4" onchange="tblTimbreGM()"><option value="sine">sine</option><option value="sawtooth">sawtooth</option><option value="square">square</option><option value="triangle">triangle</option><option value="w9999">w9999</option><option value="n0">n0</option><option value="n1">n1</option></select></td>
						  <td><input id="v4"  oninput="tblTimbreGM()" value="0" size="4"/></td>
						  <td><input id="t4"  oninput="tblTimbreGM()" value="0" size="4"/></td>
						  <td><input id="f4"  oninput="tblTimbreGM()" value="0" size="4"/></td>
						  <td><input id="a4"  oninput="tblTimbreGM()" value="0" size="4"/></td>
						  <td><input id="h4"  oninput="tblTimbreGM()" value="0" size="4"/></td>
						  <td><input id="d4"  oninput="tblTimbreGM()" value="0" size="4"/></td>
						  <td><input id="s4"  oninput="tblTimbreGM()" value="0" size="4"/></td>
						  <td><input id="r4"  oninput="tblTimbreGM()" value="0" size="4"/></td>
						  <td><input id="p4"  oninput="tblTimbreGM()" value="0" size="4"/></td>
						  <td><input id="q4"  oninput="tblTimbreGM()" value="0" size="4"/></td>
						  <td><input id="k4"  oninput="tblTimbreGM()" value="0" size="4"/></td>
						</tr>
					</tbody>
				  <tfoot>
				  	<tr>
				  		<td colspan="13">
				  			<div style="display:flex;">
				  				<label style="width:550px;display: block;">Patch : </label>
				  				<label style="display: block;width: 23%;border-left: 1px solid gray;">LocalStorage</label>
				  			</div>
				  			<div style="display:flex;">
					  			<input disabled="" id="patch" style="width:100%;font-family: Arial, Helvetica, sans-serif;">
									<button class="btn_editor" id="patch_save" onclick="patchSave();">Save</button>
									<button class="btn_editor" id="patch_load" onclick="patchLoad();">Load</button>
									<button class="btn_editor" id="patch_del" onclick="patchDelete();">Delete</button>
								</div>
				  		</td>
				  	</tr>
				  </tfoot>
				</table>

				<div id="descr_tbl" style="width:260px; height: 246px;background-color: #C3C3C3;font-size: 14px;display: flex;overflow: auto;flex-direction: column;">
					<ul id="descr_ul" style="margin:0;padding:0;margin-top:100px;color:white;text-align: center;font-family: 'Arial, Helvetica, sans-serif';" onclick="view_ahdsr_img();">Description of table fields</ul>
					<image id="img_ahdsr" width="250" height="220" style="display: none;border: 1px solid black;margin:5px;cursor:pointer;" src="<?php echo esc_url($path_img_ahdsr); ?>" onclick="view_ahdsr_img();" />
				</div>
			</div>

			<canvas id="audiograph" width="980" height="310" style="display:none;"></canvas>
			<div id="canvas_imgs" style="position:relative;display: none;left:725px;top:-310px;width:260px;height:310px;z-index:-1">
				<image id="webaudiothreshold"  width="70" height="50" style="position:absolute;border: 1px solid black;margin:5px;left:180px;top:20px;width:70px;height:50px;cursor:pointer;" src="<?php echo esc_url($path_img_threshold); ?>" onclick="img_resize(id);"/>
				<image id="webaudioknee"  width="70" height="50" style="position:absolute;border: 1px solid black;margin:5px;left:180px;top:77px;width:70px;height:50px;cursor:pointer;" src="<?php echo esc_url($path_img_knee); ?>" onclick="img_resize(id);"/>
				<image id="webaudioratio"  width="70" height="50" style="position:absolute;border: 1px solid black;margin:5px;left:180px;top:134px;width:70px;height:50px;cursor:pointer;" src="<?php echo esc_url($path_img_ratio); ?>" onclick="img_resize(id);"/>
			</div>
			<div id="win_sequencer" style="display: none;flex-direction: column; border:1px solid black;width:980px;height:height:fit-content;background-color:#E3E3E3;font-family: Arial, Helvetica, sans-serif;">

				<image id="speaker" width="20" height="20" style="display: none;cursor:pointer;width:20px;height:20px;" src="<?php echo esc_url($speaker); ?>" />
				<image id="speaker_on" width="20" height="20" style="display: none;cursor:pointer;width:20px;height:20px;" src="<?php echo esc_url($speaker_on); ?>" />
				<image id="speaker_off" width="20" height="20" style="display: none;cursor:pointer;width:20px;height:20px;" src="<?php echo esc_url($speaker_off); ?>" />
				<image id="online_convert" width="140" height="20" style="display: none;cursor:pointer;width:140px;height:20px;" src="<?php echo esc_url($online_convert); ?>" />

				<div id="sequencer_header" style="display:flex;justify-content: space-between;height:30px;padding: 2px;">
					<div style="display:flex;justify-content: flex-start;">
						<label for="song_midi" style="font-size:14px;height:20px;">Copyright</label>
						<input type="text" id="song_midi" name="input"placeholder="Copyright notice" style="font-size:14px;width:150px;height:25px;padding:3px;"/>
					</div>
					<div style="display:flex;justify-content: flex-start;">
						<label for="tempoBPM" style="font-size:14px;height:20px;">BPM</label>
						<input type="number" id="tempoBPM" name="input" min="20" max="900" step="1" style="font-size:14px;width:40px;height:25px;padding:5px 0;text-align: center;"/>
					</div>
					<div style="display:flex;justify-content: flex-start;">
						<label for="tracks_count" style="font-size:14px;height:20px;">Tracks</label>
						<input type="text" id="tracks_count" name="input" disabled style="font-size:14px;width:30px;height:25px;padding:5px 0;text-align: center;"/>
					</div>
					<div style="display:flex;justify-content: flex-start;">
						<label for="midi_type" style="font-size:14px;height:20px;">Type midi</label>
						<input type="text" id="midi_type" name="input" disabled style="font-size:14px;width:30px;height:25px;padding:5px 0;text-align: center;"/>
					</div>
					<div style="display:flex;justify-content: flex-start;">
						<label id="lbl_ppqn" for="ppqn" style="font-size:14px;height:20px;">PPQN</label>
						<input type="number" id="ppqn" name="input" min="96" max="960" step="96" style="font-size:14px;width:40px;height:25px;padding:5px 0;text-align: center;"/>
					</div>
					<div style="display:none;justify-content: flex-start;">
						<label id="lbl_smpte_frames" for="smpte_frames" style="font-size:14px;height:20px;">SMPTE frames</label>
						<input type="text" id="smpte_frames" name="input" style="font-size:14px;width:40px;height:25px;padding:5px 0;text-align: center;"/>
					</div>
					<div style="display:none;justify-content: flex-start;">
						<label id="lbl_ticks_per_frame" for="ticks_per_frame" style="font-size:14px;height:20px;">Ticks per frame</label>
						<input type="text" id="ticks_per_frame" name="input" style="font-size:14px;width:40px;height:25px;padding:5px 0;text-align: center;"/>
					</div>
					<div style="display:flex;justify-content: flex-start;">
						<label id="lbl_file_name" for="file_name_midi" style="font-size:14px;height:20px;">File name</label>
						<input type="text" id="file_name_midi" name="input" value="ws.mid" style="font-size:14px;width:150px;height:25px;padding:5px;"/>
					</div>
					<div style="display:flex;justify-content: flex-start;">
						<label id="lbl_file_size" for="file_size_midi" style="font-size:14px;height:20px;">File size</label>
						<input type="text" id="file_size_midi" name="input" value="2.46 КB" disabled style="font-size:14px;width:75px;height:25px;padding:5px;margin-right:15px;"/>
					</div>
				</div>

				<div id="sequencer_body" style="display: flex;flex-direction: row;justify-content: flex-start;height:fit-content;">
					<div id="win_part1" style="display:block;height:421px;width:210px;overflow-y: auto;">
					</div>
					<div id="win_part2" style="position:relative;display:flex;flex-direction: row;width:790px;height: 420px;overflow-y: hidden;background: #C3C3C3;">
						<div id="div_rangeNotes_part2" style="overflow-x: hidden;overflow-y: hidden;background:#D5D5D5;height: 400px;margin-top: 20px;">
							<canvas id="canvas_rangeNotes_part2" width="45" height="380"></canvas>
						</div>
						<div id="subwin_part2">
							<div id="ptrTime" style="position:absolute;top:0;left:-2px;width:7px;height:884px;margin-top: 20px;z-index:1;background:transparent;cursor:pointer;" onmousedown="ptrTimeDown(event);" onmousemove="ptrTimeMove(event);" onmouseup="ptrTimeUp(event);">
								<hr style="width:1px;height: 100%;margin: 0 auto;background: red;">
							</div>

							<canvas id="canvas_scale_part2" height="20" style="position: sticky;top:0;height: 20px;z-index: 1;background: rgb(195, 195, 195);" onclick="cnvScaleClick();" oncontextmenu="cnvScaleMenu(event);"></canvas>

							<canvas id="canvas_body_part2" height="380" style="background:gray;"></canvas>

							<svg id="svg_body_part2" height="380" action="" oncontextmenu="svgBodyContextMenu(event);" onmousedown="svgBodyMouseDown(event);" onmousemove="svgBodyMouseMove(event);"  onmouseup="svgBodyMouseUp(event);" onmouseleave="svgBodyMouseLeave(event);"></svg>
						</div>
					</div>
				</div>
				<div id="sequencer_footer" style="position:relative;display:flex;background: #C3C3C3;height:185px;">
					<div id="scale" style="position:absolute;display:flex;justify-content: space-evenly;align-items: center;height:14px;width:40px;overflow: hidden;font-weight:bold;font-size:14px;top:-14px;left:208px;border: 1px solid black;background:#C3C3C3;">
						<div id="scale+" style="width:13px;text-align: center;cursor:pointer;" title="scale+" onclick="btnScale(id);">+</div>
						<div id="scale0" style="width:13px;text-align: center;cursor:pointer;" title="scale0" onclick="btnScale(id);">o</div>
						<div id="scale-" style="width:13px;text-align: center;cursor:pointer;" title="scale-" onclick="btnScale(id);">-</div>
					</div>
					<div id="sequencer_subfooter1" style="display:flex;flex-direction: column;justify-content: space-around;border-top:1px solid black;margin-top:1px;">
						<div style="display:flex;justify-content: space-around;flex: none;align-items: center;width:208px;">
							<button class="btn_sequencer" id="btn_save" onclick="saveFileMidi();">Save</button>
							<button class="btn_sequencer" id="btn_trk_add" onclick="addTrack();">+Track</button>
							<button class="btn_sequencer" id="btn_verify" onclick="openVerify(id);">Verify</button>
						</div>
						<div style="display:flex;justify-content: space-around;flex: none;align-items: center;width:208px;">
							<button class="btn_sequencer" id="btn_newFile" onclick="getNewFileParams();">New</button>
							<button class="btn_sequencer" id="btn_trk_del" onclick="delTrack();">-Track</button>
							<button class="btn_sequencer" id="btn_trackInfo" onclick="openTrackInfo(id);">Track</button>
						</div>
						<div style="display:flex;justify-content: space-around;flex: none;align-items: center;width:208px;">
							<button class="btn_sequencer" id="btn_export" onclick="openExport(id);">Export</button>
							<button class="btn_sequencer" id="btn_report" onclick="openReport(id);">Report</button>
							<button class="btn_sequencer" id="btn_stave" onclick="openStave(id);">Stave</button>
						</div>
						<div style="display:flex;justify-content: space-around;flex: none;align-items: center;width:208px;">
							<button class="btn_sequencer" id="btn_help"  onclick="openHelp(id);">Help</button>
							<button class="btn_sequencer" id="btn_record"  onclick="openRecord(id);">Record</button>
							<button class="btn_sequencer" id="btn_tools" onclick="openTools(id);">Tools</button>
						</div>
						<div style="display:flex;justify-content: space-around;flex: none;align-items: center;width:208px;">
							<button class="btn_sequencer" id="btn_setting" onclick="openSetting(id);">Setting</button>
							<button class="btn_sequencer" id="btn_about" onclick="openAbout(id);">About</button>
							<button class="btn_sequencer" id="btn_examples" onclick="openExamples(id);">Examples</button>
						</div>
						<div style="display:flex;justify-content: space-around;flex: none;align-items: center;width:208px;">
							<button class="btn_sequencer" id="btn_errors" onclick="openErrors(id);">Errors</button>
							<button class="btn_sequencer" id="btn_rules"  onclick="openRules(id);">Rules</button>
							<button class="btn_sequencer" id="btn_reserved3">---</button>
						</div>
					</div>
					<div id="sequencer_subfooter2">
						<div id="btnsStave" style="display:none;position: sticky;width: 765px;top:3px;left:0;justify-content: space-between;border: 1px solid black;margin-top: 7px;">
							<div style="display: flex;">
								<p style="font-size: 14px;width: 40px;color:black;margin:1px 0 0 1px;display:block;background: #8B8B8B;height: 24px;text-align: center;">Clef: </p>
								<button id="treble" class="btn_sequencer" style="height: 24px; width: 70px;" onclick="btnsStave(id);">Treble</button>
								<button id="bass" class="btn_sequencer" style="height: 24px; width: 70px;" onclick="btnsStave(id);">Bass</button>
								<button id="alto" class="btn_sequencer" style="height: 24px; width: 70px;" onclick="btnsStave(id);">Alto</button>
								<button id="tenor" class="btn_sequencer" style="height: 24px; width: 70px;" onclick="btnsStave(id);">Tenor</button>
								<button id="soprano" class="btn_sequencer" style="height: 24px; width: 70px;" onclick="btnsStave(id);">Soprano</button>
								<button id="percussion" class="btn_sequencer" style="height: 24px; width: 70px;" onclick="btnsStave(id);">Percussion</button>
								<button id="french" class="btn_sequencer" style="height: 24px; width: 70px;" onclick="btnsStave(id);">French</button>
							</div>
								<button id="print_stave" class="btn_sequencer" style="height: 24px; width: 70px;" onclick="printStave();">Print</button>
							</div>
						<div id="ptrTimeStave" style="display:none; position:absolute;top:0;left:0;width:7px;height:135px;margin-top: 30px;z-index:1;background:transparent;cursor:pointer;" onmousedown="ptrTimeStaveDown(event);" onmousemove="ptrTimeStaveMove(event);" onmouseup="ptrTimeStaveUp(event);">
								<hr style="width:1px;height: 100%;margin: 0 auto;background: red;">
							</div>
						<div id="popupStave" style="display:none;"></div>
						<div id="stave"></div>
					</div>
				</div>
			</div>
		<?php
	}
}
