// ===== 設定値定義 =====

// レイアウトの幅を定数で管理

const LAYOUT_CONFIG = {

    withComment: '73%',  // コメント表示時：メインエリアを73%に縮小

    fullWidth: '100%'    // コメント非表示時：メインエリアを全幅表示

};



// ===== 編集画面読み込み時の処理 =====

// プリザンターの編集画面が表示される度に実行される

$p.events.on_editor_load = function () {

    // 既存のボタンが存在しないかチェック（重複防止）

    // 画面更新時に同じボタンが複数作られるのを防ぐ

    if ($('#comment_toggle').length === 0) {

        // 何度も使う要素は変数に保存して処理を高速化

        const $editorComments = $('#EditorComments');        // コメントエリア

        const $editorTabsContainer = $('#EditorTabsContainer'); // メインエリア

        

        // コメント切替ボタンを追加

        // 最後のコマンドボタンの後にボタンを挿入し、同時にクリックイベントも設定

        $('#MainCommands button:last-child').after(

            $(``).button({ 

                icon: 'ui-icon-circle-arrow-e'

            }).on('click', function() {

                // 現在のコメントエリアの表示状態を取得

                const isVisible = $editorComments.is(':visible');

                // コメントエリアの表示/非表示を切り替え

                $editorComments.toggle();

                // メインエリアの幅を状態に応じて調整

                // 表示中→非表示なら全幅、非表示→表示なら73%

                $editorTabsContainer.css('width', isVisible ? LAYOUT_CONFIG.fullWidth : LAYOUT_CONFIG.withComment);

            })

        );

    }

};