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/html2canvas-1.4.1/html2canvas.js"],

        [	"../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"
        ]
    ];

    loadPluginGroupsParallelAndSequential(pluginGroups)
        .then(function() {

            console.log('紐⑤뱺 �뚮윭洹몄씤 濡쒕뱶 �꾨즺');

            //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);
            }, 5000); // 5珥� �꾩뿉 �ㅽ뻾�⑸땲��.

            //pdfmake �뚯씪�� 而ㅼ꽌 defer 泥섎━ ��.
            setTimeout(function () {
                var script = document.createElement("script");
                script.src = "../reference/jquery-plugins/dataTables-1.10.16/extensions/Buttons/js/pdfmake.min.js";
                script.defer = true; // defer �띿꽦 �ㅼ젙
                document.head.appendChild(script);
            }, 5000); // 5珥� �꾩뿉 �ㅽ뻾�⑸땲��.

            //�ъ씠�� 硫붾돱 泥섎━
            $('.widget').widgster();
            setSideMenu("sidebar_menu_jira", "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();   	  //踰꾩쟾 �붿냼 �앹꽦
            downloadChartImage();     //李⑦듃 �대�吏� �ㅼ슫濡쒕뱶

            //d3Chart 洹몃━湲�
            $.getScript("./js/pdServiceVersion/initD3Chart.js").done(function (script, textStatus) {
                initD3Chart("/auth-user/api/arms/pdService/getD3ChartData.do");
            });

            //�ㅽ겕由쏀듃 �ㅽ뻾 濡쒖쭅�� �닿납�� 異붽��⑸땲��.
            var �쇰뵲�곸슜_�대옒�ㅼ씠由�_諛곗뿴 = ['.pdservice_version_alm_connect'];
            laddaBtnSetting(�쇰뵲�곸슜_�대옒�ㅼ씠由�_諛곗뿴);

        })
        .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 = [[0, "asc"]];
    var buttonList = [
        "copy",
        "excel",
        "print",
        {
            extend: "csv",
            text: "Export csv",
            charset: "utf-8",
            extension: ".csv",
            fieldSeparator: ",",
            fieldBoundary: "",
            bom: true
        },
        {
            extend: "pdfHtml5",
            orientation: "landscape",
            pageSize: "LEGAL"
        }
    ];

    var jquerySelector = "#pdservice_table";
    var ajaxUrl = "/auth-user/api/arms/pdService/getPdServiceMonitor.do";
    var jsonRoot = "response";
    var isServerSide = false;
    console.log("jsonRoot:", jsonRoot);

    dataTableRef = dataTable_build(
        jquerySelector,
        ajaxUrl,
        jsonRoot,
        columnList,
        rowsGroupList,
        columnDefList,
        selectList,
        orderList,
        buttonList,
        isServerSide
    );

}

function copychecker() {
    dataTableRef.button(".buttons-copy").trigger();
}
function printchecker() {
    dataTableRef.button(".buttons-print").trigger();
}
function csvchecker() {
    dataTableRef.button(".buttons-csv").trigger();
}
function excelchecker() {
    dataTableRef.button(".buttons-excel").trigger();
}
function pdfchecker() {
    dataTableRef.button(".buttons-pdf").trigger();
}


// �곗씠�� �뚯씠釉� 援ъ꽦 �댄썑 瑗� 援ы쁽�댁빞 �� 硫붿냼�� : �� �대┃�� �대깽��
function dataTableClick(tempDataTable, selectedData) {
    $("#version_contents").html("");  //// 踰꾩쟾 �곸꽭 紐낆꽭 珥덇린��

    selectedIndex = selectedData.selectedIndex;
    selectedPage = selectedData.selectedPage;
    selectId = selectedData.c_id;
    selectName = selectedData.c_title;
    pdServiceDataTableClick(selectedData.c_id);

    // console.log("selectedIndex:::::" + selectedIndex);
    // console.log("dataTableClick:: dataTableClick -> " + selectedData.c_id);


    $(".searchable").multiSelect("deselect_all");  // // 硫��곗��됲듃�먯꽌 紐⑤뱺 �좏깮 �댁젣
    $("#pdservice_connect").removeClass("btn-success");
    $("#pdservice_connect").addClass("btn-primary");
    $("#pdservice_connect").text("�쒗뭹(�쒕퉬��)-踰꾩쟾-ALM �곌껐 �깅줉");

    //珥덇린 �쒓렇 ��젣
    $("#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;
        console.log("dataLoad :: versionList �� ", versionList);
        $("#version_accordion").jsonMenu("set", json.response, { speed: 5000 });

        var selectedHtml =
            ` 
 			<div class="chat-message">
				<div    class="chat-message-body"
						style="margin-left: 0px !important; padding:!important;  border-left: 2px solid #a4c6ff; border-right: 2px solid #e5603b;">
					 <span  id="toRight"
							class="arrow"
							style="top: 10px !important; right: -7px; border-top: 5px solid transparent;
							border-bottom: 5px solid transparent;
							border-left: 5px solid #e5603b; border-right: 0px; left:unset;"></span>
					<span   class="arrow"
							style="top: 10px !important; border-right: 5px solid #a4c6ff;"></span>
					<div    class="sender"
							style="padding-bottom: 5px; padding-top: 5px">
						�좏깮�� �쒗뭹(�쒕퉬��) :
						<span style="color: #a4c6ff;">
							` +  selectedText + `
						</span>
					</div>
				</div>
			</div>
			`;

        $(".list-group-item").html(selectedHtml);

        $("#tooltip_enabled_service_name").val(selectedText);
        // $("#select_PdService").text(selectedText); // sender �대쫫 諛붿씤��


        //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) {
    console.log("menu :: " + JSON.stringify(menu));
    console.table(menu);
    console.log("test data:: " + selectName);


    main.html("");
    var data ="";

    for (let i = 0; i < menu.length; i++) {

        if (i == 0) {  // select version\
            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;  "
           						onclick="versionClicks(this, ${menu[i].c_id}, '${menu[i].c_title}')">
						    ${menu[i].c_title}
 					   </a>
				   </div>
			   </div>`;
        } else {  // basic version
            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="versionClicks(this, ${menu[i].c_id}, '${menu[i].c_title}')">
						   ${menu[i].c_title}
					   </a>
				   </div>
			   </div>`;
        }
    }

    main.html(data);
}

////////////////////////////////////////////////////////////////////////////////////////
//踰꾩쟾 �대┃�� �� �숈옉�섎뒗 �⑥닔
////////////////////////////////////////////////////////////////////////////////////////
function versionClicks(element, c_id, c_title) {
    $("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.3)";
        console.log("element is = " + element);
    }

    selectVersion = c_id;  // version c_id

    var coloredTitleHtml =
        `<div class="chat-message">
				<div class="chat-message-body" style="margin-left: 0px !important; border-left: 2px solid #e5603b;  ">
					<span 	class="arrow"
							style="top: 17px !important; border-right: 5px solid #e5603b;">
					</span>
					 <div    class="sender"
							style="padding-bottom: 5px; padding-top: 3px">
						<i class="fa fa-check"></i>
							�좏깮�� �쒗뭹
						<sup>�쒕퉬��</sup> :
						<span   id="select_PdService"
								style="color: #a4c6ff">
								 ` +  selectName + `
						</span>
					</div>
					<div    class="sender"
							style="padding-bottom: 5px; padding-top: 3px">
						<i class="fa fa-check"></i> �좏깮�� 踰꾩쟾 :
						<span   id="select_Version"
								style="color: #a4c6ff">
							   ` +  c_title + `
						</span>
					</div>
				</div>
			</div>`;
    //console.log("dataLoad :: coloredTitleHtml - >", coloredTitleHtml);

    $(".list-item").html(coloredTitleHtml);

    console.log("click :: C_ID ->  " + c_id);
    $(".searchable").multiSelect("deselect_all");  //�좏깮�� ��ぉ�ㅼ쓣 紐⑤몢 �좏깮 �댁젣(�대떦 �붿냼�ㅼ뿉�� �좏깮�� �놁븷��)�섎뒗 肄붾뱶
    // console.log("pdservice_link -> " +   $("#pdservice_table").DataTable().rows(".selected").data()[0].c_id);
    // console.log("pdserviceversion_link -> " +  c_id );

    // �대� �깅줉�� �쒗뭹(�쒕퉬��)-踰꾩쟾-吏��� �곌껐 �뺣낫媛� �덈뒗吏� �뺤씤
    console.log("�좏깮�� 踰꾩쟾�� �쒗뭹�쒕퉬�� �꾩씠�� : " + $("#pdservice_table").DataTable().rows(".selected").data()[0].c_id);
    $.ajax({
        url: "/auth-user/api/arms/globaltreemap/getConnectInfo/pdService/pdServiceVersion/jiraProject.do",
        type: "GET",
        data: {
            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];
                console.log("response data check:: obj ->   " + JSON.stringify(obj));
                console.table(obj);
                console.log("push obj.jiraproject_link :: => " + obj.jiraproject_link);

                multiSelectData.push(obj.jiraproject_link);
                console.log("push jiraproject :: => " + 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("�쒗뭹(�쒕퉬��)-踰꾩쟾-ALM �곌껐 �깅줉");
            } else {
                $("#pdservice_connect").removeClass("btn-primary");
                $("#pdservice_connect").addClass("btn-success");
                $("#pdservice_connect").text("�쒗뭹(�쒕퉬��)-踰꾩쟾-ALM �곌껐 蹂�寃�");

                $("#multiselect").multiSelect("select", multiSelectData.toString().split(","));
            }
        })
        .fail(function (e) {
            console.log("fail call");
        })
        .always(function () {
            console.log("always call");
        });
}

////////////////////////////////////////////////////////////////////////////////////////
// �쒗뭹(�쒕퉬��)-踰꾩쟾-吏��� ����
////////////////////////////////////////////////////////////////////////////////////////
function connect_pdservice_jira(){
    // console.log("pdservice_jira::: pdservice_version_id -> " + selectVersion);
    $("#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 媛� �곌껐�섏뿀�듬땲��.");
                    initD3Chart("/auth-user/api/arms/pdService/getD3ChartData.do");
                })
                .fail(function (e) {
                    console.log("fail call");
                })
                .always(function (data) {
                    console.log("always call");
                    console.log("�곗씠�� �곌껐 �깅줉  �꾨즺!");
                    console.log('multiselect data -> ' + JSON.stringify($("#multiselect").val()));

                });
        } 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 媛� �곌껐�섏뿀�듬땲��.");
                    console.log('connect data -> ' + data);
                })
                .fail(function (e) {
                    console.log("fail call");
                })
                .always(function (data) {
                    // 蹂�寃쎌씠 �섎㈃ 洹몃옒�꾩뿉�� 蹂��붽� �덉뼱�쇳븳��.
                    console.log("�대� �덈뒗 �곗씠�� 蹂�寃� �꾨즺 !");
                    initD3Chart("/auth-user/api/arms/pdService/getD3ChartData.do");
                });
        } else {
            jError("who are you?");
        }
    });
}


////////////////////////////////////////////////////////////////////////////////////////
// JIRA �꾨줈�앺듃 �곗씠�� 濡쒕뱶 �� 硫��� ���됲듃 鍮뚮뱶 �섍퀬 �щ┝�ㅽ겕濡� �곸슜
////////////////////////////////////////////////////////////////////////////////////////
/* --------------------------- multi select & slim scroll ---------------------------------- */
function setdata_for_multiSelect() {
    $.ajax({
        url: "/auth-user/api/arms/jiraServerProjectPure/getChildNodeWithoutSoftDelete.do?c_id=2",
        type: "GET",
        contentType: "application/json;charset=UTF-8",
        dataType: "json",
        progress: true
    })
        .done(function (data) {
            console.log(data);
            let option_data = [];
            for (let i in data) {
                let alm_server = data[i];
                let server_name = alm_server.c_jira_server_name;
                let server_type = alm_server.c_jira_server_type;

                for (let j in alm_server.jiraProjectIssueTypePureEntities) {
                    let alm_project = alm_server.jiraProjectIssueTypePureEntities[j];
                    let alm_project_name = alm_project.c_jira_name;
                    let alm_project_c_id = alm_project.c_id;

                    let issue_type_entities = server_type === "�⑦봽�덈���" ?
                                                                alm_server.jiraIssueTypeEntities : alm_project.jiraIssueTypeEntities;

                    const issue_type = find_checked_true_entity(issue_type_entities);

                    let is_add_option = issue_type && (server_type === "�대씪�곕뱶" || server_type === "�⑦봽�덈���");

                    if (server_type === "�덈뱶留덉씤_�⑦봽�덈���") {
                        const issue_priority = find_checked_true_entity(alm_server.jiraIssuePriorityEntities);
                        is_add_option = issue_type && issue_priority;
                    }

                    if (is_add_option) {
                        option_data.push(`<option data-server-type='${server_type}' value='${alm_project_c_id}'>[${server_name}] ${alm_project_name}</option>`);
                    }
                }
            }

            //�꾨줈�앺듃 紐⑸줉 異붽�
            $(".searchable").html(option_data.join(""));

            ////////////////////////////////////////////////
            // 硫��� ���됲듃 鍮뚮뱶
            buildMultiSelect();
            ////////////////////////////////////////////////
        })
        .fail(function (e) {
            console.log("fail call");
        })
        .always(function () {
            console.log("always call");
        });
}

function find_checked_true_entity(entities) {
    return entities && entities.length > 0 ? entities.find(entity => entity.c_check === "true") : null;
}

////////////////////////////////////////////////////////////////////////////////////////
// 硫��� ���됲듃 珥덇린�� �⑥닔
////////////////////////////////////////////////////////////////////////////////////////
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;
                }
            });

            //slim scroll
            $(".ms-list").slimscroll({
                //size: '8px',
                //width: '100%',
                //height: 'fit-content',
                height: "450px"
                //color: '#ff4800',
                //allowPageScroll: true,
                //alwaysVisible: false,
                //railVisible: true,
                // scroll amount applied to each mouse wheel step
                //wheelStep: 20,
                // scroll amount applied when user is using gestures
                //touchScrollStep: 200,
                // distance in pixels between the side edge and the scrollbar
                //distance: '10px',
            });
        },
        afterSelect: function (value, text) {
            this.qs1.cache();
            this.qs2.cache();
            //d3Update();
        },
        afterDeselect: function (value, text) {
            this.qs1.cache();
            this.qs2.cache();
            //d3Update();
        }
    });
}


////////////////////////////////////////////////////////////////////////////////////////
//�쒗뭹(�쒕퉬��) �대┃�� �� �숈옉�섎뒗 �⑥닔
//1. �곸꽭蹂닿린 �곗씠�� 諛붿씤��
//2. �몄쭛�섍린 �곗씠�� 諛붿씤��
////////////////////////////////////////////////////////////////////////////////////////
function pdServiceDataTableClick(c_id) {
    // selectVersion = c_id;
    // console.log("pdSerivceDataTableClick:: selectVersion -> " + selectVersion);
    // console.log("pdSerivceDataTableClick:: c_id -> " + c_id);

    $.ajax({
        url: "/auth-user/api/arms/pdService/getNodeWithVersionOrderByCidDesc.do", // �대씪�댁뼵�멸� HTTP �붿껌�� 蹂대궪 �쒕쾭�� URL 二쇱냼
        data: { c_id: c_id }, // HTTP �붿껌怨� �④퍡 �쒕쾭濡� 蹂대궪 �곗씠��
        method: "GET", // HTTP �붿껌 硫붿냼��(GET, POST ��)
        dataType: "json", // �쒕쾭�먯꽌 蹂대궡以� �곗씠�곗쓽 ����
        beforeSend: function () {
            $(".loader").removeClass("hide");
        }
    })
        // HTTP �붿껌�� �깃났�섎㈃ �붿껌�� �곗씠�곌� done() 硫붿냼�쒕줈 �꾨떖��.
        .done(function (json) {
            $("#detailview_pdservice_name").val(json.c_title);

            var selectedHtml =
                ` <div class="chat-message">
					<div    class="chat-message-body"
							style="margin-left: 0px !important; padding:!important;  border-left: 2px solid #a4c6ff; border-right: 2px solid #e5603b;">
						 <span  id="toRight"
								class="arrow"
								style="top: 10px !important; right: -7px; border-top: 5px solid transparent;
								border-bottom: 5px solid transparent;
								border-left: 5px solid #e5603b; border-right: 0px; left:unset;"></span>
						<span   class="arrow"
								style="top: 10px !important; border-right: 5px solid #a4c6ff;"></span>
						<div    class="sender"
								style="padding-bottom: 5px; padding-top: 5px">
							�좏깮�� �쒗뭹(�쒕퉬��) :
							<span style="color: #a4c6ff;">
								` + json.c_title + `
							</span>
						</div>
					</div>
				</div>`;

            $(".list-group-item").html(selectedHtml);
            // $("#select_Version").text(json.c_title);


            $("#detailview_pdservice_name").val(json.c_title);
            if (isEmpty(json.c_pdservice_owner) || json.c_pdservice_owner == "none") {
                $("#detailview_pdservice_owner").val("梨낆엫�먭� 議댁옱�섏� �딆뒿�덈떎.");
            } else {
                $("#detailview_pdservice_owner").val(json.c_pdservice_owner);
            }

            if (isEmpty(json.c_pdservice_reviewer01) || json.c_pdservice_reviewer01 == "none") {
                $("#detailview_pdservice_reviewer01").val("由щ럭��(�곕�梨낆엫��)媛� 議댁옱�섏� �딆뒿�덈떎.");
            } else {
                $("#detailview_pdservice_reviewer01").val(json.c_pdservice_reviewer01);
            }

            if (isEmpty(json.c_pdservice_reviewer02) || json.c_pdservice_reviewer02 == "none") {
                $("#detailview_pdservice_reviewer02").val("2踰덉㎏ 由щ럭��(�곕�梨낆엫��) �놁쓬");
            } else {
                $("#detailview_pdservice_reviewer02").val(json.c_pdservice_reviewer02);
            }

            if (isEmpty(json.c_pdservice_reviewer03) || json.c_pdservice_reviewer03 == "none") {
                $("#detailview_pdservice_reviewer03").val("3踰덉㎏ 由щ럭��(�곕�梨낆엫��) �놁쓬");
            } else {
                $("#detailview_pdservice_reviewer03").val(json.c_pdservice_reviewer03);
            }

            if (isEmpty(json.c_pdservice_reviewer04) || json.c_pdservice_reviewer04 == "none") {
                $("#detailview_pdservice_reviewer04").val("4踰덉㎏ 由щ럭��(�곕�梨낆엫��) �놁쓬");
            } else {
                $("#detailview_pdservice_reviewer04").val(json.c_pdservice_reviewer04);
            }

            if (isEmpty(json.c_pdservice_reviewer05) || json.c_pdservice_reviewer05 == "none") {
                $("#detailview_pdservice_reviewer05").val("5踰덉㎏ 由щ럭��(�곕�梨낆엫��) �놁쓬");
            } else {
                $("#detailview_pdservice_reviewer05").val(json.c_pdservice_reviewer05);
            }
            $("#detailview_pdservice_contents").html(json.c_pdservice_contents);

            $("#editview_pdservice_name").val(json.c_title);

            //clear
            $("#editview_pdservice_owner").val(null).trigger("change");

            if (json.c_pdservice_owner == null || json.c_pdservice_owner == "none") {
                console.log("pdServiceDataTableClick :: json.c_pdservice_owner empty");
            } else {
                var newOption = new Option(json.c_pdservice_owner, json.c_pdservice_owner, true, true);
                $("#editview_pdservice_owner").append(newOption).trigger("change");
            }
            // -------------------- reviewer setting -------------------- //
            //reviewer clear
            $("#editview_pdservice_reviewers").val(null).trigger("change");

            var selectedReviewerArr = [];
            if (json.c_pdservice_reviewer01 == null || json.c_pdservice_reviewer01 == "none") {
                console.log("pdServiceDataTableClick :: json.c_pdservice_reviewer01 empty");
            } else {
                selectedReviewerArr.push(json.c_pdservice_reviewer01);
                // Set the value, creating a new option if necessary
                if ($("#editview_pdservice_reviewers").find("option[value='" + json.c_pdservice_reviewer01 + "']").length) {
                    console.log('option[value=\'" + json.c_pdservice_reviewer01 + "\']"' + "already exist");
                } else {
                    // Create a DOM Option and pre-select by default
                    var newOption01 = new Option(json.c_pdservice_reviewer01, json.c_pdservice_reviewer01, true, true);
                    // Append it to the select
                    $("#editview_pdservice_reviewers").append(newOption01).trigger("change");
                }
            }
            if (json.c_pdservice_reviewer02 == null || json.c_pdservice_reviewer02 == "none") {
                console.log("pdServiceDataTableClick :: json.c_pdservice_reviewer02 empty");
            } else {
                selectedReviewerArr.push(json.c_pdservice_reviewer02);
                // Set the value, creating a new option if necessary
                if ($("#editview_pdservice_reviewers").find("option[value='" + json.c_pdservice_reviewer02 + "']").length) {
                    console.log('option[value=\'" + json.c_pdservice_reviewer02 + "\']"' + "already exist");
                } else {
                    // Create a DOM Option and pre-select by default
                    var newOption02 = new Option(json.c_pdservice_reviewer02, json.c_pdservice_reviewer02, true, true);
                    // Append it to the select
                    $("#editview_pdservice_reviewers").append(newOption02).trigger("change");
                }
            }
            if (json.c_pdservice_reviewer03 == null || json.c_pdservice_reviewer03 == "none") {
                console.log("pdServiceDataTableClick :: json.c_pdservice_reviewer03 empty");
            } else {
                selectedReviewerArr.push(json.c_pdservice_reviewer03);
                // Set the value, creating a new option if necessary
                if ($("#editview_pdservice_reviewers").find("option[value='" + json.c_pdservice_reviewer03 + "']").length) {
                    console.log('option[value=\'" + json.c_pdservice_reviewer03 + "\']"' + "already exist");
                } else {
                    // Create a DOM Option and pre-select by default
                    var newOption03 = new Option(json.c_pdservice_reviewer03, json.c_pdservice_reviewer03, true, true);
                    // Append it to the select
                    $("#editview_pdservice_reviewers").append(newOption03).trigger("change");
                }
            }
            if (json.c_pdservice_reviewer04 == null || json.c_pdservice_reviewer04 == "none") {
                console.log("pdServiceDataTableClick :: json.c_pdservice_reviewer04 empty");
            } else {
                selectedReviewerArr.push(json.c_pdservice_reviewer04);
                // Set the value, creating a new option if necessary
                if ($("#editview_pdservice_reviewers").find("option[value='" + json.c_pdservice_reviewer04 + "']").length) {
                    console.log('option[value=\'" + json.c_pdservice_reviewer04 + "\']"' + "already exist");
                } else {
                    // Create a DOM Option and pre-select by default
                    var newOption04 = new Option(json.c_pdservice_reviewer04, json.c_pdservice_reviewer04, true, true);
                    // Append it to the select
                    $("#editview_pdservice_reviewers").append(newOption04).trigger("change");
                }
            }
            if (json.c_pdservice_reviewer05 == null || json.c_pdservice_reviewer05 == "none") {
                console.log("pdServiceDataTableClick :: json.c_pdservice_reviewer05 empty");
            } else {
                selectedReviewerArr.push(json.c_pdservice_reviewer05);
                // Set the value, creating a new option if necessary
                if ($("#editview_pdservice_reviewers").find("option[value='" + json.c_pdservice_reviewer05 + "']").length) {
                    console.log('option[value=\'" + json.c_pdservice_reviewer05 + "\']"' + "already exist");
                } else {
                    // Create a DOM Option and pre-select by default
                    var newOption05 = new Option(json.c_pdservice_reviewer05, json.c_pdservice_reviewer05, true, true);
                    // Append it to the select
                    $("#editview_pdservice_reviewers").append(newOption05).trigger("change");
                }
            }
            $("#editview_pdservice_reviewers").val(selectedReviewerArr).trigger("change");

            // ------------------------- reviewer end --------------------------------//

            // CKEDITOR.instances.input_pdservice_editor.setData(json.c_pdservice_contents);
        })
        // HTTP �붿껌�� �ㅽ뙣�섎㈃ �ㅻ쪟�� �곹깭�� 愿��� �뺣낫媛� fail() 硫붿냼�쒕줈 �꾨떖��.
        .fail(function (xhr, status, errorThrown) {
            console.log(xhr + status + errorThrown);
        })
        //
        .always(function (xhr, status) {
            console.log(xhr + status);
            $(".loader").addClass("hide");
        });

    $("#delete_text").text($("#pdservice_table").DataTable().rows(".selected").data()[0].c_title);
}

////////////////////////////////////////////////////////////////////////////////////////
// �대�吏� �ㅼ슫濡쒕뱶
////////////////////////////////////////////////////////////////////////////////////////
function downloadChartImage() {
    $("#imageDownload").click( function () {
        // html2canvas �쇱씠釉뚮윭由щ� �ъ슜�섏뿬 �대�吏�濡� �뚮뜑留�
        html2canvas($(".darkBack")[0], {
            backgroundColor: null, // 湲곕낯 諛깃렇�쇱슫�� �됱긽�� �좎��섍린 �꾪빐 null濡� �ㅼ젙
        }).then(function (canvas) {
            // �대�吏� �ㅼ슫濡쒕뱶 留곹겕 �앹꽦
            var downloadLink = document.createElement("a");
            downloadLink.download = "darkBack_image.png";
            downloadLink.href = canvas.toDataURL("image/png");

            // �대�吏� �ㅼ슫濡쒕뱶
            downloadLink.click();
        });
    });
}