// 지도 전역 변수
var map;
//아으아아아
// 지도 배경 레이어 정의
var vworldBaseLayer;
var vworldSatelliteLayer;
var imageryLayer;
var tblHeader;
var sursetLayer;
var cotrolLayer;
var drawLayer;
var drawAreaLayer;
var demLayerSource;
var demLayer;
var demBaseLayer;
var vectorDrawSource;
var selectedHole;
var selectedSaup;
var selectedArea;
var select;
var selectFeatures;
var draw;
var selectAreaClick;
var featuresToAdd;
var isFirstLoad = true;
var surSetisFirstLoad = true;
var verIncisFirstLoad = true;
var setExtisFirstLoad = true;
var watPreisFirstLoad = true;
var watLevisFirstLoad = true;

//거리측정, 면적측정
var sketch;
var helpTooltipElement;														// 도움말 도구 설명 요소
var helpTooltip;															// 도움말 메시지 표시
var measureTooltipElement;													// 측정 툴팁 요소
var measureTooltip;															// 측정값 표시

var LineStringOnOff = "off";
var PolygonOnOff = "off";
var mapDemSearchOnOff = "off";

var holeInfoPopup;
var verIncInfoPopup;
var verIncInfoPopupData;
var setExtInfoPopup;
var setExtInfoPopupData;
var holeInfoPopupData;
var saupInfoPopup;
var saupInfoPopupData;
var instrumentationInfoPopup;
var instrumentationInfoPopupData;

var instrumentationGraphInfoPopup;
var instrumentationGraphInfoPopupData;
var predictionGraphInfoPopup;
var predictionGraphInfoPopupData;
//var url = 'http://210.120.6.116:9999';
//var GEOSERVER_URL = 'https://geoserver.smart.dbnt.co.kr';
var GEOSERVER_URL = '/wms';

//현재 도메인을 가져옵니다.
var currentDomain = window.location.hostname;

//현재 도메인이 'localhost' 또는 '127.0.0.1'을 포함하는지 확인합니다.
if (currentDomain.includes('localhost') || currentDomain.includes('127.0.0.1')) {
	GEOSERVER_URL = 'http://10.dbnt.co.kr:9000';
}

$(document).ready(function(){
	// 지도 서비스 실행
	init();
});

//-------------------------------------------
// 실행시 첫 화면 및 전체 함수 통제
//-------------------------------------------
function init() {
	// 좌표계 설정
	initProj();

	// ol view 설정
	var olView = new ol.View({
		center: [14337592,4173705],        													// 초기 지도 위치 좌표,[54300000, 4300000],
		zoom: 14,                            												// 초기 지도 위치 줌레벨
		minZoom: 7,
		maxZoom: 19
	});

	// map 생성
	map = new ol.Map({
		target: 'map',  																	// Map 생성할 div id (지도를 생성할 element 객체의 id 값)
		view: olView
	});

	// 배경지도 설정(등록)
	addBaseLayer();

	// 배경지도 변경 및 범례 조회
	initBaseLayerSelect();

	// 우측메뉴 기능
	menutoolsEvent();

	// Feature 선택기능
	selectFeature();

	// Mouseover
	hoverMode();

	holeInfoPopup = $("#holeInfoPopup");

	holeInfoPopup.kendoWindow({
		animation: false,
		width: 700,
		minWidth: 700,
		height: 650,
		minHeight: 650,
		modal: true,
		scrollable: true,
		resizable: true,
		pinned: true,
		title: "상세 정보조회"
	});

	holeInfoPopupData = holeInfoPopup.data("kendoWindow");

	verIncInfoPopup = $("#verIncInfoPopup");

	verIncInfoPopup.kendoWindow({
		animation: false,
		width: 1100,
		minWidth: 1100,
		height: 800,
		minHeight: 800,
		modal: true,
		scrollable: false,
		resizable: false,
		pinned: true,
		title: "지중경사계 상세 정보조회"
	});

	verIncInfoPopupData = verIncInfoPopup.data("kendoWindow");

	setExtInfoPopup = $("#setExtInfoPopup");

	setExtInfoPopup.kendoWindow({
		animation: false,
		width: 1100,
		minWidth: 1100,
		height: 800,
		minHeight: 800,
		modal: true,
		scrollable: false,
		resizable: false,
		pinned: true,
		title: "층별침하계 상세 정보조회"
	});

	setExtInfoPopupData = setExtInfoPopup.data("kendoWindow");

	watPreInfoPopup = $("#watPreInfoPopup");

	watPreInfoPopup.kendoWindow({
		animation: false,
		width: 1100,
		minWidth: 1100,
		height: 800,
		minHeight: 800,
		modal: true,
		scrollable: false,
		resizable: false,
		pinned: true,
		title: "간극수압계 상세 정보조회"
	});

	watPreInfoPopupData = watPreInfoPopup.data("kendoWindow");

	watLevInfoPopup = $("#watLevInfoPopup");

	watLevInfoPopup.kendoWindow({
		animation: false,
		width: 1100,
		minWidth: 1100,
		height: 800,
		minHeight: 800,
		modal: true,
		scrollable: false,
		resizable: false,
		pinned: true,
		title: "지하수위계 상세 정보조회"
	});

	watLevInfoPopupData = watLevInfoPopup.data("kendoWindow");

	$("#searchInfo").kendoButton({
		click: function() {
			selectFeatureInfo();			// 정보 조회
		}
	});

	$("#holeInfoPopupClose").kendoButton({
		click: function() {
			holeInfoPopupData.close();
		}
	});

	$("#verIncInfoPopupClose").kendoButton({
		click: function() {
			verIncInfoPopupData.close();
		}
	});

	$("#setExtInfoPopupClose").kendoButton({
		click: function() {
			setExtInfoPopupData.close();
		}
	});

	$("#watPreInfoPopupClose").kendoButton({
		click: function() {
			watPreInfoPopupData.close();
		}
	});

	$("watLevInfoPopupClose").kendoButton({
		click: function() {
			watLevInfoPopupData.close();
		}
	});

	saupInfoPopup = $("#saupInfoPopup");

	saupInfoPopup.kendoWindow({
		animation: false,
		width: 700,
		minWidth: 700,
		height: 650,
		minHeight: 650,
		modal: true,
		scrollable: true,
		resizable: true,
		pinned: true,
		title: "상세 정보조회"
	});

	saupInfoPopupData = saupInfoPopup.data("kendoWindow");

	$("#saupInfoPopupClose").kendoButton({
		click: function() {
			saupInfoPopupData.close();
		}
	});

	instrumentationInfoPopup = $("#instrumentationInfoPopup");

	instrumentationInfoPopup.kendoWindow({
		animation: false,
		width: 1100,
		minWidth: 1100,
		height: 800,
		minHeight: 800,
		modal: true,
		scrollable: false,
		resizable: false,
		pinned: true,
		title: "계측정보조회",
	});

	instrumentationInfoPopupData = instrumentationInfoPopup.data("kendoWindow");

	$("#instrumentationInfoPopupClose").kendoButton({
		click: function() {
			instrumentationInfoPopupData.close();
		}
	});

	instrumentationGraphInfoPopup = $("#instrumentationGraphInfoPopup");

	instrumentationGraphInfoPopup.kendoWindow({
		animation: false,
		width: 850,
		height: 525,
		modal: true,
		scrollable: true,
		resizable: true,
		pinned: true,
		title: "계측정보조회"
	});

	instrumentationGraphInfoPopupData = instrumentationGraphInfoPopup.data("kendoWindow");

	$("#instrumentationGraphInfoPopupClose").kendoButton({
		click: function() {
			instrumentationGraphInfoPopupData.close();
		}
	});


	predictionInfoPopup = $("#predictionInfoPopup");

	predictionInfoPopup.kendoWindow({
		animation: false,
		width: 1000,
		minWidth: 1000,
		height: 800,
		minHeight: 800,
		modal: true,
		scrollable: true,
		resizable: true,
		pinned: true,
		title: "예측정보조회"
	});

	predictionInfoPopupData = predictionInfoPopup.data("kendoWindow");

	$("#predictionInfoPopupClose").kendoButton({
		click: function() {
			predictionInfoPopupData.close();
		}
	});

	predictionGraphInfoPopup = $("#predictionGraphInfoPopup");

	predictionGraphInfoPopup.kendoWindow({
		animation: false,
		width: 1100,
		height: 800,
		modal: true,
		scrollable: true,
		resizable: true,
		pinned: true,
		title: "예측정보조회"
	});

	predictionGraphInfoPopupData = predictionGraphInfoPopup.data("kendoWindow");

	$("#predictionGraphInfoPopupClose").kendoButton({
		click: function() {
			predictionGraphInfoPopupData.close();
		}
	});



}

//-------------------------------------------
// 좌표계 설정
//-------------------------------------------
function initProj() {
    // google 좌표계
    proj4.defs('EPSG:3857', '+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +no_defs');

    // UTM-K 좌표계
    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');

    // 중부원점(GRS80)  [200,000 600,000]
    proj4.defs("EPSG:5186", "+proj=tmerc +lat_0=38 +lon_0=127 +k=1 +x_0=200000 +y_0=600000 +ellps=GRS80 +units=m +no_defs" );
}

//-------------------------------------------
// 배경지도 설정(등록)
//-------------------------------------------
function addBaseLayer() {

	// 배경지도 레이어_vworld Base map
		vworldBaseLayer = new ol.layer.Tile({
		    source: new ol.source.XYZ({
		    	projection : 'EPSG:3857',   				// EPSG 3857 좌표계로 변환
		        url : 'https://xdworld.vworld.kr/2d/Base/service/{z}/{x}/{y}.png',
		        crossOrigin: 'anonymous'
		    }),
		    visible: true
		});
		map.addLayer(vworldBaseLayer);

	// 배경지도 레이어_vworld satellite map
	vworldSatelliteLayer = new ol.layer.Tile({
		source: new ol.source.XYZ({
			projection : 'EPSG:3857',
			url : 'https://xdworld.vworld.kr/2d/Satellite/service/{z}/{x}/{y}.jpeg',
			crossOrigin: 'anonymous'
		}),
		/*zIndex: 0,*/
		visible: false
	});
	map.addLayer(vworldSatelliteLayer);

	var vectorSource = new ol.source.Vector();

	selectedArea = new ol.source.Vector();


	// 시추공 데이터_WFS버전
	vectorSource = new ol.source.Vector({
	    format: new ol.format.GeoJSON(),
	    loader: function (extent, resolution, projection) {
	        var url =
	        	GEOSERVER_URL + '/geoserver/sgis/ows?service=WFS&' +
	            'version=1.0.0&request=GetFeature&' +
	            'typeName=sgis%3Aapptb_hole01&' +
	            'outputFormat=application%2Fjson&' +
	            'srsname=' + projection.getCode() +
	            '&bbox=' + extent.join(',') + ',' + projection.getCode();

	        // WFS 요청 보내기
	        fetch(url)
	            .then(function (response) {
	                return response.json();
	            })
	            .then(function (json) {
	                // 최초로 한 번만 실행
	                if (isFirstLoad) {
	                    tblHeader.getSource().addFeatures(new ol.format.GeoJSON().readFeatures(json));
	                    isFirstLoad = false; // 두 번째 이후에는 무시
	                }
	            });
	    },
	    strategy: ol.loadingstrategy.bbox,
	});


    tblHeader = new ol.layer.Vector({
        className: 'holeLayer',
        source: vectorSource,
        visible: true,
        style: new ol.style.Style({
            image: new ol.style.Circle({
                fill: new ol.style.Fill({
                    color: '#ffcc33',
                }),
                stroke: new ol.style.Stroke({
                    color: 'black',
                    width: 1
                }),
                radius: 6
            }),
        }),
        /*zIndex: 2*/
    });

    map.addLayer(tblHeader);

	var sursetSource = new ol.source.Vector();

	// 지표침하판 데이터_WFS버전
	sursetSource = new ol.source.Vector({
		format: new ol.format.GeoJSON(),
	    loader: function (extent, resolution, projection) {
	        var url =
	        GEOSERVER_URL + '/geoserver/sgis/ows?service=WFS&' +
			'version=1.0.0&request=GetFeature&' +
			'typeName=sgis%3Aapptb_surset01&' +
            'outputFormat=application%2Fjson&' +
            'srsname=' + projection.getCode() +
            '&bbox=' + extent.join(',') + ',' + projection.getCode();

	        fetch(url)
            .then(function (response) {
                return response.json();
            })
            .then(function (json) {
                // 최초로 한 번만 실행
                if (surSetisFirstLoad) {
                	sursetLayer.getSource().addFeatures(new ol.format.GeoJSON().readFeatures(json));
                    surSetisFirstLoad = false; // 두 번째 이후에는 무시
                }
            });
		},
		strategy: ol.loadingstrategy.bbox,
	});

	sursetLayer = new ol.layer.Vector({
		className: 'sursetLayer',
		source: sursetSource,
		/*zIndex: 2,*/
		visible: true,
		style: new ol.style.Style({
			image: new ol.style.Circle({
				fill: new ol.style.Fill({
					color: '#EF0000',
				}),
				stroke: new ol.style.Stroke({
					color: 'black',
					width: 1
				}),
				radius: 6
			}),
		}),
	});
	map.addLayer(sursetLayer);

	var verIncSource = new ol.source.Vector();

	// 지중경사계 데이터_WFS버전
	verIncSource = new ol.source.Vector({
		format: new ol.format.GeoJSON(),
	    loader: function (extent, resolution, projection) {
	        var url =
	        	GEOSERVER_URL + '/geoserver/sgis/ows?service=WFS&' +
	            'version=1.0.0&request=GetFeature&' +
	            'typeName=sgis%3Aapptb_verinc01&' +
	            'outputFormat=application%2Fjson&' +
	            'srsname=' + projection.getCode() +
	            '&bbox=' + extent.join(',') + ',' + projection.getCode();

	        // WFS 요청 보내기
	        fetch(url)
	            .then(function (response) {
	                return response.json();
	            })
	            .then(function (json) {
	                // 최초로 한 번만 실행
	                if (verIncisFirstLoad) {
	                    verIncLayer.getSource().addFeatures(new ol.format.GeoJSON().readFeatures(json));
	                    verIncisFirstLoad = false; // 두 번째 이후에는 무시
	                }
	            });
	    },
	    strategy: ol.loadingstrategy.bbox,
	});

	verIncLayer = new ol.layer.Vector({
		className: 'verIncLayer',
		source: verIncSource,
		/*zIndex: 2,*/
		visible: true,
		style: new ol.style.Style({
			image: new ol.style.Circle({
				fill: new ol.style.Fill({
					color: '#B8860B',
				}),
				stroke: new ol.style.Stroke({
					color: 'black',
					width: 1
				}),
				radius: 6
			}),
		}),
	});
	map.addLayer(verIncLayer);

	var setExtSource = new ol.source.Vector();

	// 지중경사계 데이터_WFS버전
	setExtSource = new ol.source.Vector({
		format: new ol.format.GeoJSON(),
	    loader: function (extent, resolution, projection) {
	        var url =
	        	GEOSERVER_URL + '/geoserver/sgis/ows?service=WFS&' +
	            'version=1.0.0&request=GetFeature&' +
	            'typeName=sgis%3Aapptb_setext01&' +
	            'outputFormat=application%2Fjson&' +
	            'srsname=' + projection.getCode() +
	            '&bbox=' + extent.join(',') + ',' + projection.getCode();

	        // WFS 요청 보내기
	        fetch(url)
	            .then(function (response) {
	                return response.json();
	            })
	            .then(function (json) {
	                // 최초로 한 번만 실행
	                if (setExtisFirstLoad) {
	                    setExtLayer.getSource().addFeatures(new ol.format.GeoJSON().readFeatures(json));
	                    setExtisFirstLoad = false; // 두 번째 이후에는 무시
	                }
	            });
	    },
	    strategy: ol.loadingstrategy.bbox,
	});

	setExtLayer = new ol.layer.Vector({
		className: 'setExtLayer',
		source: setExtSource,
		/*zIndex: 2,*/
		visible: true,
		style: new ol.style.Style({
			image: new ol.style.Circle({
				fill: new ol.style.Fill({
					color: '#99FFFF',
				}),
				stroke: new ol.style.Stroke({
					color: 'black',
					width: 1
				}),
				radius: 6
			}),
		}),
	});
	map.addLayer(setExtLayer);

	var watPreSource = new ol.source.Vector();

	// 지중경사계 데이터_WFS버전
	watPreSource = new ol.source.Vector({
		format: new ol.format.GeoJSON(),
	    loader: function (extent, resolution, projection) {
	        var url =
	        	GEOSERVER_URL + '/geoserver/sgis/ows?service=WFS&' +
	            'version=1.0.0&request=GetFeature&' +
	            'typeName=sgis%3Aapptb_watpre01&' +
	            'outputFormat=application%2Fjson&' +
	            'srsname=' + projection.getCode() +
	            '&bbox=' + extent.join(',') + ',' + projection.getCode();

	        // WFS 요청 보내기
	        fetch(url)
	            .then(function (response) {
	                return response.json();
	            })
	            .then(function (json) {
	                // 최초로 한 번만 실행
	                if (watPreisFirstLoad) {
	                    watPreLayer.getSource().addFeatures(new ol.format.GeoJSON().readFeatures(json));
	                    watPreisFirstLoad = false; // 두 번째 이후에는 무시
	                }
	            });
	    },
	    strategy: ol.loadingstrategy.bbox,
	});

	watPreLayer = new ol.layer.Vector({
		className: 'watPreLayer',
		source: watPreSource,
//		zIndex: 2,
		visible: true,
		style: new ol.style.Style({
			image: new ol.style.Circle({
				fill: new ol.style.Fill({
					color: '#FEBC87',
				}),
				stroke: new ol.style.Stroke({
					color: 'black',
					width: 1
				}),
				radius: 6
			}),
		}),
	});

	map.addLayer(watPreLayer);

	var watLevSource = new ol.source.Vector();

	// 지중경사계 데이터_WFS버전
	watLevSource = new ol.source.Vector({
		format: new ol.format.GeoJSON(),
	    loader: function (extent, resolution, projection) {
	        var url =
	        	GEOSERVER_URL + '/geoserver/sgis/ows?service=WFS&' +
	            'version=1.0.0&request=GetFeature&' +
	            'typeName=sgis%3Aapptb_watlev01&' +
	            'outputFormat=application%2Fjson&' +
	            'srsname=' + projection.getCode() +
	            '&bbox=' + extent.join(',') + ',' + projection.getCode();

	        // WFS 요청 보내기
	        fetch(url)
	            .then(function (response) {
	                return response.json();
	            })
	            .then(function (json) {
	                // 최초로 한 번만 실행
	                if ( watLevisFirstLoad) {
	                    watLevLayer.getSource().addFeatures(new ol.format.GeoJSON().readFeatures(json));
	                    watLevisFirstLoad = false; // 두 번째 이후에는 무시
	                }
	            });
	    },
	    strategy: ol.loadingstrategy.bbox,
	});

	watLevLayer = new ol.layer.Vector({
		className: 'watLevLayer',
		source: watLevSource,
		/*zIndex: 2,*/
		visible: true,
		style: new ol.style.Style({
			image: new ol.style.Circle({
				fill: new ol.style.Fill({
					color: '#FE6969',
				}),
				stroke: new ol.style.Stroke({
					color: 'black',
					width: 1
				}),
				radius: 6
			}),
		}),
	});

	map.addLayer(watLevLayer);


	vectorDrawSource = new ol.source.Vector();

	drawLayer = new ol.layer.Vector({
		source: vectorDrawSource,
		visible: true,
		style: new ol.style.Style({
			fill: new ol.style.Fill({
				color: 'rgba(255, 255, 255, 0.7)'
			}),
			stroke: new ol.style.Stroke({
				color: '#ffcc33',
				width: 2,
			}),
			image: new ol.style.Circle({
				radius: 7,
				fill: new ol.style.Fill({
					color: '#ffcc33',
				}),
			}),
		}),
	});
	map.addLayer(drawLayer);

	drawAreaLayer = new ol.layer.Vector({
		source: selectedArea,
		/*zIndex: 2,*/
		visible: true,
		style :[
			new ol.style.Style({
				fill: new ol.style.Fill({
					color: 'rgba(255, 255, 255, 0.6)',
				}),
				stroke: new ol.style.Stroke({
					color: 'rgba(255, 255, 255, 0.7)',
					width: 2,
				}),
			}),
			new ol.style.Style({
				image: new ol.style.Circle({
					fill: new ol.style.Fill({ color: "#ffcc33" }),
					stroke: new ol.style.Stroke({
						color: 'rgba(255, 255, 255, 0.7)',
						width: 2,
					}),
					radius: 6
				})
			}),
			new ol.style.Style({
				image: new ol.style.Icon({
			        /*src: '../com/img/map-service/icon/icon_map_check.png'*/
					opacity: 0.5,
			        src: "data:image/svg+xml;utf8," + svg,
			        scale: 0.5
			    }),
			})
		],
	});

	map.addLayer(drawAreaLayer);

	// Control
	//map.addControl(new ol.control.ScaleLine());
}


function changeOpacity(){
	let opacity = $("#opacity").val();
	$("#output").text(opacity);
	let setOpacity = (100 - opacity) / 100;
	if(demLayer != undefined){
		demLayer.setOpacity(setOpacity);
	}
}

//-------------------------------------------
//layer on/off 설정
//-------------------------------------------
function initBaseLayerSelect() {

	// 지도 레이어 on/off 설정
	$('input[name="mapOptions"]').change(function(){
		if($(this).val() == 1) {
			vworldBaseLayer.setVisible(true);
			vworldSatelliteLayer.setVisible(false);
		}else if($(this).val() == 2){
			vworldBaseLayer.setVisible(false);
			vworldSatelliteLayer.setVisible(true);
		}
	});

	// 지형높이, 투명도 레이어 on/off
	$('#mapDemSearch').click(function() {
		if(mapDemSearchOnOff == "off"){
			mapDemSearchOnOff = "on";
		}else{
			$("#demDate").val("1").prop("selected", true);
			mapDemSearchOnOff = "off";
			map.removeLayer(demLayer);
		}
	});

	$("select[class='custom-select-calendar']").change(function(){
		var selectDate = $("select[class='custom-select-calendar'] option:selected").text();
		selectDate = selectDate.replaceAll(".","");

		map.removeLayer(demLayer);
		map.removeLayer(demBaseLayer);
		//demBaseLayerInit();

		demLayerSource = new ol.source.ImageWMS({
			url : GEOSERVER_URL + '/geoserver/sgis_dem/wms?service=WMS', // 1. 레이어 URL
			params : {
				'VERSION' : '1.1.0', // 2. 버전
				'LAYERS' : 'sgis_dem:' + selectDate, // 3. 작업공간:레이어 명
				'SRS' : 'EPSG:3857', // SRID
			},
			serverType : 'geoserver',
			crossOrigin: 'anonymous',
		});

		demLayer = new ol.layer.Image({
			title: "demLayer",
			className : "demLayer",
			source : demLayerSource,
			/*zIndex: 1,*/
		});

		map.addLayer(demLayer); // 맵 객체에 레이어를 추가함

	});

	// 범례 제공 및 레이어 On/Off - 전체 선택
	$('#holeLegend').click(function() {
		if(!$(this).is(':checked')) {
			tblHeader.setVisible(false);
			sursetLayer.setVisible(false);
			verIncLayer.setVisible(false);
			setExtLayer.setVisible(false);
			watPreLayer.setVisible(false);
			watLevLayer.setVisible(false);
		}else{
			tblHeader.setVisible(true);
			sursetLayer.setVisible(true);
			verIncLayer.setVisible(true);
			setExtLayer.setVisible(true);
			watPreLayer.setVisible(true);
			watLevLayer.setVisible(true);
		}
	});

	// 범례 제공 및 레이어 On/Off - 부분 선택
	$('input[name="holeCheck"]').change(function(){
		if($(this).val() =="hole1"){					// 시추공
			if(!$(this).is(':checked')) {
				tblHeader.setVisible(false);
				hole1OnOff = "off";
			}else{
				tblHeader.setVisible(true);
				hole1OnOff = "on";
			}
		}else if($(this).val() =="hole2"){
			if(!$(this).is(':checked')) {
				sursetLayer.setVisible(false);
				hole2OnOff = "off";
			}else{
				sursetLayer.setVisible(true);
				hole2OnOff = "on";
			}
		}else if($(this).val() =="hole4"){
			if(!$(this).is(':checked')) {
				verIncLayer.setVisible(false);
				hole4OnOff = "off";
			}else{
				verIncLayer.setVisible(true);
				hole4OnOff = "on";
			}
		}else if($(this).val() =="hole5"){
			if(!$(this).is(':checked')) {
				setExtLayer.setVisible(false);
				hole5OnOff = "off";
			}else{
				setExtLayer.setVisible(true);
				hole5onOff = "on";
			}
		}else if($(this).val() =="hole6"){
			if(!$(this).is(':checked')) {
				watPreLayer.setVisible(false);
				hole6OnOff = "off";
			}else{
				watPreLayer.setVisible(true);
				hole6OnOff = "on";
			}
		}else if($(this).val() =="hole7"){
			if(!$(this).is(':checked')) {
				watLevLayer.setVisible(false);
				hole7OnOff = "off";
			}else{
				watLevLayer.setVisible(true);
				hole7OnOff = "on";
			}
		}
	});
}

//-------------------------------------------
//범례 체크박스 전체선택
//-------------------------------------------
function SelectAll(holeSelectAll)  {
	const checkboxes = document.getElementsByName('holeCheck');

	checkboxes.forEach((checkbox) => {
		checkbox.checked = holeSelectAll.checked;
	})
}

//-------------------------------------------
//우측메뉴 기능
//-------------------------------------------
function menutoolsEvent() {
	// Home으로 이동
	$('#home').on('click', function() {
		var center = [14337592,4173705]

		map.getView().setCenter(center)
		map.getView().setZoom(14);

		setTimeout(function(){
			map.updateSize();    
		}, 200);
	});

	// 지도 확대
	$('#zoom-in').on('click', function() {
		var view = map.getView();
		var zoom = view.getZoom();
		view.setZoom(zoom + 1);

		setTimeout(function(){
			map.updateSize();    
		}, 200);

	});

	// 지도 축소
	$('#zoom-out').on('click', function () {

		var view = map.getView();
		var zoom = view.getZoom();
		view.setZoom(zoom - 1);

		tblHeader.getSource().clear();

		setTimeout(function(){
			map.updateSize();

		}, 200);

	});

/*var wheelTimeout;

	map.on('wheel', function(event) {
	    if (event.originalEvent.deltaY > 0) {
	        // 확대할 때만 피처 추가
	        clearTimeout(wheelTimeout);
	        wheelTimeout = setTimeout(function () {
	           tblHeader.getSource().clear();
	        }, 200); // 200ms 동안 다른 휠 이벤트가 발생하지 않으면 피처를 지움
	    }
	});*/
}

//거리 측정 단위 변경 및 output 제공
//-------------------------------------------
var formatLength = function(line) {
	var length;

	length = Math.round(line.getLength() * 100) / 100;
	var output;

	if (length > 100) {
		output = (Math.round(length / 1000 * 100) / 100) + ' ' + 'km';
	} else {
		output = (Math.round(length * 100) / 100) + ' ' + 'm';
	}
	return output;
};

//-------------------------------------------
//면적 측정 단위 변경 및 output 제공
//-------------------------------------------
var formatArea = function (polygon) {
	var area;
	area = polygon.getArea();
	var output;
	if (area > 10000) {
		output = (Math.round(area / 1000000 * 100) / 100) + ' ' + 'km<sup>2</sup>';
	} else {
		output = (Math.round(area * 100) / 100) + ' ' + 'm<sup>2</sup>';
	}
	return output;
};


//-------------------------------------------
//사업의 시추공 선택 및 해지(개별선택, 사업선택, 영역선택)
//-------------------------------------------
var svg ='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="red" d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"/></svg>';
function selectFeature() {

	selectClick = new ol.interaction.Select({
		condition: ol.events.condition.click,
		style: [
			new ol.style.Style({
				image: new ol.style.Circle({
					fill: new ol.style.Fill({ color: "#ffcc33" }),
					stroke: new ol.style.Stroke({
						color: 'rgba(255, 255, 255, 0.7)',
						width: 2,
					}),
					radius: 6
				})
			}),
			new ol.style.Style({
				image: new ol.style.Icon({
			        /*src: '../com/img/map-service/icon/icon_map_check.png'*/
					opacity: 0.5,
			        src: "data:image/svg+xml;utf8," + svg,
			        scale: 0.5
			    }),
			})
		]
	});

}

function changeInteraction(type){
	if (type == 'click') {

		if(selectedArea != undefined){
			selectedArea.clear();
		}
		if(select != null){
			select.getFeatures().clear();
			map.removeInteraction(select);
			select = null;
		}

		if(selectedSaup != undefined){
			map.removeLayer(selectedSaup);
		}

		if(drawArea != null){
			map.removeInteraction(drawArea);
		}

		document.mapForm.searchType.value = 'EachSelect';
		select = selectClick;
		selectEvent();
	} else if (type == 'areaClick') {
		if(selectedArea != undefined){
			selectedArea.clear();
		}

		if(select != null){
			select.getFeatures().clear();
			map.removeInteraction(select);
			select = null;
		}

		if(selectedSaup != undefined){
			map.removeLayer(selectedSaup);
		}

		document.mapForm.searchType.value = 'areaSearch';
		selectAreaEvent();
	} else {
		if(selectedArea != undefined){
			selectedArea.clear();
		}

		if(drawArea != null){
			map.removeInteraction(drawArea);
		}

		if(select != null){
			select.getFeatures().clear();
			map.removeInteraction(select);
			select = null;
		}

		selectedSaup.setVisible(false)



		select = null;
	}

	if (select != null) {
		select.on('select', function (evt) {
			console.log("test");
		});
	}
}



//-------------------------------------------
//select 이벤트
//-------------------------------------------
function selectEvent(){
	map.on('click', function(evt) {
		selectFeature = map.forEachFeatureAtPixel(evt.pixel,function(selectFeature) {
			selectedHole = selectFeature;
		    return selectFeature;
		});

		if(selectFeature){
			document.mapForm.businessCode.value = selectFeature.getProperties().business_code;
			document.mapForm.holeCode.value = selectFeature.getProperties().hole_code;
			document.mapForm.consCode.value = selectFeature.getProperties().cons_code;
			document.mapForm.surSetCode.value = selectFeature.getProperties().sur_set_code;
			document.mapForm.verIncCode.value = selectFeature.getProperties().ver_inc_code;
			document.mapForm.setExtCode.value = selectFeature.getProperties().set_ext_code;
			document.mapForm.watPreCode.value = selectFeature.getProperties().wat_pre_code;
			document.mapForm.watLevCode.value = selectFeature.getProperties().wat_lev_code;

		}
	});
	map.addInteraction(select);
}

function selectAreaEvent(){
	if(select != undefined){
		map.removeInteraction(select);
	}
	addInteraction2();
}

var drawArea;
function addInteraction2(){
	drawArea = new ol.interaction.Draw({
		source: selectedArea,
		type: "Polygon",
		style: [
			new ol.style.Style({
				fill: new ol.style.Fill({
				  	color: 'rgba(255, 255, 255, 0.4)',
				}),
				stroke: new ol.style.Stroke({
					color: 'rgba(0, 0, 0, 0.5)',
					lineDash: [10, 10],
					width: 2
				})
			}),
		]
	});

	map.addInteraction(drawArea);

	drawArea.on('drawstart', function(e) {
		selectedArea.clear();
	});

	drawArea.on('drawend', function(e){
		var polygonGeometry = e.feature.getGeometry();
		//시추공정보
		var holeFeatures = tblHeader.getSource().getFeatures();
		//지표침하판정보
		var sursetFeatures = sursetLayer.getSource().getFeatures();
		//지중경사계정보
		var verIncFeatures = verIncLayer.getSource().getFeatures();
		//층별침하계정보
		var setExtFeatures = setExtLayer.getSource().getFeatures();
		//간극수압계정보
		var watPreFeatures = watPreLayer.getSource().getFeatures();
		//지중경사계정보
		var watLevFeatures = watLevLayer.getSource().getFeatures();

		var select = new ol.interaction.Select();
		selectFeatures = select.getFeatures(); // 시추공 selectFeatures
		sursetSelectFeatures = select.getFeatures(); // 지표침하판 selectFeatures
		verIncSelectFeatures = select.getFeatures();
		setExtSelectFeatures = select.getFeatures();
		watPreSelectFeatures = select.getFeatures();
		watLevSelectFeatures = select.getFeatures();

		for (var i = 0 ; i < holeFeatures.length; i++){
		    if(polygonGeometry.intersectsExtent( holeFeatures[i].getGeometry().getExtent() )){
		      selectFeatures.push(holeFeatures[i]);
		      selectedArea.addFeature(holeFeatures[i]);
		    }
		}
		for (var i = 0 ; i < sursetFeatures.length; i++){
		    if(polygonGeometry.intersectsExtent( sursetFeatures[i].getGeometry().getExtent() )){
		      sursetSelectFeatures.push(sursetFeatures[i]);
		      selectedArea.addFeature(sursetFeatures[i]);
		    }
		}
		for (var i = 0 ; i < verIncFeatures.length; i++){
		    if(polygonGeometry.intersectsExtent( verIncFeatures[i].getGeometry().getExtent() )){
		      verIncSelectFeatures.push(verIncFeatures[i]);
		      selectedArea.addFeature(verIncFeatures[i]);
		    }
		}
		for (var i = 0 ; i < setExtFeatures.length; i++){
		    if(polygonGeometry.intersectsExtent( setExtFeatures[i].getGeometry().getExtent() )){
		      setExtSelectFeatures.push(setExtFeatures[i]);
		      selectedArea.addFeature(setExtFeatures[i]);
		    }
		}
		for (var i = 0 ; i < watPreFeatures.length; i++){
		    if(polygonGeometry.intersectsExtent( watPreFeatures[i].getGeometry().getExtent() )){
		      watPreSelectFeatures.push(watPreFeatures[i]);
		      selectedArea.addFeature(watPreFeatures[i]);
		    }
		}
		for (var i = 0 ; i < watLevFeatures.length; i++){
		    if(polygonGeometry.intersectsExtent( watLevFeatures[i].getGeometry().getExtent() )){
		      watLevSelectFeatures.push(watLevFeatures[i]);
		      selectedArea.addFeature(watLevFeatures[i]);
		    }
		}
	});
}

function selectFeatureInfo(){
	debugger;  //thkim
	var businessCode = document.mapForm.businessCode.value;
	var holeCode = document.mapForm.holeCode.value;
	var consCode = document.mapForm.consCode.value;
	var searchType = document.mapForm.searchType.value;
	var surSetCode = document.mapForm.surSetCode.value;
	var verIncCode = document.mapForm.verIncCode.value;
	var setExtCode = document.mapForm.setExtCode.value;
	var watPreCode = document.mapForm.watPreCode.value;
	var watLevCode = document.mapForm.watLevCode.value;
	var resultData;
	var resultArea = [];
	var holeData;
	var msg;

	if(document.mapForm.searchType.value == "EachSelect"){
		if(selectFeature != undefined > 0){
			if(consCode == "undefined"){
				msg = "시추공";
				$.ajax({
					url : "/map/holeInfo.do",
					type: "POST",
					data : {
						businessCode : businessCode,
						holeCode : holeCode,
					},
					success : function(data){

						resultData = $.parseJSON(data);
						holeData = resultData.dataList1;

						document.getElementById("busCod").innerHTML = undefinedCheck(holeData[0].businessCode);
						document.getElementById("busProcod").innerHTML = undefinedCheck(holeData[0].businessProcessName);
						document.getElementById("holCod").innerHTML = undefinedCheck(holeData[0].holeCode);
						document.getElementById("holNam").innerHTML = undefinedCheck(holeData[0].holeName);
						document.getElementById("holLocsd").innerHTML = undefinedCheck(holeData[0].sdName);
						document.getElementById("holLocsgg").innerHTML = undefinedCheck(holeData[0].sggName);
						document.getElementById("holLocemd").innerHTML = undefinedCheck(holeData[0].emdName);
						document.getElementById("holLocdet").innerHTML = undefinedCheck(holeData[0].businessAddressDetail);
						document.getElementById("holcoordi").innerHTML = "EPSG:" + undefinedCheck(holeData[0].holeCoordinate);
						document.getElementById("holX").innerHTML = undefinedCheck(holeData[0].holeX);
						document.getElementById("holY").innerHTML = undefinedCheck(holeData[0].holeY);
						document.getElementById("holeBoringName").innerHTML = undefinedCheck(holeData[0].holeBoringName);
						document.getElementById("holeProspecterName").innerHTML = undefinedCheck(holeData[0].holeProspecterName);
						document.getElementById("holeStartDate").innerHTML = undefinedCheck(holeData[0].holeStartDate);
						document.getElementById("holeEndDate").innerHTML = undefinedCheck(holeData[0].holeEndDate);
						document.getElementById("holeElevation").innerHTML = undefinedCheck(holeData[0].holeElevation);
						document.getElementById("holeWaterLevel").innerHTML = undefinedCheck(holeData[0].holeWaterLevel);
						document.getElementById("holeDrillingDepth").innerHTML = undefinedCheck(holeData[0].holeDrillingDepth);
						document.getElementById("holeCasingDepth").innerHTML = undefinedCheck(holeData[0].holeCasingDepth);
						document.getElementById("stratumCount").innerHTML = undefinedCheck(holeData[0].stratumCount);
						document.getElementById("holeDia").innerHTML = undefinedCheck(holeData[0].holeDia);
						document.getElementById("holeBoringMachine").innerHTML = undefinedCheck(holeData[0].holeBoringMachine);
						document.getElementById("holeBoringMethod").innerHTML = undefinedCheck(holeData[0].holeBoringMethod);
						document.getElementById("holeBoringDirection").innerHTML = undefinedCheck(holeData[0].holeBoringDirection);
						document.getElementById("userNm").innerHTML = undefinedCheck(holeData[0].userNm);
						document.getElementById("sysRegDt").innerHTML = undefinedCheck(holeData[0].sysRegDt);
						document.getElementById("holeRemark").innerHTML = undefinedCheck(holeData[0].holeRemark);
					},
					complete : function(data) {
						holeInfoPopupData.center();
						holeInfoPopupData.open();
					}
				});
			}else if(document.mapForm.surSetCode.value != 'undefined'){
				msg = "지표침하판";

				$.ajax({
					url : "/map/instrumentationInfo.do",
					type: "POST",
					data : {
						businessCode : businessCode,
						/*searchType : searchType, 계측정보에서 지표침하판이 아닌 다른 정보를 가져올때 주석해제 할 것*/
						consCode : consCode
					},
					success : function(data){
							$("#instrMainGrid").find("table").prepend("<caption>테이블 요약</caption>");
							resultData = $.parseJSON(data);
					},
					complete : function(data) {
						searchInstrPopupKendoGrid(resultData.dataList1, consCode, businessCode);
						searchInstrPopupSubKendoGrid(resultData.dataList2,consCode, businessCode);
						instrumentationInfoPopupData.center();
						instrumentationInfoPopupData.open();
					}
				});
			}else if(document.mapForm.verIncCode.value != 'undefined'){
				msg = "지중경사계";

				$.ajax({
					url : "/map/verIncInfo.do",
					type: "POST",
					data : {
						businessCode : businessCode,
						/*searchType : searchType, 계측정보에서 지표침하판이 아닌 다른 정보를 가져올때 주석해제 할 것*/
						consCode : consCode
					},
					success : function(data){
						$("#instrMainGrid").find("table").prepend("<caption>테이블 요약</caption>");
						resultData = $.parseJSON(data);

					},
					complete : function(data) {
						searchVerIncPopupKendoGrid(resultData.dataList1, consCode, businessCode);
						searchVerIncPopupSubKendoGrid(resultData.subDataList,consCode, businessCode);
						verIncInfoPopupData.center();
						verIncInfoPopupData.open();
					}
				});
			}else if(document.mapForm.setExtCode.value != 'undefined'){
				msg = "층별침하계";

				$.ajax({
					url : "/map/setExtInfo.do",
					type: "POST",
					data : {
						businessCode : businessCode,
						/*searchType : searchType, 계측정보에서 지표침하판이 아닌 다른 정보를 가져올때 주석해제 할 것*/
						consCode : consCode
					},
					success : function(data){
						$("#instrMainGrid").find("table").prepend("<caption>테이블 요약</caption>");
						resultData = $.parseJSON(data);
					},
					complete : function(data) {
						searchSetExtPopupKendoGrid(resultData.dataList1, consCode, businessCode);
						searchSetExtPopupSubKendoGrid(resultData.subDataList,consCode, businessCode);
						setExtInfoPopupData.center();
						setExtInfoPopupData.open();
					}
				});
			}else if(document.mapForm.watPreCode.value != 'undefined'){
				msg = "간극수압계";

				$.ajax({
					url : "/map/watPreInfo.do",
					type: "POST",
					data : {
						businessCode : businessCode,
						/*searchType : searchType, 계측정보에서 지표침하판이 아닌 다른 정보를 가져올때 주석해제 할 것*/
						consCode : consCode
					},
					success : function(data){
						$("#instrMainGrid").find("table").prepend("<caption>테이블 요약</caption>");
						resultData = $.parseJSON(data);
					},
					complete : function(data) {
						searchWatPrePopupKendoGrid(resultData.dataList1, consCode, businessCode);
						searchWatPrePopupSubKendoGrid(resultData.subDataList,consCode, businessCode);
						watPreInfoPopupData.center();
						watPreInfoPopupData.open();
					}
				});
			}else if(document.mapForm.watLevCode.value != 'undefined'){
				msg = "지하수위계";

				$.ajax({
					url : "/map/watLevInfo.do",
					type: "POST",
					data : {
						businessCode : businessCode,
						/*searchType : searchType, 계측정보에서 지표침하판이 아닌 다른 정보를 가져올때 주석해제 할 것*/
						consCode : consCode
					},
					success : function(data){
						$("#instrMainGrid").find("table").prepend("<caption>테이블 요약</caption>");
						resultData = $.parseJSON(data);
					},
					complete : function(data) {
						searchWatLevPopupKendoGrid(resultData.dataList1, consCode, businessCode);
						searchWatLevPopupSubKendoGrid(resultData.subDataList,consCode, businessCode);
						watLevInfoPopupData.center();
						watLevInfoPopupData.open();
					}
				});
			}else{
				alert("정보를 선택해주세요.");
			}
		}else{
			alert( msg + "을 선택해주세요.");
			return false;
		}
	}else if(searchType == "areaSearch"){
		$("#areaInfoPopupGrid").find("table").prepend("<caption>테이블 요약</caption>");
		resultData = selectFeatures.getArray();
		for(var i =0; i<selectFeatures.getLength(); i++){
			resultArea.push(resultData[i].A);
		}
		dataList = resultArea;
		// 그리드 데이터 로드
		searchAreaPopupKendoGrid(dataList);
		saupInfoPopupData.center();
		saupInfoPopupData.open();

	}else if(searchType == "saupSearch"){
		$.ajax({
			url : "/map/saupHoleInfo.do",
			type: "POST",
			data : {
				businessCode : businessCode,
			},
			success : function(data){
				$("#saupInfoPopupGrid").find("table").prepend("<caption>테이블 요약</caption>");
				resultData = $.parseJSON(data);
			},
			complete : function(data) {

				dataList = resultData.dataList1;
				surSetdataList = resultData.dataList2;
				verIncdataList = resultData.dataList3;
				setExtdataList = resultData.dataList4;
				watPredataList = resultData.dataList5;
				watLevdataList = resultData.dataList6;

				dataList = dataList
				  .concat(surSetdataList)
				  .concat(verIncdataList)
				  .concat(setExtdataList)
				  .concat(watPredataList)
				  .concat(watLevdataList);

				// 그리드 데이터 로드
				searchSaupPopupKendoGrid(dataList);
				saupInfoPopupData.center();
				saupInfoPopupData.open();
			}
		});
	}
}

function undefinedCheck(val) {
	var data = "";
	if(val != undefined) {
		data = val;
	}
	return data
}

function createPopover(){
	coordElement = document.getElementById('olPopup');
	olPopup = new ol.Overlay({
	    element: document.getElementById('olPopup')
	});

	map.addOverlay(olPopup);
}


//-------------------------------------------
//hover 기능
//-------------------------------------------
function hoverMode() {
	createPopover();
	map.on('pointermove', function(evt) {

		if (evt.dragging) {
	        $(coordElement).popover('destroy');
	        return;
	    }

	    var pixel = map.getEventPixel(evt.originalEvent);
	    var hit = map.hasFeatureAtPixel(pixel);
	    // 마커 위로 이동 시 마우스 커서 변경
	    map.getViewport().style.cursor = hit ? 'pointer' : '';

	    if(mapDemSearchOnOff == "on"){
	    	map.forEachLayerAtPixel(evt.pixel, function(layer, pixel) {

	    		if(layer.get('title') == "demLayer"){

	    			const data = demLayer.getData(evt.pixel);
	    			//let height = 0.2126*pixel[0] + 0.7152*pixel[1] + 0.0722*pixel[2];
	    			let r = data[0];
	    		    let g = data[1];
	    		    let b = data[2];

	    		    var hexCode = ConvertRGBtoHex(r,g,b);

	    			let height;
	    			//console.log(" R: " + data[0] + " G : " + data[1] + " B : " + data[2]);
	    			if(hexCode == "#00009b" ){
	    				height = 0;
	    			}else{
	    				height = 0.1126*r + 0.0126*g + 0.0252*b;
	    			}
	    			//var height = ol.ext.getElevationFromPixel(pixel);
	    			document.getElementById("demInfo").innerHTML = height.toFixed(2);

	    		}
	        }),
	        {
	            layerFilter: function(l) {
	                return l===demLayer;
	            }
            };

	    }

	    var hoverFeatureId;
		var hoverFeature = map.forEachFeatureAtPixel(evt.pixel,function( hoverFeature) {
			hoverFeatureId = hoverFeature.getId() == undefined ?  null : hoverFeature.getId();
	        return hoverFeature;
	    });

		if(hoverFeatureId){
			var coordinate = evt.coordinate;
			var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(coordinate, 'EPSG:3857', 'EPSG:4326'))  // toStringHDMS : 반구, 도, 분 및 초를 사용하여 지리 좌표의 형식을 지정
			var businessName = hoverFeature.getProperties().business_name
			if(hoverFeatureId.toLowerCase().includes('hole')){
				var holeName = hoverFeature.getProperties().hole_name;

				$(coordElement).popover('destroy');
				olPopup.setPosition(coordinate);
				$(coordElement).popover({
					'placement': 'top',
					'animation': false,
					'html': true,
					'content': '<p>사업명  : <code>' + businessName + '</code><p><code><br></code><p>시추공명    :   <code>' + holeName +  '</code> '
				})
			}else if(hoverFeatureId.toLowerCase().includes('surset')){
				let zoneCode = hoverFeature.getProperties().zone_code;
				let testName;
				let testCode;
				var consCode;
				if(hoverFeatureId.includes('surset')){
					testName = "지표침하판코드";
					testCode = hoverFeature.getProperties().sur_set_code;
					consCode = hoverFeature.getProperties().cons_code;
				}

				$(coordElement).popover('destroy');
				olPopup.setPosition(coordinate);
				$(coordElement).popover({
					'placement': 'top',
					'animation': false,
					'html': true,
					'content': '<p>사업명  : <code>' + businessName +  '</code><p>구역코드    :   <code>' + zoneCode +  '</code><p>' + testName + '  :   <code>' + testCode +  '</code> '
				})
			}else if(hoverFeatureId.toLowerCase().includes('verinc')){
				let zoneCode = hoverFeature.getProperties().zone_code;
				let testName;
				let testCode;
				var consCode;
				if(hoverFeatureId.includes('verinc')){
					testName = "지중경사계코드";
					testCode = hoverFeature.getProperties().ver_inc_code;
					consCode = hoverFeature.getProperties().cons_code;
				}

				$(coordElement).popover('destroy');
				olPopup.setPosition(coordinate);
				$(coordElement).popover({
					'placement': 'top',
					'animation': false,
					'html': true,
					'content': '<p>사업명  : <code>' + businessName +  '</code><p>구역코드    :   <code>' + zoneCode +  '</code><p>' + testName + '  :   <code>' + testCode +  '</code> '
				})
			}else if(hoverFeatureId.toLowerCase().includes('setext')){
				let zoneCode = hoverFeature.getProperties().zone_code;
				let testName;
				let testCode;
				var consCode;
				if(hoverFeatureId.includes('setext')){
					testName = "층별침하계코드";
					testCode = hoverFeature.getProperties().set_ext_code;
					consCode = hoverFeature.getProperties().cons_code;
				}

				$(coordElement).popover('destroy');
				olPopup.setPosition(coordinate);
				$(coordElement).popover({
					'placement': 'top',
					'animation': false,
					'html': true,
					'content': '<p>사업명  : <code>' + businessName +  '</code><p>구역코드    :   <code>' + zoneCode +  '</code><p>' + testName + '  :   <code>' + testCode +  '</code> '
				})
			}else if(hoverFeatureId.toLowerCase().includes('watpre')){
				let zoneCode = hoverFeature.getProperties().zone_code;
				let testName;
				let testCode;
				var consCode;
				if(hoverFeatureId.includes('watpre')){
					testName = "간극수압계코드";
					testCode = hoverFeature.getProperties().wat_pre_code;
					consCode = hoverFeature.getProperties().cons_code;
				}

				$(coordElement).popover('destroy');
				olPopup.setPosition(coordinate);
				$(coordElement).popover({
					'placement': 'top',
					'animation': false,
					'html': true,
					'content': '<p>사업명  : <code>' + businessName +  '</code><p>구역코드    :   <code>' + zoneCode +  '</code><p>' + testName + '  :   <code>' + testCode +  '</code> '
				})
			}else if(hoverFeatureId.toLowerCase().includes('watlev')){
				let zoneCode = hoverFeature.getProperties().zone_code;
				let testName;
				let testCode;
				var consCode;
				if(hoverFeatureId.includes('watlev')){
					testName = "지하수위계코드";
					testCode = hoverFeature.getProperties().wat_lev_code;
					consCode = hoverFeature.getProperties().cons_code;
				}

				$(coordElement).popover('destroy');
				olPopup.setPosition(coordinate);
				$(coordElement).popover({
					'placement': 'top',
					'animation': false,
					'html': true,
					'content': '<p>사업명  : <code>' + businessName +  '</code><p>구역코드    :   <code>' + zoneCode +  '</code><p>' + testName + '  :   <code>' + testCode +  '</code> '
				})
			}

			$(coordElement).popover('show');
		}else{
			$(coordElement).popover('destroy');
		}
	});
}

//-------------------------------------------
//거리 측정 및 면적 측정 기능 구현
//-------------------------------------------
function drawFn(typeSelect) {
	drawInit();
	if($("#"+typeSelect).hasClass("active")) {
		createHelpTooltip();
		var helpMsg;
		var pointerMoveHandler = function (evt) {
			if (sketch) {
				var geom = (sketch.getGeometry());
				if (geom instanceof ol.geom.Polygon) {
					helpMsg = '더블클릭 시 측정이 종료됩니다.';
				} else if (geom instanceof ol.geom.LineString) {
					helpMsg = '더블클릭 시 측정이 종료됩니다.';
				}
			}else{
				helpMsg = '클릭하여 측정을 시작해 주세요.';
			}

			helpTooltipElement.innerHTML = helpMsg;
			helpTooltip.setPosition(evt.coordinate);

			helpTooltipElement.classList.remove('hidden');
		};

		map.on('pointermove', pointerMoveHandler);

		map.getViewport().addEventListener('mouseout', function() {
			helpTooltipElement.classList.add('hidden');
		});
		createMeasureTooltip();

		draw = new ol.interaction.Draw({
			source: vectorDrawSource,
			type: (typeSelect),
			style: new ol.style.Style({
				fill: new ol.style.Fill({
					color: 'rgba(255, 255, 255, 0.4)',
				}),
				stroke: new ol.style.Stroke({
					color: 'rgba(0, 0, 0, 0.5)',
					lineDash: [10, 10],
					width: 2
				})
			}),
		});
		map.addInteraction(draw);


		var listener;
		draw.on('drawstart', function(evt) {
			// set sketch
			sketch = evt.feature;

			/** @type {import("../src/ol/coordinate.js").Coordinate|undefined} */
			var tooltipCoord = evt.coordinate;

			// listener 버튼 형식으로 변경하기
			listener = sketch.getGeometry().on('change', function(evt) {
				var geom = evt.target;
				var output;
				if (geom instanceof ol.geom.Polygon) {
					output = formatArea(geom);
					tooltipCoord = geom.getInteriorPoint().getCoordinates();
				} else if (geom instanceof ol.geom.LineString) {
					output = formatLength(geom);
					tooltipCoord = geom.getLastCoordinate();
				}
				measureTooltipElement.innerHTML = output;
				measureTooltip.setPosition(tooltipCoord);
			});
		}, this);

		draw.on('drawend', function () {
			measureTooltipElement.className = 'tooltip tooltip-static';
			measureTooltip.setOffset([0, -7]);

			//sketch = null;

			measureTooltipElement = null;

			createMeasureTooltip();
			sketch = null;
			//map.removeOverlay(helpTooltip);
			ol.Observable.unByKey(listener);
		}, this);
	}else{
		//alert("측정모드 종료");
	}
}

//-------------------------------------------
//도움말 툴팁 제공
//-------------------------------------------
function createHelpTooltip() {
	if (helpTooltipElement) {
		helpTooltipElement.parentNode.removeChild(helpTooltipElement);
	}
	helpTooltipElement = document.createElement('div');
	helpTooltipElement.className = 'tooltip hidden';
	helpTooltip = new ol.Overlay({
		element: helpTooltipElement,
		offset: [15, 0],
		positioning: 'center-left',
	});
	map.addOverlay(helpTooltip);
}

//-------------------------------------------
//측정 결과값 툴팁 제공
//-------------------------------------------
function createMeasureTooltip() {
	if (measureTooltipElement) {
		measureTooltipElement.parentNode.removeChild(measureTooltipElement);
	}
	measureTooltipElement = document.createElement('div');
	measureTooltipElement.className = 'tooltip tooltip-measure';
	measureTooltip = new ol.Overlay({
	    element: measureTooltipElement,
	    offset: [0, -15],
	    positioning: 'bottom-center'
	});
	map.addOverlay(measureTooltip);
}

function drawInit(){
	drawLayer.getSource().clear();
	map.removeInteraction(draw);
	map.removeOverlay(helpTooltip);
	map.removeOverlay(measureTooltip);
	$('.tooltip-static').remove();
}

function demBaseLayerInit(){
	demBaseLayer = new ol.layer.Tile ({
	  title: "demBaseLayer",
	  displayInLayerSwitcher: false,
	  minResolution: 0,
	  maxResolution: 197231.79878968254,
	  source: new ol.source.TileWMS({
	    url: 'https://wxs.ign.fr/altimetrie/geoportail/r/wms',
	    projection: 'EPSG:3857',
	    attributions: [ 'Geoservices-IGN' ],
	    crossOrigin: 'anonymous',
	    params: {
	      LAYERS: 'ELEVATION.ELEVATIONGRIDCOVERAGE.SRTM3',
	      FORMAT: 'image/x-bil;bits=32',
	      VERSION: '1.3.0'
	    }
	  }),
	  /*zIndex: 1*/
	});
	map.addLayer(demBaseLayer);

	// Tile load function to convert elevation
	var alti = ol.ext.imageLoader.elevationMap();
	demBaseLayer.getSource().setTileLoadFunction(alti);

	// Hide the layer (but keep it on the map)
	var hide = new ol.filter.CSS({ display: false });
	demBaseLayer.addFilter(hide);

	// Prevent layer smoothing
	demBaseLayer.once('prerender', function(evt) {
		evt.context.imageSmoothingEnabled = false;
		evt.context.webkitImageSmoothingEnabled = false;
		evt.context.mozImageSmoothingEnabled = false;
		evt.context.msImageSmoothingEnabled = false;
	});
}

function ColorToHex(color) {
	var hexadecimal = color.toString(16);
	return hexadecimal.length == 1 ? "0" + hexadecimal : hexadecimal;
}

function ConvertRGBtoHex(red, green, blue) {
	return "#" + ColorToHex(red) + ColorToHex(green) + ColorToHex(blue);
}

//GRID 에 JSON 데이터 조회
function searchGridInit() {
	var form = $("#searchProjForm")[0];
	var formData = new FormData(form);
	var resultData;

	$.ajax({
		url: '/app/proj/projList_jsondata.do',
		type: "POST",
		beforeSend : function(xhr){
			loading("#searchGrid", "true");
		},
		dataType : 'json',
		cache : false,
		contentType : false,
		processData : false,
		traditional: true,
		data  : formData,
		success:function(data){
			// 필독!!! - kendoGrid의 웹접근성 충족하려면 꼭 넣어서 확인
			$("#searchGrid").find("table").prepend("<caption>테이블 요약</caption>");
			loading("#searchGrid","false");
			resultData = data;
		},
		complete: function(data) {
			dataList = resultData.dataList1;
			// 그리드 데이터 로드
			searchKendoGrid(dataList);
		}
	});
}

function searchKendoGrid(dataList) {
	var dataSource = new kendo.data.DataSource ({
		data: dataList,
		autoBind: true,
		schema: {
			model: {
				fields: {
					projectName: { type: "string" },
				}
			},
		},
		pageSize: 10,
	});

	$("#searchGrid").kendoGrid({
		dataSource : dataList,
		columns: [
			{
				field: "projectName", title: "항만명", width: "200px",
				template:  function(dataItem){
					var dataResult = undefinedCheck(dataItem.projectName);
					return "<div class='td-data t-center'>" + dataResult + "</div>";
				}
			},
			{
				field: "projectCode", title: "조회", width: "50px",
				template:  function(dataItem){
					var projectCode = dataItem.projectCode;
					var addButton = "<a href=\"javascript:viewProjInfo('"+projectCode+"')\"><button type='button' class='btn btn-ske-blue btn-icon-single btn-icon-search'></button></a>";

					return "<div class='td-data'>"+addButton+"</div>";
				},
				sortable: false,
			},
		],
		sortable: true,
		resizable: true,
		filterable: false,
		scrollable: true,  // 페이징이 없는 스크롤만 있는 그리드만 사용(사용시 pageable를 false로 지정)
		pageable: {
			pageSizes: false,
			pageSize: 10,
			input: false,
			refresh: false,
			numeric: false,
		},
		noRecords: {
			template: "<div class='no-data'></div>"
		},
		dataBound: onDataBound,
		change: onChange,
	});
}

function searchAreaPopupKendoGrid(dataList) {
	var dataSource = new kendo.data.DataSource ({
		data: dataList,
		autoBind: true,
		schema: {
			model: {
				fields: {
					business_name: { type: "string" },
					hole_name: { type: "string" },
				}
			},
		},
		pageSize: 10,
	});

	$("#saupInfoPopupGrid").kendoGrid({
		dataSource : dataList,
		columns: [
			{
				field: "business_name", title: "사업명", width: "200px",
				template:  function(dataItem){
					var dataResult = dataItem.business_name;
					return "<div class='td-data t-center'>" + dataResult + "</div>";
				}
			},
			{
				field: "hole_name", title: "구분", width: "120px",
				template:  function(dataItem){
					if(dataItem.hole_name != undefined){
						var dataResult = "시추공";
					}else if(dataItem.sur_set_code != undefined){
						var dataResult = "지표침하판";
					}else if(dataItem.ver_inc_code != undefined){
						var dataResult = "지중경사계";
					}else if(dataItem.set_ext_code != undefined){
						var dataResult = "층별침하계";
					}else if(dataItem.wat_pre_code != undefined){
						var dataResult = "간극수압계";
					}else if(dataItem.wat_lev_code != undefined){
						var dataResult = "지하수위계";
					}
					return "<div class='td-data t-center'>" + dataResult + "</div>";
				}
			},
			{
				field: "business_code", title: "상세정보", width: "50px",
				template:  function(dataItem){
					let businessCode = dataItem.business_code;
					let holeCode = dataItem.hole_code;
					var consCode = dataItem.cons_code;
					if(dataItem.hole_name != undefined){
						var addButton = "<a href=\"javascript:viewHoleInfo('"+businessCode+"','"+holeCode+"')\"><button type='button' class='btn btn-ske-blue btn-icon-single btn-icon-search'></button></a>";
					}else if(dataItem.sur_set_code != undefined){
						var addButton = "<a href=\"javascript:viewSurSetInfo('"+businessCode+"','"+consCode+"')\"><button type='button' class='btn btn-ske-blue btn-icon-single btn-icon-write'></button></a>";
					}else if(dataItem.ver_inc_code != undefined){
						var addButton = "<a href=\"javascript:viewVerIncInfo('"+businessCode+"','"+consCode+"')\"><button type='button' class='btn btn-ske-blue btn-icon-single btn-icon-write'></button></a>";
					}else if(dataItem.set_ext_code != undefined){
						var addButton = "<a href=\"javascript:viewSetExtInfo('"+businessCode+"','"+consCode+"')\"><button type='button' class='btn btn-ske-blue btn-icon-single btn-icon-write'></button></a>";
					}else if(dataItem.wat_pre_code != undefined){
						var addButton = "<a href=\"javascript:viewWatPreInfo('"+businessCode+"','"+consCode+"')\"><button type='button' class='btn btn-ske-blue btn-icon-single btn-icon-write'></button></a>";
					}else if(dataItem.wat_lev_code != undefined){
						var addButton = "<a href=\"javascript:viewWatLevInfo('"+businessCode+"','"+consCode+"')\"><button type='button' class='btn btn-ske-blue btn-icon-single btn-icon-write'></button></a>";
					}

					return "<div class='td-data'>"+addButton+"</div>";
				},
				sortable: false,
			},
		],
		sortable: true,
		resizable: true,
		filterable: false,
		scrollable: true,  // 페이징이 없는 스크롤만 있는 그리드만 사용(사용시 pageable를 false로 지정)
		height: "475px",
		pageable: {
			pageSizes: false,
			pageSize: 10,
			input: false,
			refresh: false,
			numeric: false,
		},
		noRecords: {
			template: "<div class='no-data'></div>"
		},
		dataBound: onDataBound,
		change: onChange,
	});
}

//========================================================
//kendoUI Grid 설정
//=========================================================
function onDataBound(e) {
	var grid = $("#"+e.sender.element[0].id).data("kendoGrid");
	var rows = this.items();
	// 순번
	$(rows).each(function () {
		var noIndex = $(this).index() + 1 + (grid.dataSource.pageSize() * (grid.dataSource.page() - 1));
		var rowLabel = $(this).find(".row-number");
		$(rowLabel).html(noIndex);
	});
}

function onChange(e) {
	// 그리드가 change때마다 불러오는 함수
	//console.log("e :", e);
	var grid = e.sender;
	var items = e.sender.items();

	items.each(function(e) {
		var dataItem = grid.dataItem(this);
	});
}

function undefinedCheck(val) {
	var data = "";
	if(val != undefined) {
		data = val;
	}
	return data
}

function displayLoading(target) {
	var element = $(target);
	kendo.ui.progress(element, true);
}

function completeLoading(target) {
	var element = $(target);
	kendo.ui.progress(element, false);
}

function viewProjInfo(code){ //프로젝트 상세정보
	displayLoading(document.body);
	var projInfoPopupData =  $("#projInfo").data("kendoWindow");
	if(typeof(projInfoPopupData) != "undefined"){
		projInfoPopupData.destroy();
	}
	$("#projDetailPopup").empty();
	$("#projDetailPopup").load("/map/mapProjDetailInfo.do?projectCode="+ code, function(){
		completeLoading(document.body);
	});
}

//GRID 에 JSON 데이터 조회
function searchSaupGridInit() {
	var form = $("#searchSaupForm")[0];
	var formData = new FormData(form);
	var resultData;

	$.ajax({
		url: '/app/saup/saupList_jsondata.do',
		type: "POST",
		beforeSend : function(xhr){
			loading("#searchSaupGrid", "true");
		},
		dataType : 'json',
		cache : false,
		contentType : false,
		processData : false,
		traditional: true,
		data  : formData,
		success:function(data){
			// 필독!!! - kendoGrid의 웹접근성 충족하려면 꼭 넣어서 확인
			$("#searchSaupGrid").find("table").prepend("<caption>테이블 요약</caption>");
			loading("#searchSaupGrid","false");
			resultData = data;
		},
		complete: function(data) {
			dataList = resultData.dataList1;
			// 그리드 데이터 로드
			searchSaupKendoGrid(dataList);
		}
	});
}

function searchSaupKendoGrid(dataList) {

	var searchSaupGrid = $("#searchSaupGrid").data("kendoGrid");
	if(searchSaupGrid){
		$("#searchSaupGrid").data("kendoGrid").destroy();
	}

	var dataSource = new kendo.data.DataSource ({
		data: dataList,
		autoBind: true,
		schema: {
			model: {
				fields: {
					businessName: { type: "string" },
				}
			},
		},
		pageSize: 10,
	});

	$("#searchSaupGrid").kendoGrid({
		dataSource : dataList,
		columns: [
			{
				field: "businessName", title: "사업명", width: "200px",
				template:  function(dataItem){
					var dataResult = undefinedCheck(dataItem.businessName);
					return "<div class='td-data t-center'>" + dataResult + "</div>";
				}
			},
			{
				field: "businessCode", title: "위치이동", width: "50px",
				template:  function(dataItem){
					var businessCode = dataItem.businessCode;
					var addButton = "<a href=\"javascript:viewSaupInfo('"+businessCode+"')\"><button type='button' class='btn btn-ske-blue btn-icon-single btn-icon-search'></button></a>";

					return "<div class='td-data'>"+addButton+"</div>";
				},
				sortable: false,
			},
		],
		sortable: true,
		resizable: true,
		filterable: false,
		scrollable: true,  // 페이징이 없는 스크롤만 있는 그리드만 사용(사용시 pageable를 false로 지정)
		pageable: {
			pageSizes: false,
			pageSize: 10,
			input: false,
			refresh: false,
			numeric: false,
		},
		noRecords: {
			template: "<div class='no-data'></div>"
		},
		dataBound: onDataBound,
		change: onChange,
	});
}

function selectComboList(class_name, data, selected_data){

	var form_class = $("#"+class_name).kendoDropDownList({
		dataSource: data,
   		dataTextField: "label",
   		dataValueField: "code",
		animation: false,
		autoBind: true,
		suggest: true,
		optionLabel: "=선택=",
    });

	var dropdownlist = $("#"+class_name).data("kendoDropDownList");
	dropdownlist.select(function(dataItem){
		return dataItem.code === selected_data;
	});
}

function viewHoleInfo(businessCode, holeCode){ //영역검색 상세 정보조회
	$.ajax({
		url : "/map/holeInfo.do",
		type: "POST",
		data : {
			businessCode : businessCode,
			holeCode : holeCode,
		},
		success : function(data){

			resultData = $.parseJSON(data);
			holeData = resultData.dataList1;

			document.getElementById("busCod").innerHTML = undefinedCheck(holeData[0].businessCode);
			document.getElementById("busProcod").innerHTML = undefinedCheck(holeData[0].businessProcessName);
			document.getElementById("holCod").innerHTML = undefinedCheck(holeData[0].holeCode);
			document.getElementById("holNam").innerHTML = undefinedCheck(holeData[0].holeName);
			document.getElementById("holLocsd").innerHTML = undefinedCheck(holeData[0].sdName);
			document.getElementById("holLocsgg").innerHTML = undefinedCheck(holeData[0].sggName);
			document.getElementById("holLocemd").innerHTML = undefinedCheck(holeData[0].emdName);
			document.getElementById("holLocdet").innerHTML = undefinedCheck(holeData[0].businessAddressDetail);
			document.getElementById("holcoordi").innerHTML = "EPSG:" + undefinedCheck(holeData[0].holeCoordinate);
			document.getElementById("holX").innerHTML = undefinedCheck(holeData[0].holeX);
			document.getElementById("holY").innerHTML = undefinedCheck(holeData[0].holeY);
			document.getElementById("holeBoringName").innerHTML = undefinedCheck(holeData[0].holeBoringName);
			document.getElementById("holeProspecterName").innerHTML = undefinedCheck(holeData[0].holeProspecterName);
			document.getElementById("holeStartDate").innerHTML = undefinedCheck(holeData[0].holeStartDate);
			document.getElementById("holeEndDate").innerHTML = undefinedCheck(holeData[0].holeEndDate);
			document.getElementById("holeElevation").innerHTML = undefinedCheck(holeData[0].holeElevation);
			document.getElementById("holeWaterLevel").innerHTML = undefinedCheck(holeData[0].holeWaterLevel);
			document.getElementById("holeDrillingDepth").innerHTML = undefinedCheck(holeData[0].holeDrillingDepth);
			document.getElementById("holeCasingDepth").innerHTML = undefinedCheck(holeData[0].holeCasingDepth);
			document.getElementById("stratumCount").innerHTML = undefinedCheck(holeData[0].stratumCount);
			document.getElementById("holeDia").innerHTML = undefinedCheck(holeData[0].holeDia);
			document.getElementById("holeBoringMachine").innerHTML = undefinedCheck(holeData[0].holeBoringMachine);
			document.getElementById("holeBoringMethod").innerHTML = undefinedCheck(holeData[0].holeBoringMethod);
			document.getElementById("holeBoringDirection").innerHTML = undefinedCheck(holeData[0].holeBoringDirection);
			document.getElementById("userNm").innerHTML = undefinedCheck(holeData[0].userNm);
			document.getElementById("sysRegDt").innerHTML = undefinedCheck(holeData[0].sysRegDt);
			document.getElementById("holeRemark").innerHTML = undefinedCheck(holeData[0].holeRemark);
		},
		complete : function(data) {
			holeInfoPopupData.center();
			holeInfoPopupData.open();
		}
	});
}

function viewSurSetInfo(businessCode, consCode){
	$.ajax({
		url : "/map/instrumentationInfo.do",
		type: "POST",
		data : {
			businessCode : businessCode,
			/*searchType : searchType, 계측정보에서 지표침하판이 아닌 다른 정보를 가져올때 주석해제 할 것*/
			consCode : consCode
		},
		success : function(data){
				$("#instrMainGrid").find("table").prepend("<caption>테이블 요약</caption>");
				resultData = $.parseJSON(data);
		},
		complete : function(data) {
			searchInstrPopupKendoGrid(resultData.dataList1, consCode, businessCode);
			searchInstrPopupSubKendoGrid(resultData.dataList2, consCode, businessCode);
			instrumentationInfoPopupData.center();
			instrumentationInfoPopupData.open();
		}
	});
}

function viewVerIncInfo(businessCode, consCode){
	$.ajax({
		url : "/map/verIncInfo.do",
		type: "POST",
		data : {
			businessCode : businessCode,
			/*searchType : searchType, 계측정보에서 지표침하판이 아닌 다른 정보를 가져올때 주석해제 할 것*/
			consCode : consCode
		},
		success : function(data){
				$("#instrMainGrid").find("table").prepend("<caption>테이블 요약</caption>");
				resultData = $.parseJSON(data);
		},
		complete : function(data) {
			searchVerIncPopupKendoGrid(resultData.dataList1, consCode, businessCode);
			searchVerIncPopupSubKendoGrid(resultData.subDataList,consCode, businessCode);
			verIncInfoPopupData.center();
			verIncInfoPopupData.open();
		}
	});
}

function viewSetExtInfo(businessCode, consCode){
	$.ajax({
		url : "/map/setExtInfo.do",
		type: "POST",
		data : {
			businessCode : businessCode,
			/*searchType : searchType, 계측정보에서 지표침하판이 아닌 다른 정보를 가져올때 주석해제 할 것*/
			consCode : consCode
		},
		success : function(data){
				$("#instrMainGrid").find("table").prepend("<caption>테이블 요약</caption>");
				resultData = $.parseJSON(data);
		},
		complete : function(data) {
			searchSetExtPopupKendoGrid(resultData.dataList1, consCode, businessCode);
			searchSetExtPopupSubKendoGrid(resultData.subDataList,consCode, businessCode);
			setExtInfoPopupData.center();
			setExtInfoPopupData.open();
		}
	});
}

function viewWatPreInfo(businessCode, consCode){
	$.ajax({
		url : "/map/watPreInfo.do",
		type: "POST",
		data : {
			businessCode : businessCode,
			/*searchType : searchType, 계측정보에서 지표침하판이 아닌 다른 정보를 가져올때 주석해제 할 것*/
			consCode : consCode
		},
		success : function(data){
				$("#instrMainGrid").find("table").prepend("<caption>테이블 요약</caption>");
				resultData = $.parseJSON(data);
		},
		complete : function(data) {
			searchWatPrePopupKendoGrid(resultData.dataList1, consCode, businessCode);
			searchWatPrePopupSubKendoGrid(resultData.subDataList,consCode, businessCode);
			watPreInfoPopupData.center();
			watPreInfoPopupData.open();
		}
	});
}

function viewWatLevInfo(businessCode, consCode){
	$.ajax({
		url : "/map/watLevInfo.do",
		type: "POST",
		data : {
			businessCode : businessCode,
			/*searchType : searchType, 계측정보에서 지표침하판이 아닌 다른 정보를 가져올때 주석해제 할 것*/
			consCode : consCode
		},
		success : function(data){
				$("#instrMainGrid").find("table").prepend("<caption>테이블 요약</caption>");
				resultData = $.parseJSON(data);
		},
		complete : function(data) {
			searchWatLevPopupKendoGrid(resultData.dataList1, consCode, businessCode);
			searchWatLevPopupSubKendoGrid(resultData.subDataList,consCode, businessCode);
			watLevInfoPopupData.center();
			watLevInfoPopupData.open();
		}
	});
}


function viewSaupInfo(code){ //사업상세정보
	//초기화
	map.removeLayer(selectedSaup);
	$.ajax({
		url: '/map/mapSaupHolelist.do',
		type: "POST",
		data : {
			businessCode : code
		},
		success:function(data){
			resultData = $.parseJSON(data);
			holeResultData = resultData.dataList1;
			surSetResultData = resultData.dataList2;
			verIncResultData = resultData.dataList3;
			setExtResultData = resultData.dataList4;
			watPreResultData = resultData.dataList5;
			watLevResultData = resultData.dataList6;

			var format = new ol.format.WKT();
			var features = [];

			for(var i=0; i < holeResultData.length; i++) {
				var row = holeResultData[i];
			    var feature = format.readFeature(row.holePoint);
			    feature.getGeometry().transform('EPSG:4326', 'EPSG:3857');

		    feature.setId('selected_hole_' + row.businessCode + '_' + row.holeCode);
		    feature.setProperties({'businessCode': row.businessCode});
		    feature.setProperties({'business_name': row.businessName});
		    feature.setProperties({'holeCode': row.holeCode});
		    feature.setProperties({'hole_name': row.holeName});
				features.push(feature);
			}

			for(var i=0; i < surSetResultData.length; i++) {
				var row = surSetResultData[i];
			    var feature = format.readFeature(row.sursetPoint);
			    feature.getGeometry().transform('EPSG:4326', 'EPSG:3857');

		    feature.setId('selected_hole_' + row.businessCode + '_' + row.zoneCode);
		    feature.setProperties({'businessCode': row.businessCode});
		    feature.setProperties({'business_name': row.businessName});
		    feature.setProperties({'zone_code': row.zoneCode});
		    feature.setProperties({'sur_set_code': row.surSetCode});
				features.push(feature);
			}


			var selectedVector = new ol.source.Vector({
				features: features //add an array of features
			});

			selectedSaup = new ol.layer.Vector({
				source: selectedVector,
				style: [
					new ol.style.Style({
						image: new ol.style.Circle({
							fill: new ol.style.Fill({ color: "#ffcc33" }),
							stroke: new ol.style.Stroke({
								color: 'rgba(255, 255, 255, 0.7)',
								width: 2,
							}),
							radius: 7
						})
					}),
					new ol.style.Style({
						image: new ol.style.Icon({
							src: '../com/img/map-service/icon/icon_map_check.png',
							opacity: 0.5,
							src: "data:image/svg+xml;utf8," + svg,
							scale: 0.5
						}),
					})
					]
			})
			map.addLayer(selectedSaup);

			var dataExtent = selectedVector.getExtent();
			map.getView().fit(dataExtent, map.getSize());
			map.getView().setZoom(map.getView().getZoom()-1);

			document.mapForm.searchType.value = 'saupSearch';
			document.mapForm.businessCode.value = code;
		},
		complete: function(data) {
			dataList = resultData.dataList1;
		}
	});
}

function searchSaupPopupKendoGrid(dataList) {

	var saupInfoPopupGrid = $("#saupInfoPopupGrid").data("kendoGrid");
	if(saupInfoPopupGrid){
		$("#saupInfoPopupGrid").data("kendoGrid").destroy();
	}

	var dataSource = new kendo.data.DataSource ({
		data: dataList,
		autoBind: true,
		schema: {
			model: {
				fields: {
					businessName: { type: "string" },
					holeName: { type: "string" },
				}
			},
		},
		pageSize: 10,
	});

	$("#saupInfoPopupGrid").kendoGrid({
		dataSource : dataList,
		columns: [
			{
				field: "businessName", title: "사업명", width: "200px",
				template:  function(dataItem){
					var dataResult = undefinedCheck(dataItem.businessName);
					return "<div class='td-data t-center'>" + dataResult + "</div>";
				}
			},
			{
				field: "holeName", title: "구분", width: "120px",
				template:  function(dataItem){
					if(dataItem.holeName != undefined){
						var dataResult = "시추공";
					}else if(dataItem.surSetCode != undefined){
						var dataResult = "지표침하판";
					}else if(dataItem.verIncCode != undefined){
						var dataResult = "지중경사계";
					}else if(dataItem.setExtCode != undefined){
						var dataResult = "층별침하계";
					}else if(dataItem.watPreCode != undefined){
						var dataResult = "간극수압계";
					}else if(dataItem.watLevCode != undefined){
						var dataResult = "지하수위계";
					}
					return "<div class='td-data t-center'>" + dataResult + "</div>";
				}
			},
			{
				field: "businessCode", title: "상세정보", width: "50px",
				template:  function(dataItem){
					let businessCode = dataItem.businessCode;
					let holeCode = dataItem.holeCode;
					var consCode = dataItem.consCode;
					if(dataItem.holeName != undefined){
						var addButton = "<a href=\"javascript:viewHoleInfo('"+businessCode+"','"+holeCode+"')\"><button type='button' class='btn btn-ske-blue btn-icon-single btn-icon-search'></button></a>";
					}else if(dataItem.surSetCode != undefined){
						var addButton = "<a href=\"javascript:viewSurSetInfo('"+businessCode+"','"+consCode+"')\"><button type='button' class='btn btn-ske-blue btn-icon-single btn-icon-write'></button></a>";
					}else if(dataItem.verIncCode != undefined){
						var addButton = "<a href=\"javascript:viewVerIncInfo('"+businessCode+"','"+consCode+"')\"><button type='button' class='btn btn-ske-blue btn-icon-single btn-icon-write'></button></a>";
					}else if(dataItem.setExtCode != undefined){
						var addButton = "<a href=\"javascript:viewSetExtInfo('"+businessCode+"','"+consCode+"')\"><button type='button' class='btn btn-ske-blue btn-icon-single btn-icon-write'></button></a>";
					}else if(dataItem.watPreCode != undefined){
						var addButton = "<a href=\"javascript:viewWatPreInfo('"+businessCode+"','"+consCode+"')\"><button type='button' class='btn btn-ske-blue btn-icon-single btn-icon-write'></button></a>";
					}else if(dataItem.watLevCode != undefined){
						var addButton = "<a href=\"javascript:viewWatLevInfo('"+businessCode+"','"+consCode+"')\"><button type='button' class='btn btn-ske-blue btn-icon-single btn-icon-write'></button></a>";
					}
					return "<div class='td-data'>"+addButton+"</div>";
				},
				sortable: false,
			},
		],
		sortable: true,
		resizable: true,
		filterable: false,
		scrollable: true,  // 페이징이 없는 스크롤만 있는 그리드만 사용(사용시 pageable를 false로 지정)
		height: "600px",
		pageable: {
			pageSizes: false,
			pageSize: 10,
			input: false,
			refresh: false,
			numeric: false,
		},
		noRecords: {
			template: "<div class='no-data'></div>"
		},
		dataBound: onDataBound,
		change: onChange,
	});
}

function searchInstrPopupKendoGrid(dataList, searchType, businessCode, consCode) {
	$("#instrSubGrid").empty().append("<table></table>");
		var dataSource = new kendo.data.DataSource ({
			data: dataList,
			autoBind: true,
			schema: {
				model: {
					fields: {
						zoneCode: { type: "string" },
						surSetCode: { type: "string" },
						epsgCodeType: { type: "string" },
						pointX: { type: "string" },
						pointY: { type: "string" },
					}
				},
			},
			pageSize: 10,
		});

		$("#instrMainGrid").kendoGrid({
			dataSource : dataList,
			columns: [
				{
					field: "zoneCode", title: "구역코드", width: "200px",
					template:  function(dataItem){
						var dataResult = undefinedCheck(dataItem.zoneCode);
						return "<div class='td-data t-center'>" + dataResult + "</div>";
					}
				},
				{
					field: "surSetCode", title: "지표침하판코드", width: "120px",
					template:  function(dataItem){
						var dataResult = undefinedCheck(dataItem.surSetCode);
						return "<div class='td-data t-center'>" + dataResult + "</div>";
					}
				},
				{
					field: "epsgCodeType", title: "좌표계", width: "120px",
					template:  function(dataItem){
						var dataResult = undefinedCheck(dataItem.epsgCodeType);
						return "<div class='td-data t-center'> EPSG:" + dataResult + "</div>";
					}
				},
				{
					field: "pointX", title: "계측 좌표 X", width: "120px",
					template:  function(dataItem){
						var dataResult = undefinedCheck(dataItem.pointX);
						return "<div class='td-data t-center'>" + dataResult + "</div>";
					}
				},
				{
					field: "pointY", title: "계측 좌표 Y", width: "120px",
					template:  function(dataItem){
						var dataResult = undefinedCheck(dataItem.pointY);
						return "<div class='td-data t-center'>" + dataResult + "</div>";
					}
				},
				{	title: "계측조회",
					width: "75px",
					template: function(dataItem) {
						var consCode = dataItem.consCode;
						var addButton = "<a href=\"javascript:instrumentationInfo('"+consCode+"','"+businessCode+"')\"><button type='button' class='btn btn-ske-blue btn-icon-single btn-icon-write'></button></a>";

						return "<div class='td-data'>"+addButton+"</div>";
					}
				},
				{	title: "예측조회",
					width: "75px",
					template: function(dataItem) {
						var consCode = dataItem.consCode;
						var addButton = "<a href=\"javascript:predictionInfo('"+consCode+"','"+businessCode+"')\"><button type='button' class='btn btn-ske-blue btn-icon-single btn-icon-write'></button></a>";

						return "<div class='td-data'>"+addButton+"</div>";
					}
				},
				],
				sortable: true,
				resizable: true,
				filterable: false,
				scrollable: false,  // 페이징이 없는 스크롤만 있는 그리드만 사용(사용시 pageable를 false로 지정)
				pageable: {
					pageSizes: false,
					pageSize: 10,
					input: false,
					refresh: false,
					numeric: false,
					buttonCount: 0,
				},
				noRecords: {
					template: "<div class='no-data'></div>"
				},
				dataBound: onDataBound,
				change: onChange,
		});
}

function searchInstrPopupSubKendoGrid(dataList, searchType) {
	var dataSource = new kendo.data.DataSource ({
		data: dataList,
		autoBind: true,
		schema: {
			model: {
				fields: {
					measureDt: {type: "date"},
					nod: {type: "number"},
					nodPer: {type: "number"},
					measuringRod: {type: "number"},
					subByPeriod: {type: "number"},
					subByPeriodForCm: {type: "number"},
					amountCumSub: {type: "number"},
					groundHeight: {type: "number"},
					groundHeightForCm: {type: "number"},
					fillHeight: {type: "number"},
					fillHeightForCm: {type: "number"},
					realFillHeight: {type: "number"},
					realFillHeightForCm : {type: "number"},
					connSetRod: {type: "number"},
				}
			},
		},
		pageSize: 10,
	});

	$("#instrSubGrid").kendoGrid({
		dataSource : dataList,
		columns: [
			{
				field: "measureDt",
				title: "측정일자",
				editor: dateEditor,
				width: "33%",
				attributes: { style:"text-align: right" },
				template: "<div class='td-data'>#= (measureDt == null) ? '0' : kendo.toString(measureDt, 'yyyy-MM-dd') #</div>",
			},
			{
				field: "nod",
				title: "경과일수(일)",
				editor: chooseEditor,
				width: "25%",
				attributes: { style:"text-align: right" },
				template: "<div class='td-data'>#= (nod == null) ? '0' : nod #</div>",
			},
			{
				field: "nodPer",
				title: "기간일수(일)",
				editor: chooseEditor,
				width: "25%",
				attributes: { style:"text-align: right" },
				template: "<div class='td-data'>#= (nodPer == null) ? '0' : nodPer #</div>",
			},
			{
				field: "measuringRod",
				title: "측정봉Top(DL.m)(+)",
				editor: chooseEditor,
				width: "33%",
				attributes: { style:"text-align: right" },
				template: "<div class='td-data'>#= (measuringRod == null) ? '0' : measuringRod #</div>",
			},
			{
				field: "subByPeriodForCm",
				title: "기간별침하량(cm)(+,-)",
				editor: chooseEditor,
				width: "33%",
				attributes: { style:"text-align: right" },
				template: "<div class='td-data'>#= (subByPeriodForCm == null) ? '0' : subByPeriodForCm #</div>",
			},
			{
				field: "amountCumSub",
				title: "누적침하량(cm)(-)",
				editor: chooseEditor,
				width: "33%",
				attributes: { style:"text-align: right" },
				template: "<div class='td-data'>#= (amountCumSub == null) ? '0' : kendo.toString(amountCumSub, 'n2') #</div>",
			},
			{
				field: "groundHeightForCm",
				title: "지반고(DL.cm)(+)",
				editor: chooseEditor,
				width: "33%",
				attributes: { style:"text-align: right" },
				template: "<div class='td-data'>#= (groundHeightForCm == null) ? '0' : groundHeightForCm #</div>",
			},
			{
				field: "fillHeightForCm",
				title: "성토고(cm)(+)",
				editor: chooseEditor,
				width: "33%",
				attributes: { style:"text-align: right" },
				template: "<div class='td-data'>#= (fillHeightForCm == null) ? '0' : fillHeightForCm #</div>",
			},
			{
				field: "realFillHeightForCm",
				title: "실제성토고(DL.cm)(+)",
				editor: chooseEditor,
				width: "33%",
				attributes: { style:"text-align: right" },
				template: "<div class='td-data'>#= (realFillHeightForCm == null) ? '0' : realFillHeightForCm #</div>",
			},
			{
				field: "connSetRod",
				title: "침하봉연결(m)(+)",
				editor: chooseEditor,
				width: "33%",
				attributes: { style:"text-align: right" },
				template: "<div class='td-data'>#= (connSetRod == null) ? '0' : connSetRod #</div>",
			},
		],
		sortable: true,
		resizable: true,
		filterable: false,
		scrollable: true,  // 페이징이 없는 스크롤만 있는 그리드만 사용(사용시 pageable를 false로 지정)
		height: "475px",
		pageable: {
			pageSizes: false,
			pageSize: 10,
			input: true,
			refresh: false,
			numeric: false,
		},
		noRecords: {
			template: "<div class='no-data'></div>"
		},
		dataBound: onDataBound,
		change: onChange,
	});
}

function searchVerIncPopupKendoGrid(dataList, searchType, businessCode, consCode) {

	$("#verIncSubGrid").empty().append("<table></table>");
		var dataSource = new kendo.data.DataSource ({
			data: dataList,
			autoBind: true,
			schema: {
				model: {
					fields: {
						zoneCode: { type: "string" },
						verIncCode: { type: "string" },
						epsgCodeType: { type: "string" },
						pointX: { type: "string" },
						pointY: { type: "string" },
					}
				},
			},
			pageSize: 10,
		});

		$("#verIncMainGrid").kendoGrid({
			dataSource : dataList,
			columns: [
				{
					field: "zoneCode", title: "구역코드", width: "200px",
					template:  function(dataItem){
						var dataResult = undefinedCheck(dataItem.zoneCode);
						return "<div class='td-data t-center'>" + dataResult + "</div>";
					}
				},
				{
					field: "verIncCode", title: "지중경사계코드", width: "120px",
					template:  function(dataItem){
						var dataResult = undefinedCheck(dataItem.verIncCode);
						return "<div class='td-data t-center'>" + dataResult + "</div>";
					}
				},
				{
					field: "epsgCodeType", title: "좌표계", width: "120px",
					template:  function(dataItem){
						var dataResult = undefinedCheck(dataItem.epsgCodeType);
						return "<div class='td-data t-center'> EPSG:" + dataResult + "</div>";
					}
				},
				{
					field: "pointX", title: "계측 좌표 X", width: "120px",
					template:  function(dataItem){
						var dataResult = undefinedCheck(dataItem.pointX);
						return "<div class='td-data t-center'>" + dataResult + "</div>";
					}
				},
				{
					field: "pointY", title: "계측 좌표 Y", width: "120px",
					template:  function(dataItem){
						var dataResult = undefinedCheck(dataItem.pointY);
						return "<div class='td-data t-center'>" + dataResult + "</div>";
					}
				},
				],
				sortable: true,
				resizable: true,
				filterable: false,
				scrollable: false,  // 페이징이 없는 스크롤만 있는 그리드만 사용(사용시 pageable를 false로 지정)
				pageable: {
					pageSizes: false,
					pageSize: 10,
					input: false,
					refresh: false,
					numeric: false,
					buttonCount: 0,
				},
				noRecords: {
					template: "<div class='no-data'></div>"
				},
				dataBound: onDataBound,
				change: onChange,
		});
}

function searchVerIncPopupSubKendoGrid(dataList, searchType) {
	var dataSource = new kendo.data.DataSource ({
		data: dataList,
		autoBind: true,
		schema: {
			model: {
				fields: {
					measureDt: {type: "date"},
					depth: {type: "number"},
					horizonScale: {type: "number"},
				}
			},
		},
		pageSize: 10,
	});

	$("#verIncSubGrid").kendoGrid({
		dataSource : dataList,
		columns: [
			{
				field: "measureDt",
				title: "측정일자",
				editor: dateEditor,
				width: "33%",
				attributes: { style:"text-align: right" },
				template: "<div class='td-data'>#= (measureDt == null) ? '0' : kendo.toString(measureDt, 'yyyy-MM-dd') #</div>",
			},
			{
				field: "depth",
				title: "심도(DL.m)",
				editor: chooseEditor,
				width: "25%",
				attributes: { style:"text-align: right" },
				template: "<div class='td-data'>#= (depth == null) ? '0' : depth #</div>",
			},
			{
				field: "horizonScale",
				title: "수평변위(mm)",
				editor: chooseEditor,
				width: "25%",
				attributes: { style:"text-align: right" },
				template: "<div class='td-data'>#= (horizonScale == null) ? '0' : horizonScale #</div>",
			},
		],
		sortable: true,
		resizable: true,
		filterable: false,
		scrollable: true,  // 페이징이 없는 스크롤만 있는 그리드만 사용(사용시 pageable를 false로 지정)
		height: "475px",
		pageable: {
			pageSizes: false,
			pageSize: 10,
			input: true,
			refresh: false,
			numeric: false,
		},
		noRecords: {
			template: "<div class='no-data'></div>"
		},
		dataBound: onDataBound,
		change: onChange,
	});
}

function searchSetExtPopupKendoGrid(dataList, searchType, businessCode, consCode) {

	$("#setExtSubGrid").empty().append("<table></table>");
		var dataSource = new kendo.data.DataSource ({
			data: dataList,
			autoBind: true,
			schema: {
				model: {
					fields: {
						zoneCode: { type: "string" },
						setExtCode: { type: "string" },
						epsgCodeType: { type: "string" },
						pointX: { type: "string" },
						pointY: { type: "string" },
					}
				},
			},
			pageSize: 10,
		});

		$("#setExtMainGrid").kendoGrid({
			dataSource : dataList,
			columns: [
				{
					field: "zoneCode", title: "구역코드", width: "200px",
					template:  function(dataItem){
						var dataResult = undefinedCheck(dataItem.zoneCode);
						return "<div class='td-data t-center'>" + dataResult + "</div>";
					}
				},
				{
					field: "setExtCode", title: "층별침하계코드", width: "120px",
					template:  function(dataItem){
						var dataResult = undefinedCheck(dataItem.setExtCode);
						return "<div class='td-data t-center'>" + dataResult + "</div>";
					}
				},
				{
					field: "epsgCodeType", title: "좌표계", width: "120px",
					template:  function(dataItem){
						var dataResult = undefinedCheck(dataItem.epsgCodeType);
						return "<div class='td-data t-center'> EPSG:" + dataResult + "</div>";
					}
				},
				{
					field: "pointX", title: "계측 좌표 X", width: "120px",
					template:  function(dataItem){
						var dataResult = undefinedCheck(dataItem.pointX);
						return "<div class='td-data t-center'>" + dataResult + "</div>";
					}
				},
				{
					field: "pointY", title: "계측 좌표 Y", width: "120px",
					template:  function(dataItem){
						var dataResult = undefinedCheck(dataItem.pointY);
						return "<div class='td-data t-center'>" + dataResult + "</div>";
					}
				},
				],
				sortable: true,
				resizable: true,
				filterable: false,
				scrollable: false,  // 페이징이 없는 스크롤만 있는 그리드만 사용(사용시 pageable를 false로 지정)
				pageable: {
					pageSizes: false,
					pageSize: 10,
					input: false,
					refresh: false,
					numeric: false,
					buttonCount: 0,
				},
				noRecords: {
					template: "<div class='no-data'></div>"
				},
				dataBound: onDataBound,
				change: onChange,
		});
}

function searchSetExtPopupSubKendoGrid(dataList, searchType) {
	var dataSource = new kendo.data.DataSource ({
		data: dataList,
		autoBind: true,
		schema: {
			model: {
				fields: {
					nod: {type: "number"},
					depthByLayer: {type: "number"},
					displacement: {type: "number"},
					fillHeight: {type: "number"},
				}
			},
		},
		pageSize: 10,
	});

	$("#setExtSubGrid").kendoGrid({
		dataSource : dataList,
		columns: [
			{
				field: "nod",
				title: "경과일수(일)",
				editor: dateEditor,
				width: "33%",
				attributes: { style:"text-align: right" },
				template: "<div class='td-data'>#= (nod == null) ? '' :nod #</div>",
			},
			{
				field: "depthByLayer",
				title: "층별깊이(DL(-).m)",
				editor: chooseEditor,
				width: "25%",
				attributes: { style:"text-align: right" },
				template: "<div class='td-data'>#= (depthByLayer == null) ? '' : depthByLayer #</div>",
			},
			{
				field: "displacement",
				title: "변위량(m)",
				editor: chooseEditor,
				width: "25%",
				attributes: { style:"text-align: right" },
				template: "<div class='td-data'>#= (displacement == null) ? '' : displacement #</div>",
			},
			{
				field: "fillHeight",
				title: "성토고(DL.m)",
				editor: chooseEditor,
				width: "25%",
				attributes: { style:"text-align: right" },
				template: "<div class='td-data'>#= (fillHeight == null) ? '' : fillHeight #</div>",
			},
		],
		sortable: true,
		resizable: true,
		filterable: false,
		scrollable: true,  // 페이징이 없는 스크롤만 있는 그리드만 사용(사용시 pageable를 false로 지정)
		height: "475px",
		pageable: {
			pageSizes: false,
			pageSize: 10,
			input: true,
			refresh: false,
			numeric: false,
		},
		noRecords: {
			template: "<div class='no-data'></div>"
		},
		dataBound: onDataBound,
		change: onChange,
	});
}

function searchWatPrePopupKendoGrid(dataList, searchType, businessCode, consCode) {

	$("#watPreSubGrid").empty().append("<table></table>");
		var dataSource = new kendo.data.DataSource ({
			data: dataList,
			autoBind: true,
			schema: {
				model: {
					fields: {
						zoneCode: { type: "string" },
						watPreCode: { type: "string" },
						epsgCodeType: { type: "string" },
						pointX: { type: "string" },
						pointY: { type: "string" },
					}
				},
			},
			pageSize: 10,
		});

		$("#watPreMainGrid").kendoGrid({
			dataSource : dataList,
			columns: [
				{
					field: "zoneCode", title: "구역코드", width: "200px",
					template:  function(dataItem){
						var dataResult = undefinedCheck(dataItem.zoneCode);
						return "<div class='td-data t-center'>" + dataResult + "</div>";
					}
				},
				{
					field: "watPreCode", title: "간극수압계코드", width: "120px",
					template:  function(dataItem){
						var dataResult = undefinedCheck(dataItem.watPreCode);
						return "<div class='td-data t-center'>" + dataResult + "</div>";
					}
				},
				{
					field: "epsgCodeType", title: "좌표계", width: "120px",
					template:  function(dataItem){
						var dataResult = undefinedCheck(dataItem.epsgCodeType);
						return "<div class='td-data t-center'> EPSG:" + dataResult + "</div>";
					}
				},
				{
					field: "pointX", title: "계측 좌표 X", width: "120px",
					template:  function(dataItem){
						var dataResult = undefinedCheck(dataItem.pointX);
						return "<div class='td-data t-center'>" + dataResult + "</div>";
					}
				},
				{
					field: "pointY", title: "계측 좌표 Y", width: "120px",
					template:  function(dataItem){
						var dataResult = undefinedCheck(dataItem.pointY);
						return "<div class='td-data t-center'>" + dataResult + "</div>";
					}
				},
				],
				sortable: true,
				resizable: true,
				filterable: false,
				scrollable: false,  // 페이징이 없는 스크롤만 있는 그리드만 사용(사용시 pageable를 false로 지정)
				pageable: {
					pageSizes: false,
					pageSize: 10,
					input: false,
					refresh: false,
					numeric: false,
					buttonCount: 0,
				},
				noRecords: {
					template: "<div class='no-data'></div>"
				},
				dataBound: onDataBound,
				change: onChange,
		});
}

function searchWatPrePopupSubKendoGrid(dataList, searchType) {
	var dataSource = new kendo.data.DataSource ({
		data: dataList,
		autoBind: true,
		schema: {
			model: {
				fields: {
					nod: {type: "number"},
					sensorInstallDepth: {type: "number"},
					temperature: {type: "number"},
					watPre: {type: "number"},
					overWatPre: {type: "number"},
					hydPre: {type: "number"},
					watPreSen: {type: "number"},
					subsidence: {type: "number"},
				}
			},
		},
		pageSize: 10,
	});

	$("#watPreSubGrid").kendoGrid({
		dataSource : dataList,
		columns: [
			{
				field: "nod",
				title: "경과일수(일)",
				editor: dateEditor,
				width: "33%",
				attributes: { style:"text-align: right" },
				template: "<div class='td-data'>#= (nod == null) ? '' :nod #</div>",
			},
			{
				field: "sensorInstallDepth",
				title: "센서설치심도",
				editor: chooseEditor,
				width: "25%",
				attributes: { style:"text-align: right" },
				template: "<div class='td-data'>#= (sensorInstallDepth == null) ? '' : sensorInstallDepth #</div>",
			},
			{
				field: "temperature",
				title: "온도(℃)",
				editor: chooseEditor,
				width: "25%",
				attributes: { style:"text-align: right" },
				template: "<div class='td-data'>#= (temperature == null) ? '' : temperature #</div>",
			},
			{
				field: "watPre",
				title: "간극수압(tf/㎡)",
				editor: chooseEditor,
				width: "25%",
				attributes: { style:"text-align: right" },
				template: "<div class='td-data'>#= (watPre == null) ? '' : watPre #</div>",
			},
			{
				field: "overWatPre",
				title: "과잉간극수압(tf/㎡)",
				editor: chooseEditor,
				width: "25%",
				attributes: { style:"text-align: right" },
				template: "<div class='td-data'>#= (overWatPre == null) ? '' : overWatPre #</div>",
			},
			{
				field: "hydPre",
				title: "정수압(tf/㎡)",
				editor: chooseEditor,
				width: "25%",
				attributes: { style:"text-align: right" },
				template: "<div class='td-data'>#= (hydPre == null) ? '' : hydPre #</div>",
			},
			{
				field: "watPreSen",
				title: "간극수압계센서(DL.m)",
				editor: chooseEditor,
				width: "25%",
				attributes: { style:"text-align: right" },
				template: "<div class='td-data'>#= (watPreSen == null) ? '' : watPreSen #</div>",
			},
			{
				field: "subsidence",
				title: "침하량(m)",
				editor: chooseEditor,
				width: "25%",
				attributes: { style:"text-align: right" },
				template: "<div class='td-data'>#= (subsidence == null) ? '' : subsidence #</div>",
			},
		],
		sortable: true,
		resizable: true,
		filterable: false,
		scrollable: true,  // 페이징이 없는 스크롤만 있는 그리드만 사용(사용시 pageable를 false로 지정)
		height: "475px",
		pageable: {
			pageSizes: false,
			pageSize: 10,
			input: true,
			refresh: false,
			numeric: false,
		},
		noRecords: {
			template: "<div class='no-data'></div>"
		},
		dataBound: onDataBound,
		change: onChange,
	});
}

function searchWatLevPopupKendoGrid(dataList, searchType, businessCode, consCode) {

	$("#watLevSubGrid").empty().append("<table></table>");
		var dataSource = new kendo.data.DataSource ({
			data: dataList,
			autoBind: true,
			schema: {
				model: {
					fields: {
						zoneCode: { type: "string" },
						watLevCode: { type: "string" },
						epsgCodeType: { type: "string" },
						pointX: { type: "string" },
						pointY: { type: "string" },
					}
				},
			},
			pageSize: 10,
		});

		$("#watLevMainGrid").kendoGrid({
			dataSource : dataList,
			columns: [
				{
					field: "zoneCode", title: "구역코드", width: "200px",
					template:  function(dataItem){
						var dataResult = undefinedCheck(dataItem.zoneCode);
						return "<div class='td-data t-center'>" + dataResult + "</div>";
					}
				},
				{
					field: "watLevCode", title: "지하수위계코드", width: "120px",
					template:  function(dataItem){
						var dataResult = undefinedCheck(dataItem.watLevCode);
						return "<div class='td-data t-center'>" + dataResult + "</div>";
					}
				},
				{
					field: "epsgCodeType", title: "좌표계", width: "120px",
					template:  function(dataItem){
						var dataResult = undefinedCheck(dataItem.epsgCodeType);
						return "<div class='td-data t-center'> EPSG:" + dataResult + "</div>";
					}
				},
				{
					field: "pointX", title: "계측 좌표 X", width: "120px",
					template:  function(dataItem){
						var dataResult = undefinedCheck(dataItem.pointX);
						return "<div class='td-data t-center'>" + dataResult + "</div>";
					}
				},
				{
					field: "pointY", title: "계측 좌표 Y", width: "120px",
					template:  function(dataItem){
						var dataResult = undefinedCheck(dataItem.pointY);
						return "<div class='td-data t-center'>" + dataResult + "</div>";
					}
				},
				],
				sortable: true,
				resizable: true,
				filterable: false,
				scrollable: false,  // 페이징이 없는 스크롤만 있는 그리드만 사용(사용시 pageable를 false로 지정)
				pageable: {
					pageSizes: false,
					pageSize: 10,
					input: false,
					refresh: false,
					numeric: false,
					buttonCount: 0,
				},
				noRecords: {
					template: "<div class='no-data'></div>"
				},
				dataBound: onDataBound,
				change: onChange,
		});
}

function searchWatLevPopupSubKendoGrid(dataList, searchType) {
	var dataSource = new kendo.data.DataSource ({
		data: dataList,
		autoBind: true,
		schema: {
			model: {
				fields: {
					measureDt: {type: "date"},
					nod: {type: "number"},
					measurement: {type: "number"},
					watLev: {type: "number"},
					topHeight: {type: "number"},
					fillHeight: {type: "number"}
				}
			},
		},
		pageSize: 10,
	});

	$("#watLevSubGrid").kendoGrid({
		dataSource : dataList,
		columns: [
			{
				field: "measureDt",
				title: "측정일자",
				editor: dateEditor,
				width: "33%",
				attributes: { style:"text-align: right" },
				template: "<div class='td-data'>#= (measureDt == null) ? '0' : kendo.toString(measureDt, 'yyyy-MM-dd') #</div>",
			},
			{
				field: "nod",
				title: "경과일수(일)",
				editor: dateEditor,
				width: "33%",
				attributes: { style:"text-align: right" },
				template: "<div class='td-data'>#= (nod == null) ? '' :nod #</div>",
			},
			{
				field: "measurement",
				title: "측정치(DL.m)",
				editor: chooseEditor,
				width: "25%",
				attributes: { style:"text-align: right" },
				template: "<div class='td-data'>#= (measurement == null) ? '' : measurement #</div>",
			},
			{
				field: "watLev",
				title: "지하수위(DL.m)",
				editor: chooseEditor,
				width: "25%",
				attributes: { style:"text-align: right" },
				template: "<div class='td-data'>#= (watLev == null) ? '' : watLev #</div>",
			},
			{
				field: "topHeight",
				title: "상단고(DL.m)",
				editor: chooseEditor,
				width: "25%",
				attributes: { style:"text-align: right" },
				template: "<div class='td-data'>#= (topHeight == null) ? '' : topHeight #</div>",
			},
			{
				field: "fillHeight",
				title: "성토고(DL.m)",
				editor: chooseEditor,
				width: "25%",
				attributes: { style:"text-align: right" },
				template: "<div class='td-data'>#= (fillHeight == null) ? '' : fillHeight #</div>",
			},
		],
		sortable: true,
		resizable: true,
		filterable: false,
		scrollable: true,  // 페이징이 없는 스크롤만 있는 그리드만 사용(사용시 pageable를 false로 지정)
		height: "475px",
		pageable: {
			pageSizes: false,
			pageSize: 10,
			input: true,
			refresh: false,
			numeric: false,
		},
		noRecords: {
			template: "<div class='no-data'></div>"
		},
		dataBound: onDataBound,
		change: onChange,
	});
}

function clearOldData(dataObject) {
	  // 이전 데이터 초기화 로직...

	  // 전달받은 데이터 객체의 필드 초기화
	  for (var fieldName in dataObject) {
	    if (dataObject.hasOwnProperty(fieldName)) {
	      // 필드 초기화 예시 (원하시는 초기값으로 변경)
	      dataObject[fieldName] = null;
	    }
	  }
}

//입력 type 선택
function chooseEditor(container, options) {

	switch (options.model.COLUMN) {
		default:
			numericEditor(container, options);
			break;
	}
}

function dateEditor(container, options) {
	 $('<input id="' + options.field + '" data-text-field="' + options.field + '" data-value-field="' + options.field + '" data-bind="value:' + options.field + '"/>')
	.appendTo(container)
	.kendoDatePicker({
		culture: "ko-KR",
		format : "yyyy-MM-dd",
		change : function(e) {
			selectedValue = this.value();
			selectedValue = selectedValue.getFullYear() + "-" + (new String((selectedValue.getMonth()+1)).length == 1 ? "0" + (selectedValue.getMonth()+1) : selectedValue.getMonth()+1) + "-" + (new String(selectedValue.getDate()).length == 1 ? "0" + selectedValue.getDate() : selectedValue.getDate());
			console.log(selectedValue);
		},
	});
}

function instrumentationInfo(consCode, businessCode){
	var searchType = document.mapForm.searchType.value;
	var resultData;
	let graphData;

	$.ajax({
		url : "/map/instrumentationGraphInfo.do",
		type: "POST",
		data : {
			businessCode : businessCode,
			consCode : consCode
		},
		success : function(data){
			resultData = $.parseJSON(data);
			graphData = resultData.dataList1;

			if(graphData.length > 0){
				fn_fillingDataSel(graphData);
				var chart;
				am4core.ready(function() {
					chart = am4core.createFromConfig({
						"type": "XYChart",
						"legend": {
							"position": "right"
						},
						"data": arrFillingData,
						"xAxes": [{
							"type": "ValueAxis",
							"renderer": {
								"grid": {
									"template": {
										"type": "Grid",
										"location": 0
									}
								},
								"minGridDistance": 75
							},
							"title":{
								"text" : "기간일수(일)",
								"fontWeight" : "bold"
							}
						}],
						"yAxes": [{
							"type": "ValueAxis",
							"renderer": {
								"maxLabelPosition": 0.98
							},
							"title":{
								"text" : "침하량(cm) / 성토고(cm)",
								"fontWeight" : "bold"
							}
						}],
						"mouseWheelBehavior" : "zoomX" ,
						"series":[
/*								{
									"type": "LineSeries",
									"name": "성토고",
									"bullets": {
										"values": [{
											"type": "CircleBullet",
											"tooltipText": "{name}\n: {valueY}cm\n 기간일수\n: {valueX}일"
										}],
										"template": {
											"type": "Bullet"
										}
									},
									"dataFields": {
										"valueY": "fillHeightForCm",
										"valueX": "nod"
									},
									"sequencedInterpolation": true,
									"sequencedInterpolationDelay": 100
								},*/
								{
									"type": "LineSeries",
									"name": "성토고",
									"fill" : "black",
									"fillOpacity": 0,
									"dataFields": {
										"valueY": "fillHeightForCm",
										"valueX": "nod"
									},
									"sequencedInterpolation": true,
									"sequencedInterpolationDelay": 100,
								    "tooltip": {
								        "numberFormatter": {
								            "numberFormat": "#,###"
								        }
								    }
								},
								{
									"type": "ColumnSeries",
									"name": "침하량",
									"stroke": "rgba(128, 128, 128, 0.5)",
								    "column": {
								        "column.cornerRadiusTopLeft": 10,
								        "column.cornerRadiusTopRight": 10,
								        "fillOpacity": 0  // 막대의 색상 투명도 조절
								    },
									"bullets": {
										"values": [{
											"type": "CircleBullet",
											"fillOpacity": 0,
											"tooltipText": "{name}\n: {valueY}cm\n 기간일수\n: {valueX}일"
										}],
										"template": {
											"type": "Bullet"
										}
									},
									"dataFields": {
										"valueY": "amountCumSub",
										"valueX": "nod"
									},
									"sequencedInterpolation": true,
									"sequencedInterpolationDelay": 100
								},
							],
							"legend": {
								"type": "Legend",
								"position": "right"

							},
					},
					document.getElementById('fillingLineChart')
					);
					chart.cursor = new am4charts.XYCursor();
				});
			}

		},
		complete : function(data) {
			if(graphData.length > 0){
				instrumentationGraphInfoPopupData.center();
				instrumentationGraphInfoPopupData.open();
			}else{
				alert("등록된 계측데이터가 없습니다.");
			}
		}
	});
}

function predictionInfo(consCode, businessCode){
	var searchType = document.mapForm.searchType.value;
	var resultData;
	let graphData;

	$.ajax({
		url : "/map/predictionGraphInfo.do",
		type : "POST",
		data : {
			businessCode : businessCode,
			consCode : consCode
		},
		success : function(data){
			resultData = $.parseJSON(data);
			graphData = resultData.dataList1;
			graphData2 = resultData.dataList2;
			predictList = resultData.predictList;
			document.getElementById("surSetCode").innerHTML = undefinedCheck(predictList[0].surSetCode);
			document.getElementById("location").innerHTML = undefinedCheck(predictList[0].businessName);
			document.getElementById("pointXY").innerHTML = undefinedCheck(predictList[0].pointX) + ', ' + undefinedCheck(predictList[0].pointY);
			document.getElementById("resiSet").innerHTML = undefinedCheck(predictList[0].targetSettlement);
			document.getElementById("exBankingDate").innerHTML = undefinedCheck(predictList[0].extraBankingDate);
			document.getElementById("lastInstrument").innerHTML = undefinedCheck(predictList[0].nod);

			let chart;
			if(graphData.length > 0){
				fn_predictDataSel(graphData);
				fn_fillingDataSel(graphData2);

				var arr1 = new Array();
				arr1 = arrFillingData.concat(arrPredictData);
				am4core.ready(function() {
					chart = am4core.createFromConfig({
						"type": "XYChart",
						"legend": {
							"position": "right"
						},
						"data": arr1,
						"xAxes": [{
							"type": "ValueAxis",
							"renderer": {
								"grid": {
									"template": {
										"type": "Grid",
										"location": 0
									}
								},
								"minGridDistance": 75
							},
							"title":{
								"text" : "기간일수(일)",
								"fontWeight" : "bold"
							}
						}],
						"yAxes": [{
							"type": "ValueAxis",
							"renderer": {
								"maxLabelPosition": 0.98
							},
							"title":{
								"text" : "침하량(cm) / 성토고(cm)",
								"fontWeight" : "bold"
							}
						}],
						"mouseWheelBehavior" : "zoomX" ,
						"series":[
							{
								"type": "LineSeries",
								"name": "성토고",
								"fill" : "black",
								"fillOpacity": 0,
								"dataFields": {
									"valueY": "fillHeightForCm",
									"valueX": "nod"
								},
								"sequencedInterpolation": true,
								"sequencedInterpolationDelay": 100,
							    "tooltip": {
							        "numberFormatter": {
							            "numberFormat": "#,###"
							        }
							    }
							},
							{
								"type": "ColumnSeries",
								"name": "침하량",
								"stroke": "rgba(128, 128, 128, 0.5)",
								"fillOpacity": 0,
								"bullets": {
									"values": [{
										"type": "CircleBullet",
										"fillOpacity": 0,  // 막대의 색상 투명도 조절
										"tooltipText": "{name}\n: {valueY}cm\n 기간일수\n: {valueX}일"
									}],
									"template": {
										"type": "Bullet",
										"fillOpacity": 0  // 막대의 색상 투명도 조절
									}
								},
								"dataFields": {
									"valueY": "amountCumSub",
									"valueX": "nod"
								},
								"sequencedInterpolation": true,
								"sequencedInterpolationDelay": 100
							},
							{
								"type": "LineSeries",
								"name": "쌍곡선법",
								"stroke" : "blue",
								"fill" : "blue",
								"fillOpacity": 0,
								"dataFields": {
									"valueY": "predictSettlement1",
									"valueX": "sumDays"
								},
								"sequencedInterpolation": true,
								"sequencedInterpolationDelay": 100
							},
							{
								"type": "LineSeries",
								"name": "비선형 쌍곡선법",
								"stroke" : "green",
								"fill" : "green",
								"fillOpacity": 0,
								"dataFields": {
									"valueY": "predictSettlement2",
									"valueX": "sumDays"
								},
								"sequencedInterpolation": true,
								"sequencedInterpolationDelay": 100
							},
							{
								"type": "LineSeries",
								"name": "가중 비선형 쌍곡선법",
								"stroke" : "black",
								"fill" : "black",
								"fillOpacity": 0,
								"dataFields": {
									"valueY": "predictSettlement3",
									"valueX": "sumDays"
								},
								"sequencedInterpolation": true,
								"sequencedInterpolationDelay": 100
							},
							{
								"type": "LineSeries",
								"name": "아사오카법",
								"stroke" : "purple",
								"fill" : "purple",
								"fillOpacity": 0,
								"dataFields": {
									"valueY": "predictSettlement4",
									"valueX": "sumDays"
								},
								"sequencedInterpolation": true,
								"sequencedInterpolationDelay": 100
							},
							{
								"type": "LineSeries",
								"name": "단계성토 고려법",
								"stroke" : "orange",
								"fill" : "orange",
								"fillOpacity": 0,
								"dataFields": {
									"valueY": "predictSettlement5",
									"valueX": "sumDays"
								},
								"sequencedInterpolation": true,
								"sequencedInterpolationDelay": 100
							},
							],
							"legend": {
								"type": "Legend",
								"position": "right"
							},
					},
					document.getElementById('predictLineChart')
					);
					chart.cursor = new am4charts.XYCursor();
				});
			}
		},
		complete : function(data) {
			if(graphData.length > 0){
				predictionGraphInfoPopupData.center();
				predictionGraphInfoPopupData.open();
			}else{
				alert("등록된 예측데이터가 없습니다.");
			}
		}
	});
}


var arrFillingData = new Array();

function fn_fillingDataSel(data){
	//arrFillingData 초기화
	arrFillingData = [];
	for(i=0; i<data.length; i++){
		arrFillingData[i] = {};
		arrFillingData[i]['fillHeightForCm'] = data[i].fillHeightForCm;
		arrFillingData[i]['amountCumSub'] = data[i].amountCumSub;
		arrFillingData[i]['nod'] = data[i].nod;
	}
}

var arrPredictData = new Array();

function fn_predictDataSel(data){
	//arrPredictData 초기화
	arrPredictData = [];
	for(i=0; i<data.length; i++){
		arrPredictData[i] = {};
		//예측
		if(data[i].predictionMethod == '1'){
			arrPredictData[i]['predictSettlement1'] = data[i].predictedSettlement;
		}else if(data[i].predictionMethod == '2'){
			arrPredictData[i]['predictSettlement2'] = data[i].predictedSettlement;
		}else if(data[i].predictionMethod == '3'){
			arrPredictData[i]['predictSettlement3'] = data[i].predictedSettlement;
		}else if(data[i].predictionMethod == '4'){
			arrPredictData[i]['predictSettlement4'] = data[i].predictedSettlement;
		}else if(data[i].predictionMethod == '5'){
			arrPredictData[i]['predictSettlement5'] = data[i].predictedSettlement;
		}
		arrPredictData[i]['sumDays'] = data[i].sumDays;
	}
}

function makePredictionData(){

	let businessCode =  document.mapForm.businessCode.value;
	let consCode = document.mapForm.consCode.value;

	if(confirm("예측데이터를 생성하시겠습니까?")){
		$.ajax({
			url : "/map/makePredictionData.do",
			type: "POST",
			beforeSend : function(xhr){
				loading("#instrumentationGraphInfoPopup", "true");
			},
			data : {
				businessCode : businessCode,
				consCode : consCode,
			},
			success : function(data){

				resultData = $.parseJSON(data);
				let result = resultData.dataList1;

				if(result == "suss"){
					loading("#instrumentationGraphInfoPopup","false");
					alert("예측데이터 생성에 성공했습니다.");
				}else{
					alert("예측데이터 생성에 실패했습니다.");
				}

			},
		});
	}
}



function getSelectHoleInfo() {
	var businessCode = document.mapForm.businessCode.value;
	var holeCode = document.mapForm.holeCode.value;
	var consCode = document.mapForm.consCode.value;
	var searchType = document.mapForm.searchType.value;
	var surSetCode = document.mapForm.surSetCode.value;
	var verIncCode = document.mapForm.verIncCode.value;
	var setExtCode = document.mapForm.setExtCode.value;
	var watPreCode = document.mapForm.watPreCode.value;
	var watLevCode = document.mapForm.watLevCode.value;
	var resultData;
	var resultArea = [];
	var data = "";


	if(document.mapForm.searchType.value == "EachSelect"){
		data = businessCode + "%7C%7C" + holeCode;
	} else {
		resultData = selectFeatures.getArray();
		for(var i =0; i<selectFeatures.getLength(); i++){
			if( i !== 0 ) {
				data += ",";
			}
			data += resultData[i].A.business_code + "%7C%7C" + resultData[i].A.hole_code;
		}
	}

	return data;
}