<!--
  만든 사람 : 현실환 (silhwan5125@naver.com)
            버전 : 0.9  (제작일자 : 2023년 11월 30일, index_v1.html)
              - 최초 버전
            버전 : 1.0  (제작일자 : 2025년 2월 25일, index_v2.html)
              - 갤러리 창에 현재 선택한 폴더의 하위 폴더 앨범을 보여 줄 수 있도록 함.
            버전 : 1.1  (제작일자 : 2025년 5월 9일, index_v31.html)
              - 브라우저 히스토리를 관리하여 페이지 이동 시에 이전에 보았던 폴더 앨범을 보여 줌.
            버전 : 1.2  (제작일자 : 2025년 5월 15일, index_v32.html)
              - fixed : 앨범(선택 폴더) 변경 시 수직 스크롤 바 위치가 top 위치로 변경되지 않는 문제.    
              - fixed : 이전에 스크롤 바가 있었을 경우 표시할 사진 수가 적거나 표시할 사진이 없는 
                        앨범(선택 폴더)으로 변경 시에 스크롤 바가 그대료 표시되는 문제
              - fixed : 로그인 하지 않은 상태에서 표시할 사진이 없는 앨범에서 표시할 사진이 있는 
                        앨범으로 변경 시에 사진이 보여지지 않는 문제
              - fixed : 지도 보기창이 보여지는 중에 "상위 폴더로" 버턴과 "작업대상" 선택 라디오 
                        버턴이 입력방지되지 않는 문제
              - fixed : "하위 폴더 생성" 버턴에 의해 생성된 폴더 메뉴가 지도 보기창이 보여지는 중에
                         입력방지되지 않는 문제
              - changed : 참조하는 폼 스타일 시트 중 "form_style.css"를 "form_style2.css"로 변경
            버전 : 1.2.1 (제작일자 : 2025년 5월 20일, index_v321.html)           
              - changed : google map의 merker 표식을 나타내는 기존 방식이 deprecated 되므로
                          새로운 방식(marker -> AdvancedMarkerElement)을 사용할 수 있도록 함.
                          * 새로운 방식을 적용할려면 상수 "use_AdvancedMarker" 의 값을 "true"로
                            설정한다.
            버전 : 1.2.2 (제작일자 : 2025년 5월 25일, index_v33.html)                
              - changed : google map 표시용의 기본 dialog box를 ZulNs의 "Resizable & Draggable 
                          Dialog"에서 jquery-ui의 modal dialog box로 변경함.
                          (전역 상수 "use_ZulNsDialog"의 값을 true로 하면 원래대로 바꿀 수 있다.) 
              - changed : 사진이 회전된 이미지로 저장된 경우 무회전 상태로 되돌려 보여 주도록 함. 
                          (수정한 연관 파일 : thumbnail_build2.php, image.class.php)                       
              - added : google map의 marker 위치에 현재 선택한 갤러리 item의 thumbnail 이미지를 
                          오버레이 형태로 보여 주는 기능을 추가함.
            버전 : 1.2.3 (제작일자 : 2025년 5월 28일, index_v331.html)
              - bugfix : 유효한 비디오 파일 확장자인지 체크하기 위해 파일 확장자를 추출하는 명령문에서
                         얻어진 원시 확장자를 소문자로 변환하는 절차가 누락되어 대문자 확장자를 가진 
                         비디오 파일을 재생하지 못함. (jquery.nanogallery2.js 파일의 버그)
            버전 : 1.3   (제작일자 : 2025년 6월 1일, index_v34.html)
              - changed : 파일 업로드용 dialog box와 파일 이동/복사용 dialog box를 ZulNs의 
                          "Resizable & Draggable Dialog"에서 jquery-ui의 modal dialog box로 변경함. 
            버전 : 1.3.1  (제작일자 : 2025년 6월 3일, index_v341.html)
              - changed : SSE (Server-Sent Events) API 및 SSE 지원 모듈(sse.js)을 이용하여 Thumbnail 생성   
                          시에 서버에서 보낸 이벤트를 수신하여 진행 상황을 dialog box로 보여줌 
                          (Thumbnail 생성 스크립트 업데이트 : thumbnail_build2.php -> thumbnail_build3.php) 
              - bugfix : 작업대상이 "파일"로 되어 있을 때 "전체 선택" 후 "삭제" 시에 선택된 미디어 갯수보다 
                         하나 적게 삭제된 것으로 알려주는 버그 수정.
              - bugfix : 파일 이동이나 삭제 후 선택한 폴더에 미디어 파일이 하나도 없게 되었을 때 no_media_msg를 
                         표시하지 않는 버그 수정 
              - bugFix : ajax call 시에 contentType을 명시하지 않아서 node 서버에서 JSON.stringify(json) 시에 
                         오류가 발생하는 아래 함수들을 수정 
                           copyMediaFiles, moveMediaFiles, delete_files_click     
            버전 : 1.3.2  (제작일자 : 2025년 6월 23일, index_v342.html)
              - changed : 폴더 삭제, 미디어 파일 이동/복사/삭제 시에 진행 확인용 confirm dialog 표시를 javascript 
                          내장 API 함수 "confirm"을 이용하여 표시하던 것을 jquery-confirm을 이용하여 표시함 (UI 개선) 
              - changed : UI 개선을 위해 폴더명 변경, 하위 폴더 생성 시에 폴더명 입력을 "prompt" 함수를 이용하던 
                          방식에서 modal dialog를 이용하는 방식으로 바꿈.                                                                                                               

  본 Web Program은 이 프로그램이 위치한 폴더를 기준으로 자동으로 폴더 트리 구조의 메뉴를
  구성해서 편하게 앨범 보기를 할 수 있도록 만들어진 갤러리 뷰어이며 아래와 같은 특징을 가집니다.
   
   - 갤러리 뷰어용 플러그인으로 "nanagallery2"를 이용하여 터치 디바이스 지원, 이미지 회전, 
     이미지 확대/축소, 전체 화면 보기 등의 다양한 기능을 지원합니다.
     "nanagallery2"에 대한 자세한 내용은 아래 url을 참조하시기 바랍니다.
        https://nanogallery2.nanostudio.org/
        https://nanogallery2.nanostudio.org/api.html    (API reference)
        https://www.jqueryscript.net/gallery/Full-Featured-Photo-Gallery-Plugin-jQuery-nanoGallery-2.html
   - 지도 보기용으로 구글 맵 api를 이용하고, 지도를 담을 위치/크기 조절이 가능한 dialog용으로
     ZulNs의 "Resizable & Draggable Dialog" 플러그인을 사용합니다. 
        ( -> v1.2.2 이후 지도 보기용 dialog box는 jquery-ui의 dialog로 대치됨)
     ZulNs의 "Resizable & Draggable Dialog" 플러그인에 대한 자세한 내용은 아래 url을 참조하시기
      바랍니다.
        https://www.cssscript.com/resizable-draggable-dialog/  
   - 파일 업로드용 플러그인으로 Daniel Morales의 "jQuery Ajax File Uploader Widget"을 이용하고,
     파일 업로드 창은 jquery-ui의 dialog를 이용합니다.
          https://github.com/danielm/uploader
          https://jqueryui.com/dialog/#modal-message

   - 구글 맵의 infowindow 대신 style 변경이 용이한 popup 창의 사용을 위해 아래 url에서
     다운 받은 infoBubble 플러그인을 사용함
        https://github.com/googlearchive/js-info-bubble        
   - 사진 및 동영상 원본 자료에 대해 자동으로 thumbnail 파일을 생성하여 반복 이용시 빠른 정보
     취득을 가능케 합니다.
   - 사진 또는 동영상 파일에 위치 정보가 있을 경우 이 위치 정보 기준으로 구글 지도를 띄워 볼 수
     있습니다.   
   - 지원하는 사진 및 동영상 파일은 다음과 같습니다.
      사진 : jpg, jpeg, png, gif
      동영상 : mp4, webm 
-->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>갤러리 뷰어</title>
    <link rel="icon" href="favicon.svg" type="image/svg+xml" />
    <link rel="stylesheet" href="prog_resources/js_css/form_styles2.css" type="text/css" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
    <script src="https://use.fontawesome.com/releases/v6.2.0/js/all.js"></script>
    <!-- <script src="../resources/jquery-3.7.1/jquery-3.7.1.min.js"></script>  -->
    <script
      src="https://code.jquery.com/jquery-3.7.1.min.js"
      integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
      crossorigin="anonymous"
    ></script>
    <!--
  <link href="https://unpkg.com/nanogallery2@3.0.5/dist/css/nanogallery2.min.css" rel="stylesheet" type="text/css">
  <script type="text/javascript" src="https://unpkg.com/nanogallery2@3.0.5/dist/jquery.nanogallery2.min.js"></script>
  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.5.3/css/bootstrap.min.css" />
    <link rel="stylesheet" href="prog_resources/nanogallery2_v305/dist/css/nanogallery2.min.css" type="text/css" />
    <script src="prog_resources/nanogallery2_v305/dist/jquery.nanogallery2.js"></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
      crossorigin="anonymous"
    ></script>
    <!-- 아래 2줄은 jquery-ui Dialog 사용을 위한 것임. -->
    <link rel="stylesheet" href="prog_resources/jquery-ui-1.14.1/jquery-ui.css" />
    <script src="prog_resources/jquery-ui-1.14.1/jquery-ui.js"></script>
    <!-- 아래 2줄은 jquery-confirm Dialog 사용을 위한 것임. -->
    <link rel="stylesheet" href="prog_resources/js_css/jquery-confirm.css" />
    <script src="prog_resources/js_css/jquery-confirm.js"></script>

    <!--
    <link rel="stylesheet" href="prog_resources/js_css/draggable-resizable-dialog.css" type="text/css" />
    <script type="text/javascript" src="prog_resources/js_css/draggable-resizable-dialog.js"></script>
    <script defer src="https://maps.googleapis.com/maps/ap i/js?key=AIzaSyCh3Hrf-U0_kPRIvTosIDonRMN8LnlinIw"></script>  -->
    <script type="text/javascript" src="prog_resources/js_css/infobubble.js"></script>
    <script type="text/javascript" src="login2.js"></script>
    <script type="text/javascript" src="get_limited_str.js"></script>

    <!-- Custom styles for jquery.dm-uploader -->
    <link href="prog_resources/js_css/jquery.dm-uploader.min.css?v=v11" rel="stylesheet" />
    <link href="prog_resources/js_css/dm-uploader_main.css?v=v11" rel="stylesheet" />

    <!-- GIF player for animation of album iamge -->
    <script type="text/javascript" src="prog_resources/js_css/libgif.js"></script>
    <script type="text/javascript" src="prog_resources/js_css/rubbable.js"></script>
    <!-- <script type="module" src="prog_resources/js_css/sse.js"></script>  -->

    <style>
      @import url("https://fonts.googleapis.com/css2?family=Nanum+Gothic&family=Nanum+Myeongjo&display=swap");
    </style>
    <style>
      /* 전체 화면 구성에서 화면 스크롤시 메인 화면 우측의 갤러리 창 부분만 스크롤 되게 함.
           => 메인 화면 좌측의 폴더 트리 표시창은 내용이 넘치면 자체 스크롤 바를 이용하므로
              브라우저 화면의 스크롤 바에 의존하지 않음.  */

      /* 'header'는 프로그램 타이틀을 보여 주는 화면 상단 표시부에 대한 속성 설정 값을 가지며,
          화면 스크롤시 고정된 위치로 두기 위해 position 속성을 fixed로 하고, 상대적으로 다른
          영역의 z-index 값 보다 큰 값을 준다 */
      #header {
        height: 70px;
        position: fixed;
        z-index: 9;
      }
      /* 메인 화면은 좌측의 폴더 트리를 보여주는 메뉴 창과 우측의 thumbnail 이미지를 보여주는 갤러리
         창으로 분할되며, 메뉴 창은 고정 너비를 갖게하고, 갤러리 창은 브라우저 화면 크기에 따라 가변
         되도록 CSS를 정의하였다.
         아래에서 'row_box' 는 메인 화면 전체 영역에 대한 class 명칭임 */
      div.row_box {
        width: 100%;
        height: auto;
        min-height: 100%;
        display: flex;
        font-family: "Nanum Gothic";
        /* border: 1px solid #003458; */
        background-color: #1A2227;
      }
      /* 메인 화면 영역 중 좌측의 폴더 트리를 보여주는 메뉴 창에 대한 설정 */
      /* 브라우저 스크롤 바에 의한 화면 스크롤시 움직이지 않고 고정된 위치로 두기 위해 position 속성을
         'fixed'로 하고, top 값은 상단 프로그램 타이틀을 표시하는 'header' 영역의 높이로, z-index 값은
         1 보다 크고, 화면 상단 표시부 'header'의 z-index 값 보다 작은 값을 준다. */
      div.left_box {
        width: 330px;
        height: auto;
        min-height: 100%;
        float: left;
        top: 70px;
        position: fixed;
        z-index: 2;
        box-sizing: border-box;
        /* background: #8977ad;  */
        background-color: #1A2227;
      }
      /* 메인 화면 영역 중 우측의 갤러리 창에 대한 설정 */
      /* 좌측 메뉴 창의 position이 fixed로 설정되어 이 부분이 차지하는 너비만큼
         margin-left 값을 주어야 한다. */
      div.right_box {
        width: calc(100% - 330px);
        margin-left: 330px;
        height: auto;
        min-height: 100%;
        float: right;
        /* top: 70px;
        position: fixed; */
        box-sizing: border-box;
        /* background: #ece6cc;  */
        background-color: #E1E6EA;
      }
      ul li {
        line-height: 160%;
      }
      #explorer_folder ul, #folder_list ul {
        margin: 0;
        padding: 0;
        padding-inline-start: 18px;
        list-style: none outside none;
      }

      #explorer_folder .dir, #folder_list .dir  {
        position: relative;
        padding-left: 20px;
        cursor: pointer;
        border: solid 0px #00FF00;
      }
      #explorer_folder .sub_dir, #folder_list .sub_dir  {
        position: relative;
        padding-left: 0px;
        cursor: pointer;
        display: none;
        border: solid 0px #FF0000;
        padding-inline-start: 0px;
      }
      #explorer_folder .fil, #folder_list .fil {
        position: relative;
        padding-left: 20px;
      }
      #explorer_folder .dir::before, #folder_list .dir::before  {
        position: absolute;
        content: '';
        display: block;
        margin-top: 3px;
        width: 16px;
        height: 16px;
        top: 2px;
        left: 0;
        background: url(prog_resources/images/folder.png) no-repeat;
      }

      #explorer_folder .dir.root::before, #folder_list .dir.root::before {
        background: url(prog_resources/images/folder_root.png) no-repeat;
      }
      #explorer_folder .dir.plus::before, #folder_list .dir.plus::before {
        background: url(prog_resources/images/folder_plus.png) no-repeat;
      }

      #explorer_folder .dir.minus::before, #folder_list .dir.minus::before {
        background: url(prog_resources/images/folder_minus.png) no-repeat;
      }

      #explorer_folder .dir.selected::before, #folder_list .dir.selected::before {
        background: url(prog_resources/images/folder_hi.png) no-repeat;
      }

      #explorer_folder .dir.root.selected::before, #folder_list .dir.root.selected::before {
        background: url(prog_resources/images/folder_root_hi.png) no-repeat;
      }

      #explorer_folder .dir.plus.selected::before, #folder_list .dir.plus.selected::before {
        background: url(prog_resources/images/folder_plus_hi.png) no-repeat;
      }

      #explorer_folder .dir.minus.selected::before, #folder_list .dir.minus.selected::before {
        background: url(prog_resources/images/folder_minus_hi.png) no-repeat;
      }

      #explorer_folder .fil::before, #folder_list .fil::before {
        position: absolute;
        content: '';
        display: block;
        margin-top: 3px;
        width: 16px;
        height: 16px;
        top: 2px;
        left: 0;
        background: url(prog_resources/images/file.png) no-repeat;
      }

      #folder_box a:link {
        color: #dddddd;
        background-color: transparent;
        text-decoration: none;
      }

      #folder_box a:visited {
        color: #eeeeee;
        background-color: transparent;
        text-decoration: none;
      }

      #folder_box a:hover {
        color: darkorange;
        background-color: transparent;
        text-decoration: underline;
      }

      #folder_box a:active {
        color: orangered;
        background-color: transparent;
        text-decoration: underline;
      }

      #folder_box a.selected {
        color: darkorange;
        background-color: transparent;
        text-decoration: none;
      }

      #root_ul_2 a:link {
        color: #dddddd;
        background-color: transparent;
        text-decoration: none;
      }

      #root_ul_2 a:visited {
        color: #eeeeee;
        background-color: transparent;
        text-decoration: none;
      }

      #root_ul_2 a:hover {
        color: darkorange;
        background-color: transparent;
        text-decoration: underline;
      }

      #root_ul_2 a:active {
        color: orangered;
        background-color: transparent;
        text-decoration: underline;
      }

      #root_ul_2 a.selected {
        color: darkorange;
        background-color: transparent;
        text-decoration: none;
      }

      #view_map a:hover {
        color: darkorange;
        background-color: transparent;
        text-decoration: underline;
      }

      #view_map a:active {
        color: orangered;
        background-color: transparent;
        text-decoration: none;
      }

      /* 'treeBox'는 메인화면 좌측 메뉴 창에서 폴더 트리를 표시할 영역의 div에 대한 class
        명칭이며, 위치가 고정되어 있어 (브라우저 화면 스크롤의 영향을 받지 앟음) 최대 높이가
        메인 화면 높이를 초과하지 않도록 max-height 값을 설정한다. */
      .treeBox {
        height: 760px;
        max-height: calc(100vh - 90px);
        min-height: calc(100vh - 96px);
        /* = 전체 화면 높이 - (상단 영역 + 여유 공간) */
        width: auto;
        margin: auto;
        margin-left: -6px;
        padding-bottom: 0px;
        padding-right: 6px;
        font-size: 0.95rem;
        /* overflow-y: scroll;  */
        /* "scroll"로 설정하면 스크롤 바가 항상 보이게 된다. */
        overflow-y: auto;
      }

      .treeBox::-webkit-scrollbar, .tableBox2::-webkit-scrollbar {
        width: 12px;
      }

      .treeBox::-webkit-scrollbar-thumb, .tableBox2::-webkit-scrollbar-thumb {
        background-color: #789898;
        border-radius: 10px;
        background-clip: padding-box;
        border: 2px solid transparent;
      }

      .treeBox::-webkit-scrollbar-track, .tableBox2::-webkit-scrollbar-track {
        background-color: #233333;
        border-radius: 10px;
        /* box-shadow: inset 0px 0px 5px white;  */
        box-shadow: inset 0px 0px 5px #999999;
      }

      #description {
        position: absolute;
        left: 220px;
        top: 64%;
        bottom: 24%;
        font-family: "Nanum Myeongjo";
        font-style: normal;
        font-weight: 500;
        font-size: 0.95rem;
        line-height: 16px;
        letter-spacing: 0.05em;
        /* text-transform: uppercase; */
        /* #FFFFFF */
        color: #dfcfcf;
      }

      #author_desc {
        position: absolute;
        left: 220px;
        top: 24%;
        /* bottom: 24%; */
        font-family: "Nanum Myeongjo";
        font-style: normal;
        font-weight: 500;
        font-size: 0.95rem;
        line-height: 16px;
        letter-spacing: 0.05em;
        /* text-transform: uppercase; */
        /* #FFFFFF */
        color: #dfcfcf;
      }

      #media_path, #media_files {
        margin-left: 0.5rem;
        padding-left: 0.5rem;
        line-height: 20px;
        font-size: 1rem;
        font-weight: bold;
        width: 400px
      }

      #folder_para, #file_para {
       text-align: center;
       /* margin-top: 1rem; */
       margin-top: -42px;
       margin-bottom: 0.8rem;
       font-family: 맑은 고딕;
       display: block;
      }

      /* nanogallery2 DOM elements에 대한 속성 정의 */
      .nGY2PopupTitle {
        font-family: "Nanum Gothic";
        font-size: 1.0em;
        border-bottom: 2px solid #888;
        /* 타이틀 아래 줄 긋기 */
        padding: 0 30px 5px 0;
        margin-top: -0.9em;
        margin-bottom: 5px;
      }

      .nGY2PopupContentLeft,
      .nGY2PopupContentRight {
        position: fixed;
        text-align: left;
        top: 50%;
        left: 50%;
        padding: 10px 15px;
        height: auto;
        width: auto;
        /* 450px; */
        background: #fff;
        -webkit-transform: translateX(-50%) translateY(-50%);
        -moz-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
        border-width: thin;
        border-color: #60a0ab;
        border-style: solid;
        border-radius: 8px;
        box-shadow: 3px 3px 3px;
        background-color: lightgoldenrodyellow;
      }

      /* 임의로 만든 class 'nGY2Icon-audio'에 'before' 아이콘 적용 => 작동 안됨 */
      /*
        .nGYyPopupOneitemText .nGY2Icon-audio::before {
          background: url(prog_resources/images/audio.png) no-repeat;
        }
      */
      /* 줄이 넘쳐서 다음 줄로 이어질때 들여쓰기를 하도록 함 */
      .nGYyPopupOneitemText {
        margin-left: 15px;
        padding-left: 15px;
        text-indent: -15px;
        font-size: 0.9em;
        line-height: 24px;
      }

      /*
       * Property styles in non-highlighted state of map's marker
       */
      .property {
        align-items: center;
        background-color: red;   /* #FFFFFF*/
        border-radius: 50%;
        color: #263238;
        display: flex;
        font-size: 14px;
        gap: 15px;
        height: 30px;
        justify-content: center;
        padding: 4px;
        position: relative;
        transition: all 0.3s ease-out;
        width: 30px;
      }

      .property::after {
        border-left: 9px solid transparent;
        border-right: 9px solid transparent;
        border-top: 9px solid red; /* #FFFFFF*/
        content: "";
        height: 0;
        left: 50%;
        position: absolute;
        top: 95%;
        transform: translate(-50%, 0);
        transition: all 0.3s ease-out;
        width: 0;
        z-index: 1;
      }

      .property .icon {
        align-items: center;
        display: flex;
        justify-content: center;
        color: black;  /* #FFFFFF; */
      }

      .property .icon svg {
        height: 20px;
        width: auto;
      }

      .property .details {
        display: none;
        flex-direction: column;
        flex: 1;
      }

      .property .details p {
        margin-top: 0.8em;
        color: black;
        font-size: 1em;
        font-family: "맑은 고딕", "Nanum Gothic";
        line-height: 1.5em
      }

       /*
       * Property styles in highlighted state.
       */
      .property.highlight {
        background-color: #FFFFFF;
        border-radius: 8px;
        box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.2);
        height: 65px;
        margin-top: 10px;
        margin-bottom: -5px;
        padding-top: 12px;
        padding-left: 8px;
        padding-right: 8px;
        width: auto;
      }

      .property.highlight::after {
        border-top: 9px solid #FFFFFF;
      }

      .property.highlight .details {
        display: flex;
      }

      .property.highlight .icon svg {
        width: 36px;
        height: 36px;
        color: #5e83d8;
      }

      /* custom button style of google map */
      .custom-map-control-button {
        background-color: #fff;
        border: 0;
        border-radius: 2px;
        box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
        margin: 10px;
        padding: 0 0.5em;
        font: 400 18px Roboto, Arial, sans-serif;
        overflow: hidden;
        height: 40px;
        cursor: pointer;
      }

      .custom-map-control-button:hover {
        background: rgb(235, 235, 235);
      }

      /* infoBubble용의 스타일 정의 */
      #info_content {
        padding: 0 1.2em;
        margin-top: 1.2em;
        margin-bottom: -1.2em;
      }

      /* google map의 infoBubble 글자 스타일 정의*/
      #info_content p {
        color: black;
        font-size: 1.2em;
        font-family: 'Nanum Gothic';
        line-height: 1.8em;
      }

      /* 아래 google map의 infowindow의 배경색을 변경하기 위한 css 정의 및 google map의 infowindow의
       top/bottom 여백을 없애기 위한 css 정의는 infoBubble 플러그인 사용시는 불필요함 */
      /* 아래는 google map의 infowindow의 배경색을 변경하기 위한 css 정의임 */
      /*
      .gm-style .gm-style-iw-d::-webkit-scrollbar-track,
      .gm-style .gm-style-iw-d::-webkit-scrollbar-track-piece,
      .gm-style .gm-style-iw-c,
      .gm-style .gm-style-iw-t::after {
        background: #CCF0E1;
      }
      .gm-style .gm-style-iw-tc::after {
        background: #CCF0E1;
      }
      */

      /* 아래는 google map의 infowindow의 top/bottom 여백을 없애기 위한 css 정의임 */
      .gm-style-iw-content {
        padding: 0;
        margin-top: 0;
        margin-bottom: -15px;
      }

      /* text_middle class는 image 뒤에 따라오는 문자의 세로 위치를 이미지 높이의 중앙으로 맞춤 */
      .text_middle {
        vertical-align: middle;
      }

      #conf_img:hover {
        background: url(prog_resources/images/configuration_hi.png) no-repeat;
      }

      #conf_img:active {
        background: url(prog_resources/images/configuration_active.png) no-repeat;
      }

      #info_img:hover {
        background: url(prog_resources/images/info-icon_hi.png) no-repeat;
      }

      #info_img:active {
        background: url(prog_resources/images/info-icon_active.png) no-repeat;
      }

      .btn {
        border-radius: 5px;
        font-size: 15px;
        line-height: 16px;
        height: 30px;
        white-space: nowrap;
        width: 100%;
        padding: 0.4em 1.5em 0.4em 1.5em;
        font-family: "맑은 고딕", "Nanum Gothic";
        display: inline-block;
        zoom: 1;
        color: #fff;
        text-align: center;
        position: relative;
        -webkit-transition: border 0.25s linear, color 0.25s linear,
          background-color 0.25s linear;
        transition: border 0.25s linear, color 0.25s linear,
          background-color 0.25s linear;
      }

      /*DARK BLUE BUTTON STYLES*/
      .btn.btn-dark-blue {
        background-color: #237fbc;
        border-color: #237fbc;
        -webkit-box-shadow: 0 3px 0 #1a5c87;
        box-shadow: 0 3px 0 #1a5c87;
      }
      /* .btn.btn-dark-blue:hover{background-color:#166ea8;}  */
      .btn.btn-dark-blue:hover {
        background-color: #237fbc;
        color: orange;
      }
      .btn.btn-dark-blue:active {
        top: 3px;
        outline: none;
        -webkit-box-shadow: none;
        box-shadow: none;
      }

      /*CONCRETE BUTTON STYLES*/
      .btn.btn-concrete {
        background-color: #7e8c8d;
        border-color: #7e8c8d;
        -webkit-box-shadow: 0 3px 0 #4e5b5c;
        box-shadow: 0 3px 0 #4e5b5c;
      }
      .btn.btn-concrete:hover {
        background-color: #6a7879;
      }
      .btn.btn-concrete:active {
        top: 3px;
        outline: none;
        -webkit-box-shadow: none;
        box-shadow: none;
      }

      .input-icon {
        position: absolute;
        left: 6px;
        top: calc(50% - 0.5em);
        /* Keep icon in center of input, regardless of the input height */
      }
      .login_input {
        padding-left: 20px;
        line-height: 1.5rem;
        font-size: 0.9rem;
      }
      .pwcheck_p {
        margin-left: 1.0rem;
        margin-top: 1.0rem;
        margin-bottom: -0.5rem;
        text-align: left;
        font-family: '맑은 고딕', 'Nanum Myeongjo' "
      }
      .input-wrapper {
        position: relative;
        margin-left: 1.0rem;
        margin-top: 0.4rem;
      }
      #pass_change {
        width: 300px;
        left: calc(50% - 120px);
        top: calc(50% - 150px);
      }

      /* .button-14는 alertDialog 하단의 '확인' 버턴에 대한 CSS임 */
      .button-14 {
        background-image: linear-gradient(#e7e8ea, #d7d9dc);
        border-color: #adb1b8 #a2a6ac #8d9096;
        border-style: solid;
        border-width: 1px;
        border-radius: 5px;
        box-shadow: rgba(255, 255, 255, 0.6) 0 1px 0 inset;
        box-sizing: border-box;
        color: #0f1111;
        cursor: pointer;
        display: inline-block;
        font-family: "맑은 고딕", "Nanum Gothic";
        font-size: 14px;
        line-height: 16px;
        height: 26px;
        outline: 0;
        overflow: hidden;
        padding: 0 3px;
        text-align: center;
        text-decoration: none;
        text-overflow: ellipsis;
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;
        white-space: nowrap;
      }
      .button-14:active {
        border-color: #e77600;
        box-shadow: rgba(228, 121, 17, 0.5) 0 0 3px 2px;
        outline: 0;
      }
      .button-14:active:hover {
        border-bottom-color: #a2a6ac;
      }
      .button-14:hover {
        border-color: #a2a6ac #979aa1 #82858a;
        background-image: linear-gradient(#fff8fa, #f7e9ec);
      }

      /* jquery-ui 대화상자 속성 정의 */
      .ui-dialog .ui-dialog-buttonpane {
        margin-top: 0.3em;
      }

      .ui-dialog > .ui-widget-header {
        font-size: 1.0rem;
      }

      #upload_dialog .modal-content2 {
        height: 100%;
        width: 100%;
        /* min-width: 690px; */
        overflow: hidden;
      }

      #upload_dialog .modal-body2 {
        background: #fff;
        /* height: relative; */
        width: calc(100% - 2px);
        height: calc(100% - 2px);
      }

      #upload_dialog .dialog-footer {
        position: absolute;
        bottom: 0;
        margin: 0;
        padding: 0.3rem 0.5rem;
        width: calc(100% - 10px);
      }

      #folder_sel_dialog .modal-content {
        /* padding: 20px; */
        /* height: 440px; */
        overflow: hidden;
        height: 100%;
        width: 100%;
      }

      #folder_sel_dialog .modal-body {
        background: #1A2227;
        height: relative;
        width: calc(100% - 2px);
        height: calc(100% - 2px);
      }

      #drag-and-drop-zone h3 {
        font-size: 1.0rem;
        font-weight: normal;
      }

      .flex_container {
        display: flex;
        height: calc(100% - 40px);
        /* footer 높이 공제 */
      }

      .flex_item:nth-child(1) {
        flex-shrink: 0;
        width: 220px;
      }

      .flex_item:nth-child(2) {
        flex-grow: 1;
      }

      .flex_container2 {
        display: flex;
        height: 100%;
        /* footer 높이 공제 */
      }

      .flex_item2:nth-child(1) {
        flex-shrink: 0;
        width: 10px;
      }

      .flex_item2:nth-child(2) {
        flex-grow: 1;
      }

      .tableBox2 {
        height: 430px;
        width: auto;
        margin: auto;
        margin-bottom: 0;
        padding-bottom: 0;
        overflow-y: auto;
      }

      #debug_msg, #debug_msg2  {
        padding-left: 0.5rem;
        background-color: #EDF5FD;
        border-radius: 5px;
        border: 1px solid #2d9fd9;
        line-height: 1.5rem;
        font-size: 0.9rem;
      }

      #debug_msg:focus {
        outline: none;
        border: 1px solid #a0d18c;
        color: #2d9fd9;
      }

      div.groupbox {
        width: 270px; /* 박스 너비, 지정하지 않으면 최대치 사용 */
        height: auto;
        /* margin: 2em 0 1em 0;	*/ /* 박스 주위 여백 */
        margin-left: 15px;
        margin-top: 10px;
        margin-bottom: 24px;
        font-size: 0.9rem;
        line-height: 130%;
        border: 1px solid #999; /* 박스 테두리 색 */
        border-radius: 5px;
        padding: 0 8px; /* 박스 여백(padding) */
      }
      div.groupbox h4 {
        line-height: 100%; /* 위쪽 테두리 선과 내용물 사이의 간격 */
        margin-bottom: 1px;
        padding-left: 8px; /* 왼쪽 테두리 선과 라벨 사이의 간격 */
        font-size: 0.95rem; /* h4 태그의 텍스트 크기 지정 */
        font-weight: normal; /* h4 태그의 텍스트 두께 지정 */
      }
      div.groupbox h4 span {
        /* background-color: #fff; */ /* 배경색과 동일해야 함 */
        background-color: #E1E6EA;
        color: #333; /* 라벨 텍스트 색 */
        padding: 0 4px; /* 라벨과 좌우 선 사이의 간격 */
        position: relative;
        top: -0.5em; /* 라벨의 상하 위치 조절 */
      }
      div.groupbox p {
        margin-top: -0.4em;
        margin-bottom: 0.8em;
        line-height: 120%;
      }
    </style>

    <script type="text/javascript" src="common_lib.js"></script>
    <script type="module">
      // SSE 지원용 sse.js 모듈 import (ref : https://www.npmjs.com/package/sse.js?activeTab=readme)
      import { SSE } from "./prog_resources/js_css/sse.js";
      window.SSE = SSE; // -> "SSE" class 명을 javascript에서 사용할 수 있게 함.

      /*  // 이 방식은 작동하지 않는다. 
      (async () => {
        const { SSE } = import("./prog_resources/js_css/sse.js");
        window.SSE = SSE;
      })();
      */
    </script>
    <script>
      "use strict";

      // const native_URL = "photo.link21.kr";
      const supported_types = ["jpg", "jpeg", "png", "gif", "mp4", "webm"];
      let server_On_Node = false; // js.Node 서버에서 gallery.js로 기동시 true 값을 가짐.
      let base_url;

      // 아래 4개의 url 값은 server_On_Node 값이 true일 경우 다른 값을 가짐.
      let move_files_url = "./php_scripts/move_files_json.php";
      let copy_files_url = "./php_scripts/copy_files_json.php";
      let delete_files_url = "./php_scripts/delete_files_json.php";
      let thumbnail_build_url = "./php_scripts/thumbnail_build3.php";
      // let host_name;

      let cur_directory; // 현재 보여주는 앨범에 해당하는 폴더 path

      let nanogallery2_initialized = false;
      let initiated_a_tag = false; // 디렉토리 트리 메뉴의 폴더명 부분을 클릭시 true (폴더명 앞어 아이을 클릭 시 false)
      let cur_selected_li; // 폴더 트리 메뉴에서 현재 선택한 메뉴 폴더에 해당하는 "li" 태그 (cur_a_object의 부모 요소)
      let cur_a_object; // 현재 선택한 메뉴 폴더의 "a" 태그 객체
      // let folder_selection_mode = false; // 미디어 파일 이동 시 이용하는 모드
      let cur_selected_li2; // 파일 이동시 선택한 메뉴 폴더에 해당하는 "li" 태그 (cur_a2_object의 부모 요소)
      let selectedItems = []; // gallery 창에서 select된 item 들의 title 값을 갖는 배열

      const for_move_files = 0;
      const for_copy_files = 1;
      let dialog_Usage = for_move_files;
      const dialog_Titles = ["이동시킬 파일(들)이 위치할 폴더 선택", "복사한 파일(들)이 위치할 폴더 선택"];

      let thumbnail_placeType = 0; // 갤러리 창에 thumbnail 배치 방식 (0 : 일정 높이, 1 : 일정 높이-페이지 단위, 2 : 일정 너비)
      let prev_thumbnail_placeType = 0; // 이전 작업 모드 시의 thumbnail 배치 방식
      let thumbnail_Width = 320;
      let thumbnail_Height = 200;
      let thumbnail_Rows = 3;

      let show_deleteIcon = false; // 갤러리 thumbnail 이미지에 "삭제" 아이콘 표시 여부
      let show_thumbnailBar = true; // viewer에 thumbnail bar 표시 여부/위치 ('none' : 표시 안함)
      let autostartShow = false; // vierer open시에 자동으로 슬라이드쇼를 개시 여부
      let slideshowInterval = 5000; // slide show 갱신 주기 (in millisecond)
      // 이미지 상하에 약간의 여백을 두기 위해 viewer에 표시되는 이미지 크기를 줄이려면 zoom_out_on_ImgDisplayed의
      // 값을 true로 한다.
      const zoom_out_on_ImgDisplayed = false;

      let map;
      let map_dialog;
      let map_dialog_was_shown = false;
      const use_ZulNsDialog = false; // google map 표시용으로 ZulNs의 dialog box를 사용 시 true
      // false -> jquery-ui의 modal dialog box 사용
      const use_AdvancedMarker = true; // google map에서 AdvancedMarker를 사용 시 true
      // false -> (deprcated 된) 기존의 marker 사용
      let cur_gps_latitude = 37.5115557;
      let cur_gps_longitute = 127.0595261;
      let cur_gps_date;
      let cur_media_title;
      let cur_ngy2Item; // 현재 정보보기창의 대상 item
      // let cur_media_list;
      let cur_gallery_html; // ** 파일 복사, 삭제 등으로 현재 갤러리 상태와 부합하지 않을 수 있음
      let cur_displaying_item;
      let gallery_folder_items = [];
      let folder_thumb_sizes = [];

      let dialog_response = "notOK";
      // let fieldId = 0;
      // let scroll_Top = 0;

      let modal_last_top = 150; // 미디어 파일 업로드 대화상자 세로 위치
      let modal_last_left = 400; // 미디어 파일 업로드 대화상자 가로 위치
      let up_count = 0; // 단일의 "업로드 시작" 버턴에 의한 업로드 카운터
      let uploaded_counter = 0; // 업로드 창이 열린 이후 닫히기 전까지 누적 업로드 카운터
      let enrolled_counter = 0; // 업로드 대기 파일 카운터
      let needThumbnailWork = false; // 업로드 창 닫힐 때 thumbnail 생성 작업 필요 여부부
      // let dynamic_item_counter = 0;

      let gif_player;
      let num_frames = 0; // gif 파일의 frame 수
      let play_dir = 0; // 0: upward, 1: downward
      let middle_index = 0; // gif 파일 전체 프레임 중 중간 위치의 프레임 번호
      // 한번에 전체 프레임의 절반씩 play 하도록 하기 위함

      const invalid_folder_names = [
        "@eaDir",
        "._DAV",
        "#snapshot",
        ".vscode",
        "node_modules",
        "php_scripts",
        "prog_resources",
        "_files",
        "temp",
        "thumbnail",
      ];
      const need_video_thumbnail = 1; // video 파일용의 thumbnail도 만들어야 할 경우 1
      const max_thumbnails_per_call = 32; // 한번의 thumbnail 생성 함수 호출로 만들 수 있는 thumbnail 수
      const no_queued_file = '<li class="text-muted text-center empty">업로드 대기 파일 없음.</li>';
      const no_queued_msg = "업로드 대기 파일이 없습니다.";
      const not_logged_in = "로그인 후에 필요한 작업을 할 수 있습니다.";
      const no_access_right = "현재 로그인한 사용자는 선택한 폴더에 대한 접근 권한이 없습니다.";
      const unworked_media =
        "주의) 썸네일 작성 한도에 도달하여 작업 못한 미디어가 있습니다.\n" +
        "미작업 미디어에 대하여는 추후 다시 현재 폴더를 선택 시에\n" +
        "자동으로 썸네일 작성을 진행합니다.";

      // html 생성용 상수
      const s1 = "<a data-ngid='";
      const s1_1 = "' href='";
      const s2 = "' data-ngthumb='";
      const s2_1 = "' data-ngtags='";
      const s3 = "'>";
      const s4 = "</a>\n";
      const tagDesc = ["folder", "file"];

      const html_click_a = '<a href="#" onclick="click_a(this);event.preventDefault();" >';

      let by_history_popup = false; // "click_a" 함수 호출이 실제 마우스 클릭에 의한 경우 "true"
      let post_file_upload = false; // 미디어 file 업로드 후 후속 함수 호출일 경우 "true"
      /*
      function loop_end() { // gif_player의 frame 끝에 도달시 callback 함수
        // console.log("reached loop end.");
      }
      */

      function gif_loaded() {
        // gif_player의 gif 파일 로드 완료시 callback 함수
        num_frames = gif_player.get_length();
        middle_index = Math.round((num_frames - 1) / 2);
      }

      function sleep(ms) {
        return new Promise((resolve) => setTimeout(resolve, ms));
      }

      async function forward_play(delay_per_frame, start_index) {
        if (start_index >= middle_index) {
          while (gif_player.get_current_frame() < num_frames - 1) {
            gif_player.move_relative(1);
            await sleep(delay_per_frame);
          }
        } else {
          while (gif_player.get_current_frame() < middle_index) {
            gif_player.move_relative(1);
            await sleep(delay_per_frame);
          }
        }
      }

      async function backward_play(delay_per_frame, start_index) {
        if (start_index > middle_index) {
          while (gif_player.get_current_frame() > middle_index) {
            gif_player.move_relative(-1);
            await sleep(delay_per_frame);
          }
        } else {
          while (gif_player.get_current_frame()) {
            gif_player.move_relative(-1);
            await sleep(delay_per_frame);
          }
        }
      }

      function play_gif(frame_interval) {
        let cur_frame_index = gif_player.get_current_frame();
        if (cur_frame_index == middle_index) {
          if (play_dir == 0) {
            forward_play(frame_interval, cur_frame_index);
          } else {
            backward_play(frame_interval, cur_frame_index);
          }

          return;
        }

        if (cur_frame_index == 0) {
          // gif_player.play();
          play_dir = 0;
          forward_play(frame_interval, cur_frame_index);
        } else {
          play_dir = 1;
          backward_play(frame_interval, cur_frame_index);
        }
      }

      function set_beforeClass(html_dir, class_name) {
        // 폴더 트리 메뉴의 폴더명 앞에 폴더 모양의 아이콘을 두는데 폴더가 펼쳐져 있을 때
        // (= 하위 폴더가 보이는 상태)는 내부에 "-" 기호가 있는 아이콘을, 접힌 상태(하위 폴더가
        //  숨겨진 상태)에서는 내부에 "+" 기호가 있는 아이콘 보이도록 class를 다르게 부여한다.
        if (html_dir == null) {
          return;
        }

        if (class_name != "plus" && class_name != "minus") {
          return;
        }

        if (class_name == "plus") {
          if (html_dir.classList.contains("plus")) {
            return;
          }
          if (html_dir.classList.contains("minus")) {
            html_dir.classList.remove("minus");
          }

          html_dir.classList.add("plus");
        } else {
          if (class_name == "minus") {
            if (html_dir.classList.contains("minus")) {
              return;
            }
            if (html_dir.classList.contains("plus")) {
              html_dir.classList.remove("plus");
            }

            html_dir.classList.add("minus");
          }
        }
      }

      function placeTypeSelect() {
        let place_type_element = document.getElementById("place_type_sel");
        let thumbnail_place_type_ = place_type_element.selectedIndex;

        /*
        // let cur_html = document.getElementById("nanogallery2").innerHTML;
        if (cur_gallery_html) {
          renewGallery(base_url, cur_gallery_html); // gallery 창 갱신 요청
        }
        */
        if (thumbnail_place_type_ == 0 || thumbnail_place_type_ == 1) {
          if (thumbnail_place_type_ == 0) {
            $("#thumbnail_rows_sel").attr("disabled", true);
          } else {
            $("#thumbnail_rows_sel").attr("disabled", false);
          }
          $("#thumbnail_height_sel").attr("disabled", false);
          $("#thumbnail_width_sel").attr("disabled", true);
        } else {
          $("#thumbnail_rows_sel").attr("disabled", true);
          $("#thumbnail_height_sel").attr("disabled", true);
          $("#thumbnail_width_sel").attr("disabled", false);
        }
      }

      function get_full_path(html_element) {
        if (html_element == null) {
          return "";
        }

        let file_path;
        if (html_element.id == "root_li" || html_element.id == "root_li_2") {
          file_path = "./";
          return file_path;
        }

        file_path = html_element.innerText;

        let sep_pos = file_path.indexOf("\n");
        if (sep_pos !== -1) {
          file_path = file_path.substring(0, sep_pos);
        }
        let pElement = html_element.parentElement;

        if (pElement.className != "top_dir") {
          while (pElement) {
            if (pElement.className == "sub_dir") {
              pElement = pElement.parentElement;
              continue;
            }

            if (pElement.className == "top_dir") {
              pElement = null;
              file_path = "./" + file_path;
              continue;
            }

            let add_path = pElement.innerText;
            sep_pos = add_path.indexOf("\n");
            if (sep_pos !== -1) {
              add_path = add_path.substring(0, sep_pos);
            }

            file_path = add_path + "/" + file_path;
            pElement = pElement.parentElement;
          }
        } else {
          file_path = "./" + file_path;
        }

        return file_path;
      }

      // 미디어 파일 목록 데이터를 이용하여 갤러리 창에 동적으로 추가될 DOM 요소에 대한
      // html 구문을 만든다.
      function build_html(media_list, media_folder_, exclude_folder = false) {
        let html = "";
        let html_folder = "";
        let html_file = "";
        let media_folder = media_folder_.replace("./", ""); // 선두의 './' 제거
        let arrayLength = Object.values(media_list).length;
        let media_plane = document.getElementById("nanogallery2");
        if (arrayLength == 0) {
          media_plane.innerHTML = "";
          return;
        }

        let media_file;
        let thumbnail_file;
        let media_type;
        let tags; // media type이 "folder"인 경우와 미디어 파일인 경우를 구분짓기 위해 사용
        let has_thumbnail;
        let html_item;
        let sn = 0;
        let media_dir;

        for (let i = 0; i < arrayLength; i++) {
          if (media_folder != "") {
            media_dir = media_folder + "/";
          } else {
            media_dir = "";
          }

          media_file = media_dir + media_list[i].name;
          media_type = media_list[i].type;
          has_thumbnail = media_list[i].is_thumbnail;
          if (media_type == "folder") {
            if (exclude_folder) continue;

            if (has_thumbnail) {
              thumbnail_file = media_dir + "thumbnail/" + media_list[i].name + ".jpg";
            } else {
              thumbnail_file = "prog_resources/images/folder_image.png";
            }
            tags = tagDesc[0];
          } else if (media_type == "image") {
            if (has_thumbnail) {
              thumbnail_file = media_dir + "thumbnail/" + media_list[i].name;
            } else {
              thumbnail_file = "prog_resources/images/default_thumbnail.jpg";
            }
            tags = tagDesc[1];
          } else if (media_type == "video") {
            if (has_thumbnail) {
              thumbnail_file = media_dir + "thumbnail/" + media_list[i].name + ".jpg";
            } else {
              thumbnail_file = "prog_resources/images/video_thumbnail.jpg";
            }
            tags = tagDesc[1];
          }

          sn++;
          html_item =
            s1 +
            "ID_" +
            sn.toString() +
            s1_1 +
            media_file +
            s2 +
            thumbnail_file +
            s2_1 +
            tags +
            s3 +
            media_list[i].name +
            s4;

          if (tags == tagDesc[0]) {
            html_folder += html_item;
          } else {
            html_file += html_item;
          }
          // html += html_item;
        }

        html = html_folder + html_file;
        renewGallery(base_url, html); // gallery 창 갱신 요청
      }

      function refreshGallery(jsonData) {
        if (jsonData.item_list.length == 0) return;

        // ** 아래와 같은 문장으로 읽어 온 innerHTML 은 설정 시 내용과 전혀 다르다.
        // let media_plane = document.getElementById("nanogallery2");
        // let innerHTML = media_plane.innerHTML;
        // 또한 cur_gallery_html을 이용하는 방법은 파일 이동, 삭제 등으로 현재 상태와 어긋날 수 있어 적용 불가
        // let html_items = cur_gallery_html.split("</a>");

        let new_thumbnails = [];
        let num_changed = 0;
        let ngy2data = $("#nanogallery2").nanogallery2("data");

        let file_items = jsonData.item_list;
        file_items.forEach(function (file_item) {
          if (file_item.process_result == 1)
            // thumbnail 생성 성공 ?
            $.each(ngy2data.items, function (index, ng2_item) {
              let media_file_name = ng2_item.title;
              if (media_file_name == file_item.name) {
                let thumb_file = file_item.thumbnail;
                let new_url = base_url + cur_directory.substr(2) + "/thumbnail/" + thumb_file;
                /* ngy2data.items[index].thumbs.url.l1.xs = new_url;
                ngy2data.items[index].thumbs.url.l1.sm = new_url;
                ngy2data.items[index].thumbs.url.l1.me = new_url;
                ngy2data.items[index].thumbs.url.l1.la = new_url;
                ngy2data.items[index].thumbs.url.l1.xl = new_url;
                ngy2data.items[index].thumbs.url.lN.xs = new_url;
                ngy2data.items[index].thumbs.url.lN.sm = new_url; */
                ngy2data.items[index].thumbs.url.lN.me = new_url;
                /* ngy2data.items[index].thumbs.url.lN.la = new_url;
                ngy2data.items[index].thumbs.url.lN.xl = new_url; */

                num_changed += 1;
                return false; // = break 역할
              }
            });
        });

        // 1. 위에서 ng2_item.thumbs.url 의 값을 설정 후 아래와 같이 nanogallery2("refresh") 함수를
        //   이용하는 방법 (-> 변경된 내용으로 화면을 보여주지 않아 적용 불가.)
        //  if (num_changed) $("#your_nanogallery2").nanogallery2("refresh");

        // 2. get_media_list 함수를 이용하는 방법
        //  if (num_changed) get_media_list(cur_directory, true);

        // 3. 역으로 nanogallery2의 현재 데이터로 부터 html을 구성하여 이용하는 방법
        if (num_changed > 0) {
          let gallery_html = build_gallery_html();
          renewGallery(base_url, gallery_html);
        }
      }

      function update_progress(percent, color, active) {
        color = typeof color === "undefined" ? false : color;
        active = typeof active === "undefined" ? true : active;

        let bar = $("#progress_div").find("div.progress-bar");

        bar.width(percent + "%").attr("aria-valuenow", percent);
        bar.toggleClass("progress-bar-striped progress-bar-animated", active);

        if (percent === 0) {
          bar.html("");
        } else {
          bar.html(percent + "%");
        }

        if (color !== false) {
          bar.removeClass("bg-success bg-info bg-warning bg-danger");
          bar.addClass("bg-" + color);
        }
      }

      function post_thumbnail_build(jsonData) {
        if (jsonData.result_code < 0) {
          // if (retStatus.substring(0, 4) == "실패 :") {
          // alert(retStatus);
          alert("에러 : thumbnail 생성 중 에러 발생함. (에러 코드 : " + jsonData.result_code + ")");
        } else {
          if (jsonData.num_success > 0) {
            // 생성한 thumbnail이 있으면,
            if (jsonData.src_folder == "." + cur_directory) {
              // 폴더 이동이 없었으면,
              let ngy2data = $("#nanogallery2").nanogallery2("data");
              let fields = document.getElementsByName("field_item");
              if ("lightbox" in ngy2data) {
                if (!ngy2data.lightbox.viewerDisplayed) {
                  // gallery 화면 보기 상태이면,
                  // $("#file_para").attr("style", "display:none;");
                  // let is_folder_mode = $("#folder_para").css("display");
                  if (fields[0].checked) refreshGallery(jsonData); // 작업 대상이 "폴더" 이면,
                }
              } else {
                if (fields[0].checked) refreshGallery(jsonData); // 작업 대상이 "폴더" 이면,
              }
            }
          }
        }
      }

      function parseEventChunk(chunk) {
        if (!chunk || chunk.length === 0) {
          return null;
        }

        const e = { id: null, retry: null, data: null, event: null };
        chunk.split(/\n|\r\n|\r/).forEach(function (line) {
          const index = line.indexOf(":");
          let field, value;
          if (index > 0) {
            // only first whitespace should be trimmed
            const skip = line[index + 1] === " " ? 2 : 1;
            field = line.substring(0, index);
            value = line.substring(index + skip);
          } else if (index < 0) {
            // Interpret the entire line as the field name, and use the empty string as the field value
            field = line;
            value = "";
          } else {
            // A colon is the first character. This is a comment; ignore it.
            return;
          }

          if (!(field in e)) {
            return;
          }

          // consecutive 'data' is concatenated with newlines
          if (field === "data" && e[field] !== null) {
            e["data"] += "\n" + value;
          } else {
            e[field] = value;
          }
        });

        let lastEventId = null;
        if (e.id !== null) {
          lastEventId = e.id;
        }

        const event = new CustomEvent(e.event || "message");
        event.id = e.id;
        event.data = e.data || "";
        event.lastEventId = lastEventId;
        return event;
      }

      async function build_thumbnail(image_folder, no_wait = true, file_list = null) {
        let get_video_thumbnail_;
        /*
        	if (host_name == native_URL) {
        	  // synology native server는 h264 decoding을 지원하지 않으므로 동영상에 대한
        	  // 섬네일 생성은 skip 처리하도록 설정한다.  => 지원함 (명령문 "ffmpeg" -> "ffmpeg7" 사용)
        		get_video_thumbnail_ = 0;
        	} else {
        		get_video_thumbnail_ = need_video_thumbnail;
        	}  */
        get_video_thumbnail_ = need_video_thumbnail;
        let json = {};
        json.image_dir = "." + image_folder;
        json.get_video_thumbnail = get_video_thumbnail_;
        json.video_thumbnail_base = "../prog_resources/images/video_thumbnail_base.png";
        json.folder_thumbnail_base = "../prog_resources/images/folder_thumbnail_base.png";
        if (file_list) {
          json.file_list = file_list;
        } else {
          json.file_list = [];
        }

        let media_count = 0;
        let num_processed = 0;
        let percent = 0;
        let json_data = JSON.stringify(json);

        // closeAlertDialog();
        document.getElementById("num_media").value = "0";
        document.getElementById("num_processed").value = "0";
        document.getElementById("media_onwork").value = "";
        update_progress(0, "", true);

        $("#progress_dialog").dialog("option", "title", "썸네일 이미지 작성 . . .").dialog("open");

        let es;
        /*
        if (server_On_Node) {
          // 1. javascript 내장 API "EventSource"를 이용하는 방법 ( parameter 전달은 GET 방식만 가능 )
          // **** 주의 : GET 방식으로 파라미터 데이터를 보낼 경우 URL 길이 제한으로 파라미터 값으로
          //            주어지는 json_data 데이터 길이는  대략 1900자 이내로 하여야 문제를 방지할 수 있다.
          if (json_data.length > 1900) {
            // 파일 목록을 포함하지 않는 형태로 강제변경
            json.file_list = [];
            json_data = JSON.stringify(json);
          }
          es = new EventSource(thumbnail_build_url + "?jsondata=" + json_data);
        } else */
        if (SSE) {
          // 2. SSE 지원용 sse.js 모듈을 활용한 방식 ( POST 방식 가능 )
          // **** synology nas 시스템의 웹서버 이용시에 SSE 적용을 할려면 호스트 "photo.link21.kr"의
          // 서비스 설정에서 HTTP 백앤드 서버를 "Nginx"로 하여야 함. ("Apache"로 하면 message가 batched 형태로
          // 전체 메시지가 한번에 수신되어 실시간 진행상황 업데이트가 안됨. -> "thumbnail_build3.php" 파일의
          // 아래 문장을 변경하면 해결됨
          //    define('FORCE_FILL_BUFFER', false); => define('FORCE_FILL_BUFFER', true); )
          es = new SSE(thumbnail_build_url, {
            headers: { "Content-Type": "application/json", Accept: "text/event-stream" },
            payload: json_data,
            method: "POST",
          });
        }

        if (es) {
          // event listener - a message is received
          es.addEventListener("message", function (e) {
            if (e.lastEventId == "NUM_MEDIA") {
              media_count = parseInt(e.data);
              document.getElementById("num_media").value = media_count;
            } else if (e.lastEventId == "NUM_PROCESSED") {
              num_processed = parseInt(e.data);
              document.getElementById("num_processed").value = num_processed;
              if (media_count > 0 && num_processed > 0) {
                if (num_processed >= media_count) {
                  update_progress(100, "success", false);
                } else {
                  percent = Math.round((num_processed * 100) / media_count);
                  update_progress(percent);
                }
              }
            } else if (e.lastEventId == "MEDIA_ONWORK") {
              document.getElementById("media_onwork").value = e.data;
              if (num_processed == 0) {
                // 이제 막 작업을 개시한 상황이면
                update_progress(0, "", true);
              }
            } else if (e.lastEventId == "FINISHED") {
              let report = JSON.parse(e.data);
              // update_progress(100, "success", false);
              es.close();

              $("#progress_dialog").dialog("option", "title", "썸네일 이미지 작성 . . . 종료");
              document.getElementById("media_onwork").value = "";
              if (num_processed != media_count) {
                update_progress(percent, "warning", false);
                post_thumbnail_build(report);
                setTimeout(() => {
                  alert(unworked_media);
                }, 500);
              } else {
                post_thumbnail_build(report);
              }
            }
          });

          es.addEventListener("error", function (e) {
            $("#progress_dialog").dialog("option", "title", "썸네일 이미지 작성 . . . 중단");
            update_progress(0, "danger", false);
            es.close();
          });
        } else {
          // 3. 인터넷을 뒤져서 찾은 fetch 함수를 이용한 방식 ( POST 방식 가능 )
          //   앞 2. 방식에 문제가 발생한 경우(sse.js 누락 등)에만 적용되며,
          //   이 방식은 하나의 수신 message에 여러 개의 서버쪽 send_message 내용이 합쳐서 들어와서
          //   (원래 그런건지 ? ) sse.js의 코드를 일부 이용하여 전처리 과정을 거쳐야 한다.

          const response = await fetch(thumbnail_build_url, {
            method: "POST",
            cache: "no-cache",
            keepalive: true,
            headers: {
              "Content-Type": "application/json",
              Accept: "text/event-stream",
              // "Content-Type": "text/event-stream",
            },
            body: json_data,
          });

          const reader = response.body.pipeThrough(new TextDecoderStream()).getReader();
          let finished = false;
          let sse_residue = "";

          try {
            while (true) {
              const { value, done } = await reader.read();
              if (done) {
                $("#progress_dialog").dialog("option", "title", "썸네일 이미지 작성 . . . 종료");
                break;
              }

              // 하나의 reader 동작에 여러 event message가 들어 올 수 있으므로
              // message 단위로 쪼개어 처리한다.
              let messages = (sse_residue + value).split(/(\r\n\r\n|\r\r|\n\n)/g);
              //
              // We assume that the last chunk can be incomplete because of buffering or other network effects,
              // so we always save the last part to merge it with the next incoming packet
              //
              const lastPart = messages.pop();

              messages.forEach(function (part) {
                if (part.trim().length > 0) {
                  let e = parseEventChunk(part);
                  if (e.lastEventId == "NUM_MEDIA") {
                    media_count = parseInt(e.data);
                    document.getElementById("num_media").value = media_count;
                  } else if (e.lastEventId == "NUM_PROCESSED") {
                    num_processed = parseInt(e.data);
                    document.getElementById("num_processed").value = num_processed;
                    if (media_count > 0 && num_processed > 0) {
                      if (num_processed >= media_count) {
                        update_progress(100, "success", false);
                      } else {
                        percent = Math.round((num_processed * 100) / media_count);
                        update_progress(percent);
                      }
                    }
                  } else if (e.lastEventId == "MEDIA_ONWORK") {
                    document.getElementById("media_onwork").value = e.data;
                    if (num_processed == 0) {
                      // 이제 막 작업 개시한 상황이면
                      update_progress(0, "", true);
                    }
                  } else if (e.lastEventId == "FINISHED") {
                    let report = JSON.parse(e.data);
                    reader.cancel(); // completely finished with the stream and don't need any more data

                    $("#progress_dialog").dialog("option", "title", "썸네일 이미지 작성 . . . 종료");
                    document.getElementById("media_onwork").value = "";
                    if (num_processed != media_count) {
                      update_progress(percent, "warning", false);
                      post_thumbnail_build(report);
                      setTimeout(() => {
                        alert(unworked_media);
                      }, 500);
                    } else {
                      post_thumbnail_build(report);
                    }

                    finished = true;
                  }
                }
              });

              sse_residue = lastPart;
              if (finished) break;
            }
          } catch (error) {
            $("#progress_dialog").dialog("option", "title", "썸네일 이미지 작성 . . . 중단");
            update_progress(0, "danger", false);
            // console.error("Error reading stream:", error);
          } finally {
            reader.releaseLock();
          }
        }

        /*
        // 4. SSE를 지원하지 않는 기존의 ajax call을 이용한 방식 (진행경과를 알 수 없다.)
        $.ajax({
          url: thumbnail_build_url, // 요청 할 주소 ( => thumbnail_build2.php)
          async: no_wait, // 시간이 많이 걸리는 작업을 하므로 비동기 요청으로 한다.
          type: "POST", // GET, PUT
          data: json_data,
          contentType: "application/json",  // **** 주.1 참조 
          // 주.1) 이 문장을 빼면 node 서버에서 JSON.stringify(json) 시에 에러가 발생한다.
          dataType: "json", // json, xml, text, script, html
          success: function (data) {
            // 요청 완료 시
            let jsonData = {};
            jsonData = data;

            if (jsonData.result_code < 0) {
              // if (retStatus.substring(0, 4) == "실패 :") {
              // alert(retStatus);
              alert("에러 : thumbnail 생성 중 에러 발생함. (에러 코드 : " + jsonData.result_code + ")");
            } else {
              if (jsonData.num_success > 0) {
                // 생성한 thumbnail이 있으면,
                if (jsonData.src_folder == "." + cur_directory) {
                  // 폴더 이동이 없었으면,
                  let ngy2data = $("#nanogallery2").nanogallery2("data");
                  let fields = document.getElementsByName("field_item");
                  if ("lightbox" in ngy2data) {
                    if (!ngy2data.lightbox.viewerDisplayed) {
                      // gallery 화면 보기 상태이면,
                      // $("#file_para").attr("style", "display:none;");
                      // let is_folder_mode = $("#folder_para").css("display");
                      if (fields[0].checked) refreshGallery(jsonData); // 작업 대상이 "폴더" 이면,
                    }
                  } else {
                    if (fields[0].checked) refreshGallery(jsonData); // 작업 대상이 "폴더" 이면,
                  }
                }
              }
            }

            closeAlertDialog();
          },
          error: function (request, status, error) {
            closeAlertDialog();
            // 요청 실패
            alert("code:" + request.status + "\n" + "message:" + request.responseText + "\n" + "error:" + error);
          },
        });
        */
      }

      function is_first_level_folder(media_folder) {
        if (media_folder == "./") {
          return false; // top folder
        }

        let check_folder = media_folder.substring(2); // 선두의 "./" 제거
        let slash_pos = check_folder.indexOf("/");
        if (slash_pos == -1) {
          return true;
        } else {
          return false;
        }
      }

      function get_media_list(media_directory, skip_thumbnail_build = false) {
        // media_directory 폴더에 있는 image 파일과 mp4 video 파일의 목록을 얻는 함수
        if (!media_directory) {
          return false;
        }

        let arrayLength = 0;
        let arrayData = [];
        let folder_files = 0;
        let image_files = 0;
        let video_files = 0;
        let thumbnail_files = 0;
        let need_thumbnails = 0;

        // location.search = "?folder=" + "'" + encodeURIComponent(media_directory.substring(2)) + "'";

        $.ajax({
          url: "./php_scripts/get_media_list_json.php", // 요청 할 주소
          async: false,
          type: "GET", // type: 'POST', // GET, PUT
          data: {
            // 전송할 데이터
            media_dir: "." + media_directory, // 실행할 php script가 하위 폴더 "php_scripts"에 있으므로..
            get_info_for: 0, // 미디어에 대한 세부 정보는 불필요함.
          },
          dataType: "json", // xml, text, script, html
          success: function (data) {
            // 요청 완료 시
            let jsonData = {};
            jsonData = data;
            let retStatus = jsonData.status;
            if (retStatus != "success") {
              alert(retStatus);
              return false;
            }

            arrayData = jsonData.contents;
            // arrayData는 Object화가 되어 [key: value] 꼴이 되기 때문에 length 속성을 사용할 수 없다.
            arrayLength = Object.values(arrayData).length;
            folder_files = jsonData.folder_files;
            image_files = jsonData.image_files;
            video_files = jsonData.video_files;
            thumbnail_files = jsonData.thumbnail_files;
            need_thumbnails = jsonData.need_thumbnails;

            if (has_access_right()) {
              document.getElementById("show_delete_icon").checked = show_deleteIcon;
              document.getElementById("show_delete_icon").removeAttribute("disabled");
            } else {
              document.getElementById("show_delete_icon").checked = false;
              document.getElementById("show_delete_icon").setAttribute("disabled", true);
            }
          },
          error: function (request, status, error) {
            // 요청 실패
            alert("code:" + request.status + "\n" + "message:" + request.responseText + "\n" + "error:" + error);
            return false;
          },
        });

        // 브라우저의 전/후 페이지 이동 버턴을 눌렀을 경우를 대비하여 현재 폴더를 주소 기록에
        // 남기도록 한다.
        let search_str = "?folder=" + encodeURIComponent(media_directory.substring(1));
        if (by_history_popup || post_file_upload) {
          by_history_popup = false;
          post_file_upload = false;
        } else {
          if (nanogallery2_initialized)
            history.pushState(
              "", // = state,
              document.title,
              window.location.pathname + search_str
            );
          else
            history.replaceState(
              "", // = state,
              document.title,
              window.location.pathname + search_str
            );
        }

        // 1차 하위 폴더의 경우 로그인 하지 않은 상태이면 폴더 이미지를 표시하지
        // 않도록 한다.
        // ** rebuildGallery 함수를 이용할 경우 특정 앨범("은성이-정훈이 앨범" > "2014년 2월 동탄")에
        //    포함된 동영상 파일이 이미지 뷰어로 뜨지 않는 문제가 발생함.
        let media_plane = document.getElementById("nanogallery2");
        if (arrayLength != 0) {
          if (is_first_level_folder(media_directory)) {
            if (!logged_in) {
              if (image_files + video_files == 0) {
                // media_plane.innerHTML = "";
                empty_nanogallery2_data(); // => 위 문장 대신에 nanogallery2의 data만 지운다.
                $("#nanogallery2").nanogallery2("resize");
                $("#no_media_msg").css("display", "block");
              } else {
                $("#no_media_msg").css("display", "none");
                if (!nanogallery2_initialized) {
                  build_html(arrayData, media_directory, true);
                } else {
                  rebuildGallery(media_directory, arrayData, true);
                }
              }
            } else {
              $("#no_media_msg").css("display", "none");
              if (!nanogallery2_initialized) {
                build_html(arrayData, media_directory);
              } else {
                rebuildGallery(media_directory, arrayData, false);
              }
            }
          } else {
            $("#no_media_msg").css("display", "none");
            if (!nanogallery2_initialized) {
              build_html(arrayData, media_directory);
            } else {
              rebuildGallery(media_directory, arrayData, false);
            }
          }
        } else {
          // media_plane.innerHTML = "";
          // renewGallery(base_url, "");  // 이 문장을 쓰면 nanogallery2가 초기화 전 상태가 된다.
          empty_nanogallery2_data(); // => 위 문장 대신에 nanogallery2의 data만 지운다.
          $("#nanogallery2").nanogallery2("resize");
          $("#no_media_msg").css("display", "block");
          // return false;
        }

        // 이전 폴더를 보면서 조정한 수직 스크롤 바 위치를 top 위치롤 되돌린다.
        // if (hasScroll(document.body, "vertical"))
        // $("html, body").scrollTop(0);
        let ngy2data = $("#nanogallery2").nanogallery2("data");
        if (ngy2data.items.length > 1) $("html, body").animate({ scrollTop: 0 }, 400);

        // thumbnail 파일이 만들어져 있지 않은 경우에는 자동으로 thumbnail 파일을 만들어 주도록 요청한다.
        // 단, 한번에 모든 미디어 파일에 대한 thumbnail 파일을 작성할 경우 서버에 부하가 걸리고 에러 발생이
        // 우려되므로 thumbnail 파일을 만드는 thumbnail_build.php 스크립트에서는 한번 호출시 32개를 한도로
        // thumbnail 파일을 만든다.
        // 폴더 내의 하위 폴더에 대한 thumbnail도 생성하는데 폴더 모습을 연상케하는 베이스 이미지
        // (folder_thumbnail_base.png)에 하위 폴더 내의 첫번째 이미지 파일을 합성하여 만든다.
        // 그리고 mp4 video 파일에 대한 thumbnail은 image 파일에 대한 thumbnail과 쉽게 구분이 되도록
        // 재생 1초 시점의 영상 이미지에 영상 프레임 이미지('video_thumbnail_base.png')를 합성하여 만든다.
        // ** thumbnail_build.php에서 비디오 파일에서 캡쳐 이미지를 추출하는 작업은 ffmpeg를 호출하여
        //    수행하는데 서버 환경에 따라 ffmpeg 실행파일 경로가 다르므로 이 부분은 실제 서버 환경에
        //    맞추어 수정하여야 함.
        //    현재는 필자가 사용 중인 서버 환경에 맞추어,
        //      - synology nas 일 때 : '/usr/local/bin/ffmpeg'
        //      - WAMPServer 일 때 : 'd:/ffmpeg/bin/ffmpeg.exe'
        //    로 맞추도록 프로그램 되어 있음

        /*
        // thumbnail_build.php 스크립트에서 폴더 탐색을 중복 실행하지 않도록 할려면
        // get_media_list_json.php 호출 시에 얻은 파일목록 데이터를 이용하도록
        // build_thumbnail 함수 및 thumbnail_build.php 스크립트의 파라미터 수수를
        // 위한 수정을 하고,아래 문장을 활성화한다.
        if (thumbnail_files < image_files + video_files + folder_files) {
          let file_list_ = [];
          let sn = 0;
          $.each(cur_media_list, function (index, file_item) {
            if (file_item["is_thumbnai"] == false) {
              sn += 1;
              file_item.number = sn;
              file_list_.push(file_item);
            }

            // 1회의 함수호출로 만들 수 있는 thumbnail 수 제한
            if (sn == max_thumbnails_per_call) return false; // = break 역할
          });

          build_thumbnail(media_directory, true, file_list_);
          */
        // if (thumbnail_files < image_files + video_files + folder_files) {
        if (need_thumbnails > 0) {
          if (!skip_thumbnail_build) {
            // alertDialog("알림", "썸네일 파일을 생성 중 입니다.");
            build_thumbnail(media_directory, true, arrayData);
          }
        }

        return arrayData;
      }

      function empty_nanogallery2_data() {
        // nanogallery2의 갤러리 데이터를 모두 삭제한다.
        let ngy2data = $("#nanogallery2").nanogallery2("data");
        $.each(ngy2data.items, function (index, ng2_item) {
          if (ng2_item.kind == "album" || ng2_item.deleted) {
            return true; // continue
          }

          // ** ngy2data.gallery.items는 뒤의 item 삭제 함수 호출 시에 해당 item이 바로 삭제된다.
          ngy2data.items[index].delete();
          // 위의 delete 함수를 실행하면 ng2data.items 배열에서는 실제 삭제되지는 않고, 해당 item의
          // "deleted" property 값이 true로 설정되며, ngy2data.gallery.items 배열에서는 해당 item이
          // 바로 삭제되어 갯수가 하나 줄어든다. (ngy2data.gallery.items = 갤러러 창에 표시되는 요소)
        });

        ngy2data.items.splice(1); // 원래의 갤러리 요소 삭제 ('album'만 보존)
      }

      // get_media_list 함수에 의해 얻어진 목록을 이용하여 갤러리 창을 재구성하는 함수.
      function rebuildGallery(media_dir, item_list, exclude_folder = false) {
        // nanogallery2의 갤러리 데이터를 모두 삭제한다.
        empty_nanogallery2_data();
        let ngy2data = $("#nanogallery2").nanogallery2("data");

        let index = 0;
        let albumID = "0";
        let thumb_src;

        let instance = $("#nanogallery2").nanogallery2("instance");

        let mediaURL_;
        if (media_dir == "./") {
          mediaURL_ = base_url.substring(0, base_url.length - 1); // 끝의 "/" 제거
        } else {
          mediaURL_ = base_url + media_dir.substring(2); // 선두의 "./" 제거
        }

        // create the new item for folder thumbnail then add to nanogallery2 instance
        let ID;
        let k = 0;
        item_list.forEach(function (item) {
          let media_file = media_dir + item.name;
          let media_type = item.type;
          let tags = "file";
          if (media_type == "folder") tags = "folder";
          if (exclude_folder && media_type == "folder") return;

          // create the new item
          ID = "ID_" + ngy2data.items.length;
          // Parameters: instance, title, description, ID, albumID, kind, tags
          let newItem = NGY2Item.New(instance, item.name, "", ID, albumID, "image", tags);

          // define thumbnail -> image displayed in the gallery
          let width = 0;
          let height = 0;
          if (item.is_thumbnail) {
            if (item.type == "video" || item.type == "folder") {
              thumb_src = mediaURL_ + "/thumbnail/" + item.name + ".jpg";
            } else if (item.type == "image") {
              thumb_src = mediaURL_ + "/thumbnail/" + item.name;
            }
            width = item.thumb_w;
            height = item.thumb_h;
          } else {
            if (item.type == "image") {
              thumb_src = base_url + "prog_resources/images/default_thumbnail.jpg";
              width = 300;
              height = 200;
            } else if (item.type == "video") {
              thumb_src = base_url + "prog_resources/images/video_thumbnail.jpg";
              width = 300;
              height = 200;
            } else if (item.type == "folder") {
              thumb_src = base_url + "prog_resources/images/folder_thumbnail_base.png";
              width = 180;
              height = 240;
            }
          }

          newItem.thumbSet(thumb_src, width, height);

          // define URL of the media to display in lightbox
          let mediaURL = mediaURL_ + "/" + item.name;
          let mediaType = "img";
          if (item.type == "video") mediaType = "video";
          newItem.setMediaURL(mediaURL, mediaType); // mediaType : 'img', 'iframe', 'video'

          // currently displayed album ?
          // if (ngy2data.items[ngy2data.gallery.albumIdx].GetID() == 0) {
          // add new item to current Gallery Object Model (GOM)
          newItem.addToGOM();
          k += 1;
          // }
        });

        let selectable = $("#nanogallery2").nanogallery2("option", "thumbnailSelectable");
        if (selectable) $("#nanogallery2").nanogallery2("option", "thumbnailSelectable", false);
        $("#nanogallery2").nanogallery2("resize");
      }

      function setup_form_field() {
        // 작업 대상을 "파일"로 전환시 실행 함수
        // folder_selection_mode = false;
        $("#folder_para").attr("style", "display:block;");
        $("#file_para").attr("style", "display:none;");
        if (has_access_right()) {
          $("#form_field :input").prop("disabled", false);
        } else {
          $("#form_field :input").prop("disabled", true);
        }
      }

      function opencloseSubDir(clicked_li) {
        // 폴더 트리의 폴더명 앞의 <li> tag 요소인 marker에 click 했을 때 처리 함수.
        // 이 함수는 폴더명 앞의 marker가 아닌 <a> tag 요소인 폴더명에 clcik 시에도 호출되므로
        // event target을 구분하여 처리해야 한다.
        // <a> tag 요소인 폴더명에 clcik 시에는 "initiated_a_tag" 변수가 true 값을 갖는다.
        if (use_ZulNsDialog) {
          let x = document.getElementById("dialog");
          if (window.getComputedStyle(x).display !== "none") {
            return; // 지도를 보여 주는 dialog 창이 보여지고 있는 동안에는 폴더 트리에 대한 조작을 막음.
          }
        }

        if (clicked_li.id == "root_li") {
          // 최상단 루트 폴더에 대한 marker 또는 <a> tag에 클릭 했을 때
          if (!initiated_a_tag) {
            // marker를 클릭한 경우 루트 폴더는 display 속성을 변경하지 않으므로 더 처리할
            // 내용이 없다.
            return;
          }

          // 이하는 루트 폴더의 <a> tag에 클릭한 경우에만 수행된다.
          initiated_a_tag = false;
          if (cur_directory != "./") {
            // '선택한 폴더'를 변경하는 처리를 한다.
            play_gif(50);
            $("#field_folder").prop("checked", true);
            cur_directory = "./";
            get_media_list("./");
            document.getElementById("media_path").value = "/";
            cur_selected_li.classList.remove("selected");
            cur_selected_li = clicked_li;
            cur_selected_li.classList.add("selected");

            setup_form_field();
          }

          return;
        }

        // 루트 폴더가 아닌 폴더에 대한 <li> tag marker에 클릭한 경우에는 해당 폴더 트리를
        // 펼치거나 닫는 처리를 한다.
        if (!initiated_a_tag) {
          /*
          if (!logged_in) {
            return
          }
          */
          let ul = clicked_li.querySelector("ul");

          if (ul != null) {
            // folder가 최하위 레벨의 folder가 아닌 경우
            if (!logged_in) {
              alertDialog("알림", "로그인 후에 하위 폴더를 볼 수 있습니다.", true);
              return;
            }

            /*
            ul.style.display = (ul.style.display != 'block') ? 'block' : 'none';
            if (ul.style.display == 'block') {
              set_beforeClass(clicked_li, "minus");
            } else {
              set_beforeClass(clicked_li, "plus");
            }
            */

            let ul_style = ul.style.display;
            let ul_item = $(clicked_li).children("ul:eq(0)");
            let num_all_li = clicked_li.querySelectorAll("li").length;
            let duration = Math.min(50 + num_all_li * 20, 500);
            ul_item.slideToggle(duration); // 서서히 펼쳐지고, 닫히게 한다.
            setTimeout(() => {
              ul.style.display = ul_style != "block" ? "block" : "none";
              if (ul.style.display == "block") {
                set_beforeClass(clicked_li, "minus");
              } else {
                set_beforeClass(clicked_li, "plus");
              }
            }, duration);
          }

          return;
        }

        // <a> tag에 클릭한 경우에는 '선택한 폴더'를 변경하는 처리를 한다.
        initiated_a_tag = false;
        let selected_directory = get_full_path(clicked_li);
        if (selected_directory != cur_directory) {
          play_gif(50);
          //if (get_media_list(selected_directory)) {
          cur_directory = selected_directory;
          get_media_list(selected_directory);
          cur_selected_li.classList.remove("selected");
          cur_selected_li = clicked_li;
          cur_selected_li.classList.add("selected");
          // $("#field_folder").prop("checked", true);
          // 주의) get_limited_text 함수 호출 전에 "media_path"가 visible state에 있어야 한다.
          //    "media_path"가 hidden 상태에서는 clientWidth 값이 0이 되어 올바를 결과를 갖지 못한다.
          setup_form_field();
          let html_el = document.getElementById("media_path");
          let limited_text = get_limited_text(html_el, selected_directory, "...", 10);
          document.getElementById("media_path").value = limited_text;
          $("#field_folder").prop("checked", true);
          //}
        }
        // resize();
      }

      // media 정보창에 표시할 내용을 위한 html 구성 상수 정의
      const folder_html = '<div class="nGYyPopupOneitemText">' + '<i class="nGY2Icon-ngy2_info2"></i>&nbsp;';
      const image_html = '<div class="nGYyPopupOneitemText">' + '<i class="nGY2Icon-picture"></i>&nbsp;';
      const camera_html = '<div class="nGYyPopupOneitemText">' + '<i class="nGY2Icon-camera"></i>&nbsp;';
      const video_html = '<div class="nGYyPopupOneitemText">' + '<i class="nGY2Icon-video"></i>&nbsp;';
      // "nGY2Icon-audio"는 임의로 정의한 class 임.
      /*
      const audio_html = '<div class="nGYyPopupOneitemText">' +
        '<i class="nGY2Icon-audio"></i>&nbsp;'
      */
      const location_html = '<div class="nGYyPopupOneitemText">' + '<i class="nGY2Icon-location"></i>&nbsp;';
      const view_map_html_1 = // gallery 화면에서 띄워지는 경우에 적용
        '<span id="view_map" style="margin-left:10px"><a href="#" onclick="view_mapClick()" return false>' +
        "[ 지도 보기 ]</a></span>";
      const view_map_html_2 = // viewer 화면에서 띄워지는 경우에 적용
        '<span id="view_map" style="margin-left:10px"><a href="#" onclick="view_mapClick()" return false>' +
        "[ 지도 보기 ]</a></span><br>" +
        '<span style="color: DarkOrange; margin-left:-10px">주의)</span>' +
        "<span> 지도 보기창을 띄우면 이미지 뷰어 화면이 닫힙니다.</span>";

      function onPopupMediaInfo(item, title, content) {
        let my_title = item.title;
        let view_map_html;

        if (item.tags[0] == "folder") {
          // is a "folder" ?
          let search_dir;

          if (cur_directory == "./") {
            search_dir = "../" + my_title;
          } else {
            search_dir = "." + cur_directory + "/" + my_title;
          }
          let folder_files = 0;
          let image_files = 0;
          let video_files = 0;

          $.ajax({
            url: "./php_scripts/get_media_list_json.php", // 요청 할 주소
            async: false,
            type: "GET", // type: 'POST', // GET, PUT
            data: {
              // 전송할 데이터
              media_dir: search_dir, // 실행할 php script가 하위 폴더 "php_scripts"에 있으므로..
              get_info_for: 0, // 미디어에 대한 세부 정보는 불필요함.
            },
            dataType: "json", // xml, text, script, html
            success: function (data) {
              // 요청 완료 시
              let jsonData = {};
              jsonData = data;
              let retStatus = jsonData.status;
              if (retStatus != "success") {
                alert(retStatus);
                return;
              }

              folder_files = jsonData.folder_files;
              image_files = jsonData.image_files;
              video_files = jsonData.video_files;
            },
            error: function (request, status, error) {
              // 요청 실패
              alert("code:" + request.status + "\n" + "message:" + request.responseText + "\n" + "error:" + error);
            },
          });

          let info_folder =
            folder_html +
            "현재 선택한 폴더의 하위 폴더로 아래와 같은 컨텐츠를 <br>담고 있습니다.<br>" +
            "&nbsp; - 폴더 : " +
            folder_files +
            "&nbsp;개<br>" +
            "&nbsp; - 이미지 파일 : " +
            image_files +
            "&nbsp;개<br>" +
            "&nbsp; - 비디오 파일 : " +
            video_files +
            "&nbsp;개" +
            "</div>";
          cur_ngy2Item = item;
          return {
            title: "[ 폴더 ] " + item.title,
            content: info_folder,
          };
        }

        // 이 함수는 갤러리창의 thumbnail 이미지 내의 우측 하단 "info" 마크 이미지를 클릭시
        // 호출되는 callback 함수로 파라미터 'title'과 'content'에 thumbnail 이미지와 연관된
        // 미디어 파일의 정보를 넘겨서 info popup에 원하는 정보를 표시하도록 한다.

        let a_file;
        /* if (cur_directory == "/") {
          a_file = "../" + my_title;
        } else {  */
        a_file = "." + cur_directory + "/" + my_title;
        // }
        let arrayData;
        let info_total = "";

        $.ajax({
          url: "./php_scripts/get_media_info_json.php", // 요청 할 주소
          async: false,
          type: "GET", // type: 'POST', // GET, PUT
          data: {
            // 전송할 데이터
            media_file: a_file, // 실행할 php script가 하위 폴더 "php_scripts"에 있으므로..
          },
          dataType: "json", // xml, text, script, html
          success: function (data) {
            // 요청 완료 시
            let jsonData = {};
            jsonData = data;
            let retStatus = jsonData.status;
            if (retStatus != "success") {
              alert(retStatus);
              info_total = "미디어 파일에 대한 정보를 취득하지 못하였습니다.";
              return;
            }

            arrayData = jsonData.contents;
          },
          error: function (request, status, error) {
            // 요청 실패
            alert("code:" + request.status + "\n" + "message:" + request.responseText + "\n" + "error:" + error);
          },
        });

        let image_info = "";
        let camera_info = "";
        let location_info = "";
        let video_info = "";
        let audio_info = "";
        let ngy2data = $("#nanogallery2").nanogallery2("data");
        if ("lightbox" in ngy2data) {
          if (ngy2data.lightbox.viewerDisplayed) {
            view_map_html = view_map_html_2;
          } else {
            view_map_html = view_map_html_1;
          }
        } else {
          view_map_html = view_map_html_1;
        }
        const space_2 = "&nbsp;&nbsp";

        if (arrayData) {
          if (arrayData["type"] == "image") {
            image_info += arrayData["width"] + "x" + arrayData["height"] + " | " + arrayData["file_size"];
            if (arrayData["date_created"] != "n/a") {
              image_info += " | " + arrayData["date_created"];
            }
            /*
            if (arrayData["maker"] != "n/a") {
              camera_info += "  " + arrayData["maker"];
            }  */
            if (
              arrayData["model"] == "n/a" &&
              arrayData["aperture_number"] == "n/a" &&
              arrayData["focal_length"] == "n/a" &&
              arrayData["exposure_time"] == "n/a" &&
              arrayData["iso_number"] == "n/a"
            ) {
              camera_info += "카메라 정보 없음";
            } else {
              if (arrayData["model"] != "n/a") {
                camera_info += arrayData["model"];
              }
              if (arrayData["aperture_number"] != "n/a") {
                camera_info += " | " + arrayData["aperture_number"];
              }
              if (arrayData["focal_length"] != "n/a") {
                camera_info += " | " + arrayData["focal_length"];
              }
              if (arrayData["exposure_time"] != "n/a") {
                camera_info += " | " + arrayData["exposure_time"];
              }
              if (arrayData["iso_number"] != "n/a") {
                camera_info += " | ISO " + arrayData["iso_number"];
              }
            }
            if (arrayData["gps_latitude"] != "n/a") {
              location_info +=
                "위도 " + arrayData["gps_latitude"] + " | " + "경도 " + arrayData["gps_longitute"] + view_map_html;
              cur_gps_latitude = arrayData["gps_latitude"];
              cur_gps_longitute = arrayData["gps_longitute"];
              cur_gps_date = arrayData["date_created"];
              cur_media_title = my_title;
            } else {
              location_info += "위치 정보 없음";
            }

            info_total =
              image_html +
              image_info +
              "</div>" +
              camera_html +
              camera_info +
              "</div>" +
              location_html +
              location_info +
              "</div>";
          } else {
            video_info += arrayData["width"] + "x" + arrayData["height"] + " | " + arrayData["file_size"];
            if (arrayData["play_time"]) {
              video_info += " | " + arrayData["play_time"];
            }
            if (arrayData["date_created"] != "n/a") {
              // video 파일은 촬영 일시에서 '초' 정보는 제외한다.
              let date_full = arrayData["date_created"];
              let date_adjusted = date_full.substring(0, date_full.indexOf("분") + 1);
              video_info += " | " + date_adjusted;
            }

            video_info += "<br>" + "[영상]<br>";
            if (arrayData["video_format"] != "n/a") {
              video_info += space_2 + arrayData["video_format"];
            }
            if (arrayData["video_codec"] != "n/a") {
              video_info += " | " + arrayData["video_codec"];
            }
            if (arrayData["frame_rate"] != "n/a") {
              video_info += " | " + arrayData["frame_rate"] + "Hz";
            }

            video_info += "<br>" + "[오디오]<br>";
            if (arrayData["audio_format"] != "n/a") {
              video_info += space_2 + arrayData["audio_format"];
            }
            if (arrayData["audio_codec"] != "n/a") {
              video_info += " | " + arrayData["audio_codec"];
            }
            if (arrayData["audio_ch"] != "n/a") {
              video_info += " | " + arrayData["audio_ch"] + "ch";
            }
            if (arrayData["audio_samplerate"] != "n/a") {
              video_info += " | " + arrayData["audio_samplerate"] + "Hz";
            }

            info_total = video_html + video_info + "</div>";

            if (arrayData["gps_latitude"] != "n/a") {
              location_info +=
                "위도 " + arrayData["gps_latitude"] + " | " + "경도 " + arrayData["gps_longitute"] + view_map_html;
              cur_gps_latitude = arrayData["gps_latitude"];
              cur_gps_longitute = arrayData["gps_longitute"];
              cur_gps_date = arrayData["date_created"];
              cur_media_title = my_title;
            } else {
              location_info += "위치 정보 없음";
            }

            info_total += location_html + location_info + "</div>";
          }
        }

        cur_ngy2Item = item;
        return {
          title: my_title,
          content: info_total,
        };
      }

      function toggleHighlight(markerView) {
        if (markerView.content.classList.contains("highlight")) {
          markerView.content.classList.remove("highlight");
          markerView.zIndex = null;
        } else {
          markerView.content.classList.add("highlight");
          markerView.zIndex = 1;
        }
      }

      async function initMap(useAdvancedMarker = false) {
        let latitude = parseFloat(cur_gps_latitude);
        let longitude = parseFloat(cur_gps_longitute);
        const { Map } = await google.maps.importLibrary("maps");
        const map = new Map(document.getElementById("map_div"), {
          center: {
            lat: latitude,
            lng: longitude,
          },
          // mapId: "DEMO_MAP_ID", // Map ID is required for advanced markers.
          mapId: "a175a97e1820f0be1622084d",
          zoom: 16,
        });

        if (useAdvancedMarker) {
          const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");

          const content = document.createElement("div");
          content.classList.add("property");
          content.innerHTML =
            '<div class="icon">' +
            '<i aria-hidden="true" class="fa-solid fa-camera-retro" title="촬영지"></i>' +
            '<span class="fa-sr-only">촬영지 정보</span></div>' +
            '<div class="details"><p>미디어 파일 : ' +
            cur_media_title +
            "<br>촬영일시 : " +
            cur_gps_date +
            "</p></div>";

          const marker = new google.maps.marker.AdvancedMarkerElement({
            map,
            content,
            position: {
              lat: latitude,
              lng: longitude,
            },
            title: "촬영지",
            gmpClickable: true,
          });

          // 아래 코드는 촬영지와 연관된 사진 thumnail 이미지를 google map marker의 우측, 아래 위치에
          // overlay image로 나타내기 위한 것임.
          // ref url = https://developers.google.com/maps/documentation/javascript/customoverlays?hl=ko#typescript_2
          // ** 아래 bounds 데이터는 marker 위치 좌표와 동일하게 준다.
          const bounds = new google.maps.LatLngBounds(
            new google.maps.LatLng(latitude, longitude),
            new google.maps.LatLng(latitude, longitude)
          );

          let thumb_url = cur_ngy2Item.thumbs.url.lN.sm;
          let base_url_len = base_url.length;

          // thumb_url에서 선두의 base_url 부분 제거
          let pos = thumb_url.indexOf(base_url);
          let image;
          if (pos == 0) {
            image = thumb_url.substr(base_url_len);
          } else {
            image = thumb_url;
          }

          // let image = "prog_resources/images/default_thumbnail.jpg";

          class USGSOverlay extends google.maps.OverlayView {
            bounds;
            image;
            div;
            overlay_w;
            overlay_h;
            constructor(bounds, image) {
              super();
              this.bounds = bounds;
              this.image = image;
            }

            onAdd() {
              this.div = document.createElement("div");
              this.div.style.borderStyle = "none";
              this.div.style.borderWidth = "0px";
              this.div.style.position = "absolute";

              // Create the img element and attach it to the div.
              const img = document.createElement("img");

              img.src = this.image;
              img.style.width = "100%";
              img.style.height = "100%";
              img.style.position = "absolute";
              this.div.appendChild(img);

              // Add the element to the "overlayLayer" pane.
              const panes = this.getPanes();

              panes.overlayLayer.appendChild(this.div);

              const thumbnail_img = new Image();
              thumbnail_img.src = this.image;
              const ratio = thumbnail_img.width / thumbnail_img.height;
              if (ratio > 1.0) {
                this.overlay_w = 150; // 가로 사진인 경우 너비 값을 150px로 함.
                this.overlay_h = Math.round(this.overlay_w / ratio);
              } else {
                this.overlay_h = 120; // 세로 사진인 경우 높이 값을 120px로 함.
                this.overlay_w = Math.round(this.overlay_h * ratio);
              }
            }

            draw() {
              // ref : https://jsfiddle.net/gh/get/library/pure/googlemaps/js-samples/tree/master/dist/samples/overlay-hideshow/jsfiddle
              // The size of overlay image is fixed, and the location overlay image is same to that of marker.

              const overlayProjection = this.getProjection();
              // Retrieve the south-west and north-east coordinates of this overlay
              // in LatLngs and convert them to pixel coordinates.
              // We'll use these coordinates to resize the div.
              const sw = overlayProjection.fromLatLngToDivPixel(this.bounds.getSouthWest());
              const ne = overlayProjection.fromLatLngToDivPixel(this.bounds.getNorthEast());

              // Resize the image's div to fit the indicated dimensions.
              if (this.div) {
                this.div.style.left = sw.x + "px";
                this.div.style.top = ne.y + "px";
                this.div.style.width = this.overlay_w + "px";
                this.div.style.height = this.overlay_h + "px";
              }
            }

            onRemove() {
              if (this.div) {
                this.div.parentNode.removeChild(this.div);
                delete this.div;
              }
            }

            hide() {
              if (this.div) {
                this.div.style.visibility = "hidden";
              }
            }
            show() {
              if (this.div) {
                this.div.style.visibility = "visible";
              }
            }
            toggle() {
              if (this.div) {
                if (this.div.style.visibility === "hidden") {
                  this.show();
                } else {
                  this.hide();
                }
              }
            }
            toggleDOM(map) {
              if (this.getMap()) {
                this.setMap(null);
              } else {
                this.setMap(map);
              }
            }
          }

          const overlay = new USGSOverlay(bounds, image);

          overlay.setMap(map);

          const toggleButton = document.createElement("button");
          toggleButton.style.fontSize = "16px";
          toggleButton.textContent = "사진 감추기/보이기";
          toggleButton.classList.add("custom-map-control-button");
          toggleButton.addEventListener("click", () => {
            overlay.toggle();
          });

          map.controls[google.maps.ControlPosition.TOP_RIGHT].push(toggleButton);

          /*
          const toggleDOMButton = document.createElement("button");
          toggleDOMButton.textContent = "Toggle DOM Attachment";
          toggleDOMButton.classList.add("custom-map-control-button");
          toggleDOMButton.addEventListener("click", () => {
            overlay.toggleDOM(map);
          });

          map.controls[google.maps.ControlPosition.TOP_RIGHT].push(toggleDOMButton);
          */

          // ** end of the code for showing overlay image

          /*
          marker.addListener("click", () => {
            toggleHighlight(marker);
          });
          */

          marker.addEventListener("gmp-click", () => {
            toggleHighlight(marker);
          });

          google.maps.event.addListener(map, "click", function () {
            if (marker.content.classList.contains("highlight")) {
              marker.content.classList.remove("highlight");
              marker.zIndex = null;
            }
          });
        } else {
          const marker = new google.maps.Marker({
            position: {
              lat: latitude,
              lng: longitude,
            },
            label: "촬영지",
            map,
          });

          let content =
            '<div id="info_content" >' + // class="gm-style-iw-content"
            "<p>미디어 파일 : " +
            cur_media_title +
            "<br>촬영일시 : " +
            cur_gps_date +
            "</p></div>";

          let infoBubble = new InfoBubble({
            content: content,
            padding: 0,
            maxWidth: 330,
            minHeight: 24,
            maxHeight: 70,
            backgroundColor: "#E1F6FA", // "#CCF0E1",
            shadowStyle: 1,
            arrowSize: 10,
          });

          google.maps.event.addListener(marker, "click", function () {
            // infoBubble.setContent(content);
            if (!infoBubble.isOpen()) {
              infoBubble.open(map, marker);
            }
          });

          google.maps.event.addListener(map, "click", function () {
            infoBubble.close();
          });
        }
      }

      function view_mapClick() {
        let wasViewerMode = false;
        // (gallery 보기가 아닌) image viewer가 open되어 있는 상태에서 지도를 띄우면 image viewer가
        // close되고 gallery 보기로 전환되므로 미리 경고창을 띄운다.
        let ngy2data = $("#nanogallery2").nanogallery2("data");
        if ("lightbox" in ngy2data)
          if (ngy2data.lightbox.viewerDisplayed) {
            // image viewer가 open되어 있으면,
            // confirm 창에서 "취소" 버턴을 눌러도 image viewer가 close 됨.
            /*
          let confirm_msg =
            " ****** (주의) ****** \n" +
            "지도 보기창을 띄우면 현재 보시고 있는 이미지 뷰어 \n" +
            "화면이 닫히고 갤러리 보기로 변경됩니다. \n" +
            "진행하시겠습니까 ?";
          if (confirm(confirm_msg) != true) {
            return;
          }
          */

            wasViewerMode = true;
          }

        // 이 함수는 갤러리 창의 특정 thumbnail 이미지의 우측 하단 "i" 마크를 클릭시 나타나는
        // 이미지 정보 보기 popup 창의 "[지도 보기]"를 클릭 시에 호출되며, 구글 맵을 띄우는
        // 작업을 실행한다.
        initMap(use_AdvancedMarker);

        // 구글 맵을 담을 dialog 창(= 지도 보기용 dialog 창)을 준비한다.
        // 아래는 지도 보기창으로 ZulNs의 "Resizable & Draggable Dialog"를 이용 시 적용하는 코드
        if (use_ZulNsDialog) {
          if (!map_dialog) {
            // dialog 창을 생성한 적이 없으면
            var id = "dialog";
            // dialog 창을 생성한다.
            map_dialog = new DialogBox(id, callbackDialog);
          }

          // 간혹 이미지 정보 보기 popup 창이 지도 보기용 dialog 창을 가리는 문제가 있어
          // 지도 보기용 dialog 창을 띄우기 전에 이미지 정보 보기 popup 창을 닫도록
          // 이미지 정보 보기 popup 창의 닫기 버턴을 target으로 "click" event를 발생시킨다.
          // $(".nGY2PopupCloseButton").trigger("click");
          $(".nGY2Popup").css("display", "none"); // "click" event 대신에 직접 감추는 명령을 이용
          // 지도 보기용 dialog 창을 나타나도록 한다.
          map_dialog.showDialog();
        } else {
          // 지도 보기창으로 bootstrap dialog box를 이용 시는 아래 코드를 이용
          let vscrollPos = $("html, body").scrollTop();
          $(".nGY2Popup").css("display", "none");
          $("#map_dialog").dialog().dialog("open");
          if (!map_dialog_was_shown) {
            // 지도 보기창을 처음 보여주는 경우일 때
            let org_height = $("#map_dialog").dialog("option", "height");
            // 처음 지도 보기창을 띄울 때는 크기 변화를 주어야 지도가 표시된다.
            $("#map_dialog").dialog("option", "height", org_height + 10);
            map_dialog_was_shown = true;
          }
          $("html, body").animate({ scrollTop: vscrollPos }, 400);
        }

        // 지도 보기용 dialog 창으로 부터의 콜백 함수 호출 시 처리 함수.
        function callbackDialog(btnName) {
          // 지도 보기용 dialog 창이 close 될때 이미지 정보 보기 popup 창을 다시
          // 띄울려고 작성한 아래 코드는 작동하지 않는다. (classPopup 값으로 "null"을 받음)
          /*
          let classPopup = $(".nGY2PopupContentLeft").html();
          if (classPopup) {
            $(".nGY2Popup").css("display", "block");
          }  */
          // 아래 문장은 작동하나 굳이 이미지 정보 보기 popup 창을 다시 띄울 의미가 있을까 ?
          // if (!wasViewerMode) $(".nGY2Popup").css("display", "block");
        }
      }

      function deleteMediaFile(file_name) {
        let item_deleted = false;

        let confirm_msg = "미디어 파일 '" + file_name + "'을 삭제합니다.\n" + "진행하시겠습니까 ?";
        if (confirm(confirm_msg) != true) {
          return item_deleted;
        }

        let a_file;
        /* if (cur_directory == "/") {
          a_file = "../" + file_name;
        } else {  */
        a_file = "." + cur_directory + "/" + file_name;
        // }

        $.ajax({
          url: "./php_scripts/delete_media_file.php", // 요청 할 주소
          async: false,
          type: "GET", // GET, PUT
          data: {
            // 전송할 데이터
            media_file: a_file, //
          },
          dataType: "text", // xml, text, script, html
          success: function (data) {
            // 요청 완료 시
            if (data.substring(0, 7) == "success") {
              alertDialog("알림", "미디어 파일 '" + file_name + "' 가(이) 삭제되었습니다.", true);
              // selected_item.delete();
              // $("#nanogallery2").nanogallery2('resize');
              // return;
              item_deleted = true;
            } else {
              alert(data);
            }
          },
          error: function (request, status, error) {
            // 요청 실패
            alert("code:" + request.status + "\n" + "message:" + request.responseText + "\n" + "error:" + error);
          },
        });

        return item_deleted;
      }

      function onSelectedItem(e) {
        // 본 함수는 thumbnail 이미지의 select icon을 이용해서 미디어 파일 삭제를 구현한 함수로
        // thumbnail 이미지의 select icon을 기본 이미지가 아닌 쓰레기통 이미지가 보이도록
        // nanogallery2를 초기화할 때 옵션(icons: {thumbnailSelected:..., thumbnailUnselected:... })을
        // 준다.
        // 함수 구현 중 봉착한 문제는 한번 임의의 gallery 창 이미지의 'select' icon을 누른 이후는 selection
        // mode에서 벗어나지 못해 'select' icon 위치가 아닌 곳을 클릭하여도 viewer가 뜨지 않고 'select' icon을
        // 누른 것과 같은 event를 발생시킴. => jquery.nanogallery2.js 파일을 수정하여 해결함 (2023-12-15)
        // * jquery.nanogallery2.js 파일 수정 한 곳 :
        //   - function nanoGALLERY2()
        //   - function ThumbnailSelectionSetIcon
        //   - function ThumbnailSelectionSetIcon
        if (!has_access_right()) {
          alertDialog("알림", "인가된 사용자만 미디어 파일의 삭제가 가능합니다.", true);
          return;
        }

        let items = $("#nanogallery2").nanogallery2("itemsSelectedGet");
        if (!items) {
          return;
        }

        // let mediaMarkup = item[0].mediaMarkup;
        let title = items[0].title; // title은 파일명을 갖는다.
        if (e.type == "itemSelected") {
          setTimeout(() => {
            if (deleteMediaFile(title)) {
              // 미디어 파일을 삭제한 경우 선택한 gallery item을 삭제하고, gallery 화면을 재구성한다.
              items[0].delete();
              $("#nanogallery2").nanogallery2("resize");
            } else {
              // 미디어 파일 삭제를 취소 한 경우 선택한 item의 select 상태를 해제한다.
              $("#nanogallery2").nanogallery2("itemsSetSelectedValue", [items[0]], "false");
            }
          }, 100);
        }
      }

      function onImgDisplayed(item) {
        // 이 함수는 viewer에 이미지가 표시될 때 호출되는 callback 함수임.
        cur_displaying_item = item;
        let is_full_screen = $("#nanogallery2").nanogallery2("data").lightbox.viewerIsFullscreen;
        if (!is_full_screen) {
          let toolbarMode = $("#nanogallery2").nanogallery2("data").lightbox.toolbarMode;
          // viewer의 하단 toolbar를 펼친 상태로 두기 위해 API를 사용한 방법은 작동하지 않는다.
          // $("#nanogallery2").nanogallery2('maximizeToolbar');
          // 아래와 같이 버턴에 직접 "click" event를 주는 방법으로 toolbar를 펼친 상태로 둘 수 있다.
          if (toolbarMode == "std")
            // = it's in minimized state ? (* 용어와 상태 반환값이 다름)
            $(".nGY2Icon-ellipsis-vert").trigger("click");

          // 아래는 viewer에 표시되는 이미지 크기를 줄이기 위해 둔 코드임 (이미지 상하에 약간의
          // 여백을 두기 위함)
          // ** 처음 viewer를 open 시의 이미지에는 적용되지 않는 문제가 있음
          if (zoom_out_on_ImgDisplayed) {
            setTimeout(() => {
              $(".nGY2Icon-ngy2_zoom_out2").trigger("click");
            }, 100);
          }
        }
        // 아래는 viewer가 full_screen 상태이면 viewerGallery(=viewer thumbnail bar)를 나타나지
        // 않게 할려고 viewerGallery 옵션 값을 변경하는 코드인데 실시간 방영이 되지 않고, viewer가
        // close 후 다음 open시에 반영됨.
        /*
        if (is_full_screen) {
          let viewerGallery_visible = $("#nanogallery2").nanogallery2('option', 'viewerGallery');
          if (viewerGallery_visible != 'none') {
            $("#nanogallery2").nanogallery2('option', 'viewerGallery', 'none');
          }
        }
        */

        // 동영상 파일인 경우 자동으로 재생이 시작하도록 하는 코드를 실행한다.
        if (autostartShow) {
          // 슬라이드쇼가 활성화 되어 있으면
          return; // 동영상 자동재생이 되지 않게 한다.
        }

        const video = document.querySelector("video");
        // video 재생 시작 및 재생 종료시 발생하는 event handler를 이용할려고 했으나 길이가
        // 짧은 동영상의 경우 재생 종료시 event가 발생하지 않는 문제로 사용할 수 없음
        /*
        if (video) {
          video.onplay = (event) => {
            // console.log(
            //  "The Boolean paused property is now 'false'. Either the play() method was called or" +
            //  " the autoplay attribute was toggled.",
            // );
          };

          video.onended = (event) => {
            // console.log(
            //  "Video stopped either because it has finished playing or no further data is available.",
            // );
          };
        }
        */

        let mediaMarkup = item.mediaMarkup;
        let pos = mediaMarkup.indexOf('type="video/mp4"');
        if (pos > 0) {
          // 표시 대상이 동영상 파일이면
          let media = $("video.nGY2ViewerMedia").get(0); // 표시 대상의 DOM element 얻고,
          if (media) {
            media.play(); // 재생 명령을 실행한다.
          }
        }
      }

      /*
      // 커스텀 아이콘 적용을 위한 이 함수는 작동하지 않는다. -> onImgToolbarCustDisplay 이용
      function onImgToolbarCustInit(customElemntName) {
        if (customElemntName == 'custom1') {
          let btn_html = '<div><img src="prog_resources/images/trash2.png" alt="Del" /></div>';
          return btn_html;
        }
      }
      */

      function onImgToolbarCustDisplay($customToolbarElements, item) {
        let s = '<div style="margin-top:-5px"><img src="prog_resources/images/trash2.png" alt="Del" /></div>';
        $customToolbarElements.eq(0).html(s);
      }

      // 이 함수는 viewer의 toolbar에 custom button으로 추가된 "삭제" 버턴이 클릭되었을 때
      // 호출되는 callback 함수임.
      function onImgToolbarCustClick(customElementName, $customIcon, item) {
        if (customElementName != "custom1") {
          return;
        }

        if (!has_access_right()) {
          alertDialog("알림", "인가된 사용자만 미디어 파일의 삭제가 가능합니다.", true);
          return;
        }

        let file_name = item.title;
        if (deleteMediaFile(file_name)) {
          // 삭제 후 자동으로 viewer에 표시되는 미디어 파일를 다음 미디어로 변경한다.
          // 아래와 같이 타이머로 일정시간 지연 후에 실행토록 하지 않으면 작동하지 않음
          setTimeout(() => {
            $(".nGY2Icon-ngy2_chevron_right3").trigger("click"); // "next" 미디어로 이동
            setTimeout(() => {
              cur_displaying_item.delete(); // gallery item 에서 삭제
              $("#nanogallery2").nanogallery2("resize"); // gallery 화면 재구성
              // $('#nanogallery2').nanogallery2('reload');
            }, 200);
          }, 100);
        }
      }

      function renewGallery(items_url, html) {
        // 선택한 폴더가 변경 시에 갤러리 창을 갱신하는 함수.
        jQuery("#nanogallery2").nanogallery2("destroy");

        let media_plane = document.getElementById("nanogallery2");
        media_plane.innerHTML = html;
        if (html == "") {
          cur_gallery_html = "";
          return;
        }

        let galleryDisplayMode_;
        let thumbnailWidth_;
        let thumbnailHeight_;

        switch (thumbnail_placeType) {
          case 0: {
            galleryDisplayMode_ = "fullContent";
            thumbnailWidth_ = "auto";
            thumbnailHeight_ = thumbnail_Height;
            break;
          }
          case 1: {
            galleryDisplayMode_ = "pagination";
            thumbnailWidth_ = "auto";
            thumbnailHeight_ = thumbnail_Height;
            break;
          }
          case 2: {
            galleryDisplayMode_ = "fullContent";
            thumbnailWidth_ = thumbnail_Width;
            thumbnailHeight_ = "auto";
            break;
          }
          default: {
            galleryDisplayMode_ = "fullContent";
            thumbnailWidth_ = "auto";
            thumbnailHeight_ = thumbnail_Height;
          }
        }

        let viewer_thumbnail_bar = "none";
        if (show_thumbnailBar) {
          viewer_thumbnail_bar = "bottom";
        }

        let slideshowAutoStart_ = false;
        if (autostartShow) {
          slideshowAutoStart_ = "auto";
        }

        // 관리 권한이 있는 사용자의 경우일 경우 viewer의 toolbar에 custom 버턴인 "삭제" 버턴을 추가하고,
        // gallery 이미지에 삭제 버턴용으로 대용할 'select' icon을 보이도록 한다.
        let minimized_ = "minimizeButton, label, shareButton, downloadButton, zoomButton, infoButton";
        let thumbnailSelectable_ = false;
        if (logged_user_level >= 1) {
          if (document.getElementById("show_delete_icon").checked) {
            let checked = $("#field_file").is(":checked");
            if (checked) thumbnailSelectable_ = true;
            minimized_ += ", custom1"; // "삭제" 버턴 표시
          }
        }

        jQuery("#nanogallery2").nanogallery2({
          /* 주의) galleryDisplayMode 설정 값에서 "pagination" (= 페이지 당 galleryMaxRows 만큼의
                   thumbnail 배열 row를 배치함)은 thumbnail 이미지 배치 방식이'Justified layout' 일
                   경우에만 적용되고 'Cascading layout'인 경우에는 "fullContent" (= 전체 thumbnail을
                   배치함) 가 적용된다.*/
          galleryDisplayMode: galleryDisplayMode_, // "fullContent", "moreButton", "pagination" . .
          galleryPaginationMode: "numbers", // 'dots', 'rectangles', 'numbers'
          galleryPaginationTopButtons: false, // 'galleryDisplayMode'가 "pagination" 일 때 갤러리 창 상단의 페이지 이동 버턴 표시 여부
          galleryMaxRows: thumbnail_Rows, // 갤러리창에서 보여주는 최대 thumbnail 배열 row 수
          imageTransition: "swipe2", // Display transition from one media to the next one.
          // Possible values: 'slideAppear', 'swipe', 'swipe2'.
          slideshowAutoStart: slideshowAutoStart_, // Starts automatically the slideshow when a media is displayed in lightbox.
          slideshowDelay: slideshowInterval, // Duration of the photo display in slideshow mode (in ms).
          // The delay starts when an image is fully downloaded.
          itemsBaseURL: items_url,
          albumFolder: cur_directory, // **** added
          thumbnailLabel: {
            valign: "bottom",
            position: "overImage",
            titleMultiLine: true,
            titleFontSize: "0.9em",
          },
          // thumbnailHeight, thumbnailWidth는 갤러리 창에 thumbnail 이미지 배치 방식에 따라,
          //  - Justified layout : thumbnailWidth는 "auto", thumbnailHeight는 일정 값
          //  - Cascading layout : thumbnailWidth는 일정 값, thumbnailHeight는 "auto"
          // 으로 하고 Cascading layout 시는 thumbnailBaseGridHeight 값도 부여한다.
          thumbnailWidth: thumbnailWidth_, // "auto", 너비 값
          thumbnailHeight: thumbnailHeight_, // "auto", 높이 값
          thumbnailBaseGridHeight: 200,
          thumbnailL1GutterWidth: 6,
          thumbnailL1GutterHeight: 6,
          // galleryLastRowFull: true,
          // thumbnailAlbumDisplayImage: true,
          thumbnailSelectable: thumbnailSelectable_, // enables selection mode
          thumbnailToolbarImage: {
            topLeft: "select",
            topRight: "info",
            bottomRight: "featured",
          },
          thumbnailHoverEffect2: "thumbnail_scale_1.00_1.05_300|image_scale_1.15_1.00",
          viewerGallery: viewer_thumbnail_bar, // viewer 하단에 thumbnail bar 표시 여부/위치
          viewerGalleryTWidth: 90,
          viewerGalleryTHeight: 60,
          viewerToolbar: {
            display: "ture",
            minimized: minimized_,
          },
          /*
            icons: {
              thumbnailSelected:
                '<img id="sel_icon" src="prog_resources/images/trash3.png" />', // '<i style="color:#f00;" class="fa fa-trash" aria-hidden="true"></i>',
              thumbnailUnselected:
                '<img src="prog_resources/images/trash2.png" />', // '<i style="color:#ddd;" class="fa fa-trash" aria-hidden="true"></i>'
            },
            */
          fnPopupMediaInfo: "onPopupMediaInfo",
          fnImgDisplayed: "onImgDisplayed",
          // fnImgToolbarCustInit: "onImgToolbarCustInit",
          fnImgToolbarCustDisplay: "onImgToolbarCustDisplay", // toolbar에 custom 버턴을 나타낼 때 호출되는 함수
          fnImgToolbarCustClick: "onImgToolbarCustClick", // "삭제" 버턴 클릭시 호출되는 함수
          // fnThumbnailOpen는 미디어 뷰어용으로 외부 viewer를 사용 시 호출할 함수를 지정한다.
          fnThumbnailOpen: viewWithFancybox, // null, // viewWithFancybox
        });

        cur_gallery_html = html;
        nanogallery2_initialized = true;
      }

      // viewWithFancybox는 ImageViewer로 nanogallery2의 LightBox 대신 "FancyBox" 를 이용할 경우에 쓰기
      // 위해 만든 함수이나 여기서는 클릭한 갤러리 item이 "folder" thumbnail인 경우 폴더 트리 메뉴에서
      // 해당 메뉴를 클릭한 것과 같은 처리를 하도록 변형, 적용하였다.
      function viewWithFancybox(items) {
        /*
        var lstItems = [];

        for (var i = 0; i < items.length; i++) {
          lstItems.push({ src: items[i].responsiveURL() });
        }
        jQuery.fancybox.open(lstItems);
        return true;   // true : internal viewer를 사용하지 않음을 표시
        */

        // 여기서는 갤러리 창에서 click한 item이 갤러리 뷰어에서 지원하는 미디어
        // 타입이 아니거나 폴더인 경우 image viewer를 띄우지 않도록 처리한다.
        let item_title = items[0].title;
        /*
        let dot_pos = item_title.lastIndexOf(".");
        if (dot_pos >= 0) {
          let ext_code = item_title.substring(dot_pos + 1).toLowerCase();
          if (supported_types.includes(ext_code)) {
            // 갤러리 뷰어에서 지원하는 미디어 타입 ?
            return false; // false : internal viewer로 보여 주라는 의미
          }
        }
        */
        let item_deleted = 0;
        if (items[0].tags[0] == "file") {
          let ngy2data = $("#nanogallery2").nanogallery2("data");
          let view_items = ngy2data.lightbox.items;
          for (let i = items.length - 1; i > 0; i--) {
            // 갤러리 뷰어에서 지원하는 미디어 타입인 경우 tags[0]의 값이 "file" 이므로
            // 다른 값인 경우 이미지 뷰어 화면의 thumbnail bar에 나타나지 않도록 lightbox 요소를
            // 갖는 배열 데이터에서 삭제한다.
            if (items[i].tags[0] != "file") {
              // 지원하는 미디어가 아닌 경우
              ngy2data.lightbox.items.splice(i, 1); // 해당 요소 삭제
              item_deleted++;
            }
          }
          /*
           // viewer의 현재 페이지 표시(= 이미지 번호/이미지 수)가 아래와 같은 문장으로 산출됨
             // set page number
             var viewerMaxImages = G.VOM.items.length;
             if (viewerMaxImages > 0) {
                G.VOM.$viewer
                .find(".pageCounter")
                .html(G.VOM.items[vomIdx].mediaNumber + "/" + viewerMaxImages);
             }
            // 따라서 view_items의 각 item의 mediaNumber 값을 재설정 해주어야 한다.
          */
          if (item_deleted > 0) {
            // 삭제된 item이 있을 경우
            let vomIdx = 0;
            ngy2data.lightbox.items.forEach(function (item) {
              // 일련번호를 순서대로 재부여함
              ngy2data.lightbox.items[vomIdx].mediaNumber = vomIdx + 1;
              vomIdx++;
            });
          }

          return false; // false : internal viewer로 보여 주라는 의미
        }

        let child_ul;
        let elem_id = "";

        // id 속성이 없는 경우 에러가 발생하므로 try ~ catch 문으로 처리함
        try {
          elem_id = cur_selected_li.id;
        } catch (e) {}

        if (elem_id == "root_li") {
          // 최상위 폴더인 경우
          child_ul = $(".top_dir:eq(0)");
        } else {
          child_ul = $(cur_selected_li).children("ul:eq(0)"); // = "li" 요소 하위의 "ul" 태그 요소
        }

        if (child_ul) {
          let child_lis = child_ul.children("li");
          if (child_lis) {
            $.each(child_lis, function (index, child_li) {
              let child_a = $(child_li).children("a:eq(0)");
              if (child_a) {
                if (child_a.text() == item_title) {
                  setTimeout(() => {
                    // 선택한 폴더를 클릭한 폴더 이미지에 해당하는 폴더로 바꾸도록 한다.
                    click_a(child_a[0], true); // true : force to open parent menu
                  }, 100);

                  return false; // break on $.each loop
                }
              }
            });
          }
        }

        return true;
      }

      function showSetupDialog() {
        if (use_ZulNsDialog) {
          let x = document.getElementById("dialog");
          if (window.getComputedStyle(x).display !== "none") {
            return; // 지도를 보여 주는 dialog 창이 보여지고 있는 동안에는 버턴에 대한 조작을 막음.
          }
        }

        let typeSelect = document.getElementById("place_type_sel");
        typeSelect.selectedIndex = thumbnail_placeType;
        let y = document.getElementById("thumbnail_width_sel").options;
        for (let i = 0; i < y.length; i++) {
          if (y[i].value == thumbnail_Width) {
            y[i].selected = true;
            break;
          }
        }
        y = document.getElementById("thumbnail_height_sel").options;
        for (let i = 0; i < y.length; i++) {
          if (y[i].value == thumbnail_Height) {
            y[i].selected = true;
            break;
          }
        }

        if (has_access_right()) {
          document.getElementById("show_delete_icon").checked = show_deleteIcon;
        } else {
          document.getElementById("show_delete_icon").checked = false;
        }

        y = document.getElementById("thumbnail_rows_sel").options;
        for (let i = 0; i < y.length; i++) {
          if (y[i].value == thumbnail_Rows) {
            y[i].selected = true;
            break;
          }
        }

        y = document.getElementById("show_thumbnail_bar");
        y.checked = show_thumbnailBar;
        y = document.getElementById("showAutostart");
        y.checked = autostartShow;

        y = document.getElementById("interval_sel").options;
        for (let i = 0; i < y.length; i++) {
          if (y[i].value * 1000 == slideshowInterval) {
            y[i].selected = true;
            break;
          }
        }

        $("#setup_dialog").dialog().dialog("open");
      }

      // 현재 nanogallery2의 gallery data로 부터 갤러리 창을 구성할 html 구성문을 얻는 함수
      function build_gallery_html(start_number = 0, include_types = 0) {
        // include_types : 0 = all, 1 = folders_only, 2 = files_only
        let html = "";
        // let html_folder = "";
        let html_file = "";
        // let media_folder = media_folder.replace("./", ""); // 선두의 './' 제거

        let ngy2data = $("#nanogallery2").nanogallery2("data");
        let folder_items = [];
        let media_items = [];

        $.each(ngy2data.items, function (index, item) {
          if (item.kind == "album" || item.deleted) return true; // = continue

          if (item.tags[0] == "folder") {
            if (include_types == 0 || include_types == 1) folder_items.push(item);
          } else if (item.tags[0] == "file") {
            if (include_types == 0 || include_types == 2) media_items.push(item);
          }
        });

        // const tagDesc = ["folder", "file"];
        let mediaURL;
        let thumbnail_src;
        let item_tag;
        let html_item;
        let sn = start_number;
        let base_url_len = base_url.length;
        let pos;

        if (folder_items.length > 0) {
          item_tag = tagDesc[0];
          $.each(folder_items, function (index, item) {
            mediaURL = item.src;
            // mediaURL에서 선두의 base_url 부분 제거
            pos = mediaURL.indexOf(base_url);
            if (pos == 0) {
              mediaURL = mediaURL.substr(base_url_len);
            }

            thumbnail_src = item.thumbs.url.lN.me;
            // thumbnail_src에서 선두의 base_url 부분 제거
            pos = thumbnail_src.indexOf(base_url);
            if (pos == 0) {
              thumbnail_src = thumbnail_src.substr(base_url_len);
            }

            sn++;
            html_item =
              s1 +
              "ID_" +
              sn.toString() +
              s1_1 +
              mediaURL +
              s2 +
              thumbnail_src +
              s2_1 +
              item_tag +
              s3 +
              item.title +
              s4;

            html += html_item;
          });
        }

        if (media_items.length > 0) {
          item_tag = tagDesc[1];
          $.each(media_items, function (index, item) {
            mediaURL = item.src;
            thumbnail_src = item.thumbs.url.lN.me;

            sn++;
            html_item =
              s1 +
              "ID_" +
              sn.toString() +
              s1_1 +
              mediaURL +
              s2 +
              thumbnail_src +
              s2_1 +
              item_tag +
              s3 +
              item.title +
              s4;

            html += html_item;
          });
        }

        return html;
      }

      function resetupConfigure() {
        /*  thumbnail_placeType   -   place_type_sel       0/1/2
         thumbnail_Width       - thumbnail_width_sel    200/250/300/350/400
         thumbnail_Height      - thumbnail_height_sel   150/200/250/300
         thumbnail_Rows    -   thumbnail_rows_sel  2/3/4/5/6/
         slideshowInterval  - interval_sel   2/3/5/7/10
         autostartShow       - showAutostart
        show_thumbnailBar   - show_thumbnail_bar
        */
        let needRedraw = false;
        let sel_width_val = thumbnail_Width;
        let sel_height_val = thumbnail_Height;
        let sel_rows_val = thumbnail_Rows;

        // let show_thumbnail_bar_cheked = show_thumbnailBar;

        let typeSelect = document.getElementById("place_type_sel");
        let place_type_sel_ = typeSelect.selectedIndex; // place_type_sel;
        switch (place_type_sel_) {
          case 0: {
            // 일정 높이
            let sel_height = document.getElementById("thumbnail_height_sel");
            sel_height_val = parseInt(sel_height.options[sel_height.selectedIndex].value);
            break;
          }
          case 1: {
            // 일정 높이 (페이지 분할)
            let sel_height = document.getElementById("thumbnail_height_sel");
            sel_height_val = parseInt(sel_height.options[sel_height.selectedIndex].value);
            let sel_rows = document.getElementById("thumbnail_rows_sel");
            sel_rows_val = parseInt(sel_rows.options[sel_rows.selectedIndex].value);
            break;
          }
          case 2: {
            // 일정 너비
            let sel_width = document.getElementById("thumbnail_width_sel");
            sel_width_val = parseInt(sel_width.options[sel_width.selectedIndex].value);
            break;
          }
        }

        if (
          place_type_sel_ != thumbnail_placeType ||
          sel_height_val != thumbnail_Height ||
          sel_width_val != thumbnail_Width ||
          sel_rows_val != thumbnail_Rows
        ) {
          thumbnail_placeType = place_type_sel_;
          thumbnail_Height = sel_height_val;
          thumbnail_Width = sel_width_val;
          thumbnail_Rows = sel_rows_val;
          needRedraw = true;
        }

        if (document.getElementById("show_delete_icon").checked != show_deleteIcon) {
          show_deleteIcon = document.getElementById("show_delete_icon").checked;
          needRedraw = true;
        }

        let show_thumbnailBar_ = document.getElementById("show_thumbnail_bar").checked;
        if (show_thumbnailBar_ != show_thumbnailBar) {
          if (show_thumbnailBar_) {
            $("#nanogallery2").nanogallery2("option", "viewerGallery", "bottom");
          } else {
            $("#nanogallery2").nanogallery2("option", "viewerGallery", "none");
          }
          show_thumbnailBar = show_thumbnailBar_;
        }
        let autostartShow_ = document.getElementById("showAutostart").checked;
        if (autostartShow_ != autostartShow) {
          if (autostartShow_) {
            $("#nanogallery2").nanogallery2("option", "slideshowAutoStart", "auto");
          } else {
            $("#nanogallery2").nanogallery2("option", "slideshowAutoStart", false);
          }
          autostartShow = autostartShow_;
        }

        let sel_interval = document.getElementById("interval_sel");
        let slideshowInterval_ = parseInt(sel_interval.options[sel_interval.selectedIndex].value) * 1000;
        if (slideshowInterval_ != slideshowInterval) {
          $("#nanogallery2").nanogallery2("option", "slideshowDelay", slideshowInterval_);
          slideshowInterval = slideshowInterval_;
          needRedraw = true; // 슬라이드 쇼 이미지 갱신주기 변경은 gallery를 초기화 후 적용됨
        }

        if (needRedraw) {
          // gallery를 초기화할 필요가 있으면,
          // renewGallery(base_url, cur_gallery_html);
          // **** renewGallery -> 수정 요. (갤러리 아이템이 파일 이동, 삭제 등으로 변경 가능성 있음)

          // 역으로 nanogallery2의 현재 데이터로 부터 html을 구성하여 이용하는 것으로 변경함.
          let gallery_html = build_gallery_html();
          renewGallery(base_url, gallery_html);
        }
      }

      function showGuideURL() {
        window.open("https://blog.naver.com/silhwan5125/223774294402", "네이버 블로그", "width=800px,scrollbars=yes");
      }

      function Login() {
        if (use_ZulNsDialog) {
          let x = document.getElementById("dialog");
          if (window.getComputedStyle(x).display !== "none") {
            return; // 지도를 보여 주는 dialog 창이 보여지고 있는 동안에는 버턴에 대한 조작을 막음.
          }
        }

        if (logged_in) {
          // 이미 로그인 중이면 -> 로그아웃 처리
          fb();
          show_deleteIcon = false;

          // 현재 폴더가 탑폴더 바로 아래 폴더가 아니면 탑폴더 바로 아래 폴더로 바꾸기 위해
          // 현재 폴더의 최상위 바로 아래 폴더명을 구한다.
          let need_move = false;
          let matching_folder;
          if (cur_directory != "./") {
            let cur_directory_ = cur_directory.substring(2); // 선두의 "./" 제거
            let slash_pos = cur_directory_.indexOf("/");
            if (slash_pos != -1) {
              // 현재 폴더가 탑폴더 바로 아래 폴더가 아니면
              need_move = true;
              matching_folder = cur_directory_.substring(0, slash_pos);
            }
          }
          // 펼쳐진 폴더 트리 메뉴를 (1차 하위 폴더를 제외하고) 모두 닫는다.
          let top_li = $("ul.top_dir").children(); // top_li = 1차 하위 폴더 "li" 태그 요소들
          let new_folder_a = null;
          for (let i = 0; i < top_li.length; i++) {
            let ul = top_li.eq(i).children("ul");
            if (ul.length > 0) {
              ul.eq(0).css("display", "none");
              set_beforeClass(top_li.eq(i)[0], "plus");
            }
            if (need_move) {
              let top_li_a = top_li.eq(i).children("a:eq(0)");
              if (top_li_a.text() == matching_folder) {
                new_folder_a = top_li_a; // 현재 폴더의 최상위 바로 아래 폴더에 해당하는 "a" 태그
              }
            }
          }

          document.getElementById("show_delete_icon").checked = false;
          document.getElementById("show_delete_icon").setAttribute("disabled", true);
          $("#folder_para").attr("style", "display:block;");
          $("#file_para").attr("style", "display:none;");
          $("#field_folder").prop("checked", true);
          $("#form_field :input").prop("disabled", true);
          let cur_option_val = $("#nanogallery2").nanogallery2("option", "thumbnailSelectable");
          if (cur_option_val) {
            $("#nanogallery2").nanogallery2("option", "thumbnailSelectable", false);
          }

          document.getElementById("signIn").value = "로그인";
          if (new_folder_a != null) {
            // new_folder_a.trigger("click"); // 아래 문장으로 대치
            setTimeout(() => {
              click_a(new_folder_a[0]); // 현재 폴더를 탑폴더 바로 아래 폴더로 바꾸도록 한다.
            }, 100);
          } else {
            // 갤러리 창에서 폴더 이미지들을 삭제한다. (단, root 폴더인 경우에는 그대로 둔다.)
            if (cur_directory != "./") {
              DeleteFolderImages();
              $("#nanogallery2").nanogallery2("resize");
            }
          }
        } else {
          $("#login_dialog").dialog().dialog("open");
        }
      }

      /*
      // file upload is performed by jquery.dm-uploader plugin
      async function uploadFile(files) {
        let formData = new FormData();
        for (let i = 0; i < files.length; i++) {
          formData.append('files[]', files[i]);
        }

        let cur_directory_ = cur_directory;
        if (cur_directory_ == "/")
          cur_directory_ = "./";
        formData.append('directory', cur_directory_);

        // reset the value of 'fileupload' element for next trigger
        document.getElementById('fileupload').value = null;

        $.ajax({
          beforeSend: function() {
            $('.modal .ajax_data').prepend('<img src="' +
                base_url + '"asset/images/ajax-loader.gif" />');
            //$(".modal .ajax_data").html("<pre>Hold on...</pre>");
            $(".modal").modal("show");
          },
          xhr: function() {
            let xhr = $.ajaxSettings.xhr();
            xhr.upload.onprogress = function(e) {
              console.log(Math.floor(e.loaded / e.total * 100) + '%');
            };
            return xhr;
          },
          url: './php_scripts/file_upload.php',
          data: formData,
          type: 'POST',
          cache: false,
          enctype: 'multipart/form-data', // must be specified
          contentType: false, // NEEDED, DON'T OMIT THIS (requires jQuery 1.6+)
          processData: false, // NEEDED, DON'T OMIT THIS
          // ... Other options like success and etc
          success: function(data) {
            if (data.substring(0, 7) == "Success") {
              alert('The file(s) has been uploaded successfully.');
            } else {
              alert(data);
            }

            $(".modal .ajax_data").html("<pre>" + msg +
                "</pre>");
            $('#close').hide();
          },
          error: function(request, status, error) {
            alert("code:" + request.status + "\n" + "message:" + request.responseText +
              "\n" + "error:" + error);
            $(".modal .ajax_data").html(
                "<pre>Sorry! Couldn't process your request.</pre>"
            ); //
            $('#done').hide();
          }
        });
      }
      */

      function is_top_folder(folder_path) {
        // 루트 폴더나 1차 폴더인지 확인
        if (folder_path == "./") {
          return true;
        }

        let folder_path_ = folder_path.substring(2); // 맨 앞의 "./" 제거
        let slash_pos = folder_path_.indexOf("/");
        if (slash_pos == -1) {
          // folder_path_에 "/" 문자가 없으면
          return true;
        } else {
          return false;
        }
      }

      function rename_folder_click() {
        if (use_ZulNsDialog) {
          let x = document.getElementById("dialog");
          if (window.getComputedStyle(x).display !== "none") {
            return; // 지도를 보여 주는 dialog 창이 보여지고 있는 동안에는 버턴에 대한 조작을 막음.
          }
        }

        if (!logged_in) {
          alertDialog("알림", not_logged_in, true);
          return;
        }

        if (cur_directory == "./") {
          alertDialog("알림", "루트 폴더는 폴더명을 가질 수 없습니다."), true;
          return;
        }

        if (!has_access_right()) {
          alertDialog("알림", "선택한 폴더에 대한 폴더명 변경 권한이 없습니다.", true);
          return;
        }

        if (is_top_folder(cur_directory)) {
          alertDialog("알림", "사용자는 최상위 폴더명을 변경할 수 없습니다.", true);
          return;
        }

        /*
        if (cur_directory == logged_user_folder) {
          alert("선택한 폴더에 대한 폴더명 변경 권한이 없습니다.");
          return;
        }
        */

        // let last_slash_pos = cur_directory.lastIndexOf("/");
        // let cur_folder_name = cur_directory.substring(last_slash_pos + 1);

        // let new_folder_name = prompt("새 폴더명 ?", cur_folder_name);
        showPromptDialog("새 폴더명 :", "새 폴더명 입력", rename_folder);
      }

      function rename_folder(response, new_folder_name) {
        if (response != "OK") {
          return;
        }

        if (!new_folder_name) {
          return;
        }

        let last_slash_pos = cur_directory.lastIndexOf("/");
        let cur_folder_name = cur_directory.substring(last_slash_pos + 1);
        if (new_folder_name == cur_folder_name) {
          return;
        }

        if (invalid_folder_names.includes(new_folder_name)) {
          alertDialog("알림", "사용할 수 없는 폴더명입니다.!", true);
          return;
        }

        // 폴더명에 더블 스페이스가 있으면 php에서 악세스시에 에러가 발생한다.
        let double_space_pos = cur_directory.indexOf("  ");
        if (double_space_pos != -1) {
          alertDialog("알림", "폴더명에 더블 스페이스를 포함하고 있습니다.!", true);
          return;
        }

        let isValid = (function () {
          let rg1 = /^[^\\/:\*\?"<>\|]+$/; // forbidden characters \ / : * ? " < > |
          let rg2 = /^\./; // cannot start with dot (.)
          let rg3 = /^(nul|prn|con|lpt[0-9]|com[0-9])(\.|$)/i; // forbidden file names
          return function isValid(fname) {
            return rg1.test(fname) && !rg2.test(fname) && !rg3.test(fname);
          };
        })();

        let valid_folder_name = isValid(new_folder_name);
        if (!valid_folder_name) {
          alertDialog("알림", "폴더명으로 적합하지 않은 문자 또는 문자열을 포함하고 있습니다.!", true);
          return;
        }

        let changeOK = false;

        $.ajax({
          url: "./php_scripts/change_folder_name.php", // 요청 할 주소
          async: false,
          type: "GET", // type: 'POST', // GET, POST
          data: {
            // 전송할 데이터
            directory: "." + cur_directory, // change_folder_name.php script가 하위 폴더에 위치하므로
            new_folder: new_folder_name,
          },
          dataType: "text", // xml, text, script, html
          success: function (data) {
            // 요청 완료 시
            if (data.substring(0, 7) == "success") {
              // alert("폴더명이 변경되었습니다.");
              changeOK = true;
            } else {
              alert(data);
            }
          },
          error: function (request, status, error) {
            // 요청 실패
            alert("code:" + request.status + "\n" + "message:" + request.responseText + "\n" + "error:" + error);
          },
        });

        if (changeOK) {
          cur_a_object.text(new_folder_name); // 폴더 메뉴의 폴더명 변경
          let parent_directory = cur_directory.substring(0, last_slash_pos);
          cur_directory = parent_directory + "/" + new_folder_name;
          let html_el = document.getElementById("media_path");
          let limited_text = get_limited_text(html_el, cur_directory, "...", 10);
          document.getElementById("media_path").value = limited_text;
          // document.getElementById("media_path").value = cur_directory;
          // 전역변수로 cur_media_list를 두고 활용하려면 폴더명 변경, 폴더 추가, 삭제 등의 작업 시에 수정처리를
          // 하여야하는 어려움이 있어 간단하게 미디어 목록을 새로 검색하는 것으로 대체함.
          // build_html(cur_media_list, cur_directory); // 폴더 path가 바뀌어서 html을을 재구성해야 함.
          get_media_list(cur_directory);
        }
      }

      function pwDialogCancel() {
        $("#pwcheck_dialog").dialog().dialog("close");
      }

      function pwDialogOK() {
        // password 체크
        let element = document.getElementById("password3");
        let password_input = element.value;
        let passwordOK = false;

        $.ajax({
          url: "./php_scripts/user_password_check.php", // 요청 할 주소
          async: false,
          type: "GET", // type: 'POST', // GET, POST
          data: {
            // 전송할 데이터
            userid: logged_user,
            password: password_input,
          },
          dataType: "text", // xml, text, script, html
          success: function (data) {
            // 요청 완료 시
            if (data == "success") {
              passwordOK = true;
            } else {
              alert(data);
            }
          },
          error: function (request, status, error) {
            // 요청 실패
            alert("code:" + request.status + "\n" + "message:" + request.responseText + "\n" + "error:" + error);
          },
        });

        if (!passwordOK) {
          return;
        }

        $("#pwcheck_dialog").dialog().dialog("close");
        setTimeout(() => {
          go_delete(); // 현재 폴더를 탑폴더 바로 아래 폴더로 바꾸도록 한다.
        }, 100);
      }

      function show_pwcheck_dialog(confirm_answer) {
        if (confirm_answer != "OK") {
          return;
        }

        let element = document.getElementById("password3");
        element.value = "";
        $("#pwcheck_dialog").dialog().dialog("open");
      }

      function delete_folder_click() {
        if (use_ZulNsDialog) {
          let x = document.getElementById("dialog");
          if (window.getComputedStyle(x).display !== "none") {
            return; // 지도를 보여 주는 dialog 창이 보여지고 있는 동안에는 버턴에 대한 조작을 막음.
          }
        }

        if (!logged_in) {
          alertDialog("알림", not_logged_in, true);
          return;
        }

        if (cur_directory == "./") {
          alertDialog("알림", "루트 폴더는 삭제할 수 없습니다.", true);
          return;
        }

        if (!has_access_right()) {
          alertDialog("알림", "선택한 폴더에 대한 폴더 삭제 권한이 없습니다.", true);
          return;
        }

        if (is_top_folder(cur_directory)) {
          if (logged_user_level < 2) {
            alertDialog("알림", "사용자는 최상위 폴더를 삭제할 수 없습니다.", true);
            return;
          }
        }

        let last_slash_pos = cur_directory.lastIndexOf("/");
        let cur_folder_name = cur_directory.substring(last_slash_pos + 1);
        let base_msg = "현재 선택한 '" + cur_folder_name + "' 폴더를 삭제합니다.\n";
        /*
        let confirm_msg = base_msg + "진행하시겠습니까 ?";
        if (confirm(confirm_msg) != true) {
          return;
        }; */
        /*
        let confirm_msg =
          " ****** (경고) ****** \n" +
          base_msg +
          "현재 선택한 폴더와 선택한 폴더의 하위 폴더 및 폴더 내의 \n" +
          "미디어 파일이 모두 삭제되고 복원할 수 없습니다. \n" +
          "진행하시겠습니까 ?";
        if (confirm(confirm_msg) != true) {
          return;
        }
        */

        let confirm_msg =
          "현재 선택한 폴더와 선택한 폴더의 하위 폴더 및 폴더<br>" +
          "내의 미디어 파일이 모두 삭제되고 복원할 수 없습니다.<br>" +
          "진행하시겠습니까 ?";
        showConfirmDialog(confirm_msg, "폴더 삭제", show_pwcheck_dialog);

        /*
        let password_input = prompt("사용자 암호를 입력하여 주세요\n '취소' 버턴을 눌러 폴더 삭제를 취소할 수 있습니다.", "");
        if (!password_input) {
          return
        }
        */
        /*
        let element = document.getElementById("password3");
        element.value = "";
        $("#pwcheck_dialog").dialog().dialog("open");
        */
        // return;
      }

      function go_delete() {
        let deleteOK = false;

        $.ajax({
          url: "./php_scripts/delete_folder.php", // 요청 할 주소
          async: false,
          type: "GET", // type: 'POST', // GET, POST
          data: {
            // 전송할 데이터
            directory: "." + cur_directory, // delete_folder.php script가 하위 폴더에 위치하므로
          },
          dataType: "text", // xml, text, script, html
          success: function (data) {
            // 요청 완료 시
            if (data.substring(0, 7) == "success") {
              alertDialog("알림", "선택한 폴더가 삭제되었습니다.", true);
              deleteOK = true;
            } else {
              alert(data);
            }
          },
          error: function (request, status, error) {
            // 요청 실패
            alert("code:" + request.status + "\n" + "message:" + request.responseText + "\n" + "error:" + error);
          },
        });

        if (deleteOK) {
          let parent_li = cur_a_object.parent();
          let parent_ul = parent_li.parent();
          /*
          if (parent_ul.attr('class') == "top_dir") { // 루트 폴더 바로 아래 폴더가 선택된 경우
            alert("삭제할 수 없는 하위 1차 폴더입니다.");
            return;
          }
          */

          let p_parent_li;
          if (parent_ul.attr("class") == "top_dir") {
            // "top_dir" ul 태그의 childeren이면
            p_parent_li = $("#root_li");
          } else {
            p_parent_li = parent_ul.parent();
          }

          if (parent_li.siblings().length == 0) {
            // 선택한 폴더가 형제 폴더가 없는 경우
            parent_ul.empty(); // parent_ul의 하위 요소("li" 태그) 삭제
            parent_ul.remove(); // parent_ul 삭제
            // p_parent_li 아래에 하위 폴더가 없으므로 class "minus"를 제거한다.
            if (p_parent_li[0].classList.contains("minus")) {
              p_parent_li[0].classList.remove("minus");
            }
          } else {
            parent_li.empty(); // parent_li의 하위 요소("a" 태그) 삭제
            parent_li.remove(); // parent_li 삭제
          }

          let p_parent_li_a = p_parent_li.children("a:eq(0)"); // = "li" 요소 내의 "a" 태그 요소
          // p_parent_li_a.trigger("click"); // 선택한 폴더를 상위 폴더로 변경한다.
          click_a(p_parent_li_a[0]); // jquery 객체 -> dom 객체로 변환해서 넘김
        }
      }

      function click_a(clicked_item, open_parent_menu = false) {
        // 동적으로 추가된 폴더 트리 메뉴의 "a" 태그를 클릭 발생한 이벤트 처리 함수
        if (event) event.stopPropagation();
        if (use_ZulNsDialog) {
          let x = document.getElementById("dialog");
          if (window.getComputedStyle(x).display !== "none") {
            return; // 지도를 보여 주는 dialog 창이 보여지고 있는 동안에는 버턴에 대한 조작을 막음.
          }
        }

        $(clicked_item).addClass("selected");
        $("#root_ul a").not(clicked_item).removeClass("selected");
        cur_a_object = $(clicked_item);
        // initiated_a_tag = true; // <a> tag 클릭에 의한 event 발생임을 알림

        let clicked_li = clicked_item.parentElement;
        let selected_directory = get_full_path(clicked_li);
        if (selected_directory != cur_directory) {
          play_gif(50);
          let html_el = document.getElementById("media_path");
          let limited_text = get_limited_text(html_el, selected_directory, "...", 10);
          document.getElementById("media_path").value = limited_text;
          // document.getElementById("media_path").value = selected_directory;
          //if (get_media_list(selected_directory)) {
          $("#field_folder").prop("checked", true);
          get_media_list(selected_directory);
          cur_directory = selected_directory;
          cur_selected_li.classList.remove("selected");
          cur_selected_li = clicked_li;
          cur_selected_li.classList.add("selected");
          //}
          // $("#field_folder").prop("checked", true);
          // setup_form_field();

          // 아래는 갤러리 창에서 폴더 이미지를 클릭하여 해당 폴더로 메뉴가 이동 시에
          // 처리하는 루틴
          if (open_parent_menu) {
            let parent_ul = clicked_li.parentElement;
            if (parent_ul.className != "root_ul") {
              // 최상위 폴더 메뉴는 항상 open 상태임.
              if (parent_ul.className != "top_dir") {
                let ul_style = parent_ul.style.display;
                // 메뉴 트리의 상위 폴더가 접힌 상태로 표시되고 있으면,
                // 상위 폴더가 보이게 펼친다.
                if (ul_style != "block") {
                  let parent_li = parent_ul.parentElement;
                  let num_all_li = parent_ul.querySelectorAll("li").length;
                  let duration = Math.min(50 + num_all_li * 20, 500);
                  $(parent_ul).slideToggle(duration); // 서서히 펼쳐지고, 닫히게 한다.
                  setTimeout(() => {
                    parent_ul.style.display = "block"; // 상위 폴더가 보이게 펼친다.
                    set_beforeClass(parent_li, "minus"); // 펼쳐져 있는 상태임을 나타냄
                  }, duration);
                }
              }
            }
          } else {
            setup_form_field();
          }
        }

        // return false;
      }

      function create_folder_click() {
        if (use_ZulNsDialog) {
          let x = document.getElementById("dialog");
          if (window.getComputedStyle(x).display !== "none") {
            return; // 지도를 보여 주는 dialog 창이 보여지고 있는 동안에는 버턴에 대한 조작을 막음.
          }
        }

        if (!logged_in) {
          alertDialog("알림", not_logged_in, true);
          return;
        }

        if (!has_access_right()) {
          alertDialog("알림", "선택한 폴더에서 하위폴더 생성 권한이 없습니다.", true);
          return;
        }

        /*
        let sub_folder_name = prompt("생성할 폴더명 ?", "");
        if (!sub_folder_name) {
          return;
        }
        */
        showPromptDialog("하위 폴더명 :", "생성할 하위 폴더명 입력", create_folder);
      }

      function create_folder(response, sub_folder_name) {
        if (response != "OK") {
          return;
        }

        if (!sub_folder_name) {
          return;
        }

        if (invalid_folder_names.includes(sub_folder_name)) {
          alertDialog("알림", "사용할 수 없는 폴더명입니다.!", true);
          return;
        }

        // 폴더명에 더블 스페이스가 있으면 php에서 악세스시에 에러가 발생한다.
        let double_space_pos = sub_folder_name.indexOf("  ");
        if (double_space_pos != -1) {
          alertDialog("알림", "폴더명에 더블 스페이스를 포함하고 있습니다.!", true);
          return;
        }

        let isValid = (function () {
          let rg1 = /^[^\\/:\*\?"<>\|]+$/; // forbidden characters \ / : * ? " < > |
          let rg2 = /^\./; // cannot start with dot (.)
          let rg3 = /^(nul|prn|con|lpt[0-9]|com[0-9])(\.|$)/i; // forbidden file names
          return function isValid(fname) {
            return rg1.test(fname) && !rg2.test(fname) && !rg3.test(fname);
          };
        })();

        let valid_folder_name = isValid(sub_folder_name);
        if (!valid_folder_name) {
          alertDialog("알림", "폴더명으로 적합하지 않은 문자 또는 문자열을 포함하고 있습니다.!", true);
          return;
        }

        let makeOK = false;

        $.ajax({
          url: "./php_scripts/create_sub_folder.php", // 요청 할 주소
          async: false,
          type: "GET", // type: 'POST', // GET, POST
          data: {
            // 전송할 데이터
            directory: "." + cur_directory, // change_folder_name.php script가 하위 폴더에 위치하므로
            sub_folder: sub_folder_name,
          },
          dataType: "text", // xml, text, script, html
          success: function (data) {
            // 요청 완료 시
            if (data.substring(0, 7) == "success") {
              makeOK = true;
            } else {
              alert(data);
            }
          },
          error: function (request, status, error) {
            // 요청 실패
            alert("code:" + request.status + "\n" + "message:" + request.responseText + "\n" + "error:" + error);
          },
        });

        if (makeOK) {
          // 폴더 트리 메뉴에 새로 생성한 sub folder에 대한 메뉴 아이템을 추가한다.
          // 동적으로 생성된 DOM element에는 이전에 선언한 event binding이 적용되지 않으므로
          // "a" 태그 자체에 onclcik event시 호출할 함수를 직접 지정한다.
          let parent_li = cur_a_object.parent();
          let ul;
          if (parent_li[0].id == "root_li") {
            // "root_li" 바로 아래 하위폴더는 "top_dir" ul 태그를 parent로 한다.
            ul = document.querySelector(".top_dir");
          } else {
            ul = parent_li[0].querySelector("ul"); // jquery 객체를 DOM 객체로
          }
          // let ul = parent_li[0].querySelector("ul"); // jquery 객체를 DOM 객체로

          if (ul != null) {
            // ul tag가 존재하는 경우 (= 기존의 자식 li가 존재)
            $(ul).append($('<li class="dir">' + html_click_a + sub_folder_name + "</a></li>"));
            if (ul.style.display == "none") {
              // 메뉴 트리의 폴더가 접힌 상태로 표시되고 있으면,
              ul.style.display = "block"; // 하위 폴더가 보이게 펼친다.
              set_beforeClass(parent_li[0], "minus");
            }
          } else {
            parent_li.append(
              $('<ul class="sub_dir"><li class="dir">' + html_click_a + sub_folder_name + "</a></li></ul>")
            );
            let ul = parent_li[0].querySelector("ul");
            if (ul != null) {
              ul.style.display = "block"; // 하위 폴더가 보이게 펼친다.
              set_beforeClass(parent_li[0], "minus");
            }
          }

          // 갤러리 창에 새로 생성된 폴더에 대한 thumbnail 이미지가 표시되도록 한다.
          let ngy2data = $("#nanogallery2").nanogallery2("data");
          let folder_items = [];
          let file_items = [];

          if (ngy2data.items)
            $.each(ngy2data.items, function (index, item) {
              if (item.kind == "album" || item.deleted) return true; // = continue

              if (item.tags[0] == "folder") {
                folder_items.push(item);
              } else if (item.tags[0] == "file") {
                file_items.push(item);
              }
            });

          let html = "";
          if (folder_items.length > 0) html = build_gallery_html2(folder_items);
          let sn = folder_items.length;
          let has_thumbnail = false;
          // 새로 생성한 폴더에 대한 gallery용 html 구함.
          html += build_folder_item_html(sn, cur_directory, sub_folder_name, has_thumbnail);
          if (file_items.length > 0) {
            sn += 1;
            html += build_gallery_html2(file_items, sn);
          }

          if (!ngy2data.items) {
            // 갤러리 창에 표시되는 요소가 없을 경우 나타나는 no_media_msg 를 감춘다.
            $("#no_media_msg").css("display", "none");
          }
          renewGallery(base_url, html);

          alertDialog("알림", "하위 폴더가 생성되었습니다.", true);
        }
      }

      function fileupload_click() {
        const spaces = "&nbsp;&nbsp;"; // = 공백문자 2자
        const li_class = '<li class="text-muted text-center empty">';
        const li_class_1 = '<li class="text-danger text-center empty">';
        const li_class_2 = '<li class="text-dark empty" style="text-align:left">';
        /*
          const warning_1 =
            spaces + '이 사이트("photo.link21.kr")는 동영상 파일에 대한 섬네일을';
          const warning_2 = spaces + "만들지 못합니다.";
          const warning_3 =
            spaces +
            '동영상 파일을 업로드 시는 "gallery.link21.kr" 로 접속하시기';
          const warning_4 = spaces + "바랍니다.";
          */
        if (use_ZulNsDialog) {
          let x = document.getElementById("dialog");
          if (window.getComputedStyle(x).display !== "none") {
            return; // 지도를 보여 주는 dialog 창이 보여지고 있는 동안에는 버턴에 대한 조작을 막음.
          }
        }

        if (!logged_in) {
          alertDialog("알림", not_logged_in, true);
          return;
        }

        if (!has_access_right()) {
          alertDialog("알림", "선택한 폴더에 미디어 파일을 업로드할 권한이 없습니다.", true);
          return;
        }

        // 파일 업로드 dialog 창이 뜨면 갤러리 창의 이미지가 (위로 밀려 올라가서) 사라지는
        // 현상을 막기 위해 div.right_block의 style 속성을 변경한다.
        // scroll_Top = document.getElementById("gallery_box").scrollTop;
        /* $("div .right_box").css("position", "fixed");
        $("div .right_box").css("top", "70px");  */

        // jquery.dm-uploader 플러그인과 파일 업로드 창을 reset 한 후 파일 업로드 창을 연다.
        $("#drag-and-drop-zone").dmUploader("reset");
        $("#files").html(no_queued_file);
        uploaded_counter = 0;
        enrolled_counter = 0;
        document.getElementById("debug_msg").value = no_queued_msg;
        $("#upload_dialog").dialog().dialog("open");
      }

      function select_all_click() {
        if (use_ZulNsDialog) {
          let x = document.getElementById("dialog");
          if (window.getComputedStyle(x).display !== "none") {
            return; // 지도를 보여 주는 dialog 창이 보여지고 있는 동안에는 버턴에 대한 조작을 막음.
          }
        }

        let items = $("#nanogallery2").nanogallery2("data").items;
        $("#nanogallery2").nanogallery2("itemsSetSelectedValue", items, true);

        /*
        // itme의 "kind" 속성 값이 "album"인 item은 제외시킬려면 아래와 같이 한다.
        $.each(items, function (index, item) {
          if (item.kind != "albun") {
            $("#nanogallery2").nanogallery2("itemsSetSelectedValue", [item], true);
          }
        }); */

        /*
        // 위의 옵션 설정을 이용하는 방법은 간단하나 갤러리 표시 요소가 많아 하나 이상의
        // 페이지에 걸쳐 표시될 경우 thumbnail 이미지 테두리에 블랙 경계선이 나타나고, 
        // 이후 "삭제" 버턴을 눌렀을 대 (실제 삭제는 되었으나) 갤러리 창에 남아있는 
        // thumbnail 이미지가 표시되는 문제가 있다.
        // 이 문제를 해결코자 프로그램적으로 thumbnail 이미지 마다 "select" 아이콘을 
        // 클릭하는 루틴을 만들고자 하였으나 실패함.
        let icon_items = $(".nGY2GThumbnailIconImageSelect");
        $.each(icon_items, function (index, item) {
          // * ???? 여기서 item은 jquery 객체가 아닌 DOM 객체로 되어 있음.
          if ($(item).hasClass("nGY2ThumbnailUnselected")) {
            let p_li = $(item).parent();
            p_li.trigger("click");  // p_li는 click event와 연결된 함수가 없다. 
          }
        });
        */

        // selected items
        let sel = "";
        selectedItems.length = 0;

        for (let k = 0; k < items.length; k++) {
          let item = items[k];
          if (k == 0) {
            if (item.kind == "album") {
              continue;
            }
          }

          if (item.selected) {
            if (sel == "") {
              sel = item.title;
            } else {
              sel += ", " + item.title;
            }
            selectedItems.push(item.title);
          }
        }

        jQuery("#media_files").val(sel);
      }

      function unselect_all_click() {
        if (use_ZulNsDialog) {
          let x = document.getElementById("dialog");
          if (window.getComputedStyle(x).display !== "none") {
            return; // 지도를 보여 주는 dialog 창이 보여지고 있는 동안에는 버턴에 대한 조작을 막음.
          }
        }

        let items = $("#nanogallery2").nanogallery2("data").items;
        $("#nanogallery2").nanogallery2("itemsSetSelectedValue", items, false);
        jQuery("#media_files").val("");
        selectedItems.length = 0;
      }

      function move_files_click(dialog_type) {
        if (use_ZulNsDialog) {
          let x = document.getElementById("dialog");
          if (window.getComputedStyle(x).display !== "none") {
            return; // 지도를 보여 주는 dialog 창이 보여지고 있는 동안에는 버턴에 대한 조작을 막음.
          }
        }

        if (!logged_in) {
          alertDialog("알림", not_logged_in, true);
          return;
        }

        if (!has_access_right()) {
          alertDialog("알림", "현재 선택한 폴더에 속한 파일(들)에 대해 접근 권한이 없습니다.", true);
          return;
        }
        /*
        let files_to_move = jQuery("#media_files").val();
        if (files_to_move == "") { */
        if (selectedItems.length == 0) {
          alertDialog("알림", "이동 또는 복사 대상으로 선택한 미디어가 없습니다.", true);
          return;
        }

        // 파일 이동용 폴더 선택 dialog 창의 폴더 트리는 주화면의 폴더 트리 메뉴 내용을 복사 후
        // 일부 수정하여 이용한다.
        let matches = document.getElementsByClassName("top_dir");
        let html_org =
          '<li class="dir" id="root_li_2"><a href="#">&#47</a></li>' +
          '<ul class="top_dir">' +
          matches[0].innerHTML +
          "</ul>";
        let new_data = html_org.replace(/href="#"/gi, 'href="#" onclick="return click_a2(this)"');
        document.getElementById("root_ul_2").innerHTML = new_data;
        // "root_ul_2"의 내용은 폴더 트리 메뉴의 내용과 동일한 class 상태를 갖게되므로
        // 폴더 트리 메뉴에서 "selected" class를 가진 항목에 대응하는 요소에 대해 "selected"
        // class를 제거하여야 한다.
        $("#root_ul_2 a.selected").removeClass("selected");
        $("#root_ul_2 li.selected").removeClass("selected");

        let explorer_dirs = document.querySelectorAll("#folder_list .dir");
        for (let index = 0; index < explorer_dirs.length; index++) {
          explorer_dirs[index].addEventListener(
            "click",
            function (ev) {
              opencloseSubDir(this);
              ev.stopPropagation();
            },
            false
          );

          /*
          let sub_dir = explorer_dirs[index].querySelector("ul");
          if (sub_dir) {
            set_beforeClass(explorer_dirs[index], "plus");
          }
          */
        }

        if (dialog_Usage != dialog_type) {
          dialog_Usage = dialog_type;
          // $("#myModalLabel2").text(dialog_Titles[dialog_type]);
          $("#folder_sel_dialog").dialog("option", "title", dialog_Titles[dialog_type]);
        }

        $;
        $("#selected_folder").val("");
        cur_selected_li2 = null;
        $("#folder_sel_dialog").dialog("open");
        return;

        // 아래는 ajax call로 파일 구조를 읽어와서 폴더 트리 메뉴를 구성하는 방식이다.
        $.ajax({
          url: "./php_scripts/explore_dir.php", // 요청 할 주소
          async: true,
          success: function (data) {
            let new_data = data.replace(/href="#"/gi, 'href="#" onclick="return click_a2(this)"');
            document.getElementById("root_ul_2").innerHTML =
              '<li class="dir" id="root_li_2"><a href="#" onclick="return click_a2(this)">&#47</a></li>' + new_data;

            let explorer_dirs = document.querySelectorAll("#folder_list .dir");
            //              .
            //              .
            //  * 이하는 위의 주화면의 폴더 트리 메뉴 내용을 복사 후
            //     일부 수정하여 이용하는 방식과 같은 내용이다.
          },
          error: function (request, status, error) {
            // 요청 실패
            alert(request.status + "\n" + "message:" + request.responseText + "\n" + "error:" + error);
          }, // error
        }); // $.ajax
      }

      function click_a2(clicked_item) {
        if (event) event.stopPropagation();
        $(clicked_item).addClass("selected");
        // $(".dir a").not(clicked_item).removeClass("selected");
        $("#root_ul_2 a").not(clicked_item).removeClass("selected");
        let clicked_a_object = $(clicked_item);
        let clicked_li = clicked_a_object[0].parentElement; // jquery object -> DOM object
        if (cur_selected_li2) cur_selected_li2.classList.remove("selected");
        cur_selected_li2 = clicked_li;
        cur_selected_li2.classList.add("selected");
        let selected_directory = get_full_path(clicked_li);
        $("#selected_folder").val(selected_directory);
        // document.getElementById("selected_folder").value = selected_directory;

        return false;
      }

      function btnOKClick() {
        let selected_directory = document.getElementById("selected_folder").value;
        if (selected_directory == "") {
          if (dialog_Usage == for_move_files) {
            alertDialog("알림", "이동할 파일이 위치할 목적 폴더를 선택하지 않았습니다.", true);
          } else {
            alertDialog("알림", "복사할 파일이 위치할 목적 폴더를 선택하지 않았습니다.", true);
          }
          return;
        }

        if (dialog_Usage == for_move_files) {
          moveMediaFiles(selected_directory);
        } else {
          copyMediaFiles(selected_directory);
        }
      }

      function move_media_files(confirm_answer, dest_dir) {
        if (confirm_answer != "OK") {
          return;
        }

        let files_to_move = jQuery("#media_files").val();
        let json = {};
        json.src_directory = "." + cur_directory;
        json.dest_directory = "." + dest_dir;
        json.moving_files = selectedItems;
        let json_data = JSON.stringify(json);

        $.ajax({
          url: move_files_url, // 요청 할 주소
          async: true,
          type: "POST", // type: 'POST', // GET, POST
          data: json_data,
          // dataType: "text", // xml, text, script, html
          contentType: "application/json", // **** 주.1 참조
          // 주.1) 이 문장을 빼면 node 서버에서 JSON.stringify(json) 시에 에러가 발생한다.
          dataType: "json", // response로 받는 data type
          success: function (data) {
            let jsonData = {};
            jsonData = data;
            let retStatus = jsonData.status;
            if (retStatus != "success") {
              alert(jsonData.status);
              return;
            }

            let arrayData = [];
            arrayData = jsonData.slider; // arrayData는 이동 완료한 파일 목록을 갖는다.
            // arrayLength = arrayData.length;
            // arrayData는 Object화가 되어 [key: value] 꼴이 되기 때문에 위와 같이 length 속성을 사용할 수 없다.
            let arrayLength = Object.values(arrayData).length;
            let ngy2data = $("#nanogallery2").nanogallery2("data");

            if (arrayLength > 0) {
              let item_deleted;
              let media_file_name;
              let selected_files = "";
              let counter_moving = selectedItems.length;
              selectedItems.length = 0;

              ngy2data.items.forEach(function (item) {
                if (item.selected) {
                  item_deleted = false;
                  media_file_name = item.title;

                  $.each(arrayData, function (index, file_item) {
                    if (media_file_name == file_item) {
                      // 이동 완료한 파일 목록에 들어 있으면
                      item.delete(); // gallery item 에서 삭제
                      item_deleted = true;
                      return false; // = break 역할
                    }
                  });

                  if (!item_deleted) {
                    // (이동 완료되지 않아) 삭제처리 되지 않은 item인 경우
                    if (selected_files == "") {
                      selected_files = media_file_name;
                    } else {
                      selected_files += ", " + media_file_name;
                    }
                    selectedItems.push(media_file_name);
                  }
                }
              });

              jQuery("#media_files").val(selected_files);
              $("#nanogallery2").nanogallery2("resize");
              let counter_moved = counter_moving - selectedItems.length;
              if (selectedItems.length > 0) {
                alertDialog(
                  "알림",
                  "선택한 " + counter_moving + "개 파일 중" + counter_moved + "개 파일이 이동되었습니다.",
                  true
                );
              } else {
                alertDialog("알림", "선택한 파일(들)이 이동되었습니다.", true);
              }

              let has_validItem = false;
              $.each(ngy2data.items, function (index, item) {
                if (item.kind != "album") {
                  if (!item.deleted) {
                    has_validItem = true;
                    return false;
                  }
                }
              });

              if (!has_validItem) $("#no_media_msg").css("display", "block");
            }

            // $("#dragable_modal2").modal("hide");
            $("#folder_sel_dialog").dialog("close");
          },
          error: function (request, status, error) {
            // 요청 실패
            alert("code:" + request.status + "\n" + "message:" + request.responseText + "\n" + "error:" + error);
          },
        });
      }

      function moveMediaFiles(dest_dir) {
        if (!has_access_right(dest_dir)) {
          alertDialog("알림", no_access_right, true);
          return;
        }

        if (dest_dir == cur_directory) {
          alertDialog("알림", "선택한 폴더가 이동 대상 파일이 속한 폴더입니다.", true);
          return;
        }

        /*
        let confirm_msg =
          " ****** (주의) ****** \n" +
          "선택한 미디어 파일(들)을 이동할 폴더로 옮깁니다. \n" +
          "옮겨 갈 폴더 : " +
          dest_dir +
          "\n" +
          "진행하시겠습니까 ?";
        if (confirm(confirm_msg) != true) {
          return;
        }
        */

        let confirm_msg =
          "선택한 미디어 파일(들)을 지정한 폴더로 옮깁니다.<br>" +
          "&nbsp;&nbsp;( 옮겨 갈 폴더 : " +
          dest_dir +
          " )<br>" +
          "진행하시겠습니까 ?";
        showConfirmDialog(confirm_msg, "미디어 파일 옮김", move_media_files, dest_dir);
      }

      function copy_media_files(confirm_answer, dest_dir) {
        if (confirm_answer != "OK") {
          return;
        }

        let files_to_move = jQuery("#media_files").val();
        let json = {};
        json.src_directory = "." + cur_directory;
        json.dest_directory = "." + dest_dir;
        json.copying_files = selectedItems;
        let json_data = JSON.stringify(json);

        $.ajax({
          url: copy_files_url, // 요청 할 주소
          async: true,
          type: "POST", // type: 'POST', // GET, POST
          contentType: "application/json", // **** 주.1 참조
          // 주.1) 이 문장을 빼면 node 서버에서 JSON.stringify(json) 시에 에러가 발생한다.
          data: json_data,
          // dataType: "text", // xml, text, script, html
          dataType: "json", // response로 받는 data type
          success: function (data) {
            let jsonData = {};
            jsonData = data;
            let retStatus = jsonData.status;
            if (retStatus != "success") {
              alert(jsonData.status);
              return;
            }

            let arrayData = [];
            arrayData = jsonData.slider; // arrayData는 이동 완료한 파일 목록을 갖는다.
            // arrayLength = arrayData.length;
            // arrayData는 Object화가 되어 [key: value] 꼴이 되기 때문에 위와 같이 length 속성을 사용할 수 없다.
            let arrayLength = Object.values(arrayData).length;
            let ngy2data = $("#nanogallery2").nanogallery2("data");

            if (arrayLength > 0) {
              let item_copied;
              let media_file_name;
              let selected_files = "";
              let counter_copying = selectedItems.length;
              selectedItems.length = 0;

              ngy2data.items.forEach(function (item) {
                if (item.selected) {
                  item_copied = false;
                  media_file_name = item.title;

                  $.each(arrayData, function (index, file_item) {
                    if (media_file_name == file_item) {
                      // 복사 완료한 파일 목록에 들어 있으면
                      // item의 select 상태를 해제한다.
                      $("#nanogallery2").nanogallery2("itemsSetSelectedValue", [item], "false");
                      item_copied = true;
                      return false; // = break 역할
                    }
                  });

                  if (!item_copied) {
                    // 복사 완료되지 않은 item인 경우
                    if (selected_files == "") {
                      selected_files = media_file_name;
                    } else {
                      selected_files += ", " + media_file_name;
                    }
                    selectedItems.push(media_file_name);
                  }
                }
              });

              jQuery("#media_files").val(selected_files);
              $("#nanogallery2").nanogallery2("resize");
              let counter_copied = counter_copying - selectedItems.length;
              if (selectedItems.length > 0) {
                alertDialog(
                  "알림",
                  "선택한 " + counter_copying + "개 파일 중" + counter_copied + "개 파일이 복사되었습니다.",
                  true
                );
              } else {
                alertDialog("알림", "선택한 파일(들)이 복사사되었습니다.", true);
              }
            }

            // $("#dragable_modal2").modal("hide");
            $("#folder_sel_dialog").dialog("close");
          },
          error: function (request, status, error) {
            // 요청 실패
            alert("code:" + request.status + "\n" + "message:" + request.responseText + "\n" + "error:" + error);
          },
        });
      }

      function copyMediaFiles(dest_dir) {
        if (!has_access_right(dest_dir)) {
          alertDialog("알림", no_access_right, true);

          return;
        }

        if (dest_dir == cur_directory) {
          alertDialog("알림", "선택한 폴더가 복사 대상 파일이 속한 폴더입니다.", true);
          return;
        }

        /*
        let confirm_msg =
          " ****** (주의) ****** \n" +
          "선택한 미디어 파일(들)을 선택한 폴더에 복사합니다. \n" +
          "복사할 폴더 : " +
          dest_dir +
          "\n" +
          "진행하시겠습니까 ?";
        if (confirm(confirm_msg) != true) {
          return;
        }  */

        let confirm_msg =
          "선택한 미디어 파일(들)을 지정한 폴더에 복사합니다.<br>" +
          "&nbsp;&nbsp;( 복사할 폴더 : " +
          dest_dir +
          " )<br>" +
          "진행하시겠습니까 ?";
        showConfirmDialog(confirm_msg, "미디어 파일 복사", copy_media_files, dest_dir);
      }

      function delete_media_files(confirm_answer) {
        if (confirm_answer != "OK") {
          return;
        }

        let json = {};
        json.directory = "." + cur_directory;
        json.files = selectedItems;
        let json_data = JSON.stringify(json);

        $.ajax({
          url: delete_files_url, // 요청 할 주소
          async: false,
          type: "POST", // type: 'POST', // GET, POST
          data: json_data,
          // dataType: "text", // xml, text, script, html
          contentType: "application/json", // **** 주.1 참조
          // 주.1) 이 문장을 빼면 node 서버에서 JSON.stringify(json) 시에 에러가 발생한다.
          dataType: "json", // response로 받는 data type
          success: function (data) {
            let jsonData = {};
            jsonData = data;
            let retStatus = jsonData.status;
            if (retStatus != "success") {
              alert(jsonData.status);
              return;
            }

            let arrayData = [];
            arrayData = jsonData.slider; // arrayData : 삭제 처리 완료한 파일 목록
            // arrayLength = arrayData.length;
            // arrayData는 Object화가 되어 [key: value] 꼴이 되기 때문에 위와 같이 length 속성을 사용할 수 없다.
            let arrayLength = Object.values(arrayData).length;
            let ngy2data = $("#nanogallery2").nanogallery2("data");

            if (arrayLength > 0) {
              let item_deleted;
              let media_file_name;
              let selected_files = "";
              let counter_deleting = selectedItems.length;
              selectedItems.length = 0;

              ngy2data.items.forEach(function (item) {
                if (item.kind != "album" && item.selected) {
                  // kind가 "album"인 item은 제외한다.
                  item_deleted = false;
                  media_file_name = item.title;

                  $.each(arrayData, function (index, file_item) {
                    if (media_file_name == file_item) {
                      item.delete(); // gallery item 에서 삭제
                      item_deleted = true;
                      return false; // = break 역할
                    }
                  });

                  if (!item_deleted) {
                    if (selected_files == "") {
                      selected_files = media_file_name;
                    } else {
                      selected_files += ", " + media_file_name;
                    }
                    selectedItems.push(media_file_name);
                  }
                }
              });

              jQuery("#media_files").val(selected_files);
              $("#nanogallery2").nanogallery2("resize");
              let counter_deleted = counter_deleting - selectedItems.length;
              if (selectedItems.length > 0) {
                alertDialog(
                  "알림",
                  "선택한 " + counter_deleting + "개 파일 중" + counter_deleted + "개 파일이 삭제되었습니다.",
                  true
                );
              } else {
                alertDialog("알림", "선택한 파일(들)이 삭제되었습니다.", true);
              }
            }

            let has_validItem = false;
            $.each(ngy2data.items, function (index, item) {
              if (item.kind != "album") {
                if (!item.deleted) {
                  has_validItem = true;
                  return false;
                }
              }
            });

            if (!has_validItem) $("#no_media_msg").css("display", "block");
          },
          error: function (request, status, error) {
            // 요청 실패
            alert("code:" + request.status + "\n" + "message:" + request.responseText + "\n" + "error:" + error);
          },
        });
      }

      function delete_files_click() {
        if (use_ZulNsDialog) {
          let x = document.getElementById("dialog");
          if (window.getComputedStyle(x).display !== "none") {
            return; // 지도를 보여 주는 dialog 창이 보여지고 있는 동안에는 버턴에 대한 조작을 막음.
          }
        }

        if (!logged_in) {
          alertDialog("알림", not_logged_in, true);
          return;
        }

        if (!has_access_right()) {
          alertDialog("알림", "선택한 폴더에 속한 파일에 대한 삭제 권한이 없습니다.", true);
          return;
        }
        /*
        let files_to_delete = jQuery("#media_files").val();
        if (files_to_delete == "") {  */
        if (selectedItems.length == 0) {
          alertDialog("알림", "삭제 대상으로 선택한 미디어가 없습니다.", true);
          return;
        }

        // let last_slash_pos = cur_directory.lastIndexOf("/");
        // let cur_folder_name = cur_directory.substring(last_slash_pos + 1);
        // let base_msg = "선택한 미디어 파일(들)을 삭제합니다.\n";
        let confirm_msg = "선택한 미디어 파일(들)이 삭제되고 복원할 수 없습니다. <br>진행하시겠습니까 ?";
        showConfirmDialog(confirm_msg, "미디어 파일 삭제", delete_media_files);
      }

      function up_folder_click() {
        if (use_ZulNsDialog) {
          let x = document.getElementById("dialog");
          if (window.getComputedStyle(x).display !== "none") {
            return; // 지도를 보여 주는 dialog 창이 보여지고 있는 동안에는 버턴에 대한 조작을 막음.
          }
        }

        let elem_id = "";

        // id 속성이 없는 경우 에러가 발생하므로 try ~ catch 문으로 처리함
        try {
          elem_id = cur_selected_li.id;
        } catch (e) {}

        // 현재 선택된 폴더가 최상위 폴더이면 skip 한다.
        if (elem_id != "root_li") {
          let parent_ul = cur_selected_li.parentElement;
          let p_parent_li;
          if (parent_ul.className == "top_dir") {
            p_parent_li = $("#root_li");
          } else {
            p_parent_li = $(parent_ul).parent();
          }

          let child_a = p_parent_li.children("a:eq(0)");
          if (child_a) {
            setTimeout(() => {
              // 선택한 폴더를 상위 폴더로 바꾸도록 한다.
              click_a(child_a[0]);
            }, 100);
          }
        }
      }

      // 아래 함수는 갤러리 창에 폴더를 나타내는 thumbnail 이미지는 보이지 않도록 한다.
      // 작업 대상이 "폴더"로 전환 시에 갤러리 창을 복원할 수 있도록 tags 값이 "folder" 인
      // item에 대한 정보를 미리 저장해 둔다.
      function DeleteFolderImages() {
        let ngy2data = $("#nanogallery2").nanogallery2("data");
        gallery_folder_items.length = 0; // empty array
        folder_thumb_sizes.length = 0; // empty array

        $.each(ngy2data.items, function (index, item) {
          if (item.kind == "album" || item.deleted) return true; // = continue

          if (item.tags[0] == "folder") {
            gallery_folder_items.push(item);
            let folder_thumb_size = {};

            // ** ngy2data.gallery.items는 뒤의 item 삭제 함수 호출 시에 해당 item이 바로 삭제되므로
            //   항상 첫번째 요소가 참조 요소가 된다. (tags 값이 "folder" 인 item이 앞에 나타나므로)
            folder_thumb_size.width = ngy2data.gallery.items[0].width;
            folder_thumb_size.height = ngy2data.gallery.items[0].height;
            folder_thumb_sizes.push(folder_thumb_size);

            item.delete(); // gallery를 구성하는 item 목록 에서 삭제
          } else {
            return false; // = break  (이후는 끝까지 미디어 파일 item 이다.)
          }
        });

        /*
        if (gallery_folder_items.length > 0) {
          $("#nanogallery2").nanogallery2("resize");
        }
        */
      }

      // 갤러리 창에 폴더용 thumbnail을 나타내기 위한 html 구성문을 얻는 함수
      function build_folder_item_html(start_num, folder_path, folder_name, has_humbnail) {
        let html_item = "";

        let sn = start_num + 1;
        let item_tag = tagDesc[0];
        let rel_path = folder_path.substr(2);
        let mediaURL = rel_path + "/" + folder_name;
        let thumbnailURL;

        if (has_humbnail) {
          thumbnailURL = rel_path + "/thumbnail/" + folder_name + ".jpg";
        } else {
          thumbnailURL = "prog_resources/images/folder_image.png";
        }

        html_item =
          s1 + "ID_" + sn.toString() + s1_1 + mediaURL + s2 + thumbnailURL + s2_1 + item_tag + s3 + folder_name + s4;

        return html_item;
      }

      // 주어진 NGY2 item으로 갤러리 구성용 html을 얻는 함수.
      function build_gallery_html2(gallery_items, start_number = 0) {
        let html = "";

        // const tagDesc = ["folder", "file"];
        let mediaURL;
        let thumbnail_src;
        let item_tag;
        let html_item;
        let sn = start_number;
        let base_url_len = base_url.length;
        let pos;

        if (gallery_items.length > 0) {
          // item_tag = tagDesc[0];
          $.each(gallery_items, function (index, item) {
            mediaURL = item.src;
            // mediaURL에서 선두의 base_url 부분 제거
            pos = mediaURL.indexOf(base_url);
            if (pos == 0) {
              mediaURL = mediaURL.substr(base_url_len);
            }

            thumbnail_src = item.thumbs.url.lN.me;
            // thumbnail_src에서 선두의 base_url 부분 제거
            pos = thumbnail_src.indexOf(base_url);
            if (pos == 0) {
              thumbnail_src = thumbnail_src.substr(base_url_len);
            }

            item_tag = item.tags[0];

            sn++;
            html_item =
              s1 +
              "ID_" +
              sn.toString() +
              s1_1 +
              mediaURL +
              s2 +
              thumbnail_src +
              s2_1 +
              item_tag +
              s3 +
              item.title +
              s4;

            html += html_item;
          });
        }

        return html;
      }

      function FieldSelect() {
        if (use_ZulNsDialog) {
          let x = document.getElementById("dialog");
          if (window.getComputedStyle(x).display !== "none") {
            event.preventDefault();
            return; // 지도를 보여 주는 dialog 창이 보여지고 있는 동안에는 버턴에 대한 조작을 막음.
          }
        }

        let selectedField = null;
        let fields = document.getElementsByName("field_item");
        let fieldId = -1;

        for (let i = 0; i < fields.length; i++) {
          if (fields[i].checked == true) {
            selectedField = fields[i];
            fieldId = i;
            break;
          }
        }

        if (selectedField != null) {
          let cur_option_val = $("#nanogallery2").nanogallery2("option", "thumbnailSelectable");

          switch (fieldId) {
            case 0:
              $("#folder_para").attr("style", "display:block;");
              $("#file_para").attr("style", "display:none;");
              if (cur_option_val) {
                $("#nanogallery2").nanogallery2("option", "thumbnailSelectable", false);
              }

              if (gallery_folder_items.length == 0) break;

              // 작업 모드가 "파일"인 동안에 갤러리 창의 thumbnail 배치 방식이 바뀌었을 경우에는
              // 기존의 folder thumbnail 이미지 크기 데이터가 무용한 상태가 되므로 갤러리 데이터로
              // 부터 역으로 html을 도출하는 함수를 이용한다.
              if (thumbnail_placeType != prev_thumbnail_placeType) {
                if (
                  (thumbnail_placeType == 2 && prev_thumbnail_placeType != 2) ||
                  (thumbnail_placeType != 2 && prev_thumbnail_placeType == 2)
                ) {
                  // get_media_list(cur_directory);
                  let folder_html = build_gallery_html2(gallery_folder_items);
                  let file_html = build_gallery_html(gallery_folder_items.length);
                  let gallery_html = folder_html + file_html;
                  renewGallery(base_url, gallery_html);

                  break;
                }
              }

              // 아래는 작업 대상을 '폴더"에서 "파일"로 변경 시 저장해 둔 folder item 정보를 이용하여
              // 갤러리 창에서 삭제된 folder item을 복원한다.
              // 참고 url : https://codepen.io/Kris-B/pen/wJKowg
              let index = 0;
              let albumID = "0";
              let thumb_src;
              let mediaURL;
              let ngy2data = $("#nanogallery2").nanogallery2("data");
              let instance = $("#nanogallery2").nanogallery2("instance");
              let ngy2_files = [];
              let file_thumb_sizes = [];

              // 갤러리 창에 폴더 thumbnail 들이 다시 표시될 때 폴더 thumbnail 보다 미디어 thumbnail들이
              // 뒤에 표시되도록 하기 위해 미디어 thumbnail 아이템들을 별도의 배열에 보존 후 삭제한다.
              $.each(ngy2data.items, function (index, ng2_item) {
                if (ng2_item.kind == "album" || ng2_item.deleted) {
                  return true; // continue
                }

                if (ng2_item.tags[0] == "file") {
                  ngy2_files.push(ng2_item);

                  let file_thumb_size = {};
                  // ** ngy2data.gallery.items는 뒤의 item 삭제 함수 호출 시에 해당 item이 바로 삭제되므로
                  //   항상 첫번째 요소가 참조 요소가 된다.
                  file_thumb_size.width = ngy2data.gallery.items[0].width;
                  file_thumb_size.height = ngy2data.gallery.items[0].height;
                  file_thumb_sizes.push(file_thumb_size); // thumbnail 크기 정보 저장
                  ngy2data.items[index].delete();
                  // 위의 delete 함수를 실행하면 ng2data.items 배열에서는 실제 삭제되지는 않고, 해당 item의
                  // "deleted" property 값이 true로 설정되며, ngy2data.gallery.items 배열에서는 해당 item이
                  // 바로 삭제되어 갯수가 하나 줄어든다. (ngy2data.gallery.items = 갤러러 창에 표시되는 요소)
                }
              });

              // 삭제 표시된 item을 ng2 data 배열에서 제거하여 불필요한 item이 쌓이는 것을 방지한다.
              // * items[0]는 앨범 정보 data를 갖는다.
              $("#nanogallery2").nanogallery2("data").items.splice(1);

              // create the new item for folder thumbnail then add to nanogallery2 instance
              let ID;
              let k = 0;
              gallery_folder_items.forEach(function (item) {
                // create the new item
                ID = "ID_" + ngy2data.items.length;
                // Parameters: instance, title, description, ID, albumID, kind, tags
                let newItem = NGY2Item.New(instance, item.title, "", ID, albumID, "image", "folder");

                // define thumbnail -> image displayed in the gallery
                thumb_src = item.thumbs.url.lN.me;
                // newItem.thumbSet(thumb_src, 134, 178);
                let width = folder_thumb_sizes[k].width;
                let height = folder_thumb_sizes[k].height;
                newItem.thumbSet(thumb_src, width, height);

                // define URL of the media to display in lightbox
                mediaURL = item.src;
                newItem.setMediaURL(mediaURL, "img");

                // currently displayed album ?
                // if (ngy2data.items[ngy2data.gallery.albumIdx].GetID() == 0) {
                // add new item to current Gallery Object Model (GOM)
                newItem.addToGOM();
                k += 1;
                // }
              });

              if (file_thumb_sizes.length > 0) {
                // 작업 대상이 "파일"로 되어 있는 상태에서 화면 크기의 변화로 갤러리 창에 표시되는 thumbnail
                // 이미지 크기가 바뀐 경우 작업 대상이 "폴더"로 복귀 시에 folder item thumbnail과 media item
                // thumbnail의 높이(또는 너비)가 다르게 설정되는 것을 방지하여야 한다.

                // "일정 높이" 모드 ?
                if (thumbnail_placeType == 0 || thumbnail_placeType == 1) {
                  let ref_height = folder_thumb_sizes[0].height;

                  file_thumb_sizes.forEach(function (item) {
                    if (item.height != ref_height) {
                      let ratio = item.height / ref_height;
                      item.height = ref_height;
                      item.width = Math.round(item.width / ratio);
                    }
                  });
                } else {
                  // "일정 너비" 모드인 경우
                  let ref_width = folder_thumb_sizes[0].width;

                  file_thumb_sizes.forEach(function (item) {
                    if (item.width != ref_width) {
                      let ratio = item.width / ref_width;
                      item.width = ref_width;
                      item.height = Math.round(item.height / ratio);
                    }
                  });
                }

                // create the new item for media thumbnail then add to nanogallery2 instance
                k = 0;
                ngy2_files.forEach(function (item) {
                  // create the new item
                  ID = "ID_" + ngy2data.items.length;
                  // Parameters: instance, title, description, ID, albumID, kind, tags
                  let newItem = NGY2Item.New(instance, item.title, "", ID, albumID, "image", "file");

                  // define thumbnail -> image displayed in the gallery
                  thumb_src = item.thumbs.url.lN.me;
                  // newItem.thumbSet(thumb_src, 232, 178);
                  newItem.thumbSet(thumb_src, file_thumb_sizes[k].width, file_thumb_sizes[k].height);

                  // define URL of the media to display in lightbox
                  mediaURL = item.src;
                  let mediaType = "img";
                  if (item.mediaKind == "video") mediaType = "video";
                  newItem.setMediaURL(mediaURL, mediaType); // mediaType : 'img', 'iframe', 'video'

                  // currently displayed album ?
                  // if (ngy2data.items[ngy2data.gallery.albumIdx].GetID() == 0) {
                  // add new item to current Gallery Object Model (GOM)
                  newItem.addToGOM();
                  k += 1;
                  // }
                });
              }

              // refresh the display (-> only once if you add multiple items)
              // $("#nanogallery2").nanogallery2("resize");

              // 위의 모든 내용을 삭제하고 그냥 get_media_list 함수를 이용할 수도 있다.
              // get_media_list(cur_directory);
              break;
            case 1:
              // 작업 모드 변경 당시의 갤러리 창의 thumnail 이미지 배치 모드 확인
              prev_thumbnail_placeType = thumbnail_placeType;

              // 갤러리 창에 폴더를 나타내는 이미지는 보이지 않도록 한다.
              DeleteFolderImages();
              $("#folder_para").attr("style", "display:none;");
              jQuery("#media_files").val("");
              selectedItems.length = 0;
              $("#file_para").attr("style", "display:block;");
              let thumbnailSelectable_ = false;
              if (has_access_right()) {
                // if (document.getElementById("show_delete_icon").checked) {
                let checked = $("#field_file").is(":checked");
                if (checked) thumbnailSelectable_ = true;
                // }
              }
              if (cur_option_val != thumbnailSelectable_) {
                $("#nanogallery2").nanogallery2("option", "thumbnailSelectable", thumbnailSelectable_);
              }
              break;
          }
        }
      }

      // search_path에 해당하는 "a" tag element를 얻는 함수수
      function get_tag_a_element(search_path) {
        let child_a = null;

        if (search_path == "/") {
          child_a = $("#root_li").children("a:eq(0)");
          return child_a;
        }

        let search_path_ = search_path.substring(1); // 선두의 "/" 제거
        let paths = search_path.split("/");
        let levels = paths.length;
        let top_lis = $("ul.top_dir").children();
        if (levels == 1) {
          for (let i = 0; i < top_lis.length; i++) {
            child_a = top_lis.eq(i).children("a:eq(0)");
            if (child_a.text() == paths[0]) {
              return child_a;
            }
          }

          return child_a; // not found matched "a" tag element
        }

        let cur_lis;
        let p_ul;
        for (let i = 1; i < levels; i++) {
          if (i == 1) {
            cur_lis = top_lis;
          } else {
            cur_lis = p_ul.children("li");
          }

          for (let j = 0; j < cur_lis.length; j++) {
            child_a = cur_lis.eq(j).children("a:eq(0)");
            if (child_a.text() == paths[i]) {
              if (i == levels - 1) {
                return child_a;
              } else {
                p_ul = cur_lis.eq(j).children("ul:eq(0)");
              }
            }
          }

          child_a = null;
        }

        return child_a; // this case should not be happen
      }

      function setupFolderTree() {
        // const response = await fetch('./explore_dir.php');

        $.ajax({
          url: "./php_scripts/explore_dir.php", // 요청 할 주소
          async: false,
          success: function (data) {
            document.getElementById("root_ul").innerHTML =
              '<li class="dir" id="root_li"><a href="#">&#47</a></li>' + data;
            // 참고) DOM 계층구조에 맞게 할려면 아래와 같이 하는게 맞으나 계층구조를 맞추면
            // 폴더트리 메뉴 표시 - 단계별 들여 쓰기 - 가 어긋나서 최상단 메뉴가 독립되는 방식
            // 으로 하였다.
            // '<li class="dir" id="root_li"><a href="#">&#47</a>' + data + "</li>";
          },
          error: function (request, status, error) {
            // 요청 실패
            alert(request.status + "\n" + "message:" + request.responseText + "\n" + "error:" + error);
          }, // error
        }); // $.ajax
      }

      function alertDialog(alert_title, alert_message, show_close_btn = false, h_pos = "center", y_pos = "top+200") {
        // 아래에서 "alert_message"는 Dialog box 내에 배치한 메시지 표시용의 <p> 태그 요소 id 이다.
        document.getElementById("alert_message").innerText = alert_message;
        if (show_close_btn) {
          $("#alert_btn_div").css("display", "block");
        } else {
          $("#alert_btn_div").css("display", "none");
        }

        $("#alert_dialog")
          .dialog({
            modal: true,
            width: 406,
            minHeight: 100, // 높이는 알림 문장 길이에 따라 가변되므로 최소 높이만 규정한다.
            draggable: false,
            resizable: false,
            title: alert_title,
            position: {
              my: h_pos, // 수평위치
              at: y_pos, // 수직위치
              of: "#container_", // 위치좌표의 기준 요소
            },
          })
          .dialog("open");
      }

      function closeAlertDialog() {
        $("#alert_dialog").dialog("close");
      }

      async function check_node_server(check_url) {
        const response = await fetch(check_url);
        const data_text = await response.text();

        return data_text;
      }

      function init() {
        /*
        // check_node_server 함수를 호출 후 결과를 받기 전에 뒤의 get_media_list 함수가 호출되어
        // node 환경에서 실행시 잘못된 thumbnail_build_url 값(= thumbnail_build2.php)이 반영되어
        // 에러가 발생함 -> check_node_server 함수 호출문을 <body> 내의 선두에 두어 보았으나 같은
        // 결과를 얻어서 아예 check_node_server 함수 결과문 처리문에서서 내애 기존의 $(document).ready 함수를
        // 호출하는 것으로 변경하였다.
        check_node_server("/is_node_server")
          .then((data) => {
            if (data.substr(0, 3) == "Yes") {
              // 서버가 Gallery용 Node docker이면,
              server_On_Node = true; // = down URL for Node Server
            }
          })
          .finally(() => {
            if (server_On_Node) {
              move_files_url = "/move_files";
              copy_files_url = "/copy_files";
              delete_files_url = "/delete_files";
              thumbnail_build_url = "/thumbnail_build";
            }
          });
          */
        let explorer_dirs = document.querySelectorAll("#explorer_folder .dir");
        for (let index = 0; index < explorer_dirs.length; index++) {
          explorer_dirs[index].addEventListener(
            "click",
            function (ev) {
              opencloseSubDir(this);
              ev.stopPropagation();
            },
            false
          );

          let sub_dir = explorer_dirs[index].querySelector("ul");
          if (sub_dir) {
            set_beforeClass(explorer_dirs[index], "plus");
          }
        }

        get_media_list("./");
        document.getElementById("media_path").value = "/";
        cur_directory = "./";
        cur_selected_li = document.getElementById("root_li");
        cur_selected_li.classList.add("root");
        $("#root_li").addClass("selected");
        $("#root_li a:eq(0)").addClass("selected");
        cur_a_object = $("#root_li a:eq(0)");

        document.getElementById("btnLogin").onclick = fa;

        session_check(false);
        if (logged_in) {
          document.getElementById("signIn").value = "로그아웃";
        }
        /*
        document.getElementById('fileupload').addEventListener('change', function(e) {
          if (e.target.files[0]) {
            uploadFile(e.target.files);
          }
        });
        */

        $(".dir a").click(function () {
          event.preventDefault();
          // 이 문장은 동적으로 생성된 "a" 태그 아이템에는 적용되지 않는다.
          // $(document).on("click", ".dir a", function() {  // 이 문장은 전혀 작동하지 않는다.
          // 폴더 트리에서 임의의 폴더(<a> tag)에 클릭시 발생하는 event에 대한 처리 함수
          // 선택된 폴더 메뉴의 색상을 다르게 표시하도록 클릭한 <a> tag에 "selected" class를 부여한다.
          // * 이 함수 처리 후에 'opencloseSubDir' 함수가 호출된다.
          // * 지도 맵 dialog가 show 중에는 "a" 태그에 마우스 클릭을 무시한다.
          let go_ahead = true;
          if (use_ZulNsDialog) {
            let x = document.getElementById("dialog");
            if (window.getComputedStyle(x).display !== "none") {
              go_ahead = false;
            }
          }
          if (go_ahead) {
            /*
            if (folder_selection_mode) {
              // folder_selection_mode = false;
              if (event) event.stopPropagation();
              let clicked_a_object = $(this);
              let clicked_li = clicked_a_object[0].parentElement; // jquery object -> DOM object
              let selected_directory = get_full_path(clicked_li);
              if (selected_directory != cur_directory) {
                moveMediaFiles(selected_directory);
              }
            } else {  */
            $(this).addClass("selected");
            $(".dir a").not(this).removeClass("selected");
            cur_a_object = $(this);
            // }
          }
          //cur_a_object = $(this);
          initiated_a_tag = true; // <a> tag 클릭에 의한 event 발생임을 알림
          // return false;
        });

        // $("#nanogallery2").on("itemSelected.nanogallery2", onSelectedItem);
        //if (logged_user_level > 1) {
        document.getElementById("show_delete_icon").setAttribute("disabled", true);
        document.getElementById("show_delete_icon").checked = false; // show_deleteIcon;
        //}

        // 로그인 창의 암호 입력란에서 "엔터" 키를 누르면 "로그인" 버턴에 대한 Click 동작으로 전달한다.
        document.getElementById("password").addEventListener("keydown", function (evt) {
          switch (
            evt.code // evt.code 값을 참조
          ) {
            case "Enter": // evt.code의 반환값이 "Enter" 스트링이면,
              evt.preventDefault(); //preventDefault로 기본 키 동작을 무시
              document.getElementById("btnLogin").click();
              break;
          }
        });

        $(".modal-dialog").draggable({
          cursor: "move",
          handle: ".dragable_touch",
        });

        // retrieve selected items on nanogallery2
        $("#nanogallery2").on("itemSelected.nanogallery2 itemUnSelected.nanogallery2", function () {
          let ngy2data = $("#nanogallery2").nanogallery2("data");

          // counter
          // jQuery("#nb_selected").text(ngy2data.gallery.nbSelected);

          // selected items
          let sel = "";
          selectedItems.length = 0;

          ngy2data.items.forEach(function (item) {
            if (item.kind != "album") {
              // **** album은 삭제, 이동의 대상이 될 수 없다.
              if (item.selected) {
                if (sel == "") {
                  sel = item.title;
                } else {
                  sel += ", " + item.title;
                }
                selectedItems.push(item.title);
              }
            }
          });
          jQuery("#media_files").val(sel);
        });

        $("#btnApiReset").on("click", function (evt) {
          evt.preventDefault();

          $("#drag-and-drop-zone").dmUploader("reset");
          $("#files").html(no_queued_file);
          uploaded_counter = 0;
          enrolled_counter = 0;
          document.getElementById("debug_msg").value = no_queued_msg;
        });

        // 업로드 대기 파일 목록 테이블의 높이를 미디어 파일 업로드 창의 높이에 따라 가변하기
        // 위한 ResizeObserver 설정
        const list_area = document.getElementById("upload_list");
        const observer = new ResizeObserver((entries) => {
          for (let entry of entries) {
            const { width, height } = entry.contentRect;
            list_area.style.height = String(height - 40) + "px"; // -40 : footer 높이 공제
          }
        });

        // 업로드 대기 파일 목록 테이블의 부모 div의 크기 변화를 감시한다.
        const flex_div = document.getElementById("flex_div");
        observer.observe(flex_div);

        // 폴더 목록 테이블의 높이를 폴더 선택 창의 높이에 따라 가변하기
        // 위한 ResizeObserver 설정
        const list_area2 = document.getElementById("folder_list");
        const observer2 = new ResizeObserver((entries) => {
          for (let entry of entries) {
            const { width, height } = entry.contentRect;
            let new_height = height - 41; // -35 : 상단 높이 + margin 공제
            if (new_height < 424) new_height = 424;
            list_area2.style.height = String(new_height) + "px";
          }
        });

        // 폴더 선택 dialog 창의 폴더 목록 테이블의 부모 div의 크기 변화를 감시한다.
        const flex_div2 = document.getElementById("flex_div2");
        observer2.observe(flex_div2);

        // 브라우저 페이지 이동 시에 처리하는 루틴
        window.onpopstate = function (e) {
          let hash = window.location.hash;
          let search = decodeURIComponent(window.location.search);
          /*
          if (hash != "") {
            return;
          }
          */
          let search_path;
          if (search != "") {
            let search_prefix = search.substring(0, 8);
            if (search_prefix != "?folder=") return;

            search_path = search.substring(8);
            if (cur_directory == "." + search_path) return;
          }

          // history popup 시 나타난 경로에 해당하는 태그 "a" element를 알아낸다.
          let tag_a_element = get_tag_a_element(search_path);
          if (tag_a_element != null) {
            by_history_popup = true;
            click_a(tag_a_element[0], true);
          }

          // let last_folder = tag_a_element.text();
          // console.log("last_folder = " + last_folder);
        };

        // 지도 보기용 창으로 bootstrap dialog box를 이용 시는 아래 코드를 활성화한다.
        if (!use_ZulNsDialog) {
          $("#map_dialog").dialog({
            autoOpen: false,
            title: "Google map...",
            // position: { my: "left top", at: "left bottom", of: button },
            modal: true,
            minWidth: 500,
            width: 600, // default value = 300
            minHeight: 410,
            height: 410,
            resizable: true,
            open: function () {
              dialog_response = "notOK";
            },
            close: function () {
              if (dialog_response == "OK") {
              }
            },
          });
        }

        $("#upload_dialog").dialog({
          autoOpen: false,
          title: "파일 업로드",
          // position: { my: "left top", at: "left bottom", of: button },
          modal: true,
          width: 700, // default value = 300
          minWidth: 700,
          Height: 550,
          minHeight: 550,
          resizable: true,
          beforeClose: function (event, ui) {
            if (uploaded_counter > 0) {
              needThumbnailWork = true;
            } else {
              needThumbnailWork = false;
            }

            if (uploaded_counter < enrolled_counter) {
              let confirm_msg =
                " ****** (주의) ****** \n" +
                "업로드 대상 파일 중에 업로드 되지 않은 파일이 있습니다. \n" +
                "미디어 파일 업로드 작업을 끝내시겠습니까 ?";
              if (confirm(confirm_msg) == true) {
                $("#btnApiReset").trigger("click"); // reset button click
                return true; // 업로드 창 닫기 승인
              } else {
                return false; // 업로드 창 닫기 거부
              }
            } else {
              return true; // 업로드 창 닫기 승인
            }
          },
          open: function () {
            dialog_response = "notOK";
          },
          close: function () {
            if (needThumbnailWork) {
              // alertDialog("알림", "업로드한 미디어 파일에 대한 썸네일 파일을 작성 중입니다.");
              // setTimeout를 사용하지 않으면 alert_dialog가 나타나지 않는다.
              setTimeout(() => {
                build_thumbnail(cur_directory, false); // 업로드한 파일에 대한 thumbnail 생성
                // document.getElementById("alert_message").innerText = "갤러리 창을 재구성 중입니다.";
                post_file_upload = true; // history push를 하지 않도록 함.
                get_media_list(cur_directory, true); // 업로드한 파일이 갤러리 창에 보이도록 한다
                // closeAlertDialog();
              }, 100);
            }
          },
          buttons: [],
        });

        $("#folder_sel_dialog").dialog({
          autoOpen: false,
          title: "이동시킬 파일(들)이 위치할 폴더 선택",
          // position: { my: "left top", at: "left bottom", of: button },
          modal: true,
          width: 600, // default value = 300
          minWidth: 600,
          Height: 570,
          minHeight: 570,
          resizable: true,
          open: function () {
            dialog_response = "notOK";
          },
          close: function () {},
          buttons: [
            {
              text: "확인",
              icon: "ui-icon-check",
              open: function () {
                $(this).addClass("okClass");
              },
              click: function () {
                dialog_response = "OK";
                // $(this).dialog("close");
                btnOKClick();
              },
            },
            {
              text: "취소",
              icon: "ui-icon-closethick",
              open: function () {
                $(this).addClass("cancelClass");
              },
              click: function () {
                dialog_response = "CANCEL";
                $(this).dialog("close");
              },
            },
          ],
        });

        $("#progress_dialog").dialog({
          autoOpen: false,
          title: "썸네일 이미지 작성 . . .",
          modal: true,
          width: 400,
          Height: 350, // 높이는 알림 문장 길이에 따라 가변되므로 최소 높이만 규정한다.
          resizable: false,
          position: {
            my: "center+170", // 수평위치
            at: "top+200", // 수직위치
            of: "#container_", // 위치좌표의 기준 요소
          },
        });

        $("#setup_dialog").dialog({
          autoOpen: false,
          title: "설정",
          // position: { my: "left top", at: "left bottom", of: button },
          modal: true,
          width: 500, // default value = 300
          minHeight: 200,
          resizable: false,
          open: function () {
            dialog_response = "notOK";
          },
          close: function () {
            if (dialog_response == "OK") {
              resetupConfigure();
            }
          },
          buttons: [
            {
              text: "확인",
              icon: "ui-icon-check",
              open: function () {
                $(this).addClass("okClass");
              },
              click: function () {
                dialog_response = "OK";
                $(this).dialog("close");
              },
            },
            {
              text: "취소",
              icon: "ui-icon-closethick",
              open: function () {
                $(this).addClass("cancelClass");
              },
              click: function () {
                dialog_response = "CANCEL";
                $(this).dialog("close");
              },
            },
          ],
        });

        $("#login_dialog").dialog({
          autoOpen: false,
          title: "로그인",
          // position: { my: "left top", at: "left bottom", of: button },
          modal: true,
          width: 300, // default value = 300
          minHeight: 200,
          resizable: false,
          open: function () {
            dialog_response = "notOK";
          },
          close: function () {
            if (dialog_response == "OK") {
            }
          },
        });

        $("#pwchange_dialog").dialog({
          autoOpen: false,
          title: "비밀번호 변경",
          // position: { my: "left top", at: "left bottom", of: button },
          modal: true,
          width: 300, // default value = 300
          minHeight: 200,
          resizable: false,
          open: function () {
            dialog_response = "notOK";
          },
          close: function () {
            if (dialog_response == "OK") {
            }
          },
        });

        $("#pwcheck_dialog").dialog({
          autoOpen: false,
          title: "폴더 삭제 - 사용자 확인",
          // position: { my: "left top", at: "left bottom", of: button },
          modal: true,
          width: 390, // default value = 300
          minHeight: 100,
          resizable: false,
          open: function () {
            dialog_response = "notOK";
          },
          close: function () {
            if (dialog_response == "OK") {
            }
          },
        });

        gif_player = new SuperGif({
          gif: document.getElementById("gif_1"),
          loop_mode: false,
          show_progress_bar: false,
          // on_end: loop_end,
        });
        gif_player.load(gif_loaded);

        // cur_directory = "/"; // * note) not "./", to initiate later processing
        // let root_a = $("#root_li").children("a:eq(0)");
        // const event = new Event("click", { bubbles: true, cancelable: false });
        // root_a[0].dispatchEvent(event);
      }

      $(document).ready(function () {
        // session_check(false);
        setupFolderTree();

        let getUrl = window.location;
        let p = getUrl.href.lastIndexOf("/");
        let document_name = getUrl.href.substring(p + 1);
        if (document_name.endsWith("#")) {
          document_name = document_name.slice(0, -1); // 끝의 '#' 문자 제거거
        }

        base_url = getUrl.protocol + "//" + getUrl.host + "/" + getUrl.pathname.split("/")[1];
        if (base_url.substring(base_url.lastIndexOf("/") + 1) == document_name) {
          base_url = base_url.substring(0, base_url.lastIndexOf("/")) + "/";
        } else {
          base_url = base_url + "/";
        }

        // host_name = window.location.hostname;

        check_node_server("/is_node_server")
          .then((data) => {
            if (data.substr(0, 3) == "Yes") {
              // 서버가 Gallery용 Node docker이면,
              server_On_Node = true; // = down URL for Node Server
            }
          })
          .finally(() => {
            if (server_On_Node) {
              move_files_url = "/move_files";
              copy_files_url = "/copy_files";
              delete_files_url = "/delete_files";
              thumbnail_build_url = "/thumbnail_build2"; // "/thumbnail_build" : for non-sse support
            }

            init();
          });
      });
    </script>
  </head>

  <body>
    <div id="container_" style="min-width: 1490px">
      <div id="header">
        <div id="logo">
          <img
            id="gif_1"
            src="prog_resources/images/album3.png"
            rel:animated_src="prog_resources/images/album3.gif"
            rel:auto_play="0"
            width="124"
            height="64"
            vspace="0"
          />
        </div>
        <div id="description">이 앱은 "nanogallery2" 플러그인을 이용합니다.</div>
        <div
          id="heading"
          style="color: orange; top: 20%; bottom: 20%; font-family: Nanum Myeongjo; font-weight: bolder"
        >
          <img src="prog_resources/images/title_image_v13.png" width="160" height="30" />
        </div>
        <div id="author_desc">만든 사람 : 현실환</div>
        <input
          type="button"
          class="btn btn-dark-blue"
          id="signIn"
          style="width: 100px"
          value="로그인"
          onclick="Login()"
        />
      </div>
      <div id="main" style="top: 70px; position: relative">
        <div class="row_box">
          <div class="left_box" style="padding: 0.8rem; padding-left: 0; padding-right: 0.2rem">
            <div class="treeBox" id="folder_box">
              <nav id="explorer_folder">
                <ul id="root_ul" class="root_ul"></ul>
              </nav>
            </div>
          </div>
          <!-- "left_box" -->
          <div class="right_box" id="gallery_box" style="padding: 0.4rem">
            <div style="display: inline-block; margin-top: -0.6rem; padding-left: 0.5rem; padding-bottom: 0.4rem">
              <p style="margin-top: -0.4rem; margin-bottom: -0.1rem; font-size: 0.9rem">상위 폴더로</p>
              <button
                type="button"
                id="btnUpFolder"
                class="button-14"
                title="상위 폴더로 이동"
                style="margin-left: 1.5rem; height: 30px; width: 30px"
              >
                <img src="./prog_resources/images/Arrow-up.png" onclick="up_folder_click()" />
              </button>
            </div>
            <div
              class="groupbox"
              id="groupbox_1"
              style="display: inline-block; margin-top: 0.8rem; margin-bottom: -0.9rem; width: 130px"
            >
              <h4><span>작업대상</span></h4>
              <form id="form_field" style="margin-top: -0.3rem">
                <p style="margin-top: 0.3rem; margin-bottom: -0.2rem">
                  <input
                    type="radio"
                    name="field_item"
                    id="field_folder"
                    style="margin-left: 5px"
                    checked
                    onclick="FieldSelect()"
                    disabled
                  />
                  <label for="field_folder">폴더</label>
                  <input
                    type="radio"
                    name="field_item"
                    id="field_file"
                    style="margin-left: 8px"
                    onclick="FieldSelect()"
                    disabled
                  />
                  <label for="field_file">파일</label>
                </p>
              </form>
            </div>

            <p id="folder_para">
              <span style="color: #a13c2d; vertical-align: middle">[ 선택한 폴더 ]</span
              ><input type="text" id="media_path" style="vertical-align: middle; line-height: 23px" readonly />
              <button
                type="button"
                id="btnRenameFolder"
                class="button-14"
                title="폴더명 변경"
                style="height: 30px; width: 30px"
              >
                <img src="./prog_resources/images/rename.png" onclick="rename_folder_click()" />
              </button>
              <button
                type="button"
                id="btnDelFolder"
                class="button-14"
                title="폴더 삭제"
                style="height: 30px; width: 30px"
              >
                <img src="./prog_resources/images/trash3.png" onclick="delete_folder_click()" />
              </button>
              <button
                type="button"
                id="btnAddFolder"
                class="button-14"
                title="하위 폴더 생성"
                style="height: 30px; width: 30px"
              >
                <img src="./prog_resources/images/folder_plus2.png" onclick="create_folder_click()" />
              </button>
              <button
                type="button"
                id="btnAddMedia"
                class="button-14"
                title="미디어 파일 추가"
                style="height: 30px; width: 30px"
              >
                <img src="./prog_resources/images/media_plus.png" onclick="fileupload_click()" />
              </button>
            </p>
            <p id="file_para" style="display: none">
              <span style="color: #a13c2d; vertical-align: middle">[ 선택한 파일 ]</span
              ><input type="text" id="media_files" style="vertical-align: middle; line-height: 23px" readonly />
              <button
                type="button"
                id="btnSelectAll"
                class="button-14"
                title="전체 선택"
                style="height: 30px; width: 30px"
              >
                <img src="./prog_resources/images/select_all.png" onclick="select_all_click()" />
              </button>
              <button
                type="button"
                id="btnUnselectAll"
                class="button-14"
                title="전체 선택해제"
                style="height: 30px; width: 30px"
              >
                <img src="./prog_resources/images/unselect_all.png" onclick="unselect_all_click()" />
              </button>
              <button
                type="button"
                id="btnMoveFiles"
                class="button-14"
                title="파일 이동"
                style="height: 30px; width: 30px"
              >
                <img src="./prog_resources/images/file_move.png" onclick="move_files_click(0)" />
              </button>
              <button
                type="button"
                id="btnCopyFiles"
                class="button-14"
                title="파일 복사"
                style="height: 30px; width: 30px"
              >
                <img src="./prog_resources/images/file_copy.png" onclick="move_files_click(1)" />
              </button>
              <button
                type="button"
                id="btnDelFiles"
                class="button-14"
                title="파일 삭제"
                style="height: 30px; width: 30px"
              >
                <img src="./prog_resources/images/trash3.png" onclick="delete_files_click()" />
              </button>
            </p>
            <p style="margin-top: -42px; text-align: right; padding-right: 15px">
              <img
                id="conf_img"
                class="text_middle"
                style="margin-right: 0.4rem"
                src="prog_resources/images/configuration.png"
                title="설정"
                alt="설정"
                onclick="showSetupDialog()"
              />
              <img
                id="info_img"
                class="text_middle"
                src="prog_resources/images/info-icon.png"
                title="안내서 보기"
                onclick="showGuideURL()"
              />
            </p>
            <p id="no_media_msg" style="text-align: center; margin-top: 5rem; display: none">
              <span style="color: #a13c2d; font-size: 1.2rem">현재 선택한 폴더에는 나타낼 미디어 파일이 없습니다.</span>
            </p>
            <!-- gallery 창을 "treeBox" 내에 배치할 경우 표시할 이미지 갯수가 많을 경우 화면 범위
                   밖의 것들이 스크롤을 하여도 표시되지 않는 문제가 있다. -->
            <!-- <div class="treeBox" id="gallery_box"> -->
            <div id="nanogallery2" data-nanogallery2>
              <!-- "nanogallery2" 내부의 DOM 요소(이미지 & 비디오 파일 링크)는 동적으로 구성된다. -->
            </div>
            <!-- "nanogallery2" -->
          </div>
          <!-- "right_box" -->
        </div>
        <!-- "row_box" -->
      </div>
      <!-- "main" -->

      <!-- 지도 보기용 창으로 ZulNs의 "Resizable & Draggable Dialog"를 이용 시 적용하는 코드 -->
      <!-- 주의) 지도 표시용 dialog는 id를 변경하면 작동하지 않는다.-->
      <!--
      <div
        id="dialog"
        class="dialog"
        role="dialog"
        style="width: 600px; height: 400px; min-width: 400px; min-height: 280px; z-index: 99"
      >
        <div class="titlebar" style="min-width: 100%">Google map...</div>
        <button name="close">
          &times;
        </button>
        <div
          class="content"
          id="map_div"
          style="min-width: calc(100% - 8px); margin-left: -12px; min-height: calc(100% - 40px); margin-top: -12px"
        >
        </div>
      </div>
      -->

      <!-- Google map is drawn here on "map_div" -->
      <!-- 지도 보기용 창으로 bootstrap dialog box를 이용 시는 위 코드 대신 아래 코드롤 사용한다. -->
      <div id="map_dialog" class="hidden" title="Dialog Title" style="padding: 0">
        <div
          class="content"
          id="map_div"
          style="
            overflow: hidden;
            min-width: calc(100% - 8px);
            min-height: calc(100% - 8px);
            width: calc(100% - 8px);
            height: calc(100% - 8px);
            margin-left: 4px;
            margin-top: 4px;
          "
        ></div>
      </div>

      <div id="setup_dialog" class="hidden" title="Dialog Title" style="padding-left: 0.5rem; padding-right: 0rem">
        <p style="margin-top: 0.3rem">
          <span style="margin-left: 1rem; background-color: #fff">&nbsp;갤러리창 설정&nbsp;</span>
        </p>
        <div class="groupbox" style="width: 470px; margin-left: 0; margin-top: -1.6rem; padding-top: 2rem">
          <p style="text-align: left; margin-top: -1rem">
            <span style="margin-left: 15px; color: #a13c2d">⊙ </span>썸네일 배치
            <select
              id="place_type_sel"
              style="width: 186px; height: 25px; margin-left: 5px"
              onchange="placeTypeSelect()"
            >
              <option value="0" selected="selected">일정 높이</option>
              <option value="1">일정 높이 - 페이지 분할</option>
              <option value="2">일정 너비</option>
            </select>
          </p>
          <p>
            <span style="margin-left: 15px; color: #a13c2d">⊙ </span>썸네일 줄 수
            <select id="thumbnail_rows_sel" style="width: 80px; height: 25px; margin-left: 5px" disabled="true">
              <option value="2">2 줄</option>
              <option value="3">3 줄</option>
              <option value="4" selected="selected">4 줄</option>
              <option value="5">5 줄</option>
              <option value="6">6 줄</option>
            </select>
            <span style="margin-left: 0.3rem; font-size: 0.9rem; color: #0000ab">(주. 참조)</span>
          </p>
          <p style="margin-top: -0.4rem; text-indent: 1rem">
            <span style="margin-left: 0.3rem; font-size: 0.9rem; color: #0000ab">
              ※ 주&#41; 썸네일 배치가 "일정 높이 - 페이지 분할" 인 경우만 유효함.</span
            >
          </p>
          <p style="text-align: left">
            <span style="margin-left: 15px; color: #a13c2d">⊙ </span>썸네일 너비
            <select id="thumbnail_width_sel" style="width: 90px; height: 25px; margin-left: 5px" disabled="true">
              <option value="200">200px</option>
              <option value="250">250px</option>
              <!-- width를 300으로 할 경우 갤러리 창 표시가 먹통이 되는 경우가 있음 -->
              <!-- <option value="300" selected="selected">300px</option>
            <option value="350">350px</option> -->
              <option value="320" selected="selected">320px</option>
              <option value="400">400px</option>
            </select>
            <span style="margin-left: 15px; color: #a13c2d">⊙ </span>썸네일 높이
            <select id="thumbnail_height_sel" style="width: 90px; height: 25px; margin-left: 5px">
              <option value="150">150px</option>
              <option value="200" selected="selected">200px</option>
              <option value="250">250px</option>
              <option value="300">300px</option>
            </select>
          </p>
        </div>
        <p style="margin-top: -0.2rem">
          <span style="margin-left: 1rem; background-color: #fff">&nbsp;이미지 뷰어 설정&nbsp;</span>
        </p>
        <div
          class="groupbox"
          style="width: 470px; margin-left: 0; margin-top: -1.6rem; margin-bottom: 0; padding-top: 2rem"
        >
          <p style="margin-top: -1rem">
            <span style="margin-left: 15px; color: #a13c2d">⊙ </span>
            <span>이미지 뷰어 화면 하단에 썸네일 바 표시</span>
            <input type="checkbox" id="show_thumbnail_bar" />
          </p>
          <p>
            <span style="margin-left: 15px; color: #a13c2d">⊙ </span>
            <span>이미지 뷰어가 열리면 슬리이드 쇼 자동개시</span>
            <input type="checkbox" id="showAutostart" />
          </p>
          <p>
            <span style="margin-left: 15px; color: #a13c2d">⊙ </span>슬라이드 쇼 이미지 갱신 주기
            <select id="interval_sel" style="width: 80px; height: 25px; margin-left: 5px">
              <option value="2">2 초</option>
              <option value="3">3 초</option>
              <option value="5" selected="selected">5 초</option>
              <option value="7">7 초</option>
              <option value="10">10 초</option>
            </select>
          </p>
          <p>
            <span style="margin-left: 15px; color: #a13c2d">⊙ </span>
            <span
              >이미지뷰어 화면의 아이콘 바에 "삭제" 아이콘 -&nbsp;<img
                src="prog_resources/images/trash3.png"
              />&nbsp;표시</span
            >
            <input type="checkbox" id="show_delete_icon" disabled />
          </p>
        </div>
      </div>

      <div id="login_dialog" class="hidden" title="Dialog Title" style="padding-left: 0.5rem; padding-right: 0.5rem">
        <div class="card card-container">
          <form action="./php_scripts/login.php" id="loginForm">
            <div class="input-wrapper" style="margin-top: 1rem; margin-left: 2.5rem">
              <input
                id="username"
                class="login_input"
                type="text"
                placeholder="아이디(4~16자)"
                autocomplete="on"
                autofocus
              />
              <label for="username" class="fa fa-user input-icon"></label>
            </div>
            <div class="input-wrapper" style="margin-top: 1rem; margin-left: 2.5rem">
              <input id="password" class="login_input" type="password" placeholder="비밀번호(4~16자)" />
              <label for="password" class="fa fa-lock input-icon"></label>
            </div>
            <div
              id="message"
              style="display: none; color: red; height: auto; text-align: center; margin-top: 5px"
            ></div>
            <div class="form-group" style="margin-left: 60px; width: 150px">
              <button
                type="button"
                id="btnLogin"
                class="btn btn-lg btn-primary btn-block btn-signin"
                style="
                  height: 30px;
                  line-height: 13px;
                  font-size: 1rem;
                  font-weight: normal;
                  margin: auto;
                  margin-top: 1rem;
                "
              >
                로그인
              </button>
              <p style="text-align: right; margin-top: 0.5rem">
                <strong><a href="#" onclick="password_change()">[비밀번호 변경]</a></strong>
              </p>

              <p></p>
            </div>
          </form>
        </div>
      </div>

      <div id="pwchange_dialog" class="hidden" title="Dialog Title" style="padding-left: 0.5rem; padding-right: 0.5rem">
        <div class="card card-container">
          <form id="pwchangeForm">
            <p
              style="
                margin-left: 2rem;
                margin-top: 0.6rem;
                margin-bottom: -0.5rem;
                text-align: left;
                font-family: '맑은 고딕', 'Nanum Myeongjo';
              "
            >
              (로그인 정보 입력)
            </p>
            <div class="input-wrapper" style="margin-top: 1rem; margin-left: 2.5rem">
              <input
                id="username2"
                class="login_input"
                type="text"
                placeholder="아이디(4~16자)"
                autocomplete="on"
                autofocus
              />
              <label for="username2" class="fa fa-user input-icon"></label>
            </div>
            <div class="input-wrapper" style="margin-top: 1rem; margin-left: 2.5rem">
              <input id="password2" class="login_input" type="password" placeholder="비밀번호(4~16자)" />
              <label for="password2" class="fa fa-lock input-icon"></label>
            </div>
            <p
              style="
                margin-left: 2rem;
                margin-top: 1rem;
                margin-bottom: -0.5rem;
                text-align: left;
                font-family: '맑은 고딕', 'Nanum Myeongjo';
              "
            >
              (새 비밀번호 입력)
            </p>
            <div class="input-wrapper" style="margin-top: 1rem; margin-left: 2.5rem">
              <input
                id="password2_1"
                class="login_input"
                type="password"
                placeholder="새 비밀번호(4~16자)"
                autocomplete="on"
                autofocus
              />
              <label for="password2_1" class="fa fa-lock input-icon"></label>
            </div>
            <div class="input-wrapper" style="margin-top: 1rem; margin-left: 2.5rem">
              <input id="password2_2" class="login_input" type="password" placeholder="새 비밀번호(확인)" />
              <label for="password2_2" class="fa fa-lock input-icon"></label>
            </div>
            <div
              id="message2"
              style="display: none; color: red; height: auto; text-align: center; margin-top: 5px"
            ></div>
            <div class="form-group" style="margin-left: 60px; width: 150px">
              <button
                type="button"
                id="btnOk"
                class="btn btn-lg btn-primary btn-block btn-signin"
                style="
                  height: 30px;
                  line-height: 13px;
                  font-size: 1rem;
                  font-weight: normal;
                  margin: auto;
                  margin-top: 1rem;
                "
                onclick="editOK()"
              >
                확인
              </button>
            </div>
          </form>
        </div>
      </div>

      <div id="pwcheck_dialog" class="hidden" title="Dialog Title" style="padding-left: 0.5rem; padding-right: 0.5rem">
        <div class="card card-container">
          <form id="pwcheckForm">
            <p class="pwcheck_p">사용자 확인을 위한 비밀번호 입력 요청</p>
            <p class="pwcheck_p">※ "취소" 버턴을 누르면 폴더 삭제가 취소됩니다.</p>
            <div class="input-wrapper" style="margin-top: 1.5rem; margin-bottom: 1.5rem; margin-left: 5.3rem">
              <input id="password3" class="login_input" type="password" placeholder="비밀번호" />
              <label for="password3" class="fa fa-lock input-icon"></label>
            </div>
            <p style="text-align: center; line-height: 1.5rem; margin-bottom: -0.5rem">
              <button
                type="button"
                id="btnOk3"
                class="btn btn-lg btn-primary"
                style="width: 100px; height: 30px; line-height: 13px; font-size: 1rem; font-weight: normal"
                onclick="pwDialogOK()"
              >
                확인
              </button>
              <button
                type="button"
                id="btnCancel3"
                class="btn btn-lg btn-secondary"
                style="
                  width: 100px;
                  height: 30px;
                  line-height: 13px;
                  font-size: 1rem;
                  font-weight: normal;
                  margin-left: 2rem;
                "
                onclick="pwDialogCancel()"
              >
                취소
              </button>
            </p>
          </form>
        </div>
      </div>

      <!-- dragable and resizable jquery-ui modal (파일 업로드 창) -->
      <div id="upload_dialog" class="hidden" title="Dialog Title" style="padding: 0">
        <div class="modal-content2">
          <div class="modal-body2 p-1">
            <div class="flex_container" id="flex_div">
              <div class="flex_item">
                <div id="drag-and-drop-zone" class="dm-uploader p-5 text-center" style="margin: 15px 5px">
                  <h3 class="mb-5 mt-4 text-muted">여기에 드래그 &amp; 드롭 하세요</h3>
                  <div class="btn btn-primary" style="width: 160px; margin-left: -25px">
                    <span>파일 탐색기 열기</span>
                    <input type="file" accept=".jpg,.jpeg,.gif,.png,.mp4,.webm" title="Click to add Files" />
                  </div>
                </div>
                <div class="mt-2" style="margin-top: 30px; padding: 0 20px">
                  <a href="#" class="btn btn-primary" id="btnApiStart"> <i class="fa fa-play"></i> 업로드 시작 </a>
                  <a href="#" class="btn btn-danger" id="btnApiCancel" style="margin-top: -10px">
                    <i class="fa fa-stop"></i> 업로드 중단
                  </a>
                  <a href="#" class="btn btn-success" id="btnApiReset" style="margin-top: -10px">
                    <i class="fa fa-stop"></i> 초기화
                  </a>
                </div>
              </div>
              <!-- /file select -->
              <div class="flex_item">
                <div class="card-header" style="padding: 0.2rem 1.25rem; text-align: center">업로드 대기 파일</div>
                <div class="tableBox2" id="upload_list">
                  <ul class="list-unstyled p-2 d-flex flex-column col" id="files" style="overflow-y: auto">
                    <li class="text-muted text-center empty" style="text-align: center">업로드 대기 파일 없음.</li>
                  </ul>
                </div>
              </div>
              <!-- /selected file list -->
            </div>

            <div class="dialog-footer" style="clear: both">
              <p style="min-width: 100%; margin: 0; padding: 0 0.2rem">
                <input id="debug_msg" type="text" style="min-width: 100%" readonly />
              </p>
            </div>
            <!-- /debug -->
          </div>
        </div>
      </div>

      <!-- dragable and resizable jquery-ui modal (폴더 선택 창) -->
      <div id="folder_sel_dialog" class="hidden" title="Dialog Title" style="padding: 0">
        <div class="modal-content">
          <div class="modal-body p-1">
            <div class="flex_container2" id="flex_div2">
              <div class="flex_item2">
                <div class="mt-2" style="margin-top: 30px; padding: 0 20px"></div>
              </div>
              <!-- /file select -->
              <div class="flex_item2">
                <div
                  class="card-header"
                  style="
                    padding: 0.2rem 1.25rem;
                    text-align: center;
                    max-height: 35px;
                    margin-left: -10px;
                    background-color: #a8c6c6;
                  "
                >
                  <p>
                    <span style="color: #a13c2d; vertical-align: middle">[ 선택한 폴더 ]</span
                    ><input
                      type="text"
                      id="selected_folder"
                      style="
                        vertical-align: middle;
                        line-height: 23px;
                        margin: 0;
                        margin-left: 8px;
                        width: calc(100% - 100px);
                      "
                      readonly
                    />
                  </p>
                </div>

                <div class="tableBox2" id="folder_list" style="height: 424pc; margin-top: 6px">
                  <ul class="list-unstyled d-flex flex-column col" id="root_ul_2" style="overflow-y: auto"></ul>
                </div>
              </div>
              <!-- /selected file list -->
            </div>
          </div>
        </div>
      </div>

      <div id="prompt_dialog" title="Prompt dialog">
        <p id="prompt_msg" style="margin-top: 6px; margin-bottom: 0">Enter any text</p>
        <input type="text" id="prompt_input" style="margin-left: 0; width: 260px" />
      </div>

      <!-- File item template -->
      <!-- template for image files -->
      <script type="text/html" id="files-template">
        <li class="media">
          <img
            class="mr-3 mb-2 preview-img"
            src="https://danielmg.org/assets/image/noimage.jpg?v=v11"
            alt="Generic placeholder image"
          />

          <div class="media-body mb-1">
            <p class="mb-2">
              <strong>%%filename%%</strong> - 상태:
              <span class="text-muted">업로드 대기</span>
            </p>
            <div class="progress mb-2">
              <div
                class="progress-bar progress-bar-striped progress-bar-animated bg-primary"
                role="progressbar"
                style="width: 0%"
                aria-valuenow="0"
                aria-valuemin="0"
                aria-valuemax="100"
              ></div>
            </div>

            <hr class="mt-1 mb-1" />
          </div>
        </li>
      </script>

      <!-- template for video files -->
      <script type="text/html" id="files-template2">
        <li class="media">
          <!-- <div style="padding:0; margin:0"> -->
          <video class="mr-3 mb-2 preview-img" preload="metadata" src=""></video>
          <!-- </div> -->
          <div class="media-body mb-1">
            <p class="mb-2">
              <strong>%%filename%%</strong> - 상태:
              <span class="text-muted">업로드 대기</span>
            </p>
            <div class="progress mb-2">
              <div
                class="progress-bar progress-bar-striped progress-bar-animated bg-primary"
                role="progressbar"
                style="width: 0%"
                aria-valuenow="0"
                aria-valuemin="0"
                aria-valuemax="100"
              ></div>
            </div>

            <hr class="mt-1 mb-1" />
          </div>
        </li>
      </script>

      <div id="alert_dialog" class="hidden" style="padding: 3px" title="알림">
        <div style="padding: 8px; padding-bottom: 25px">
          <p id="alert_message" style="font-size: 15px; margin-bottom: 1rem">alert message</p>
        </div>
        <div id="alert_btn_div" style="height: 25px; margin-top: -20px; text-align: center; display: none">
          <input
            type="button"
            class="button-14"
            id="btnDialog"
            style="width: 60px; height: 24px; font-size: 13px; line-height: 15px"
            onclick="closeAlertDialog()"
            value="확인"
          />
        </div>
      </div>

      <!-- thumbnail 작성 중인 상태를 보여주는 dialog -->
      <div id="progress_dialog" class="hidden" style="padding: 3px" title="Dialog Title">
        <div style="padding: 8px">
          <p>
            <span style="color: #a13c2d">▣ </span>
            <span style="color: black">대상 미디어 수 </span>
            <input type="text" id="num_media" style="width: 36px" readonly />
            <span style="color: firebrick; margin-left: 6px">(* 1회 작업 한도 : 32 미디어)</span>
          </p>
          <p>
            <span style="color: #a13c2d">▣ </span>
            <span style="color: black">작업한 미디어 수 </span>
            <input type="text" id="num_processed" style="width: 36px" readonly />
          </p>
          <p style="margin-bottom: 0">
            <span style="color: #a13c2d">▣ </span>
            <span style="color: black">작업 진행 중인 미디어 </span>
          </p>
          <p>
            <input type="text" id="media_onwork" style="width: 365px" readonly />
          </p>
          <p style="margin-bottom: 0">
            <span style="color: #a13c2d">▣ </span>
            <span style="color: black">작업 진행률</span>
          </p>
          <div class="progress mb-2" id="progress_div">
            <div
              class="progress-bar progress-bar-striped progress-bar-animated bg-primary"
              role="progressbar"
              style="width: 0%"
              aria-valuenow="0"
              aria-valuemin="0"
              aria-valuemax="100"
            ></div>
          </div>
        </div>
      </div>
    </div>
    <!-- "container_" -->

    <!-- scripts fo jquery.dm-uploader -->
    <script src="prog_resources/js_css/jquery.dm-uploader.js?v=v11"></script>
    <script src="prog_resources/js_css/jquery.dm-uploader-ui.js"></script>
    <script src="prog_resources/js_css/jquery.dm-uploader-setup.js"></script>
    <!-- Debug item template -->
    <script type="text/html" id="debug-template">
      <li class="list-group-item text-%%color%%"><strong>%%date%%</strong>: %%message%%</li>
    </script>

    <!-- following script code comes from google map refence document -->
    <!-- prettier-ignore -->
    <script>
    (g => {
      var h, a, k, p = "The Google Maps JavaScript API",
        c = "google",
        l = "importLibrary",
        q = "__ib__",
        m = document,
        b = window;
      b = b[c] || (b[c] = {});
      var d = b.maps || (b.maps = {}),
        r = new Set,
        e = new URLSearchParams,
        u = () => h || (h = new Promise(async (f, n) => {
          await (a = m.createElement("script"));
          e.set("libraries", [...r] + "");
          for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]);
          e.set("callback", c + ".maps." + q);
          a.src = `https://maps.${c}apis.com/maps/api/js?` + e;
          d[q] = f;
          a.onerror = () => h = n(Error(p + " could not load."));
          a.nonce = m.querySelector("script[nonce]")?.nonce || "";
          m.head.append(a)
        }));
      d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[
        l](f,
        ...n))
    })
    ({
      // key 값 설정은 Google_maps_API_key.txt 파일 내용을 참조요.
      key: "AIzaSyCh3Hrf-U0_kPRIvTosIDonRMN8LnlinIw",  // "Maps API Key" - "link21.kr" 만 지원
      v: "weekly",
      // libraries: "marker"
    });
  </script>
  </body>
</html>