//----- Variable -----//
var map; // Map
var overlay; // Overalay
var container = document.getElementById('popup'); // 팝업창 container
var content = document.getElementById('popup-content'); // 팝업창 내용
var colorIndexArray = [ // 10단계 결핍지수 색상
    'rgba(215,25,28,1)',
    'rgba(232,91,58,1)',
    'rgba(249,158,89,1)',
    'rgba(254,201,128,1)',
    'rgba(255,237,170,1)',
    'rgba(237,248,185,1)',
    'rgba(199,233,173,1)',
    'rgba(157,211,167,1)',
    'rgba(100,171,176,1)',
    'rgba(43,131,186,1)'
];
var inputTableArray = []; // 테이블

var currentSelect; // 현재 선택한 지역
var currentSelectSig; // 현재 선택한 지역의 시군구
// var compareRegionArray = []; // 비교지역 목록
// var tree; // 비교지역 선택 체크 트리
// var selectedCompareRegionText = ''; // 비교지역 선택 텍스트
// var selectedCompareRegionArray = []; // 현재 선택된 비교지역 지역 Feature ID 목록
// var selectedCompareOriginArray = []; // 이전에 선택된 비교지역 Feature ID 목록
// var regionData = []; // 시도-시군구-읍면동 트리형태 Object들의 Array
var unionChart1Dataset = unionChart2Dataset = []; //  Chart1, Chart2 통합 데이터셋
var targetChart1Dataset = targetChart2Dataset = []; //  Chart1, Chart2  대상지역 데이터셋
var compareChart1Dataset = compareChart2Dataset = []; //  Chart1, Chart2 비교지역 데이터셋

var chart1, chart2; // 차트
var chartLabel = ['건강', "보육", "교육", "안전", "여가"]; // 차트 레이블

var ctx = $("#chart1"); // 차트1 Canvas
var ctx2 = $("#chart2"); // 차트2 Canvas

var regionFullText = '';
var titleText;
var tensionOpt1 = 0;
var tensionOpt2 = 0;

var adminSgg = new ol.layer.Vector( // 시군구 WMS 레이어
    {
        title: "시군구 경계",
        opacity: 1,
        visible: true,
        renderMode: "vector",
        source: new ol.source.Vector(
            {
                url: PROXY_URL + GISSERVER_URL +
                    "?service=WFS&version=1.0.0&request=GetFeature&typeName=pinogio:tl_scco_sig_201904_s&outputFormat=application/json",
                format: new ol.format.GeoJSON(),
                T: new Date()
            }
        ),
        style: new ol.style.Style(
            {
                //                stroke: new ol.style.Stroke(
                //                    {
                //                        color: 'gray',
                //                        width: 0
                //                    }
                //                )
            }
        )
    }
);
var adminEMDImg = new ol.layer.Image( //읍면동 WMS 레이어
    {
        title: "전국 생활 SOC 결핍 지도",
        opacity: 1,
        visible: true,
        source: new ol.source.ImageWMS(
            {
                url: GISSERVER_URL,
                params: {
                    VERSION: "1.3.0",
                    FORMAT: "image/png",
                    TRANSPARENT: "true",
                    LAYERS: "pinogio:def_imd_zv_s",
                    T: new Date()
                }
            }
        )
    }
);

var clickedAdminEMDImg = new ol.layer.Image(
    {
        title: '선택한 읍면동',
        opacity: 1,
        visible: false,
        source: new ol.source.ImageWMS(
            {
                url: GISSERVER_URL,
                params: {
                    VERSION: "1.3.0",
                    FORMAT: "image/png",
                    TRANSPARENT: "true",
                    LAYERS: "pinogio:def_imd_zv_s",
                    T: new Date(),
                    "CQL_FILTER": "adm_dr_cd= 0"
                }
            }
        )
    }
)

var adminEMDVector = new ol.layer.Vector( // 읍면동 WFS 레이어
    {
        title: "읍면동 경계",
        opacity: 1,
        visible: true,
        renderMode: "vector",
        source: new ol.source.Vector(),
        style: new ol.style.Style(
            {
                fill: new ol.style.Fill(
                    {
                        color: 'rgba(255,255,255,0.25)'
                    }
                )
            }
        )
    }
);

//----- Functions -----//
function RefreshPage() { // 새로고침
    location.reload();
};

function ChangeBaseLayer(value, name) { // 배경 지도 라디오 Change Event
    var layers = map.getLayers().getArray()[0].getLayers().getArray(); // 배경 타일맵 교체
    for (var i = 0; i < layers.length; i++) {
        layers[i].setVisible(false);
        if (value == layers[i].getProperties().id) {
            layers[i].setVisible(true);
        };
    };
};


function AllLayerSelect() { // 전체 선택 버튼 이벤트
    // CQL 전체 선택
    adminEMDImg.getSource().updateParams(
        {
            "CQL_FILTER": "ce IN ('1', '2', '3', '4', '5', '6', '7', '8', '9', '10')"
        }
    );

    // 필터링 박스 버튼 전체 선택
    for (var i = 1; i < 11; i++) {
        if (i == 10) {
            $(eval('"#' + i + 'Btn"')).val("true");
            $(eval('"#' + i + 'Btn"')).css("background-color", colorIndexArray[i - 1]);
            $(eval('"#' + i + 'BtnTable"')).css("display", 'block');
        } else {
            $(eval('"#0' + i + 'Btn"')).val("true");
            $(eval('"#0' + i + 'Btn"')).css("background-color", colorIndexArray[i - 1]);
            $(eval('"#0' + i + 'BtnTable"')).css("display", 'block');
        };
    };

    $("#filterResultSpan").empty();
    $("#filterTableContent").empty();
};

function AllLayerCancel() { // 전체 취소 버튼 이벤트
    $(".tableDiv").hide();
    // CQL 전체 해제
    adminEMDImg.getSource().updateParams(
        {
            "CQL_FILTER": "ce='0'"
        }
    );

    // 필터링 박스 버튼 전체 해제
    for (var i = 1; i < 11; i++) {
        if (i == 10) {
            $(eval('"#' + i + 'Btn"')).val("false");
            $(eval('"#' + i + 'Btn"')).css("background-color", 'white');
            $(eval('"#' + i + 'BtnTable"')).css("display", 'none');
        } else {
            $(eval('"#0' + i + 'Btn"')).val("false");
            $(eval('"#0' + i + 'Btn"')).css("background-color", 'white');
            $(eval('"#0' + i + 'BtnTable"')).css("display", 'none');
        };
    };

    $("#filterTableContent").empty();
    $("#filterResultSpan").empty();
    $("#filterTableTitle").text('상단의 범례 버튼을 클릭하세요.')
};

function IndexToggle(id, value) { // 필터링 박스 개별 버튼 선택 이벤트
    if(id == '01Btn') {
        GetFunctionLog('mdi', '우리동네 생활인프라 이용여건은?', '가장 결핍(IMD) 지역 목록 조회', '');
    } else {
        GetFunctionLog('mdi', '우리동네 생활인프라 이용여건은?', '생활 SOC 상대적 결핍도 조회', '');
    }
    
    // 필터링 박스 선택 및 해제 시각 효과
    var idx = Number(id.substring(0, 2));
    var titleIndex = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

    $(".legendBtn").val("false");
    $(".legendBtn").css("background-color", 'white');
    $(".tableBtn").css("display", "none")

    for (var i = 1; i < 11; i++) {
        if (i == idx) {
            $(eval('"#' + id + '"')).val("true");
            $(eval('"#' + id + '"')).css("background-color", colorIndexArray[idx - 1]);
            $(eval('"#' + id + 'Table"')).css("display", 'block');
            break;
        };
    };

    // CQL Filter 생성
    var cqlText = '';
    var filteringId = '';
    for (var i = 0; i < $(".legendBtn").length; i++) {
        var btn = $(".legendBtn:eq(" + i + ")");
        if (btn.val() == 'true') {
            cqlText += "'";
            cqlText += titleIndex[i];
            filteringId = titleIndex[i];
            cqlText += "',";
        };
    };

    if (cqlText[cqlText.length - 1] == ',') { // 1개 이상이 선택되었을 경우
        cqlText = cqlText.substring(0, cqlText.length - 1);
        adminEMDImg.getSource().updateParams(
            {
                "CQL_FILTER": "ce IN (" + cqlText + ")"
            }
        );
    } else if (cqlText == '') { // 현재 선택된 개수가 0개일 경우
        adminEMDImg.getSource().updateParams(
            {
                "CQL_FILTER": "ce = '0'"
            }
        );
    } else { // 이외의 오류 Throw Error
        throw Error('Null');
    };

    filteringId = String(filteringId);
    if (filteringId.length == 1) {
        filteringId = '0' + filteringId
    };
    filteringId += 'BtnTable';
    ShowFilteringTable(filteringId);

    $("input:radio[name='pg-basemap-item']:radio[value='VWORLD_2DGRAY']").prop("checked", true)

};


function ShowFilteringTable(id) { // 테이블 필터 버튼 선택시 표 내용 갱신
    $(".spinner-border").show(); // 로딩 창 보이기

    var filterIndex = Number(id.substring(0, 2));
    var titleLegend = [ // 한글 범례 목록
        "10% 이하 (가장 결핍)",
        "10 ~ 20%",
        "20 ~ 30%",
        "30 ~ 40%",
        "40 ~ 50%",
        "50 ~ 60%",
        "60 ~ 70%",
        "70 ~ 80%",
        "80 ~ 90%",
        "90% 초과 (가장 양호)"
    ];

    titleText = titleLegend[filterIndex - 1];

    var tdColorDark = colorIndexArray[filterIndex - 1]; // 색
    var tdColorLight = tdColorDark.substring(0, tdColorDark.length - 2) + '0.5)';
    var colorSwitch = true;

    $("#filterTableTitle").text(
        '생활SOC복합결핍지수 ' + titleText + ' 지역'
    );


    $.ajax(
        {
            url: PROXY_URL + GISSERVER_URL
                + "?service=WFS&"
                + "version=1.0.0&"
                + "request=GetFeature&"
                + "typename=pinogio:def_imd_zv_s&"
                + "outputFormat=application/json&"
                + "cql_filter=ce=" + filterIndex,
            success: res => {
                $("#filterResultSpan").empty();


                var filterRegionsArray = res.features;


                // 테이블 결과용 Array의 시군구 하위 읍면동 목록 초기화
                for (var i = 0; i < inputTableArray.length; i++) {
                    inputTableArray[i].subs2 = [];
                };

                // 필터링하여 가져온 읍면동을 테이블 결과용 Array 시군구 하위 읍면동 목록에 새로 넣기
                for (var i = 0; i < filterRegionsArray.length; i++) {
                    for (var j = 0; j < inputTableArray.length; j++) {
                        if (filterRegionsArray[i].properties.sgg_cd == inputTableArray[j].sgg_cd) {
                            inputTableArray[j].subs2.push(
                                {
                                    adm_dr_nm: filterRegionsArray[i].properties.adm_dr_nm
                                }
                            );
                            break;
                        };
                    };
                };

                inputTableArray.sort(
                    function (a, b) {

                        var val1 = a.sgg_cd;
                        var val2 = b.sgg_cd;
                        if (val1 < val2) return -1;
                        if (val1 > val2) return 1;
                        return 0;
                    }
                )

                MakeFilteringTable(tdColorDark);


                $(".spinner-border").hide(); // 로딩창 숨기기



                // $(".spinner-border").css("height", $("#filterTableContent").css("height"));
                $(".tableDiv").css("height", $("#filterTableContent").css("height"));


            }, error: err => {
                console.log(err);
            }
        }
    );
    ChangeBaseLayer("VWORLD_2DGRAY", "pg-basemap-item1");
};

function MakeFilteringTable(color) {
    $(".tableDiv").show();
    $("#filterTableContent").empty();

    var count = 0;
    // 표 HTML 생성
    // var html = '<colgroup><col width="132.5px"><col width="132.5px"><col width=35px></colgroup>';
    // html += '<tr  style="text-shadow : -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;  font-weight: bold !important; background-color:' + color + '; ">';
    // html += '<td id="sigHeader" style="text-align:center; cursor:pointer;">시군구</td>';
    // html += '<td id="emdHeader" style="text-align:center;">읍면동</td>';
    // html += '<td  id="emdCount" style="text-align:center; cursor:pointer;">동<br>개수</td>';
    // html += '</tr>';
    var html = '<thead><tr>';
    html += '<th class="Area" id="sigHeader" style="cursor:pointer;">시, 군, 구</th>';
    html += '<th class="Area" id="emdHeader" style="margin-left: 1rem;">읍, 면, 동</th>';
    html += '<th id="emdCount" style="cursor:pointer; text-align:right;">동<br/>개수</th>';
    html += '</tr></thead><tbody>';

    for (var i = 0; i < inputTableArray.length; i++) {
        if (inputTableArray[i].subs2.length > 0) {
            var text = '';
            html += '<tr>';
            html += '<td class="Area">' + inputTableArray[i].sd_nm + ' ' + inputTableArray[i].sgg_nm + '</td>'
            html += '<td class="Area">'
            for (var j = 0; j < inputTableArray[i].subs2.length; j++) {
                text += inputTableArray[i].subs2[j].adm_dr_nm;
                text += ', ';
            };
            text = text.substring(0, text.length - 2);
            html += text;
            html += '</td>';
            html += '<td>' + inputTableArray[i].subs2.length + '</td>'
            html += '</tr>';

            count += inputTableArray[i].subs2.length;
        };
    };

    html += '</tbody>;'

    $("#filterTableContent").append(html); // 표 HTML 적용

    $("#filterResultSpan").text(
        "IMD " + titleText + "  : 전체 읍면동 3,493개 중 " + count + "(" + Number(count / 3493 * 100).toFixed(2) + "%)"
    );

    $("#sigHeader").click(
        () => {
            inputTableArray.sort(
                function (a, b) {

                    var val1 = a.sd_nm + ' ' + a.sgg_nm
                    var val2 = b.sd_nm + ' ' + b.sgg_nm

                    if (val1 < val2) return -1;
                    if (val1 > val2) return 1;
                    return 0;
                }
            )
            MakeFilteringTable(color);
        }
    )

    $("#emdCount").click(
        () => {
            inputTableArray.sort(
                function (a, b) {

                    var val1 = a.subs2.length
                    var val2 = b.subs2.length

                    if (val1 < val2) return 1;
                    if (val1 > val2) return -1;
                    return 0;
                }
            )
            MakeFilteringTable(color);
        }
    )
}

// Right Menu Functions
function SidoChange(sdCd) { // 시도 선택박스 변경 이벤트
    // 읍면동 선택박스 리셋
    $('#emdSelector').empty();
    $('#emdSelector').append('<option selected disabled>읍면동 선택</option>');
    $.ajax( // map 시도로 이동
        {
            url: PROXY_URL + GISSERVER_URL
                + "?service=WFS&"
                + "version=1.0.0&"
                + "request=GetFeature&"
                + "typename=pinogio:def_sd_s&"
                + "outputFormat=application/json&"
                + "cql_filter=sd_cd=" + sdCd,
            success: res => {
                var singleMultiPolygon = new ol.geom.MultiPolygon(res.features[0].geometry.coordinates);
                var singleMultiPolygonExtent = singleMultiPolygon.getExtent();
                map.getView().fit(
                    singleMultiPolygonExtent
                );
            },
            error: e => {
                console.log(e);
            }
        }
    );

    $.ajax( // 시군구 드롭박스 아이템 채우기
        {
            url: CONTEXT_PATH + "/api/deficiencyIndex/defSggList.json?"
                + "sd_cd=" + sdCd,
            success: res => {
                var sggList = res.data;
                try {
                    $('#sggSelector').empty();
                    $('#sggSelector').append('<option selected disabled>시군구 선택</option>');

                    for (var i = 0; i < sggList.length; i++) {
                        $('#sggSelector').append(
                            '<option value="' + sggList[i].sgg_cd + '">' + sggList[i].sgg_nm + '</option>'
                        );
                    };
                } catch (e) {
                    console.log(e);
                    alert('지역 목록이 정상적으로 로드되지 못했습니다.');
                }
            },
            error: e => {
                console.log(e);
            }
        }
    );


};

function SggChange(sggCd) { // 시군구 선택박스 변경 이벤트
    $.ajax( // map 시군구로 이동
        {
            url: PROXY_URL + GISSERVER_URL
                + "?service=WFS&"
                + "version=1.0.0&"
                + "request=GetFeature&"
                + "typename=pinogio:def_sgg_s&"
                + "outputFormat=application/json&"
                + "cql_filter=sgg_cd=" + sggCd,
            success: res => {
                currentSelectSig = res.features[0]
                var singleMultiPolygon = new ol.geom.MultiPolygon(res.features[0].geometry.coordinates);
                var singleMultiPolygonExtent = singleMultiPolygon.getExtent();
                map.getView().fit(
                    singleMultiPolygonExtent
                );
            },
            error: e => {
                console.log(e);
            }
        }
    );

    $.ajax( // 읍면동 드롭박스 아이템 채우기
        {
            url: CONTEXT_PATH + "/api/deficiencyIndex/defEmdList.json?"
                + "sgg_cd=" + sggCd,
            success: res => {
                var emdList = res.data;
                try {
                    $('#emdSelector').empty();

                    $('#emdSelector').append('<option selected disabled>읍면동 선택</option>');

                    for (var i = 0; i < emdList.length; i++) {
                        $('#emdSelector').append(
                            '<option value="' + emdList[i].adm_dr_cd + '">' + emdList[i].adm_dr_nm + '</option>'
                        );
                    };
                } catch (e) {
                    console.log(e);
                    alert('지역 목록이 정상적으로 로드되지 못했습니다.');
                }
            },
            error: (e) => {
                console.log(e);
            }
        }
    );

    GetVectorFromSggCd(sggCd);
};

function EmdChange(emdCd, isMapClick) { // 읍면동 선택박스 변경 이벤트
    $.ajax( // map 읍면동으로 이동
        {
            url: PROXY_URL + GISSERVER_URL
                + "?service=WFS&"
                + "version=1.0.0&"
                + "request=GetFeature&"
                + "typename=pinogio:def_imd_zv_s&"
                + "outputFormat=application/json&"
                + "cql_filter=adm_dr_cd=" + emdCd,
            success: res => {
                GetFunctionLog('mdi', '우리동네 생활인프라 이용여건은?', '우리동네 생활 SOC별 수준 비교 분석', '');

                var singleMultiPolygon = new ol.geom.MultiPolygon(res.features[0].geometry.coordinates);
                var singleMultiPolygonExtent = singleMultiPolygon.getExtent();
                map.getView().fit(
                    singleMultiPolygonExtent
                );

                // 현재 선택지역
                currentSelect = res.features[0];

                // 현재 선택지역 정보 입력
                $("#targetRegionName").text(currentSelect.properties.adm_dr_nm);
                $("#targetRegionTotPop").text(String(numeral(currentSelect.properties.tot_pop).format(0, 0)) + "명");
                $("#targetRegionInfPop").text(String(numeral(currentSelect.properties.tot_inf).format(0, 0)) + "명");
                $("#targetRegionStdPop").text(String(numeral(currentSelect.properties.tot_edu).format(0, 0)) + "명");
                $("#targetRegionOldPop").text(String(numeral(currentSelect.properties.tot_senior).format(0, 0)) + "명");

                if (isMapClick !== true) {
                    ChartRefresh(tensionOpt1, tensionOpt2);
                }
            },
            error: (e) => {
                console.log(e);
            }
        }
    ).then(
        () => {

            // 현재 동 시군구 정보 가져오기
            $.ajax( // map 시군구로 이동
                {
                    url: PROXY_URL + GISSERVER_URL
                        + "?service=WFS&"
                        + "version=1.0.0&"
                        + "request=GetFeature&"
                        + "typename=pinogio:def_sgg_s&"
                        + "outputFormat=application/json&"
                        + "cql_filter=sgg_cd=" + emdCd.substring(0, 5),
                    success: (res2) => {
                        currentSelectSig = res2.features[0];

                        $("#targetSggName").text(currentSelectSig.properties.sgg_nm);
                        $("#targetSggTotPop").text(String(numeral(Math.round(currentSelectSig.properties.sum_tot_pop)).format(0, 0)) + "명");
                        $("#targetSggInfPop").text(String(numeral(Math.round(currentSelectSig.properties.sum_tot_inf)).format(0, 0)) + "명");
                        $("#targetSggStdPop").text(String(numeral(Math.round(currentSelectSig.properties.sum_tot_std)).format(0, 0)) + "명");
                        $("#targetSggOldPop").text(String(numeral(Math.round(currentSelectSig.properties.sum_tot_senior)).format(0, 0)) + "명");
                    },
                    error: (e) => {
                        console.log(e);
                    }
                }
            ).then(
                () => {
                    $("#esTotPopPer").text(
                        Number(
                            Number($("#targetRegionTotPop").text().replaceAll(",", "").replaceAll('명', '')) / Number($("#targetSggTotPop").text().replaceAll(",", "").replaceAll('명', ''))
                            * 100
                        ).toFixed(1)
                        + "%"
                    );
                    $("#esInfPopPer").text(
                        Number(
                            Number($("#targetRegionInfPop").text().replaceAll(",", "").replaceAll('명', '')) / Number($("#targetSggInfPop").text().replaceAll(",", "").replaceAll('명', ''))
                            * 100
                        ).toFixed(1)
                        + "%"
                    );
                    $("#esStdPopPer").text(
                        Number(
                            Number($("#targetRegionStdPop").text().replaceAll(",", "").replaceAll('명', '')) / Number($("#targetSggStdPop").text().replaceAll(",", "").replaceAll('명', ''))
                            * 100
                        ).toFixed(1)
                        + "%"
                    );
                    $("#esOldPopPer").text(
                        Number(
                            Number($("#targetRegionOldPop").text().replaceAll(",", "").replaceAll('명', '')) / Number($("#targetSggOldPop").text().replaceAll(",", "").replaceAll('명', ''))
                            * 100
                        ).toFixed(1)
                        + "%"
                    );

                    if (isMapClick !== true) {
                        regionFullText = $("#sidoSelector option:checked").text() + " " + $("#sggSelector option:checked").text() + " " + $("#emdSelector option:checked").text() + " (" + currentSelect.properties.ce + "등급)";
                        $("#regionName").text(regionFullText);
                    };
                }
            )
        }
    );


    clickedAdminEMDImg.setVisible(true);
    clickedAdminEMDImg.getSource().updateParams(
        {
            "CQL_FILTER": "adm_dr_cd=" + emdCd
        }
    );

}

function ChartRefresh(tension1, tension2, idNum) {
    function Chart1DataSetUp(tension) {

        // 차트 데이터셋 초기화
        targetChart1Dataset = []

        // Chart Dataset 생성
        targetChart1Dataset.push(
            {
                borderColor: colorIndexArray[currentSelect.properties.ce - 1],
                pointBackgroundColor: colorIndexArray[currentSelect.properties.ce - 1],
                backgroundColor: colorIndexArray[currentSelect.properties.ce - 1].substring(0, colorIndexArray[currentSelect.properties.ce - 1].length - 2) + '0.5)',
                data: [
                    currentSelect.properties.af,
                    currentSelect.properties.bf,
                    currentSelect.properties.cf,
                    currentSelect.properties.df,
                    currentSelect.properties.ef
                ]
            }
        );

        if (chart1 !== undefined) {
            chart1.destroy();
        };

        unionChart1Dataset = [
            ...targetChart1Dataset,
            ...compareChart1Dataset
        ];
        chart1 = MakeRaderChart(ctx, chartLabel, chart1, unionChart1Dataset, tension);
        chart1.resize();
    }

    function Chart2DataSetUp(tension) {
        targetChart2Dataset = [];
        targetChart2Dataset.push(
            {
                borderColor: colorIndexArray[currentSelect.properties.ce - 1],
                pointBackgroundColor: colorIndexArray[currentSelect.properties.ce - 1],
                backgroundColor: colorIndexArray[currentSelect.properties.ce - 1].substring(0, colorIndexArray[currentSelect.properties.ce - 1].length - 2) + '0.5)',
                data: [
                    currentSelect.properties.ar,
                    currentSelect.properties.br,
                    currentSelect.properties.cr,
                    currentSelect.properties.dr,
                    currentSelect.properties.er
                ]
            }
        );

        if (chart2 !== undefined) {
            chart2.destroy();
        };

        unionChart2Dataset = [
            ...targetChart2Dataset,
            ...compareChart2Dataset
        ];
        chart2 = MakeRaderChart(ctx2, chartLabel, chart2, unionChart2Dataset, tension);
        chart2.resize();
    }

    switch (idNum) {
        case "smoothBtn1": {
            Chart1DataSetUp(tension1);
            break;
        };
        case "smoothBtn2": {
            Chart2DataSetUp(tension2);
            break;
        };
        case undefined: {
            Chart1DataSetUp(tension1);
            Chart2DataSetUp(tension2);
            break;
        };
    };
}

function GetVectorFromSggCd(sggCd) {// 현재 선택된 시군구에 속한 WFS 읍면동 레이어 가져오기
    adminEMDVector.setSource(
        new ol.source.Vector(
            {
                format: new ol.format.GeoJSON(),
                loader: function (extent, resolution, projection) {
                    var url = PROXY_URL + GISSERVER_URL + "?service=WFS&version=1.0.0&request=GetFeature&typeName=pinogio:def_imd_zv_s&outputFormat=application/json&" +
                        "cql_filter=sgg_cd='" + sggCd + "'";
                    $.ajax(
                        {
                            url: url,
                            dataType: 'json',
                        }
                    ).done(
                        function (jsonData) {
                            var source = adminEMDVector.getSource();
                            var features = new ol.format.GeoJSON().readFeatures(jsonData);
                            source.addFeatures(features);
                            adminEMDVector.setStyle(
                                function (feature) {
                                    return new ol.style.Style(
                                        {
                                            fill: new ol.style.Fill(
                                                {
                                                    color: 'rgba(255,255,255,0.1)'
                                                }
                                            ),
                                            stroke: new ol.style.Stroke(
                                                {
                                                    color: '#3399CC',
                                                    width: 5
                                                }
                                            )
                                        }
                                    );
                                }
                            );
                        }
                    );
                }
            }
        )
    );
};

function MakeRaderChart(ctx, chartLabel, chart, chartDataset, tension) { // 차트 생성 함수
    chart = new Chart(
        ctx,
        {
            type: 'radar',
            data: {
                labels: chartLabel,
                datasets: chartDataset
            },
            options: {
                legend: {
                    display: false,
                    labels: {
                        font: 16
                    }
                },
                scale: {
                    ticks: {
                        beginAtZero: true,
                        min: 0,
                        max: 10,
                        stepSize: 2,
                        display: false
                    }
                },
                transitions: {
                    show: {
                        animaions: {
                            x: {
                                from: 0
                            },
                            y: {
                                from: 0
                            }
                        }
                    }
                },

                // responsive: false,
                maintainAspectRatio: false,
                interaction: {
                    intersect: false
                },
                plugins: {
                    filler: {
                        propagate: false
                    },
                    'samples-filler-analyser': {
                        target: 'chart-analyser'
                    },
                },
                tooltips: {
                    enabled: false
                },
                hover: {
                    animationDuration: 0
                },
                animation: {
                    duration: 1,
                    onComplete: function () {
                        var chartInstance = this.chart,
                            ctx = chartInstance.ctx;
                        ctx.font = Chart.helpers.fontString(
                            20,
                            Chart.defaults.global.defaultFontStyle,
                            Chart.defaults.global.defaultFontFamily
                        );
                        ctx.textAlign = 'center';
                        ctx.textBaseline = 'top';
                        ctx.fillStyle = 'white';
                        ctx.strokeStyle = 'black';
                        ctx.lineWidth = 8;
                        ctx.shadowBlur = 3;
                        ctx.shadowColor = "#000000";
                        ctx.shadowOffs = 0;
                        this.data.datasets.forEach(function (dataset, i) {
                            var meta = chartInstance.controller.getDatasetMeta(i);
                            meta.data.forEach(function (bar, index) {
                                var data = dataset.data[index];
                                ctx.fillText(data, bar._model.x, bar._model.y - 5);
                            });
                        });
                    }
                },
                elements: {
                    line: {
                        tension: tension
                    }
                }
            }
        }
    );
    return chart;
};

function ChartSmoothToggle(value, id) {
    var idNum;
    if (id == 'smoothBtn1') {
        idNum = '1';
    } else {
        idNum = '2';
    };

    var tension = eval('tensionOpt' + idNum);

    if (value == "true") {
        $("#smoothBtn" + idNum)[0].value = false;
        $("#smoothBtn" + idNum).text("Smooth ON");
        tension = 0;

    } else {
        $("#smoothBtn" + idNum)[0].value = true;
        $("#smoothBtn" + idNum).text("Smooth OFF");
        tension = 0.4;
    };

    if (id == 'smoothBtn1') {
        tensionOpt1 = tension;
    } else {
        tensionOpt2 = tension;
    };

    ChartRefresh(tensionOpt1, tensionOpt2, id);
}

function ViewNewCheckingExtent(selectedNewCompareCd) { // 새로 선택한 비교지역 목록으로 맵 이동하기
    // var selectedFeatureIdArray = [];
    var cqlText = selectedNewCompareCd;

    $.ajax(
        {
            url: PROXY_URL + GISSERVER_URL + '?'
                + "service=WFS&"
                + "version=1.0.0&"
                + "request=GetFeature&"
                + "typename=pinogio:def_imd_zv_s&"
                + "outputFormat=application/json&"
                + "cql_filter=adm_dr_cd IN (" + cqlText + ')',
            success: res => {
                var featureList = res.features;
                var tempVectorSource = new ol.source.Vector();
                for (var i = 0; i < featureList.length; i++) {
                    tempVectorSource.addFeature(
                        new ol.Feature(
                            {
                                geometry: new ol.geom.MultiPolygon(
                                    featureList[i].geometry.coordinates
                                )
                            }
                        )
                    );
                };
                map.getView().fit(
                    tempVectorSource.getExtent()
                );
            },
            error: e => {
                console.log(e);
            }
        }
    );
};



window.onload = function () { // 최초 브라우저 로딩

    // 좌표계 5179 정의
    proj4.defs("EPSG:5179", "+proj=tmerc +lat_0=38 +lon_0=127.5 +k=0.9996 +x_0=1000000 +y_0=2000000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs");

    map = new ol.Map( // Left Map
        {
            target: 'pg-map',
            layers: [
                BASEMAP_GROUP, // Base Map
                adminEMDImg, // 읍면동 WMS
                adminSgg, // 시군구
                clickedAdminEMDImg,
                adminEMDVector // 읍면동 Vector
                // adminSd// 시도
            ],
            pixelRatio: 1
        }
    );

    // 기본 컨트롤러 제거
    map.getControls().forEach(function (control) {
        if (control instanceof ol.control.Zoom) {
            map.removeControl(control);
        }
    }, this);

    // 줌 레벨 이벤트 +
    document.getElementById('zoom-level-plus').addEventListener('click', function () {
        map.getView().setZoom(map.getView().getZoom() + 1);
    });

    // 줌 레벨 이벤트 -
    document.getElementById('zoom-level-minus').addEventListener('click', function () {
        map.getView().setZoom(map.getView().getZoom() - 1);
    });

    // 최초 뷰 위치
    var parser = new ol.format.WMSCapabilities();
    fetch(PROXY_URL + GISSERVER_URL + '?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetCapabilities')
        .then(
            response => {
                return response.text();
            }
        ).then(
            text => {
                var result = parser.read(text);
                var extent = result.Capability.Layer.Layer.find(l => l.Name === 'tl_scco_ctprvn_201904').EX_GeographicBoundingBox;
                var extent_3857 = ol.proj.transformExtent(extent, 'EPSG:4326', 'EPSG:3857');
                // var extent_3857 = ol.proj.transformExtent(extent, 'EPSG:3857', 'EPSG:3857');
                map.getView().fit(
                    extent_3857,
                    {
                        size: map.getSize(),
                        maxZoom: 15
                    }
                );
                map.getView().setMinZoom(6);
                map.getView().setZoom(7);
            }
        ).catch(
            e => {
                console.log(e);
            }
        );


    // 배경지도 버튼 토글 이벤트
    $("[data-toggle=dropdown").on(
        'click',
        function (e) {
            if ($('.dropdown-menu').css('display') == 'block') {
                $('.dropdown-menu').css('display', 'none');
            } else {
                $('.dropdown-menu').css('display', 'block');
            };
        }
    );

    // 배경 레이어 Change Event 실행후 드롭박스 닫기 방지
    $('.dropdown-menu').on(
        'click',
        function (e) {
            e.stopPropagation();
        }
    );

    overlay = new ol.Overlay( // 팝업창 생성
        {
            element: container,
            autoPan: false,
            autoPanAnimation: {
                duration: 250,
            }
        }
    );

    map.addOverlay(overlay); // 팝업창(오버레이) 기능을 지도에 추가

    map.on( // 마우스 호버링 이벤트
        'pointermove',
        function (e) {

            var currentWMSLayer;

            for (var i = 0; i < e.target.getLayers().getArray().length; i++) {
                if (e.target.getLayers().getArray()[i].getProperties().title == "선택한 읍면동") {
                    currentWMSLayer = clickedAdminEMDImg;
                    break;
                } else if (e.target.getLayers().getArray()[i].getProperties().title == "전국 생활 SOC 결핍 지도") {
                    currentWMSLayer = adminEMDImg;
                    break;
                };
            };

            if (currentWMSLayer == undefined) {
                return;
            };

            var viewResolution = map.getView().getResolution();
            var url = adminEMDImg.getSource().getGetFeatureInfoUrl(
                e.coordinate,
                viewResolution,
                'EPSG:3857',
                {
                    'INFO_FORMAT': 'application/json'
                }
            );

            var url2 = clickedAdminEMDImg.getSource().getGetFeatureInfoUrl(
                e.coordinate,
                viewResolution,
                'EPSG:3857',
                {
                    'INFO_FORMAT': 'application/json'
                }
            );

            function ShowWMSInfo(jsonData) {
                var resData = jsonData.features[0].properties;
                // var tdColorDark = colorIndexArray[resData.ce - 1]; // 색
                // var html =
                //     '<table style="font-size:11pt !important; border-collapse: collapse; width: 100%; text-shadow : -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;font-weight:bold" border="1" >' +
                //     '<tbody>' +
                //     '<tr style=background-color:' + tdColorDark + ';><td>' + resData.sd_nm + ' ' + resData.sgg_nm + ' ' + resData.adm_dr_nm + '</td></tr>' +
                //     '<tr style=background-color:' + tdColorDark + ';><td>결핍지수등급  ' + resData.ce + '등급</td></tr>' +
                //     '<tr ><td>총합 인구 수   ' + numeral(resData.tot_pop).format(0, 0) + '명</td></tr>' +
                //     '<tr ><td>영유아 인구 수  ' + numeral(resData.tot_inf).format(0, 0) + '명</td></tr>' +
                //     '<tr ><td>유소년 인구 수  ' + numeral(resData.tot_edu).format(0, 0) + '명</td></tr>' +
                //     '<tr ><td>고령 인구 수 ' + numeral(resData.tot_senior).format(0, 0) + '명</td></tr>' +
                //     '</tbody>' +
                //     '</table>';

                var html =
                    `<div class="AreaPopWrap">
                        <div class="AreaPop active">
                            <div class="AreaPopHeader">
                                <p>
                                    ${resData.sd_nm} ${resData.sgg_nm} ${resData.adm_dr_nm}
                                </p>
                                <p style="font-size: 1.25rem;">(결핍지수등급 ${resData.ce}등급)</p>
                            </div>
                            <div class="AreaPopBody">
                                <div class="InfoWrap">
                                    <div class="InfoTxt">
                                        <p>총합 인구 수 </p>
                                        <p>
                                            <span>${numeral(resData.tot_pop).format(0, 0)}</span>명
                                        </p>
                                    </div>
                                    <div class="InfoTxt">
                                        <p>영유아 인구 수 </p>
                                        <p>
                                            <span>${numeral(resData.tot_inf).format(0, 0)}</span>명
                                        </p>
                                    </div>
                                    <div class="InfoTxt">
                                        <p>유소년 인구 수 </p>
                                        <p>
                                            <span>${numeral(resData.tot_edu).format(0, 0)}</span>명
                                        </p>
                                    </div>
                                    <div class="InfoTxt" style="margin-bottom: 0;">
                                        <p>고령 인구 수</p>
                                        <p>
                                            <span>${numeral(resData.tot_senior).format(0, 0)}</span>명
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>`;
                content.innerHTML = html;

                overlay.setPosition(e.coordinate);
            };


            if (url) {
                fetch(PROXY_URL + url)
                    .then(
                        function (response) {
                            return response.json();
                        }
                    )
                    .then(
                        function (json) {
                            if (json.features[0] !== undefined) {
                                if (json.features.length > 0) {
                                    ShowWMSInfo(json);
                                };
                            } else {
                                if (url2) {
                                    fetch(PROXY_URL + url2)
                                        .then(
                                            function (response) {
                                                return response.json();
                                            }
                                        )
                                        .then(
                                            function (json2) {
                                                if (json2.features[0] !== undefined) {
                                                    if (json2.features.length > 0) {
                                                        ShowWMSInfo(json2);
                                                    };
                                                } else {
                                                    content.innerHTML = '';
                                                    overlay.setPosition(null);
                                                };
                                            }
                                        );
                                };
                            };
                        }
                    );
            };
        }
    );

    // 테이블 결과 입력용 시군구 목록 Array 생성
    $.ajax(
        {
            url: CONTEXT_PATH + "/api/deficiencyIndex/allDefSggList.json",
            success: res => {
                var sggList = res.data;
                for (var i = 0; i < sggList.length; i++) {
                    inputTableArray.push(
                        {
                            sd_nm: sggList[i].sd_nm,
                            sgg_cd: sggList[i].sgg_cd,
                            sgg_nm: sggList[i].sgg_nm,
                            subs2: []
                        }
                    );
                };
            },
            error: e => {
                console.log(e);
            }
        }
    );

    map.on(
        'click',
        function (e) {
            for (var i = 0; i < e.target.getLayers().getArray().length; i++) {
                if (e.target.getLayers().getArray()[i].getProperties().title == '시군구 경계') {
                    // 픽셀로 wms 정보 가져와야함

                    var viewResolution = map.getView().getResolution();
                    var url = adminEMDImg.getSource().getGetFeatureInfoUrl(
                        e.coordinate,
                        viewResolution,
                        'EPSG:3857',
                        {
                            'INFO_FORMAT': 'application/json'
                        }
                    );
                    if (url) {
                        $.ajax(
                            {
                                url: PROXY_URL + url,
                                success: res => {
                                    if (res.features.length > 0) {
                                        var feature = res.features[0];
                                        var clickedSdCd = feature.properties.sd_cd;
                                        var clickedSggCd = feature.properties.sgg_cd;
                                        var clickedAdmCd = feature.properties.adm_dr_cd;
                                        // var a = async function Test() {

                                        $.ajax( // 시군구 드롭박스 아이템 채우기
                                            {
                                                url: CONTEXT_PATH + "/api/deficiencyIndex/defSggList.json?"
                                                    + "sd_cd=" + clickedSdCd,
                                                success: res => {
                                                    var sggList = res.data;
                                                    try {
                                                        $('#sggSelector').empty();
                                                        $('#sggSelector').append('<option selected disabled>시군구 선택</option>');

                                                        for (var i = 0; i < sggList.length; i++) {
                                                            $('#sggSelector').append(
                                                                '<option value="' + sggList[i].sgg_cd + '">' + sggList[i].sgg_nm + '</option>'
                                                            );
                                                        };
                                                    } catch (e) {
                                                        console.log(e);
                                                        alert('시군구 목록이 정상적으로 로드되지 못했습니다.');
                                                    }
                                                },
                                                error: e => {
                                                    console.log(e);
                                                }
                                            }
                                        ).then(
                                            () => {
                                                $.ajax( // 읍면동 드롭박스 아이템 채우기
                                                    {
                                                        url: CONTEXT_PATH + "/api/deficiencyIndex/defEmdList.json?"
                                                            + "sgg_cd=" + clickedSggCd,
                                                        success: res => {
                                                            var emdList = res.data;
                                                            try {
                                                                $('#emdSelector').empty();

                                                                $('#emdSelector').append('<option selected disabled>읍면동 선택</option>');

                                                                for (var i = 0; i < emdList.length; i++) {
                                                                    $('#emdSelector').append(
                                                                        '<option value="' + emdList[i].adm_dr_cd + '">' + emdList[i].adm_dr_nm + '</option>'
                                                                    );
                                                                };
                                                            } catch (e) {
                                                                console.log(e);
                                                                alert('읍면동 목록이 정상적으로 로드되지 못했습니다.');
                                                            }
                                                        },
                                                        error: (e) => {
                                                            console.log(e);
                                                        }
                                                    }
                                                ).then(
                                                    () => {
                                                        EmdChange(clickedAdmCd, true);
                                                    }
                                                ).then(
                                                    () => {
                                                        for (var i = 0; i < $("#sidoSelector > option").length; i++) {
                                                            if (clickedSdCd == $("#sidoSelector > option")[i].value) {
                                                                $(eval('"#sidoSelector > option:eq(' + i + ')"'))
                                                                    .prop('selected', true)
                                                            };
                                                        };

                                                        for (var i = 0; i < $("#sggSelector > option").length; i++) {
                                                            if (clickedSggCd == $("#sggSelector > option")[i].value) {
                                                                $(eval('"#sggSelector > option:eq(' + i + ')"'))
                                                                    .prop('selected', true)
                                                            };
                                                        };

                                                        for (var i = 0; i < $("#emdSelector > option").length; i++) {
                                                            if (clickedAdmCd == $("#emdSelector > option")[i].value) {
                                                                $(eval('"#emdSelector > option:eq(' + i + ')"'))
                                                                    .prop('selected', true)

                                                            };
                                                        };

                                                        regionFullText = $("#sidoSelector option:checked").text() + " " + $("#sggSelector option:checked").text() + " " + $("#emdSelector option:checked").text() + " (" + feature.properties.ce + "등급)";
                                                        $("#regionName").text(regionFullText);

                                                        currentSelect = feature;
                                                        ChartRefresh(tensionOpt1, tensionOpt2);
                                                        GetVectorFromSggCd(clickedSggCd);
                                                    }
                                                )
                                            }
                                        )
                                    } else {
                                        return;
                                    }
                                }
                            }
                        );
                    }
                };
            };
        }
    );

    // Right Menu Events
    // 시도, 시군구, 읍면동 비교 지역 Tree Selector 목록 생성
    $.ajax( // 시도
        {
            url: CONTEXT_PATH + "/api/deficiencyIndex/defSdList.json",
            success: res => {
                try {
                    var sdList = res.data;
                    $('#sidoSelector').empty();
                    $('#sidoSelector').append('<option selected disabled>시도 선택</option>');

                    for (var i = 0; i < sdList.length; i++) {
                        $('#sidoSelector').append(
                            '<option value="' + sdList[i].sd_cd + '">' + sdList[i].sd_nm + '</option>'
                        );
                    };

                    // 대상지역 초기화
                    $('#sggdSelector').empty();
                    $('#sggSelector').append('<option selected disabled> 시군구 선택</option>');
                    $('#emdSelector').empty();
                    $('#emdSelector').append('<option selected disabled>읍면동 선택</option>');
                } catch (e) {
                    console.log(e);
                    alert('시도 목록이 정상적으로 로드되지 못했습니다.');
                }
            },
            error: e => {
                console.log(e);
            }
        }
    );

    ChangeBaseLayer("VWORLD_2DBASE", "pg-basemap-item");

    $('#pg-readme-modal-1day').on('click', function (e) {
        var date = new Date();
        date.setTime(date.getTime() + 1 * 24 * 60 * 60 * 1000);
        document.cookie = 'multipleDeprivationIndexReadmeOpen=false;expires=' + date.toUTCString() + ';path=/';
    });
    if (document.cookie.indexOf('multipleDeprivationIndexReadmeOpen=false') == -1) {
        $('#pg-readme-modal').modal('show');
    }
    //    map.addControl(new ol.control.LayerSwitcher());

};