Index: arms/html/jiraConnection/content-container.html
===================================================================
diff -u
--- arms/html/jiraConnection/content-container.html	(revision 0)
+++ arms/html/jiraConnection/content-container.html	(revision 477f035c8005f0be13ca4bbabc65f885e4426234)
@@ -0,0 +1,1723 @@
+<div class="col-lg-6">
+    <section class="widget">
+        <header>
+            <h4>
+				<span   class="font13"
+                        style="font-weight: bold">
+					    <i  class="fa fa-edit"
+                            style="vertical-align: middle;font-size: 14px;"></i>
+					    지라 서버
+				</span>
+            </h4>
+            <div class="widget-controls">
+                <a  data-widgster="toleft"
+                    title="change width to left"
+                    href="#">
+                    <i class="glyphicon glyphicon-chevron-left"></i>
+                </a>
+                <a  data-widgster="expand"
+                    title="Expand"
+                    href="#">
+                    <i class="glyphicon glyphicon-chevron-up"></i>
+                </a>
+                <a  data-widgster="collapse"
+                    title="Collapse"
+                    href="#">
+                    <i class="glyphicon glyphicon-chevron-down"></i>
+                </a>
+                <a  data-widgster="toright"
+                    title="change width to right"
+                    href="#">
+                    <i class="glyphicon glyphicon-chevron-right"></i>
+                </a>
+                <a  data-widgster="restore"
+                    title="Restore"
+                    href="#">
+                    <span class="glyphicon glyphicon-repeat"></span>
+                </a>
+                <a  data-widgster="fullscreen"
+                    title="Fullscreen"
+                    href="#">
+                    <i class="glyphicon glyphicon-fullscreen"
+                       style="font-size: 11px"></i>
+                </a>
+            </div>
+        </header>
+        <div class="body">
+            <div class="gradient_middle_border" style="width: 100%; height: 2px"></div>
+            <blockquote class="font13"
+                        style="margin-top: 5px;">
+                1. 등록된 지라 서버 조회 및 추가
+                <div style="float: right;">
+                    <button class="btn btn-transparent btn-xs"
+                            style="margin-top: -3px; color: #acacac; background: rgba(51,51,51,.2); padding: 1px 9px;"
+                            onclick="return true;">
+                        Help
+                        <i  class="fa fa-question"
+                            style="font-size: 14px; vertical-align: middle; color: #acacac"></i>
+                    </button>
+                </div>
+            </blockquote>
+            <div class="clearfix"
+                 style="margin-bottom: 10px; margin-top: 10px;">
+                <div style="float: left">
+                    <button type="button"
+                            id="copychecker"
+                            class="btn btn-default btn-sm">
+                        Copy
+                    </button>
+                    <button type="button"
+                            id="csvchecker"
+                            class="btn btn-default btn-sm">
+                        CSV
+                    </button>
+                    <button type="button"
+                            id="excelchecker"
+                            class="btn btn-default btn-sm">
+                        Excel
+                    </button>
+                    <button type="button"
+                            id="printchecker"
+                            class="btn btn-default btn-sm hidden">
+                        Print
+                    </button>
+                    <button type="button"
+                            id="pdfchecker"
+                            class="btn btn-default btn-sm hidden">
+                        PDF
+                    </button>
+                </div>
+
+                <div style="float: right">
+                    <button class="btn btn-primary btn-block btn-sm"
+                            data-target="#my_modal2"
+                            data-toggle="modal"
+                            id="modal_popup_id"
+                            type="button">
+                        지라 추가
+                    </button>
+                </div>
+            </div>
+            <div    class="box box-primary"
+                    style="background: rgba(51, 51, 51, 0.225); margin-bottom: 5px !important">
+                <div    class="box-body">
+                    <table  class="display"
+                            style="width: 100%; overflow: hidden; border-top: 1px dashed rgba(51, 51, 51, 0.3)"
+                            id="pdservice_table">
+                    </table><!-- 데이터 테이블 html이 들어가는 공간 -->
+                </div>
+            </div>
+            <div
+                    id="review_box_app"
+                    class="review-box">
+                <div class="row">
+                    <div id= "jira_con_nav" class="col-sm-4">
+                        <span
+                                id="jira_connection_list__nav_btn"
+                                class="btn"
+                                style="background: rgba(51,51,51,.3);">
+                            <i class="fa fa-bars"></i>
+                        </span>
+<!--                        <button
+                                id="compose_btn"
+                                class="btn btn-default btn-block">
+                            Btn
+                        </button>-->
+                        <ul
+                                id="jira_connection_classify"
+                                class="jira_connection_classify mailbox-folders nav-collapse">
+                            <li class="active"><a href="#all"
+                                                  data-toggle="tab">전체</a></li>
+                            <li><a href="#onpremise"
+                                   data-toggle="tab">온프레미스 <i class="fa fa-laptop"></i></a></li>
+                            <li><a href="#cloud"
+                                   data-toggle="tab">클라우드 <i class="fa fa-cloud"></i></a></li>
+                        </ul>
+<!--                        <ul
+                                id="review_classify"
+                                class="review-classify"></ul>-->
+                    </div>
+                    <div id= "jira_con_list" class="col-sm-8">
+                        <h5
+                                id="folder_title"
+                                class="folder-title">
+                            Jira Server 목록
+<!--                            <small>(2 unread messages)</small>-->
+                        </h5>
+                        <div
+                                id="review_content"
+                                class="review-content">
+                            <div class="box-body">
+                                <!-- Jira 데이터 테이블 html 삽입 공간 -->
+                                <table
+                                        id="jira_connection_table"
+                                        class="display responsive no-wrap"
+                                        style="width: 100% !important;"
+                                        cellspacing="0"></table>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+</div>
+
+<!--<div class="col-lg-4">
+    <section class="widget">
+        <header>
+            <h4>
+				<span   class="font13"
+                        style="font-weight: bold">
+					    <i  class="fa fa-edit"
+                            style="vertical-align: middle;font-size: 14px;"></i>
+					    제품(서비스) 조회 및 선택
+				</span>
+            </h4>
+            <div class="widget-controls">
+                <a  data-widgster="toleft"
+                    title="change width to left"
+                    href="#">
+                    <i class="glyphicon glyphicon-chevron-left"></i>
+                </a>
+                <a  data-widgster="expand"
+                    title="Expand"
+                    href="#">
+                    <i class="glyphicon glyphicon-chevron-up"></i>
+                </a>
+                <a  data-widgster="collapse"
+                    title="Collapse"
+                    href="#">
+                    <i class="glyphicon glyphicon-chevron-down"></i>
+                </a>
+                <a  data-widgster="toright"
+                    title="change width to right"
+                    href="#">
+                    <i class="glyphicon glyphicon-chevron-right"></i>
+                </a>
+                <a  data-widgster="restore"
+                    title="Restore"
+                    href="#">
+                    <span class="glyphicon glyphicon-repeat"></span>
+                </a>
+                <a  data-widgster="fullscreen"
+                    title="Fullscreen"
+                    href="#">
+                    <i class="glyphicon glyphicon-fullscreen"
+                       style="font-size: 11px"></i>
+                </a>
+            </div>
+        </header>
+        <div class="body">
+            <div class="gradient_middle_border" style="width: 100%; height: 2px"></div>
+            <blockquote class="font13"
+                        style="margin-top: 5px;">
+                1. 제품(서비스) 선택
+                <div style="float: right;">
+                    <button class="btn btn-transparent btn-xs"
+                            style="margin-top: -3px; color: #acacac; background: rgba(51,51,51,.2); padding: 1px 9px;"
+                            onclick="return true;">
+                        Help
+                        <i  class="fa fa-question"
+                            style="font-size: 14px; vertical-align: middle; color: #acacac"></i>
+                    </button>
+                </div>
+            </blockquote>
+            <div class="clearfix"
+                 style="margin-bottom: 10px; margin-top: 10px;">
+                <div style="float: left">
+                    <button type="button"
+                            id="copychecker"
+                            class="btn btn-default btn-sm">
+                        Copy
+                    </button>
+                    <button type="button"
+                            id="csvchecker"
+                            class="btn btn-default btn-sm">
+                        CSV
+                    </button>
+                    <button type="button"
+                            id="excelchecker"
+                            class="btn btn-default btn-sm">
+                        Excel
+                    </button>
+                    <button type="button"
+                            id="printchecker"
+                            class="btn btn-default btn-sm hidden">
+                        Print
+                    </button>
+                    <button type="button"
+                            id="pdfchecker"
+                            class="btn btn-default btn-sm hidden">
+                        PDF
+                    </button>
+                </div>
+
+                <div style="float: right">
+                    <button class="btn btn-primary btn-block btn-sm"
+                            data-target="#my_modal2"
+                            data-toggle="modal"
+                            id="modal_popup_id"
+                            type="button">
+                        제품(서비스) 추가
+                    </button>
+                </div>
+            </div>
+            <div    class="box box-primary"
+                    style="background: rgba(51, 51, 51, 0.225); margin-bottom: 5px !important">
+                <div    class="box-body">
+                    <table  class="display"
+                            style="width: 100%; overflow: hidden; border-top: 1px dashed rgba(51, 51, 51, 0.3)"
+                            id="pdservice_table">
+                    </table>
+                </div>
+            </div>
+        </div>
+    </section>
+</div>-->
+
+<div class="col-lg-6">
+    <section class="widget">
+        <header>
+            <h4>
+				<span   class="font13"
+                        style="font-weight: bold">
+					    <i  class="fa fa-edit"
+                            style="vertical-align: middle;font-size: 14px;">
+                        </i>
+					    지라 서버 상세보기/변경
+				</span>
+            </h4>
+            <div class="widget-controls">
+                <a  data-widgster="toleft"
+                    title="change width to left"
+                    href="#">
+                    <i class="glyphicon glyphicon-chevron-left"></i>
+                </a>
+                <a  data-widgster="expand"
+                    title="Expand"
+                    href="#">
+                    <i class="glyphicon glyphicon-chevron-up"></i>
+                </a>
+                <a  data-widgster="collapse"
+                    title="Collapse"
+                    href="#">
+                    <i class="glyphicon glyphicon-chevron-down"></i>
+                </a>
+                <a  data-widgster="toright"
+                    title="change width to right"
+                    href="#">
+                    <i class="glyphicon glyphicon-chevron-right"></i>
+                </a>
+                <a  data-widgster="restore"
+                    title="Restore"
+                    href="#">
+                    <span class="glyphicon glyphicon-repeat"></span>
+                </a>
+                <a  data-widgster="fullscreen"
+                    title="Fullscreen"
+                    href="#">
+                    <i class="glyphicon glyphicon-fullscreen"
+                       style="font-size: 11px"></i>
+                </a>
+            </div>
+        </header>
+        <div class="body">
+            <div class="gradient_middle_border" style="width: 100%; height: 2px"></div>
+            <blockquote class="font13"
+                        style="margin-top: 5px;">
+                2.지라 서버 등록 정보를 확인하고 편집/삭제
+                <div style="float: right;">
+                    <button class="btn btn-transparent btn-xs"
+                            style="margin-top: -3px; color: #acacac; background: rgba(51,51,51,.2); padding: 1px 9px;"
+                            onclick="return true;">
+                        Help
+                        <i  class="fa fa-question"
+                            style="font-size: 14px; vertical-align: middle; color: #acacac"></i>
+                    </button>
+                </div>
+            </blockquote>
+            <div class="clearfix"
+                 style="margin-bottom: 10px; margin-top: 10px;">
+                <div style="float: left">
+                    <button type="button"
+                            id="copychecker"
+                            class="btn btn-default btn-sm">
+                        Copy
+                    </button>
+                    <button type="button"
+                            id="csvchecker"
+                            class="btn btn-default btn-sm hidden">
+                        CSV
+                    </button>
+                    <button type="button"
+                            id="excelchecker"
+                            class="btn btn-default btn-sm hidden">
+                        Excel
+                    </button>
+                    <button type="button"
+                            id="printchecker"
+                            class="btn btn-default btn-sm hidden">
+                        Print
+                    </button>
+                    <button type="button"
+                            id="pdfchecker"
+                            class="btn btn-default btn-sm hidden">
+                        PDF
+                    </button>
+                </div>
+
+                <div style="float: right">
+                    <button type="button"
+                            id="version_popup"
+                            class="btn btn-warning btn-sm hidden"
+                            data-toggle="modal"
+                            data-target="#my_modal2"
+                            onClick="modalPopup('versionPopup')">
+                        팝업 창으로 보기
+                    </button>
+                    <button type="button"
+                            id="version_update"
+                            class="btn btn-success btn-sm">
+                        Save
+                    </button>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-md-12">
+                    <section class="widget widget-tabs">
+                        <header>
+                            <ul class="nav nav-tabs">
+                                <li class="active">
+                                    <a  href="#stats"
+                                        data-toggle="tab">
+                                        <strong>상세 보기</strong>
+                                    </a>
+                                </li>
+                                <li>
+                                    <a  href="#report"
+                                        data-toggle="tab">
+                                        <strong>편집 하기</strong>
+                                    </a>
+                                </li>
+                                <li>
+                                    <a  href="#dropdown1"
+                                        data-toggle="tab">
+                                        <strong>삭제 하기</strong>
+                                    </a>
+                                </li>
+                            </ul>
+                        </header>
+                        <div class="body tab-content">
+                            <div    id="stats"
+                                    class="tab-pane active clearfix"
+                                    style="padding-top: 30px !important">
+                                <form   class="form-horizontal"
+                                        method="post">
+                                    <fieldset>
+<!--                                        <div class="control-group">
+                                            <label  for="pdservice_name"
+                                                    class="control-label"
+                                                    style="width: 160px !important">
+                                                지라 환경 :
+                                            </label>
+                                            <div    class="controls form-group input-group"
+                                                    style="margin-left: 100px">
+												<span class="input-group-addon">
+													<i class="glyphicon glyphicon-gift"></i>
+												</span>
+                                                <input  type="text"
+                                                        id="pdservice_name"
+                                                        name="pdservice_name"
+                                                        class="form-control parsley-validated font13 darkBack"
+                                                        style="color: #a4c6ff; background: rgba(50, 50, 50, 0.99) !important"
+                                                        placeholder="제품(서비스) 이름"
+                                                        required="required" />
+                                                <span class="input-group-addon font11">
+													<i class="fa fa-question-circle"></i>
+													중복 불가
+												</span>
+                                            </div>
+                                        </div>-->
+                                        <div    class="control-group"
+                                                for="detailview_req_priority">
+                                            <label class="control-label font13">지라 환경 :</label>
+                                            <div    class="controls form-group input-group"
+                                                    style="margin-left: 160px">
+												<span class="input-group-addon">
+													<i class="glyphicon glyphicon-gift"></i>
+												</span>
+                                                <div style="display: flex; align-items: center; gap: 10px; padding: 0">
+                                                    <div    id="detailview_req_priority"
+                                                            class="btn-group"
+                                                            data-toggle="buttons">
+                                                        <label class="btn btn-warning">
+                                                            <input  type="radio"
+                                                                    name="options"
+                                                                    id="detailview_req_priority_option1" />
+                                                            클라우드
+                                                        </label>
+                                                        <label class="btn btn-warning">
+                                                            <input  type="radio"
+                                                                    name="options"
+                                                                    id="detailview_req_priority_option2" />
+                                                            온프레미스
+                                                        </label>
+<!--                                                        <label class="btn btn-warning">
+                                                            <input  type="radio"
+                                                                    name="options"
+                                                                    id="detailview_req_priority_option3" />
+                                                            기타
+                                                        </label>-->
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="control-group">
+                                            <label  for="pdservice_version"
+                                                    class="control-label"
+                                                    style="width: 160px !important">
+                                                지라 URL :
+                                            </label>
+                                            <div    class="controls form-group input-group"
+                                                    style="margin-left: 100px">
+												<span class="input-group-addon">
+													<i class="glyphicon glyphicon-gift"></i>
+												</span>
+                                                <input  type="text"
+                                                        id="pdservice_version"
+                                                        name="pdservice_version"
+                                                        class="form-control parsley-validated font13 darkBack"
+                                                        style="color: #a4c6ff; background: rgba(50, 50, 50, 0.99) !important"
+                                                        placeholder="Enter Jira URL"
+                                                        required="required" />
+                                                <span class="input-group-addon font11">
+													<i class="fa fa-question-circle"></i>
+													ex: X.X.X
+												</span>
+                                            </div>
+                                        </div>
+                                        <div class="control-group">
+                                            <label  for="version_start_date"
+                                                    class="control-label"
+                                                    style="width: 160px !important">
+                                                JIRA ID :
+                                            </label>
+                                            <div    class="controls form-group input-group"
+                                                    style="margin-left: 100px">
+												<span class="input-group-addon">
+													<i class="glyphicon glyphicon-gift"></i>
+												</span>
+                                                <input  type="text"
+                                                        id="version_start_date"
+                                                        name="version_start_date"
+                                                        class="form-control parsley-validated font13 darkBack"
+                                                        style="color: #a4c6ff; background: rgba(50, 50, 50, 0.99) !important"
+                                                        placeholder="Enter Jira ID"
+                                                        required="required" />
+                                                <span class="input-group-addon font11">
+													<i class="fa fa-question-circle"></i>
+													지라 아이디
+												</span>
+                                            </div>
+                                        </div>
+                                        <div class="control-group">
+                                            <label  for="version_end_date"
+                                                    class="control-label"
+                                                    style="width: 160px !important">
+                                                JIRA PASS Or TOKEN :
+                                            </label>
+                                            <div    class="controls form-group input-group"
+                                                    style="margin-left: 100px">
+												<span class="input-group-addon">
+													<i class="glyphicon glyphicon-gift"></i>
+												</span>
+                                                <input  type="text"
+                                                        id="version_end_date"
+                                                        name="version_end_date"
+                                                        class="form-control parsley-validated font13 darkBack"
+                                                        style="color: #a4c6ff; background: rgba(50, 50, 50, 0.99) !important"
+                                                        placeholder="Enter Jira Pass or Token"
+                                                        required="required" />
+                                                <span class="input-group-addon font11">
+													<i class="fa fa-question-circle"></i>
+													암호 또는 토큰
+												</span>
+                                            </div>
+                                        </div>
+<!--                                        <div class="control-group">
+                                            <label  class="control-label font13"
+                                                    style="width: 25% !important">
+                                                버전 내용 :
+                                            </label>
+                                            <div    class="col-sm-12 darkBack"
+                                                    style="padding-top: 10px; padding-bottom: 10px; margin-top: 10px"
+                                                    id="version_contents">
+                                                Version Contents
+                                            </div>
+                                        </div>-->
+                                    </fieldset>
+                                </form>
+                            </div>
+                            <div    id="report"
+                                    class="tab-pane"
+                                    style="padding-top: 30px !important">
+                                <div>
+                                    <form   class="form-horizontal"
+                                            method="post">
+                                        <fieldset>
+                                            <div    class="control-group"
+                                                    for="detailview_req_priority">
+                                                <label class="control-label font13">지라 환경 :</label>
+                                                <div    class="controls form-group input-group"
+                                                        style="margin-left: 160px">
+												<span class="input-group-addon">
+													<i class="glyphicon glyphicon-gift"></i>
+												</span>
+                                                    <div style="display: flex; align-items: center; gap: 10px; padding: 0">
+                                                        <div    id="detailview_req_priority"
+                                                                class="btn-group"
+                                                                data-toggle="buttons">
+                                                            <label class="btn btn-warning">
+                                                                <input  type="radio"
+                                                                        name="options"
+                                                                        id="detailview_req_priority_option1" />
+                                                                클라우드
+                                                            </label>
+                                                            <label class="btn btn-warning">
+                                                                <input  type="radio"
+                                                                        name="options"
+                                                                        id="detailview_req_priority_option2" />
+                                                                온프레미스
+                                                            </label>
+                                                            <!--
+                                                             <label class="btn btn-warning">
+                                                             <input  type="radio"
+                                                             name="options"
+                                                             id="detailview_req_priority_option3" />
+                                                            기타
+                                                           </label>-->
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="control-group">
+                                                <label  for="pdservice_version"
+                                                        class="control-label"
+                                                        style="width: 160px !important">
+                                                    지라 URL :
+                                                </label>
+                                                <div    class="controls form-group input-group"
+                                                        style="margin-left: 100px">
+												<span class="input-group-addon">
+													<i class="glyphicon glyphicon-gift"></i>
+												</span>
+                                                    <input  type="text"
+                                                            id="pdservice_version"
+                                                            name="pdservice_version"
+                                                            class="form-control parsley-validated font13 darkBack"
+                                                            style="color: #a4c6ff; background: rgba(50, 50, 50, 0.99) !important"
+                                                            placeholder="Enter Jira URL"
+                                                            required="required" />
+                                                    <span class="input-group-addon font11">
+													<i class="fa fa-question-circle"></i>
+													ex: X.X.X
+												</span>
+                                                </div>
+                                            </div>
+                                            <div class="control-group">
+                                                <label  for="version_start_date"
+                                                        class="control-label"
+                                                        style="width: 160px !important">
+                                                    JIRA ID :
+                                                </label>
+                                                <div    class="controls form-group input-group"
+                                                        style="margin-left: 100px">
+												<span class="input-group-addon">
+													<i class="glyphicon glyphicon-gift"></i>
+												</span>
+                                                    <input  type="text"
+                                                            id="version_start_date"
+                                                            name="version_start_date"
+                                                            class="form-control parsley-validated font13 darkBack"
+                                                            style="color: #a4c6ff; background: rgba(50, 50, 50, 0.99) !important"
+                                                            placeholder="Enter Jira ID"
+                                                            required="required" />
+                                                    <span class="input-group-addon font11">
+													<i class="fa fa-question-circle"></i>
+													버전 구현 시작일
+												</span>
+                                                </div>
+                                            </div>
+                                            <div class="control-group">
+                                                <label  for="version_end_date"
+                                                        class="control-label"
+                                                        style="width: 160px !important">
+                                                    JIRA PASS Or TOKEN :
+                                                </label>
+                                                <div    class="controls form-group input-group"
+                                                        style="margin-left: 100px">
+												<span class="input-group-addon">
+													<i class="glyphicon glyphicon-gift"></i>
+												</span>
+                                                    <input  type="text"
+                                                            id="version_end_date"
+                                                            name="version_end_date"
+                                                            class="form-control parsley-validated font13 darkBack"
+                                                            style="color: #a4c6ff; background: rgba(50, 50, 50, 0.99) !important"
+                                                            placeholder="Enter Jira Pass or Token"
+                                                            required="required" />
+                                                    <span class="input-group-addon font11">
+													<i class="fa fa-question-circle"></i>
+													버전 구현 종료일
+												</span>
+                                                </div>
+                                            </div>
+<!--                                            <div    class="control-group"
+                                                    for="popup_editview_pdservice_name">
+                                                <label  class="control-label font13"
+                                                        style="color: #f8f8f8; width: 25% !important">
+                                                    제품
+                                                    <sup>서비스</sup>
+                                                    :
+                                                </label>
+                                                <div class="controls form-group input-group">
+													<span class="input-group-addon">
+														<i class="glyphicon glyphicon-gift"></i>
+													</span>
+                                                    <input  type="text"
+                                                            id="input_pdservice_name"
+                                                            name="input_pdservice_name"
+                                                            class="form-control parsley-validated font13 darkBack"
+                                                            data-placement="top"
+                                                            data-original-title="제품(서비스) 이름은 중복될 수 없습니다."
+                                                            required="required"
+                                                            style="color: #a4c6ff"
+                                                            placeholder="service name" />
+                                                </div>
+                                            </div>
+                                            <div    class="control-group"
+                                                    for="popup_editview_pdservice_name">
+                                                <label  class="control-label font13"
+                                                        style="color: #f8f8f8; width: 25% !important">
+                                                    버전 :
+                                                </label>
+                                                <div class="controls form-group input-group">
+													<span class="input-group-addon">
+														<i class="glyphicon glyphicon-gift"></i>
+													</span>
+                                                    <input  type="text"
+                                                            id="input_pdservice_version"
+                                                            name="input_pdservice_version"
+                                                            class="form-control parsley-validated font13 darkBack"
+                                                            data-placement="top"
+                                                            data-original-title="제품(서비스) 이름은 중복될 수 없습니다."
+                                                            required="required"
+                                                            style="color: #a4c6ff"
+                                                            placeholder="version text" />
+                                                </div>
+                                            </div>
+                                            <div    class="control-group"
+                                                    for="popup_editview_pdservice_name">
+                                                <label  class="control-label font13"
+                                                        style="color: #f8f8f8; width: 25% !important">
+                                                    시작 날짜 :
+                                                </label>
+                                                <div class="controls form-group input-group">
+													<span class="input-group-btn">
+														<a  href="#"
+                                                            id="btn_select_calendar"
+                                                            class="btn btn-danger"
+                                                            style="background-color: #e5603b !important; border: 1px solid transparent !important"
+                                                            data-date-format="yyyy/mm/dd">
+															<i class="fa fa-calendar"></i>
+														</a>
+													</span>
+                                                    <input  id="input_pdservice_start_date"
+                                                            class="form-control darkBack"
+                                                            type="text"
+                                                            name="btn_enabled_date"
+                                                            value=""
+                                                            style="color: #a4c6ff"
+                                                            pattern="/^\d{4}\/(0[1-9]|1[012])\/(0[1-9]|[12][0-9]|3[01])$/" />
+                                                </div>
+                                            </div>
+                                            <div    class="control-group"
+                                                    for="popup_editview_pdservice_name">
+                                                <label  class="control-label font13"
+                                                        style="color: #f8f8f8; width: 25% !important">
+                                                    종료 날짜 :
+                                                </label>
+                                                <div class="controls form-group input-group">
+													<span class="input-group-btn">
+														<a  href="#"
+                                                            id="btn_end_calendar"
+                                                            class="btn btn-danger"
+                                                            style="background-color: #e5603b !important; border: 1px solid transparent !important"
+                                                            data-date-format="yyyy/mm/dd">
+															<i class="fa fa-calendar"></i>
+														</a>
+													</span>
+                                                    <input  id="input_pdservice_end_date"
+                                                            class="form-control darkBack"
+                                                            type="text"
+                                                            name="btn_enabled_date"
+                                                            value=""
+                                                            style="color: #a4c6ff"
+                                                            pattern="/^\d{4}\/(0[1-9]|1[012])\/(0[1-9]|[12][0-9]|3[01])$/" />
+                                                </div>
+                                            </div>
+                                            <div class="control-group">
+                                                <label  class="control-label"
+                                                        style="color: #f8f8f8; width: 25% !important">
+                                                    버전 내용
+                                                </label>
+                                                <br />
+                                                <br />
+                                                <div class="controls form-group">
+                                                    <div class="col-sm-12">
+                                                        <div    id="input_pdservice_editor"
+                                                                class="darkBack">
+                                                            <p>버전에 포함될 기능을 요약합니다.</p>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>-->
+                                        </fieldset>
+                                    </form>
+                                </div>
+                            </div>
+                            <div    id="dropdown1"
+                                    class="tab-pane">
+                                <p>삭제 하시겠습니까?</p>
+                                <p><strong>Jira 프로젝트에서 버전은 삭제되지 않습니다.</strong></p>
+                                <p>
+                                    <strong>( 주의하세요 ) A-RMS 의 버전 하위 요구사항은 삭제됩니다.</strong>
+                                </p>
+                                <p>
+                                    <strong>( 주의하세요 ) 삭제된 요구사항과 연결되 Jira 이슈는 유지됩니다.</strong>
+                                </p>
+                                <p>
+                                    <strong>( 주의하세요 ) 삭제된 요구사항은 통계에 반영되지 않습니다.</strong>
+                                </p>
+                                <div>
+                                    <button id="del_version"
+                                            class="btn btn-danger hidden">
+                                        Delete Version
+                                    </button>
+                                    <button class="btn btn-default hidden">Cancel</button>
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+                </div>
+            </div>
+        </div>
+    </section>
+</div>
+
+<!--<div class="col-lg-4">
+	<section class="widget">
+		<header>
+			<h4>
+                <span   class="font13"
+                        style="font-weight: bold">
+					    <i  class="fa fa-edit"
+                            style="vertical-align: middle;font-size: 14px;"></i>
+					    Feed
+				</span>
+                <span class="label label-success">412</span>
+
+            </h4>
+            <div class="widget-controls">
+                <a  data-widgster="toleft"
+                    title="change width to left"
+                    href="#">
+                    <i class="glyphicon glyphicon-chevron-left"></i>
+                </a>
+                <a  data-widgster="expand"
+                    title="Expand"
+                    href="#">
+                    <i class="glyphicon glyphicon-chevron-up"></i>
+                </a>
+                <a  data-widgster="collapse"
+                    title="Collapse"
+                    href="#">
+                    <i class="glyphicon glyphicon-chevron-down"></i>
+                </a>
+                <a  data-widgster="toright"
+                    title="change width to right"
+                    href="#">
+                    <i class="glyphicon glyphicon-chevron-right"></i>
+                </a>
+                <a  data-widgster="restore"
+                    title="Restore"
+                    href="#">
+                    <span class="glyphicon glyphicon-repeat"></span>
+                </a>
+                <a  data-widgster="fullscreen"
+                    title="Fullscreen"
+                    href="#">
+                    <i class="glyphicon glyphicon-fullscreen"
+                       style="font-size: 11px"></i>
+                </a>
+            </div>
+		</header>
+		<div class="body">
+            <div class="gradient_middle_border" style="width: 100%; height: 2px"></div>
+            <blockquote class="font13"
+                        style="margin-top: 5px;">
+                1. 제품(서비스) 선택
+                <div style="float: right;">
+                    <button class="btn btn-transparent btn-xs"
+                            style="margin-top: -3px; color: #acacac; background: rgba(51,51,51,.2); padding: 1px 9px;"
+                            onclick="return true;">
+                        Help
+                        <i  class="fa fa-question"
+                            style="font-size: 14px; vertical-align: middle; color: #acacac"></i>
+                    </button>
+                </div>
+            </blockquote>
+            <div class="clearfix"
+                 style="margin-bottom: 10px; margin-top: 10px;">
+                <div style="float: left">
+                    <button type="button"
+                            id="copychecker"
+                            class="btn btn-default btn-sm">
+                        Copy
+                    </button>
+                    <button type="button"
+                            id="csvchecker"
+                            class="btn btn-default btn-sm">
+                        CSV
+                    </button>
+                    <button type="button"
+                            id="excelchecker"
+                            class="btn btn-default btn-sm">
+                        Excel
+                    </button>
+                    <button type="button"
+                            id="printchecker"
+                            class="btn btn-default btn-sm hidden">
+                        Print
+                    </button>
+                    <button type="button"
+                            id="pdfchecker"
+                            class="btn btn-default btn-sm hidden">
+                        PDF
+                    </button>
+                </div>
+
+                <div style="float: right">
+                    <button class="btn btn-primary btn-block btn-sm"
+                            data-target="#my_modal2"
+                            data-toggle="modal"
+                            id="modal_popup_id"
+                            type="button">
+                        제품(서비스) 추가
+                    </button>
+                </div>
+            </div>
+            <div    class="box box-primary"
+                    style="background: rgba(51, 51, 51, 0.225); margin-bottom: 5px !important">
+                <div    class="box-body">
+                    <table  class="display"
+                            style="width: 100%; overflow: hidden; border-top: 1px dashed rgba(51, 51, 51, 0.3)"
+                            id="pdservice_table">
+                    </table>
+                </div>
+            </div>
+			<div    id="feed"
+				    class="feed">
+				<div class="wrapper">
+					<div class="vertical-line"></div>
+					<section class="feed-item">
+						<div class="icon pull-left">
+							<i class="fa fa-comment"></i>
+						</div>
+						<div class="feed-item-body">
+							<div class="text">
+								<a href="#">John Doe</a>
+								commented on
+								<a href="#">What Makes Good Code Good</a>
+								.
+							</div>
+							<div class="time pull-left">3 h</div>
+						</div>
+					</section>
+					<section class="feed-item">
+						<div class="icon pull-left">
+							<i class="fa fa-check color-green"></i>
+						</div>
+						<div class="feed-item-body">
+							<div class="text">
+								<a href="#">Merge request #42</a>
+								has been approved by
+								<a href="#">Jessica Lori</a>
+								.
+							</div>
+							<div class="time pull-left">10 h</div>
+						</div>
+					</section>
+					<section class="feed-item">
+						<div class="icon pull-left">
+							<img    src="../reference/lightblue4/docs/img/avatars/1.png"
+								    class="img-circle"
+								    alt="" />
+						</div>
+						<div class="feed-item-body">
+							<div class="text">
+								New user
+								<a href="#">Greg Wilson</a>
+								registered.
+							</div>
+							<div class="time pull-left">Today</div>
+						</div>
+					</section>
+					<section class="feed-item">
+						<div class="icon pull-left">
+							<i class="fa fa-bolt color-orange"></i>
+						</div>
+						<div class="feed-item-body">
+							<div class="text">
+								Server fail level raises above normal.
+								<a href="#">See logs</a>
+								for details.
+							</div>
+							<div class="time pull-left">Yesterday</div>
+						</div>
+					</section>
+					<section class="feed-item">
+						<div class="icon pull-left">
+							<i class="fa fa-database"></i>
+						</div>
+						<div class="feed-item-body">
+							<div class="text">
+								<a href="#">Database usage report</a>
+								is ready.
+							</div>
+							<div class="time pull-left">Yesterday</div>
+						</div>
+					</section>
+					<section class="feed-item">
+						<div class="icon pull-left">
+							<i class="fa fa-shopping-cart"></i>
+						</div>
+						<div class="feed-item-body">
+							<div class="text">
+								<a href="#">Order #233985</a>
+								needs additional processing.
+							</div>
+							<div class="time pull-left">Wednesday</div>
+						</div>
+					</section>
+					<section class="feed-item">
+						<div class="icon pull-left">
+							<i class="fa fa-arrow-down"></i>
+						</div>
+						<div class="feed-item-body">
+							<div class="text">
+								<a href="#">Load more...</a>
+							</div>
+						</div>
+					</section>
+				</div>
+			</div>
+		</div>
+	</section>
+	<section class="widget widget-tabs">
+		<header>
+			<ul class="nav nav-tabs">
+				<li class="active">
+					<a  href="#stats"
+						data-toggle="tab">
+						Users
+					</a>
+				</li>
+				<li>
+					<a  href="#report"
+						data-toggle="tab">
+						Favorites
+					</a>
+				</li>
+				<li>
+					<a  href="#dropdown1"
+						data-toggle="tab">
+						Commenters
+					</a>
+				</li>
+			</ul>
+		</header>
+		<div class="body tab-content">
+			<div    id="stats"
+				    class="tab-pane active clearfix">
+				<h5 class="tab-header">
+					<span class="label label-primary"><i class="fa fa-facebook"></i></span>
+					Last logged-in users
+				</h5>
+				<ul class="news-list">
+					<li>
+						<img    src="../reference/lightblue4/docs/img/avatars/1.png"
+                                alt=""
+                                class="pull-left img-circle" />
+						<div class="news-item-info">
+							<div class="name"><a href="#">Finees Lund</a></div>
+							<div class="position">Product Designer</div>
+							<div class="time">Last logged-in: Mar 20, 18:46</div>
+						</div>
+					</li>
+					<li>
+						<img    src="../reference/lightblue4/docs/img/avatars/2.png"
+                                alt=""
+                                class="pull-left img-circle" />
+						<div class="news-item-info">
+							<div class="name"><a href="#">Erebus Novak</a></div>
+							<div class="position">Software Engineer</div>
+							<div class="time">Last logged-in: Mar 23, 9:02</div>
+						</div>
+					</li>
+					<li>
+						<img    src="../reference/lightblue4/docs/img/avatars/3.png"
+							    alt=""
+							    class="pull-left img-circle" />
+						<div class="news-item-info">
+							<div class="name"><a href="#">Leopoldo Reier</a></div>
+							<div class="position">Chief Officer</div>
+							<div class="time">Last logged-in: Jun 6, 15:34</div>
+						</div>
+					</li>
+					<li>
+						<img    src="../reference/lightblue4/docs/img/avatars/4.png"
+							    alt=""
+							    class="pull-left img-circle" />
+						<div class="news-item-info">
+							<div class="name"><a href="#">Frans Garey</a></div>
+							<div class="position">Financial Assistant</div>
+							<div class="time">Last logged-in: Jun 8, 17:20</div>
+						</div>
+					</li>
+					<li>
+						<img    src="../reference/lightblue4/docs/img/avatars/5.png"
+							    alt=""
+							    class="pull-left img-circle" />
+						<div class="news-item-info">
+							<div class="name"><a href="#">Jessica Johnsson</a></div>
+							<div class="position">Sales Manager</div>
+							<div class="time">Last logged-in: Jun 8, 9:13</div>
+						</div>
+					</li>
+				</ul>
+			</div>
+			<div    id="report"
+				    class="tab-pane">
+				<h5 class="tab-header">
+					<i class="fa fa-star"></i>
+					Popular contacts
+				</h5>
+				<ul class="news-list news-list-no-hover">
+					<li>
+						<img    src="../reference/lightblue4/docs/img/avatars/6.png"
+							    alt=""
+							    class="pull-left img-circle" />
+						<div class="news-item-info">
+							<div class="name"><a href="#">Jessica Johnsson</a></div>
+							<div class="options">
+								<button class="btn btn-xs btn-success mr-md">
+									<i class="fa fa-phone"></i>
+									Call
+								</button>
+								<button class="btn btn-xs btn-warning">
+									<i class="fa fa-envelope-o"></i>
+									Message
+								</button>
+							</div>
+						</div>
+					</li>
+					<li>
+						<img    src="../reference/lightblue4/docs/img/avatars/7.png"
+							    alt=""
+							    class="pull-left img-circle" />
+						<div class="news-item-info">
+							<div class="name"><a href="#">Frans Garey</a></div>
+							<div class="options">
+								<button class="btn btn-xs btn-success mr-md">
+									<i class="fa fa-phone"></i>
+									Call
+								</button>
+								<button class="btn btn-xs btn-warning">
+									<i class="fa fa-envelope-o"></i>
+									Message
+								</button>
+							</div>
+						</div>
+					</li>
+					<li>
+						<img    src="../reference/lightblue4/docs/img/avatars/1.png"
+							    alt=""
+							    class="pull-left img-circle" />
+						<div class="news-item-info">
+							<div class="name"><a href="#">Erebus Novak</a></div>
+							<div class="options">
+								<button class="btn btn-xs btn-success mr-md">
+									<i class="fa fa-phone"></i>
+									Call
+								</button>
+								<button class="btn btn-xs btn-warning">
+									<i class="fa fa-envelope-o"></i>
+									Message
+								</button>
+							</div>
+						</div>
+					</li>
+					<li>
+						<img    src="../reference/lightblue4/docs/img/avatars/2.png"
+							    alt=""
+							    class="pull-left img-circle" />
+						<div class="news-item-info">
+							<div class="name"><a href="#">Leopoldo Reier</a></div>
+							<div class="options">
+								<button class="btn btn-xs btn-success mr-md">
+									<i class="fa fa-phone"></i>
+									Call
+								</button>
+								<button class="btn btn-xs btn-warning">
+									<i class="fa fa-envelope-o"></i>
+									Message
+								</button>
+							</div>
+						</div>
+					</li>
+					<li>
+						<img    src="../reference/lightblue4/docs/img/avatars/3.png"
+							    alt=""
+							    class="pull-left img-circle" />
+						<div class="news-item-info">
+							<div class="name"><a href="#">Finees Lund</a></div>
+							<div class="options">
+								<button class="btn btn-xs btn-success mr-md">
+									<i class="fa fa-phone"></i>
+									Call
+								</button>
+								<button class="btn btn-xs btn-warning">
+									<i class="fa fa-envelope-o"></i>
+									Message
+								</button>
+							</div>
+						</div>
+					</li>
+				</ul>
+			</div>
+			<div    id="dropdown1"
+				    class="tab-pane">
+				<h5 class="tab-header">
+					<i class="fa fa-comments"></i>
+					Top Commenters
+				</h5>
+				<ul class="news-list">
+					<li>
+						<img    src="../reference/lightblue4/docs/img/avatars/4.png"
+							    alt=""
+							    class="pull-left img-circle" />
+						<div class="news-item-info">
+							<div class="name"><a href="#">Frans Garey</a></div>
+							<div class="comment">
+								Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
+							</div>
+						</div>
+					</li>
+					<li>
+						<img    src="../reference/lightblue4/docs/img/avatars/5.png"
+							    alt=""
+							    class="pull-left img-circle" />
+						<div class="news-item-info">
+							<div class="name"><a href="#">Finees Lund</a></div>
+							<div class="comment">
+								Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat.
+							</div>
+						</div>
+					</li>
+					<li>
+						<img    src="../reference/lightblue4/docs/img/avatars/6.png"
+							    alt=""
+							    class="pull-left img-circle" />
+						<div class="news-item-info">
+							<div class="name"><a href="#">Jessica Johnsson</a></div>
+							<div class="comment">
+								Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt.
+							</div>
+						</div>
+					</li>
+					<li>
+						<img    src="../reference/lightblue4/docs/img/avatars/7.png"
+							    alt=""
+							    class="pull-left img-circle" />
+						<div class="news-item-info">
+							<div class="name"><a href="#">Erebus Novak</a></div>
+							<div class="comment">
+								Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque.
+							</div>
+						</div>
+					</li>
+					<li>
+						<img    src="../reference/lightblue4/docs/img/avatars/1.png"
+						    	alt=""
+					    		class="pull-left img-circle" />
+						<div class="news-item-info">
+							<div class="name"><a href="#">Leopoldo Reier</a></div>
+							<div class="comment">
+								Laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi.
+							</div>
+						</div>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</section>
+	<section class="widget">
+		<header>
+			<h4>Server Overview</h4>
+			<div class="actions">
+				<small class="text-muted pull-right">2 days ago</small>
+			</div>
+		</header>
+		<div class="body">
+			<ul class="server-stats">
+				<li>
+					<div class="key pull-right">CPU</div>
+					<div class="stat">
+						<div class="info">60% / 37&deg;C / 3.3 Ghz</div>
+						<div class="progress progress-small">
+							<div    class="progress-bar progress-bar-danger"
+								    style="width: 70%">
+                            </div>
+						</div>
+					</div>
+				</li>
+				<li>
+					<div class="key pull-right">Mem</div>
+					<div class="stat">
+						<div class="info">29% / 4GB (16 GB)</div>
+						<div class="progress progress-small">
+							<div    class="progress-bar"
+								    style="width: 29%">
+                            </div>
+						</div>
+					</div>
+				</li>
+				<li>
+					<div class="key pull-right">LAN</div>
+					<div class="stat">
+						<div class="info">
+							6 Mb/s
+							<i class="fa fa-caret-down"></i>
+							&nbsp; 3 Mb/s
+							<i class="fa fa-caret-up"></i>
+						</div>
+						<div class="progress progress-small">
+							<div    class="progress-bar progress-bar-inverse"
+								    style="width: 48%">
+                            </div>
+						</div>
+					</div>
+				</li>
+			</ul>
+		</div>
+	</section>
+</div>-->
+
+<!--<div class="col-lg-8">
+	<section class="widget">
+		<header>
+            <h4>
+				<span   class="font13"
+                        style="font-weight: bold">
+					    <i  class="fa fa-edit"
+                            style="vertical-align: middle;font-size: 14px;"></i>
+					    Visits
+				</span>
+                <small>Based on a three months data</small>
+            </h4>
+            <div class="widget-controls">
+                <a  data-widgster="toleft"
+                    title="change width to left"
+                    href="#">
+                    <i class="glyphicon glyphicon-chevron-left"></i>
+                </a>
+                <a  data-widgster="expand"
+                    title="Expand"
+                    href="#">
+                    <i class="glyphicon glyphicon-chevron-up"></i>
+                </a>
+                <a  data-widgster="collapse"
+                    title="Collapse"
+                    href="#">
+                    <i class="glyphicon glyphicon-chevron-down"></i>
+                </a>
+                <a  data-widgster="toright"
+                    title="change width to right"
+                    href="#">
+                    <i class="glyphicon glyphicon-chevron-right"></i>
+                </a>
+                <a  data-widgster="restore"
+                    title="Restore"
+                    href="#">
+                    <span class="glyphicon glyphicon-repeat"></span>
+                </a>
+                <a  data-widgster="fullscreen"
+                    title="Fullscreen"
+                    href="#">
+                    <i class="glyphicon glyphicon-fullscreen"
+                       style="font-size: 11px"></i>
+                </a>
+            </div>
+		</header>
+        <div class="clearfix"
+             style="margin-bottom: 10px; margin-top: 10px;">
+            &lt;!&ndash; 컴포넌트 대상 &ndash;&gt;
+            <div id="selected_info"
+                 style="float: left; ">
+                <div    class="panel-group json-menu"
+                        id="versionAccordion"
+                        style="margin-bottom: 0px !important">
+                    <li     class="list-group-item json-menu-header"
+                            style="padding: 0px">
+                        <div class="chat-message">
+                            <div    class="chat-message-body"
+                                    style="margin-left: 0px !important; padding: 0px 10px 0px 10px !important;">
+                                    <span   class="arrow"
+                                            style="top: 10px !important; left: -5px;"></span>
+                                <div    class="sender"
+                                        style="padding-bottom: 5px; padding-top: 5px">
+                                    선택된 제품(서비스) :
+                                    <span   id="select_Service"
+                                            style="color: #a4c6ff">
+                                                선택되지 않음
+                                        </span>
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                </div>
+            </div>
+
+
+            <div style="float: right">
+                <button type="button"
+                        class="btn btn-warning btn-sm">
+                    새 창으로 제품(서비스) 내용 보기
+                </button>
+            </div>
+            <div style="float: right"
+                 class="hidden">
+                <button class="btn btn-warning btn-sm"
+                        data-target="#my_modal1"
+                        data-toggle="modal"
+                        id="extend_modal_popup_id"
+                        type="button">
+                    팝업 창으로 편집 하기
+                </button>
+                <button type="button"
+                        id="pdservice_update"
+                        class="btn btn-success btn-sm">
+                    제품(서비스) 변경 사항 저장
+                </button>
+            </div>
+            <div style="float: right"
+                 class="hidden">
+                <button id="delete_pdservice"
+                        class="btn btn-danger btn-sm">
+                    제품(서비스) 삭제
+                </button>
+            </div>
+        </div>
+		<div class="body no-margin">
+			<div    id="visits_chart"
+				    class="chart visits-chart">
+				<svg></svg>
+			</div>
+			<div class="visits-info well well-sm">
+				<div class="row">
+					<div class="col-sm-3 col-xs-6">
+						<div class="key">
+							<i class="fa fa-users"></i>
+							Total Traffic
+						</div>
+						<div class="value">
+							24 541
+							<i class="fa fa-caret-up color-green"></i>
+						</div>
+					</div>
+					<div class="col-sm-3 col-xs-6">
+						<div class="key">
+							<i class="fa fa-bolt"></i>
+							Unique Visits
+						</div>
+						<div class="value">
+							14 778
+							<i class="fa fa-caret-down color-red"></i>
+						</div>
+					</div>
+					<div class="col-sm-3 col-xs-6">
+						<div class="key">
+							<i class="fa fa-plus-square"></i>
+							Revenue
+						</div>
+						<div class="value">
+							$3 583.18
+							<i class="fa fa-caret-up color-green"></i>
+						</div>
+					</div>
+					<div class="col-sm-3 col-xs-6">
+						<div class="key">
+							<i class="fa fa-user"></i>
+							Total Sales
+						</div>
+						<div class="value">
+							$59 871.12
+							<i class="fa fa-caret-down color-red"></i>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</section>
+	<section class="widget">
+		<header>
+			<h4>
+				Traffic Sources
+				<small>One month tracking</small>
+			</h4>
+			<div class="widget-controls">
+				<a  data-widgster="expand"
+					title="Expand"
+					href="#">
+					<i class="glyphicon glyphicon-plus"></i>
+				</a>
+				<a  data-widgster="collapse"
+					title="Collapse"
+					href="#">
+					<i class="glyphicon glyphicon-minus"></i>
+				</a>
+				<a  data-widgster="close"
+					title="Close"
+					href="#">
+					<i class="glyphicon glyphicon-remove"></i>
+				</a>
+			</div>
+		</header>
+		<div class="widget-table-overflow">
+			<table class="table table-striped table-lg mt-sm mb-0 sources-table">
+				<thead>
+					<tr>
+						<th class="source-col-header">Source</th>
+						<th>Amount</th>
+						<th>Change</th>
+						<th class="hidden-xs">Percent.,%</th>
+						<th>Target</th>
+						<th class="chart-col-header hidden-sm hidden-xs">Trend</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr>
+						<td><span class="label label-important">Direct</span></td>
+						<td>713</td>
+						<td><strong class="color-green">+53</strong></td>
+						<td class="hidden-xs">+12</td>
+						<td>900</td>
+						<td class="chart-cell hidden-sm hidden-xs">
+							<div id="direct_trend"></div>
+						</td>
+					</tr>
+					<tr>
+						<td><span class="label label-warning">Refer</span></td>
+						<td>562</td>
+						<td><strong>+84</strong></td>
+						<td class="hidden-xs">+64</td>
+						<td>500</td>
+						<td class="chart-cell hidden-sm hidden-xs">
+							<div id="refer_trend"></div>
+						</td>
+					</tr>
+					<tr>
+						<td><span class="label label-success">Social</span></td>
+						<td>148</td>
+						<td><strong class="color-red">-12</strong></td>
+						<td class="hidden-xs">+3</td>
+						<td>180</td>
+						<td class="chart-cell hidden-sm hidden-xs">
+							<div id="social_trend"></div>
+						</td>
+					</tr>
+					<tr>
+						<td><span class="label label-info">Search</span></td>
+						<td>653</td>
+						<td><strong class="color-green">+23</strong></td>
+						<td class="hidden-xs">+43</td>
+						<td>876</td>
+						<td class="chart-cell hidden-sm hidden-xs">
+							<div id="search_trend"></div>
+						</td>
+					</tr>
+					<tr>
+						<td><span class="label label-inverse">Internal</span></td>
+						<td>976</td>
+						<td><strong>+101</strong></td>
+						<td class="hidden-xs">-7</td>
+						<td>844</td>
+						<td class="chart-cell hidden-sm hidden-xs">
+							<div id="internal_trend"></div>
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+	</section>
+	<section class="widget large">
+		<header>
+			<h4>Chat</h4>
+            <div class="widget-controls">
+                <a  data-widgster="toleft"
+                    title="change width to left"
+                    href="#">
+                    <i class="glyphicon glyphicon-chevron-left"></i>
+                </a>
+                <a  data-widgster="expand"
+                    title="Expand"
+                    href="#">
+                    <i class="glyphicon glyphicon-chevron-up"></i>
+                </a>
+                <a  data-widgster="collapse"
+                    title="Collapse"
+                    href="#">
+                    <i class="glyphicon glyphicon-chevron-down"></i>
+                </a>
+                <a  data-widgster="toright"
+                    title="change width to right"
+                    href="#">
+                    <i class="glyphicon glyphicon-chevron-right"></i>
+                </a>
+                <a  data-widgster="restore"
+                    title="Restore"
+                    href="#">
+                    <span class="glyphicon glyphicon-repeat"></span>
+                </a>
+                <a  data-widgster="fullscreen"
+                    title="Fullscreen"
+                    href="#">
+                    <i class="glyphicon glyphicon-fullscreen"
+                       style="font-size: 11px"></i>
+                </a>
+            </div>
+		</header>
+		<div class="body">
+			<div    id="chat"
+				    class="chat">
+				<div    id="chat_messages"
+					    class="chat-messages">
+					<div class="chat-message">
+						<div class="sender pull-left">
+							<div class="icon">
+								<img    src="../reference/lightblue4/docs/img/avatars/2.png"
+									    class="img-circle"
+									    alt="" />
+							</div>
+							<div class="time">4 min</div>
+						</div>
+						<div class="chat-message-body">
+							<span class="arrow"></span>
+							<div class="sender"><a href="#">Tikhon Laninga</a></div>
+							<div class="text">
+								Hey Sam, how is it going? But I must explain to you how all this mistaken idea of denouncing of a
+								pleasure and praising pain was born
+							</div>
+						</div>
+					</div>
+					<div class="chat-message">
+						<div class="sender pull-right">
+							<div class="icon">
+								<img    src="../reference/lightblue4/docs/img/avatars/5.png"
+									    class="img-circle"
+									    alt="" />
+							</div>
+							<div class="time">3 min</div>
+						</div>
+						<div class="chat-message-body on-left">
+							<span class="arrow"></span>
+							<div class="sender"><a href="#">Cenhelm Houston</a></div>
+							<div class="text">
+								Pretty good. Doing my homework.. No one rejects, dislikes, or avoids pleasure itself, because it is
+								pleasure, but because
+							</div>
+						</div>
+					</div>
+					<div class="chat-message">
+						<div class="sender pull-left">
+							<div class="icon">
+								<img    src="../reference/lightblue4/docs/img/avatars/2.png"
+								    	class="img-circle"
+								    	alt="" />
+							</div>
+							<div class="time">2 min</div>
+						</div>
+						<div class="chat-message-body">
+							<span class="arrow"></span>
+							<div class="sender"><a href="#">Tikhon Laninga</a></div>
+							<div class="text">
+								Any chance to go out? To take a trivial example, which of us ever undertakes laborious physical
+								exercise, except to obtain some advantage
+							</div>
+						</div>
+					</div>
+					<div class="chat-message">
+						<div class="sender pull-right">
+							<div class="icon">
+								<img    src="../reference/lightblue4/docs/img/avatars/5.png"
+									    class="img-circle"
+									    alt="" />
+							</div>
+							<div class="time">2 min</div>
+						</div>
+						<div class="chat-message-body on-left">
+							<span class="arrow"></span>
+							<div class="sender"><a href="#">Cenhelm Houston</a></div>
+							<div class="text">
+								.. Maybe 40-50 mins. I don't know exactly. On the other hand, we denounce with righteous indignation and
+								dislike men who are so beguiled
+							</div>
+						</div>
+					</div>
+					<div class="chat-message">
+						<div class="sender pull-left">
+							<div class="icon">
+								<img    src="../reference/lightblue4/docs/img/avatars/2.png"
+									    class="img-circle"
+									    alt="" />
+							</div>
+							<div class="time">1 min</div>
+						</div>
+						<div class="chat-message-body">
+							<span class="arrow"></span>
+							<div class="sender"><a href="#">Tikhon Laninga</a></div>
+							<div class="text">Anyway sounds great! These cases are perfectly simple and easy to distinguish.</div>
+						</div>
+					</div>
+				</div>
+				<footer class="chat-footer row">
+					<div class="col-xs-9">
+						<input  id="new_message"
+							    type="text"
+							    class="form-control input-transparent"
+							    placeholder="Enter your message.." />
+					</div>
+					<div class="col-xs-3">
+						<button type="button"
+							    id="new_message_btn"
+							    class="btn btn-transparent btn-block">
+							    Send
+						</button>
+					</div>
+				</footer>
+			</div>
+		</div>
+	</section>
+</div>-->
Index: arms/html/jiraConnection/content-header.html
===================================================================
diff -u
--- arms/html/jiraConnection/content-header.html	(revision 0)
+++ arms/html/jiraConnection/content-header.html	(revision 477f035c8005f0be13ca4bbabc65f885e4426234)
@@ -0,0 +1,14 @@
+<h3 class="page-title font16">
+    Product.service
+	<small>JIRA Server(temporary name)</small>
+	<ol class="breadcrumb pull-right hidden-xs font12">
+		<li>
+			<a href="#">
+				<i class="fa fa-sitemap"></i>
+				Home
+			</a>
+		</li>
+        <li class="active">Product.service</li>
+        <li class="active">JIRA Server</li>
+	</ol>
+</h3>
Index: arms/html/pdService/content-container.html
===================================================================
diff -u -rdb6be154384aee30466b603018236dae955e9205 -r477f035c8005f0be13ca4bbabc65f885e4426234
--- arms/html/pdService/content-container.html	(.../content-container.html)	(revision db6be154384aee30466b603018236dae955e9205)
+++ arms/html/pdService/content-container.html	(.../content-container.html)	(revision 477f035c8005f0be13ca4bbabc65f885e4426234)
@@ -202,7 +202,11 @@
                 <div style="float: right"
                      id="pdservice_details_popup_div">
                     <button type="button"
-                            class="btn btn-warning btn-sm">
+                            data-target="#my_modal1"
+                            data-toggle="modal"
+                            id="extend_modal_readOnly"
+                            class="btn btn-warning btn-sm"
+                            onClick="modalPopup('modal_popup_readonly')">
                         새 창으로 제품(서비스) 내용 보기
                     </button>
                 </div>
@@ -213,7 +217,8 @@
                             data-target="#my_modal1"
                             data-toggle="modal"
                             id="extend_modal_popup_id"
-                            type="button">
+                            type="button"
+                            onClick="modalPopup('modal_popup_update')">
                         팝업 창으로 편집 하기
                     </button>
                     <button type="button"
@@ -603,14 +608,16 @@
 				<h4 class="modal-title font14"
 					id="my_modal_label1"
 					style="color: #f8f8f8; text-align: left; padding: 5px">
+                    <i class="fa fa-edit"></i>
 					<span   class="font13"
+                            id="my_modal1_title"
                             style="font-weight: bold">
-                            <i class="fa fa-edit"></i>
                             신규 제품(서비스) 수정 팝업
 					</span>
 					<section    class="search-result"
 						    style="border-left: 5px solid #e5603b">
-                            <p style="font-size: 13px; margin: 10px 0px 10px 0px; padding-left: 10px">
+                            <p  id="my_modal1_sub"
+                                style="font-size: 13px; margin: 10px 0px 10px 0px; padding-left: 10px">
                                 a-RMS에 신규 제품(서비스)의 정보를 수정합니다.
                             </p>
 					</section>
@@ -735,6 +742,13 @@
                     </button>
                     <button
                         type="button"
+                        id="extend_change_to_update_pdservice"
+                        class="btn btn-success hidden"
+                        onclick="modalPopup('modal_popup_update')">
+                        편집 하기
+                    </button>
+                    <button
+                        type="button"
                         id="extendupdate_pdservice"
                         class="btn btn-success">
                         제품(서비스) 변경 사항 저장
Index: arms/js/jiraConnection.js
===================================================================
diff -u
--- arms/js/jiraConnection.js	(revision 0)
+++ arms/js/jiraConnection.js	(revision 477f035c8005f0be13ca4bbabc65f885e4426234)
@@ -0,0 +1,514 @@
+var selectId; // 제품 아이디
+var selectName; // 제품 이름
+var selectedIndex; // 데이터테이블 선택한 인덱스
+var selectedPage; // 데이터테이블 선택한 인덱스
+var selectVersion; // 선택한 버전 아이디
+var selectVersionName; // 선택한 버전 이름
+var dataTableRef; // 데이터테이블 참조 변수
+var selectConnectID; // 제품(서비스) - 버전 - 지라 연결 정보 아이디
+var versionList;
+
+function execDocReady() {
+
+    var pluginGroups = [
+
+        [	"../reference/lightblue4/docs/lib/slimScroll/jquery.slimscroll.min.js",
+            "../reference/lightblue4/docs/lib/d3/d3.min.js",
+            "../reference/lightblue4/docs/lib/nvd3/build/nv.d3.min.js",
+            "../reference/jquery-plugins/unityping-0.1.0/dist/jquery.unityping.min.js",
+            "../reference/lightblue4/docs/lib/widgster/widgster.js"],
+
+        [	"../reference/jquery-plugins/select2-4.0.2/dist/css/jisaconnection_temp.css",
+            "../reference/jquery-plugins/select2-4.0.2/dist/css/select2_lightblue4.css",
+            "../reference/jquery-plugins/lou-multi-select-0.9.12/css/multiselect-lightblue4.css",
+            "../reference/jquery-plugins/multiple-select-1.5.2/dist/multiple-select-bluelight.css",
+            "../reference/jquery-plugins/select2-4.0.2/dist/js/select2.min.js",
+            "../reference/jquery-plugins/lou-multi-select-0.9.12/js/jquery.quicksearch.js",
+            "../reference/jquery-plugins/lou-multi-select-0.9.12/js/jquery.multi-select.js",
+            "../reference/jquery-plugins/multiple-select-1.5.2/dist/multiple-select.min.js"],
+
+        [	"../reference/jquery-plugins/dataTables-1.10.16/media/css/jquery.dataTables_lightblue4.css",
+            "../reference/jquery-plugins/dataTables-1.10.16/extensions/Responsive/css/responsive.dataTables_lightblue4.css",
+            "../reference/jquery-plugins/dataTables-1.10.16/extensions/Select/css/select.dataTables_lightblue4.css",
+            "../reference/jquery-plugins/dataTables-1.10.16/media/js/jquery.dataTables.min.js",
+            "../reference/jquery-plugins/dataTables-1.10.16/extensions/Responsive/js/dataTables.responsive.min.js",
+            "../reference/jquery-plugins/dataTables-1.10.16/extensions/Select/js/dataTables.select.min.js",
+            "../reference/jquery-plugins/dataTables-1.10.16/extensions/RowGroup/js/dataTables.rowsGroup.min.js",
+            "../reference/jquery-plugins/dataTables-1.10.16/extensions/Buttons/js/dataTables.buttons.min.js",
+            "../reference/jquery-plugins/dataTables-1.10.16/extensions/Buttons/js/buttons.html5.js",
+            "../reference/jquery-plugins/dataTables-1.10.16/extensions/Buttons/js/buttons.print.js",
+            "../reference/jquery-plugins/dataTables-1.10.16/extensions/Buttons/js/jszip.min.js",
+            "../reference/jquery-plugins/dataTables-1.10.16/extensions/Buttons/js/pdfmake.min.js"]
+        // 추가적인 플러그인 그룹들을 이곳에 추가하면 됩니다.
+        ,[
+
+        ]
+    ];
+
+    loadPluginGroupsParallelAndSequential(pluginGroups)
+        .then(function() {
+
+            //vfs_fonts 파일이 커서 defer 처리 함.
+            setTimeout(function() {
+                var script = document.createElement("script");
+                script.src = "../reference/jquery-plugins/dataTables-1.10.16/extensions/Buttons/js/vfs_fonts.js";
+                script.defer = true; // defer 속성 설정
+                document.head.appendChild(script);
+            }, 3000); // 2초 후에 실행됩니다.
+            console.log('모든 플러그인 로드 완료');
+
+            //사이드 메뉴 처리
+            $('.widget').widgster();
+            setSideMenu("sidebar_menu_product", "sidebar_menu_product_jira_connect");
+
+            // 데이터 테이블 로드 함수
+            var waitDataTable = setInterval(function () {
+                try {
+                    if (!$.fn.DataTable.isDataTable("#pdservice_table")) {
+                        dataTableLoad();
+                        clearInterval(waitDataTable);
+                    }
+                } catch (err) {
+                    console.log("서비스 데이터 테이블 로드가 완료되지 않아서 초기화 재시도 중...");
+                }
+            }, 313 /*milli*/);
+
+            //setdata_for_multiSelect();
+            //connect_pdservice_jira();
+            //init_versionList();
+
+            //
+            // $.getScript("./js/pdServiceVersion/initD3Chart.js").done(function (script, textStatus) {
+            //     initD3Chart("/auth-user/api/arms/pdService/getD3ChartData.do");
+            // });
+            // 스크립트 실행 로직을 이곳에 추가합니다.
+
+            inBox_click_event();
+            jira_nav_btn_click();
+
+        })
+        .catch(function() {
+            console.error('플러그인 로드 중 오류 발생');
+        });
+
+}
+////////////////////////////////////////////////////////////////////////////////////////
+// --- 데이터 테이블 설정 --- //
+////////////////////////////////////////////////////////////////////////////////////////
+function dataTableLoad() {
+    // 데이터 테이블 컬럼 및 열그룹 구성
+    var columnList = [
+        { name: "c_id", title: "제품(서비스) 아이디", data: "c_id", visible: false },
+        {
+            name: "c_title",
+            title: "제품(서비스) 이름",
+            data: "c_title",
+            render: function (data, type, row, meta) {
+                if (type === "display") {
+                    return '<label style="color: #a4c6ff">' + data + "</label>";
+                }
+
+                return data;
+            },
+            className: "dt-body-left",
+            visible: true
+        }
+    ];
+    var rowsGroupList = [];
+    var columnDefList = [];
+    var selectList = {};
+    var orderList = [[1, "asc"]];
+    var buttonList = [];
+
+    var jquerySelector = "#jira_connection_table";
+    var ajaxUrl = "/auth-user/api/arms/pdService/getPdServiceMonitor.do";
+    var jsonRoot = "response";
+    var isServerSide = false;
+
+    dataTableRef = dataTable_build(
+        jquerySelector,
+        ajaxUrl,
+        jsonRoot,
+        columnList,
+        rowsGroupList,
+        columnDefList,
+        selectList,
+        orderList,
+        buttonList,
+        isServerSide
+    );
+}
+
+// 데이터 테이블 구성 이후 꼭 구현해야 할 메소드 : 열 클릭시 이벤트
+function dataTableClick(tempDataTable, selectedData) {
+    selectedIndex = selectedData.selectedIndex;
+    selectedPage = selectedData.selectedPage;
+    selectId = selectedData.c_id;
+    selectName = selectedData.c_title;
+    $("#version_contents").html("");
+
+    $(".searchable").multiSelect("deselect_all");
+    $("#pdservice_connect").removeClass("btn-success");
+    $("#pdservice_connect").addClass("btn-primary");
+    $("#pdservice_connect").text("제품(서비스) Jira 연결 등록");
+
+    //초기 태그 삭제
+    $("#initDefaultVersion").remove();
+
+    //버전 리스트 로드
+    dataLoad(selectedData.c_id, selectedData.c_title);
+
+    // D3 업데이트
+    //updateD3ByDataTable();
+}
+
+function dataTableDrawCallback(tableInfo) {
+    $("#" + tableInfo.sInstance)
+        .DataTable()
+        .columns.adjust()
+        .responsive.recalc();
+}
+
+//데이터 테이블 ajax load 이후 콜백.
+function dataTableCallBack(settings, json) {}
+
+////////////////////////////////////////////////////////////////////////////////////////
+// 버전 리스트를 재로드하는 함수 ( 버전 추가, 갱신, 삭제 시 호출 )
+////////////////////////////////////////////////////////////////////////////////////////
+function dataLoad(getSelectedText, selectedText) {
+    // ajax 처리 후 에디터 바인딩.
+    console.log("dataLoad :: getSelectedID → " + getSelectedText);
+
+    $.ajax("/auth-user/api/arms/pdService/getVersionList.do?c_id=" + getSelectedText).done(function (json) {
+        console.log("dataLoad :: success → ", json);
+        versionList = json.response;
+        $("#version_accordion").jsonMenu("set", json.response, { speed: 5000 });
+
+        //version text setting
+        var selectedHtml =
+            `<div class="chat-message">
+				<div class="chat-message-body" style="margin-left: 0px !important; border-left: 2px solid #a4c6ff; border-right: 2px solid #e5603b;">
+					<span 	class="arrow"
+							style="top: 17px !important; border-right: 5px solid #a4c6ff;"></span>
+					<span   id="toRight"
+							class="arrow"
+							style=" top: 17px !important; right: -7px; border-top: 5px solid transparent;
+									border-bottom: 5px solid transparent;
+									border-left: 5px solid #e5603b;border-right: 0px; left:unset;"></span>
+					<div class="sender" style="padding-bottom: 5px; padding-top: 3px;"> 제품(서비스) : 
+						<span style="color: #a4c6ff;">
+						` +  selectedText + `
+						</span>
+					</div>
+				</div>
+			</div>
+			<div class="gradient_bottom_border" style="width: 100%; height: 2px; padding-top: 10px;"></div>`;
+        $(".list-group-item").html(selectedHtml);
+        $("#tooltip_enabled_service_name").val(selectedText);
+
+        //updateD3ByVersionList();
+
+        setTimeout(function () {
+            $("#pdService_Version_First_Child").trigger("click");
+        }, 500);
+    });
+}
+
+////////////////////////////////////////////////////////////////////////////////////////
+// versionlist 이니셜라이즈
+////////////////////////////////////////////////////////////////////////////////////////
+function init_versionList() {
+    let menu;
+    $.fn.jsonMenu = function (action, items, options) {
+        $(this).addClass("json-menu");
+        if (action == "add") {
+            menu.body.push(items);
+            draw($(this), menu);
+        } else if (action == "set") {
+            menu = items;
+            draw($(this), menu);
+        }
+        return this;
+    };
+}
+
+////////////////////////////////////////////////////////////////////////////////////////
+// version list html 삽입
+////////////////////////////////////////////////////////////////////////////////////////
+function draw(main, menu) {
+    main.html("");
+
+    var data = `
+			   <li class='list-group-item json-menu-header' style="padding: 0px; margin-bottom: 10px;">
+				   <strong>product service name</strong>
+			   </li>`;
+
+    for (let i = 0; i < menu.length; i++) {
+        if (i == 0) {
+            data += `
+			   <div class="panel">
+				   <div class="panel-heading">
+					   <a class="accordion-toggle collapsed"
+					   			data-toggle="collapse"
+					   			id="pdService_Version_First_Child"
+					   			name="versionLink_List"
+					   			style="color: #a4c6ff; text-decoration: none; cursor: pointer; background: rgba(229, 96, 59, 0.20);"
+					   			onclick="versionClick(this, ${menu[i].c_id});">
+						   ${menu[i].c_title}
+					   </a>
+				   </div>
+			   </div>`;
+        } else {
+            data += `
+			   <div class="panel">
+				   <div class="panel-heading">
+					   <a class="accordion-toggle collapsed"
+					   			data-toggle="collapse"
+					   			name="versionLink_List"
+					   			style="color: #a4c6ff; text-decoration: none; cursor: pointer;"
+					   			onclick="versionClick(this, ${menu[i].c_id});">
+						   ${menu[i].c_title}
+					   </a>
+				   </div>
+			   </div>`;
+        }
+    }
+
+    main.html(data);
+}
+
+////////////////////////////////////////////////////////////////////////////////////////
+//버전 클릭할 때 동작하는 함수
+////////////////////////////////////////////////////////////////////////////////////////
+function versionClick(element, c_id) {
+    $("a[name='versionLink_List']").each(function () {
+        this.style.background = "";
+    });
+
+    if (element == null) {
+        console.log("element is empty");
+    } else {
+        element.style.background = "rgba(229, 96, 59, 0.20)";
+        console.log("element is = " + element);
+    }
+
+    selectVersion = c_id;
+    console.log("selectVersion" + selectVersion);
+    $(".searchable").multiSelect("deselect_all");
+
+    // 이미 등록된 제품(서비스)-버전-지라 연결 정보가 있는지 확인
+    $.ajax({
+        url: "/auth-user/api/arms/globaltreemap/getConnectInfo/pdService/pdServiceVersion/jiraProject.do",
+        type: "GET",
+        data: {
+            pdservice_link: $("#pdservice_table").DataTable().rows(".selected").data()[0].c_id,
+            pdserviceversion_link: c_id
+        },
+        contentType: "application/json;charset=UTF-8",
+        dataType: "json",
+        progress: true
+    })
+        .done(function (data) {
+            var versionClickData = [];
+
+            var multiSelectData = [];
+            for (var k in data.response) {
+                var obj = data.response[k];
+                //var jira_name = obj.c_title;
+                selectConnectID = obj.c_id;
+                multiSelectData.push(obj.jiraproject_link);
+                versionClickData.push(obj);
+            }
+
+            if (versionClickData.length == 0) {
+                $("#pdservice_connect").removeClass("btn-success");
+                $("#pdservice_connect").addClass("btn-primary");
+                $("#pdservice_connect").text("제품(서비스) Jira 연결 등록");
+                //updateD3ByMultiSelect();
+            } else {
+                $("#pdservice_connect").removeClass("btn-primary");
+                $("#pdservice_connect").addClass("btn-success");
+                $("#pdservice_connect").text("제품(서비스) Jira 연결 변경");
+
+                console.log("multiSelectData - " + multiSelectData.toString());
+                $("#multiselect").multiSelect("select", multiSelectData.toString().split(","));
+                //updateD3ByMultiSelect();
+            }
+        })
+        .fail(function (e) {
+            console.log("fail call");
+        })
+        .always(function () {
+            console.log("always call");
+        });
+}
+
+////////////////////////////////////////////////////////////////////////////////////////
+// 제품(서비스)-버전-지라 저장
+////////////////////////////////////////////////////////////////////////////////////////
+function connect_pdservice_jira(){
+    $("#pdservice_connect").click(function () {
+        if ($("#pdservice_connect").hasClass("btn-primary") == true) {
+            // data가 존재하지 않음.
+            $.ajax({
+                url: "/auth-user/api/arms/globaltreemap/setConnectInfo/pdService/pdServiceVersion/jiraProject.do",
+                type: "POST",
+                data: {
+                    pdservice_link: $("#pdservice_table").DataTable().rows(".selected").data()[0].c_id,
+                    pdserviceversion_link: selectVersion,
+                    c_pdservice_jira_ids: JSON.stringify($("#multiselect").val())
+                },
+                progress: true
+            })
+                .done(function (data) {
+                    //versionClick(null, selectVersion);
+                    jSuccess("제품(서비스) - 버전 - JiraProject 가 연결되었습니다.");
+                })
+                .fail(function (e) {
+                    console.log("fail call");
+                })
+                .always(function () {
+                    console.log("always call");
+                });
+        } else if ($("#pdservice_connect").hasClass("btn-success") == true) {
+            // data가 이미 있음
+            $.ajax({
+                url: "/auth-user/api/arms/globaltreemap/setConnectInfo/pdService/pdServiceVersion/jiraProject.do",
+                type: "POST",
+                data: {
+                    pdservice_link: $("#pdservice_table").DataTable().rows(".selected").data()[0].c_id,
+                    pdserviceversion_link: selectVersion,
+                    c_pdservice_jira_ids: JSON.stringify($("#multiselect").val())
+                },
+                progress: true
+            })
+                .done(function (data) {
+                    //versionClick(null, selectVersion);
+                    jSuccess("제품(서비스) - 버전 - JiraProject 가 연결되었습니다.");
+                })
+                .fail(function (e) {
+                    console.log("fail call");
+                })
+                .always(function () {
+                    console.log("always call");
+                });
+        } else {
+            jError("who are you?");
+        }
+    });
+}
+
+
+////////////////////////////////////////////////////////////////////////////////////////
+// JIRA 프로젝트 데이터 로드 후 멀티 셀렉트 빌드 하고 슬림스크롤 적용
+////////////////////////////////////////////////////////////////////////////////////////
+/* --------------------------- multi select & slim scroll ---------------------------------- */
+function setdata_for_multiSelect() {
+    $.ajax({
+        url: "/auth-user/api/arms/jiraProject/getChildNode.do?c_id=2",
+        type: "GET",
+        contentType: "application/json;charset=UTF-8",
+        dataType: "json",
+        progress: true
+    })
+        .done(function (data) {
+            var optionData = [];
+            for (var k in data) {
+                var obj = data[k];
+                var jira_name = obj.c_title;
+                var jira_idx = obj.c_id;
+
+                optionData.push("<option value='" + jira_idx + "'>" + jira_name + "</option>");
+            }
+
+            $(".searchable").html(optionData.join(""));
+
+            ////////////////////////////////////////////////
+            // 멀티 셀렉트 빌드
+            buildMultiSelect();
+            ////////////////////////////////////////////////
+        })
+        .fail(function (e) {
+            console.log("fail call");
+        })
+        .always(function () {
+            console.log("always call");
+        });
+
+    //slim scroll
+    $(".ms-list").slimscroll();
+}
+
+////////////////////////////////////////////////////////////////////////////////////////
+// 멀티 셀렉트 초기화 함수
+////////////////////////////////////////////////////////////////////////////////////////
+function buildMultiSelect() {
+    //multiselect
+    $(".searchable").multiSelect({
+        selectableHeader: "<input type='text' class='search-input' autocomplete='off' placeholder='Search Jira Project'>",
+        selectionHeader: "<input type='text' class='search-input' autocomplete='off' placeholder='Selected Jira Project'>",
+        afterInit: function (ms) {
+            var that = this,
+                $selectableSearch = that.$selectableUl.prev(),
+                $selectionSearch = that.$selectionUl.prev(),
+                selectableSearchString = "#" + that.$container.attr("id") + " .ms-elem-selectable:not(.ms-selected)",
+                selectionSearchString = "#" + that.$container.attr("id") + " .ms-elem-selection.ms-selected";
+
+            that.qs1 = $selectableSearch.quicksearch(selectableSearchString).on("keydown", function (e) {
+                if (e.which === 40) {
+                    that.$selectableUl.focus();
+                    return false;
+                }
+            });
+
+            that.qs2 = $selectionSearch.quicksearch(selectionSearchString).on("keydown", function (e) {
+                if (e.which == 40) {
+                    that.$selectionUl.focus();
+                    return false;
+                }
+            });
+        },
+        afterSelect: function (value, text) {
+            this.qs1.cache();
+            this.qs2.cache();
+            //d3Update();
+        },
+        afterDeselect: function (value, text) {
+            this.qs1.cache();
+            this.qs2.cache();
+            //d3Update();
+        }
+    });
+}
+
+
+///////////////
+// list 클릭 이벤트 처리
+function inBox_click_event () {
+    $('a[data-toggle="tab"]').on("shown.bs.tab", function (e) {
+       let target = $(e.target).attr("href"); // activated tab
+        console.log(target);
+
+    });
+}
+
+function jira_nav_btn_click() {
+    $("#jira_connection_list__nav_btn").click( function () {
+        $("#jira_connection_classify").toggleClass("collapse");
+        //collapse
+        if ($("#jira_connection_classify").hasClass("collapse") === true) {
+            $("#jira_con_nav").removeClass("col-sm-4");
+            $("#jira_con_nav").addClass("col-sm-1");
+            $("#jira_con_list").removeClass("col-sm-8");
+            $("#jira_con_list").addClass("col-sm-11");
+        } else { // expand
+            $("#jira_con_nav").addClass("col-sm-4");
+            $("#jira_con_nav").removeClass("col-sm-1");
+            $("#jira_con_list").addClass("col-sm-8");
+            $("#jira_con_list").removeClass("col-sm-11");
+        }
+        // $("#jira_connection_classify").toggleClass("collapse");
+        //버튼 누를 때, collapse 하고, 크기 조정
+        //$("#jira_connection_classify").addClass("collapse");
+    });
+}
\ No newline at end of file
Index: arms/js/pdService.js
===================================================================
diff -u -rdb6be154384aee30466b603018236dae955e9205 -r477f035c8005f0be13ca4bbabc65f885e4426234
--- arms/js/pdService.js	(.../pdService.js)	(revision db6be154384aee30466b603018236dae955e9205)
+++ arms/js/pdService.js	(.../pdService.js)	(revision 477f035c8005f0be13ca4bbabc65f885e4426234)
@@ -169,13 +169,15 @@
 // --- 신규 제품(서비스) 등록 팝업 및 팝업 띄울때 사이즈 조정 -- //
 ////////////////////////////////////////////////////////////////////////////////////////
 function popup_size_setting(){
+	console.log("popup_size_setting() is activated");
 	$("#modal_popup_id").click(function () {
 		var height = $(document).height() - 600;
 		$(".modal-body")
 			.find(".cke_contents:eq(0)")
 			.css("height", height + "px");
 	});
 
+	// 팝업하여 편집
 	$("#extend_modal_popup_id").click(function () {
 		var height = $(document).height() - 1000;
 		$(".modal-body")
@@ -283,6 +285,114 @@
 			$("#extend_editview_pdservice_reviewer").css("height", resultValue + "px");
 		}, 250);
 	});
+
+	$("#extend_modal_readOnly").click(function () {
+		var height = $(document).height() - 1000;
+		$(".modal-body")
+			.find(".cke_contents:eq(0)")
+			.css("height", height + "px");
+
+		// 데이터 셋팅
+		var editorData = CKEDITOR.instances.input_pdservice_editor.getData();
+		CKEDITOR.instances.extend_modal_editor.setData(editorData);
+
+		var selectedId = $("#pdservice_table").DataTable().rows(".selected").data()[0].c_id;
+		console.log("selectedId →" + selectedId);
+
+		// 제품(서비스) 이름
+		$("#extend_editview_pdservice_name").val($("#editview_pdservice_name").val());
+
+		// 오너
+		// clear
+		$("#extend_editview_pdservice_owner").val(null).trigger("change");
+
+		// 부모 페이지에서 데이터 로드
+		var owner = "none";
+		if ($("#editview_pdservice_owner").select2("data")[0] != undefined) {
+			owner = $("#editview_pdservice_owner").select2("data")[0].text;
+		}
+
+		// Modal 창에 데이터 셋팅
+		if (owner == null || owner == "none") {
+			console.log("pdServiceDataTableClick :: json.c_pdservice_owner empty");
+		} else {
+			var newOption = new Option(owner, owner, true, true);
+			$("#extend_editview_pdservice_owner").append(newOption).trigger("change");
+		}
+
+		// 리뷰어
+		//clear
+		$("#extend_editview_pdservice_reviewers").val(null).trigger("change");
+
+		var reviewer01 = "none";
+		var reviewer02 = "none";
+		var reviewer03 = "none";
+		var reviewer04 = "none";
+		var reviewer05 = "none";
+
+		if ($("#editview_pdservice_reviewers").select2("data")[0] != undefined) {
+			reviewer01 = $("#editview_pdservice_reviewers").select2("data")[0].text;
+		}
+		if ($("#editview_pdservice_reviewers").select2("data")[1] != undefined) {
+			reviewer02 = $("#editview_pdservice_reviewers").select2("data")[1].text;
+		}
+		if ($("#editview_pdservice_reviewers").select2("data")[2] != undefined) {
+			reviewer03 = $("#editview_pdservice_reviewers").select2("data")[2].text;
+		}
+		if ($("#editview_pdservice_reviewers").select2("data")[3] != undefined) {
+			reviewer04 = $("#editview_pdservice_reviewers").select2("data")[3].text;
+		}
+		if ($("#editview_pdservice_reviewers").select2("data")[4] != undefined) {
+			reviewer05 = $("#editview_pdservice_reviewers").select2("data")[4].text;
+		}
+
+		var reviewer01Option = new Option(reviewer01, reviewer01, true, true);
+		var reviewer02Option = new Option(reviewer02, reviewer02, true, true);
+		var reviewer03Option = new Option(reviewer03, reviewer03, true, true);
+		var reviewer04Option = new Option(reviewer04, reviewer04, true, true);
+		var reviewer05Option = new Option(reviewer05, reviewer05, true, true);
+
+		var multifyValue = 1;
+		if (reviewer01 == null || reviewer01 == "none") {
+			console.log("extend_modal_popup_id Click :: reviewer01 empty");
+		} else {
+			multifyValue = multifyValue + 1;
+			$("#extend_editview_pdservice_reviewers").append(reviewer01Option);
+		}
+		if (reviewer02 == null || reviewer02 == "none") {
+			console.log("extend_modal_popup_id Click :: reviewer02 empty");
+		} else {
+			multifyValue = multifyValue + 1;
+			$("#extend_editview_pdservice_reviewers").append(reviewer02Option);
+		}
+		if (reviewer03 == null || reviewer03 == "none") {
+			console.log("extend_modal_popup_id Click :: reviewer03 empty");
+		} else {
+			multifyValue = multifyValue + 1;
+			$("#extend_editview_pdservice_reviewers").append(reviewer03Option);
+		}
+		if (reviewer04 == null || reviewer04 == "none") {
+			console.log("extend_modal_popup_id Click :: reviewer04 empty");
+		} else {
+			multifyValue = multifyValue + 1;
+			$("#extend_editview_pdservice_reviewers").append(reviewer04Option);
+		}
+		if (reviewer05 == null || reviewer05 == "none") {
+			console.log("extend_modal_popup_id Click :: reviewer05 empty");
+		} else {
+			multifyValue = multifyValue + 1;
+			$("#extend_editview_pdservice_reviewers").append(reviewer05Option);
+		}
+
+		$("#extend_editview_pdservice_reviewers").trigger("change");
+
+		$("#extend_editview_pdservice_reviewer").css("height", "20px");
+		setTimeout(function () {
+			var heightValue = $("#extend_editview_pdservice_reviewer").height();
+			var resultValue = heightValue + 20 * multifyValue;
+			$("#extend_editview_pdservice_reviewer").css("height", resultValue + "px");
+		}, 250);
+	});
 }
 
 
@@ -883,3 +993,28 @@
 		});
 	});
 }
+
+///////////////////////////////
+// 팝업 띄울 때, UI 일부 수정되도록
+////////////////////////////////
+function modalPopup(popupName) {
+	console.log("popupName= " + popupName);
+	if (popupName === "modal_popup_readonly") {
+		//modal_popup_readOnly = 새 창으로 제품(서비스 보기)
+		console.log("True then why aren't they change?");
+		$("#my_modal1_title").text("제품(서비스) 내용 보기 팝업");
+		$("#my_modal1_sub").text("새 창으로 제품(서비스)의 정보를 확인합니다.")
+		$("#extend_change_to_update_pdservice").removeClass("hidden");
+		$("#extendupdate_pdservice").addClass("hidden");
+
+	} else { //팝업 창으로 편집하기
+
+		$("#my_modal1_title").text("신규 제품(서비스) 수정 팝업");
+		$("#my_modal1_sub").text("a-RMS에 신규 제품(서비스)의 정보를 수정합니다.")
+		$("#extend_change_to_update_pdservice").addClass("hidden");
+		$("#extendupdate_pdservice").removeClass("hidden");
+		// $("#extendupdate_pdservice")
+		// 	.attr("onclick","modalPopup('modal_popup_update')");
+		// $("#extendupdate_pdservice").text("제품(서비스) 변경 저장");
+	}
+}
\ No newline at end of file
Index: reference/jquery-plugins/select2-4.0.2/dist/css/jisaconnection_temp.css
===================================================================
diff -u
--- reference/jquery-plugins/select2-4.0.2/dist/css/jisaconnection_temp.css	(revision 0)
+++ reference/jquery-plugins/select2-4.0.2/dist/css/jisaconnection_temp.css	(revision 477f035c8005f0be13ca4bbabc65f885e4426234)
@@ -0,0 +1,153 @@
+
+/***********************************/
+/**             Inbox             **/
+/***********************************/
+.glyphicon-inbox:before {
+    content: "\e028";
+}
+.fa-inbox:before {
+    content: "\f01c";
+}
+
+.mailbox-folders {
+    margin-top: 20px;
+}
+.mailbox-folders li a {
+    display: block;
+    padding: 6px 15px;
+    color: #d2d2d2;
+    text-decoration: none;
+    -webkit-transition: color 0.2s;
+    -moz-transition: color 0.2s;
+    -o-transition: color 0.2s;
+    transition: color 0.2s;
+}
+.mailbox-folders li a:hover {
+    color: #f8f8f8;
+}
+.mailbox-folders .active a {
+    border-left: 5px solid #e5603b;
+    padding-left: 10px;
+    color: #f8f8f8;
+}
+
+.mailbox .folder-title {
+    margin: 0;
+    line-height: 30px;
+    float: left;
+}
+.mailbox .input-search {
+    width: 140px;
+    -webkit-transition: width 0.2s;
+    -moz-transition: width 0.2s;
+    -o-transition: width 0.2s;
+    transition: width 0.2s;
+}
+.mailbox .input-search:focus {
+    width: 200px;
+}
+
+.mailbox-content {
+    margin-top: 20px;
+}
+.mailbox-content .folder-view tbody {
+    color: #d2d2d2;
+}
+.mailbox-content .folder-view .icheckbox_square-grey {
+    -webkit-transform: scale(0.72);
+    -moz-transform: scale(0.72);
+    -ms-transform: scale(0.72);
+    -o-transform: scale(0.72);
+    transform: scale(0.72);
+}
+.mailbox-content .folder-view .total-pages {
+    text-align: right;
+}
+.mailbox-content .folder-view .tiny-column {
+    width: 18px;
+}
+.mailbox-content .folder-view .name {
+    width: 140px;
+}
+.mailbox-content .folder-view .name, .mailbox-content .folder-view .subject {
+    cursor: pointer;
+}
+.mailbox-content .folder-view .date {
+    text-align: right;
+    width: 60px;
+}
+.mailbox-content .folder-view .unread {
+    font-weight: 600;
+    color: #f8f8f8;
+}
+.mailbox-content .folder-view .starred {
+    color: #d2d2d2;
+    cursor: pointer;
+    -webkit-transition: color 0.2s;
+    -moz-transition: color 0.2s;
+    -o-transition: color 0.2s;
+    transition: color 0.2s;
+}
+.mailbox-content .folder-view .starred:hover {
+    color: #f8f8f8;
+}
+.mailbox-content .email-view hr {
+    margin: 5px 0;
+}
+.mailbox-content .email-view .print {
+    margin-right: 6px;
+    color: #d2d2d2;
+    text-decoration: none;
+    -webkit-transition: color 0.2s;
+    -moz-transition: color 0.2s;
+    -o-transition: color 0.2s;
+    transition: color 0.2s;
+}
+.mailbox-content .email-view .print:hover {
+    color: #f8f8f8;
+}
+.mailbox-content .email-view .email-body {
+    margin-top: 20px;
+}
+.mailbox-content .email-details img {
+    width: 30px;
+    height: 30px;
+    float: left;
+}
+.mailbox-content .email-details-content {
+    margin-left: 30px;
+    padding: 0 5px;
+}
+.mailbox-content .email-details-content .email {
+    color: #d2d2d2;
+    font-size: 11.05px;
+}
+.mailbox-content .email-details-content .receiver {
+    display: block;
+    color: #d2d2d2;
+    margin-top: -6px;
+}
+.mailbox-content .email-details-content .email-date {
+    margin-right: 10px;
+    line-height: 24px;
+    vertical-align: middle;
+}
+.mailbox-content .email-attachments .attachment img {
+    display: block;
+}
+.mailbox-content .email-attachments .attachment .title {
+    margin: 0;
+    font-weight: bold;
+}
+.mailbox-content .form-email-compose .control-label {
+    width: 46px;
+}
+.mailbox-content .form-email-compose .controls {
+    margin-left: 51px;
+}
+.mailbox-content .form-email-compose .wysihtml5-sandbox {
+    width: 100% !important;
+}
+.mailbox-content .form-email-compose .control-group {
+    margin-bottom: 10px;
+}
\ No newline at end of file
Index: reference/lightblue4/docs/lib/widgster/widgster.js
===================================================================
diff -u
--- reference/lightblue4/docs/lib/widgster/widgster.js	(revision 0)
+++ reference/lightblue4/docs/lib/widgster/widgster.js	(revision 477f035c8005f0be13ca4bbabc65f885e4426234)
@@ -0,0 +1,293 @@
+/**
+ * Widgster plugin.
+ */
+!function ($) {
+
+    "use strict";
+
+    // WIDGSTER CLASS DEFINITION
+    // ======================
+
+    var Widgster = function (el, options) {
+        this.$element = $(el);
+        this.$collapse = this.$element.find('[data-widgster=collapse]');
+        this.$expand = this.$element.find('[data-widgster=expand]');
+        this.$fullscreen = this.$element.find('[data-widgster=fullscreen]');
+        this.$restore = this.$element.find('[data-widgster=restore]');
+        this.options = options;
+        this.collapsed = options.collapsed;
+        this.fullscreened = options.fullscreened;
+
+        this._initHandlers();
+
+        if (this.collapsed){
+            this.collapse(false);
+        } else {
+            this.$expand.hide();
+        }
+
+        if (this.fullscreened){
+            this.fullscreen();
+        } else {
+            this.$restore.hide();
+        }
+
+        this.options.autoload && this.load();
+        var interval = parseInt(this.options.autoload);
+        if (!isNaN(interval)){
+            var widgster = this;
+            this._autoloadInterval = setInterval(function(){
+                widgster.load();
+            }, interval)
+        }
+    };
+
+    Widgster.DEFAULTS = {
+        collapsed: false,
+        fullscreened: false,
+        transitionDuration: 150,
+        bodySelector: '.body',
+        showLoader: true,
+        autoload: false,
+        loaderTemplate: '<div style="text-align: center; margin-top: 10px;">Loading...</div>',
+        /**
+         * provide a way to insert a prompt before removing widget
+         * @param callback
+         */
+        closePrompt: function(callback){
+            callback()
+        }
+    };
+
+    Widgster.prototype.collapse = function(animate){
+        animate = typeof animate == "undefined" ? true : animate;
+        var e = $.Event('collapse.widgster');
+        this.$element.trigger(e);
+        if (e.isDefaultPrevented()) return;
+
+        var widgster = this,
+            duration = animate ? this.options.transitionDuration : 0;
+        this.$element.find(this.options.bodySelector).slideUp(duration, function(){
+            widgster.$element.addClass('collapsed');
+            widgster.$element.trigger($.Event('collapsed.widgster'));
+            widgster.collapsed = true;
+        });
+
+        this.$collapse.hide();
+        this.$expand.show();
+
+        return false;
+    };
+
+    Widgster.prototype.expand = function(animate){
+        animate = typeof animate == "undefined" ? true : animate;
+        var e = $.Event('expand.widgster');
+        this.$element.trigger(e);
+        if (e.isDefaultPrevented()) return;
+
+        var widgster = this,
+            duration = animate ? this.options.transitionDuration : 0;
+        this.$element.find(this.options.bodySelector).slideDown(duration, function(){
+            widgster.$element.removeClass('collapsed');
+            widgster.$element.trigger($.Event('expanded.widgster'));
+            widgster.collapsed = false;
+        });
+
+        this.$collapse.show();
+        this.$expand.hide();
+
+        return false;
+    };
+
+    Widgster.prototype.close = function(){
+
+        this.options.closePrompt && this.options.closePrompt($.proxy(this._doClose, this));
+
+        return false;
+    };
+
+    Widgster.prototype.load = function(){
+        var e = $.Event('load.widgster');
+
+        this.$element.trigger(e);
+
+        if (e.isDefaultPrevented()) return;
+
+        var widgster = this;
+        this.$element.find(this.options.bodySelector).load(this.options.load, function(responseText, textStatus, xhr){
+            widgster.expand();
+            widgster.options.showLoader && widgster._hideLoader();
+            widgster.$element.trigger($.Event('loaded.widgster', {
+                responseText: responseText,
+                textStatus: textStatus,
+                xhr: xhr
+            }))
+        });
+        this.options.showLoader && this._showLoader();
+
+        return false;
+    };
+
+    Widgster.prototype.fullscreen = function(){
+        var e = $.Event('fullscreen.widgster');
+
+        this.$element.trigger(e);
+
+        if (e.isDefaultPrevented()) return;
+
+        this.$element.css({
+            position: 'fixed',
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0,
+            margin: 0,
+            'z-index': 10000,
+            background: 'rgb(83,92,115)' //변경
+        });
+        $('body').css('overflow', 'hidden');
+
+        this.wasCollapsed = this.collapsed;
+        this.expand(false);
+
+        this.$fullscreen.hide();
+        this.$restore.show();
+
+        this.$collapse.hide(); this.$expand.hide();
+
+        this.$element.addClass('fullscreened');
+
+        this.$element.trigger($.Event('fullscreened.widgster'));
+
+        return false;
+    };
+
+    Widgster.prototype.restore = function(){
+        var e = $.Event('restore.widgster');
+
+        this.$element.trigger(e);
+
+        if (e.isDefaultPrevented()) return;
+
+        this.$element.css({
+            position: '',
+            top: '',
+            right: '',
+            bottom: '',
+            left: '',
+            margin: '',
+            'z-index': '',
+            background: 'rgba(51,51,51,.425)' //변경
+        });
+        $('body').css('overflow', '');
+
+        this.$fullscreen.show();
+        this.$restore.hide();
+
+        if (this.collapsed){
+            this.$collapse.hide(); this.$expand.show();
+        } else {
+            this.$collapse.show(); this.$expand.hide();
+        }
+
+        this.wasCollapsed && this.collapse(false);
+
+        this.$element.removeClass('fullscreened');
+
+        this.$element.trigger($.Event('restored.widgster'));
+
+        return false;
+    };
+
+    Widgster.prototype._doClose = function(){
+        //could have been remove.widgster, but http://bugs.jquery.com/ticket/14600
+        var e = $.Event('close.widgster');
+
+        this.$element.trigger(e);
+
+        if (e.isDefaultPrevented()) return;
+
+        $('body').css('overflow', '');
+
+        this.$element.detach();
+
+        e = $.Event('closed.widgster', {$element: this.$element});
+
+        this.$element.trigger(e);
+    };
+
+    Widgster.prototype._showLoader = function(){
+        var $body = this.$element.find(this.options.bodySelector);
+
+        this.$loaderWrap = this.$element.find('.widgster-loader-wrap');
+
+        //create loader html if does not exist
+        if (this.$loaderWrap.length == 0){
+            this.$loaderWrap = $('<div class="widgster-loader-wrap" style="position: absolute; top: 0; right: 0; bottom: 0; ' +
+                'left: 0; display: none"></div>');
+            this.$element.append(this.$loaderWrap);
+        }
+        this.$loaderWrap.html(this.options.loaderTemplate);
+        this.$loaderWrap.css({
+            'margin-top': $body.position().top
+        });
+        if (!this.collapsed){
+            $body.fadeTo(this.options.transitionDuration, 0);
+            this.$loaderWrap.fadeIn(this.options.transitionDuration)
+        }
+    };
+
+    Widgster.prototype._hideLoader = function(){
+        this.$loaderWrap.fadeOut(this.options.transitionDuration);
+        this.$element.find(this.options.bodySelector).fadeTo(this.options.transitionDuration, 1);
+    };
+
+    /**
+     * Attach all required widgster functions to data-widgster elements.
+     * @private
+     */
+    Widgster.prototype._initHandlers = function(){
+        this.$element.on('click.collapse.widgster', '[data-widgster=collapse]', $.proxy(this.collapse, this));
+        this.$element.on('click.expand.widgster', '[data-widgster=expand]', $.proxy(this.expand, this));
+        this.$element.on('click.close.widgster', '[data-widgster=close]', $.proxy(this.close, this));
+        this.$element.on('click.load.widgster', '[data-widgster=load]', $.proxy(this.load, this));
+        this.$element.on('click.fullscreen.widgster', '[data-widgster=fullscreen]', $.proxy(this.fullscreen, this));
+        this.$element.on('click.restore.widgster', '[data-widgster=restore]', $.proxy(this.restore, this));
+    };
+
+
+    // NAMESPACED DATA ATTRIBUTES
+    // =======================
+
+    function getNamespacedData(namespace, data){
+        var namespacedData = {};
+        for (var key in data){
+            // key starts with namespace
+            if (key.slice(0, namespace.length) == namespace){
+                var namespacedKey = key.slice(namespace.length, key.length);
+                namespacedKey = namespacedKey.charAt(0).toLowerCase() + namespacedKey.slice(1);
+                namespacedData[namespacedKey] = data[key];
+            }
+        }
+
+        return namespacedData;
+    }
+
+    // WIDGSTER PLUGIN DEFINITION
+    // =======================
+
+    $.fn.widgster = function (option) {
+        return this.each(function () {
+            var $this   = $(this);
+            var data    = $this.data('widgster');
+            var options = $.extend({}, Widgster.DEFAULTS, getNamespacedData('widgster', $this.data()), typeof option == 'object' && option);
+
+            if (!data) $this.data('widgster', new Widgster(this, options));
+            if (typeof option == 'string') data[option]();
+        })
+    };
+
+    $.fn.widgster.Constructor = Widgster;
+
+
+}(window.jQuery);