const highlight_color = '#dddd00';
const rest = ['小池'];
const tuning = {
  三浦: ['2021/01/14', '2021/03/25'],
  宇和島: ['2021/01/14', '2021/03/25'],
  福浦: ['2021/01/09', '2021/01/31'],
  北灘: ['2021/01/12', '2021/03/25'],
};

/**
 * 『現在の状況』HTMLコードを挿入
 * @param {number} flag 0: 一般公開ページ 1: 関係者専用ページ
 */
function set_html_now(flag) {
  // 『最新データ』HTMLコード挿入
  var html_code = set_html_setting();
  html_code += '<table><tr><td valign="top">';
  html_code += '<tr><td><h2>現在の状況</h2></td>';
  html_code += '</td><td width="10" rowspan="3">';
  html_code += '</td><td valign="top" align="left" rowspan="3">';
  if (flag == 0) {
    html_code += set_html_map();
  }
  html_code += '</td></tr><tr><td valign="top">';
  html_code += '<span id="nt_table_title"></span><span id="nowtemp"></span>';
  html_code += '</td></tr><tr><td valign="bottom">';
  html_code +=
    '<h3>●表示設定　簡易呼び出し</h3><h4>あなたがよく使う《表示設定》を登録することができます。<br>登録した《表示設定》を呼び出すには、下にあるボタンを押してください。</h4><table><tr><td><input type="button" id="setting0" class="name_btn" value="設定A" onclick="set_setting_value_now(0)"></td><td><input type="button" id="setting1" class="name_btn" value="設定B" onclick="set_setting_value_now(1)"></td><td><input type="button" id="setting2" class="name_btn" value="設定C" onclick="set_setting_value_now(2)"></td><td>&emsp;<input type="button" value="表示設定を編集" onclick="open_setting_now()"></td></table><br>';
  html_code += '<span id="p_table_title"></span>';
  html_code += '</td></tr></table>';
  html_code += '<table border="0"><tr><td>';
  html_code += '<span id="p_table"></span>';
  html_code += '<h4>グラフ</h4>';
  html_code +=
    '<div id="l_chart"><div id="now_temp_range" class="temp_range"></div><div id="now_auto" class="auto"><form><input type="button" class="button" value="自動調整" onclick="regulate_temp_now()"></form></div><div id="now_checklist" class="check_list"><form name="selectvalue"><table class="datatable" border="0" cellspacing="0" cellpadding="1"><tr><th><center>水深</th></tr><tr><td><div id="check2"></div></td></tr><tr><td><div id="btn2"></div></td></tr></table></form></div><canvas id="now" width="1502px" height="440px"></canvas></div>';
  html_code += '</td></tr></table>';
  document.getElementById('body_content').innerHTML = html_code;
}

/**
 * 『過去の状況』HTMLコード挿入
 * @param {number} flag 0: 一般公開ページ 1: 関係者専用ページ
 */
function set_html_past(flag) {
  var html_code = '<canvas id="hidden" width="1575px" height="395px" hidden></canvas>';
  html_code += set_html_setting();
  html_code += '<table><tr><td><h2>過去の状況</h2></td></tr>';
  html_code += '<tr><td valign="top">';
  html_code += '<h4>下のスライダーで見たい日時を選択してください。</h4>';
  html_code += '測定日時：<span id="measure_time"></span><br>';
  html_code += '<div id="time_slider">';
  html_code += '<canvas width="525" height="35" id="time_tick"></canvas>';
  html_code += '<div id="time_range"></div>';
  html_code += '</div>';
  html_code +=
    '<form><input type="button" id="prev2" class="slider_btn" value="30日前 |&#9668;" onclick="slider_btn_click(720,' +
    flag +
    ')"> ';
  html_code +=
    '<input type="button" id="prev1" class="slider_btn" value="1日前 &#9668;&#9668;" onclick="slider_btn_click(24,' +
    flag +
    ')"> ';
  html_code +=
    '<input type="button" id="prev0" class="slider_btn" value="1時間前 &#9668;" onclick="slider_btn_click(1,' +
    flag +
    ')"> &emsp;';
  html_code +=
    '<input type="button" id="after0" class="slider_btn" value="&#9658; 1時間後" onclick="slider_btn_click(-1,' +
    flag +
    ')"> ';
  html_code +=
    '<input type="button" id="after1" class="slider_btn" value="&#9658;&#9658; 1日後" onclick="slider_btn_click(-24,' +
    flag +
    ')"> ';
  html_code +=
    '<input type="button" id="after2" class="slider_btn" value="&#9658;| 現在" onclick="slider_btn_click(-720,' +
    flag +
    ')"> ';
  html_code += '</form>';
  html_code += '<span id="pt_title"></span>';
  html_code += '<span id="pasttemp"></span>';
  html_code += '<h3>●表示設定　簡易呼び出し</h3>';
  html_code +=
    '<h4>あなたがよく使う《表示設定》を登録することができます。<br>登録した《表示設定》を呼び出すには、下にあるボタンを押してください。</h4>';
  html_code += '<table><tr>';
  html_code +=
    '<td><input type="button" id="setting0" class="name_btn" value="設定A" onclick="set_setting_value_past(0)"></td>';
  html_code +=
    '<td><input type="button" id="setting1" class="name_btn" value="設定B" onclick="set_setting_value_past(1)"></td>';
  html_code +=
    '<td><input type="button" id="setting2" class="name_btn" value="設定C" onclick="set_setting_value_past(2)"></td>';
  html_code += '<td>&emsp;<input type="button" value="表示設定を編集" onclick="open_setting_past()"></td>';
  html_code += '</tr></table>';
  html_code += '<span id="ps_title"></span>';
  html_code += '</td><td width="10">';
  html_code += '</td><td valign="bottom">';
  if (flag == 0) {
    html_code += set_html_map();
  }
  html_code += '</td></tr><td valign="bottom">';
  html_code += '</td></tr><tr><td colspan="3">';
  html_code += '<span id="pastsuion"></span>';
  html_code += '</td></tr></table>';
  html_code += '<table><tr><td>';
  html_code += '<h3>●海水温の時間変化</h3>';
  if (flag == 1) {
    html_code +=
      '<strong>※グラフを左クリックしたまま左右に動かすと、グラフをスクロールさせることができます。</strong><br>';
    html_code += '<a href="./past.php">表示する期間を指定する</a>';
  }
  html_code += '</td></tr><tr><td>';
  html_code += '<div class="container">';
  html_code += '<table>';
  for (var i = 0; i < suion_list.length; i++) {
    var c_id = 'past' + i;
    var zl_id = 'zoom_lv' + i;
    var z_id = 'zoom' + i;
    var func = 'graph_scroll_reset(' + i + ')';
    if (i % 2 == 0) {
      html_code += '<tr>';
    }
    html_code += '<td><div class="chart">';
    html_code += '<div id="past_temp_range' + i + '" class="temp_range"></div>';
    html_code += '<div id="past_auto" class="auto">';
    html_code += '<form><input type="button" class="button" value="自動調整" onclick="regulate_temp()"></form>';
    html_code += '</div>';
    html_code += '<div id="past_checklist' + i + '" class="check_list">';
    html_code += '<form name="selectvalue">';
    html_code += '<table class="datatable" border="0" cellspacing= "0" cellpadding="1">';
    html_code += '<tr><th><center>水深</th></tr>';
    html_code += '<tr><td><div id="pastcheck' + i + '"></div></td></tr>';
    html_code += '<tr><td align="center"><div id="past_check_btn' + i + '"></div></td></tr>';
    html_code += '</table>';
    html_code += '</form>';
    html_code += '</div>';
    html_code += '<canvas id="';
    html_code += c_id;
    html_code += '" width="660px" height="440px"></canvas><div class="zoom_lv" id="';
    html_code += zl_id;
    html_code += '"></div><div class="zoom" id="';
    html_code += z_id;
    html_code += '"></div>';
    if (flag == 1 || test == 1) {
      html_code += '<button class="btn_reset" onClick="';
      html_code += func;
      html_code += '">最新</button>';
    }
    html_code += '</div>';
    html_code += '</td>';
    if (i % 2 == 1) {
      html_code += '</tr>';
    }
  }
  html_code += '</table>';
  html_code += '</td></tr></table>';
  html_code += '<table><tr><td>';
  html_code += '<h3>●気温の時間変化</h3>';
  html_code += '</td></tr>';
  html_code += '<tr><td>';
  html_code += '<div class="chart">';
  html_code += '<div id="temp_range2" class="temp_range"></div>';
  html_code += '<div id="kion_auto" class="auto">';
  html_code += '<form><input type="button" class="button" value="自動調整" onclick="regulate_temp_kion()"></form>';
  html_code += '</div>';
  html_code += '<div id="kion_checklist" class="check_list">';
  html_code += '<form name="selectvalue">';
  html_code += '<table class="datatable" border="0" cellspacing="0" cellpadding="1">';
  html_code += '<tr><th><center>場所</th></tr>';
  html_code += '<tr><td><div id="check4"></div></td></tr>';
  html_code += '<tr><td align="center"><div id="btn4"></div></td></tr>';
  html_code += '</table>';
  html_code += '</form>';
  html_code += '</div>';
  html_code += '<canvas id="';
  html_code += 'past' + suion_list.length;
  html_code += '" width="620px" height="440px"></canvas><div class="zoom_lv" id="';
  html_code += 'zoom_lv' + suion_list.length;
  html_code += '"></div><div class="zoom" id="';
  html_code += 'zoom' + suion_list.length;
  html_code += '"></div>';
  if (flag == 1 || test == 1) {
    html_code += '<button class="btn_reset" onClick="';
    html_code += 'graph_scroll_reset(' + suion_list.length + ')';
    html_code += '">最新</button>';
  }
  html_code += '</div>';
  html_code += '</div>';
  html_code += '</td></tr></table>';
  html_code += '</div>';
  document.getElementById('body_content').innerHTML = html_code;
}

/*
function set_html_tarea() {
    var html_code = '<font size="3"><strong>現況情報公開開始・休止・再開情報履歴</strong></font><br>'
                  + '<textarea rows="4" cols="68">';
    var info = "";
info += "&#12304;2018/12/01&#12305;\n";
info += "小池の現況情報公開を開始しました。\n";
info += "&#12304;2018/11/27&#12305;\n";
info += "三浦の現況情報公開を再開しました。\n";
info += "(水深20mの水温の測定は行われていません)\n";
info += "&#12304;2018/09/27&#12305;\n";
info += "三浦の現況情報公開を休止しました。\n";
info += "&#12304;2018/09/18&#12305;\n";
info += "中浦尻貝の現況情報公開を開始しました。\n";
info += "福浦の現況情報公開を再開しました。\n";
info += "&#12304;2018/07/24&#12305;\n";
info += "下灘の測定位置を変更し、現況情報公開を再開しました。\n";
info += "(旧測定位置：北緯33度03分32秒,&nbsp;東経132度25分36秒　新測定位置：北緯33度03分51秒,&nbsp;東経132度24分50秒)\n";
info += "&#12304;2018/07/11&#12305;\n";
info += "福浦の現況情報公開を休止しました。\n";
info += "&#12304;2018/06/22&#12305;\n";
info += "塩子島に設置されていた測定装置を油袋沖へ移し、現況情報公開を開始しました。\n";
info += "&#12304;2018/05/17&#12305;\n";
info += "下灘の現況情報公開を休止しました。\n";
info += "&#12304;2018/04/24&#12305;\n";
info += "塩子島の現況情報公開を休止しました。\n";
    html_code += info + '</textarea>';

    return html_code;
}
*/

/**
 * Google Map表示部分のHTMLコードを取得
 * 両モード(現在の状況・過去の状況)で挿入するのでプラグイン化
 * @return {string} HTMLコード
 */
function set_html_map() {
  var html_code = '<h3>●各観測点の位置</h3>';
  if (mode == 1) {
    html_code += '<h4>各地名をクリックすると、その地点の海水温の時間変化グラフまでスクロールします。</h4>';
  }
  /*
    html_code += '<table border="0"><tr>';
    html_code += '<td><h4>宇和海周辺</h4></td>';
    html_code += '<td><h4>瀬戸内海周辺</h4></td>';
    html_code += '</tr><tr>';
    html_code += '<td valign="top"><div id="canvas3" class="map" style="width:400px; height:520px;"></div></td>';
    html_code += '<td valign="top"><div id="canvas4" class="map" style="width:360px; height:340px;"></div><br><a href="map.php?mode=1" target="_blank"><h3><center>全体を表示する</center></h3></a></td>';
    html_code += '</tr></table>';
    */
  html_code += '<div id="canvas3" class="map" style="width:600px; height:560px;"></div>';

  return html_code;
}

/**
 * 設定パターン編集画面 HTMLコード挿入
 * 両モード(現在の状況・過去の状況)で挿入するのでプラグイン化
 * @return {string} HTMLコード
 */
function set_html_setting() {
  var html_code = '';
  if (mode == 0) {
    html_code +=
      '<div id="modal-content" class="now_setting"><div id="ui-tab"><ul><li><a href="#fragment-1"><span>設定A</span></a></li><li><a href="#fragment-2"><span>設定B</span></a></li><li><a href="#fragment-3"><span>設定C</span></a></li></ul>';
    for (var i = 0; i < setting_name[mode].length; i++) {
      switch (i) {
        case 0:
          var type = 'A';
          break;
        case 1:
          var type = 'B';
          break;
        case 2:
          var type = 'C';
          break;
      }
      var div_id = 'fragment-' + (i + 1);
      var name_id = 'n_name_' + i;
      var n_check_id = 'now_check_' + i;
      var n_check_btn_id = 'now_check_' + i + '_btn';
      var n_temp_id = 'now_temp_' + i;
      var n_temp_range_id = 'now_temp_range_' + i;
      var n_preview_id = 'now_preview' + i;
      var btn_id = 'setting_btn' + i;

      html_code += '<div id="';
      html_code += div_id;
      html_code += '" class="fragment">';
      html_code += '<div id="setting_name">設定名　';
      html_code += type;
      html_code += '：<input type="text" id="';
      html_code += name_id;
      html_code += '" maxlength="8"></div>';
      html_code += '<div align="center">プレビュー</div>';
      html_code += '<div class="preview2">';
      html_code += '<div id="' + n_temp_range_id + '" class="temp_range"></div>';
      html_code += '<div id="now_check_setting" class="check_list">';
      html_code += '<form name="selectvalue">';
      html_code += '<table class="datatable" border="0" cellspacing="0" cellpadding="1">';
      html_code += '<tr><th><center>水深</th></tr>';
      html_code += '<tr><td><div id="' + n_check_id + '"></div></td></tr>';
      html_code += '<tr><td align="center"><div id="' + n_check_btn_id + '"></div></td></tr>';
      html_code += '</table></form></div>';
      html_code += '<canvas id="' + n_preview_id + '" width="660px" height="440px"></canvas>';
      html_code += '</div>';
      html_code += '<div id="';
      html_code += btn_id;
      html_code += '" class="setting_btn"></div></div>';
    }
  } else if (mode == 1) {
    html_code +=
      '<div id="modal-content" class="past_setting"><div id="ui-tab"><ul><li><a href="#fragment-1"><span>設定A</span></a></li><li><a href="#fragment-2"><span>設定B</span></a></li><li><a href="#fragment-3"><span>設定C</span></a></li></ul>';
    for (var i = 0; i < setting_name[mode].length; i++) {
      switch (i) {
        case 0:
          var type = 'A';
          break;
        case 1:
          var type = 'B';
          break;
        case 2:
          var type = 'C';
          break;
      }
      var div_id = 'fragment-' + (i + 1);
      var name_id = 'p_name_' + i;
      var p_check_id = 'past_check_' + i;
      var p_check_btn_id = 'past_check_' + i + '_btn';
      var p_temp_id = 'past_temp_' + i;
      var p_temp_range_id = 'past_temp_range_' + i;
      var k_check_id = 'kion_check_' + i;
      var k_check_btn_id = 'kion_check_' + i + '_btn';
      var k_temp_id = 'kion_temp_' + i;
      var k_temp_range_id = 'kion_temp_range_' + i;
      var p_preview_id = 'past_preview' + i;
      var k_preview_id = 'kion_preview' + i;
      var btn_id = 'setting_btn' + i;

      html_code += '<div id="';
      html_code += div_id;
      html_code += '" class="fragment2">';
      html_code += '設定名　';
      html_code += type;
      html_code += '：<input type="text" id="';
      html_code += name_id;
      html_code += '" maxlength="8"><br>';
      html_code += '<br>海水温の時間変化：<br>表示項目<br><div id="';
      html_code += p_check_btn_id;
      html_code += '"></div><div id="';
      html_code += p_check_id;
      html_code += '"></div>温度の表示範囲<br><canvas id="';
      html_code += p_temp_id;
      html_code += '" width="320px" height="35px"></canvas><br><div id="';
      html_code += p_temp_range_id;
      html_code += '" class="temp_range3" style="width: 300px;"></div><br>気温の時間変化：<br>表示項目<br><div id="';
      html_code += k_check_btn_id;
      html_code += '"></div><div id="';
      html_code += k_check_id;
      html_code += '"></div>温度の表示範囲<br><canvas id="';
      html_code += k_temp_id;
      html_code += '" width="320px" height="35px"></canvas><br><div id="';
      html_code += k_temp_range_id;
      html_code +=
        '" class="temp_range3" style="width: 300px;"></div><br><div class="preview">プレビュー<br><canvas id="';
      html_code += p_preview_id;
      html_code += '" class="past_preview" width="310px" height="210px"></canvas><br><canvas id="';
      html_code += k_preview_id;
      html_code += '" class="kion_preview" width="310px" height="210px"></canvas><br></div><div id="';
      html_code += btn_id;
      html_code += '" class="setting_btn"></div></div>';
    }
  }
  html_code += '</div></div>';

  return html_code;
}

/**
 * 『データ保存』HTMLコード挿入
 */
function set_html_download() {
  var html_code = '<table><tr><td>';
  html_code += '<h3>●csvファイル作成・ダウンロード</h3>';
  html_code += '<form action="download.php" method="post" target="_blank">';
  html_code += '<span id="d_table"></span><br>';
  html_code += '<a href="rireki.html">観測装置 更新履歴</a><br>';
  //html_code += '<div align="center"><input type="submit" value="Download"></form></div>';
  html_code += '<div align="center"><input type="submit" value="ダウンロード"></form></div>';
  html_code += '</td></tr></table>';
  document.getElementById('body_content').innerHTML = html_code;
}

/**
 * 『データ保存』ページにおける表の作成
 */
function set_download_table() {
  var dt = new Date();
  var date = dt.getFullYear() + '/' + ('0' + (dt.getMonth() + 1)).slice(-2) + '/' + ('0' + dt.getDate()).slice(-2);
  var html_code = '<table border="1" cellspacing="0" cellpadding="1">';
  html_code += '<tr><th>場所</th><td>';
  for (var i = 0; i < suion_list.length; i++) {
    if (Format_type[i] < 0) continue;
    if (suion_list[i] == '小池') {
      //var update_date = new Date("2018/12/01 10:00:00");
      if (data[i].length <= 0) continue;
    } else {
      html_code += '<input type="radio" name="point" value="';
      html_code += suion_list[i];
      html_code += '"';
      if (i == 0) {
        html_code += ' checked>';
      } else {
        html_code += '>';
      }
      html_code += suion_list[i] + '&emsp;' + suion_list_start[i] + '～' + suion_list_end[i] + '<BR>';
    }
  }
  /*
    for(var i = 0; i < setonaikai.length; i++) {
        html_code += '<input type="radio" name="point" value="';
        html_code += setonaikai[i];
        html_code += '">';
        html_code += setonaikai[i] + '&emsp;'+ setonaikai_start[i] + '～' + setonaikai_end[i] + '<BR>';
    }
    */
  html_code +=
    '</td></tr><tr><th>期間</th><td align="center"><input type="text" id="date1" class="date" name="date1">&nbsp;～&nbsp;<input type="text" id="date2" class="date" name="date2"></td></tr>';
  //html_code += '</td></tr><tr><th>Period</th><td align="center"><input type="text" id="date1" class="date" name="date1">&nbsp;～&nbsp;<input type="text" id="date2" class="date" name="date2"></td></tr>';
  html_code += '</table>';
  document.getElementById('d_table').innerHTML = html_code;
  document.getElementById('date2').value = date;
  dt.setDate(dt.getDate() - 30);
  date = dt.getFullYear() + '/' + ('0' + (dt.getMonth() + 1)).slice(-2) + '/' + ('0' + dt.getDate()).slice(-2);
  document.getElementById('date1').value = date;
  $(function () {
    $('.date').datepicker();
  });
}

/**
 * スライダー操作ボタン押下時の処理(スライダーの値をval分ずらす)
 * @param {number} val ずらす値
 * @param {number} flag 0: 一般公開ページ 1: 関係者専用ページ
 */
function slider_btn_click(val, flag) {
  var value = jQuery('#time_range').slider('option', 'value') - val;
  jQuery('#time_range').slider('value', value);
}

/**
 * (720-value)時間前のデータテーブル表示
 * ハードコーディングになっているので修正の必要あり
 * @param {number} value 値(スライダーの値を入れる)
 * @param {number} flag 0: 一般公開ページ 1: 関係者専用ページ
 */
function make_table(value, flag) {
  var date = new Date(load_date);
  date.setHours(load_date.getHours() - (720 - parseInt(value)));
  var year = date.getFullYear();
  var month = date.getMonth() + 1;
  var day = date.getDate();
  var hour = date.getHours();
  var measure_time = '' + year + '/' + ('0' + month).slice(-2) + '/' + ('0' + day).slice(-2) + ' ' + hour + ':00:00';
  document.getElementById('measure_time').innerHTML = measure_time;
  for (var i = 0; i < suion_list.length; i++) {
    p[i] = search_suion(data[i], Format_type[i], value);
  }
  for (var i = 0; i < temp_list.length; i++) {
    n_temp[i] = search_temp(temp[i], value);
    min_max_temp_search(temp_list[i], value);
  }
  //   alert(value + " " + n_temp[0]);

  var html_code = '<h3>●気温/その日の最低気温・最高気温</h3>'; //過去の状況
  document.getElementById('pt_title').innerHTML = html_code;
  //html_code = '<strong>測定日時：' + measure_time + '</strong><br>';

  html_code = '<table border="1" cellspacing="0" cellpadding="1">';
  html_code += '<tr align="center">';
  html_code += '<td rowspan="2">場所</td>';
  html_code += '<td rowspan="2" width="50">気温</td>';
  html_code += '<td colspan="2">その日の最低気温・最高気温</td>';
  html_code += '</tr>';
  html_code += '<tr align="center">';
  html_code += '<td>最低気温[時刻]</td><td>最高気温[時刻]</td>';
  html_code += '</tr>';
  for (var i = 0; i < n_temp.length; i++) {
    html_code += '<tr align="center"><td align="left" id="t_table' + (temp_list.length - 1 - i) + '0">';
    html_code += '<font color="' + color_table2[i] + '">■</font>';
    html_code += temp_list[i];
    html_code += '</td>';
    if (n_temp[i] == -1) {
      var load_year = load_date.getFullYear();
      var load_month = load_date.getMonth() + 1;
      var load_day = load_date.getDate();
      var load_hour = load_date.getHours();
      var minuite = load_date.getMinutes();
      if (load_year == year && load_month == month && load_day == day && load_hour == hour && minuite < 10) {
        html_code += '<td id="t_table' + (temp_list.length - 1 - i) + '1">更新待ち</td>';
      } else {
        html_code += '<td id="t_table' + (temp_list.length - 1 - i) + '1">欠測</td>';
      }
    } else {
      html_code += '<td id="t_table' + (temp_list.length - 1 - i) + '1">' + n_temp[i][1][1] + '&#08451;</td>';
    }
    if (temp_minTemp[i] == '' || temp_minTime[i] == '') {
      if (load_date.getHours() == 0 || (load_date.getHours() == 1 && load_date.getMinutes() < 10)) {
        html_code += '<td id="t_table' + (temp_list.length - 1 - i) + '2">更新待ち</td>';
      } else {
        html_code += '<td id="t_table' + (temp_list.length - 1 - i) + '2">欠測</td>';
      }
    } else {
      html_code +=
        '<td id="t_table' +
        (temp_list.length - 1 - i) +
        '2">' +
        temp_minTemp[i] +
        '&#08451;[' +
        temp_minTime[i] +
        ']</td>';
    }
    if (temp_maxTemp[i] == '' || temp_maxTime[i] == '') {
      if (load_date.getHours() == 0 || (load_date.getHours() == 1 && load_date.getMinutes() < 10)) {
        html_code += '<td id="t_table' + (temp_list.length - 1 - i) + '3">更新待ち</td>';
      } else {
        html_code += '<td id="t_table' + (temp_list.length - 1 - i) + '3">欠測</td>';
      }
    } else {
      html_code +=
        '<td id="t_table' +
        (temp_list.length - 1 - i) +
        '3">' +
        temp_maxTemp[i] +
        '&#08451;[' +
        temp_maxTime[i] +
        ']</td>';
    }
  }
  html_code += '</tr></table>';
  html_code += '<strong>測定日時：' + measure_time + '</strong><br>';
  document.getElementById('pasttemp').innerHTML = html_code;

  html_code = '<h3>●海水温</h3>';
  html_code += '<strong>・各表記について</strong><br>';
  html_code += '<table border="0" cellspacing="0" cellpadding="1">';
  html_code += '<tr><td>NA</td>';
  html_code += '<td>：測定を行っていない</td></tr>';
  html_code += '<tr><td>Err</td>';
  html_code += '<td>：故障による測定失敗</td></tr>';
  html_code += '</table>';
  document.getElementById('ps_title').innerHTML = html_code;
  //html_code += '<strong>測定日時：' + measure_time + '</strong><br>';
  html_code = '<table class="water-table">';
  html_code += '<tr align="center"><td colspan="2">場所</td>';
  for (var i = 0; i < suion_list.length; i++) {
    var name = suion_list[i];
    var kome = '';
    /*
        if(suion_list[i] == "小池") {
            kome = "<br><strong>期間限定</strong>";
        }
        */
    /*
        if(suion_list[i] == "三浦") {
            kome = "<br><strong>休止中</strong>";
        }
        */
    if (suion_list[i] == '塩子島') {
      kome = '<strong>&#8251;</strong>';
    }
    html_code += '<td width="73" id="s_table' + i + '_0">' + name + kome + '</td>';
  }
  html_code += '</tr><tr>';
  html_code += '<td rowspan="' + deep_list['全体'].length + '">水深</td>';
  html_code += '<td><font color="' + color_table[0] + '">■</font>' + deep_list['全体'][0] + '</td>';
  for (var i = 0; i < suion_list.length; i++) {
    /*
        if(suion_list[i] == "小池") {
            //var update_date = new Date("2018/12/01 10:00:00");
            if(data[i].length <= 0) {
                if(flag == 0) {
                    html_code += '<td id="s_table' + i + '_1" rowspan="' + deep_list['全体'].length + '" align="center">2018/12/01<br>情報公開<br>開始予定</td>';
                } else {
                    html_code += '<td id="s_table' + i + '_1" rowspan="' + (deep_list['全体'].length + 3) + '" align="center">2018/12/01<br>情報公開<br>開始予定</td>';
                }
                continue;
            }
        }
        */
    if (suion_list[i] == '八幡浜' || suion_list[i] == '伊方') {
      //var update_date = new Date("2018/12/01 10:00:00");
      if (data[i].length <= 0) {
        if (flag == 0) {
          html_code +=
            '<td id="s_table' +
            i +
            '_1" rowspan="' +
            deep_list['全体'].length +
            '" align="center">2020/09/14<br>情報公開<br>開始予定</td>';
        } else {
          html_code +=
            '<td id="s_table' +
            i +
            '_1" rowspan="' +
            (deep_list['全体'].length + 3) +
            '" align="center">2020/09/14<br>情報公開<br>開始予定</td>';
        }
        continue;
      }
    }
    if (suion_list[i] == '吉田') {
      var update_date = new Date('2020/11/17 00:00:00');
      var previous_date = new Date('2020/10/02 14:30:00');
      if (date.getTime() < update_date.getTime() && previous_date.getTime() < date.getTime()) {
        if (flag == 0) {
          html_code +=
            '<td id="s_table' + i + '_1" rowspan="' + deep_list['全体'].length + '" align="center">欠測</td>';
        } else {
          html_code +=
            '<td id="s_table' + i + '_1" rowspan="' + (deep_list['全体'].length + 3) + '" align="center">欠測</td>';
        }
        continue;
      }
    }
    if (rest.indexOf(suion_list[i]) >= 0) {
      if (flag == 0) {
        html_code +=
          '<td id="s_table' + i + '_1" rowspan="' + deep_list['全体'].length + '" align="center">休止中</td>';
      } else {
        html_code +=
          '<td id="s_table' + i + '_1" rowspan="' + (deep_list['全体'].length + 3) + '" align="center">休止中</td>';
      }
      continue;
    }
    if (suion_list[i] in tuning) {
      var start_date = new Date(tuning[suion_list[i]][0] + ' 00:00:00');
      var end_date = new Date(tuning[suion_list[i]][1] + ' 23:00:00');
      var measure_date = new Date(measure_time);
      if (start_date.getTime() <= measure_date.getTime() && measure_date.getTime() <= end_date.getTime()) {
        if (flag == 0) {
          html_code +=
            '<td id="s_table' + i + '_1" rowspan="' + deep_list['全体'].length + '" align="center">機器調整中</td>';
        } else {
          html_code +=
            '<td id="s_table' +
            i +
            '_1" rowspan="' +
            (deep_list['全体'].length + 3) +
            '" align="center">機器調整中</td>';
        }
        continue;
      }
    }
    if (p[i] == -1) {
      if (flag == 0) {
        html_code += '<td id="s_table' + i + '_1" rowspan="' + deep_list['全体'].length + '" align="center">欠測</td>';
      } else {
        html_code +=
          '<td id="s_table' + i + '_1" rowspan="' + (deep_list['全体'].length + 3) + '" align="center">欠測</td>';
      }
      continue;
    }
    if (deep_list[suion_list[i]][0] == '') {
      html_code += '<td id="s_table' + i + '_1" align="right"><font color="#999999">NA</font></td>';
    } else {
      if (flag == 0) {
        var value = round_suion(get_now_data(i, 2));
      } else {
        var value = round_data(get_now_data(i, 2), 2);
      }
      /*
            if(value == "Err") {
                html_code += '<td id="s_table' + i + '_1" align="right"><font color="#ff3333">Err</font></td>';
            } else {
                html_code += '<td id="s_table' + i + '_1" align="right">' + value + '&#08451;</td>';
            }
            */
      var uri = val2Image(value);
      html_code += '<td id="s_table' + i + '_1" align="right"><img src="' + uri + '"></td>';
    }
  }
  html_code += '</tr>';
  for (var i = 1; i < deep_list['全体'].length; i++) {
    if (i % 2 == 0) {
      html_code += '<tr><td><font color="' + color_table[i] + '">■</font>' + deep_list['全体'][i] + '</td>';
    } else {
      html_code +=
        '<tr bgcolor="#f6f6f6"><td><font color="' + color_table[i] + '">■</font>' + deep_list['全体'][i] + '</td>';
    }
    for (var j = 0; j < suion_list.length; j++) {
      if (suion_list[j] == '吉田') {
        var update_date = new Date('2020/11/17 00:00:00');
        var previous_date = new Date('2020/10/02 14:30:00');
        if (date.getTime() < update_date.getTime() && previous_date.getTime() < date.getTime()) {
          continue;
        }
      }
      if (rest.indexOf(suion_list[j]) >= 0) {
        continue;
      }
      if (suion_list[j] in tuning) {
        var start_date = new Date(tuning[suion_list[j]][0] + ' 00:00:00');
        var end_date = new Date(tuning[suion_list[j]][1] + ' 23:00:00');
        var measure_date = new Date(measure_time);
        if (start_date.getTime() <= measure_date.getTime() && measure_date.getTime() <= end_date.getTime()) continue;
      }
      if (p[j] == -1) continue;
      var value;
      if (deep_list[suion_list[j]][i] == '') {
        html_code += '<td id="s_table' + j + '_' + (i + 1) + '" align="right"><font color="#999999">NA</font></td>';
      } else {
        if (flag == 0) {
          /*
                    if(Format_type[j] >= 3) {
                        value = round_suion(get_now_data(j, i + 2));
                    } else {
                        value = round_suion(get_now_data(j, i + 1));
                    }
                    */
          value = round_suion(get_now_data(j, i + 2));
        } else {
          /*
                    if(Format_type[j] >= 3) {
                        value = round_data(get_now_data(j, i + 2), 2);
                    } else {
                        value = round_data(get_now_data(j, i + 1), 2);
                    }
                    */
          value = round_data(get_now_data(j, i + 2), 2);
        }
	if (suion_list[j] == '三浦' && deep_list['三浦'][i] == '5m') value = '*' + value;
	if (suion_list[j] == '三崎' && deep_list['三崎'][i] == '4m') value = '*' + value;
        /*
                if(value == "Err") {
                    html_code += '<td id="s_table' + j + '_' + (i + 1) + '" align="right"><font color="#ff3333">Err</font></td>';
                } else {
                    html_code += '<td id="s_table' + j + '_' + (i + 1) + '" align="right">' + value + '&#08451;</td>';
                }
                */
        var uri = val2Image(value);
        html_code += '<td id="s_table' + j + '_' + (i + 1) + '" align="right"><img src="' + uri + '"></td>';
      }
    }
    html_code += '</tr>';
  }
  if (flag == 1) {
    html_code += '<tr><td colspan="2">内機温度</td>';
    for (i = 0; i < suion_list.length; i++) {
      if (rest.indexOf(suion_list[i]) >= 0) {
        continue;
      }
      if (suion_list[i] in tuning) {
        var start_date = new Date(tuning[suion_list[i]][0] + ' 00:00:00');
        var end_date = new Date(tuning[suion_list[i]][1] + ' 23:00:00');
        var measure_date = new Date(measure_time);
        if (start_date.getTime() <= measure_date.getTime() && measure_date.getTime() <= end_date.getTime()) continue;
      }
      if (p[i] == -1) continue;
      if (get_now_data(i, 10) == 'NA') {
        html_code += '<td id="s_table' + i + '_10" align="right"><font color="#999999">NA</font></td>';
      } else {
        html_code +=
          '<td id="s_table' + i + '_10" align="right">' + round_data(get_now_data(i, 10), 2) + '&#08451;</td>';
      }
    }
    html_code += '</tr>';
    html_code += '<tr><td colspan="2">Solar</td>';
    for (i = 0; i < suion_list.length; i++) {
      if (rest.indexOf(suion_list[i]) >= 0) {
        continue;
      }
      if (suion_list[i] in tuning) {
        var start_date = new Date(tuning[suion_list[i]][0] + ' 00:00:00');
        var end_date = new Date(tuning[suion_list[i]][1] + ' 23:00:00');
        var measure_date = new Date(measure_time);
        if (start_date.getTime() <= measure_date.getTime() && measure_date.getTime() <= end_date.getTime()) continue;
      }
      if (p[i] == -1) continue;
      if (get_now_data(i, 11) == 'NA') {
        html_code += '<td id="s_table' + i + '_11" align="right"><font color="#999999">NA</font></td>';
      } else {
        html_code += '<td id="s_table' + i + '_11" align="right">' + round_data(get_now_data(i, 11), 2) + 'V</td>';
      }
    }
    html_code += '</tr>';
    html_code += '<tr><td colspan="2">内部電圧</td>';
    for (i = 0; i < suion_list.length; i++) {
      if (rest.indexOf(suion_list[i]) >= 0) {
        continue;
      }
      if (suion_list[i] in tuning) {
        var start_date = new Date(tuning[suion_list[i]][0] + ' 00:00:00');
        var end_date = new Date(tuning[suion_list[i]][1] + ' 23:00:00');
        var measure_date = new Date(measure_time);
        if (start_date.getTime() <= measure_date.getTime() && measure_date.getTime() <= end_date.getTime()) continue;
      }
      if (p[i] == -1) continue;
      if (get_now_data(i, 12) == 'NA') {
        html_code += '<td id="s_table' + i + '_12" align="right"><font color="#999999">NA</font></td>';
      } else {
        html_code += '<td id="s_table' + i + '_12" align="right">' + round_data(get_now_data(i, 12), 2) + 'V</td>';
      }
    }
    html_code += '</tr>';
  }
  html_code += '<tr><td class="remarks" colspan="2"></td>';
  for (i = 0; i < suion_list.length; i++) {
    html_code += '<td class="remarks">';
    switch (suion_list[i]) {
      case '三浦':
        html_code += '<font size="-1">*3mの水温</font>';
        break;
      case '三崎':
        html_code += '<font size="-1">*4mの水温</font>';
        break;
    }
    html_code += '</td>';
  }
  html_code += '</tr>';
  html_code += '</table>';
  /*
    var value_15;
    if(flag == 1) {
        value_15 = round_data(get_now_data(suion_list.indexOf('中浦尻貝'), -1), 2);
    } else {
        value_15 = round_data(get_now_data(suion_list.indexOf('中浦尻貝'), -1), 1);
    }
    var miura_value_3;
    if(flag == 1) {
        miura_value_3 = round_data(get_now_data(suion_list.indexOf('三浦'), -1), 2);
    } else {
        miura_value_3 = round_data(get_now_data(suion_list.indexOf('三浦'), -1), 1);
    }
    */

  /*
    html_code += '<font size="-1">中浦尻貝の水深15mの海水温は' 
              + value_15 
              + '&#8451;です<br>';
    */
  //html_code += '*水深3mのデータです。<br>';
  html_code += '測定日時：' + measure_time + '<br>';
  /*2022/5/23 修正箇所 (uyamatogi) */
  html_code += '2020年7月22日14時から、明浜の海水温観測地点が、東方向に4km移動しました。</font><br><br>';
  document.getElementById('pastsuion').innerHTML = html_code;
}

/**
 * 最新気温の表を作成
 */
function setText() {
  for (var i = 0; i < temp_list.length; i++) {
    min_max_temp_search(temp_list[i], -1);
  }
  var text = '<h3>●最新の気温/本日の最低気温・最高気温</h3>'; //現在の状況
  document.getElementById('nt_table_title').innerHTML = text;
  text = '<table border="1" cellspacing="0" cellpadding="1">';
  text +=
    '<tr align="center"><td rowspan="2">場所</td><td rowspan="2">最新の気温</td><td colspan="2">本日の最低気温・最高気温</td></tr><tr align="center"><td>最低気温[時刻]</td><td>最高気温[時刻]</td></tr>';
  for (var i = 0; i < n_temp.length; i++) {
    text +=
      '<tr align="center"><td id="t_table' +
      (temp_list.length - 1 - i) +
      '0" align="left"><font color="' +
      color_table2[i] +
      '">■</font>' +
      temp_list[i] +
      '</td>';
    text += '<td id="t_table' + (temp_list.length - 1 - i) + '1">' + n_temp[i][1][1] + '&#08451;</td>';
    text +=
      '<td id="t_table' +
      (temp_list.length - 1 - i) +
      '2">' +
      temp_minTemp[i] +
      '&#08451;[' +
      temp_minTime[i] +
      ']</td>';
    text +=
      '<td id="t_table' +
      (temp_list.length - 1 - i) +
      '3">' +
      temp_maxTemp[i] +
      '&#08451;[' +
      temp_maxTime[i] +
      ']</td>';
  }
  text += '</tr></table>';
  text += '<strong>最新測定日時 ';
  text += n_temp[0][0];
  text += ' ';
  text += n_temp[0][1][0];
  text += '</strong><br>';
  document.getElementById('nowtemp').innerHTML = text;
}

/**
 * 表のタイトルを表示
 * @param {number} flag 0: 一般公開ページ 1: 関係者専用ページ
 * @param {number} value 値(スライダーの値を入れる)
 */
function setTableTitle(flag, value) {
  if (value == -1) {
    var text = '<h3>●最新の海水温</h3>';
  } else {
    var date = new Date();
    date.setHours(load_date.getHours() - (720 - parseInt(value)));
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var day = date.getDate();
    var hour = date.getHours();
    var text =
      '<h4>' +
      year +
      '/' +
      ('0' + month).slice(-2) +
      '/' +
      ('0' + day).slice(-2) +
      ' ' +
      hour +
      ':00:00時点の海水温</h4>';
  }
  text +=
    '<strong>・各表記について</strong><br>' +
    '<table border="0" cellspacing="0" cellpadding="1">' +
    '<tr><td>NA</td>' +
    '<td>：測定を行っていない</td></tr>' +
    '<tr><td>Err</td>' +
    '<td>：故障による測定失敗</td></tr>' +
    '</table>';
  document.getElementById('p_table_title').innerHTML = text;
}

/**
 * 最新の海水温　表作成
 * @param {number} flag 0: 一般公開ページ 1: 関係者専用ページ
 */
function setTable(flag) {
  // flag 0: 一般者用 1: 関係者用
  setTableTitle(flag, -1);
  /*
    for(var i = 0; i < suion_list.length; i++) {
        p[i] = now_suion_set(data[i]);
    }
    */
  /*
    var addTable = "<br><strong>・各表記について</strong><br>";
    addTable += '<table border="0" cellspacing="0" cellpadding="1">';
    addTable += '<tr><td><strong>NA</strong></td>';
    addTable += '<td><strong>：測定を行っていない</strong></td></tr>';
    addTable += '<tr><td><strong>Err</strong></td>';
    addTable += '<td><strong>：故障による測定失敗</strong></td></tr>';
    addTable += '</table>';
*/
  var addTable = '<table class="water-table">';
  addTable += '<tr align="center"><td colspan="2">場所</td>';
  for (i = 0; i < suion_list.length; i++) {
    var name = suion_list[i];
    var kome = '';
    /*
        if(suion_list[i] == "小池") {
            kome = "<br><strong>期間限定</strong>";
        }
        */
    /*
        if(rest.indexOf(suion_list[i]) >= 0) {
            kome = "<br><strong>休止中</strong>";
        }
        */
    if (suion_list[i] == '塩子島') {
      name = '油袋沖';
    }
    addTable += '<td id="s_table' + i + '_0">' + name + kome + '</td>';
  }
  addTable += '</tr><tr align="center"><td colspan="2"><font size="-1">最新測定日時<br>※</font></td>';
  for (i = 0; i < suion_list.length; i++) {
    /*
        if(suion_list[i] == "小池") {
            //var update_date = new Date("2018/12/01 10:00:00");
            if(data[i].length <= 0) {
                if(flag == 0) {
                    addTable += '<td id="s_table' + i + '_1" rowspan="' + (deep_list['全体'].length + 1) + '" align="center">2018/12/01<br>情報公開<br>開始予定</td>';
                } else {
                    addTable += '<td id="s_table' + i + '_1" rowspan="' + (deep_list['全体'].length + 4) + '" align="center">2018/12/01<br>情報公開<br>開始予定</td>';
                }
                continue;
            }
        }
        */
    if (suion_list[i] == '八幡浜' || suion_list[i] == '伊方') {
      //var update_date = new Date("2018/12/01 10:00:00");
      if (data[i].length <= 0) {
        if (flag == 0) {
          addTable +=
            '<td id="s_table' +
            i +
            '_1" rowspan="' +
            (deep_list['全体'].length + 1) +
            '" align="center">2020/09/14<br>情報公開<br>開始予定</td>';
        } else {
          addTable +=
            '<td id="s_table' +
            i +
            '_1" rowspan="' +
            (deep_list['全体'].length + 4) +
            '" align="center">2020/09/14<br>情報公開<br>開始予定</td>';
        }
        continue;
      }
    }
    if (rest.indexOf(suion_list[i]) >= 0) {
      if (flag == 0) {
        addTable +=
          '<td id="s_table' + i + '_1" rowspan="' + (deep_list['全体'].length + 1) + '" align="center">休止中</td>';
      } else {
        addTable +=
          '<td id="s_table' + i + '_1" rowspan="' + (deep_list['全体'].length + 4) + '" align="center">休止中</td>';
      }
      continue;
    }
    if (suion_list[i] in tuning) {
      var end_date = new Date(tuning[suion_list[i]][1] + ' 23:00:00');
      if (load_date.getTime() <= end_date.getTime()) {
        if (flag == 0) {
          addTable +=
            '<td id="s_table' +
            i +
            '_1" rowspan="' +
            (deep_list['全体'].length + 1) +
            '" align="center">機器調整中</td>';
        } else {
          addTable +=
            '<td id="s_table' +
            i +
            '_1" rowspan="' +
            (deep_list['全体'].length + 4) +
            '" align="center">機器調整中</td>';
        }
        continue;
      }
    }
    var measure_date = '';
    switch (Format_type[i]) {
      case 0:
      case 4:
      case 5:
      case 6:
        measure_date = p[i][0] + ' ' + p[i][1];
        break;
      case 1:
      case 2:
        measure_date =
          p[i][0].slice(0, 4) +
          '/' +
          p[i][0].slice(4, 6) +
          '/' +
          p[i][0].slice(6, 8) +
          ' ' +
          p[i][0].slice(8, 10) +
          ':' +
          p[i][0].slice(10, 12) +
          ':00';
        break;
      case 3:
        measure_date = '20' + p[i][0] + ' ' + p[i][1];
        break;
      case -1:
        measure_date =
          p[i][0].slice(0, 4) +
          '/' +
          p[i][0].slice(4, 6) +
          '/' +
          p[i][0].slice(6, 8) +
          ' ' +
          p[i][0].slice(8, 10) +
          ':' +
          p[i][0].slice(10, 12) +
          ':' +
          p[i][0].slice(12, 14);
      default:
        measure_date = p[i][0] + ' ' + p[i][1];
        break;
    }
    var year = load_date.getFullYear();
    var month = load_date.getMonth() + 1;
    var day = load_date.getDate();
    var hour = load_date.getHours();
    var lated_date = '' + year + '/' + ('0' + month).slice(-2) + '/' + ('0' + day).slice(-2) + ' ' + hour + ':00:00';
    var l_dt = new Date(lated_date);
    var m_dt = new Date(measure_date);
    if ((l_dt.getTime() - m_dt.getTime()) / (3600 * 1000) > 1) {
      addTable +=
//        '<td id="s_table' + i + '_1" width="73" bgcolor="#ff6666">' + get_suion_time(i, Format_type[i]) + '</td>';
        '<td id="s_table' + i + '_1" width="73" bgcolor="#ff6666"><font size="-1">' + p[i][0] + '</font><br>' + p[i][1] + '</td>';
    } else {
//     addTable += '<td id="s_table' + i + '_1" width="73">' + get_suion_time(i, Format_type[i]) + '</td>';
     addTable += '<td id="s_table' + i + '_1" width="73"><font size="-1">' + p[i][0] + '</font><br>' + p[i][1] + '</td>';
}
  }
  addTable +=
    '</tr><tr><td rowspan="' +
    deep_list['全体'].length +
    '">水深</td><td><font color="' +
    color_table[0] +
    '">■</font>' +
    deep_list['全体'][0] +
    '</td>';
  for (i = 0; i < suion_list.length; i++) {
    if (rest.indexOf(suion_list[i]) >= 0) continue;
    if (suion_list[i] in tuning) {
      var end_date = new Date(tuning[suion_list[i]][1] + ' 23:00:00');
      if (load_date.getTime() <= end_date.getTime()) continue;
    }
    if (suion_list[i] == '小池') {
      var update_date = new Date('2018/12/01 10:00:00');
      if (load_date.getTime() < update_date.getTime() && data[i].length <= 0) {
        continue;
      }
    }
    if (suion_list[i] == '八幡浜' || suion_list[i] == '伊方') {
      //var update_date = new Date("2018/12/01 10:00:00");
      if (data[i].length <= 0) {
        continue;
      }
    }
    if (deep_list[suion_list[i]][0] == '') {
      addTable += '<td id="s_table' + i + '_2" align="right"><font color="#999999">NA</font></td>';
    } else {
      if (flag == 0) {
        var value = round_suion(get_now_data(i, 2));
      } else {
        var value = round_data(get_now_data(i, 2), 2);
      }
      /*
            if(value == "Err") {
                addTable += '<td id="s_table' + i + '_2" align="right"><font color="#ff3333">Err</font></td>';
            } else {
                addTable += '<td id="s_table' + i + '_2" align="right">' + value + '&#08451;</td>';
            }
            */
      var uri = val2Image(value);
      addTable += '<td id="s_table' + i + '_2" align="right"><img src="' + uri + '"></td>';
    }
  }
  addTable += '</tr>';
  for (i = 1; i < deep_list['全体'].length; i++) {
    if (i % 2 == 0) {
      addTable += '<tr><td><font color="' + color_table[i] + '">■</font>' + deep_list['全体'][i] + '</td>';
    } else {
      addTable +=
        '<tr bgcolor="#f6f6f6"><td><font color="' + color_table[i] + '">■</font>' + deep_list['全体'][i] + '</td>';
    }
    for (j = 0; j < suion_list.length; j++) {
      if (rest.indexOf(suion_list[j]) >= 0) continue;
      if (suion_list[j] in tuning) {
        var end_date = new Date(tuning[suion_list[j]][1] + ' 23:00:00');
        if (load_date.getTime() <= end_date.getTime()) continue;
      }
      if (suion_list[j] == '小池') {
        var update_date = new Date('2018/12/01 10:00:00');
        if (load_date.getTime() < update_date.getTime() && data[j].length <= 0) {
          continue;
        }
      }
      if (suion_list[j] == '八幡浜' || suion_list[j] == '伊方') {
        //var update_date = new Date("2018/12/01 10:00:00");
        if (data[j].length <= 0) {
          continue;
        }
      }
      var value;
      if (deep_list[suion_list[j]][i] == '') {
        addTable += '<td id="s_table' + j + '_' + (i + 2) + '" align="right"><font color="#999999">NA</font></td>';
      } else {
        if (flag == 0) {
          /*
                    if(Format_type[j] >= 3) {
                        value = round_suion(get_now_data(j, i+2));
                    } else {
                        value = round_suion(get_now_data(j, i+1));
                    }
                    */
          value = round_suion(get_now_data(j, i + 2));
        } else {
          /*
                    if(Format_type[j] >= 3) {
                        value = round_data(get_now_data(j, i+2), 2);
                    } else {
                        value = round_data(get_now_data(j, i+1), 2);
                    }
                    */
          value = round_data(get_now_data(j, i + 2), 2);
        }
        if (suion_list[j] == '三浦' && deep_list['三浦'][i] == '5m') value = '*' + value;
        if (suion_list[j] == '三崎' && deep_list['三崎'][i] == '4m') value = '*' + value;
        /*
                if(value == "Err") {
                    addTable += '<td id="s_table' + j + '_' + (i + 2) + '" align="right"><font color="#ff3333">Err</font></td>';
                } else {
                    addTable += '<td id="s_table' + j + '_' + (i + 2) + '" align="right">' + value + '&#08451;</td>';
                }
                */
        var uri = val2Image(value);
        addTable += '<td id="s_table' + j + '_' + (i + 2) + '" align="right"><img src="' + uri + '"></td>';
      }
    }
    addTable += '</tr>';
  }
  if (flag == 1) {
    addTable += '<tr><td colspan="2">内機温度</td>';
    for (i = 0; i < suion_list.length; i++) {
      if (rest.indexOf(suion_list[i]) >= 0) continue;
      if (suion_list[i] in tuning) {
        var end_date = new Date(tuning[suion_list[i]][1] + ' 23:00:00');
        if (load_date.getTime() <= end_date.getTime()) continue;
      }
      if (suion_list[i] == '小池') {
        var update_date = new Date('2018/12/01 10:00:00');
        if (load_date.getTime() < update_date.getTime() && data[i].length <= 0) {
          continue;
        }
      }
      if (suion_list[i] == '八幡浜' || suion_list[i] == '伊方') {
        //var update_date = new Date("2018/12/01 10:00:00");
        if (data[i].length <= 0) {
          continue;
        }
      }
      if (get_now_data(i, 10) == 'NA') {
        addTable += '<td id="s_table' + i + '_11" align="right"><font color="#999999">NA</font></td>';
      } else {
        addTable +=
          '<td id="s_table' + i + '_11" align="right">' + round_data(get_now_data(i, 10), 2) + '&#08451;</td>';
      }
    }
    addTable += '</tr>';
    addTable += '<tr><td colspan="2">Solar</td>';
    for (i = 0; i < suion_list.length; i++) {
      if (rest.indexOf(suion_list[i]) >= 0) continue;
      if (suion_list[i] in tuning) {
        var end_date = new Date(tuning[suion_list[i]][1] + ' 23:00:00');
        if (load_date.getTime() <= end_date.getTime()) continue;
      }
      if (suion_list[i] == '小池') {
        var update_date = new Date('2018/12/01 10:00:00');
        if (load_date.getTime() < update_date.getTime() && data[i].length <= 0) {
          continue;
        }
      }
      if (suion_list[i] == '八幡浜' || suion_list[i] == '伊方') {
        //var update_date = new Date("2018/12/01 10:00:00");
        if (data[i].length <= 0) {
          continue;
        }
      }
      if (get_now_data(i, 11) == 'NA') {
        addTable += '<td id="s_table' + i + '_12" align="right"><font color="#999999">NA</font></td>';
      } else {
        addTable += '<td id="s_table' + i + '_12" align="right">' + round_data(get_now_data(i, 11), 2) + 'V</td>';
      }
    }
    addTable += '</tr>';
    addTable += '<tr><td colspan="2">内部電圧</td>';
    for (i = 0; i < suion_list.length; i++) {
      if (rest.indexOf(suion_list[i]) >= 0) continue;
      if (suion_list[i] in tuning) {
        var end_date = new Date(tuning[suion_list[i]][1] + ' 23:00:00');
        if (load_date.getTime() <= end_date.getTime()) continue;
      }
      if (suion_list[i] == '小池') {
        var update_date = new Date('2018/12/01 10:00:00');
        if (load_date.getTime() < update_date.getTime() && data[i].length <= 0) {
          continue;
        }
      }
      if (suion_list[i] == '八幡浜' || suion_list[i] == '伊方') {
        //var update_date = new Date("2018/12/01 10:00:00");
        if (data[i].length <= 0) {
          continue;
        }
      }
      if (get_now_data(i, 12) == 'NA') {
        addTable += '<td id="s_table' + i + '_13" align="right"><font color="#999999">NA</font></td>';
      } else {
        addTable += '<td id="s_table' + i + '_13" align="right">' + round_data(get_now_data(i, 12), 2) + 'V</td>';
      }
    }
    addTable += '</tr>';
  }
  addTable += '<tr><td class="remarks" colspan="2"></td>';
  for (i = 0; i < suion_list.length; i++) {
    addTable += '<td class="remarks">';
    switch (suion_list[i]) {
      case '三浦':
        addTable += '<font size="-1">*3mの水温</font>';
        break;
      case '三崎':
        addTable += '<font size="-1">*4mの水温</font>';
        break;
    }
    addTable += '</td>';
  }
  addTable += '</tr>';
  addTable += '</table>';

  /*
    var value_15;
    if(flag == 1) {
        value_15 = round_data(get_now_data(suion_list.indexOf('中浦尻貝'), -1), 2);
    } else {
        value_15 = round_data(get_now_data(suion_list.indexOf('中浦尻貝'), -1), 1);
    }
    var miura_value_3;
    if(flag == 1) {
        miura_value_3 = round_data(get_now_data(suion_list.indexOf('三浦'), -1), 2);
    } else {
        miura_value_3 = round_data(get_now_data(suion_list.indexOf('三浦'), -1), 1);
    }
    */

  /*
    addTable += '<font size="-1">中浦尻貝の水深15mの海水温は' 
             + '<img src="' + val2Image(value_15) + '">';
             + 'です</font><br>';
    */
  //addTable += '*水深3mのデータです。<br>';
  addTable += '2020年7月22日14時から、明浜の海水温観測地点が、東方向に4km移動しました。<br>';
  addTable +=
    '&#8251;&nbsp;欠測等の理由から、現在時刻が最新測定日時から2時間以上経過している場合、《最新測定日時》欄の背景色が<font color="#ff3333">赤色</font>となります</font>';

  document.getElementById('p_table').innerHTML = addTable;
}

/**
 * 設定画面を開く(最新データ)
 */
function open_setting_now() {
  load_cookie_now();
  for (var i = 0; i < SETTING; i++) {
    update_setting_now(i);
  }
  jQuery('#modal-content').fadeIn('fast');
  centeringModalSyncer();
}

/**
 * 設定画面を開く(過去のデータ)
 */
function open_setting_past() {
  load_cookie_past();
  for (var i = 0; i < SETTING; i++) {
    update_setting_past(i);
  }
  jQuery('#modal-content').fadeIn('fast');
  centeringModalSyncer();
}

/**
 * 設定画面のセンタリング
 */
function centeringModalSyncer() {
  var w = window.innerWidth;
  var h = window.innerHeight;
  var cw = jQuery('#modal-content').outerWidth();
  var ch = jQuery('#modal-content').outerHeight();
  jQuery('#modal-content').css({ left: (w - cw) / 2 + 'px', top: (h - ch) / 2 + 'px' });
}

/**
 * 指定した番号の設定を反映(最新のデータ)
 * @param {number} num 設定ID
 */
function set_setting_value_now(num) {
  now_minTemp = now_minTemp_setting[num];
  now_maxTemp = now_maxTemp_setting[num];
  for (var i = 0; i < checkList2.length; i++) {
    checkList2[i] = now_check_list[num][i];
  }
  for (var i = 0; i < checkList2.length; i++) {
    id = 'now_depth' + i;
    document.getElementById(id).checked = checkList2[i];
    set_cookie('now_check' + i, checkList2[i], 365);
  }
  jQuery('#now_temp_range').slider('values', [now_minTemp, now_maxTemp]);
}

/**
 * 指定した番号の設定を反映(過去のデータ)
 * @param {number} num 設定ID
 */
function set_setting_value_past(num) {
  // 指定した設定を現在の表示設定にする(過去のデータ)
  for (var i = 0; i < minTemp.length; i++) {
    minTemp[i] = past_minTemp_setting[num];
    maxTemp[i] = past_maxTemp_setting[num];
  }
  kion_minTemp = kion_minTemp_setting[num];
  kion_maxTemp = kion_maxTemp_setting[num];
  for (var i = 0; i < checkList.length; i++) {
    checkList[i] = past_check_list[num][i];
  }
  for (var i = 0; i < checkList3.length; i++) {
    checkList3[i] = kion_check_list[num][i];
  }
  for (var j = 0; j < suion_list.length; j++) {
    for (var i = 0; i < checkList.length; i++) {
      if (deep_list[suion_list[j]][i] == '') {
        continue;
      }
      var id = 'depth' + j + i;
      document.getElementById(id).checked = checkList[i];
      if (j == 0) {
        set_cookie('past_check' + i, checkList[i], 365);
      }
    }
  }
  for (var i = 0; i < checkList3.length; i++) {
    id = 'temp_pt' + i;
    document.getElementById(id).checked = checkList3[i];
    set_cookie('temp_check' + i, checkList3[i], 365);
  }
  for (var i = 0; i < suion_list.length; i++) {
    var temp_id = '#past_temp_range' + i;
    jQuery(temp_id).slider('values', [minTemp[0], maxTemp[0]]);
  }
  change_graph();
  jQuery('#temp_range2').slider('values', [kion_minTemp, kion_maxTemp]);
}

/**
 * 設定画面の生成(最新のデータ)
 * @param {number} num 設定ID
 */
function display_setting_now(num) {
  var name_id = 'n_name_' + num;
  var n_check_id = 'now_check_' + num;
  var n_temp_id = 'now_temp_' + num;
  var n_temp_range_id = 'now_temp_range_' + num;
  var btn_id = 'setting' + num;
  set_setting_name(name_id, num);
  set_check_button(n_check_id, num);
  set_check_list(n_check_id, num);
  set_temp_range(n_temp_range_id, n_temp_id, num);
  //    draw_preview_now_graph_mod(num);

  switch (num) {
    case 0:
      document.getElementById(btn_id).value = 'A：' + setting_name[mode][num];
      break;
    case 1:
      document.getElementById(btn_id).value = 'B：' + setting_name[mode][num];
      break;
    case 2:
      document.getElementById(btn_id).value = 'C：' + setting_name[mode][num];
      break;
  }
}

/**
 * 設定画面の更新(最新のデータ)
 * @param {number} num 設定ID
 */
function update_setting_now(num) {
  var name_id = 'n_name_' + num;
  var n_check_id = 'now_check_' + num;
  var n_temp_id = 'now_temp_' + num;
  var n_temp_range_id = '#now_temp_range_' + num;

  set_setting_name(name_id, num);
  for (var i = 0; i < checkList2.length; i++) {
    var n_depth_id = n_check_id + i;
    document.getElementById(n_depth_id).checked = now_check_list[num][i];
  }
  jQuery(n_temp_range_id).slider('values', [now_minTemp_setting[num], now_maxTemp_setting[num]]);
  draw_preview_now_graph_mod(num);
}

/**
 * 設定画面の生成(過去のデータ)
 * @param {number} num 設定ID
 */
function display_setting_past(num) {
  var name_id = 'p_name_' + num;
  var p_check_id = 'past_check_' + num;
  var p_temp_id = 'past_temp_' + num;
  var p_temp_range_id = 'past_temp_range_' + num;
  var k_check_id = 'kion_check_' + num;
  var k_temp_id = 'kion_temp_' + num;
  var k_temp_range_id = 'kion_temp_range_' + num;
  var btn_id = 'setting' + num;

  set_setting_name(name_id, num);
  set_check_button(p_check_id, num);
  set_check_list(p_check_id, num);
  set_temp_range(p_temp_range_id, p_temp_id, num);
  set_check_button(k_check_id, num);
  set_check_list(k_check_id, num);
  set_temp_range(k_temp_range_id, k_temp_id, num);
  //    draw_past_graph_preview(num);
  //    draw_temp_graph_preview(num);

  switch (num) {
    case 0:
      document.getElementById(btn_id).value = 'A：' + setting_name[mode][num];
      break;
    case 1:
      document.getElementById(btn_id).value = 'B：' + setting_name[mode][num];
      break;
    case 2:
      document.getElementById(btn_id).value = 'C：' + setting_name[mode][num];
      break;
  }
}

/**
 * 設定画面の更新(過去のデータ)
 * @param {number} num 設定ID
 */
function update_setting_past(num) {
  // 設定画面の更新(過去のデータ)
  var name_id = 'p_name_' + num;
  var p_check_id = 'past_check_' + num;
  var p_temp_id = 'past_temp_' + num;
  var p_temp_range_id = 'past_temp_range_' + num;
  var k_check_id = 'kion_check_' + num;
  var k_temp_id = 'kion_temp_' + num;
  var k_temp_range_id = 'kion_temp_range_' + num;

  set_setting_name(name_id, num);
  for (var i = 0; i < checkList.length; i++) {
    var p_depth_id = p_check_id + i;
    var k_pt_id = k_check_id + i;
    document.getElementById(p_depth_id).checked = past_check_list[num][i];
    if (i < checkList3.length) {
      document.getElementById(k_pt_id).checked = kion_check_list[num][i];
    }
  }
  jQuery(p_temp_range_id).slider('values', [past_minTemp_setting[num], past_maxTemp_setting[num]]);
  jQuery(k_temp_range_id).slider('values', [kion_minTemp_setting[num], kion_maxTemp_setting[num]]);
  draw_past_graph_preview(num);
  draw_temp_graph_preview(num);
}

/**
 * 設定名の反映
 * @param id DOM要素のid名
 * @param num 設定ID
 */
function set_setting_name(id, num) {
  document.getElementById(id).value = setting_name[mode][num];
}

/**
 * 温度範囲を設定画面上のスライダーに反映
 * @param {string} range_id スライダーのid名
 * @param {string} temp_id 温度表示部分のid名
 * @param {number} num 設定ID
 */
function set_temp_range(range_id, temp_id, num) {
  var minTemp = 10;
  var maxTemp = 30;
  if (range_id.indexOf('now') != -1) {
    minTemp = now_minTemp_setting[num];
    maxTemp = now_maxTemp_setting[num];
    var id = '#' + range_id;
    $(function () {
      $(id).slider({
        orientation: 'vertical',
        min: -10,
        max: 40,
        step: 5,
        range: true,
        values: [minTemp, maxTemp],
        slide: function (e, ui) {
          if (ui.values[0] == ui.values[1]) {
            return false;
          }
          //display_temp(temp_id, ui.values[0], ui.values[1]);
        },
        change: function (e, ui) {
          //display_temp(temp_id, ui.values[0], ui.values[1]);
          set_limit_temp_setting(range_id, num, ui.values[0], ui.values[1]);
        },
        create: function (e, ui) {
          var values = $(this).slider('option', 'values');
          //display_temp(temp_id, values[0], values[1]);
        },
      });
    });
    return;
  } else if (range_id.indexOf('past') != -1) {
    minTemp = past_minTemp_setting[num];
    maxTemp = past_maxTemp_setting[num];
  } else if (range_id.indexOf('kion') != -1) {
    minTemp = kion_minTemp_setting[num];
    maxTemp = kion_maxTemp_setting[num];
  }
  var id = '#' + range_id;
  $(function () {
    $(id).slider({
      min: -10,
      max: 40,
      step: 5,
      range: true,
      values: [minTemp, maxTemp],
      slide: function (e, ui) {
        if (ui.values[0] == ui.values[1]) {
          return false;
        }
        //display_temp(temp_id, ui.values[0], ui.values[1]);
      },
      change: function (e, ui) {
        // display_temp(temp_id, ui.values[0], ui.values[1]);
        set_limit_temp_setting(range_id, num, ui.values[0], ui.values[1]);
      },
      create: function (e, ui) {
        var values = $(this).slider('option', 'values');
        // display_temp(temp_id, values[0], values[1]);
      },
    });
  });
}

/**
 * 温度範囲をグラフに反映
 * @param {string} range_id スライダーのid名
 * @param {number} num 設定ID
 * @param {number} min y軸下限
 * @param {number} max y軸上限
 */
function set_limit_temp_setting(range_id, num, min, max) {
  if (range_id.indexOf('now') != -1) {
    now_minTemp_setting[num] = min;
    now_maxTemp_setting[num] = max;
    draw_preview_now_graph_mod(num);
  } else if (range_id.indexOf('past') != -1) {
    past_minTemp_setting[num] = min;
    past_maxTemp_setting[num] = max;
    draw_past_graph_preview(num);
  } else if (range_id.indexOf('kion') != -1) {
    kion_minTemp_setting[num] = min;
    kion_maxTemp_setting[num] = max;
    draw_temp_graph_preview(num);
  }
}

/**
 * 設定画面上に全項目・全解除ボタンの作成
 * @param {string} id 設定画面のdiv要素id名
 * @param {number} num 設定ID
 */
function set_check_button(id, num) {
  var button_id = id + '_btn';
  var el = document.createElement('div');
  if (button_id.indexOf('now') != -1) {
    el.innerHTML +=
      '<input type="button" class="button2" value="全項目" onclick="all_check_change(' +
      "'" +
      id +
      "'" +
      ',' +
      num +
      ',' +
      'true)"><br>';
    el.innerHTML +=
      '<input type="button" class="button2" value="全解除" onclick="all_check_change(' +
      "'" +
      id +
      "'" +
      ',' +
      num +
      ',' +
      'false)">';
  } else {
    el.innerHTML +=
      '<input type="button" class="button2" value="全項目" onclick="all_check_change(' +
      "'" +
      id +
      "'" +
      ',' +
      num +
      ',' +
      'true)">';
    el.innerHTML +=
      '<input type="button" class="button2" value="全解除" onclick="all_check_change(' +
      "'" +
      id +
      "'" +
      ',' +
      num +
      ',' +
      'false)"><br>';
  }
  document.getElementById(button_id).appendChild(el);
}

/**
 * 設定画面上のチェックボックスの一斉切り替え
 * @param {string} id 設定画面のdiv要素id名
 * @param {number} num 設定ID
 * @param {boolean} value 変更する値(TrueかFalse)
 */
function all_check_change(id, num, value) {
  if (id.indexOf('now') != -1) {
    for (var i = 0; i < checkList2.length; i++) {
      document.getElementById(id + i).checked = value;
      now_check_list[num][i] = value;
    }
    draw_preview_now_graph_mod(num);
  } else if (id.indexOf('past') != -1) {
    for (var i = 0; i < checkList.length; i++) {
      document.getElementById(id + i).checked = value;
      past_check_list[num][i] = value;
    }
    draw_past_graph_preview(num);
  } else if (id.indexOf('kion') != -1) {
    for (var i = 0; i < checkList3.length; i++) {
      document.getElementById(id + i).checked = value;
      kion_check_list[num][i] = value;
    }
    draw_temp_graph_preview(num);
  }
}

/**
 * 設定画面上にチェックボックスを作成
 * @param {string} id 設定画面のdiv要素idm名
 * @param {number} num 設定ID
 */
function set_check_list(id, num) {
  // チェックリストの作成
  if (id.indexOf('past') != -1) {
    el = document.createElement('div');
    for (i = 0; i < checkList.length; i++) {
      el.innerHTML +=
        '<input type="checkbox" value="' +
        i +
        '" id="' +
        id +
        i +
        '"name="' +
        id +
        i +
        '" onclick="clear_depth(' +
        "'" +
        id +
        "'" +
        ',' +
        num +
        ',' +
        i +
        ')" style="background-color:' +
        color_table[i] +
        ';" checked>' +
        deep_list['全体'][i];
    }
    document.getElementById(id).appendChild(el);
  } else if (id.indexOf('now') != -1) {
    el = document.createElement('div');
    for (i = 0; i < checkList2.length; i++) {
      el.innerHTML +=
        '<font color="' +
        color_table[i] +
        '">■</font>' +
        deep_list['全体'][i] +
        '<input type="checkbox" value="' +
        i +
        '" id="' +
        id +
        i +
        '"name="' +
        id +
        i +
        '" onclick="clear_depth(' +
        "'" +
        id +
        "'" +
        ',' +
        num +
        ',' +
        i +
        ')" style="background-color:' +
        color_table[i] +
        ';" checked><br>';
    }
    document.getElementById(id).appendChild(el);
  } else if (id.indexOf('kion') != -1) {
    el = document.createElement('div');
    for (i = 0; i < checkList3.length; i++) {
      el.innerHTML +=
        '<input type="checkbox" value="' +
        i +
        '" id="' +
        id +
        i +
        '"name="' +
        id +
        i +
        '" onclick="clear_depth(' +
        "'" +
        id +
        "'" +
        ',' +
        num +
        ',' +
        i +
        ')" style="background-color:' +
        color_table2[i] +
        ';" checked>' +
        temp_list[i];
    }
    document.getElementById(id).appendChild(el);
  }
}

/**
 * グラフプレビューにおける表示項目の切り替え
 * 関数名と実際の処理が合っていないので関数名を変更する必要あり
 * @param {string} id 設定画面のdiv要素id名
 * @param {number} num1 設定ID
 * @param {number} num2 チェックボックスのカラムID
 */
function clear_depth(id, num1, num2) {
  var depth_id = id + num2;
  if (document.getElementById(depth_id).checked) {
    if (id.indexOf('now') != -1) {
      now_check_list[num1][num2] = true;
      draw_preview_now_graph_mod(num1);
    } else if (id.indexOf('past') != -1) {
      past_check_list[num1][num2] = true;
      draw_past_graph_preview(num1);
    } else if (id.indexOf('kion') != -1) {
      kion_check_list[num1][num2] = true;
      draw_temp_graph_preview(num1);
    }
  } else {
    if (id.indexOf('now') != -1) {
      now_check_list[num1][num2] = false;
      draw_preview_now_graph_mod(num1);
    } else if (id.indexOf('past') != -1) {
      past_check_list[num1][num2] = false;
      draw_past_graph_preview(num1);
    } else if (id.indexOf('kion') != -1) {
      kion_check_list[num1][num2] = false;
      draw_temp_graph_preview(num1);
    }
  }
}

/**
 * 設定画面上にボタンを設置
 */
function set_setting_button() {
  for (var i = 0; i < setting_name[mode].length; i++) {
    var btn_id = 'setting_btn' + i;
    var el = document.createElement('div');
    el.innerHTML += '<input type="button" class="btn2" value="デフォルトに戻す" onclick="default_set(' + i + ')"><br>';
    el.innerHTML += '<input type="button" class="btn" value="閉じる" onclick="save_setting(0,' + mode + ')">&nbsp';
    el.innerHTML += '<input type="button" class="btn" value="設定を保存" onclick="save_setting(1,' + mode + ')">&nbsp';
    //        el.innerHTML += '<input type="button" class="btn" value="保存して閉じる" onclick="save_setting(2)">';
    document.getElementById(btn_id).appendChild(el);
  }
}

/**
 * 『デフォルトに戻す』押下時の処理
 * @param {number} num 設定ID
 */
function default_set(num) {
  // デフォルトに戻す
  setting_name[mode][num] = '設定';
  switch (num) {
    case 0:
      setting_name[mode][0] += 'A';
      break;
    case 1:
      setting_name[mode][1] += 'B';
      break;
    case 2:
      setting_name[mode][2] += 'C';
      break;
  }

  switch (mode) {
    case 0:
      now_check_list[num] = [true, true, true, true, true, true, true, true, true];
      now_minTemp_setting[num] = 10;
      now_maxTemp_setting[num] = 30;
      update_setting_now(num);
      break;
    case 1:
      past_check_list[num] = [true, true, true, true, true, true, true, true, true];
      kion_check_list[num] = [true, true, true, true, true];
      past_minTemp_setting[num] = 10;
      past_maxTemp_setting[num] = 30;
      kion_minTemp_setting[num] = -5;
      kion_maxTemp_setting[num] = 35;
      update_setting_past(num);
      break;
  }
}

/**
 * 設定の保存
 * @param {number} flag 0: 保存しないで閉じる 1: 保存するだけ 2: 保存して閉じる(未使用)
 * @param {number} d_mode 設定ID
 */
function save_setting(flag, d_mode) {
  if (flag == 0) {
    jQuery('#modal-content').fadeOut('fast');
    return;
  }
  for (var i = 0; i < SETTING; i++) {
    switch (mode) {
      case 0:
        var name_id = 'n_name_' + i;
        break;
      case 1:
        var name_id = 'p_name_' + i;
        break;
    }
    var btn_id = 'setting' + i;
    setting_name[mode][i] = document.getElementById(name_id).value;
    switch (i) {
      case 0:
        document.getElementById(btn_id).value = 'A：' + setting_name[mode][i];
        break;
      case 1:
        document.getElementById(btn_id).value = 'B：' + setting_name[mode][i];
        break;
      case 2:
        document.getElementById(btn_id).value = 'C：' + setting_name[mode][i];
        break;
    }
  }
  var name = '';
  for (var i = 0; i < setting_name.length; i++) {
    if (i == setting_name.length - 1) {
      name += setting_name[i][0] + ',' + setting_name[i][1] + ',' + setting_name[i][2];
    } else {
      name += setting_name[i][0] + ',' + setting_name[i][1] + ',' + setting_name[i][2] + ',';
    }
  }
  set_cookie('setting_name2', name, 365);
  if (d_mode == 0) {
    var n_min = now_minTemp_setting[0] + ',' + now_minTemp_setting[1] + ',' + now_minTemp_setting[2];
    var n_max = now_maxTemp_setting[0] + ',' + now_maxTemp_setting[1] + ',' + now_maxTemp_setting[2];
    set_cookie('now_minTemp_setting', n_min, 365);
    set_cookie('now_maxTemp_setting', n_max, 365);
    var now_check = '';
    for (var i = 0; i < setting_name[d_mode].length; i++) {
      for (var j = 0; j < checkList2.length; j++) {
        now_check += now_check_list[i][j] + ',';
      }
    }
    set_cookie('now_check_list', now_check, 365);
  } else if (d_mode == 1) {
    var p_min = past_minTemp_setting[0] + ',' + past_minTemp_setting[1] + ',' + past_minTemp_setting[2];
    var p_max = past_maxTemp_setting[0] + ',' + past_maxTemp_setting[1] + ',' + past_maxTemp_setting[2];
    var k_min = kion_minTemp_setting[0] + ',' + kion_minTemp_setting[1] + ',' + kion_minTemp_setting[2];
    var k_max = kion_maxTemp_setting[0] + ',' + kion_maxTemp_setting[1] + ',' + kion_maxTemp_setting[2];
    set_cookie('past_minTemp_setting', p_min, 365);
    set_cookie('past_maxTemp_setting', p_max, 365);
    set_cookie('kion_minTemp_setting', k_min, 365);
    set_cookie('kion_maxTemp_setting', k_max, 365);
    var past_check = '';
    var kion_check = '';
    for (var i = 0; i < setting_name[d_mode].length; i++) {
      for (var j = 0; j < checkList.length; j++) {
        if (j < checkList3.length) {
          kion_check += kion_check_list[i][j] + ',';
        }
        past_check += past_check_list[i][j] + ',';
      }
    }
    set_cookie('past_check_list', past_check, 365);
    set_cookie('kion_check_list', kion_check, 365);
  }
  if (flag == 2) {
    jQuery('#modal-content').fadeOut('fast');
  }
}

/**
 * 表示水深選択表作成(過去のデータ)
 */
function setselTable() {
  //    var el = document.createElement("div");
  //    el.innerHTML += '<input type="button" class="button" value="全項目" onclick="depthChange(true)"><br>';
  //    el.innerHTML += '<input type="button" class="button" value="全解除" onclick="depthChange(false)">';
  for (var i = 0; i < suion_list.length; i++) {
    var el = document.createElement('div');
    el.innerHTML += '<input type="button" class="button" value="全項目" onclick="depthChange(true)"><br>';
    el.innerHTML += '<input type="button" class="button" value="全解除" onclick="depthChange(false)">';
    var btn_id = 'past_check_btn' + i;
    document.getElementById(btn_id).appendChild(el);
  }
  //    el = document.createElement("div");
  //    for(i = 0; i < checkList.length; i++) {
  //        el.innerHTML += '<font color="' + color_table[i + 1] + '">■</font>' + depthList[i + 1] + '<input type="checkbox" value="' + i + '" id="depth' + i + '"name="depth' + i + '" onclick="clearDepth(' + i + ')" style="background-color:' + color_table[i] + ';" checked><br>';
  //    }
  for (var i = 0; i < suion_list.length; i++) {
    el = document.createElement('div');
    for (var j = 0; j < checkList.length; j++) {
      if (deep_list[suion_list[i]][j] != '') {
        if (suion_list[i] == '三浦' && deep_list['三浦'][j] == '5m') {
          el.innerHTML += '<font color="' + color_table[j] + '">■</font>3m';
          el.innerHTML +=
            '<input type="checkbox" value="' +
            j +
            '" id="depth' +
            i +
            j +
            '"name="depth' +
            i +
            j +
            '" onclick="clearDepth(' +
            i +
            ',' +
            j +
            ')" style="background-color:' +
            color_table[j] +
            ';" checked>';
        } else {
          el.innerHTML += '<font color="' + color_table[j] + '">■</font>' + deep_list[suion_list[i]][j];
          el.innerHTML +=
            '<input type="checkbox" value="' +
            j +
            '" id="depth' +
            i +
            j +
            '"name="depth' +
            i +
            j +
            '" onclick="clearDepth(' +
            i +
            ',' +
            j +
            ')" style="background-color:' +
            color_table[j] +
            ';" checked>';
        }
      } else {
        el.innerHTML += '<font color="#afafaf">' + deep_list['全体'][j] + ', NA</font>';
      }
      el.innerHTML += '<br>';
    }
    var id = 'pastcheck' + i;
    document.getElementById(id).appendChild(el);
  }
}

/**
 * 表示水深選択表作成(最新データ)
 */
function setselTable_now() {
  var el = document.createElement('div');
  el.innerHTML += '<input type="button" class="button" value="全項目" onclick="now_depthChange(true)"><br>';
  el.innerHTML += '<input type="button" class="button" value="全解除" onclick="now_depthChange(false)">';
  document.getElementById('btn2').appendChild(el);
  el = document.createElement('div');
  for (i = 0; i < checkList2.length; i++) {
    el.innerHTML +=
      '<font color="' +
      color_table[i] +
      '">■</font>' +
      deep_list['全体'][i] +
      '<input type="checkbox" value="' +
      i +
      '" id="now_depth' +
      i +
      '"name="now_depth' +
      i +
      '" onclick="now_clearDepth(' +
      i +
      ')" style="background-color:' +
      color_table[i] +
      ';" checked><br>';
  }
  document.getElementById('check2').appendChild(el);
}

/**
 * 表示場所選択表作成
 */
function setselTable_temp() {
  var el = document.createElement('div');
  el.innerHTML += '<input type="button" class="button" value="全項目" onclick="temp_checkChange(true)"><br>';
  el.innerHTML += '<input type="button" class="button" value="全解除" onclick="temp_checkChange(false)">';
  document.getElementById('btn4').appendChild(el);
  el = document.createElement('div');
  for (i = 0; i < checkList3.length; i++) {
    el.innerHTML +=
      '<font color="' +
      color_table2[i] +
      '">■</font>' +
      temp_list[i] +
      '<input type="checkbox" value="' +
      i +
      '" id="temp_pt' +
      i +
      '"name="temp_pt' +
      i +
      '" onclick="temp_clearCheck(' +
      i +
      ')" style="background-color:' +
      color_table[i] +
      ';" checked><br>';
  }
  document.getElementById('check4').appendChild(el);
}

/**
 * チェックボックス一斉切り替え(過去のデータ)
 * @param {boolean} value 変更する値(TrueかFalse)
 */
function depthChange(value) {
  for (var j = 0; j < suion_list.length; j++) {
    for (var i = 0; i < checkList.length; i++) {
      if (deep_list[suion_list[j]][i] != '') {
        document.getElementById('depth' + j + i).checked = value;
      }
    }
  }
  for (var i = 0; i < checkList.length; i++) {
    checkList[i] = value;
    set_cookie('past_check' + i, value, 365);
  }
  change_graph();
}

/**
 * チェックボックス一斉切り替え(最新のデータ)
 * @param {boolean} value 変更する値(TrueかFalse)
 */
function now_depthChange(value) {
  for (i = 0; i < checkList2.length; i++) {
    document.getElementById('now_depth' + i).checked = value;
    checkList2[i] = value;
    set_cookie('now_check' + i, value, 365);
  }
  draw_now_graph();
}

/**
 * チェックボックス一斉切り替え(気温)
 * @param {boolean} value 変更する値(TrueかFalse)
 */
function temp_checkChange(value) {
  for (i = 0; i < checkList3.length; i++) {
    document.getElementById('temp_pt' + i).checked = value;
    checkList3[i] = value;
    set_cookie('temp_check' + i, value, 365);
  }
  draw_temp_graph(graph_hour[suion_list.length][hh[suion_list.length]]);
}

/**
 * 過去の水温変化グラフにおける表示項目の切り替え
 * 関数名と実際の処理が合っていないので関数名を変更する必要あり
 * さらにいうとプレビューにおけるチェックボックス切り替えと混同しやすい
 * @param {number} num1 測点ID
 * @param {number} num2 チェックボックスのカラムID
 */
function clearDepth(num1, num2) {
  // チェックボックス切り替え(過去のデータ)
  var check_id1 = 'depth' + num1 + num2;
  var check_bool = document.getElementById(check_id1).checked;
  for (var i = 0; i < suion_list.length; i++) {
    if (i == num1) continue;
    if (deep_list[suion_list[i]][num2] != '') {
      var check_id2 = 'depth' + i + num2;
      document.getElementById(check_id2).checked = check_bool;
    }
  }
  if (check_bool) {
    checkList[num2] = true;
    set_cookie('past_check' + num2, true, 365);
  } else {
    checkList[num2] = false;
    set_cookie('past_check' + num2, false, 365);
  }
  change_graph();
}

/**
 * 最新グラフにおける表示項目の切り替え
 * 関数名と実際の処理が合っていないので関数名を変更する必要あり
 * @param {number} num チェックボックスのカラムID
 */
function now_clearDepth(num) {
  if (document.getElementById('now_depth' + num).checked) {
    checkList2[num] = true;
    set_cookie('now_check' + num, true, 365);
  } else {
    checkList2[num] = false;
    set_cookie('now_check' + num, false, 365);
  }
  draw_now_graph();
}

/**
 * 気温グラフにおける表示項目の切り替え
 * 関数名と実際の処理が合っていないので関数名を変更する必要あり
 * @param {number} num チェックボックスのカラムID
 */
function temp_clearCheck(num) {
  // チェックボックス切り替え(気温)
  if (document.getElementById('temp_pt' + num).checked) {
    checkList3[num] = true;
    set_cookie('temp_check' + num, true, 365);
  } else {
    checkList3[num] = false;
    set_cookie('temp_check' + num, false, 365);
  }
  draw_temp_graph(graph_hour[suion_list.length][hh[suion_list.length]]);
}