let lang = 'null';

var map;
	
$( document ).ready(function() {

	$('.scrollable').bind('mousewheel', function() {
	     return false
	});
	

	$('.scrollable2').bind('mousewheel DOMMouseScroll', function(e) {
		var scrollTo = null;
		
		if (e.type == 'mousewheel') {
			scrollTo = (e.originalEvent.wheelDelta * -1);
		}

		else if (e.type == 'DOMMouseScroll') {
			scrollTo = 40 * e.originalEvent.detail;
		}
		
		if (scrollTo) {
			e.preventDefault();

			$(this).scrollTop(scrollTo + $(this).scrollTop());
		}
		
		return false;

	});

	
/*------------------------------ OL OBJECT -----------------------------*/
	/**
	 * 공통 스타일
	 */
	var olStyle = {
		whiteStroke: new ol.style.Style({
			stroke: new ol.style.Stroke({
				color: [255,255,255,1],
				width: 1
			})
		}),
		blackStroke: new ol.style.Style({
			stroke: new ol.style.Stroke({
				color: [0,0,0,1],
				width: 1
			})
		}),
			
		selectHover: new ol.style.Style({
			stroke: new ol.style.Stroke({
				color: [255,255,255,1],
				width: 4
			})
		}),
		selectClick: new ol.style.Style({
			stroke: new ol.style.Stroke({
				color: [0,0,0,1],
				width: 2
			})
		})
	};
	
	/*------------------------------ LAYERS --------------------------------*/
	/**
	 * 시도경계 레이어 추가
	 * 	raster
	 *  vector
	 */
	var sidoRaster = new ol.layer.Tile({
		title: '시도 경계',
		visible: false,
		source: new ol.source.TileWMS({
			url: GISSERVER_URL,
			params: {
				VERSION: '1.3.0',
				FORMAT: 'image/png', 
				TRANSPARENT: 'true',
				LAYERS: 'pinogio:tl_scco_ctprvn_201904',
				tiled: 'true'
			}
		})
	});
	
	/**
	 * 시도 레이어(부산)
	 */
	sidoVectorBs = new ol.layer.Vector({
		title: '시도 영역',
		renderMode : 'vector',
		visible: true,
		opacity: 0,
		zIndex: 99,
		source : new ol.source.Vector({
			url : PROXY_URL + GISSERVER_URL
				+ '?service=WFS&version=1.1.0&request=GetFeature&outputFormat=application/json'
				+ '&typeName=pinogio:tl_scco_ctprvn_201904_s',
			format : new ol.format.GeoJSON()
		}),
		style: olStyle.blackStroke
	});
	
	/**
	 * 시도 레이어(세종)
	 */
	sidoVectorSj = new ol.layer.Vector({
		title: '시도 영역',
		renderMode : 'vector',
		visible: true,
		opacity: 0,
		zIndex: 99,
		source : new ol.source.Vector({
			url : PROXY_URL + GISSERVER_URL
				+ '?service=WFS&version=1.1.0&request=GetFeature&outputFormat=application/json'
				+ '&typeName=pinogio:tl_scco_ctprvn_201904_s',
			format : new ol.format.GeoJSON()
		}),
		style: olStyle.blackStroke
	});
	
	/**
	 * 시도 레이어(Grid Map)
	 */
	sidoVectorGrid = new ol.layer.Vector({
		title: '시도 영역',
		renderMode : 'vector',
		visible: true,
		opacity: 0,
		zIndex: 99,
		source : new ol.source.Vector({
			url : PROXY_URL + GISSERVER_URL
				+ '?service=WFS&version=1.1.0&request=GetFeature&outputFormat=application/json'
				+ '&typeName=pinogio:tl_scco_ctprvn_201904_s',
			format : new ol.format.GeoJSON()
		}),
		style: olStyle.blackStroke
	});
	
	/**
	 * 격자기반 인구 2040년 레이어 추가
	 */
	var popGridRaster = new ol.layer.Tile({
		id: 'pop_grid_total',
		title: '격자기반 인구현황(2040년)',
		visible: true,
		opacity: .8,
		source: new ol.source.TileWMS({
			url: GISSERVER_URL,
			params: {
				VERSION: '1.3.0',
				FORMAT: 'image/png', 
				TRANSPARENT: 'true',
				LAYERS: 'pinogio:pop_grid_total',
				tiled: 'true',
				STYLES: 'pop40_grid_total'//,
				//cql_filter:  'category <> -999'
			}
		})
	});
	
	var popGridRaster_bs = new ol.layer.Tile({
		id: 'pop_grid_total_bs',
		title: '격자기반 인구현황(2040년)',
		visible: true,
		opacity: .7,
		source: new ol.source.TileWMS({
			url: GISSERVER_URL,
			params: {
				VERSION: '1.3.0',
				FORMAT: 'image/png', 
				TRANSPARENT: 'true',
				LAYERS: 'pinogio:pop_grid_total',
				tiled: 'true',
				STYLES: 'pop_grid_rate'//,
				//cql_filter:  'sido_cd == 26'
			}
		})
	});
	
	var popGridRaster_sj = new ol.layer.Tile({
		id: 'pop_grid_total_sj',
		title: '격자기반 인구현황(2040년)',
		visible: true,
		opacity: .7,
		source: new ol.source.TileWMS({
			url: GISSERVER_URL,
			params: {
				VERSION: '1.3.0',
				FORMAT: 'image/png', 
				TRANSPARENT: 'true',
				LAYERS: 'pinogio:pop_grid_total',
				tiled: 'true',
				STYLES: 'pop_grid_rate'//,
//				cql_filter:  'sido_cd == 36'
			}
		})
	});
	
	var popGridRaster_grid = new ol.layer.Tile({
		id: 'pop_grid_total_grid',
		title: '격자기반 인구현황(2040년)',
		visible: true,
		opacity: .7,
		source: new ol.source.TileWMS({
			url: GISSERVER_URL,
			params: {
				VERSION: '1.3.0',
				FORMAT: 'image/png', 
				TRANSPARENT: 'true',
				LAYERS: 'pinogio:pop_grid_total',
				tiled: 'true',
				STYLES: 'pop40_grid_total'
			}
		})
	});
	
	/**
	 * 시군구기반 인구 2040년 레이어 추가
	 */
	var popSigunguRaster = new ol.layer.Tile({
		id: 'pop_sigungu_total',
		title: '시군구기반 인구현황(2040년)',
		visible: true,
		opacity: .8,
		source: new ol.source.TileWMS({
			url: GISSERVER_URL,
			params: {
				VERSION: '1.3.0',
				FORMAT: 'image/png', 
				TRANSPARENT: 'true',
				LAYERS: 'pinogio:pop_sigungu_total',
				tiled: 'true',
				STYLES: 'pop40_sigungu_total'
			}
		})
	});
	
	var popSigunguRateRaster = new ol.layer.Tile({
		id: 'pop_sigungu_total',
		title: '2040년 인구증감율',
		visible: true,
		opacity: .8,
		source: new ol.source.TileWMS({
			url: GISSERVER_URL,
			params: {
				VERSION: '1.3.0',
				FORMAT: 'image/png', 
				TRANSPARENT: 'true',
				LAYERS: 'pinogio:pop_sigungu_total',
				tiled: 'true',
				STYLES: 'pop_sigungu_rate'
			}
		})
	});
	
	var boundaryVector = new ol.layer.Vector({
		title: '시도 영역',
		renderMode : 'image',
		source : new ol.source.Vector({
			url : PROXY_URL + GISSERVER_URL + '?service=WFS&version=1.0.0&request=GetFeature&typeName=pinogio:tl_scco_sig_201904_s&outputFormat=application/json',
			format : new ol.format.GeoJSON()
		})
	});
	
	var boundarySelect = new ol.interaction.Select({
		condition: ol.events.condition.pointerMove,
		layers: [boundaryVector]
	});
	
	var analysisVector = new ol.layer.Vector({
		visible: true,
		renderMode : 'vector',
		opacity: 1,
		zIndex: 99,
		style: new ol.style.Style({
			stroke: new ol.style.Stroke({
				color: '#000000',
				width: 2
			}),
			fill: new ol.style.Fill({
				color: '#756bb1'
			})
		}),
		source: new ol.source.Vector({
			format: new ol.format.GeoJSON()
		})
	});
	
	var overlay = {
		identify: new ol.Overlay({
			element: document.getElementById("pg-identify-popup"),
			autoPan: true,
			autoPanAnimation: {
				duration: 250
			}
		})
	};
	
	var defaultView = new ol.View({
		center : ol.proj.transform([ 128.0292, 36.6332 ], 'EPSG:4326', 'EPSG:3857'),
		zoom : 7,
		enableRotation: false
	});
	
	var bs_View = new ol.View({
		center : ol.proj.transform([ 129.0525, 35.2111 ], 'EPSG:4326', 'EPSG:3857'),
		zoom : 10,
		enableRotation: false
	});
	
	var map_bs = new ol.Map({
		target : 'pg-mapview-busan',
		layers : [
			BASEMAP_GROUP,
			sidoVectorBs
		], 
		controls: ol.control.defaults({attribution: false}).extend([
			new ol.control.Attribution({
				collapsible: false
			})
		]),
		interactions: ol.interaction.defaults({
			doubleClickZoom: false,
			mouseWheelZoom: true,
			dragPan: true,
			pinchZoom: true
		}).extend([
		]),
		view : bs_View
	});
	
	map_bs.addLayer(popGridRaster_bs);
	//sidoVectorBs.setVisible(true);
	
	var sj_View = new ol.View({
		center : ol.proj.transform([ 127.2697, 36.5704 ], 'EPSG:4326', 'EPSG:3857'),
		zoom : 10,
		enableRotation: false
	});
	
	var map_sj = new ol.Map({
		target : 'pg-mapview-sejong',
		layers : [
			BASEMAP_GROUP,
			sidoVectorSj
		], 
		controls: ol.control.defaults({attribution: false}).extend([
			new ol.control.Attribution({
				collapsible: false
			})
		]),
		interactions: ol.interaction.defaults({
			doubleClickZoom: false,
			mouseWheelZoom: false,
			dragPan: true,
			pinchZoom: true
		}).extend([
		]),
		view : sj_View
	});
	
	map_sj.addLayer(popGridRaster_sj);
	
	var map_sig = new ol.Map({
		target : 'pg-mapview-sig',
		layers : [
			BASEMAP_GROUP,
			boundaryVector
		], 
		controls: ol.control.defaults({attribution: false}).extend([
			new ol.control.Attribution({
				collapsible: false
			})
		]),
		interactions: ol.interaction.defaults({
			doubleClickZoom: false,
			mouseWheelZoom: true,
			dragPan: true,
			pinchZoom: true
		}).extend([
			boundarySelect
		]),
		view : defaultView
	});
	
	map_sig.addLayer(popSigunguRaster);
	
	map_sig.on('click', boundarySelectEvt);
	
	var sigunguHighlightOverlay = new ol.layer.Vector({
		style: olStyle.selectHover,
		source: new ol.source.Vector({
			format: new ol.format.GeoJSON()
		}),
		map: map_sig
	});
	
	function boundarySelectEvt(e) {
		
		var features = boundarySelect.getFeatures().getArray();
		
		var sigCd;
		if (features.length > 0) {
			GetFunctionLog('ftp', '2040년 대한민국 인구 트렌드', '2040년 장래인구 분포 조회', '');

			sigCd = features[0].getProperties().sig_cd;
			
			var view = map_sig.getView();
			var viewResolution = defaultView.getResolution();
			var source = popSigunguRaster.getSource();
			var url = source.getGetFeatureInfoUrl(
				e.coordinate, viewResolution, view.getProjection(),
				{'INFO_FORMAT': 'application/json'});
			
			$.ajax({
				url: PROXY_URL + url	
			}).done(function (jsonData) {
				
				if (jsonData.features.length > 0) {
					var feature = new ol.format.GeoJSON().readFeature(jsonData.features[0]);
					
					sigunguHighlightOverlay.getSource().clear();
					sigunguHighlightOverlay.getSource().addFeature(feature);
					
					var sidoCd = feature.getProperties().sig_cd.substring(0,2);

					$("#pg-btn-grid-sido-select").val(sidoCd).prop("selected", true);
					$("#pg-btn-grid-sido-select").change();
					
				} else {
					sigunguHighlightOverlay.getSource().clear();
				}
			});
		} else {
			sigunguHighlightOverlay.getSource().clear();
		}
		
		getSigStackChart(sigCd);
		getSigPieChart(sigCd);
	}

	var gridView = new ol.View({
		center : ol.proj.transform([ 128.0292, 36.6332 ], 'EPSG:4326', 'EPSG:3857'),
		zoom : 7,
		enableRotation: false
	});
	
	var map_grid = new ol.Map({
		target : 'pg-mapview-grid',
		layers : [
			BASEMAP_GROUP,
			sidoVectorGrid,
			analysisVector
		], 
		controls: ol.control.defaults({attribution: false}).extend([
			new ol.control.Attribution({
				collapsible: false
			})
		]),
		interactions: ol.interaction.defaults({
			doubleClickZoom: false,
			mouseWheelZoom: true,
			dragPan: true,
			pinchZoom: true
		}).extend([
		]),
		view : gridView
	});
	
	map_grid.addLayer(popGridRaster_grid);
	map_grid.addOverlay(overlay.identify);
	map_grid.on('click', handleIdentifyPOIInfo);
	
	var gridHighlightStyle = new ol.style.Style({
		stroke: new ol.style.Stroke({
			color: [33,138,4,1],
			width: 4
		})
	});

	var gridHighlightOverlay = new ol.layer.Vector({
		style: gridHighlightStyle,
		source: new ol.source.Vector({
			format: new ol.format.GeoJSON()
		}),
		map: map_grid
	});
	
	/* Grid Map Identify */
	function handleIdentifyPOIInfo(evt) {
		
		var gridFeatureInfoURL = popGridRaster_grid.getSource().getGetFeatureInfoUrl(
			evt.coordinate, 
			map_grid.getView().getResolution(), 
			map_grid.getView().getProjection(),
			{
				'INFO_FORMAT': 'application/json', 
				'STYLES': '',
				'LAYERS': 'pop_grid_total',
				'QUERY_LAYERS': 'pop_grid_total'
			}
		);
		
		$.ajax({
			url: PROXY_URL + gridFeatureInfoURL,
			async: true
		}).done(function (jsonData) {
			
			if (jsonData.features.length > 0) {
				
				var feature = new ol.format.GeoJSON().readFeature(jsonData.features[0]);
				
				analysisVector.getSource().clear();
				if (feature != null) {
					
					analysisVector.getSource().addFeature(feature);
					
					var element = overlay.identify.getElement();
					var coordinate = [feature.getGeometry().getExtent()[2], feature.getGeometry().getExtent()[3]];
					
					var content = document.getElementById('pg-identify-popup-content');
					$('#pg-identify-popup-closer').click();
					
					var prop = feature.getProperties();
					
					var showValue;
					var cr4020m = prop.cr_4020_m;
					
					if(cr4020m >= 0){
						showValue = '<i class="fas fa-caret-square-up" style="color: red;"></i>&nbsp;' + cr4020m + '%';
					} else {
						showValue = '<i class="fas fa-caret-square-down" style="color: blue;"></i>&nbsp;' + cr4020m + '%';
					}
					
					var result = '' +
					'<ul class="list-group list-group-flush">' + 
						'<li class="list-group-item d-flex justify-content-between px-3 py-1">' + 
							'<span class="font-weight-bold">인구변화율</span>' + 
						'</li>' + 
						'<li class="list-group-item d-flex justify-content-between px-3 py-1">' + 
							'<span>' + showValue + '</span>' + 
						'</li>'
					'</ul>';
					
					content.innerHTML = result;
					overlay.identify.setPosition(coordinate);
					
				} else {
					analysisVector.getSource().clear();
					$('#pg-identify-popup-closer').click();
				}
				
			} else {
				analysisVector.getSource().clear();
				$('#pg-identify-popup-closer').click();
			}
		});
	}
	
	/**
	 * 팝업창 닫기 이벤트
	 */
	$('#pg-identify-popup-closer').on('click', function(e){
		overlay.identify.setPosition(undefined);
		document.getElementById("pg-identify-popup-closer").blur();
	
		$('#pg-identify-popup').css('left', '-50px');
		$('#pg-identify-popup').css('top', 'unset');
		
		return false;
	});
	
	/* 초기 시도 ComboBox 셋팅*/
	var reqSidoList = function() {
		$.ajax({
			url: CONTEXT_PATH + '/api/ctprvnList.json',
			success:function(res) {
				try {
					for (i = 0; i < res.data.length; i++) {
						$('#pg-btn-busan-sido-select').append(
							'<option value="'+ res.data[i].ctprvnCd +'">'+ res.data[i].ctpKorNm +'</option>'
						);
						
						$('#pg-btn-sejong-sido-select').append(
							'<option value="'+ res.data[i].ctprvnCd +'">'+ res.data[i].ctpKorNm +'</option>'
						);
						
						$('#pg-btn-grid-sido-select').append(
							'<option value="'+ res.data[i].ctprvnCd +'">'+ res.data[i].ctpKorNm +'</option>'
						);
					}
					
					$("#pg-btn-busan-sido-select option").each(function(idx, item){
						if (item.value == '26') {
							$('#pg-btn-busan-sido-select').find("option:eq("+idx+")").prop("selected", true);
							$("#pg-btn-busan-sido-select").change();
						}
					});
					
					$(".pg-map-busan-sido-tools").hide();
					
					$("#pg-btn-sejong-sido-select option").each(function(idx, item){
						if (item.value == '36') {
							$('#pg-btn-sejong-sido-select').find("option:eq("+idx+")").prop("selected", true);
							$("#pg-btn-sejong-sido-select").change();
						}
					});
					
					$(".pg-map-sejong-sido-tools").hide();
					
					
					//$(".pg-map-grid-sido-tools").hide();
					
				} catch (e) {
					alert('동기화되지 못한 데이터가 있습니다.')
				}
			}
		});
	}
	reqSidoList();
	
	/**
	 * 부산광역시 시도 선택박스 변경 이벤트
	 */
	$("#pg-btn-busan-sido-select").on('change', function(e) {
		
		var sidoCd = e.currentTarget.value;
		var sidoNm = $("#pg-btn-busan-sido-select :selected").text();
		
		var filter;
		
		if(sidoCd == ''){
			filter = null;
			
			map_bs.getView().fit( sidoVectorBs.getSource().getExtent(), map_bs.getSize() );
			
		}else{
			filter = 'sido_cd == ' + sidoCd;

			var features = sidoVectorBs.getSource().getFeatures();
			for (i = 0; i < features.length; i++) {
				if (features[i].getProperties().ctprvn_cd == sidoCd) {
					map_bs.getView().fit(features[i].getGeometry().getExtent(), map_bs.getSize());
				}
			}
			
		}
	
		popGridRaster_bs.getSource().updateParams({
			'CQL_FILTER': filter
		});
		
	});
	
	/**
	 * 세종특별시 시도 선택박스 변경 이벤트
	 */
	$("#pg-btn-sejong-sido-select").on('change', function(e) {
		
		var sidoCd = e.currentTarget.value;
		var sidoNm = $("#pg-btn-sejong-sido-select :selected").text();
		
		var filter;
		
		if(sidoCd == ''){
			filter = null;
			
			map_sj.getView().fit( sidoVectorSj.getSource().getExtent(), map_sj.getSize() );
			
		}else{
			filter = 'sido_cd == ' + sidoCd;

			var features = sidoVectorSj.getSource().getFeatures();
			for (i = 0; i < features.length; i++) {
				if (features[i].getProperties().ctprvn_cd == sidoCd) {
					map_sj.getView().fit(features[i].getGeometry().getExtent(), map_sj.getSize());
				}
			}
			
		}
	
		popGridRaster_sj.getSource().updateParams({
			'CQL_FILTER': filter
		});
		
	});
	
	/**
	 * GridMap 시도 선택박스 변경 이벤트
	 */
	$("#pg-btn-grid-sido-select").on('change', function(e) {
		GetFunctionLog('ftp', '2040년 대한민국 인구 트렌드', '시도별 장래인구 분포 조회', '');

		var sidoCd = e.currentTarget.value;
		var sidoNm = $("#pg-btn-grid-sido-select :selected").text();
		
		if (gridHighlightOverlay != null) {
			if (gridHighlightOverlay.getSource().getFeatures().length > 0) {
				gridHighlightOverlay.getSource().clear();
			}
		}
		
		var filter;
		
		if(sidoCd == ''){
			filter = null;
			
			map_grid.getView().fit( sidoVectorGrid.getSource().getExtent(), map_grid.getSize() );
			
		}else{
			filter = 'sido_cd == ' + sidoCd;

			var features = sidoVectorGrid.getSource().getFeatures();
			for (i = 0; i < features.length; i++) {
				if (features[i].getProperties().ctprvn_cd == sidoCd) {
					gridHighlightOverlay.getSource().addFeature(features[i]);
					map_grid.getView().fit(features[i].getGeometry().getExtent(), map_grid.getSize());
				}
			}
			
		}
	
		popGridRaster_grid.getSource().updateParams({
			'CQL_FILTER': filter
		});
		
	});
	
	//1000 단위 컴마
	function numberWithCommas(x) {
	    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
	}
	
	//만단위로 숫자 변경
	function numberWithMil(x) {
		
		var n; 
		
		n = x / 10000; 
		
	    return n.toFixed(2);
	}
	
	/**
	 * 우측문자열채우기
	 * @params
	 *  - str : 원 문자열
	 *  - padLen : 최대 채우고자 하는 길이
	 *  - padStr : 채우고자하는 문자(char)
	 */
	function rpad(str, padLen, padStr) {
	    if (padStr.length > padLen) {
	        console.log("오류 : 채우고자 하는 문자열이 요청 길이보다 큽니다");
	        return str + "";
	    }
	    str += ""; // 문자로
	    padStr += ""; // 문자로
	    while (str.length < padLen)
	        str += padStr;
	    str = str.length >= padLen ? str.substring(0, padLen) : str;
	    return str;
	}
	
	/* 기본 chart 생성 */
	function getStackChart(){
		
		var barOptions_stacked = {
		    tooltips: {
		        enabled: false
		    },
		    hover :{
		        animationDuration:0
		    },
		    title: {
				display: true,
				text: '2040년 인구 증감 지역 비율',
				fontFamily: "'KoPub Dotum'",
				fontColor: '#024b80',
				fontSize: 15
	        },
	        layout: {
	            padding: {
	                left: 0,
	                right: 15,
	                top: 5,
	                bottom: 5
	            }
	        },
		    scales: {
		        xAxes: [{
		            ticks: {
		                fontFamily: "'KoPub Dotum'"
		            },
		            scaleLabel:{
		                display:true
		            },
		            stacked: true,
		            display: false
		        }],
		        yAxes: [{
		            gridLines: {
		                display:true,
		                color: "#fff",
		            },
		            ticks: {
		                fontFamily: "'KoPub Dotum'",
		                fontSize:11
		            },
		            stacked: true
		        }]
		    },
		    legend:{
		        display:true,
		        position: 'bottom',
		        fontColor: '#024b80'
		    },
		    
		    animation: {
		        onComplete: function () {
		            var chartInstance = this.chart;
		            var ctx = chartInstance.ctx;
		            ctx.textAlign = "center";
		            ctx.font = "15px KoPub Dotum";
		            ctx.fillStyle = "#fff";

		            Chart.helpers.each(this.data.datasets.forEach(function (dataset, i) {
		                var meta = chartInstance.controller.getDatasetMeta(i);
		                Chart.helpers.each(meta.data.forEach(function (bar, index) {
		                    data = dataset.data[index];
		                    if(i==0){
		                        ctx.fillText(data + '%', 50, bar._model.y+4);
		                    } else {
		                        ctx.fillText(data + '%', bar._model.x-25, bar._model.y+4);
		                    }
		                }),this)
		            }),this);
		        }
		    },
		    pointLabelFontFamily : "KoPub Dotum",
		    scaleFontFamily : "KoPub Dotum",
		};
		
		var chartData = {
			labels: '',
	        
	        datasets: [{
	        	label: '인구감소',
	            data: [81],
	            backgroundColor: "#99CCFF",
	            hoverBackgroundColor: "rgba(46,185,235,1)"
	        },{
	        	label: '인구증가',
	            data: [19],
	            backgroundColor: "#FF9999",
	            hoverBackgroundColor: "rgba(140,85,100,1)"
	        }]
		};
		
		if (window.myStackChart != undefined) {
			window.myStackChart.destroy();
		}
		
		var ctx = document.getElementById('stackChart').getContext('2d');
		window.myStackChart = new Chart(ctx, {
			type: 'horizontalBar',
			data: chartData,
		    options: barOptions_stacked
		});
	}
	getStackChart();
	
	function getScatterChart(){
		
		$.ajax({
			url: CONTEXT_PATH + '/api/futurepop/sigPopInfoForScatter.json',
			dataType: 'json',
			success:function(res) {
				//console.log(res);
				try {
					
					var labels = res.data.LABEL;
					var popInfos = res.data.POPINFO;
					
					var popDatasets = [];
					
					for(var i = 0; i < labels.length; i++){
						var data = [];
						
						for(var j = 0; j < popInfos.length; j++){
							if(labels[i].sd_cd == popInfos[j].sd_cd){
								data.push({x: parseFloat(popInfos[j].pop40), y: parseFloat(popInfos[j].p40_oldr), id: j});
							}
						}
						
						var borderColor;
						var backgroundColor;
						
						if(labels[i].sd_cd == 11){//서울
							borderColor = '#339999';
							backgroundColor = '#339999';
						}else if(labels[i].sd_cd == 26){//부산 
							borderColor = '#FFCC66';
							backgroundColor = '#FFCC66';
						}else if(labels[i].sd_cd == 27){//대구
							borderColor = '#66CC66';
							backgroundColor = '#66CC66';
						}else if(labels[i].sd_cd == 28){//인천
							borderColor = '#FF9999';
							backgroundColor = '#FF9999';
						}else if(labels[i].sd_cd == 29){//광주
							borderColor = '#669933';
							backgroundColor = '#669933';
						}else if(labels[i].sd_cd == 30){//대전
							borderColor = '#CC9933';
							backgroundColor = '#CC9933';
						}else if(labels[i].sd_cd == 31){//울산
							borderColor = '#CC3333';
							backgroundColor = '#CC3333';
						}else if(labels[i].sd_cd == 36){//세종
							borderColor = '#669999';
							backgroundColor = '#669999';
						}else if(labels[i].sd_cd == 41){//경기
							borderColor = '#99CCFF';
							backgroundColor = '#99CCFF';
						}else if(labels[i].sd_cd == 42){//강원
							borderColor = '#336699';
							backgroundColor = '#336699';
						}else if(labels[i].sd_cd == 43){//충북 
							borderColor = '#996699';
							backgroundColor = '#996699';
						}else if(labels[i].sd_cd == 44){//충남
							borderColor = '#FFCCCC';
							backgroundColor = '#FFCCCC';
						}else if(labels[i].sd_cd == 45){//전북 
							borderColor = '#999999';
							backgroundColor = '#999999';
						}else if(labels[i].sd_cd == 46){//전남
							borderColor = '#666666';
							backgroundColor = '#666666';
						}else if(labels[i].sd_cd == 47){//경북
							borderColor = '#FF9966';
							backgroundColor = '#FF9966';
						}else if(labels[i].sd_cd == 48){//경남
							borderColor = '#CC6600';
							backgroundColor = '#CC6600';
						}else if(labels[i].sd_cd == 50){//제주
							borderColor = '#CC6699';
							backgroundColor = '#CC6699';
						}
						
						var pointStyle;
						if(labels[i].sd_type == '수도권'){
							pointStyle = 'star';
						} else {
							pointStyle = 'circle';
						}
						
						
						popDatasets.push({ label: labels[i].sd, data: data, pointRadius: 4, pointStyle: pointStyle, borderColor: borderColor, backgroundColor: backgroundColor});
					}
					
					var options = {
						responsive: true,
						maintainAspectRatio: false,
						legend: {
				            position: "right",
				            align: "middle",
				            fontFamily: "'KoPub Dotum'",
							fontColor: '#024b80'
				        },
				        title: {
							display: true,
							text: '2040년 장래인구 추계와 고령인구 비율 분포(시군구)',
							fontFamily: "'KoPub Dotum'",
							fontColor: '#024b80',
							fontSize: 15
				        },
				        scales: {
				        	yAxes: [{
				        		scaleLabel: {
				        			display: true,
				        			labelString: '2040년 고령인구비율 전망(65세이상 인구, %)',
				        			fontFamily: "'KoPub Dotum'",
									fontColor: '#024b80'
				        		}
				        	}],
				            xAxes: [{
				            	scaleLabel: {
				            		display: true,
				            		labelString: '2040년 장래인구추계(시군구 단위 인구전망)',
				            		fontFamily: "'KoPub Dotum'",
									fontColor: '#024b80'
				            	}
				            }],
				        },
				        tooltips: {
				        	displayColors: false,
				            callbacks: {
				            	label: function(tooltipItems, data) {
									//var output = "";
									
									var index = tooltipItems.index;
									var datasetIndex = tooltipItems.datasetIndex;
									var dataset = data.datasets[datasetIndex];
									var datasetItem = dataset.data[index];
									
									var popInfo = popInfos[datasetItem.id];
									
									var output = ["·지자체: " + popInfo.sdsgg];
									output.push("·2040년 고령인구비율: " + popInfo.p40_oldr + "%");
									output.push("·2040년 장래인구전망: " + numberWithCommas(popInfo.pop40) + "명");
									
									
									return output;
				            	}
				            }
				        }
					};
					
					var ctx = document.getElementById('scatterChart').getContext('2d');
					window.myScatterChart = new Chart(ctx, {
						type: 'scatter',
					    data: {
					        datasets: popDatasets
					    },
					    options: options
					});
					
				} catch (e) {
				}
			}
		});
	}
	getScatterChart();
	
	var rankData;
	function handleClick(evt)
	{
		var activeElement = mySigStackChart.getElementAtEvent(evt);
		if(activeElement.length > 0){
			var selBar = activeElement[0];
			var selBarIdx = selBar._chart.active[0]._index;
			
			var sig_cd = rankData[selBarIdx].sig_cd;
			
			var features = boundaryVector.getSource().getFeatures();
			
			if(features.length > 0){
				
				var feature;
				for(var i = 0; i < features.length; i++){
					if(features[i].getProperties().sig_cd == sig_cd){
						feature = features[i];
						break;
					}
				}
				
				if(feature != null && feature != undefined){
					sigunguHighlightOverlay.getSource().clear();
					sigunguHighlightOverlay.getSource().addFeature(feature);
					
					var sidoCd = sig_cd.substring(0,2);

					$("#pg-btn-grid-sido-select").val(sidoCd).prop("selected", true);
					$("#pg-btn-grid-sido-select").change();
					
					getSigStackChart(sig_cd);
					getSigPieChart(sig_cd);
				}
			}
		}
	}

	var selSigStackChartSigCd = '';
	function getSigStackChart(sig_cd){
		
		selSigStackChartSigCd = sig_cd;
		$.ajax({
			url: CONTEXT_PATH + '/api/futurepop/sigPopInfoForBarScatter.json',
			dataType: 'json',
			data: {
				sigCd: sig_cd
			},
			success:function(res) {
				console.log(res);
				try {
					var popTitle;
					var popLabels = [];
					var popDatasets = [];
					var popColors;
					
					rankData = res.data;
					if(selSigStackChartSigCd == '' || selSigStackChartSigCd == undefined){
						popTitle = '2040년 인구 전망';
						popColors = '#024b80';
						
						for(var i = 0; i < res.data.length; i++){
							popLabels.push('[' + res.data[i].rank + '] ' + res.data[i].sdsgg);
							popDatasets.push(numberWithMil(res.data[i].pop40));
						}
					} else {
						//popTitle = '2040년 장래인구 추계(' + res.data[0].sig_kor_nm + ')';
						popTitle = '2040년 인구 구조와 변화';
						
						var colors = [];
						for(var i = 0; i < res.data.length; i++){
							popLabels.push('[' + res.data[i].rank + '] ' + res.data[i].sdsgg);
							popDatasets.push(numberWithMil(res.data[i].pop40));
							
							if(i == 0)
								colors.push('#ff0080');
							else
								colors.push('#024b80');
						}
						popColors = colors;
					}
					
					
					
					$('#popOldMainTitle').html(popTitle);
					
					var chartData = {
						labels: popLabels,
				        
				        datasets: [{
				            data: popDatasets,
				            backgroundColor: popColors,
				            hoverBackgroundColor: "rgba(46,185,235,1)"
				        }]
					};
					
					var barOptions_stacked = {
				        title: {
							display: false,
							text: popTitle,
							fontSize: 18
				        },
					    tooltips: {
					        enabled: false
					    },
					    hover :{
					        animationDuration:0
					    },
					    scales: {
					        xAxes: [{
					            ticks: {
					                beginAtZero:true,
					                display: false
					            },
					            gridLines: {
					                display:false
					            },
					            scaleLabel:{
					                display:false
					            },
					            stacked: true
					        }],
					        yAxes: [{
					        	display: true,
					        	position: 'left',
					            gridLines: {
					                display:false
					            },
					            ticks: {
					            	mirror: true,
					            	padding: 200
					            },
					            scaleLabel:{
					                display:false
					            },
					            stacked: true
					        }]
					    },
					    layout: {
					    	padding: {
					    		left : 200
					    	}
					    },
					    legend:{
					        display:false
					    },
					    
					    animation: {
					        onComplete: function () {
					            var chartInstance = this.chart;
					            var ctx = chartInstance.ctx;
					            ctx.textAlign = "left";
					            ctx.font = "12px KoPub Dotum";
					            //ctx.fillStyle = "#fff";

					            Chart.helpers.each(this.data.datasets.forEach(function (dataset, i) {
					                var meta = chartInstance.controller.getDatasetMeta(i);
					                Chart.helpers.each(meta.data.forEach(function (bar, index) {
					                    data = dataset.data[index];
					                    if(i==0){
					                        ctx.fillText(data, 175, bar._model.y+4);
					                    } else {
					                        ctx.fillText(data, bar._model.x-25, bar._model.y+4);
					                    }
					                }),this)
					            }),this);
					        }
					    },
					    onClick: handleClick
					    //pointLabelFontFamily : "Quadon Extra Bold",
					    //scaleFontFamily : "Quadon Extra Bold",
					};
					
					if (window.mySigStackChart != undefined) {
						window.mySigStackChart.destroy();
					}
							
					var ctx = document.getElementById('sigStackChart').getContext('2d');
					window.mySigStackChart = new Chart(ctx, {
						type: 'horizontalBar',
						data: chartData,
					    options: barOptions_stacked
					});
				} catch (e) {
				}
			}
		});
		
	}
	getSigStackChart();
	
	function getSigPieChart(sig_cd){
		
		$.ajax({
			url: CONTEXT_PATH + '/api/futurepop/sigPopInfoForDoughnut.json',
			dataType: 'json',
			data: {
				sigCd: sig_cd
			},
			success:function(res) {
				//console.log(res);
				try {
					
					if(res.data == null){
						$('#popOldNoInfo').show();
						$('#popOldInfo').hide();
						
						$('#popOldTitle').html('2040년 인구 구조와 변화');
						
						return;
					} else {
						$('#popOldNoInfo').hide();
						$('#popOldInfo').show();
						
						$('#popOldTitle').html("2040년 " + res.data.sig_kor_nm + " 인구 구조와 변화");
					}
					
					$('#popChangeOld').html(res.data.change_old + '%');
					$('#pop40').html(numberWithCommas(res.data.pop40) + '명');
					$('#popCr4020m').html(res.data.cr_4020_m + '%');
					
					if(res.data.cr_4020_m > 0){
//						$('#upPopIcon').show();
//						$('#downPopIcon').hide();
						$("#upPopIcon").css("display", "");
						$("#downPopIcon").css("display", "none");
					} else {
//						$('#upPopIcon').hide();
//						$('#downPopIcon').show();
						$("#upPopIcon").css("display", "none");
						$("#downPopIcon").css("display", "");
					}
					
					var datas = {
				        labels: ["유소년인구 비율", "생산가능인구 비율",	"고령인구 비율",],
				        datasets: [{    
				            data: [res.data.p40_014r, res.data.p40_1564r, res.data.p40_oldr],
				            borderColor: ['#999966', '#006699', '#003366'], 
				            backgroundColor: ['#999966', '#006699', '#003366'],
				            borderWidth: 1
				    }]};
					
					
					if (window.mySigPieChart != undefined) {
						//window.mySigPieChart.destroy();
						
						window.mySigPieChart.data = datas;
						window.mySigPieChart.update();
						
					} else {
					
						var ctx = document.getElementById('sigPieChart').getContext('2d');
						window.mySigPieChart = new Chart(ctx, {
							type: 'doughnut',
							data: datas,
							options: {
							    legend:{
							        display:false
							    },
								cutoutPercentage: 20,
								responsive: true,
								plugins: {
//									labels: {
////										render: function (args) {
////									      return args.label + ', ' + args.value + '%';
////									    },
////									    arc: true,
////									    fontColor: '#fff',
////									    fontFamily: '"KoPub Dotum"'
//										
//									 }
									labels: [
									    {
									      render: 'label',
									      position: 'outside',
									      arc: true
									    },
									    {
									    	render: function (args) {
										      return args.value + '%';
										    },
										    fontColor: '#fff'
									    }
									  ]
								}
							}
						});
						
					}
					
				} catch (e) {
				}
			}
		});
	}
	getSigPieChart('');
	
	/**
	 * 시군구 지도 탭 버튼 클릭시 이벤트
	 */
	$('.pg-btn-tabmenuitem').on('click', function(e) {
		$('.pg-btn-tabmenuitem').removeClass('btn-info');
		
		if ($(this).data('id') == 'current') {
			$(this).addClass('btn-info');
			$(this).css("background-color", "#1282b0");
			$("#btnIncrease").css("background-color", "");
			
			popSigunguRaster.getSource().updateParams({
				'STYLES': 'pop40_sigungu_total'
			});
			
			getSigLegend('장래인구현황', 'pop40_sigungu_total');
			
		} else if ($(this).data('id') == 'increase') {
			$(this).addClass('btn-info');
			$(this).css("background-color", "#1282b0");
			$("#btnCurrent").css("background-color", "");
			
			popSigunguRaster.getSource().updateParams({
				'STYLES': 'pop_sigungu_rate'
			});
			
			getSigLegend('장래인구증감 (시군구, %)', 'pop_sigungu_rate');
		}
	});
	
	/**
	 * GRID 지도 탭 버튼 클릭시 이벤트
	 */
	$('.pg-btn-grid-tabmenuitem').on('click', function(e) {
		$('.pg-btn-grid-tabmenuitem').removeClass('btn-info');
		
		if ($(this).data('id') == 'gridCurrent') {
			$(this).addClass('btn-info');
			$(this).css("background-color", "#1282b0");
			$("#btnGridIncrease").css("background-color", "");
			
			popGridRaster_grid.getSource().updateParams({
				'STYLES': 'pop40_grid_total'
			});
			
			getGridLegend('장래인구추계(500m 격자, 명)', 'pop40_grid_total');
			
		} else if ($(this).data('id') == 'gridIncrease') {
			$(this).addClass('btn-info');
			$(this).css("background-color", "#1282b0");
			$("#btnGridCurrent").css("background-color", "");
			
			popGridRaster_grid.getSource().updateParams({
				'STYLES': 'pop_grid_rate'
			});
			
			getGridLegend('장래인구증감 (500m 격자, %)', 'pop_grid_rate');
		}
	});
	
	//부산 맵 확대 이벤트
	$('#btnExpandBS').on('click', function(e) {
		$('#pg-mapview-busan').toggleClass('fullscreen');
		
		if($('#pg-mapview-busan').hasClass("fullscreen")){
			$(".prev-slide").hide();
			$(".next-slide").hide();
			$(".dot").hide();
			$(".pg-map-busan-sido-tools").show();
			$('#expandArrowsBS').removeClass('fa-expand-arrows-alt');
			$('#expandArrowsBS').addClass('fa-compress-arrows-alt');
			$("#btnGoHome").hide();
			$("#btnExplainReport").hide();
		} else {
			$(".prev-slide").show();
			$(".next-slide").show();
			$(".dot").show();
			$(".pg-map-busan-sido-tools").hide();
			$('#expandArrowsBS').removeClass('fa-compress-arrows-alt');
			$('#expandArrowsBS').addClass('fa-expand-arrows-alt');
			$("#btnGoHome").show();
			$("#btnExplainReport").show();
		}
		
		map_bs.updateSize();
		
	});
	
	//세종 맵 확대 이벤트
	$('#btnExpandSJ').on('click', function(e) {
		$('#pg-mapview-sejong').toggleClass('fullscreen');
		
		if($('#pg-mapview-sejong').hasClass("fullscreen")){
			$(".prev-slide").hide();
			$(".next-slide").hide();
			$(".dot").hide();
			$(".pg-map-sejong-sido-tools").show();
			$('#expandArrowsSJ').removeClass('fa-expand-arrows-alt');
			$('#expandArrowsSJ').addClass('fa-compress-arrows-alt');
			$("#btnGoHome").hide();
			$("#btnExplainReport").hide();
		} else {
			$(".prev-slide").show();
			$(".next-slide").show();
			$(".dot").show();
			$(".pg-map-sejong-sido-tools").hide();
			$('#expandArrowsSJ').removeClass('fa-compress-arrows-alt');
			$('#expandArrowsSJ').addClass('fa-expand-arrows-alt');
			$("#btnGoHome").show();
			$("#btnExplainReport").show();
		}
		
		map_sj.updateSize();
		
	});
	
	//Scatter Graph 확대 이벤트
	$('#btnExpandScatter').on('click', function(e) {
		$('#scatterContanier').toggleClass('fullscreen');
		
		if($('#scatterContanier').hasClass("fullscreen")){
			$(".prev-slide").hide();
			$(".next-slide").hide();
			$(".dot").hide();
			$('#expandScatter').removeClass('fa-expand-arrows-alt');
			$('#expandScatter').addClass('fa-compress-arrows-alt');
			$('#scatterContanier').css("position", "");
			$('#scatterContanier').css("height", "100%");
			$("#btnGoHome").hide();
			$("#btnExplainReport").hide();
		} else {
			$(".prev-slide").show();
			$(".next-slide").show();
			$(".dot").show();
			$('#expandScatter').removeClass('fa-compress-arrows-alt');
			$('#expandScatter').addClass('fa-expand-arrows-alt');
			$('#scatterContanier').css("position", "relative");
			$('#scatterContanier').css("height", "75%");
			$("#btnGoHome").show();
			$("#btnExplainReport").show();
		}
	});
	
	//시군구 맵 확대 이벤트
	$('#btnExpandSig').on('click', function(e) {
		$('#pg-mapview-sig').toggleClass('fullscreen');
		
		if($('#pg-mapview-sig').hasClass("fullscreen")){
			$(".prev-slide").hide();
			$(".next-slide").hide();
			$(".dot").hide();
			$('#expandArrowsSig').removeClass('fa-expand-arrows-alt');
			$('#expandArrowsSig').addClass('fa-compress-arrows-alt');
			$("#btnGoHome").hide();
			$("#btnExplainReport").hide();
		} else {
			$(".prev-slide").show();
			$(".next-slide").show();
			$(".dot").show();
			$('#expandArrowsSig').removeClass('fa-compress-arrows-alt');
			$('#expandArrowsSig').addClass('fa-expand-arrows-alt');
			$("#btnGoHome").show();
			$("#btnExplainReport").show();
		}
		
		map_sig.updateSize();
		
	});
	
	//GRID 맵 확대 이벤트
	$('#btnExpandGrid').on('click', function(e) {
		$('#pg-mapview-grid').toggleClass('fullscreen');
		
		if($('#pg-mapview-grid').hasClass("fullscreen")){
			//$('html, body').stop().animate({scrollTop: 0}, 10);
			
			$(".prev-slide").hide();
			$(".next-slide").hide();
			$(".dot").hide();
			$('#expandArrowsGrid').removeClass('fa-expand-arrows-alt');
			$('#expandArrowsGrid').addClass('fa-compress-arrows-alt');
			$("#btnGoHome").hide();
			$("#btnExplainReport").hide();
		} else {
			$(".prev-slide").show();
			$(".next-slide").show();
			$(".dot").show();
			$('#expandArrowsGrid').removeClass('fa-compress-arrows-alt');
			$('#expandArrowsGrid').addClass('fa-expand-arrows-alt');
			$("#btnGoHome").show();
			$("#btnExplainReport").show();
		}
		
		map_grid.updateSize();
		
	});
	
	//Horizontal Scatter Bar Graph 확대 이벤트
	$('#btnExpandBar').on('click', function(e) {
		$('#barContanier').toggleClass('fullscreen');
		
		if($('#barContanier').hasClass("fullscreen")){
			$(".dot").hide();
			$('#expandArrowsBar').removeClass('fa-expand-arrows-alt');
			$('#expandArrowsBar').addClass('fa-compress-arrows-alt');
			$('#barContanier').css("position", "");
			$('#barContanier').css("height", "100%");
			//$('#sigStackChart').setAttribute("height", '1000');
			$("#btnGoHome").hide();
			$("#btnExplainReport").hide();
		} else {
			$(".dot").show();
			$('#expandArrowsBar').removeClass('fa-compress-arrows-alt');
			$('#expandArrowsBar').addClass('fa-expand-arrows-alt');
			$('#barContanier').css("position", "relative");
			$('#barContanier').css("height", "50vh");
			$("#btnGoHome").show();
			$("#btnExplainReport").show();
		}
	});
	
	//Doughnut Graph 확대 이벤트
	$('#btnExpandDoughnut').on('click', function(e) {
		$('#doughnutContanier').toggleClass('fullscreen');
		
		if($('#doughnutContanier').hasClass("fullscreen")){
			$(".dot").hide();
			$('#expandArrowsDoughnut').removeClass('fa-expand-arrows-alt');
			$('#expandArrowsDoughnut').addClass('fa-compress-arrows-alt');
			$('#doughnutContanier').css("position", "");
			$('#doughnutContanier').css("height", "100%");
			$('#sigPieChart').css("height", "");
			$("#btnGoHome").hide();
			$('#popOldTitle').css("font-size", "24px");
			$('#doughnutTbl1').css("font-size", "20px");
			$('#doughnutTbl2').css("font-size", "20px");
			$('.font-weight-bold').css("font-size", "30px");
			$('#upPopIcon').css("width", "25px");
			$('#upPopIcon').css("height", "30px");
			$('#downPopIcon').css("width", "25px");
			$('#downPopIcon').css("height", "30px");
			$('#upOldPopIcon').css("font-size", "30px");
			$('#doughnutSubTitle').css("font-size", "20px");
			$('#doughnutSubTitle2').css("font-size", "20px");
			$('#imgOldPop').css("width", "60px");
			$('#imgOldPop').css("height", "60px");
			$("#btnExplainReport").hide();
		} else {
			$(".dot").show();
			$('#expandArrowsDoughnut').removeClass('fa-compress-arrows-alt');
			$('#expandArrowsDoughnut').addClass('fa-expand-arrows-alt');
			$('#doughnutContanier').css("position", "relative");
			$('#doughnutContanier').css("height", "30vh");
			$('#sigPieChart').css("height", "100%");
			$("#btnGoHome").show();
			$('#popOldTitle').css("font-size", "17px");
			$('#doughnutTbl1').css("font-size", "10px");
			$('#doughnutTbl2').css("font-size", "10px");
			$('.font-weight-bold').css("font-size", "1rem");
			$('#upPopIcon').css("width", "25px");
			$('#upPopIcon').css("height", "30px");
			$('#downPopIcon').css("width", "25px");
			$('#downPopIcon').css("height", "30px");
			$('#upOldPopIcon').css("font-size", "1rem");
			$('#doughnutSubTitle').css("font-size", "10px");
			$('#doughnutSubTitle2').css("font-size", "10px");
			$('#imgOldPop').css("width", "30px");
			$('#imgOldPop').css("height", "40px");
			$("#btnExplainReport").show();
		}
	});
	
	function getBSLegend(){
		$('#pg-busan-legend > .card-body').empty();
		$('#pg-busan-legend > .card-body').append('<p class="small text-muted mb-2">장래인구증감 (500m 격자, %)</p>'
			+ '<img src="'
			+ GISSERVER_URL
			+ '?service=WMS&request=GetLegendGraphic&format=image%2Fpng&width=15&height=15'
			+ '&LAYER=pop_grid_total'
			+ '&STYLE=pop_grid_rate'
			+ '&LEGEND_OPTIONS=forceLabels:on'
			+ '" />');
		$('#pg-busan-legend').show();
	}
	
	$('#pg-busan-legend .expand').on('click', function(e) {
		$('#pg-busan-legend .card-body').toggle();
	});
	
	getBSLegend();
	
	function getSJLegend(){
		$('#pg-sejong-legend > .card-body').empty();
		$('#pg-sejong-legend > .card-body').append('<p class="small text-muted mb-2">장래인구증감 (500m 격자, %)<</p>'
			+ '<img src="'
			+ GISSERVER_URL
			+ '?service=WMS&request=GetLegendGraphic&format=image%2Fpng&width=15&height=15'
			+ '&LAYER=pop_grid_total'
			+ '&STYLE=pop_grid_rate'
			+ '&LEGEND_OPTIONS=forceLabels:on'
			+ '" />');
		$('#pg-sejong-legend').show();
	}
	
	$('#pg-sejong-legend .expand').on('click', function(e) {
		$('#pg-sejong-legend .card-body').toggle();
	});
	
	getSJLegend();
	
	function getSigLegend(title, style){
		$('#pg-sig-legend > .card-body').empty();
		$('#pg-sig-legend > .card-body').append('<p class="small text-muted mb-2">' + title + '</p>'
			+ '<img src="'
			+ GISSERVER_URL
			+ '?service=WMS&request=GetLegendGraphic&format=image%2Fpng&width=15&height=15'
			+ '&LAYER=pop_sigungu_total'
			+ '&STYLE=' + style
			+ '&LEGEND_OPTIONS=forceLabels:on'
			+ '" />');
		$('#pg-sig-legend').show();
	}
	
	$('#pg-sig-legend .expand').on('click', function(e) {
		$('#pg-sig-legend .card-body').toggle();
	});
	
	getSigLegend('2040년 장래인구 밀도(명/km²)', 'pop40_sigungu_total');
	
	function getGridLegend(title, style){
		$('#pg-grid-legend > .card-body').empty();
		$('#pg-grid-legend > .card-body').append('<p class="small text-muted mb-2">' + title + '</p>'
			+ '<img src="'
			+ GISSERVER_URL
			+ '?service=WMS&request=GetLegendGraphic&format=image%2Fpng&width=15&height=15'
			+ '&LAYER=pop_grid_total'
			+ '&STYLE=' + style
			+ '&LEGEND_OPTIONS=forceLabels:on'
			+ '" />');
		$('#pg-grid-legend').show();
	}
	
	$('#pg-grid-legend .expand').on('click', function(e) {
		$('#pg-grid-legend .card-body').toggle();
	});
	
	getGridLegend('장래인구추계(500m 격자, 명)', 'pop40_grid_total');
	
	$('#btnExpandBS').on('click', function(e) {
		
		
	});
	
	$('#btnExplainReport').on('click', function(e) {
		$('#explainReport').show();
		$(".dot").hide();
		$('#expandArrowsBar').removeClass('fa-expand-arrows-alt');
		$('#expandArrowsBar').addClass('fa-compress-arrows-alt');
	});
	
	$('#btnExplainReport2').on('click', function(e) {
		$('#explainReport').show();
		$(".dot").hide();
		$('#expandArrowsBar').removeClass('fa-expand-arrows-alt');
		$('#expandArrowsBar').addClass('fa-compress-arrows-alt');
	});
	
	$('#btnCloseBtn').on('click', function(e) {
		$('#explainReport').hide();
		$(".dot").show();
		$('#expandArrowsBar').removeClass('fa-compress-arrows-alt');
		$('#expandArrowsBar').addClass('fa-expand-arrows-alt');
	});
});