/* <script src="../../definitions.js"      type="text/javascript"></script> */
/* <script src="../../common/common.js"    type="text/javascript"></script> */
/* <script src="../../common/dataIo.js"    type="text/javascript"></script> */

<!-- ◆━━━━━━━━━━━━━━━━━━━━━━━━━━━━◆ -->
<!-- 
    ヘルプボタン
    {boolean}  isEnable ボタンの有効状態（初期値はtrue）
    {function} onbuttonpress ボタン押下コールバック
-->
<my-helpbutton>
    <div class="bg-help"  ref="main" onmousedown={mdown} onmouseup={mup} onmouseout={mleave}
                                     onkeydown={keydown} onkeyup={keyup} onblur={mleave} tabindex={opts.tindex}>
        <div class="bg-markQ ">
        </div>
    </div>
    <style>
        :scope {
            cursor: pointer;
        }

        .bg-help {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 32px;
            height: 32px;
            background: url("img/btn_help_normal.png");
            cursor: pointer;
        }

        .press {
            background: url("img/btn_help_press.png");
        }

        .bg-markQ {
            width: 16px;
            height: 16px;
            background: url("img/icon_help.png");
            pointer-events: none;
        }
    </style>

    <script>
        var me = this;
        this.isEnable = true;
        this.isLeave = true;

        var pushCodes = [13,32];      //スペースキー、enterキーを押下判定
        this.mdown = function(event) {
            pressStart();
        }
        this.mup = function(event) {
            pressEnd();
        }
        this.mleave = function(event) {
            me.refs.main.classList.remove("press");
            me.isLeave = true;
        }
        this.keydown = function(event) {
            if(pushCodes.indexOf(event.keyCode) >= 0) {
                pressStart();
            }
        }
        this.keyup = function(event) {
            if(pushCodes.indexOf(event.keyCode) >= 0) {
                pressEnd();                
            }
        }
        function pressStart() {
            me.refs.main.classList.add("press");    
            me.isLeave = false;
        }
        function pressEnd() {
            me.refs.main.classList.remove("press");
            if(me.isEnable && !me.isLeave) {
                me.onButtonPress(me);
            }
        }
        //----------------------------------------
        //公開メソッド

        /**
         * 有効状態設定
         * @param {boolean} value 設定値
         * @param {boolean} noUpdate 設定後updateを呼ばない
         */
        this.setEnable = function (value) {
            me.enable = value;
        }
        /**
         * 有効状態取得
         * @return {boolean} value 取得値
         */
        this.getEnable = function () {
            return me.enable;
        }
        /**
         * ボタン有効の場合クリック時に呼ばれます。
         * @param sender このインスタンス
         */
        this.onButtonPress = this.opts.onbuttonpress ? this.opts.onbuttonpress : function (sender) {};
    </script>
</my-helpbutton>

<!-- 
    更新ボタン
    {boolean}  isEnable ボタンの有効状態（初期値はtrue）
    {function} onbuttonpress ボタン押下コールバック
-->
<my-refreshbutton>
    <div class="bg-refresh" ref="main" onmousedown={mdown} onmouseup={mup} onmouseout={mleave} 
                                       onkeydown={keydown} onkeyup={keyup} onblur={mleave} tabindex={opts.tindex}>
        <div class="bg-markRefresh"></div>
        <div class="textRefresh">更新</div>
    </div>
    <style>
        :scope {
            cursor: pointer;
        }
        .bg-refresh {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            width: 72px;
            height: 32px;
            background: url("img/btn_reflesh_normal.png");
        }
        .press {
            background: url("img/btn_reflesh_press.png");
        }
        .bg-markRefresh {
            width: 16px;
            height: 16px;
            background: url("img/icon_reflesh.png");
            margin: 0 6px 0 9px;
            pointer-events: none;
        }
        .textRefresh {
            pointer-events: none;
            margin:0;
        }
    </style>

    <script>
        var me = this;
        this.isEnable = true;
        this.isLeave = true;
        
        var pushCodes = [13,32];      //スペースキー、enterキーを押下判定
        this.mdown = function(event) {
            pressStart();
        }
        this.mup = function(event) {
            pressEnd();
        }
        this.mleave = function(event) {
            me.refs.main.classList.remove("press");
            me.isLeave = true;
        }
        this.keydown = function(event) {
            if(pushCodes.indexOf(event.keyCode) >= 0) {
                pressStart();
            }
        }
        this.keyup = function(event) {
            if(pushCodes.indexOf(event.keyCode) >= 0) {
                pressEnd();                
            }
        }
        function pressStart() {
            me.refs.main.classList.add("press");    
            me.isLeave = false;
        }
        function pressEnd() {
            me.refs.main.classList.remove("press");
            if(me.isEnable && !me.isLeave) {
                me.onButtonPress(me);
            }
        }
        //----------------------------------------
        //公開メソッド

        /**
         * 有効状態設定
         * @param {boolean} value 設定値
         * @param {boolean} noUpdate 設定後updateを呼ばない
         */
        this.setEnable = function (value) {
            me.enable = value;
        }
        /**
         * 有効状態取得
         * @return {boolean} value 取得値
         */
        this.getEnable = function () {
            return me.enable;
        }
        /**
         * ボタン有効の場合クリック時に呼ばれます。
         * @param sender このインスタンス
         */
        this.onButtonPress = this.opts.onbuttonpress ? this.opts.onbuttonpress : function (sender) {}; 
    </script>
</my-refreshbutton>

<!-- 
    役割ボタン
    {boolean}  isEnable ボタンの有効状態（初期値はtrue）
    {function} onbuttonpress ボタン押下コールバック
-->
<my-rolebutton>
    <div class="bg-role" ref="main" onmousedown={mdown} onmouseup={mup} onmouseout={mleave}
                                    onkeydown={keydown} onkeyup={keyup} onblur={mleave} tabindex={opts.tindex}>
        <div class="text">防潮水門の<br />役割</div>
    </div>
    <style>
        :scope {
            cursor: pointer;
        }
        .bg-role {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 214px;
            height:174px;
            background: url("img/btn_gate_normal.png");
            
        }
        .press {
            background: url("img/btn_gate_press.png");
        }
        .text {
            text-align:center;
            margin-top:27%;
            color:#FFFFFF;
            font-size:21px;
            font-weight:bold;
            pointer-events: none;
        }
    </style>

    <script>
        var me = this;
        this.isEnable = true;
        this.isLeave = true;

        var pushCodes = [13,32];      //スペースキー、enterキーを押下判定
        this.mdown = function(event) {
            pressStart();
        }
        this.mup = function(event) {
            pressEnd();
        }
        this.mleave = function(event) {
            me.refs.main.classList.remove("press");
            me.isLeave = true;
        }
        this.keydown = function(event) {
            if(pushCodes.indexOf(event.keyCode) >= 0) {
                pressStart();
            }
        }
        this.keyup = function(event) {
            if(pushCodes.indexOf(event.keyCode) >= 0) {
                pressEnd();                
            }
        }
        function pressStart() {
            me.refs.main.classList.add("press");    
            me.isLeave = false;
        }
        function pressEnd() {
            me.refs.main.classList.remove("press");
            if(me.isEnable && !me.isLeave) {
                me.onButtonPress(me);
            }
        }
        //----------------------------------------
        //公開メソッド

        /**
         * 有効状態設定
         * @param {boolean} value 設定値
         * @param {boolean} noUpdate 設定後updateを呼ばない
         */
        this.setEnable = function (value) {
            me.enable = value;
        }
        /**
         * 有効状態取得
         * @return {boolean} value 取得値
         */
        this.getEnable = function () {
            return me.enable;
        }
        /**
         * ボタン有効の場合クリック時に呼ばれます。
         * @param sender このインスタンス
         */
        this.onButtonPress = this.opts.onbuttonpress ? this.opts.onbuttonpress : function (sender) {}; 
    </script>
</my-rolebutton>


<!-- 
    一般公開向けヘッダー
    属性
        {boolean|string} light 点灯状態（初期値はfalse）
        {string} color 点灯色
    その他
-->
<my-publicHeader>
    <div class="background" style="display: flex;">
        <div class="content" if={isHeader}>
            <div class="systemTitle">八郎潟防潮水門施設情報</div>
            <div class="rightcontent">
                <div>
                    <div style="display:flex; justify-content:flex-end;">
                        <div class="observeTime">観測日時：</div>
                        <div ref="timeStr" class="time">0000/00/00 00:00</div>
                    </div>
                    <p>※更新ボタンを押すことで最新情報に更新できます。</p>
                </div>
                <my-refreshbutton class="refreshbtn" onbuttonpress={refreshClicked} tindex=1></my-refreshbutton>
                <div style="margin-right:8px;">ご利用にあたって</div>
                <my-helpbutton class="helpbtn" onbuttonpress={helpClicked} tindex=2></my-helpbutton>
            </div>
        </div>
        <div class="content" if={!isHeader}>
            <div class="systemTitle"></div>
            <div class="rightcontent">
                <div class="observeTime"></div>
                <div class="copyright">
                    <p>秋田県農林水産部　農地整備課　水利整備・防災班</p>
                    <p>秋田県秋田地域振興局　農林部　八郎潟基幹施設管理事務所</p>
                </div>
            </div>
        </div>
    </div>

    <style>
        :scope {
            color:#FFFFFF;
        }
        .background {
            background-image: url("img/hf_bg.png");
            background-size: 100%;
            width: 1680px;
            height: 48px;
        }

        .content {
            display: flex;
            width: 100%;
            height: 48px;
            justify-content: space-between;
            align-items: center;
        }

        .rightcontent {
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }

        .systemTitle {
            font-size: 20px;
            margin-left: 20px;
            font-weight:bold;
        }

        .observeTime {}

        .time {
            margin-right: 8px;
        }

        .refreshbtn {
            margin-right: 32px;
        }

        .helpbtn {
            margin-right: 20px;
        }
        .copyright {
            margin-right: 20px;
            text-align: right;
        }
    </style>


    <script type="text/javascript">
        var me = this;
        this.isHeader = ('isheader' in this.opts) ? this.opts.isheader == "true" : false;
        
        this.on('mount', function () {
        });

        this.refreshClicked = function (event) {
            me.reloadButtonPress();
        }
        this.helpClicked = function (event) {
            me.helpButtonPress();
        }
        //----------------------------------------
        //公開メソッド
        this.setTimeStr = function(str) {
            me.refs.timeStr.textContent = str;
        }
        //イベントコールバック
        /**
         * ボタンが押されたときに呼ばれます。
         * @param sender このインスタンス
         */
        this.reloadButtonPress = this.opts.reloadpress ? this.opts.reloadpress : function(sender){};
        this.helpButtonPress = this.opts.helppress ? this.opts.helppress : function(sender){};
    </script>
</my-publicHeader>

<!-- 
    お知らせパネル
    属性: {string} dkey データキー
    　　　　　　　　※(指定したデータkey～key+8まで使用)
    枠内におさまらない長文は三点リーダーで省略表示
-->
<my-infoPanel>
    <div class="info">
        <div ref="time1" class="time"></div>
        <div ref="content1" class="content"></div>
    </div>
    <div class="info">
        <div ref="time2" class="time"></div>
        <div ref="content2" class="content"></div>
    </div>
    <div class="info">
        <div ref="time3" class="time"></div>
        <div ref="content3" class="content"></div>
    </div>
    <div class="info">
        <div ref="time4" class="time"></div>
        <div ref="content4" class="content"></div>
    </div>

    <style>
        :scope {
            
        }
        .info {
            display:flex;
            font-size:14px;
            line-height:22px;
        }
        .time {
            width:140px;
        }
        .content {
            margin-left:10px;
            width:330px;
            overflow:hidden;
            white-space:nowrap;
            text-overflow:ellipsis;
        }
    </style>
    <script>
        var me = this;
        this.contentArray = [];
        
        this.on('mount', function() {
            me.contentArray.push(me.refs.time1);
            me.contentArray.push(me.refs.content1);
            me.contentArray.push(me.refs.time2);
            me.contentArray.push(me.refs.content2);
            me.contentArray.push(me.refs.time3);
            me.contentArray.push(me.refs.content3);
            me.contentArray.push(me.refs.time4);
            me.contentArray.push(me.refs.content4);
        });


        //----------------------------------------
        //公開メソッド
        this.setData = function(datalist){  
            clear();
            if(datalist == null || datalist.length == 0) {
                me.contentArray[0].textContent = "お知らせはありません。";
                return;
            }
            for(var i=0; i<me.contentArray.length / 2; i++) {

                if(datalist[i] == null) {
                    
                    return;
                }
                var d = common.date.fromTotalSec(datalist[i].info_time);
                me.contentArray[i*2].textContent   = common.date.format(d, "yyyy/MM/dd HH:mm");
                me.contentArray[i*2+1].textContent = datalist[i].text;
            }
        }
        /*
         * 時刻部、お知らせ文をクリアします。
         */
        function clear() {
            for(var i=0; i<me.contentArray.length; i++) {    
                me.contentArray[i].textContent = " ";
            }
        }
    </script>
</my-infoPanel>

<!-- 
    データ表示グリッド
    必須:gridSetting.js
-->
<my-HorizonGrid>
    <table ref="root">
        <tr each={ row in cellsD }>
            <td each={ cell in row } index={ cell.index } onclick={ cellClicked } style={ columnSet[cell.column].tdStyle() }>
                <span  if={ !cell.focused } index={ cell.index }  style={ cell.style } >{ cell.text }</span>

                <input if={ cell.focused } index={ cell.index } class={ "readonly":columnSet[cell.column].readOnly }
                    type="text" maxlength="20" readonly={ columnSet[cell.column].readOnly ? 'readonly' : '' }
                    onkeydown={ inputKeyDown } onblur="{inputOutFocus}" />
            </td>
        </tr>
    </table>
        
    <style scoped>
        :scope {
            display: block;
        }
        :scope > table {
            border-collapse: collapse;
            border: none 0 lightgray;
            background-color: transparent;
        }
        td {
            
            border: solid 1px transparent;
            border-left: solid 1px transparent;
            border-right: solid 1px transparent;
            margin: 0;
            padding: 1px 1px 0 1px;
            cursor: default;
        }

        td span, td input {
            width: 100%;
            margin: 0;
            padding: 0;
            display: inline-block;
            font: inherit;
            font-size: inherit;
            text-align: inherit;
            border: solid 1px transparent;
        }
        td input {
            border-color:lightgreen;
        }
        td input.readonly{
            border-color:gray;
        }
        td input.readonly::selection{
            background-color:lightgray;
        }
        input::-ms-clear {/* IEで表示される×ボタン */
            visibility:collapse;
        }
    </style>

    <script>
        //セル型
        var Cell = function(){
            this.index;           //セルのインデクス（利用者変更不可）
            this.row;             //行（利用者変更不可）
            this.column;          //列（利用者変更不可）
            this.focused = false; //選択状態（利用者変更不可）

            this.text = "";       //表示内容
            this.style = "''";    //表示領域の追加スタイル（文字色変更など）
        }
        //列設定型
        var ColmunSetting = function(){
            this.width = 48;            //列幅（px）
            this.readOnly = false;      //編集不可列指定
            this.textAlign = "center";   //文字配置

            var me = this;
            this.tdStyle = function(){
                return "width:" + me.width + "px;"
                    + "text-align:" + me.textAlign;
            }
        }
        //----------------------------------------

        var me = this;
        var cellChanging = false; //セル選択変更フラグ

        this.cells = [];          //セルオブジェクト群
        this.cellsD = [];         //セルオブジェクト（マウント用）
        this.columnSet = [];      //列設定
        this.writable = false;    //入力可能フラグ
        this.selectedIndex = -1;  //現在選択セルインデクス
        this.rowNum = !isNaN(this.opts.rownum) ? Number(this.opts.rownum) : 1; //行数

        //----------------------------------------
        //初期化

        function setup(){
            me.cells=[]; me.cellsD=[];
            for(var row=0; row < me.rowNum; row++){
                me.cellsD.push([]);
                for(var col=0; col < me.columnSet.length; col++){
                    var c = new Cell();
                    c.index = me.cells.length;
                    c.column = col;
                    c.row = row;
                    me.cells.push(c);
                    me.cellsD[row].push(c);
                }
            }
            me.update();
        }

        this.on('updated', function(){
            //新規選択セルへのフォーカス移動。DOM構成後にやらなければ駄目なのでここで。
            if(cellChanging){
                var input = getInputElement();
                var colset = me.columnSet[me.cells[me.selectedIndex].column];
                if(input){
                    input.value = me.cells[me.selectedIndex].text;
                    input.focus(); input.select();
                }
                cellChanging = false;
            }
        });

        /**
         * 選択セルの変更
         * @param {number} index セルインデクス。-1で選択解除。
         */
        function selectCell(index){
            if(me.selectedIndex == index){ return; }

            //現在セルの選択解除
            if(me.selectedIndex >= 0){
                var nowCell = me.cells[me.selectedIndex];
                var str = getInputElement().value;
                if(str !== nowCell.text){
                    if(!me.onValueChanging(nowCell, str)){
                        nowCell.text = str;
                    }
                }
                nowCell.focused = false;
            }
            //新規セルの選択
            if(index >= 0){
                me.cells[index].focused = true;
                cellChanging = true;
            }
            me.selectedIndex = index;
        }

        function getInputElement(){
            return me.refs.root.getElementsByTagName("input")[0];
        }

        function toIndex(row, col){
            return row * me.columnSet.length + col;
        }

        //----------------------------------------
        //イベント処理

        this.cellClicked = function(event){
            //クリックイベントは親に指定すると子からも飛んでくるから注意
            if(me.writable){
                var index = Number(event.target.getAttribute("index"));
                selectCell(index);
            }
        }

        this.inputKeyDown = function(event){
            var row = me.cells[me.selectedIndex].row;
            var col = me.cells[me.selectedIndex].column;
            var systemKey = true;

            switch(event.keyCode){
                case 13: //ENTER
                    selectCell(-1);
                    if(event.shiftKey){ row--; } else{ row++; } break;
                case 9: //Tab
                    if(event.shiftKey){ col--; } else{ col++; } break;
                case 37: col--; break; //左キー
                case 38: row--; break; //上キー
                case 39: col++; break; //右キー
                case 40: row++; break; //下キー
                default: systemKey = false;
            }
            if(!systemKey){ return true; }
            event.preventDefault();

            if(row < 0){ row=0; }
            if(row >= me.rowNum){ row=me.rowNum-1; }
            if(col < 0){ col=0; }
            if(col >= me.columnSet.length){ col = me.columnSet.length-1; }

            var index = toIndex(row, col);
            if(index != me.selectedIndex){
                selectCell(index);
            }
            return false;
        }
        
        //<del>ロストフォーカスの飛ぶタイミングがブラウザにより違うので削除</del>
        //セル選択変更時を除外するようにして再設定
        this.inputOutFocus = function(){
            if(!cellChanging){
                selectCell(-1);
            }
        }

        //----------------------------------------
        //公開メソッド

        /*
         * 現在の列数行数でセルを作成し初期化します。
         */
        this.setup = setup;

        /**
         * このテーブルに列設定を作成し追加します。
         * このメソッドを呼んでもsetupを行うまでテーブルには反映されません。
         * @return {ColumnSetting} 作成した列設定
         */
        this.newColumn = function(){
            var colset = new ColmunSetting();
            me.columnSet.push(colset);
            return colset;
        }

        /**
         * 全てのセル配列を取得します。
         * @return {Array} Cellオブジェクト配列
         */
        this.getCells = function(){
            return me.cells;
        }

        /**
         * 指定した行のセル配列を取得します。
         * @param {number} rowIndex 行インデクス（0～）
         * @return {Array} Cellオブジェクト配列
         */
        this.getRow = function(rowIndex){
            var rows = [];
            for(var i=0; i<me.columnSet.length; i++){
                rows.push(me.cells[ me.columnSet.length * rowIndex + i ]);
            }
            return rows;
        }

        /**
         * 指定した列のセル配列を取得します。
         * @param {number} colIndex 列インデクス（0～）
         * @return {Array} Cellオブジェクト配列
         */
        this.getColumn = function(colIndex){
            var cols = [];
            for(var i=0; i<me.rowNum; i++){
                cols.push(me.cells[ me.columnSet.length * i + colIndex ]);
            }
            return cols;
        }

        /** 行数を設定します。
         * このメソッドを呼んでもsetupを呼ばないとテーブルに反映されません。
         * @param {number} rowNum 設定値
         */
        this.setRowNum = function(rowNum){
            me.rowNum = rowNum;
        }
        /** 行数を取得します。
         * @return {number} 取得値
         */
        this.getRowNum = function(){
            return me.rowNum;
        }
        /** 行数を取得します。
         * @return {number} 取得値
         */
        this.getColumnNum = function(){
            return me.columnSet.length;
        }
        
        /** 編集可能状態を設定します。
         * セルがフォーカスされていた場合、編集が終了しイベントが飛ぶ場合があります。
         * @param {boolean} rowNum 設定値
         */
        this.setWritable = function(writable){
            me.writable = writable;
            if(!writable){ selectCell(-1); }
            me.update();
        }

        /** 列設定を取得します。
         * @return {ColumnSet} 取得値
         */
        this.getColumnSet = function(colIndex){
            return me.columnSet[colIndex];
        }

        //----------------------------------------
        //個別イベントコールバック

        /**
         * セルの選択が解除されかつ値が変更されているとき、変更が適用される前に呼ばれます。
         * 入力値に対して任意の変換を行いセルの要素を変更することができます。
         * 戻り値がtrueでない場合、この呼び出しの後にセルのtextに入力値が代入されます。
         * @param {Cell} cell 対象セル
         * @param {string} input 入力値
         * @return 入力値の適用が済みならtrue
         */
        this.onValueChanging = function(cell, input){return false;}

    </script>

</my-HorizonGrid>

<!-- 
    一般公開表示コンテンツ
-->
<my-publiccontent>
    <div class="mainPanel" ref="mainpanel">
            <my-rolebutton ref="rolebtn" style="position:absolute; left:1466px;" onButtonPress="{rolePress}" tindex=3></my-rolebutton>
            <!-- データ名称 -->
            <div class="largename" style="top:064px;left:1120px;">水門上流水位</div>
            <div class="largename" style="top:440px;left:0460px;">全放流量</div>
            <div class="largename" style="top:470px;left:1120px;">水門下流水位</div>

            <div class="smallname" style="top:252px;left:0195px; width:90px;">右岸<br />放流ゲート</div>
            <div class="smallname" style="top:252px;left:0291px; width:90px;">洪水吐<br />ゲート１２号</div>
            <div class="smallname" style="top:252px;left:0387px; width:90px;">洪水吐<br />ゲート１１号</div>
            <div class="smallname" style="top:252px;left:0483px; width:90px;">洪水吐<br />ゲート１０号</div>
            <div class="smallname" style="top:252px;left:0579px; width:90px;">洪水吐<br />ゲート９号</div>
            <div class="smallname" style="top:252px;left:0675px; width:90px;">洪水吐<br />ゲート８号</div>
            <div class="smallname" style="top:252px;left:0771px; width:90px;">洪水吐<br />ゲート７号</div>
            <div class="smallname" style="top:252px;left:0867px; width:90px;">洪水吐<br />ゲート６号</div>
            <div class="smallname" style="top:252px;left:0963px; width:90px;">洪水吐<br />ゲート５号</div>
            <div class="smallname" style="top:252px;left:1059px; width:90px;">洪水吐<br />ゲート４号</div>
            <div class="smallname" style="top:252px;left:1155px; width:90px;">洪水吐<br />ゲート３号</div>
            <div class="smallname" style="top:252px;left:1251px; width:90px;">洪水吐<br />ゲート２号</div>
            <div class="smallname" style="top:252px;left:1347px; width:90px;">洪水吐<br />ゲート１号</div>
            <div class="smallname" style="top:252px;left:1443px; width:90px;">左岸<br />放流ゲート</div>

            <div class="smallname" style="top:335px;left:0223px;">越流量</div>
            <div class="smallname" style="top:335px;left:0319px;">放流量</div>
            <div class="smallname" style="top:335px;left:0415px;">放流量</div>
            <div class="smallname" style="top:335px;left:0511px;">放流量</div>
            <div class="smallname" style="top:335px;left:0607px;">放流量</div>
            <div class="smallname" style="top:335px;left:0703px;">放流量</div>
            <div class="smallname" style="top:335px;left:0799px;">放流量</div>
            <div class="smallname" style="top:335px;left:0895px;">放流量</div>
            <div class="smallname" style="top:335px;left:0991px;">放流量</div>
            <div class="smallname" style="top:335px;left:1087px;">放流量</div>
            <div class="smallname" style="top:335px;left:1183px;">放流量</div>
            <div class="smallname" style="top:335px;left:1279px;">放流量</div>
            <div class="smallname" style="top:335px;left:1375px;">放流量</div>
            <div class="smallname" style="top:335px;left:1471px;">越流量</div>

            <div class="smallname" style="top:389px;left:0223px;">放流量</div>
            <div class="smallname" style="top:389px;left:1471px;">放流量</div>
           
            <div class="smallname" style="top:530px;left:0560px;">放流量</div>
            <div class="smallname" style="top:530px;left:0400px;">越流量</div>


            <!-- 地名 -->
            <div class="placename" style="top:036px;left:0794px;">八郎潟調整池</div>
            <div class="placename" style="top:552px;left:0828px;">日本海</div>
            <div class="placename writing_vertical" style="top:262px;left:0029px;">男鹿市側</div>
            <div class="placename writing_vertical" style="top:262px;left:1620px;">潟上市側</div>

            <!-- 凡例 -->
            <div class="legendname" style="top:560px;left:1368px;">凡例（ゲート）</div>
            <div class="legendname" style="top:570px;left:1473px; color:white;">故障</div>
            <div class="legendname" style="top:546px;left:1510px;">：閉</div>
            <div class="legendname" style="top:570px;left:1510px;">：故障</div>
            <div class="legendname" style="top:546px;left:1581px;">開</div>
            <div class="legendname" style="top:570px;left:1573px;">欠測</div>
            <div class="legendname" style="top:546px;left:1610px;">：開</div>
            <div class="legendname" style="top:570px;left:1610px;">：欠測</div>

            <div class="infotoplabel" style="left:0176px;top:26px;">お知らせ</div>
            
            <!-- 開放時間表示 -->
            <my-balloon ref="icon" class="iconballoon" style="top:202px; left:0196px;" tkey="D防潮水門_0136"></my-balloon>
            <my-balloon ref="icon" class="iconballoon" style="top:202px; left:0292px;" tkey="D防潮水門_0135"></my-balloon>
            <my-balloon ref="icon" class="iconballoon" style="top:202px; left:0388px;" tkey="D防潮水門_0134"></my-balloon>
            <my-balloon ref="icon" class="iconballoon" style="top:202px; left:0484px;" tkey="D防潮水門_0133"></my-balloon>
            <my-balloon ref="icon" class="iconballoon" style="top:202px; left:0580px;" tkey="D防潮水門_0132"></my-balloon>
            <my-balloon ref="icon" class="iconballoon" style="top:202px; left:0676px;" tkey="D防潮水門_0131"></my-balloon>
            <my-balloon ref="icon" class="iconballoon" style="top:202px; left:0772px;" tkey="D防潮水門_0130"></my-balloon>
            <my-balloon ref="icon" class="iconballoon" style="top:202px; left:0868px;" tkey="D防潮水門_0129"></my-balloon>
            <my-balloon ref="icon" class="iconballoon" style="top:202px; left:0964px;" tkey="D防潮水門_0128"></my-balloon>
            <my-balloon ref="icon" class="iconballoon" style="top:202px; left:1060px;" tkey="D防潮水門_0127"></my-balloon>
            <my-balloon ref="icon" class="iconballoon" style="top:202px; left:1156px;" tkey="D防潮水門_0126"></my-balloon>
            <my-balloon ref="icon" class="iconballoon" style="top:202px; left:1252px;" tkey="D防潮水門_0125"></my-balloon>
            <my-balloon ref="icon" class="iconballoon" style="top:202px; left:1348px;" tkey="D防潮水門_0124"></my-balloon>
            <my-balloon ref="icon" class="iconballoon" style="top:202px; left:1444px;" tkey="D防潮水門_0123"></my-balloon>

            <!-- データ表示 -->
            <my-labelsuii ref="icon" class="largedata" style="top:467px; left:0338px;" dkey="D防潮水門_0069" prefix="" unit="m3/s"></my-labelsuii> <!-- 全放流量 -->
            <my-labelsuii ref="icon" class="largedata" style="top:092px; left:1025px;" dkey="D防潮水門_0011" prefix="" unit="m"></my-labelsuii>    <!-- 水門上流水位 -->
            <my-labelsuii ref="icon" class="largedata" style="top:497px; left:1025px;" dkey="D防潮水門_0012" prefix="" unit="m"></my-labelsuii>    <!-- 水門下流水位 -->

            <my-labelsuii ref="icon" class="smalldata" style="top:352px; left:0115px;" dkey="D防潮水門_0052" prefix="" unit="m3/s"></my-labelsuii> <!-- 右岸ゲート越流量 -->
            <my-labelsuii ref="icon" class="smalldata" style="top:352px; left:0211px;" dkey="D防潮水門_0066" prefix="" unit="m3/s"></my-labelsuii> <!-- 洪水吐12号放流量 -->
            <my-labelsuii ref="icon" class="smalldata" style="top:352px; left:0307px;" dkey="D防潮水門_0065" prefix="" unit="m3/s"></my-labelsuii> <!-- 洪水吐11号放流量 -->
            <my-labelsuii ref="icon" class="smalldata" style="top:352px; left:0403px;" dkey="D防潮水門_0064" prefix="" unit="m3/s"></my-labelsuii> <!-- 洪水吐10号放流量 -->
            <my-labelsuii ref="icon" class="smalldata" style="top:352px; left:0499px;" dkey="D防潮水門_0063" prefix="" unit="m3/s"></my-labelsuii> <!-- 洪水吐 9号放流量 -->
            <my-labelsuii ref="icon" class="smalldata" style="top:352px; left:0595px;" dkey="D防潮水門_0062" prefix="" unit="m3/s"></my-labelsuii> <!-- 洪水吐 8号放流量 -->
            <my-labelsuii ref="icon" class="smalldata" style="top:352px; left:0691px;" dkey="D防潮水門_0061" prefix="" unit="m3/s"></my-labelsuii> <!-- 洪水吐 7号放流量 -->
            <my-labelsuii ref="icon" class="smalldata" style="top:352px; left:0787px;" dkey="D防潮水門_0060" prefix="" unit="m3/s"></my-labelsuii> <!-- 洪水吐 6号放流量 -->
            <my-labelsuii ref="icon" class="smalldata" style="top:352px; left:0883px;" dkey="D防潮水門_0059" prefix="" unit="m3/s"></my-labelsuii> <!-- 洪水吐 5号放流量 -->
            <my-labelsuii ref="icon" class="smalldata" style="top:352px; left:0979px;" dkey="D防潮水門_0058" prefix="" unit="m3/s"></my-labelsuii> <!-- 洪水吐 4号放流量 -->
            <my-labelsuii ref="icon" class="smalldata" style="top:352px; left:1075px;" dkey="D防潮水門_0057" prefix="" unit="m3/s"></my-labelsuii> <!-- 洪水吐 3号放流量 -->
            <my-labelsuii ref="icon" class="smalldata" style="top:352px; left:1171px;" dkey="D防潮水門_0056" prefix="" unit="m3/s"></my-labelsuii> <!-- 洪水吐 2号放流量 -->
            <my-labelsuii ref="icon" class="smalldata" style="top:352px; left:1267px;" dkey="D防潮水門_0055" prefix="" unit="m3/s"></my-labelsuii> <!-- 洪水吐 1号放流量 -->
            <my-labelsuii ref="icon" class="smalldata" style="top:352px; left:1363px;" dkey="D防潮水門_0051" prefix="" unit="m3/s"></my-labelsuii> <!-- 左岸ゲート越流量 -->
            <my-labelsuii ref="icon" class="smalldata" style="top:408px; left:0115px;" dkey="D防潮水門_0067" prefix="" unit="m3/s"></my-labelsuii> <!-- 右岸ゲート放流量 -->
            <my-labelsuii ref="icon" class="smalldata" style="top:408px; left:1363px;" dkey="D防潮水門_0054" prefix="" unit="m3/s"></my-labelsuii> <!-- 左岸ゲート放流量 -->

            <my-labelsuii ref="icon" class="middledata" style="top:536px; left:0238px;" dkey="D防潮水門_0053" prefix="" unit="m3/s"></my-labelsuii> <!-- 越流量 -->
            <my-labelsuii ref="icon" class="middledata" style="top:536px; left:0400px;" dkey="D防潮水門_0068" prefix="" unit="m3/s"></my-labelsuii> <!-- 放流量 -->

            <my-gate ref="icon" class="icongate" style="top: 285px; left:0196px;" ikey="I右岸放流ゲート"><span></span></my-gate>
            <my-gate ref="icon" class="icongate" style="top: 285px; left:0292px;" ikey="I洪水吐12号ゲート"></my-gate>
            <my-gate ref="icon" class="icongate" style="top: 285px; left:0388px;" ikey="I洪水吐11号ゲート"></my-gate>
            <my-gate ref="icon" class="icongate" style="top: 285px; left:0484px;" ikey="I洪水吐10号ゲート"></my-gate>
            <my-gate ref="icon" class="icongate" style="top: 285px; left:0580px;" ikey="I洪水吐9号ゲート"></my-gate>
            <my-gate ref="icon" class="icongate" style="top: 285px; left:0676px;" ikey="I洪水吐8号ゲート"></my-gate>
            <my-gate ref="icon" class="icongate" style="top: 285px; left:0772px;" ikey="I洪水吐7号ゲート"></my-gate>
            <my-gate ref="icon" class="icongate" style="top: 285px; left:0868px;" ikey="I洪水吐6号ゲート"></my-gate>
            <my-gate ref="icon" class="icongate" style="top: 285px; left:0964px;" ikey="I洪水吐5号ゲート"></my-gate>
            <my-gate ref="icon" class="icongate" style="top: 285px; left:1060px;" ikey="I洪水吐4号ゲート"></my-gate>
            <my-gate ref="icon" class="icongate" style="top: 285px; left:1156px;" ikey="I洪水吐3号ゲート"></my-gate>
            <my-gate ref="icon" class="icongate" style="top: 285px; left:1252px;" ikey="I洪水吐2号ゲート"></my-gate>
            <my-gate ref="icon" class="icongate" style="top: 285px; left:1348px;" ikey="I洪水吐1号ゲート"></my-gate>
            <my-gate ref="icon" class="icongate" style="top: 285px; left:1444px;" ikey="I左岸放流ゲート"></my-gate>

            <my-arrow ref="icon" class="iconarrow" style="top:447px;left:0234px;" ikey="I右岸放流ゲート" ></my-arrow>
            <my-arrow ref="icon" class="iconarrow" style="top:391px;left:0330px;" ikey="I洪水吐12号ゲート" ></my-arrow>
            <my-arrow ref="icon" class="iconarrow" style="top:391px;left:0426px;" ikey="I洪水吐11号ゲート" ></my-arrow>
            <my-arrow ref="icon" class="iconarrow" style="top:391px;left:0522px;" ikey="I洪水吐10号ゲート" ></my-arrow>
            <my-arrow ref="icon" class="iconarrow" style="top:391px;left:0618px;" ikey="I洪水吐9号ゲート" ></my-arrow>
            <my-arrow ref="icon" class="iconarrow" style="top:391px;left:0714px;" ikey="I洪水吐8号ゲート" ></my-arrow>
            <my-arrow ref="icon" class="iconarrow" style="top:391px;left:0810px;" ikey="I洪水吐7号ゲート" ></my-arrow>
            <my-arrow ref="icon" class="iconarrow" style="top:391px;left:0906px;" ikey="I洪水吐6号ゲート" ></my-arrow>
            <my-arrow ref="icon" class="iconarrow" style="top:391px;left:1002px;" ikey="I洪水吐5号ゲート" ></my-arrow>
            <my-arrow ref="icon" class="iconarrow" style="top:391px;left:1098px;" ikey="I洪水吐4号ゲート" ></my-arrow>
            <my-arrow ref="icon" class="iconarrow" style="top:391px;left:1194px;" ikey="I洪水吐3号ゲート" ></my-arrow>
            <my-arrow ref="icon" class="iconarrow" style="top:391px;left:1290px;" ikey="I洪水吐2号ゲート" ></my-arrow>
            <my-arrow ref="icon" class="iconarrow" style="top:391px;left:1386px;" ikey="I洪水吐1号ゲート" ></my-arrow>
            <my-arrow ref="icon" class="iconarrow" style="top:447px;left:1482px;" ikey="I左岸放流ゲート" ></my-arrow>

            <my-infoPanel ref="info" style="position:absolute;left:0176px; top:54px;"></my-infoPanel>

            <div class="graphtitle" style="display:flex; align-items:center; justify-content:space-between;width:1280px; top:623px; left:27px;" >
                <div>
                    <span>１時間毎の推移</span>
                    <span class="graphannotation" style="margin-left:20px;" ref="graphStartTime"></span>
                    <span class="graphannotation">～</span>
                    <span class="graphannotation" ref="graphEndTime"></span>
                    <span class="graphannotation">（単位：水位はTPm、放流量はm<sup>3</sup>/s）</span>    
                </div>
                <div>
                    <span class="graphannotation" style="margin-right:36px;">凡例（水位グラフ）</span>
                    <span class="graphannotation" style="margin-right:47px;">：水門上流水位</span>
                    <span class="graphannotation" style="margin-right:70px;">：水門下流水位</span>    
                </div>
            </div>
            <div class="smallname" style="top:655px; left:693px;">※水位1.30m以上は全て1.30mとしてグラフ表示します。水位0.00m以下は全て0.00mとしてグラフ表示します。</div>
            <div class="smallname" style="top:665px; left:065px;">1.30m</div>
            <div class="smallname" style="top:693px; left:065px;">1.00m</div>
            <div class="smallname" style="top:783px; left:065px;">0.00m</div>
            <!-- グラフ描画キャンパス -->
            <canvas ref="canvas" id="canvas" width="1128" height="120" style=" position:absolute; left:0110px; top:676px;"></canvas>
            <!-- ヘッダーは別途用意 -->
            <my-horizongrid ref="grid" rownum="5" colnum="24" style="font-size: 14px; line-height: 21px;
                                position:absolute; top:809px; left:20px;"></my-horizongrid>
            <my-WaterLevelDifference ref="diff" style="position:absolute; top:618px; left:1308px;"
                                     dkey1="D防潮水門_0011" dkey2="D防潮水門_0012"></my-WaterLevelDifference>
        </div>
    <style scoped>
        :scope {
            display: flex;
            flex-direction: row;
            cursor: default;
        }
        :scope > table {
            border-collapse: separate;
            border: solid 1px lightgray;
        }
        .mainPanel {
            width:1680px;
            height:954px;
            position:relative;
            background: url("img/background_bouchou_ippan.png");
        }    
        .mainPanel > * {
            position:absolute;
        }
        .largename {
            font-size:20px;
            color:#FFFFFF;
        }
        .smallname {
            text-align:center;
            font-size:12px;
        }
        .placename {
            font-size:24px;
            color:#232323;
        }
        .legendname {
            text-align:center;
        }
        .writing_vertical {
            -webkit-writing-mode: vertical-rl;
            -ms-writing-mode: tb-rl;
            -o-writing-mode: vertical-rl;
            writing-mode: vertical-rl;
        }
        .infotoplabel {
            font-size:16px;
            color:#232323;
        }
        .largedata {
            font-size: 48px;
            width: 250px;
            height: 56px;
            line-height: 56px;
            pointer-events: none;
        }
        .middledata {
            font-size: 32px;
            width: 250px;
            height: 56px;
            line-height: 56px;
            pointer-events: none;
        }
        .smalldata {
            font-size: 18px;
            width: 160px;
            height: 32px;
            line-height: 32px;
            pointer-events: none;
        }
        my-gate {
            width:88px; 
            height: 32px;
        }
        my-arrow {
            width:12px; 
            height:16px;
        }
        my-balloon {
            width:88px; 
            height:48px;
            text-align:center;
        }
        .graphtitle {
            font-size:16px;
        }
        .graphannotation {
            font-size:14px;
        }
    </style>

    <script type="text/javascript">
        var me=this;
        this.isPubic = ("ispublic" in this.opts) ? this.opts.ispublic == "true" : true;
        this.loader=new LatestLoader();
        this.lastData=null;

        this.observeLoader=new LatestLoader();
        this.infoLoader=new LatestLoader();


        this.drawer;
        const nameColumnWidth = 90;
        const dataColumnWidth = 49;
        const columnSize = 24;

        //----------------------------------------

        this.on('mount',function() {
            if(!me.isPubic) {
                me.refs.rolebtn.root.style.display = "none";
                me.refs.mainpanel.style["background"] = 'url("img/background_bouchou_gyoumu.png")';
                me.refs.mainpanel.style["height"] = "964px";

            }

            //--------------------グリッド初期化
            //時刻列
            var colset = me.refs.grid.newColumn();
            colset.readOnly = true;
            colset.width = nameColumnWidth;
            //データ列
            for(var i = 0; i < columnSize; i++) {
                var colset = me.refs.grid.newColumn();
                colset.width = dataColumnWidth;
            }
            me.refs.grid.setup();

            me.refs.grid.getColumn(0)[0].text = "時刻";
            for(var i=1;i<me.refs.grid.getRowNum(); i++) {
                me.refs.grid.getColumn(0)[i].text = gridData[i-1].label;
            }

            me.drawer = new GraphDrawer(me.refs.canvas);
            me.loader.callback=loaderCallback;

            me.observeLoader.callback = observeCallback;
            me.observeLoader.setUrl("Data/Latest/GRAPH_DATA.js", 1100);


            me.infoLoader.callback = infoCallback;
            me.infoLoader.setUrl("Data/Latest/INFO_LOG.js", 1100);
            callAllLoader();

            //me.observeLoader.start();
            //me.loader.start();
        })

        /**
         * 最新データDLコールバック
         */
        function loaderCallback(data,message) {
            if(data==null) {
                footer.error("最新データを取得できません。"+message);
                return;
            }
            me.lastData=data;
            if(me.parent.refs.header != null) {
                me.parent.refs.header.setTimeStr(data.time);
            }
            common.riot.refEach(me.refs.icon
                , function (icon) {
                    icon.setData(data);
                });
            me.refs.diff.setData(data, AllGateClosePatterns);
        }

        /**
         * 表、グラフコールバック
         */
        function observeCallback(data,message) {
            var upStreamData = [];
            var downStreamData = [];
            if(data==null) {
                footer.error("最新観測データを取得できません。"+message);
                return;
            }
            if(data.startTime != null) {
                me.refs.graphStartTime.textContent = common.date.format(common.date.fromTotalSec(data.startTime) , "yyyy/MM/dd HH:mm");
            }
            if(data.endTime != null) {
                me.refs.graphEndTime.textContent = common.date.format(common.date.fromTotalSec(data.endTime) , "yyyy/MM/dd HH:mm");
                var timeRow = me.refs.grid.getRow(0);
                for(var i = 0; i < timeRow.length - 1; i++) {
                    var time = common.date.fromTotalSec(data.startTime + (3600 * i));
                    timeRow[i+1].text = common.date.format(time, "HH:mm");
                }
            }
            for(var i=0; i<me.refs.grid.getRowNum() - 1; i++) {
                var dRow = me.refs.grid.getRow(1 + i);
                var def = gridData[i].def;
                var grapNo = gridData[i].grapNo;
                for(var j=0; j < data.records[i].length; j++) {
                    dRow[j+1].text = common.converter.getText(data.records[i][j].flag, data.records[i][j].data, def.digit);
                    dRow[j+1].style = common.html.toStyle(common.converter.getColor(data.records[i][j].flag));
                    
                    var grapData;
                    if(flags.INVALID.isOn(data.records[i][j].flag)) {
                        grapData = null;
                    } else {
                        grapData = roundGraphData(data.records[i][j].data); //グラフのMIN,MAXがある為
                    }
                    if(grapNo == 0) {
                        upStreamData.push(grapData);
                    } else if(grapNo == 1) {
                        downStreamData.push(grapData);
                    }
                }
            }
            me.refs.grid.update();

            draw(upStreamData, downStreamData);
        }
        /**
         * お知らせデータDLコールバック
         */
        function infoCallback(data,message) {
            if(data==null) {
                footer.error("お知らせデータを取得できません。"+message);
                return;
            }
            me.refs.info.setData(data);
        }
        /**
         * グラフ用データの丸め処理を行います。
         * x > 130 の場合 130 
         * x < 0   の場合   0
         * 非整数値の場合、null
        */
        function roundGraphData(value) {
            if(!common.number.isInteger(value)) return null;
            if(value > 130) {
                return 130;    
            } else if(value < 0) {
                return 0;    
            }
            return value;
        }
        /**
         * グラフ描画処理
         *
         */
        function draw(list1, list2){
            me.drawer.clear();
            me.drawer.position.x = 0;
            me.drawer.position.y = 0;
            me.drawer.width = 1128;
            me.drawer.height = 118;
            me.drawer.valueRange.x = 23;
            me.drawer.valueRange.y = 130;
            me.drawer.isDrawAxis.x = false;
            me.drawer.isDrawAxis.y = false;

            //drawer.drawFrame();
            me.drawer.drawLineChart(list1, "#156FC9", 2);
            me.drawer.drawLineChart(list2, "#029FD8", 2, [8, 4]);
        }
        /**
         * データファイル取得
         */
        function callAllLoader() {
            footer.clear();
            me.loader.downLoad();
            me.infoLoader.downLoad();
            me.observeLoader.downLoad();
        }
        //----------------------------------------
        //イベント処理
        //更新ボタン押下
        this.reloadPress = function() {
            callAllLoader();
        }
        //役割ボタン押下
        this.rolePress = function() {
            var wTop = window.screenTop + (window.outerHeight / 2) - (860 / 2) - 50;
            var wLeft = window.screenLeft + (window.outerWidth / 2) - (900 / 2);
            window.open("../Help/role.html", "_blank", "width=900,height=860,scrollbars=yes,resizable=yes,top="+wTop+",left="+wLeft);
        }
    </script>
</my-publiccontent>