<!doctype html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
  <title>Prototype</title>
  <link href="./fontawesome/css/all.css" rel="stylesheet">
  <link rel="stylesheet" href="./css/bootstrap.min.css">
  <link rel="stylesheet" href="./css/lightbox.min.css">
  <link rel="stylesheet" href="./css/chat.css">
  <link rel="stylesheet" href="./css/font-awesome.css">
  <script>
    String.prototype.replaceAll = function(org, dest) {
      return this.split(org).join(dest);
    }

    let CHAT_SERVER_URL = '';
    let CMS_SERVER_URL = '';
    let ASSET_PATH = './';
    let PLATFORM = '';
    let IS_MOBILE = true;
    let IS_ONLINE = false;


  </script>
</head>
<body>
  <nav class="navbar navbar-expand navbar-dark bg-primary fixed-top flex-md-nowrap p-2 shadow">
    <ul class="navbar-nav col-3" id="navbarLeft">
      <button class="btn btn-primary" type="button" id="backButton">
        <i class="fa fa-arrow-left"></i>
      </button>
      <button class="btn btn-primary" type="button" id="homeButton">
        <i class="fa fa-home" style="font-size: 1.6rem;"></i>
      </button>
    </ul>
    <a class="navbar-brand col-6 mr-0 text-truncate titleRoomName text-center" href="#">Chat</a>
    <ul class="navbar-nav col-3" id="navbarRight">
      <!-- Chat Room Icons -->
      <li class="nav-item">
        <button type="button" id="sidebarCollapse" class="btn btn-primary chatRoomIcon">
          <i class="fas fa-bars"></i>
        </button>
      </li>
      <li class="nav-item">
        <button type="button" id="userSelectionDeleteBtn" class="btn btn-primary">
          <i class="fa fa-trash"></i>
        </button>
      </li>
      <li class="nav-item">
        <button type="button" id="userSelectionConfirmBtn" class="btn btn-primary chatRoomIcon">
          <span id="userSelectionLength" class="badge badge-light"></span>
          <i class="fas fa-check"></i>
        </button>
        <!-- Alert Dialog -->
        <div id="confirm" class="modal fade">
          <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
              <div class="modal-body" id="userSelectionTitle">
                Are you sure?
              </div>
              <div class="modal-footer">
                <button type="button" data-dismiss="modal" class="btn" id="yesTitle">OK</button>
              </div>
            </div>
          </div>
        </div>

      </li>
    </ul>
  </nav>

  <!-- Sidebar -->
  <nav id="sidebar">
    <div id="dismiss">
      <i class="fas fa-arrow-right"></i>
    </div>
    <div class="sidebar-header">
      <h4 id="participants">Participants</h4>
    </div>
    <div id="users">
    </div>
    <footer class="sidebar-footer text-right">
      <a class="btn text-light" role="button" id="exitRoom">
        Exit <i class="fas fa-door-open"></i>
      </a>
      <!-- Confirm Dialog -->
      <div id="exitRoomConfirm" class="modal fade">
        <div class="modal-dialog modal-dialog-centered">
          <div class="modal-content">
            <div class="modal-body" id="exitRoomTitle">
              Are you sure?
            </div>
            <div class="modal-footer">
              <button type="button" data-dismiss="modal" class="btn btn-primary" id="exitRoomOk">Ok</button>
              <button type="button" data-dismiss="modal" class="btn" id="noExit">Cancel</button>
            </div>
          </div>
        </div>
      </div>

    </footer>
  </nav>
  <!-- Dark Overlay element -->
  <div class="overlay active"></div>
  <!-- loadingIndicator -->
  <div id="loadingIndicator">
    <div class="spinner-border text-primary loader" role="status">
      <span class="sr-only">Loading...</span>
    </div>
  </div>

  <!-- Error Alert Dialog -->
  <div id="customAlert" class="modal fade">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-body" id="customAlertTitle">
          Are you sure?
        </div>
        <div class="modal-footer">
          <button type="button" data-dismiss="modal" class="btn btn-primary" id="customAlertOk">Ok</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Confirm Dialog -->
  <div id="customConfirm" class="modal fade">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-body" id="customConfirmTitle">
          Are you sure?
        </div>
        <div class="modal-footer">
          <button type="button" data-dismiss="modal" class="btn btn-primary" id="customConfirmOk">Ok</button>
          <button type="button" data-dismiss="modal" class="btn" id="customAlertCancel">Cancel</button>
        </div>
      </div>
    </div>
  </div>

  <div class="tab-content" id="pills-tabContent">

    <div class="tab-pane fade show active" id="pills-chatlist" role="tabpanel" aria-labelledby="pills-chatlist-tab">
      <div class="search-group">
        <div class="input-group search-bar-fixed">
          <input style="font-family:Arial, FontAwesome !important;" id="room-search" type="text" class="write_msg form-control" name="message" placeholder="&#xF002;" autocomplete="off">
        </div>
      </div>
      <div class="text-center">
        <button type="button" class="btn btn-primary chat-list-type-btn" id="dmBtn"></button>
        <button type="button" class="btn btn-primary chat-list-type-btn" id="groupBtn"></button>
      </div>
      <div class="inbox_people">
        <div id="room_list" class="inbox_chat row">
        </div>
        <a id="createChatRoom" href="#" class="floating_plus_btn">
          <i class="fa fa-plus my-float"></i>
        </a>
      </div>
    </div>

    <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
      ...
    </div>
    <div class="tab-pane fade" id="pills-communication" role="tabpanel" aria-labelledby="pills-communication-tab">
      ...
    </div>
    <div class="tab-pane fade" id="pills-setting" role="tabpanel" aria-labelledby="pills-setting-tab">
      ...
    </div>
    <!-- invisible tabs -->
    <div class="tab-pane fade" id="pills-chat" role="tabpanel" aria-labelledby="pills-chat-tab">
      <div class="input-group search-bar-fixed">
        <input style="font-family:Arial, FontAwesome" id="message-search" type="text" class="write_msg form-control" placeholder="&#xF002;" name="message" autocomplete="off">
        <div class="input-group-append">
          <button type="button" class="btn input-group-text dropdown-toggle-split" id="pre-search" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="fa fa-arrow-up"></i>
          </button>
        </div>
      </div>
      <div class="mesgs">
        <div class="msg_history" id="messages">
        </div>
        <div class="type_msg fixed-bottom">
          <div class="row">
            <div class="msg_notification" id="messageNotification">
            </div>
          </div>
          <div class="input_msg_write">
            <div class="input-group">
              <div class="input-group-prepend">
                <button class="btn input-group-text dropdown-toggle" data-toggle="dropdown" type="button"><i class="fa fa-camera"></i></button>
                  <!-- Video Upload -->
                  <div class="dropdown-menu">
                    <a class="dropdown-item" id="fileUploadButton" href="#">Photo
                      <a href="#">
                        <form id="image-form">
                        <input class="d-none" type="file" name="image" id="imageInputTag" accept="image/x-png,image/jpeg">
                        </form>
                      </a>
                    </a>
                    <a class="dropdown-item" id="fileUploadButton2" href="#">Video
                      <a href="#">
                        <form id="image-form2">
                        <input class="d-none" type="file" name="image" id="imageInputTag2" accept="video/mp4">
                        </form>
                      </a>
                    </a>
                  </div>
              </div>
              <input id="message-form" type="text" class="write_msg form-control" name="message" placeholder="Type a message" autocomplete="off">
              <div class="input-group-append">
                <button id="message-send-btn" class="btn input-group-text" type="button"><i class="fa fa-paper-plane" aria-hidden="true"></i></button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
      <div class="inbox_people" >
        <div class="heading_srch">
          <div class="srch_bar">
            <div class="stylish-input-group">
              <input id="contactListKeyword" type="text" class="search-bar" placeholder="Search">
              <span class="input-group-addon">
                <button type="button"> <i class="fa fa-search" aria-hidden="true"></i> </button>
              </span>
            </div>
          </div>
        </div>
        <div id="groupButtonArea" class="text-center border-bottom-gray">
          <button type="button" class="btn btn-primary chat-list-type-btn" id="myGroupBtn"></button>
          <button type="button" class="btn btn-primary chat-list-type-btn" id="allGroupBtn"></button>
        </div>
        <div id="myGroupArea">
          <div id="my_info" class="inbox_user row">
          </div>
          <label class="contact-seperator" id="favorite-seperator">Favorite</label>
          <div id="favorite_list" class="inbox_user row">
          </div>
          <label class="contact-seperator" id="mygroup-seperator">MY GROUP</label>
          <div id="my_group_list" class="inbox_user row">
          </div>
        </div>

        <div id="allGroupArea">
          <label class="contact-seperator" id="groupPathSeperator">GROUP PATH</label>
          <div id="groupPathArea" style="float:left;">
          </div>
          <label class="contact-seperator" id="moveBtnSeperator">MOVE BUTTON</label>
          <div id="groupBtnArea">
            <div class="user_list col-12" id="rootGroupBtn">
              <div class="user_people">
                <div class="user_ib">
                  <h5>MOVE TO ROOT GROUP</h5>
                </div>
              </div>
            </div>
            <div class="user_list col-12" id="parentGroupBtn">
              <div class="user_people">
                <div class="user_ib">
                  <h5>MOVE TO PARENTS GROUP</h5>
                </div>
              </div>
            </div>
          </div>
          <label class="contact-seperator" id="childGroupSeperator">CHILD GROUP</label>
          <div id="childGroupList" class="inbox_user row group-search-list">
          </div>
          <label class="contact-seperator" id="groupUserSeperator">USERS IN GROUP</label>
          <div id="userInGroupList" class="inbox_user row group-search-list">
          </div>
        </div>


      </div>
    </div>

    <div class="tab-pane fade" id="pills-archive" role="tabpanel" aria-labelledby="pills-archive-tab">
      <div class="inbox_archive">
        <div class="heading_srch">
          <div class="srch_bar">
            <div class="stylish-input-group">
              <input id="contactListKeyword" type="text" class="search-bar" placeholder="Search">
              <span class="input-group-addon">
                <button type="button"> <i class="fa fa-search" aria-hidden="true"></i> </button>
              </span>
            </div>
          </div>
        </div>
        <div id="archive_list" class="inbox_archive row">
        </div>
      </div>
    </div>

    <div id="archive_detail" class="archive_detail" >
    </div>

    <div class="tab-pane fade" id="pills-group" role="tabpanel" aria-labelledby="pills-group-tab">
      <div class="inbox_people">
        <div class="heading_srch">
          <div class="srch_bar">
            <div class="stylish-input-group">
              <input id="groupListKeyword" type="text" class="search-bar" placeholder="Search">
              <span class="input-group-addon">
                <button type="button"> <i class="fa fa-search" aria-hidden="true"></i> </button>
              </span>
            </div>
          </div>
        </div>
        <div id="group_list" class="inbox_user row">
        </div>
      </div>
    </div>
    <div class="tab-pane fade" id="pills-user" role="tabpanel" aria-labelledby="pills-user-tab">
      <div class="inbox_people">
        <div class="heading_srch">
          <div class="recent_heading">
            <h4 id="groupName"></h4>
          </div>
        </div>
        <div class="heading_srch">
          <div class="srch_bar">
            <div class="stylish-input-group">
              <input id="userListKeyword" type="text" class="search-bar" placeholder="Search">
              <span class="input-group-addon">
                <button type="button"> <i class="fa fa-search" aria-hidden="true"></i> </button>
              </span>
            </div>
          </div>
        </div>
        <div id="user_list" class="inbox_user row">
        </div>
      </div>
    </div>
    <div class="tab-pane fade" id="pills-confirm" role="tabpanel" aria-labelledby="pills-confirm-tab">
      <div class="inbox_people">
        <div class="heading_srch">
          <div class="recent_heading">
            <h3 id="inviteStatus"></h3>
            <div class="srch_bar">
              <div class="stylish-input-group">
                <input id="newRoomName" type="text" class="search-bar" placeholder="Room name" aria-label="Search">
              </div>
            </div>
          </div>
        </div>
        <div class="data_srch">
          <h3 id="invitedUsers"></h3>
          <div id="select_user_list" class="inbox_user row">
          </div>
        </div>
      </div>
    </div>
  </div>
  <ul class="icon-bar fixed-bottom nav nav-pills mb-0" id="pills-tab" role="tablist">
    <!-- Display None (d-none) chatList -->
    <li class="nav-item d-flex justify-content-center">
      <a class="nav-link active" id="pills-chatlist-tab" data-toggle="pill" href="#pills-chatlist" role="tab" aria-controls="pills-chatlist" aria-selected="true">
        <i class="fa fa-comments fa-6" aria-hidden="true"></i>
      </a>
    </li>
    <!-- Display None (d-none) chat -->
    <li class="nav-item d-none justify-content-center">
      <a class="nav-link" id="pills-chat-tab" data-toggle="pill" href="#pills-chat" role="tab" aria-controls="pills-chat" aria-selected="false">
        <i class="fa fa-comments fa-6" aria-hidden="true"></i>
      </a>
    </li>
    <!-- Display None (d-none) contact -->
    <li class="nav-item d-none justify-content-center">
      <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">
        <i class="fa fa-comments fa-6" aria-hidden="true"></i>
      </a>
    </li>
    <!-- Display None (d-none) archive -->
    <li class="nav-item d-none justify-content-center">
      <a class="nav-link" id="pills-archive-tab" data-toggle="pill" href="#pills-archive" role="tab" aria-controls="pills-archive" aria-selected="false">
        <i class="fa fa-comments fa-6" aria-hidden="true"></i>
      </a>
    </li>
    <!-- Display None (d-none) chatList -->
    <li class="nav-item d-none justify-content-center">
      <a class="nav-link" id="pills-group-tab" data-toggle="pill" href="#pills-group" role="tab" aria-controls="pills-group" aria-selected="false">
        <i class="fa fa-comments fa-6" aria-hidden="true"></i>
      </a>
    </li>
    <!-- Display None (d-none) chatList -->
    <li class="nav-item d-none justify-content-center">
      <a class="nav-link" id="pills-user-tab" data-toggle="pill" href="#pills-user" role="tab" aria-controls="pills-user" aria-selected="false">
        <i class="fa fa-comments fa-6" aria-hidden="true"></i>
      </a>
    </li>
    <!-- Display None (d-none) chatList -->
    <li class="nav-item d-none justify-content-center">
      <a class="nav-link" id="pills-confirm-tab" data-toggle="pill" href="#pills-confirm" role="tab" aria-controls="pills-confirm" aria-selected="false">
        <i class="fa fa-comments fa-6" aria-hidden="true"></i>
      </a>
    </li>
    <li class="nav-item d-flex justify-content-center">
      <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">
        <i class="fa fa-file-alt fa-6" aria-hidden="true"></i>
      </a>
    </li>
    <li class="nav-item d-flex justify-content-center">
      <a class="nav-link" id="pills-communication-tab" data-toggle="pill" href="#pills-communication" role="tab" aria-controls="pills-communication" aria-selected="false">
        <i class="fa fa-users fa-6" aria-hidden="true"></i>
      </a>
    </li>
    <li class="nav-item d-flex justify-content-center">
      <a class="nav-link" id="pills-setting-tab" data-toggle="pill" href="#pills-setting" role="tab" aria-controls="pills-setting" aria-selected="false">
        <i class="fa fa-cog fa-6" aria-hidden="true"></i>
      </a>
    </li>
  </ul>
</div>

<div class="popup" id="myNamecard"></div>
<div class="popup" id="userNamecard"></div>

<nav class="navbar navbar-expand navbar-dark fixed-bottom flex-md-nowrap p-2 bg-footer talign-center border footer-nav" id="bottomNav">
  <div class="col-4">
    <img src="./icon/ic_communication_meeting_gray.png" style="width: 35%;" id="contactButton">
  </div>
  <div class="col-4">
    <img src="./icon/ic_communication_menu.png" style="width: 35%;" id="chatButton">
  </div>
  <div class="col-4">
    <img src="./icon/home_common_content_icon_on.png" style="width: 35%;" id="archiveButton">
  </div>
</nav>
<script id="my-namecard-template" type="text/template">
  <div style="float: right;"><i class="fa fa-times my-name-card-close" aria-hidden="true" onclick="CHAT_UI.hideNamecard('myNamecard');"></i></div>
  <div class="namecard_img">
    <img src="./images/user-profile.png" alt>
    <div class="namedard-img-upload" >Upload</div>
    <div class="namecard-login-id" >{{name}}</div>
  </div>
  <div id="myGroupNameList">
    {{#groupPathList}}
    <li><b>{{.}}</b></li>
    {{/groupPathList}}
  </div>
</script>
<script id="namecard-template" type="text/template">
  <div style="float: right;"><i class="fa fa-times my-name-card-close" aria-hidden="true" onclick="CHAT_UI.hideNamecard('userNamecard');"></i></div>
  <div class="namecard_img">
    <img src="./images/user-profile.png" alt>
    <div class="namecard-login-id">{{name}}</div>
  </div>
  <div id="groupNameList">
    {{#groupPathList}}
    <li><b>{{.}}</b></li>
    {{/groupPathList}}
  </div>

  <div class="text-center">
    <button type="button" class="btn btn-primary" id="nameCardChatBtn" onclick="CHAT_UI.startChat('{{loginId}}','{{name}}');">{{chat}}</button>
    <button type="button" class="btn btn-primary" id="nameCardVoiceBtn" onclick="CHAT_UI.startVoice();">{{voice}}</button>
    {{#isFavorite}}
    <button type="button" class="btn btn-primary" onclick="CHAT_UI.changeFavorite();">{{favorite}}</button>
    {{/isFavorite}}
    {{^isFavotire}}
    <button type="button" class="btn btn-primary" onclick="CHAT_UI.changeFavorite();">{{favorite}}</button>
    {{/isFavorite}}
  </div>
</script>
<script id="message-template" type="text/template">
  <div class="incoming_msg">
    <div class="incoming_msg_img">
      <img src={{{profileImage}}} alt="" onclick="CHAT_UI.makeNameCard({{shopMemberId}});" >
    </div>
    <div class="received_msg">
      <div class="received_withd_msg">
        <p class="message_content">{{text}}</p>
        <span class="time_date">{{from}} | {{createdAtTime}} | {{createdAtDay}}</span>
      </div>
    </div>
  </div>
</script>
<script id="message-template-me" type="text/template">
  <div class="outgoing_msg">
    <div class="sent_msg">
      <p class="message_content">{{text}}</p>
      <span class="time_date">{{from}} | {{createdAtTime}} | {{createdAtDay}}</span>
    </div>
  </div>
</script>
<script id="room-template" type="text/template">
  <div class="chat_list {{active}} col-12" data-roomName="{{roomName}}" data-room-id="{{roomId}}">
    <div class="chat_people">
      <div class="chat_img">
        <img src={{{profileImage}}} alt="">
      </div>
      <div class="chat_ib">
        <div class="row">
          <div class="col-8">
            <h5 class="">
              <div class="room-list-title">
                <span class="text-truncate room-name-font">{{roomName}}</span>
                <span class="text-muted room-member-count">{{userCnt}}</span>
              </div>
            </h5>
          </div>
          <div class="col-4">
            <span class="chat_date">{{time}}</span>
          </div>
        </div>
        <p class="text-truncate float-left">{{lastMessage}}</p><span class="badge badge-pill badge-danger float-right unreadMsgCnt">{{unreadMsgCnt}}</span>
      </div>
      <div class="squareBox deleteBox"  data-room-id="{{roomId}}" data-active-room="{{active}}">
        <div class="squareBoxContent">
          <div>
            <span>
              <i class="fa fa-trash"></i>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</script>
<script id="group-template" type="text/template">
  <div class="group_list col-12" data-name="{{name}}" data-id="{{id}}">
    <div class="group_people">
      <div class="group_img">
        <img src="./images/group-image.png" alt="">
      </div>
      <div class="group_ib">
        <h5>{{name}}</h5>
        <p>{{info}}</p>
      </div>
    </div>
  </div>
</script>
<script id="user-template" type="text/template">
  <div class="user_list col-12" data-name="{{name}}">
    <div class="user_people">
      <div class="user_img">
        <img src="{{profileImage}}" alt="">
      </div>
      <div class="user_ib">
        <h5>{{name}}</h5>
        <p>{{info}}</p>
      </div>
      <div class="squareBox userCheckBox" data-name="{{name}}" data-id="{{id}}">
        <div class="squareBoxContent">
          <div>
            <span>
              <i class="fas fa-check"></i>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</script>
<script id="group-navigater-template" type="text/template">
  <label class="group-navigater" data-name="{{name}}" data-id="{{id}}">{{name}}</label>
</script>
<script id="favorite-user-template" type="text/template">
  <div class="user_list col-12" data-name="{{name}}">
    <div class="user_people">
      <div class="user_img">
        <img src="{{profileImage}}" alt="">
      </div>
      <div class="user_ib">
        <h5>{{name}}</h5>
        <p>{{info}}</p>
      </div>
      <div class="squareBox userCheckBox" data-name="{{name}}" data-id="{{id}}">
        <div class="squareBoxContent">
          <div>
          <span>
            <i class="fas fa-check"></i>
          </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</script>
<script id="archive-template" type="text/template">
  <div class="archive_list col-12">
    <div class="archive_data">
      <div class="archive_img">
        <img src={{thumbnailImage}} alt="">
      </div>
      <div class="archive_ib">
        <div class="row">
          <div class="archive_date_font col-10">
            <span class="archive_date">{{insertDate}}</span>
          </div>
          <div class="archive_type">
            <span class="text-truncate col-2 {{type}}">{{archiveType}}</span>
          </div>
        </div>
        <p class="archive_file_name text-truncate">{{fileName}}</p>
      </div>
    </div>
  </div>
</script>
<script id="archive-detail-template" type="text/template">
  <div id="archive_player" class="player">
  </div>
  <ul class="archive_info">
    <li class="fileName">
      <h5>{{fileNameTitle}}</h5>
      <p class="text-truncate">{{fileName}}</p>
    </li>
    <li class="insertDate">
      <h5>{{saveDateTitle}}</h5>
      <p class="text-truncate">{{insertDate}}</p>
    </li>
    <li class="chatRoomName">
      <h5>{{roomNameTitle}}</h5>
      <p class="text-truncate">{{chatRoomName}}
      <input type="button" value=">" id="joinChatRoom">
      </p>
    </li>
    <li class="saveUser">
      <h5>{{saveUserTitle}}</h5>
      <ul class="save_user_list" id="save_user">
      </ul>
    </li>
    <li class="joinUser">
      <h5>{{attendUserTitle}}</h5>
      <ul class="join_user_list" id="join_user">
      </ul>
    </li>
  </ul>
</script>
<script id="archive-user-template" type="text/template">
  <li class="archive_user">
    <img src="{{profileImage}}" alt="">
    <p>{{userName}}</p>
  </li>
</script>
<script src="./socket.io/dist/socket.io.js"></script>
<script src="./js/libs/socket.io.js"></script>
<script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/popper.min.js"></script>
<script src="./js/libs/moment.js"></script>
<script src="./js/libs/locale/ko.js" charset="UTF-8"></script>
<script src="./js/libs/locale/ja.js" charset="UTF-8"></script>
<script src="./js/libs/mustache.min.js"></script>
<script src="./js/libs/deparam.js"></script>
<script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/libs/lightbox.js"></script>
<script src="./js/language.js"></script>
<script src="./js/language_ko.js" charset="UTF-8"></script>
<script src="./js/language_ja.js" charset="UTF-8"></script>
<script src="./js/language_en.js" charset="UTF-8"></script>
<script src="./js/constant.js"></script>
<script src="./js/chat.js"></script>
<script src="./js/chat-ui.js"></script>
<script src="./js/chat-util.js"></script>
<script src="./js/chat-db.js"></script>
<script src="./js/chat-websocket.js"></script>
</body>
<script>
jQuery('#homeButton').on('click', function() {
	if (CHAT_UTIL.isIOS()) {
		webkit.messageHandlers.goHome.postMessage({});

	} else if (CHAT_UTIL.isAndroid()) {
		android.goHome();
	}
});
</script>
</html>