
var mapContainer;
var map;    //지도객체
var marker;
var polyline;
var polygon;
var trafficTimer = null;
var imsTimer = null;
var customOverlay = null;
//var customImpl = null;

var ps;
var infowindow = null;
var troubleInfoWindow = null;

var _RegionCd;

/** 거리재기 객체*/
var drawingFlag = false; // 선이 그려지고 있는 상태를 가지고 있을 변수입니다
var drawingAreaFlag = false;

var clickLine // 마우스로 클릭한 좌표로 그려질 선 객체입니다
var areaOverlay; // 다각형의 면적정보를 표시할 커스텀오버레이 입니다
var textOverlay; // 다각형의 면적정보를 표시할 커스텀오버레이 입니다
var distanceOverlay; // 선의 거리정보를 표시할 커스텀오버레이 입니다
var dots = {}; // 선이 그려지고 있을때 클릭할 때마다 클릭 지점과 거리를 표시하는 커스텀 오버레이 배열입니다.

var roadMarker 		= [];
var searchMarker 	= [];	//장소
var imsMarker       = [];
var troubleMarker   = [];
var linkLineArr     = [];

var _groupXCoord = null;
var _groupYCoord = null;

var _SigFlag = '';
var _BackCircleFlag = true;
var IMS_VIEW_LEVEL  = 8;	//돌발 7

var overlayOn = false;
var imsPopOpen = null;

var roadviewMarker = null;
var g_Capture = false;
var g_CaptureLast = false;
var g_CaptureWait = false;
var _ToggleSiginfo = false;
var webSocketObj;

$(document).ready(function () {
	init();
});

function init() {
	//정보관리창 닫을때 regionCd intNo 가저와서 해당 위치로 이동..
	var masterLng = sessionStorage.getItem('masterLng');
	var masterLat = sessionStorage.getItem('masterLat');
	var lat = '37.482006958003396';
	var lng = '127.04298636046764';
	
	if(masterLng != null && masterLat != null)
	{
		lat = masterLat;
		lng = masterLng;
	}
	
	mapContainer = document.getElementById('map') // 지도를 표시할 div 
	var mapOption = {
		center: new kakao.maps.LatLng(lat, lng),
		level: _Level
	};
	
	map = new kakao.maps.Map(mapContainer, mapOption); // 지도생성
	// 지도와 스카이뷰 지도타입 컨트롤을 생성
	var mapTypeControl = new kakao.maps.MapTypeControl();
	// 지도에 컨트롤을 추가해야 지도위에 표시됩니다
	// kakao.maps.ControlPosition은 컨트롤이 표시될 위치를 정의하는데 TOPRIGHT는 오른쪽 위를 의미합니다
	map.addControl(mapTypeControl, kakao.maps.ControlPosition.TOPRIGHT);
	// 지도 확대 축소 줌 컨트롤을 생성
	var zoomControl = new kakao.maps.ZoomControl();
	map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
	
	//신호현시 줌,이동 이벤트 분리
	kakao.maps.event.addListener(map, 'zoom_changed', mapZoomBound)
	kakao.maps.event.addListener(map, 'dragend', mapMoveBound);//드래그 종료시 이벤트발생
	//kakao.maps.event.addListener(map, 'idle', mapIdle);
	
	kakao.maps.event.addListener(map, 'click', function(mouseEvent) {
		var nowlatLng = mouseEvent.latLng;
		//console.log(nowlatLng);
	});
	getSignalInfo();
	//mapZoomBound();
	//cvib
	getCvibInfo();
}

function customOverlayFnc(intNm,xCoord,yCoord) {
	if(customOverlay != null) customOverlay.setMap(null);
	if(intNm != 'region')
	{
		var content = '<div class ="sigCustom'+_Level+'"><span class="left"></span><span class="center">'+intNm+'<span id="customClose"><a href="javascript:customClose()">X</a></span></span><span class="right"></span></div>';
		// 커스텀 오버레이가 표시될 위치입니다 
		var position = new kakao.maps.LatLng(yCoord, xCoord);
		// 커스텀 오버레이를 생성합니다
		customOverlay = new kakao.maps.CustomOverlay({
		    position: position,
		    content: content,
		    zIndex: 100
		});
		// 커스텀 오버레이를 지도에 표시합니다
		customOverlay.setMap(map);
		$('.sigCustom'+_Level+'').parent().css('width','0px');
	}
	
}

function customClose()
{
	customOverlay.setMap(null);
}

function sigMapBoxClose()
{
	$('.sigInfoBox').hide();
}

/****************************************************************************
 * 로드뷰 관련
 ****************************************************************************/
//로드호출
function getRoadView() {
	drawingAreaStop();
	drawingStop();
	
	var roadCheck = $("#road").attr("class");
	
	 // 로드뷰 도로 오버레이가 보이게 합니다
	if(roadCheck == "road_on")
	{
		overlayOn = true,
	    container = document.getElementById('container'), // 지도와 로드뷰를 감싸고 있는 div 입니다
	    mapWrapper = document.getElementById('mapWrapper'), // 지도를 감싸고 있는 div 입니다
	    mapContainer = document.getElementById('map'), // 지도를 표시할 div 입니다 
	    rvContainer = document.getElementById('roadview'); //로드뷰를 표시할 div 입니다
		
		var mapCenter = map.getCenter();

		// 로드뷰 객체를 생성합니다 
		var rv = new kakao.maps.Roadview(rvContainer); 

		// 좌표로부터 로드뷰 파노라마 ID를 가져올 로드뷰 클라이언트 객체를 생성합니다 
		var rvClient = new kakao.maps.RoadviewClient(); 

		// 로드뷰에 좌표가 바뀌었을 때 발생하는 이벤트를 등록합니다 
		kakao.maps.event.addListener(rv, 'position_changed', function() {

		    // 현재 로드뷰의 위치 좌표를 얻어옵니다 
		    var rvPosition = rv.getPosition();

		    // 지도의 중심을 현재 로드뷰의 위치로 설정합니다
		    map.setCenter(rvPosition);
		    
		    // 지도 위에 로드뷰 도로 오버레이가 추가된 상태이면
		    if(overlayOn) 
		    {
		        // 마커의 위치를 현재 로드뷰의 위치로 설정합니다
		    	roadviewMarker.setPosition(rvPosition);
		    }
		});

		// 마커 이미지를 생성합니다
		var markImage = new kakao.maps.MarkerImage(
		    'http://t1.kakaocdn.net/localimg/localimages/07/mapapidoc/roadview_wk.png',
		    new kakao.maps.Size(35,39), {
		    //마커의 좌표에 해당하는 이미지의 위치를 설정합니다.
		    //이미지의 모양에 따라 값은 다를 수 있으나, 보통 width/2, height를 주면 좌표에 이미지의 하단 중앙이 올라가게 됩니다.
		    offset: new kakao.maps.Point(14, 39)
		});

		// 드래그가 가능한 마커를 생성합니다
		roadviewMarker = new kakao.maps.Marker({
		    image : markImage,
		    position: mapCenter,
		    draggable: true
		});
		
		// 마커에 dragend 이벤트를 등록합니다
		kakao.maps.event.addListener(roadviewMarker, 'dragend', function(mouseEvent) {
		    // 현재 마커가 놓인 자리의 좌표입니다 
		    var position = roadviewMarker.getPosition();

		    // 마커가 놓인 위치를 기준으로 로드뷰를 설정합니다
		    toggleRoadview(position);
		});

		//지도에 클릭 이벤트를 등록합니다
		kakao.maps.event.addListener(map, 'click', function(mouseEvent){
		    // 지도 위에 로드뷰 도로 오버레이가 추가된 상태가 아니면 클릭이벤트를 무시합니다 
		    if(!overlayOn) {
		        return;
		    }
		    
		    $('#rvWrapper').show();

		    // 클릭한 위치의 좌표입니다 
		    var position = mouseEvent.latLng;

		    // 마커를 클릭한 위치로 옮깁니다
		    roadviewMarker.setPosition(position);

		    // 클락한 위치를 기준으로 로드뷰를 설정합니다
		    toggleRoadview(position);
		});
		
		 // 지도 위에 로드뷰 도로 오버레이를 추가합니다
	     map.addOverlayMapTypeId(kakao.maps.MapTypeId.ROADVIEW);
	     // 지도 위에 마커를 표시합니다
	     roadviewMarker.setMap(map);
		
		//전달받은 좌표(position)에 가까운 로드뷰의 파노라마 ID를 추출하여 로드뷰를 설정하는 함수입니다
		function toggleRoadview(position) {
			rvClient.getNearestPanoId(position, 50, function(panoId) {
		     // 파노라마 ID가 null 이면 로드뷰를 숨깁니다
		     if (panoId === null)
		     {
		         toggleMapWrapper(true, position);
		     }
		     else 
		     {
		    	 toggleMapWrapper(false, position);
		         // panoId로 로드뷰를 설정합니다
		         rv.setPanoId(panoId, position);
		     }
		 });
		}

		//지도를 감싸고 있는 div의 크기를 조정하는 함수입니다
		function toggleMapWrapper(active, position) {
		 var widthDiff = wideFlag ? '10' : '338';
		 if (active) 
		 {
		     // 지도를 감싸고 있는 div의 너비가 100%가 되도록 class를 변경합니다 
		     //container.className = '';
			 
			 //$('#mapWrapper').css('width','100%');
			 $('#mapWrapper').css('width', 'calc(100% - ' + widthDiff +'px');
			 //$('#rvWrapper').css('width','0px');
			 $('#rvWrapper').css('display','none');

		     // 지도의 크기가 변경되었기 때문에 relayout 함수를 호출합니다
		     map.relayout();

		     // 지도의 너비가 변경될 때 지도중심을 입력받은 위치(position)로 설정합니다
		     map.setCenter(position);
		 } 
		 else 
		 {
			 //$('#mapWrapper').css('width','59%');
			 $('#mapWrapper').css('width', 'calc(60% - ' + widthDiff +'px');
			 //$('#rvWrapper').css('width','40%');
			 $('#rvWrapper').css('display','block');
			 // 지도의 크기가 변경되었기 때문에 relayout 함수를 호출합니다
	         map.relayout();

	         // 지도의 너비가 변경될 때 지도중심을 입력받은 위치(position)로 설정합니다
	         map.setCenter(position);
		 }
		}

		//지도 위의 로드뷰 도로 오버레이를 추가,제거하는 함수입니다
		function toggleOverlay(active) {
			if (active) {
		     overlayOn = true;

		     // 지도 위에 로드뷰 도로 오버레이를 추가합니다
		     map.addOverlayMapTypeId(kakao.maps.MapTypeId.ROADVIEW);

		     // 지도 위에 마커를 표시합니다
		     roadviewMarker.setMap(map);

		     // 마커의 위치를 지도 중심으로 설정합니다 
		     roadviewMarker.setPosition(map.getCenter());

		     // 로드뷰의 위치를 지도 중심으로 설정합니다
		     toggleRoadview(map.getCenter());
		 } else {
		     overlayOn = false;

		     // 지도 위의 로드뷰 도로 오버레이를 제거합니다
		     map.removeOverlayMapTypeId(kakao.maps.MapTypeId.ROADVIEW);

		     // 지도 위의 마커를 제거합니다
		     roadviewMarker.setMap(null);
		 }
		}

		//지도 위의 로드뷰 버튼을 눌렀을 때 호출되는 함수입니다
		function setRoadviewRoad() {
			 var control = document.getElementById('roadviewControl');
	
			 // 버튼이 눌린 상태가 아니면
			 if (control.className.indexOf('active') === -1) {
			     control.className = 'active';
	
			     // 로드뷰 도로 오버레이가 보이게 합니다
			     toggleOverlay(true);
			 } else {
			     control.className = '';
	
			     // 로드뷰 도로 오버레이를 제거합니다
			     toggleOverlay(false);
			 }
		}
		
	}
	else 
	{
		 roadViewClose(); 
	}
}

//로드뷰에서 X버튼을 눌렀을 때 로드뷰를 지도 뒤로 숨기는 함수입니다
function closeRoadview() {
	//$('#mapWrapper').css('width','100%');
	var width = wideFlag ? 'calc(100% - 10px)':'calc(100% - 338px)';
	$('#mapWrapper').css('width', width);
	//$('#rvWrapper').css('width','0px');
	$('#rvWrapper').css('display','none');
	// 지도의 크기가 변경되었기 때문에 relayout 함수를 호출합니다
    map.relayout();
    // 현재 마커가 놓인 자리의 좌표입니다
    if(roadviewMarker != null)
    {
    	var position = roadviewMarker.getPosition();
        // 지도의 너비가 변경될 때 지도중심을 입력받은 위치(position)로 설정합니다
        map.setCenter(position);
    }
}


//로드뷰닫기
function roadViewClose() {
	overlayOn = false;
	//div설정
	closeRoadview();
	// 지도 위의 마커를 제거합니다
    if(roadviewMarker != null) roadviewMarker.setMap(null);
    // 지도 위의 로드뷰 도로 오버레이를 제거합니다
    map.removeOverlayMapTypeId(kakao.maps.MapTypeId.ROADVIEW);
}

/****************************************************************************
 * 위치검색
 ****************************************************************************/
function searchPlaces() {
	//toolClose();
	//obeClose();
	
	// 검색 결과 목록이나 마커를 클릭했을 때 장소명을 표출할 인포윈도우를 생성합니다
	infowindow = new kakao.maps.InfoWindow({zIndex:100});
	
	var keyword = $("#keyword").val();
	
	if(keyword == "" || keyword == null) {
		
		alert("검색어를 입력해주세요.");
		return;
	}
	
	
	//장소 검색 객체를 생성합니다
	ps = new kakao.maps.services.Places(); 
	// 장소검색 객체를 통해 키워드로 장소검색을 요청합니다
    ps.keywordSearch( keyword, placesSearchCB); 
}
//장소검색이 완료됐을 때 호출되는 콜백함수 입니다
function placesSearchCB(data, status) {
    if (status === 'OK') {
        // 정상적으로 검색이 완료됐으면
        // 검색 목록과 마커를 표출합니다
        displayPlaces(data);
    } else if (status === 'ZERO_RESULT') {
        alert('검색 결과가 존재하지 않습니다.');
        return;
    } else if (status === 'ERROR') {
        alert('검색 결과 중 오류가 발생했습니다.');
        return;
    }
}
//검색 결과 목록과 마커를 표출하는 함수입니다
function displayPlaces(places) {
	
    var listEl = document.getElementById('placesList'); 
    var menuEl = document.getElementById('menu_wrap');
    var fragment = document.createDocumentFragment();
    var bounds = new kakao.maps.LatLngBounds();
    var listStr = "";
    
    // 검색 결과 목록에 추가된 항목들을 제거합니다
    removeAllChildNods(listEl);
    for ( var i = 0; i < places.length; i++ ) {
        // 마커를 생성하고 지도에 표시합니다
        var placePosition = new kakao.maps.LatLng(places[i].y, places[i].x),
            marker = addMarker(placePosition, i),
            itemEl =  getListItem(i, places[i], marker); // 검색 결과 항목 Element를 생성합니다
        // 검색된 장소 위치를 기준으로 지도 범위를 재설정하기위해
        // LatLngBounds 객체에 좌표를 추가합니다
        bounds.extend(placePosition);
        // 마커와 검색결과 항목에 mouseover 했을때
        //위치검색리스트 표출
        fragment.appendChild(itemEl);
    }
    // 검색결과 항목들을 검색결과 목록 Elemnet에 추가합니다
    listEl.appendChild(fragment);
    menuEl.scrollTop = 0;
    // 검색된 장소 위치를 기준으로 지도 범위를 재설정합니다
    map.setBounds(bounds);
    
}
// 검색결과 목록의 자식 Element를 제거하는 함수입니다
function removeAllChildNods(el) {   
    while (el.hasChildNodes()) {
        el.removeChild (el.lastChild);
    }
}
//검색결과 항목을 Element로 반환하는 함수입니다
function getListItem(index, places) {
    var el = document.createElement('li'),
    itemStr = '<span class="markerbg marker_' + (index+1) + '"></span>' +
                '<div class="info">' +
                '<a href="javascript:setBounds(\''+ places.y + '\', + \'' + places.x + '\', 4);"><h5 style="color:blue">' + places.place_name + '</h5></a>';
    if (places.address_name) {
        itemStr += '    <span>' + places.address_name + '</span>' +
                    '   <span class="jibun gray">' +  places.address_name  + '</span>';
    } else {
        itemStr += '    <span>' +  places.road_address_name  + '</span>'; 
    }
                 
      itemStr += '  <span class="tel">' + places.phone  + '</span>' +
                '</div>';           
    el.innerHTML = itemStr;
    el.className = 'item';
    return el;
}
//마커를 생성하고 지도 위에 마커를 표시하는 함수입니다
function addMarker(position, idx, title) {
	
    var imageSrc = 'http://i1.kakaocdn.net/localimg/localimages/07/mapapidoc/marker_number_blue.png', // 마커 이미지 url, 스프라이트 이미지를 씁니다
        imageSize = new kakao.maps.Size(36, 37),  // 마커 이미지의 크기
        imgOptions =  {
            spriteSize : new kakao.maps.Size(36, 691), // 스프라이트 이미지의 크기
            spriteOrigin : new kakao.maps.Point(0, (idx*46)+10), // 스프라이트 이미지 중 사용할 영역의 좌상단 좌표
            offset: new kakao.maps.Point(13, 37) // 마커 좌표에 일치시킬 이미지 내에서의 좌표
        },
        markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imgOptions),
            marker = new kakao.maps.Marker({
            position: position, // 마커의 위치
            image: markerImage 
        });
    marker.setMap(map); // 지도 위에 마커를 표출합니다
    searchMarker.push(marker);  // 배열에 생성된 마커를 추가합니다
    return marker;
}

/**
 * 지도 center이동
 * lat,lon : 좌표값
 * level : 레벨
 */
function setBounds(lat,lon, getLevel) {
	
	if($("#road").attr("class") == "road_on") {
		
		// 클릭한 위치의 좌표입니다 
        var position = new kakao.maps.LatLng(lat, lon);
        
        // 마커 이미지를 생성합니다
        var markImage = new kakao.maps.MarkerImage(
            'http://i1.kakaocdn.net/localimg/localimages/07/mapapidoc/roadview_wk.png',
            new kakao.maps.Size(35,39), {
            //마커의 좌표에 해당하는 이미지의 위치를 설정합니다.
            //이미지의 모양에 따라 값은 다를 수 있으나, 보통 width/2, height를 주면 좌표에 이미지의 하단 중앙이 올라가게 됩니다.
            offset: new kakao.maps.Point(14,39)
        });
        
        // 드래그가 가능한 마커를 생성합니다
        var marker = new kakao.maps.Marker({
            image : markImage,
            position: position,
            draggable: true
        });
        
        // 마커를 클릭한 위치로 옮깁니다
        marker.setPosition(position);
        roadViewMap(position);
        map.setLevel(_Level, {anchor: position});
        
	} else {
		
			_Level = map.getLevel();
			
			//지도이동시 ZOOMIN값이 동일한 경우 FLAG 체크
			var flag = "N"; 
			
			if(_Level == getLevel) {
				flag = "Y";
			}
			// 이동할 위도 경도 위치를 생성합니다 
		    var moveLatLon = new kakao.maps.LatLng(lat, lon);
		    
		    // 지도 중심을 이동 시킵니다
		    map.setCenter(moveLatLon);
		    map.setLevel(getLevel);
		    
		    if(flag == "Y") {
		    	
			   mapMoveBound();
		    }
	}
}

/****************************************************************************
 * 거리재기
 ****************************************************************************/
function getDrawRoad() {
	
	//면적재기초기화
	drawingAreaStop();
	//로드뷰닫기
	roadViewClose();
	
	if(($("#draw").attr("class") == "road_on") && ($("#road").attr("class") != "road_on")) {
		
		var path = "";
		
		distanceFlag = true;
		
		// 지도에 클릭 이벤트를 등록합니다
		// 지도를 클릭하면 선 그리기가 시작됩니다 그려진 선이 있으면 지우고 다시 그립니다
		kakao.maps.event.addListener(map, 'click', function(mouseEvent) {
			
			if(distanceFlag) {
				
				 // 마우스로 클릭한 위치입니다 
			    var clickPosition = mouseEvent.latLng;
			    // 지도 클릭이벤트가 발생했는데 선을 그리고있는 상태가 아니면
			    if (!drawingFlag) {
			    	//거리재기초기화
			    	drawingStop();
			       
			    	// 상태를 true로, 선이 그리고있는 상태로 변경합니다
			        drawingFlag = true;
			        distanceFlag = true;
			    
			        // 클릭한 위치를 기준으로 선을 생성하고 지도위에 표시합니다
			        clickLine = new kakao.maps.Polyline({
			            map: map, // 선을 표시할 지도입니다 
			            path: [clickPosition], // 선을 구성하는 좌표 배열입니다 클릭한 위치를 넣어줍니다
			            strokeWeight: 3, // 선의 두께입니다 
			            strokeColor: '#db4040', // 선의 색깔입니다
			            strokeOpacity: 1, // 선의 불투명도입니다 0에서 1 사이값이며 0에 가까울수록 투명합니다
			            strokeStyle: 'solid' // 선의 스타일입니다
			        });
			        
			        // 선이 그려지고 있을 때 마우스 움직임에 따라 선이 그려질 위치를 표시할 선을 생성합니다
			        moveLine = new kakao.maps.Polyline({
			            strokeWeight: 3, // 선의 두께입니다 
			            strokeColor: '#db4040', // 선의 색깔입니다
			            strokeOpacity: 0.5, // 선의 불투명도입니다 0에서 1 사이값이며 0에 가까울수록 투명합니다
			            strokeStyle: 'solid' // 선의 스타일입니다    
			        });
			    
			        // 클릭한 지점에 대한 정보를 지도에 표시합니다
			        displayCircleDot(clickPosition, 0);
			            
			    } else { // 선이 그려지고 있는 상태이면
			        // 그려지고 있는 선의 좌표 배열을 얻어옵니다
			        var path = clickLine.getPath();
			        // 좌표 배열에 클릭한 위치를 추가합니다
			        path.push(clickPosition);
			        
			        // 다시 선에 좌표 배열을 설정하여 클릭 위치까지 선을 그리도록 설정합니다
			        clickLine.setPath(path);
			        var distance = Math.round(clickLine.getLength());
			        displayCircleDot(clickPosition, distance);
			    }
			}
		});
		    
		// 지도에 마우스무브 이벤트를 등록합니다
		// 선을 그리고있는 상태에서 마우스무브 이벤트가 발생하면 그려질 선의 위치를 동적으로 보여주도록 합니다
		kakao.maps.event.addListener(map, 'mousemove', function (mouseEvent) {
		    // 지도 마우스무브 이벤트가 발생했는데 선을 그리고있는 상태이면
		    if (drawingFlag){
		        
		        // 마우스 커서의 현재 위치를 얻어옵니다 
		        var mousePosition = mouseEvent.latLng; 
		        // 마우스 클릭으로 그려진 선의 좌표 배열을 얻어옵니다
		        var path = clickLine.getPath();
		        
		        // 마우스 클릭으로 그려진 마지막 좌표와 마우스 커서 위치의 좌표로 선을 표시합니다
		        var movepath = [path[path.length-1], mousePosition];
		        moveLine.setPath(movepath);    
		        moveLine.setMap(map);
		        
		        /*var distance = Math.round(clickLine.getLength() + moveLine.getLength()), // 선의 총 거리를 계산합니다
		            content = '<div class="dotOverlay distanceInfo">총거리 <span class="number">' + distance + '</span>m</div>'; // 커스텀오버레이에 추가될 내용입니다
		        
		        // 거리정보를 지도에 표시합니다
		        showDistance(content, mousePosition); */
		        
		        // 지도 위에 면적정보 커스텀오버레이가 표시되고 있다면 지도에서 제거합니다
		        if (textOverlay) {
		        	textOverlay.setMap(null);
		        	textOverlay = null;
		        }
		        
		        var content = '<div class="textInfo">마우스오른쪽 버튼을 <br/>\n\r 누르시면 끝마칩니다.</div>'; // 커스텀오버레이에 추가될 내용입니다
                
	            // 면적정보를 지도에 표시합니다
		        textOverlay = new kakao.maps.CustomOverlay({
	                map: map, // 커스텀오버레이를 표시할 지도입니다 
	                content: content,  // 커스텀오버레이에 표시할 내용입니다
	                xAnchor: 0,
	                yAnchor: 0,
	                position: mousePosition  // 커스텀오버레이를 표시할 위치입니다. 위치는 다각형의 마지막 좌표로 설정합니다
	            });      
		    }             
		});                 
		// 지도에 마우스 오른쪽 클릭 이벤트를 등록합니다
		// 선을 그리고있는 상태에서 마우스 오른쪽 클릭 이벤트가 발생하면 선 그리기를 종료합니다
		kakao.maps.event.addListener(map, 'rightclick', function (mouseEvent) {
		    // 지도 오른쪽 클릭 이벤트가 발생했는데 선을 그리고있는 상태이면
		    if (drawingFlag) {
		        
		        // 마우스무브로 그려진 선은 지도에서 제거합니다
		        moveLine.setMap(null);
		        moveLine = null;  
		        
		        // 마우스 클릭으로 그린 선의 좌표 배열을 얻어옵니다
		        var path = clickLine.getPath();
		    
		        // 선을 구성하는 좌표의 개수가 2개 이상이면
		        if (path.length > 1) {
		            // 마지막 클릭 지점에 대한 거리 정보 커스텀 오버레이를 지웁니다
		            if (dots[dots.length-1].distance) {
		                dots[dots.length-1].distance.setMap(null);
		                dots[dots.length-1].distance = null;    
		            }
		            var distance = Math.round(clickLine.getLength()), // 선의 총 거리를 계산합니다
		                content = getTimeHTML(distance); // 커스텀오버레이에 추가될 내용입니다
		                
		            // 그려진 선의 거리정보를 지도에 표시합니다
		            showDistance(content, path[path.length-1]);  
		             
		        } else {
		            // 선을 구성하는 좌표의 개수가 1개 이하이면 
		            // 지도에 표시되고 있는 선과 정보들을 지도에서 제거합니다.
		            deleteClickLine();
		            deleteCircleDot(); 
		            deleteDistnce();
		        }
		        
		        // 상태를 false로, 그리지 않고 있는 상태로 변경합니다
		        drawingFlag = false;   
		        
		        if (textOverlay) {
		        	textOverlay.setMap(null);
		        	textOverlay = null;
		        }
		    }  
		});    
		
	}else {
		
		//거리재기초기화
		drawingStop();
	}
}
//거리재기초기화
function drawingStop() {
	
	 // 상태를 true로, 선이 그리고있는 상태로 변경합니다
    drawingFlag = false;
    
    distanceFlag = false;   
    // 지도 위에 선이 표시되고 있다면 지도에서 제거합니다
    deleteClickLine();
    
    // 지도 위에 커스텀오버레이가 표시되고 있다면 지도에서 제거합니다
    deleteDistnce();
    // 지도 위에 선을 그리기 위해 클릭한 지점과 해당 지점의 거리정보가 표시되고 있다면 지도에서 제거합니다
    deleteCircleDot();
    
    if (textOverlay) {
    	textOverlay.setMap(null);
    	textOverlay = null;
    }
}
//클릭으로 그려진 선을 지도에서 제거하는 함수입니다
function deleteClickLine() {
    if (clickLine) {
        clickLine.setMap(null);    
        clickLine = null;        
    }
}
// 마우스 드래그로 그려지고 있는 선의 총거리 정보를 표시하거
// 마우스 오른쪽 클릭으로 선 그리가 종료됐을 때 선의 정보를 표시하는 커스텀 오버레이를 생성하고 지도에 표시하는 함수입니다
function showDistance(content, position) {
    
    if (distanceOverlay) { // 커스텀오버레이가 생성된 상태이면
        
        // 커스텀 오버레이의 위치와 표시할 내용을 설정합니다
        distanceOverlay.setPosition(position);
        distanceOverlay.setContent(content);
        
    } else { // 커스텀 오버레이가 생성되지 않은 상태이면
        
        // 커스텀 오버레이를 생성하고 지도에 표시합니다
        distanceOverlay = new kakao.maps.CustomOverlay({
            map: map, // 커스텀오버레이를 표시할 지도입니다
            content: content,  // 커스텀오버레이에 표시할 내용입니다
            position: position, // 커스텀오버레이를 표시할 위치입니다.
            xAnchor: 0,
            yAnchor: 0,
            zIndex: 3  
        });      
    }
}
// 그려지고 있는 선의 총거리 정보와 
// 선 그리가 종료됐을 때 선의 정보를 표시하는 커스텀 오버레이를 삭제하는 함수입니다
function deleteDistnce () {
    if (distanceOverlay) {
        distanceOverlay.setMap(null);
        distanceOverlay = null;
    }
}
// 선이 그려지고 있는 상태일 때 지도를 클릭하면 호출하여 
// 클릭 지점에 대한 정보 (동그라미와 클릭 지점까지의 총거리)를 표출하는 함수입니다
function displayCircleDot(position, distance) {
    // 클릭 지점을 표시할 빨간 동그라미 커스텀오버레이를 생성합니다
    var circleOverlay = new kakao.maps.CustomOverlay({
        content: '<span class="dot"></span>',
        position: position,
        zIndex: 1
    });
    // 지도에 표시합니다
    circleOverlay.setMap(map);
    if (distance > 0) {
        // 클릭한 지점까지의 그려진 선의 총 거리를 표시할 커스텀 오버레이를 생성합니다
        var distanceOverlay = new kakao.maps.CustomOverlay({
            content: '<div class="dotOverlay">거리 <span class="number">' + distance + '</span>m</div>',
            position: position,
            yAnchor: 1,
            zIndex: 2
        });
        // 지도에 표시합니다
        distanceOverlay.setMap(map);
    }
    // 배열에 추가합니다
    dots.push({circle:circleOverlay, distance: distanceOverlay});
}
// 클릭 지점에 대한 정보 (동그라미와 클릭 지점까지의 총거리)를 지도에서 모두 제거하는 함수입니다
function deleteCircleDot() {
    var i;
    for ( i = 0; i < dots.length; i++ ){
        if (dots[i].circle) { 
            dots[i].circle.setMap(null);
        }
        if (dots[i].distance) {
            dots[i].distance.setMap(null);
        }
    }
    dots = [];
}
// 마우스 우클릭 하여 선 그리기가 종료됐을 때 호출하여 
// 그려진 선의 총거리 정보와 거리에 대한 도보, 자전거 시간을 계산하여
// HTML Content를 만들어 리턴하는 함수입니다
function getTimeHTML(distance) {
    // 도보의 시속은 평균 4km/h 이고 도보의 분속은 67m/min입니다
    var walkkTime = distance / 67 | 0;
    var walkHour = '', walkMin = '';
    // 계산한 도보 시간이 60분 보다 크면 시간으로 표시합니다
    if (walkkTime > 60) {
        walkHour = '<span class="number">' + Math.floor(walkkTime / 60) + '</span>시간 '
    }
    walkMin = '<span class="number">' + walkkTime % 60 + '</span>분'
    // 자전거의 평균 시속은 16km/h 이고 이것을 기준으로 자전거의 분속은 267m/min입니다
    var bycicleTime = distance / 227 | 0;
    var bycicleHour = '', bycicleMin = '';
    // 계산한 자전거 시간이 60분 보다 크면 시간으로 표출합니다
    if (bycicleTime > 60) {
        bycicleHour = '<span class="number">' + Math.floor(bycicleTime / 60) + '</span>시간 '
    }
    bycicleMin = '<span class="number">' + bycicleTime % 60 + '</span>분'
    // 거리와 도보 시간, 자전거 시간을 가지고 HTML Content를 만들어 리턴합니다
    var content = '<ul class="dotOverlay distanceInfo">';
    content += '    <li>';
    content += '        <span class="label">총거리</span><span class="number">' + distance + '</span>m';
    content += '    </li>';
    content += '    <li>';
    content += '        <span class="label">도보</span>' + walkHour + walkMin;
    content += '    </li>';
    content += '    <li>';
    content += '        <span class="label">자전거</span>' + bycicleHour + bycicleMin;
    content += '    </li>';
    content += '</ul>'
    return content;
}
/****************************************************************************
 * 면적재기
 ****************************************************************************/
function getDrawArea() {
	
	//거리재기초기화
	drawingStop(); 
	//로드뷰닫기
	roadViewClose();
	
	if(($("#area").attr("class") == "road_on") && ($("#road").attr("class") != "road_on")) {
		
		var path = "";
		
		areaFlag = true;
		
		kakao.maps.event.addListener(map, 'click', function(mouseEvent) {
			if(areaFlag) {
				
				// 마우스로 클릭한 위치입니다 
			    var clickPosition = mouseEvent.latLng; 
			    
			    // 지도 클릭이벤트가 발생했는데 다각형이 그려지고 있는 상태가 아니면
			    if (!drawingAreaFlag) {
			    	
			    	//면적재기초기화
			    	drawingAreaStop();
			        // 상태를 true로, 다각형을 그리고 있는 상태로 변경합니다
			    	drawingAreaFlag = true;
			    	areaFlag = true;
			        
			        // 그려지고 있는 다각형을 표시할 다각형을 생성하고 지도에 표시합니다
			        drawingPolygon = new kakao.maps.Polygon({
			            map: map, // 다각형을 표시할 지도입니다
			            path: [clickPosition], // 다각형을 구성하는 좌표 배열입니다 클릭한 위치를 넣어줍니다
			            strokeWeight: 3, // 선의 두께입니다 
			            strokeColor: '#00a0e9', // 선의 색깔입니다
			            strokeOpacity: 1, // 선의 불투명도입니다 0에서 1 사이값이며 0에 가까울수록 투명합니다
			            strokeStyle: 'solid', // 선의 스타일입니다
			            fillColor: '#00a0e9', // 채우기 색깔입니다
			            fillOpacity: 0.2 // 채우기 불투명도입니다
			        }); 
			        
			        // 그리기가 종료됐을때 지도에 표시할 다각형을 생성합니다 
			        polygon = new kakao.maps.Polygon({ 
			            path: [clickPosition], // 다각형을 구성하는 좌표 배열입니다 클릭한 위치를 넣어줍니다 
			            strokeWeight: 3, // 선의 두께입니다 
			            strokeColor: '#00a0e9', // 선의 색깔입니다   
			            strokeOpacity: 1, // 선의 불투명도입니다 0에서 1 사이값이며 0에 가까울수록 투명합니다
			            strokeStyle: 'solid', // 선의 스타일입니다
			            fillColor: '#00a0e9', // 채우기 색깔입니다
			            fillOpacity: 0.2 // 채우기 불투명도입니다
			        });
			        
			    } else { // 다각형이 그려지고 있는 상태이면 
			        
			        // 그려지고 있는 다각형의 좌표에 클릭위치를 추가합니다
			        // 다각형의 좌표 배열을 얻어옵니다
			        var drawingPath = drawingPolygon.getPath();
			    
			        // 좌표 배열에 클릭한 위치를 추가하고
			        drawingPath.push(clickPosition);
			        
			        // 다시 다각형 좌표 배열을 설정합니다
			        drawingPolygon.setPath(drawingPath);
			         
			    
			        // 그리기가 종료됐을때 지도에 표시할 다각형의 좌표에 클릭 위치를 추가합니다
			        // 다각형의 좌표 배열을 얻어옵니다
			        var path = polygon.getPath();
			    
			        // 좌표 배열에 클릭한 위치를 추가하고
			        path.push(clickPosition);
			        
			        // 다시 다각형 좌표 배열을 설정합니다
			        polygon.setPath(path);
			        
			    }
			}
		});
		// 지도에 마우스무브 이벤트를 등록합니다
		// 다각형을 그리고있는 상태에서 마우스무브 이벤트가 발생하면 그려질 다각형의 위치를 동적으로 보여주도록 합니다
		kakao.maps.event.addListener(map, 'mousemove', function (mouseEvent) {
		    // 지도 마우스무브 이벤트가 발생했는데 다각형을 그리고있는 상태이면
		    if (drawingAreaFlag){
		        // 마우스 커서의 현재 위치를 얻어옵니다 
		        var mousePosition = mouseEvent.latLng; 
		        
		        // 그려지고있는 다각형의 좌표배열을 얻어옵니다
		        var path = drawingPolygon.getPath();
		        
		        // 마우스무브로 추가된 마지막 좌표를 제거합니다
		        if (path.length > 1) {
		            path.pop();
		        } 
		        
		        // 마우스의 커서 위치를 좌표 배열에 추가합니다
		        path.push(mousePosition);
		        // 그려지고 있는 다각형의 좌표를 다시 설정합니다
		        drawingPolygon.setPath(path);
		        
		        // 지도 위에 면적정보 커스텀오버레이가 표시되고 있다면 지도에서 제거합니다
		        if (textOverlay) {
		        	textOverlay.setMap(null);
		        	textOverlay = null;
		        }
		        
		        var content = '<div class="textInfo">마우스오른쪽 버튼을 <br/>\n\r 누르시면 끝마칩니다.</div>'; // 커스텀오버레이에 추가될 내용입니다
                
	            // 면적정보를 지도에 표시합니다
		        textOverlay = new kakao.maps.CustomOverlay({
	                map: map, // 커스텀오버레이를 표시할 지도입니다 
	                content: content,  // 커스텀오버레이에 표시할 내용입니다
	                xAnchor: 0,
	                yAnchor: 0,
	                position: mousePosition  // 커스텀오버레이를 표시할 위치입니다. 위치는 다각형의 마지막 좌표로 설정합니다
	            });      
		        
		    }             
		});     
		// 지도에 마우스 오른쪽 클릭 이벤트를 등록합니다
		// 다각형을 그리고있는 상태에서 마우스 오른쪽 클릭 이벤트가 발생하면 그리기를 종료합니다
		kakao.maps.event.addListener(map, 'rightclick', function (mouseEvent) {
		    // 지도 오른쪽 클릭 이벤트가 발생했는데 다각형을 그리고있는 상태이면
		    if (drawingAreaFlag) {
		        
		        // 그려지고있는 다각형을  지도에서 제거합니다
		        drawingPolygon.setMap(null);
		        drawingPolygon = null;  
		        
		        // 클릭된 죄표로 그릴 다각형의 좌표배열을 얻어옵니다
		        var path = polygon.getPath();
		    
		        // 다각형을 구성하는 좌표의 개수가 3개 이상이면 
		        if (path.length > 2) {
		            
		            // 지도에 다각형을 표시합니다
		            polygon.setMap(map); 
		            var area = Math.round(polygon.getArea()), // 다각형의 총면적을 계산합니다
		                content = '<div class="info">총면적 <span class="areaNumber"> ' + area + '</span> m<sup>2</sup></div>'; // 커스텀오버레이에 추가될 내용입니다
		                
		            // 면적정보를 지도에 표시합니다
		            areaOverlay = new kakao.maps.CustomOverlay({
		                map: map, // 커스텀오버레이를 표시할 지도입니다 
		                content: content,  // 커스텀오버레이에 표시할 내용입니다
		                xAnchor: 0,
		                yAnchor: 0,
		                position: path[path.length-1]  // 커스텀오버레이를 표시할 위치입니다. 위치는 다각형의 마지막 좌표로 설정합니다
		            });      
		             
		        } else { 
		            
		            // 다각형을 구성하는 좌표가 2개 이하이면 다각형을 지도에 표시하지 않습니다 
		            polygon = null;  
		        }
		        
		        // 상태를 false로, 그리지 않고 있는 상태로 변경합니다
		        drawingAreaFlag = false;    
		        
		        if (textOverlay) {
		        	textOverlay.setMap(null);
		        	textOverlay = null;
		        }
		    }  
		});
	
	}else {
		
		//면적재기초기화
		drawingAreaStop();
	}
	
}
//면적재기초기화
function drawingAreaStop() {
	
	 drawingAreaFlag = false;   
	 areaFlag = false;
	 
	// 지도 위에 다각형이 표시되고 있다면 지도에서 제거합니다
    if (polygon) {  
        polygon.setMap(null);      
        polygon = null;  
    }
    
    // 지도 위에 면적정보 커스텀오버레이가 표시되고 있다면 지도에서 제거합니다
    if (areaOverlay) {
        areaOverlay.setMap(null);
        areaOverlay = null;
    }
    
    if (textOverlay) {
    	textOverlay.setMap(null);
    	textOverlay = null;
    }
}

//마커초기화
function markerRemove(temp) {
	
	var str = "";
	
	//로드뷰아이콘
	if(temp == "road") {
		str = roadMarker;
		roadMarker = [];
	}
	
	if(temp == "search") {
		
		str = searchMarker;
		searchMarker = [];
	}
	
	if(temp == "ims") {
		str = imsMarker;
		imsMarker = [];
		var UserAgent = window.navigator.userAgent;
		if (UserAgent.match(/iPhone|iPod|Android|Windows CE|BlackBerry|Symbian|Windows Phone|webOS|Opera Mini|Opera Mobi|POLARIS|IEMobile|lgtelecom|nokia|SonyEricsson/i) != null || UserAgent.match(/LG|SAMSUNG|Samsung/) != null)
		{
			
		}
		else
		{
			toolClose();
		}
	}
	
	if(temp == "imsLink") {
		str = linkLineArr;
		linkLineArr = [];
	}
	
	if(temp == "trouble") {
		console.log(temp);
		str = troubleMarker;
		troubleMarker = [];
		var UserAgent = window.navigator.userAgent;
		if (UserAgent.match(/iPhone|iPod|Android|Windows CE|BlackBerry|Symbian|Windows Phone|webOS|Opera Mini|Opera Mobi|POLARIS|IEMobile|lgtelecom|nokia|SonyEricsson/i) != null || UserAgent.match(/LG|SAMSUNG|Samsung/) != null)
		{
			
		}
		else
		{
			toolClose();
		}
	}
	
	// 지도 위에 표시되고 있는 마커를 모두 제거합니다
    for ( var i = 0; i < str.length; i++ ) {
    	str[i].setMap(null);
    }
   
    str = [];
}

/********************************************************************************
 * 돌발 정보조회
*********************************************************************************/
function getIMS() {
	
	var flag = $("#ims").attr("class");
	
	var imsId = $("#imsId").val();
	
	_Level = map.getLevel();
	
	if(_Level < IMS_VIEW_LEVEL) {
		
		if(flag == "road_on") {
			
			markerRemove("trouble");
			
			//타이머 호출 정지
			if(imsTimer != null) clearTimeout(imsTimer);
			
			//타이머 호출 시작
			imsTimer = setTimeout(function(){ getIMS() }, 1000 * 60);
			
			var url = 'getIMS.do';
			var param = 'MIN_X='+map.getBounds().getSouthWest().getLng()+
		    '&MIN_Y='+map.getBounds().getSouthWest().getLat()+
		    '&MAX_X='+map.getBounds().getNorthEast().getLng()+
		    '&MAX_Y='+map.getBounds().getNorthEast().getLat()+
		    '&INCIDENTID='+imsId;
			
			requestService(url, param, getIMSCallback);
			
		} else {
			
			markerRemove("ims");
			//타이머 호출 정지
			if(imsTimer != null) clearTimeout(imsTimer);
		}
	}
	else
	{
		markerRemove("ims");
		//타이머 호출 정지
		if(imsTimer != null) clearTimeout(imsTimer);
	}
}

function getIMSCallback(list) {
	var iRow = list.length;
	var points	= new Array();
	var img		= new Array();
	var title	= new Array();
	
	var LOCATION_TYPE_CD = "";
	var INCIDENT_GRADE_CD = "";	//돌발등급
	var INCIDENT_TYPE_CD = "";	//5일 경우 전면통제
	var INCIDENT_INSERT_CD = "";
	
	_Level = map.getLevel();
	
	if(iRow > 0) {
		
		if(_Level > 6) {
		//	showLoaderAll(true);
		}
		
		for(var i = 0; i < iRow; i++ ){
			
			LOCATION_TYPE_CD 	= list[i].LOCATION_TYPE_CD ;
			INCIDENT_GRADE_CD 	= list[i].INCIDENT_GRADE_CD;
			INCIDENT_INSERT_CD 	= list[i].INCIDENT_INSERT_CD;
			INCIDENT_TYPE_CD	= list[i].INCIDENT_TYPE_CD;
			
			if(LOCATION_TYPE_CD == "C0101"){
				
				if(INCIDENT_GRADE_CD == "A0401"){
					
					if(INCIDENT_INSERT_CD == "G"){
						
						img[i] = "btn_roadDanger.png";
						
					}else if(INCIDENT_TYPE_CD == "1"){
						
						img[i] = "btn_accident_A.gif";
						
					}else if(INCIDENT_TYPE_CD == "2"){
						
						img[i] = "btn_repair_A.gif";
						
					}else if(INCIDENT_TYPE_CD == "3"){
						
						img[i] = "btn_event_A.gif";
						
					}else if(INCIDENT_TYPE_CD == "4"){
						
						img[i] = "btn_alert_A.gif";
						
					}else if(INCIDENT_TYPE_CD == "5"){
						
						img[i] = "btn_trouble_A.gif";
					}
					
				}else{
					
					if(INCIDENT_INSERT_CD == "G"){
						
						img[i] = "btn_roadDanger.png";
						
					}else if(INCIDENT_TYPE_CD == "1"){
						
						img[i] = "btn_accident.png";
						
					}else if(INCIDENT_TYPE_CD == "2"){
						
						img[i] = "btn_repair.png";
						
					}else if(INCIDENT_TYPE_CD == "3"){
						
						img[i] = "btn_event.png";
						
					}else if(INCIDENT_TYPE_CD == "4"){
						
						img[i] = "btn_alert.png";
						
					}else if(INCIDENT_TYPE_CD == "5"){
						
						img[i] = "btn_trouble.png";
					}
					
				}
		
			}else if(LOCATION_TYPE_CD == "C0102"){
				
				if(INCIDENT_GRADE_CD == "A0401"){
					
					if(INCIDENT_TYPE_CD == "1"){
						
						img[i] = "btn_accident_A.gif";
						
					}else if(INCIDENT_TYPE_CD == "2"){
						
						img[i] = "btn_repair_A.gif";
						
					}else if(INCIDENT_TYPE_CD == "3"){
						
						img[i] = "btn_event_A.gif";
						
					}else if(INCIDENT_TYPE_CD == "4"){
						
						img[i] = "btn_alert_A.gif";
						
					}else if(INCIDENT_TYPE_CD == "5"){
						
						img[i] = "btn_trouble_A.gif";
					}
					
				}else{
					
					if(INCIDENT_TYPE_CD == "1"){
						
						img[i] = "btn_accident.png";
						
					}else if(INCIDENT_TYPE_CD == "2"){
						
						img[i] = "btn_repair.png";
						
					}else if(INCIDENT_TYPE_CD == "3"){
						
						img[i] = "btn_event.png";
						
					}else if(INCIDENT_TYPE_CD == "4"){
						
						img[i] = "btn_alert.png";
						
					}else if(INCIDENT_TYPE_CD == "5"){
						
						img[i] = "btn_trouble.png";
					}
				}
			
			}else if(LOCATION_TYPE_CD == "C0103"){
			
				if(INCIDENT_GRADE_CD == "A0401"){
					if(INCIDENT_TYPE_CD == "1"){
						img[i] = "btn_accident_A.gif";
					}else if(INCIDENT_TYPE_CD == "2"){
						img[i] = "btn_repair_A.gif";
					}else if(INCIDENT_TYPE_CD == "3"){
						img[i] = "btn_event_A.gif";
					}else if(INCIDENT_TYPE_CD == "4"){
						img[i] = "btn_alert_A.gif";
					}else if(INCIDENT_TYPE_CD == "5"){
						img[i] = "btn_trouble_A.gif";
					}
					
				}else{
					if(INCIDENT_TYPE_CD == "1"){
						img[i] = "btn_accident.png";
					}else if(INCIDENT_TYPE_CD == "2"){
						img[i] = "btn_repair.png";
					}else if(INCIDENT_TYPE_CD == "3"){
						img[i] = "btn_event.png";
					}else if(INCIDENT_TYPE_CD == "4"){
						img[i] = "btn_alert.png";
					}else if(INCIDENT_TYPE_CD == "5"){
						img[i] = "btn_trouble.png";
					}
				}
			}
			
			
			//결과값 배열
			points[i] = [list[i].LOCATION_DATA_Y, list[i].LOCATION_DATA_X, list[i].INCIDENT_ID,
			             list[i].INCIDENT_TYPE_CD, list[i].INCIDENT_TITLE, list[i].INCIDENT_REPORT,
			             list[i].START_DATE, list[i].END_DATE,list[i].IMS_IMAGES_PATH, list[i].LOCATION_DATA];
			
			title[i]  = "돌발정보";
		}
		markerRemove("ims");
		//markerRemove("imsLink");
		//마커표출
		setMarker(points, title, "ims", img, 50);
		//링크표출
		//setLink(points);
	
	}else {
		
		//showLoaderAll(false);
	}
}

//마커지도에 표출
function setMarker(points, title, temp, img, markerSize) {
	
	// 지도를 재설정할 범위정보를 가지고 있을 LatLngBounds 객체를 생성합니다
	var bounds = new kakao.maps.LatLngBounds();  
	
	for (var i = 0; i < points.length; i++) {
		
		// 마커 이미지의 이미지 주소입니다
		var imgPath = MAP_IMAGE_PATH + img[i];
		
		// 마커 이미지의 이미지 크기 입니다
		var imageSize = new kakao.maps.Size(markerSize, markerSize); 
    
		// 마커 이미지를 생성합니다    
	    var markerImage = createMarkerImage(imgPath, imageSize);    
	    //마커생성
       createMarker(points[i], title[i], markerImage, temp);  
       
	   //돌발정보일 때만
   	   if(temp == "ims") {
   	    	
   	    	imsMarker.push(marker);  // 배열에 생성된 마커를 추가합니다
   	    	imsMarker[i].setMap(map);
   	    	marker = imsMarker[i];
   	    }
   	   
   	   //전면통제
   	   if(temp == "trouble") {
   	    	
   		    troubleMarker.push(marker);  // 배열에 생성된 마커를 추가합니다
   		    troubleMarker[i].setMap(map);
   	    	marker = troubleMarker[i];
   	    }
   	    
   	    //돌발정보 인포윈도우
	   	(function(marker, points, title) {
	   		
	   		 kakao.maps.event.addListener(marker, 'click', function() {
	   			 
	   			 	 // 이미 열려있는(위치가 같은) 마커를 클릭했을때 해당 팝업을 다시 닫는다.
		   			 if(imsPopOpen==points[0]+'-'+points[1]){
		   				toolClose();
				   		imsPopOpen = '';
				   		
				   		//돌발링크 이미지 삭제
				   		//linkLineRemove();
				   		
		   			 }else{
		   				   //돌발 & 전면통제
				           if(temp == "ims" || temp == "trouble") {
				        	   
				         		toolClose();
				         		getImsPop(marker, points, title, temp);
				         	}
				         	
		   			 }
		         	
		         });
	   		 
	         kakao.maps.event.addListener(marker, 'mouseover', function() {
	        	 
	        	 //돌발 & 전면통제
	         	if(temp == "ims" || temp == "trouble") {
	         		toolClose();
	         		getImsPop(marker, points, title, temp);
	         	}
	         	
	         });
	         
	     	kakao.maps.event.addListener(marker, 'mouseout', function() {
		   		
	     		toolClose();
		   		//돌발링크 이미지 삭제
		   		//linkLineRemove();
	        });
	        
	 		
	     })(marker, points[i], title[i]);
	    
	}
	//marker 컨트롤
	markerView();
	
}

/*********************************************************************
 * marker 이미지 zoomin 될때 컨트롤
 *********************************************************************/
function markerView() {
	
	var ims  	 	= $("#ims").attr("class");
    
    //지도의  레벨을 얻어옵니다
	_Level = map.getLevel();
	/**---------------------------------------------------------------
     * 돌발 보임
     * ---------------------------------------------------------------*/
	if(_Level < IMS_VIEW_LEVEL) {
		
		if(ims == "road_on") {
			
			if(imsMarker.length > 0) {
				for ( var i = 0; i < imsMarker.length; i++ ) {
					 imsMarker[i].setVisible(true);
				} 
			}else {
				if(imsFlag){getIMS();}
			}
		}
		
	/**---------------------------------------------------------------
     * 돌발 삭제
     * ---------------------------------------------------------------*/	
	} else {
		
		markerRemove("ims");
		//markerRemove("imsLink");
	}
	
}

//마커이미지의 주소와, 크기, 옵션으로 마커 이미지를 생성하여 리턴하는 함수입니다
function createMarkerImage(src, size) {
	
    var markerImage = new kakao.maps.MarkerImage(src, size);
    return markerImage;            
}
//마커생성
function createMarker(points, title, markerImage, temp) {
	
	marker = new kakao.maps.Marker({
        position: new kakao.maps.LatLng(points[0],points[1]), // 마커를 표시할 위치
        title 	: title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
        clickable : true,
        image 	: markerImage // 마커 이미지 
    });
	
    return marker;  
}   

/****************************************************************************************************
 * 돌발 & 전면통제 인포윈도우 닫기
****************************************************************************************************/
function toolClose() {
	if(infowindow != null) infowindow.close();
	if(troubleInfoWindow != null) troubleInfoWindow.close();
}

/********************************************************************************
 * 현재위치 찾기
*********************************************************************************/

function getMyLocation(){
	
	if (navigator.geolocation) {
		
		var geo_options = {
			    enableHighAccuracy: true, // 불리언
			    maximumAge        : 0, // 천분의 1초 단위
			    timeout           : 10000 // 천분의 1초 단위
			};
		
        navigator.geolocation.getCurrentPosition(showPosition, showError, geo_options);
        
    } else {
        alert("Geolocation is not supported by this browser.");
    }
	
}

function showPosition(position) {
	var myCenter = null;
	myCenter = new kakao.maps.LatLng(position.coords.latitude, position.coords.longitude);
    map.setCenter(myCenter);
    
    var msg = "당신은 " +
    new Date(position.timestamp).toLocaleString() + "에 " +
    " 위도 " + position.coords.latitude + 
    " 경도 " + position.coords.longitude + "에서 "+ 
    " 약 " + position.coords.accuracy + " 미터 떨어진 곳에 있습니다.";
    
    //console.log(msg);

}

function showError(error) {
	var errMsg='';
    switch(error.code) {
        case error.PERMISSION_DENIED:
        	errMsg = "User denied the request for Geolocation."; 
            break;
        case error.POSITION_UNAVAILABLE:
        	errMsg = "Location information is unavailable.";
            break;
        case error.TIMEOUT:
        	errMsg = "The request to get user location timed out.";
            break;
        case error.UNKNOWN_ERROR:
        	errMsg = "An unknown error occurred.";
            break;
    }
    alert(errMsg);
}

/********************************************************************************
 * 신호정보 팝업 토글
*********************************************************************************/

function toggleSiginfo() {
	if($("#toggle_siginfo").attr("class") == "road_on")
	{
		_ToggleSiginfo = true;
		 if(customOverlay != null) customOverlay.setMap(null);
	}
	else _ToggleSiginfo = false;
	getSignalInfo();
}

/****************************************************************************
 * 좌표검색
 ****************************************************************************/
function moveToPosition() {
	const $lctnX = $('#lctn_x_coord');
	const $lctnY = $('#lctn_y_coord');
	var xCrdn = $lctnX.val();
	var yCrdn = $lctnY.val();
	if (!xCrdn) {
		alert("X 좌표 값을 입력해주세요.");
		return $lctnX.focus();
	}
	
	if (!yCrdn) {
		alert("Y 좌표 값을 입력해주세요.");
		return $lctnY.focus();
	}
	
	if (isNaN(Number(xCrdn)) || xCrdn.length < 3) {
		alert("X 좌표 : "+xCrdn+"\n부적절한 좌표값입니다. 다시 입력해주세요.");
		return $lctnX.focus();
	}
	
	if (isNaN(Number(yCrdn)) || yCrdn.lenth < 2) {
		alert("Y 좌표 : "+yCrdn+"\n부적절한 좌표값입니다. 다시 입력해주세요.");
		return $lctnY.focus();
	}
	
	if (!xCrdn.includes('.')) {
		xCrdn = xCrdn.substring(0, 3) + '.' + xCrdn.substring(3, xCrdn.length);
	}
	
	if (!yCrdn.includes('.')) {
		yCrdn = yCrdn.substring(0, 2) + '.' + yCrdn.substring(2, yCrdn.length);
	}
	const position = new kakao.maps.LatLng(yCrdn, xCrdn);
	map.setCenter(position);
	map.setLevel(3);
	mapZoomBound();
}