/*********************************************************************
 * ims 			: 돌발
 * troble 		: 전면통제
 * obe 			: obeId
 * cctv 		: 시내도로CCTV
 * roadCctv 	: 고속도로/국도CCTV
 * roadCctvE05 	: 도로공사(고속도로/국도CCTV)
 * road 		: 로드뷰아이콘
 ********************************************************************/
var mapContainer;
var map;    //지도객체
var marker;
var polyline;
var polygon;
var level = 4;
var lastLevel;
//인포윈도우 드래그 하기 위해 필요한  
//드래그 시작좌표, infoWindow의 위치좌표를 넣을 변수를 선업합니다
var startX, startY, startOverlayPoint;
var infowindow; 			//돌발
var troubleInfoWindow;		//전면통제
var cctvInfoWindow;			//시내cctv
var obeInfowindow;			//obeId
var cctvInfo = [];
var roadCctvInfoWindow;		//국도cctv
var roadCctvInfo = [];
var roadCctvE05InfoWindow;	//도로공사(고속도로)cctv
var roadCctvE05Info = [];
var overlayOn = false; 		//로드뷰플래그
//마커를 담을 배열입니다
var cctvMarker = [];
var cctvMarkerId = [];
var obeIdMarker = [];	//시내도로 cctv
var imsMarker = [];
var troubleMarker = [];
var roadCctvMarker = [];	//도로공사(고속도로)cctv
var roadCctvMarkerId = [];
var roadCctvE05Marker = [];	//국도 cctv
var roadCctvE05MarkerId = [];
var roadMarker = [];
var searchMarker = [];	//장소
var detectMarker = [];	//현재위치이동
var linkLineArr = []; //돌발링크
var lineVtxEventArr = [];
var polyVtxEventArr = [];
var linkLineEventArr = [];
//장소 검색 객체를 생성합니다
var ps;
/** 거리재기 객체*/
var drawingFlag = false; // 선이 그려지고 있는 상태를 가지고 있을 변수입니다
var moveLine; // 선이 그려지고 있을때 마우스 움직임에 따라 그려질 선 객체 입니다
var clickLine // 마우스로 클릭한 좌표로 그려질 선 객체입니다
var distanceOverlay; // 선의 거리정보를 표시할 커스텀오버레이 입니다
var dots = {}; // 선이 그려지고 있을때 클릭할 때마다 클릭 지점과 거리를 표시하는 커스텀 오버레이 배열입니다.
var drawingAreaFlag = false; // 다각형이 그려지고 있는 상태를 가지고 있을 변수입니다
var drawingPolygon; // 그려지고 있는 다각형을 표시할 다각형 객체입니다
var polygon; // 그리기가 종료됐을 때 지도에 표시할 다각형 객체입니다
var areaOverlay; // 다각형의 면적정보를 표시할 커스텀오버레이 입니다
var textOverlay; // 다각형의 면적정보를 표시할 커스텀오버레이 입니다
var closeOverlay; // 면적그리기를 종료하는 버튼입니다.
var distanceFlag = false;
var areaFlag = false;
var imsFlag = true;
var cctvFlag = true;
var roadCctvFlag = true;
var roadCctvE05Flag = true;
var imsPopOpen = ''; // 돌발 팝업 표출 여부
var cctvPlayerUrl = '/cab/AcesTechXPlayer2_license_free.cab#version=2,3,0,2';
var roadviewMarker = null;
var weatherInfoArr = [];
var weatherInfoObj = {};
var weatherInfoWindow = null;
var weatherInfoTimeId = null;
var geoX;
var goeY;
var mapTypeControl = null;
var zoomControl = null;

// 선, 영역 색상
var POLYGON_DISASTER_STROKE_COLOR = "#8b00ff";
var POLYGON_DISASTER_FILL_COLOR = "#521482";
var POLYGON_DISASTER_FILL_OPACITY = '0.2';
var POLYGON_INCIDENT_STROKE_COLOR = "#FF8000";
var POLYGON_INCIDENT_FILL_COLOR = "#FE9A2E";
var POLYGON_INCIDENT_FILL_OPACITY = '0.5';


function init() {

  mapContainer = document.getElementById('map') // 지도를 표시할 div 
  var mapOption = {
    center: new daum.maps.LatLng(37.564684, 126.978087),
    level: level
  };

  map = new daum.maps.Map(mapContainer, mapOption); // 지도생성
  // 지도와 스카이뷰 지도타입 컨트롤을 생성
  mapTypeControl = new daum.maps.MapTypeControl();
  // 지도 확대 축소 줌 컨트롤을 생성
  zoomControl = new daum.maps.ZoomControl();

  if (displayType === DISPLAY_PC) {
    // 지도에 컨트롤을 추가해야 지도위에 표시됩니다
    // daum.maps.ControlPosition은 컨트롤이 표시될 위치를 정의하는데 TOPRIGHT는 오른쪽 위를 의미합니다
    map.addControl(mapTypeControl, daum.maps.ControlPosition.TOPRIGHT);
    map.addControl(zoomControl, daum.maps.ControlPosition.RIGHT);
  }

  //바운더리 좌표값 조회
  boundPoint();
  //확대 수준이 변경되면 발생한다.
  daum.maps.event.addListener(map, 'zoom_changed', mapMoveBound);

  daum.maps.event.addListener(map, 'dragend', mapMoveBound);//드래그 종료시 이벤트발생

  //신호현시 줌,이동 이벤트 분리
  daum.maps.event.addListener(map, 'zoom_changed', mapSigZoomBound);

  daum.maps.event.addListener(map, 'dragend', mapSigMoveBound);

  //updateDebugConsole();

}

//바운더리 좌표값
function boundPoint() {

  // 지도 영역정보를 얻어옵니다 
  var bounds = map.getBounds();

  // 영역정보의 남서쪽 정보를 얻어옵니다 
  var swLatlng = bounds.getSouthWest();

  // 영역정보의 북동쪽 정보를 얻어옵니다 
  var neLatlng = bounds.getNorthEast();

  $("#min_x").val(swLatlng.getLng() - 0.005);
  $("#min_y").val(swLatlng.getLat() - 0.005);
  $("#max_x").val(neLatlng.getLng() + 0.005);
  $("#max_y").val(neLatlng.getLat() + 0.005);
}

//지도이동시
function mapMoveBound() {
  //지도의  레벨을 얻어옵니다
  level = map.getLevel();

  // 지도 영역정보를 얻어옵니다 
  var bounds = map.getBounds();

  // 영역정보의 남서쪽 정보를 얻어옵니다 
  var swLatlng = bounds.getSouthWest();

  // 영역정보의 북동쪽 정보를 얻어옵니다 
  var neLatlng = bounds.getNorthEast();

  var ims = $("#ims").attr("class");
  var cctv = $("#cctv").attr("class");
  var roadCctv = $("#roadCctv").attr("class");
  var roadCctvE05 = $("#roadCctvE05").attr("class");
  var weather = $("#weather").attr("class");

  if (detectMarker.length > 0) markerRemove("detect");
  if (weatherInfoArr.length > 0) weatherRemove();

  //바운더리 처리
  if (($("#min_x").val() > swLatlng.getLng()) || ($("#min_y").val() > swLatlng.getLat()) ||
    ($("#max_x").val() < neLatlng.getLng()) || ($("#max_y").val() < neLatlng.getLat())) {
    //바운더리 좌표값
    boundPoint();

    //OBEID 마커 초기화
    markerRemove("obeId");

    //전면통제 마커 초기화
    markerRemove("trouble");

    //국도 CCTV, 고속도로 CCTV
    if (level < CCTVE05_VIEW_LEVEL) {

      //국도 CCTV조회
      if (roadCctvE05.indexOf("road_on") !== -1) {
        getCctvE05Road();
        roadCctvE05Flag = false;
      }

      //고속도로 CCTV조회
      if (roadCctv.indexOf("road_on") !== -1) {
        getCctvRoad();
        roadCctvFlag = false;
      }
    }

    //시내CCTV
    if (level < CCTV_VIEW_LEVEL) {

      //시내CCTV조회
      if (cctv.indexOf("road_on") !== -1) {

        getCCTV();
        cctvFlag = false;
      }

    }

    if (level < IMS_VIEW_LEVEL) {

      if (ims.indexOf("road_on") !== -1) {

        getIMS();
        imsFlag = false;
      }
    }

  } else {

    imsFlag = true;
    cctvFlag = true;
    roadCctvFlag = true;
    roadCctvE05Flag = true;

  }

  if (weather.indexOf("road_on") !== -1) {
    if (lastLevel != level) if (weatherInfoWindow != null) weatherInfoWindow.close();
    getWeatherInfo();
  }

  //바운더리 좌표값
  boundPoint();
  //marker 컨트롤
  markerView();

  //updateDebugConsole();

  lastLevel = level;

}
/*********************************************************************
 * marker 이미지 zoomin 될때 컨트롤
 *********************************************************************/
function markerView() {

  var ims = $("#ims").attr("class");
  var cctv = $("#cctv").attr("class");
  var roadCctv = $("#roadCctv").attr("class");
  var roadCctvE05 = $("#roadCctvE05").attr("class");

  //지도의  레벨을 얻어옵니다
  level = map.getLevel();
  /**---------------------------------------------------------------
     * 돌발 보임
     * ---------------------------------------------------------------*/
  if (level < IMS_VIEW_LEVEL) {

    if (ims.indexOf("road_on") !== -1) {

      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");
  }

  /**---------------------------------------------------------------
     * 시내도로CCTV
     * ---------------------------------------------------------------*/
  if (level < CCTV_VIEW_LEVEL) {

    if (cctv.indexOf("road_on") !== -1) {

      if (cctvMarker.length > 0) {

        var setMarkerSize;
        var imgScr = "images/map/cctv03.png"; //조병조수정 - 이미지 변경

        for (var i = 0; i < cctvMarker.length; i++) {

          if (level > CCTV_LARGE_VIEW_LEVEL) {
            setMarkerSize = createMarkerImage(imgScr, new daum.maps.Size(SMALLCCTVSIZE, SMALLCCTVSIZE));
          } else {
            setMarkerSize = createMarkerImage(imgScr, new daum.maps.Size(LARGECCTVSIZE, LARGECCTVSIZE));
          }

          cctvMarker[i].setImage(setMarkerSize);
          marker = cctvMarker[i];

          cctvMarker[i].setVisible(true);
        }

        //cctv마커가없으면 다시 조회
      } else {
        if (cctvFlag) { getCCTV(); }
      }
    }

    /**---------------------------------------------------------------
       * 시내도로CCTV
       * ---------------------------------------------------------------*/
  } else {
    cctvClose();
    markerRemove("cctv");
  }

  /**---------------------------------------------------------------
     * 도로공사(고속도로) CCTV  보임
     * ---------------------------------------------------------------*/
  if (level < CCTVE05_VIEW_LEVEL) {

    if (roadCctv.indexOf("road_on") !== -1) {

      if (roadCctvMarker.length > 0) {

        var setMarkerSize;
        var imgScr = "images/map/cctv01.png"; //조병조수정 - 이미지 변경

        for (var i = 0; i < roadCctvMarker.length; i++) {

          if (level > CCTV_LARGE_VIEW_LEVEL) {
            setMarkerSize = createMarkerImage(imgScr, new daum.maps.Size(SMALLCCTVSIZE, SMALLCCTVSIZE));
          } else {
            setMarkerSize = createMarkerImage(imgScr, new daum.maps.Size(LARGECCTVSIZE, LARGECCTVSIZE));
          }

          roadCctvMarker[i].setImage(setMarkerSize);
          marker = roadCctvMarker[i];

          roadCctvMarker[i].setVisible(true);
        }
        //roadCctv마커가없으면 다시 조회
      } else {
        if (roadCctvFlag) { getCctvRoad(); }
      }
    }

    if (roadCctvE05.indexOf("road_on") !== -1) {

      if (roadCctvE05Marker.length > 0) {

        var setMarkerSize;
        var imgScr = "images/map/cctv02.png"; //조병조수정 - 이미지 변경

        for (var i = 0; i < roadCctvE05Marker.length; i++) {

          if (level > CCTV_LARGE_VIEW_LEVEL) {
            setMarkerSize = createMarkerImage(imgScr, new daum.maps.Size(SMALLCCTVSIZE, SMALLCCTVSIZE));

          } else {

            setMarkerSize = createMarkerImage(imgScr, new daum.maps.Size(LARGECCTVSIZE, LARGECCTVSIZE));
          }

          roadCctvE05Marker[i].setImage(setMarkerSize);
          marker = roadCctvE05Marker[i];

          roadCctvE05Marker[i].setVisible(true);
        }

        //roadCctvE05마커가없으면 다시 조회
      } else {

        if (roadCctvE05Flag) { getCctvE05Road(); }
      }
    }

    /**---------------------------------------------------------------
       * 도로공사(고속도로) 삭제
       * ---------------------------------------------------------------*/
  } else {
    roadCctvClose();
    roadCctvE05Close();
    markerRemove("roadCctv");
    markerRemove("roadCctvE05");
  }

  showLoaderAll(false);

  updateDebugConsole();
}
//마커지도에 표출
function setMarker(points, title, temp, img, markerSize) {
  var cctvRoad = nvl($("#cctvRoad").val(), "");
  var cctvBtnOn = nvl($("#cctv").attr("class"), "");

  // 지도를 재설정할 범위정보를 가지고 있을 LatLngBounds 객체를 생성합니다
  var bounds = new daum.maps.LatLngBounds();

  for (var i = 0; i < points.length; i++) {
    // 마커 이미지의 이미지 주소입니다
    var imgPath = MAP_IMAGE_PATH + img[i];
    // 마커 이미지의 이미지 크기 입니다
    var imageSize = new daum.maps.Size(markerSize, markerSize);
    // 마커 이미지를 생성합니다    
    var markerImage = createMarkerImage(imgPath, imageSize);
    //마커생성
    createMarker(points[i], title[i], markerImage, temp);

    if (temp == "cctv") {

      cctvMarker.push(marker);  // 배열에 생성된 마커를 추가합니다
      cctvMarkerId.push(points[i][4]);
      cctvMarker[i].setMap(map);
      marker = cctvMarker[i];
    }

    if (temp == "roadCctv") {

      roadCctvMarker.push(marker);  // 배열에 생성된 마커를 추가합니다
      roadCctvMarkerId.push(points[i][4]);
      roadCctvMarker[i].setMap(map);
      marker = roadCctvMarker[i];
    }

    //도로공사
    if (temp == "roadCctvE05") {
      roadCctvE05Marker.push(marker);  // 배열에 생성된 마커를 추가합니다
      roadCctvE05MarkerId.push(points[i][4]);
      roadCctvE05Marker[i].setMap(map);
      marker = roadCctvE05Marker[i];
    }

    //돌발정보일 때만
    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];
    }

    //OBEID
    if (temp == "obeId") {

      obeIdMarker.push(marker);  // 배열에 생성된 마커를 추가합니다
      obeIdMarker[i].setMap(map);
      marker = obeIdMarker[i];
    }

    //돌발정보 인포윈도우
    (function(marker, points, title) {

      daum.maps.event.addListener(marker, 'click', function() {

        // 이미 열려있는(위치가 같은) 마커를 클릭했을때 해당 팝업을 다시 닫는다.
        if (imsPopOpen == points[0] + '-' + points[1]) {
          toolClose();
          obeClose();
          imsPopOpen = '';

          //돌발링크 이미지 삭제
          linkLineRemove();

        } else {
          //돌발 & 전면통제
          if (temp == "ims" || temp == "trouble") {

            toolClose();
            getImsPop(marker, points, title, temp);
          }

          if (temp == "obeId") {

            obeClose();
            getObePop(marker, points, title);
          }
        }
      });

      daum.maps.event.addListener(marker, 'mouseover', function() {
        //돌발 & 전면통제
        if (temp == "ims" || temp == "trouble") {
          toolClose();
          getImsPop(marker, points, title, temp);
        }

        if (temp == "obeId") {
          obeClose();
          getObePop(marker, points, title);
        }
      });

      daum.maps.event.addListener(marker, 'mouseout', function() {
        toolClose();
        obeClose();
        //돌발링크 이미지 삭제
        linkLineRemove();
      });


    })(marker, points[i], title[i]);

    if ((cctvRoad != "") && (cctvRoad == points[i][4])) {
      getCctvPop(marker, points[i], title[i]);
    }

    //인포 윈도우
    (function(marker, points, title) {
      daum.maps.event.addListener(marker, 'click', function() {
        //marker.setClickable(true);
        //CCTV
        if (temp == "cctv") {
          getCctvPop(marker, points, title);
        }

        //국도 cctv
        if (temp == "roadCctv") {
          getRoadCctvPop(marker, points, title);
        }

        //도로공사(고속도로) cctv
        if (temp == "roadCctvE05") {
          getRoadCctvE05Pop(marker, points, title);
        }
      });

    })(marker, points[i], title[i]);

  }
  //marker 컨트롤
  markerView();

  //인포윈도우 바운더리
  cctvBound();
  roadCctvBound();
  roadCctvE05Bound();
}

function setLink(points) {
  var lineVtxArr = [];
  var polyVtxArr = [];
  var typeArr = [];
  for (var ii = 0; ii < points.length; ii++) {
    if (points[ii][9] != null) {
      if (points[ii][9].substring(0, 4).indexOf('LINE') > -1) {
        var lineVtx = (points[ii][9].substring(4)).replace('((', '').replace('))', '');
        lineVtxArr.push(lineVtx.split(','));
      }
      else if (points[ii][9].substring(0, 4).indexOf('POLY') > -1) {
        var polyVtx = (points[ii][9].substring(9)).replace('((', '').replace('))', '');
        polyVtxArr.push(polyVtx.split(','));
        typeArr.push(points[ii][3]);
      }
    }
  }
  
  if (lineVtxArr != null) {
    drawLink(lineVtxArr);
    drawPoly(typeArr, polyVtxArr);
  }
}

function drawLink(arr, flag) {
  var strokeColorBack = '#000000';
  var strokeColor = '#FFFF00';
  if (flag == 'pop') {
    strokeColorBack = '#0000FF';
    strokeColor = '#0000FF';
  }
  for (var ii = 0; ii < arr.length; ii++) {
    var linkPolyLineArr = [];
    var linkBackLine;
    var linkLine;
    var linkBackEventLine;
    var linkEventLine;

    for (var jj = 0; jj < arr[ii].length; jj++) {
      var vtxArr = arr[ii][jj].split(' ');
      var x = vtxArr[0];
      var y = vtxArr[1];
      linkPolyLineArr.push(new daum.maps.LatLng(y, x));
    }

    if (flag == 'pop') {
      linkBackEventLine = new daum.maps.Polyline({
        path: linkPolyLineArr,
        strokeWeight: 6,
        strokeColor: strokeColorBack,
        strokeOpacity: 1,
        strokeStyle: 'solid',
        endArrow: true,
        zIndex: 10
      });

      linkEventLine = new daum.maps.Polyline({
        path: linkPolyLineArr,
        strokeWeight: 4,
        strokeColor: strokeColor,
        strokeOpacity: 1,
        strokeStyle: 'dash',
        endArrow: true,
        zIndex: 10
      });

      linkBackEventLine.setMap(map);
      linkEventLine.setMap(map);
      linkLineEventArr.push(linkBackEventLine, linkEventLine);
    }
    else {
      linkBackLine = new daum.maps.Polyline({
        path: linkPolyLineArr,
        strokeWeight: 6,
        strokeColor: strokeColorBack,
        strokeOpacity: 1,
        strokeStyle: 'solid',
        endArrow: true,
        zIndex: 5
      });

      linkLine = new daum.maps.Polyline({
        path: linkPolyLineArr,
        strokeWeight: 4,
        strokeColor: strokeColor, //yellow
        strokeOpacity: 1,
        strokeStyle: 'dash',
        endArrow: true,
        zIndex: 6
      });

      linkBackLine.setMap(map);
      linkLine.setMap(map);
      linkLineArr.push(linkBackLine, linkLine);
    }

  }
}

function drawPoly(typeCd, arr, flag) {
   
  for(var ii = 0; ii < arr.length; ii++)
  {
    var linkPolyLineArr = [];
    var polygon;
    var polygonEvent;
    
    for(var jj = 0; jj < arr[ii].length; jj++)
    {
      var vtxArr = arr[ii][jj].split(' ');
      var x = vtxArr[0];
      var y = vtxArr[1];
      linkPolyLineArr.push(new daum.maps.LatLng(y, x));
    }
    
    if (flag == 'pop') {
      polygonEvent = new daum.maps.Polygon({
        path: linkPolyLineArr,
        strokeWeight: 4,
        strokeColor: (typeCd == '6') ? POLYGON_DISASTER_STROKE_COLOR : POLYGON_INCIDENT_STROKE_COLOR, 
        strokeOpacity: 0.8,
        strokeStyle: 'solid',
        fillColor: (typeCd == '6') ? POLYGON_DISASTER_FILL_COLOR : POLYGON_INCIDENT_FILL_COLOR,
        fillOpacity: 0.3,
        zIndex: 9
      });
            
      polygonEvent.setMap(map);
      linkLineEventArr.push(polygonEvent);
    } else {
      polygon = new daum.maps.Polygon({
        path: linkPolyLineArr,
        strokeWeight: 4,
        strokeColor: '',
        strokeOpacity: 0.8,
        strokeStyle: 'solid',
        fillColor: '',
        fillOpacity: 0.2, // 채우기 불투명도 입니다
        zIndex: 5
      });
  
      if (typeCd[ii] == '6') {
        polygon.Eb[0].strokeColor = POLYGON_DISASTER_STROKE_COLOR;
        polygon.Eb[0].fillColor = POLYGON_DISASTER_FILL_COLOR;
      } else {
        polygon.Eb[0].strokeColor = POLYGON_INCIDENT_STROKE_COLOR;
        polygon.Eb[0].fillColor = POLYGON_INCIDENT_FILL_COLOR;
      }    
       
      polygon.setMap(map);
      linkLineArr.push(polygon);
    }
  }
}



//돌발링크 mouseover
function linkLineEvent(points, typeCd) {
  if (points != null) {
    if (points.substring(0, 4).indexOf('LINE') > -1) {
      var lineVtx = (points.substring(4)).replace('((', '').replace('))', '');
      lineVtxEventArr.push(lineVtx.split(','));
    }
    else if (points.substring(0, 4).indexOf('POLY') > -1) {
      var polyVtx = (points.substring(9)).replace('((', '').replace('))', '');
      polyVtxEventArr.push(polyVtx.split(','));
    }
    drawPoly(typeCd, polyVtxEventArr, 'pop');
    drawLink(typeCd, lineVtxEventArr, 'pop');
  }
}

//돌발링크 mouseout
function linkLineRemove() {
  for (var ii = 0; ii < linkLineEventArr.length; ii++) {
    linkLineEventArr[ii].setMap(null);
  }
  linkLineEventArr = [];
  lineVtxEventArr = [];
  polyVtxEventArr = [];
}

//target node에 이벤트 핸들러를 등록하는 함수힙니다  
function addEventHandle(target, type, callback) {

  if (target.addEventListener) {

    target.addEventListener(type, callback);

  } else {

    target.attachEvent('on' + type, callback);
  }
}
//target node에 등록된 이벤트 핸들러를 제거하는 함수힙니다 
function removeEventHandle(target, type, callback) {

  if (target.removeEventListener) {

    target.removeEventListener(type, callback);

  } else {

    target.detachEvent('on' + type, callback);
  }
}
//마커이미지의 주소와, 크기, 옵션으로 마커 이미지를 생성하여 리턴하는 함수입니다
function createMarkerImage(src, size) {

  var markerImage = new daum.maps.MarkerImage(src, size);
  return markerImage;
}
//마커생성
function createMarker(points, title, markerImage, temp) {


  marker = new daum.maps.Marker({
    position: new daum.maps.LatLng(points[0], points[1]), // 마커를 표시할 위치
    title: title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
    clickable: true,
    image: markerImage // 마커 이미지 
  });

  //	marker.setClickable(true);
  return marker;
}

/**
 * 지도 center이동
 * lat,lon : 좌표값
 * level : 레벨
 */
function setBounds(lat, lon, getLevel) {

  if ($("#road").attr("class").indexOf("road_on") !== -1) {

    // 클릭한 위치의 좌표입니다 
    var position = new daum.maps.LatLng(lat, lon);

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

    // 드래그가 가능한 마커를 생성합니다
    var marker = new daum.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 daum.maps.LatLng(lat, lon);

    // 지도 중심을 이동 시킵니다
    map.setCenter(moveLatLon);
    map.setLevel(getLevel);

    if (flag == "Y") {

      mapMoveBound();
    }
  }
}
//마커초기화
function markerRemove(temp) {

  var str = "";

  if (temp == "cctv") {
    str = cctvMarker;
    cctvMarker = [];
    cctvMarkerId = [];
  }

  if (temp == "ims") {
    str = imsMarker;
    imsMarker = [];
    toolClose();
  }

  if (temp == "trouble") {
    str = troubleMarker;
    troubleMarker = [];
    toolClose();
  }

  if (temp == "roadCctv") {

    str = roadCctvMarker;
    roadCctvMarker = [];
    roadCctvMarkerId = [];
  }

  if (temp == "roadCctvE05") {

    str = roadCctvE05Marker;
    roadCctvE05Marker = [];
    roadCctvE05MarkerId = [];
  }

  //로드뷰아이콘
  if (temp == "road") {
    str = roadMarker;
    roadMarker = [];
  }

  if (temp == "search") {

    str = searchMarker;
    searchMarker = [];
  }

  if (temp == "obeId") {

    str = obeIdMarker;
    obeIdMarker = [];
    obeClose();
  }

  if (temp == "imsLink") {
    str = linkLineArr;
    linkLineArr = [];
  }

  if (temp == "detect") {

    str = detectMarker;
    detectMarker = [];
  }

  // 지도 위에 표시되고 있는 마커를 모두 제거합니다
  for (var i = 0; i < str.length; i++) {
    str[i].setMap(null);
  }

  str = [];
}

/****************************************************************************
 * 로드뷰 관련
 ****************************************************************************/
//로드호출
function getRoadView() {
  drawingAreaStop();
  drawingStop();

  var roadCheck = $("#road").attr("class");

  // 로드뷰 도로 오버레이가 보이게 합니다
  if (roadCheck.indexOf("road_on") !== -1) {

    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 daum.maps.Roadview(rvContainer);

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

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

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

      // 지도의 중심을 현재 로드뷰의 위치로 설정합니다
      map.setCenter(rvPosition);

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

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

    // 드래그가 가능한 마커를 생성합니다
    roadviewMarker = new daum.maps.Marker({
      image: markImage,
      position: mapCenter,
      draggable: true
    });

    // 마커에 dragend 이벤트를 등록합니다
    daum.maps.event.addListener(roadviewMarker, 'dragend', function(mouseEvent) {
      // 현재 마커가 놓인 자리의 좌표입니다 
      var position = roadviewMarker.getPosition();

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

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

      $('#rvWrapper').show();

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

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

      // 클락한 위치를 기준으로 로드뷰를 설정합니다
      toggleRoadview(position);
    });

    // 지도 위에 로드뷰 도로 오버레이를 추가합니다
    map.addOverlayMapTypeId(daum.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) {
      if (active) {
        // 지도를 감싸고 있는 div의 너비가 100%가 되도록 class를 변경합니다 
        //container.className = '';

        $('#mapWrapper').css('width', '100%');
        $('#rvWrapper').css('width', '0px');

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

        // 지도의 너비가 변경될 때 지도중심을 입력받은 위치(position)로 설정합니다
        map.setCenter(position);
      }
      else {
        $('#mapWrapper').css('width', '50%');
        $('#rvWrapper').css('width', '50%');

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

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

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

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

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

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

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

        // 지도 위의 로드뷰 도로 오버레이를 제거합니다
        map.removeOverlayMapTypeId(daum.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%');
  $('#rvWrapper').css('width', '0px');
  // 지도의 크기가 변경되었기 때문에 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(daum.maps.MapTypeId.ROADVIEW);
}

/****************************************************************************
 * 위치검색
 ****************************************************************************/
function searchPlaces() {
  toolClose();
  obeClose();

  // 검색 결과 목록이나 마커를 클릭했을 때 장소명을 표출할 인포윈도우를 생성합니다
  infowindow = new daum.maps.InfoWindow({ zIndex: 1 });

  var keyword = nvl($("#keyword").val(), "");

  if (keyword == "") {

    alert("검색어를 입력해주세요.");
    return;
  }

  //장소 검색 객체를 생성합니다
  ps = new daum.maps.services.Places();
  // 장소검색 객체를 통해 키워드로 장소검색을 요청합니다
  ps.keywordSearch(keyword, placesSearchCB);
}
//장소검색이 완료됐을 때 호출되는 콜백함수 입니다
function placesSearchCB(data, status) {
  if (status === daum.maps.services.Status.OK) {
    // 정상적으로 검색이 완료됐으면
    // 검색 목록과 마커를 표출합니다
    displayPlaces(data);
    //displayPlaces(data.places);
  } else if (status === daum.maps.services.Status.ZERO_RESULT) {
    alert('검색 결과가 존재하지 않습니다.');
    return;
  } else if (status === daum.maps.services.Status.ERROR) {
    alert('검색 결과 중 오류가 발생했습니다.');
    return;
  }
}
//검색 결과 목록과 마커를 표출하는 함수입니다
function displayPlaces(places) {
  var menuEl = document.getElementById('menu_wrap');
  var listEl = document.getElementById('placesList');
  var fragment = document.createDocumentFragment();
  var bounds = new daum.maps.LatLngBounds();
  var listStr = "";

  // 검색 결과 목록에 추가된 항목들을 제거합니다
  removeAllChildNods(listEl);
  // 지도에 표시되고 있는 마커를 제거합니다
  markerRemove("search");

  //OBEID 마커 초기화
  markerRemove("obeId");

  //전면통제 마커 초기화
  markerRemove("trouble");

  for (var i = 0; i < places.length; i++) {
    // 마커를 생성하고 지도에 표시합니다
    // 검색된 장소 위치를 기준으로 지도 범위를 재설정하기위해
    var placePosition = new daum.maps.LatLng(places[i].y, places[i].x),
      marker = addMarker(placePosition, i, places[i].place_name),
      itemEl = getListItem(i, places[i], marker); // 검색 결과 항목 Element를 생성합니다
    // LatLngBounds 객체에 좌표를 추가합니다
    bounds.extend(placePosition);

    //위치검색리스트 표출
    fragment.appendChild(itemEl);
  }
  // 검색결과 항목들을 검색결과 목록 Elemnet에 추가합니다
  listEl.appendChild(fragment);
  menuEl.scrollTop = 0;
  // 검색된 장소 위치를 기준으로 지도 범위를 재설정합니다
  map.setBounds(bounds);

}

//검색결과 항목을 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>' + places.place_name + '</h5></a>';
  if (places.road_address_name) {
    itemStr += '    <span>' + places.road_address_name + '</span>' +
      '   <span class="jibun gray">' + places.address_name + '</span>';
  } else {
    itemStr += '    <span>' + places.address_name + '</span>';
  }

  itemStr += '  <span class="tel">' + places.phone + '</span>' +
    '</div>';
  el.innerHTML = itemStr;
  el.className = 'item';

  return el;
}
// 마커를 생성하고 지도 위에 마커를 표시하는 함수입니다
function addMarker(position, idx, title) {
  //console.log('position : '+position);
  var imageSrc = 'http://i1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_number_blue.png', // 마커 이미지 url, 스프라이트 이미지를 씁니다
    //var imageSrc = BTN_IMAGE_PATH+'blue_marker.png', // 마커 이미지 url, 스프라이트 이미지를 씁니다
    imageSize = new daum.maps.Size(80, 80),  // 마커 이미지의 크기
    imgOptions = {
      spriteSize: new daum.maps.Size(36, 691), // 스프라이트 이미지의 크기
      spriteOrigin: new daum.maps.Point(0, (idx * 46) + 10), // 스프라이트 이미지 중 사용할 영역의 좌상단 좌표
      offset: new daum.maps.Point(13, 37) // 마커 좌표에 일치시킬 이미지 내에서의 좌표
      //offset: new daum.maps.Point(20, 80) // 마커 좌표에 일치시킬 이미지 내에서의 좌표
    },
    markerImage = new daum.maps.MarkerImage(imageSrc, imageSize, imgOptions),
    marker = new daum.maps.Marker({
      position: position,
      image: markerImage
    });

  marker.setMap(map); // 지도 위에 마커를 표출합니다
  searchMarker.push(marker);  // 배열에 생성된 마커를 추가합니다

  return marker;
}
// 검색결과 목록 또는 마커를 클릭했을 때 호출되는 함수입니다
// 인포윈도우에 장소명을 표시합니다
function displayInfowindow(marker, title) {

  var content = '<div style="padding:5px;z-index:1;">' + title + '</div>';

  infowindow.setContent(content);
  infowindow.open(map, marker);
}
// 검색결과 목록의 자식 Element를 제거하는 함수입니다
function removeAllChildNods(el) {
  while (el.hasChildNodes()) {
    el.removeChild(el.lastChild);
  }
}
/****************************************************************************
 * 소통정보클릭
 * x: column
 * y: row
 * z: level  http://fakeimg.pl/256x256/efefef,128
 ****************************************************************************/
function mapTraffic() {

  var imgHtml = "";

  var getTileUrl = function(x, y, z) {
    var date = new Date();
    var WMSURI = "";
    var layerName = "";

    if (z < 1) {
      z = 1;
    }
    if (z > 13) {
      z = 13;
    }

    WMSURI = connectUrl + '/geoserver/UTIS/wms?';
    layerName = 'SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&FORMAT=image/png&TRANSPARENT=true&tiled=true';
    layerName += '&LAYERS=UTIS:' + trafficLayerPrefix + z + '_d&WIDTH=256&HEIGHT=256&SRS=EPSG:5186&BBOX=' + getWmsBounds(x, y, z) + '&TIME=' + date.getTime();

    return WMSURI + layerName;
  };

  var flag = $("#traffic").attr("class");

  if (flag.indexOf("road_on") !== -1) {

    var fakeTileset = new daum.maps.Tileset(256, 256, getTileUrl);
    //console.log(fakeTileset);
    daum.maps.Tileset.add('FAKE', fakeTileset);
    map.addOverlayMapTypeId(daum.maps.MapTypeId.FAKE);

    clearTimeout(trafficTimer);
    trafficTimer = setTimeout(function() {
      callTraffic();
    }, timerOne);

    if (displayType == DISPLAY_PC) {
      $("#trafficInfoBox").show();
    } else {
      $(".info_wrap").show();
    }

  } else {
    map.removeOverlayMapTypeId(daum.maps.MapTypeId.FAKE);

    //타이머 멈춤
    if (trafficTimer != null) {
      clearTimeout(trafficTimer);
      trafficTimer = null;
    }

    if (displayType == DISPLAY_PC) {
      $("#trafficInfoBox").hide();
    } else {
      $(".info_wrap").hide();
    }
  }

}

function detectLocation() {
  $('#geoLocation').attr('src', CONTEXTROOT + '/main/getGeoLocation.do');

  setTimeout(function() {
    var idLatitude = $('#idLatitude').val();
    var idLongitude = $('#idLongitude').val();

    if (idLatitude == '' || idLongitude == '') {
      //alert ('일시적으로 위치를 사용할 수 없습니다.');
    }
    else {
      var myCenter = null;
      myCenter = new daum.maps.LatLng(idLatitude, idLongitude);
      map.panTo(myCenter);

      setTimeout(function() {
        mapMoveBound();
        detectAddMarker(myCenter, 1);
      }, 300);
    }
  }, 1000 * 1);
}

function detectAddMarker(position, idx) {
  var imageSrc = BTN_IMAGE_PATH + 'blue_marker.png', // 마커 이미지 url, 스프라이트 이미지를 씁니다
    imageSize = new daum.maps.Size(80, 80),  // 마커 이미지의 크기
    imgOptions = {
      offset: new daum.maps.Point(20, 80) // 마커 좌표에 일치시킬 이미지 내에서의 좌표
    },
    markerImage = new daum.maps.MarkerImage(imageSrc, imageSize, imgOptions),
    marker = new daum.maps.Marker({
      position: position,
      image: markerImage
    });

  marker.setMap(map); // 지도 위에 마커를 표출합니다
  detectMarker.push(marker);  // 배열에 생성된 마커를 추가합니다

  return marker;
}

function getWmsBounds(x, y, z) {
  var res = [32, 64, 128, 256, 512, 1024, 2048, 4096, 8192, 16384, 32768, 65536, 131072, 262144];
  var minX = -30000 + (res[z] * x);
  var minY = 40000 + (res[z] * y);
  return minX + ',' + minY + ',' + (minX + res[z]) + ',' + (minY + res[z]);
}
//소통정보지우고 다시그림
function callTraffic() {
  map.removeOverlayMapTypeId(daum.maps.MapTypeId.FAKE);
  mapTraffic();
  changeTimeDisplay();
}
/****************************************************************************
 * 거리재기
 ****************************************************************************/
function getDrawRoad() {

  //면적재기초기화
  drawingAreaStop();
  drawingStop();
  //로드뷰닫기
  roadViewClose();

  if (($("#draw").attr("class").indexOf("road_on") !== -1) && (!$("#road").attr("class").indexOf("road_on") !== -1)) {

    var path = "";

    distanceFlag = true;

    // 지도에 클릭 이벤트를 등록합니다
    // 지도를 클릭하면 선 그리기가 시작됩니다 그려진 선이 있으면 지우고 다시 그립니다
    daum.maps.event.addListener(map, 'click', function(mouseEvent) {

      if (distanceFlag) {

        // 마우스로 클릭한 위치입니다 
        var clickPosition = mouseEvent.latLng;
        // 지도 클릭이벤트가 발생했는데 선을 그리고있는 상태가 아니면
        if (!drawingFlag) {
          //거리재기초기화
          drawingStop();

          // 상태를 true로, 선이 그리고있는 상태로 변경합니다
          drawingFlag = true;
          distanceFlag = true;

          // 클릭한 위치를 기준으로 선을 생성하고 지도위에 표시합니다
          clickLine = new daum.maps.Polyline({
            map: map, // 선을 표시할 지도입니다 
            path: [clickPosition], // 선을 구성하는 좌표 배열입니다 클릭한 위치를 넣어줍니다
            strokeWeight: 3, // 선의 두께입니다 
            strokeColor: '#db4040', // 선의 색깔입니다
            strokeOpacity: 1, // 선의 불투명도입니다 0에서 1 사이값이며 0에 가까울수록 투명합니다
            strokeStyle: 'solid' // 선의 스타일입니다
          });

          // 선이 그려지고 있을 때 마우스 움직임에 따라 선이 그려질 위치를 표시할 선을 생성합니다
          moveLine = new daum.maps.Polyline({
            strokeWeight: 3, // 선의 두께입니다 
            strokeColor: '#db4040', // 선의 색깔입니다
            strokeOpacity: 0.5, // 선의 불투명도입니다 0에서 1 사이값이며 0에 가까울수록 투명합니다
            strokeStyle: 'solid' // 선의 스타일입니다    
          });

          // 클릭한 지점에 대한 정보를 지도에 표시합니다
          displayCircleDot(clickPosition, 0);

          if (closeOverlay) {
            closeOverlay.setMap(null);
            closeOverlay = null;
          }

          var content = document.createElement('div');
          var innerContent = document.createElement('a');
          innerContent.className = 'distanceClose';
          innerContent.onclick = endDrawEvent;
          content.append(innerContent);

          // 면적정보를 지도에 표시합니다
          closeOverlay = new daum.maps.CustomOverlay({
            map: map, // 커스텀오버레이를 표시할 지도입니다 
            content: content,  // 커스텀오버레이에 표시할 내용입니다
            xAnchor: 1.5,
            yAnchor: -0.5,
            position: clickPosition,  // 커스텀오버레이를 표시할 위치입니다. 위치는 다각형의 마지막 좌표로 설정합니다
            clickable: true,
            zIndex: 3,
          });

        } else { // 선이 그려지고 있는 상태이면
          // 그려지고 있는 선의 좌표 배열을 얻어옵니다
          var path = clickLine.getPath();
          // 좌표 배열에 클릭한 위치를 추가합니다
          path.push(clickPosition);

          // 다시 선에 좌표 배열을 설정하여 클릭 위치까지 선을 그리도록 설정합니다
          clickLine.setPath(path);
          var distance = Math.round(clickLine.getLength());
          displayCircleDot(clickPosition, distance);

          closeOverlay.setPosition(clickPosition);
        }
      }
    });

    // 지도에 마우스무브 이벤트를 등록합니다
    // 선을 그리고있는 상태에서 마우스무브 이벤트가 발생하면 그려질 선의 위치를 동적으로 보여주도록 합니다
    daum.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 daum.maps.CustomOverlay({
          map: map, // 커스텀오버레이를 표시할 지도입니다 
          content: content,  // 커스텀오버레이에 표시할 내용입니다
          xAnchor: 0,
          yAnchor: 0,
          position: mousePosition  // 커스텀오버레이를 표시할 위치입니다. 위치는 다각형의 마지막 좌표로 설정합니다
        });
      }
    });
    // 지도에 마우스 오른쪽 클릭 이벤트를 등록합니다
    // 선을 그리고있는 상태에서 마우스 오른쪽 클릭 이벤트가 발생하면 선 그리기를 종료합니다
    daum.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 (clickLine) {
    clickLine.setMap(null);
    clickLine = null;
  }

  if (moveLine) {
    moveLine.setMap(null);
    moveLine = null;
  }

  if (textOverlay) {
    textOverlay.setMap(null);
    textOverlay = null;
  }

  if (closeOverlay) {
    closeOverlay.setMap(null);
    closeOverlay = 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 daum.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 daum.maps.CustomOverlay({
    content: '<span class="dot"></span>',
    position: position,
    zIndex: 1
  });
  // 지도에 표시합니다
  circleOverlay.setMap(map);
  if (distance > 0) {
    // 클릭한 지점까지의 그려진 선의 총 거리를 표시할 커스텀 오버레이를 생성합니다
    var distanceOverlay = new daum.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();
  drawingAreaStop();
  //로드뷰닫기
  roadViewClose();

  if (($("#area").attr("class").indexOf("road_on") !== -1) && ($("#road").attr("class") != "road_on")) {

    var path = "";

    areaFlag = true;

    daum.maps.event.addListener(map, 'click', function(mouseEvent) {
      if (areaFlag) {

        // 마우스로 클릭한 위치입니다 
        var clickPosition = mouseEvent.latLng;

        // 지도 클릭이벤트가 발생했는데 다각형이 그려지고 있는 상태가 아니면
        if (!drawingAreaFlag) {

          //면적재기초기화
          drawingAreaStop();

          // 상태를 true로, 다각형을 그리고 있는 상태로 변경합니다
          drawingAreaFlag = true;
          areaFlag = true;

          // 그려지고 있는 다각형을 표시할 다각형을 생성하고 지도에 표시합니다
          drawingPolygon = new daum.maps.Polygon({
            map: map, // 다각형을 표시할 지도입니다
            path: [clickPosition], // 다각형을 구성하는 좌표 배열입니다 클릭한 위치를 넣어줍니다
            strokeWeight: 3, // 선의 두께입니다 
            strokeColor: '#00a0e9', // 선의 색깔입니다
            strokeOpacity: 1, // 선의 불투명도입니다 0에서 1 사이값이며 0에 가까울수록 투명합니다
            strokeStyle: 'solid', // 선의 스타일입니다
            fillColor: '#00a0e9', // 채우기 색깔입니다
            fillOpacity: 0.2 // 채우기 불투명도입니다
          });

          // 그리기가 종료됐을때 지도에 표시할 다각형을 생성합니다 
          polygon = new daum.maps.Polygon({
            path: [clickPosition], // 다각형을 구성하는 좌표 배열입니다 클릭한 위치를 넣어줍니다 
            strokeWeight: 3, // 선의 두께입니다 
            strokeColor: '#00a0e9', // 선의 색깔입니다   	
            strokeOpacity: 1, // 선의 불투명도입니다 0에서 1 사이값이며 0에 가까울수록 투명합니다
            strokeStyle: 'solid', // 선의 스타일입니다
            fillColor: '#00a0e9', // 채우기 색깔입니다
            fillOpacity: 0.2 // 채우기 불투명도입니다
          });

          if (closeOverlay) {
            closeOverlay.setMap(null);
            closeOverlay = null;
          }

          var content = document.createElement('div');
          var innerContent = document.createElement('a');
          innerContent.className = 'areaClose';
          innerContent.onclick = endDrawEvent;
          content.append(innerContent);

          // 면적정보를 지도에 표시합니다
          closeOverlay = new daum.maps.CustomOverlay({
            map: map, // 커스텀오버레이를 표시할 지도입니다 
            content: content,  // 커스텀오버레이에 표시할 내용입니다
            xAnchor: 1.5,
            yAnchor: -0.5,
            position: clickPosition,  // 커스텀오버레이를 표시할 위치입니다. 위치는 다각형의 마지막 좌표로 설정합니다
            clickable: true,
            zIndex: 1,
          });
        } else { // 다각형이 그려지고 있는 상태이면 

          // 그려지고 있는 다각형의 좌표에 클릭위치를 추가합니다
          // 다각형의 좌표 배열을 얻어옵니다
          var drawingPath = drawingPolygon.getPath();

          // 좌표 배열에 클릭한 위치를 추가하고
          drawingPath.push(clickPosition);

          // 다시 다각형 좌표 배열을 설정합니다
          drawingPolygon.setPath(drawingPath);

          // 그리기가 종료됐을때 지도에 표시할 다각형의 좌표에 클릭 위치를 추가합니다
          // 다각형의 좌표 배열을 얻어옵니다
          var path = polygon.getPath();

          // 좌표 배열에 클릭한 위치를 추가하고
          path.push(clickPosition);

          // 다시 다각형 좌표 배열을 설정합니다
          polygon.setPath(path);

          closeOverlay.setPosition(clickPosition);
        }
      }
    });
    // 지도에 마우스무브 이벤트를 등록합니다
    // 다각형을 그리고있는 상태에서 마우스무브 이벤트가 발생하면 그려질 다각형의 위치를 동적으로 보여주도록 합니다
    daum.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 daum.maps.CustomOverlay({
          map: map, // 커스텀오버레이를 표시할 지도입니다 
          content: content,  // 커스텀오버레이에 표시할 내용입니다
          xAnchor: 0,
          yAnchor: 0,
          position: mousePosition  // 커스텀오버레이를 표시할 위치입니다. 위치는 다각형의 마지막 좌표로 설정합니다
        });
      }
    });
    // 지도에 마우스 오른쪽 클릭 이벤트를 등록합니다
    // 다각형을 그리고있는 상태에서 마우스 오른쪽 클릭 이벤트가 발생하면 그리기를 종료합니다
    daum.maps.event.addListener(map, 'rightclick', endDrawEvent);
  } else {
    //면적재기초기화
    drawingAreaStop();
  }
}

function endDrawEvent(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 daum.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;
    }

    if (closeOverlay) {
      closeOverlay.setMap(null);
      closeOverlay = null;
    }
  }

  // 지도 오른쪽 클릭 이벤트가 발생했는데 선을 그리고있는 상태이면
  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;
    }

    if (closeOverlay) {
      closeOverlay.setMap(null);
      closeOverlay = null;
    }
  }
}

//면적재기초기화
function drawingAreaStop() {

  drawingAreaFlag = false;
  areaFlag = false;

  // 지도 위에 다각형이 표시되고 있다면 지도에서 제거합니다
  if (polygon) {
    polygon.setMap(null);
    polygon = null;
  }

  if (drawingPolygon) {
    drawingPolygon.setMap(null);
    drawingPolygon = null;
  }

  // 지도 위에 면적정보 커스텀오버레이가 표시되고 있다면 지도에서 제거합니다
  if (areaOverlay) {
    areaOverlay.setMap(null);
    areaOverlay = null;
  }

  if (textOverlay) {
    textOverlay.setMap(null);
    textOverlay = null;
  }


  if (closeOverlay) {
    closeOverlay.setMap(null);
    closeOverlay = null;
  }
}
function extendBounds(bounds, proj) {
  // 주어진 bounds는 지도 좌표 정보로 표현되어 있습니다.
  // 이것을 BOUNDS_BUFFER 픽셀 만큼 확장하기 위해서는
  // 픽셀 단위인 화면 좌표로 변환해야 합니다.
  var sw = proj.pointFromCoords(bounds.getSouthWest());
  var ne = proj.pointFromCoords(bounds.getNorthEast());
  // 그리고나서 다시 지도 좌표로 변환한 extBounds를 리턴합니다.
  // extBounds는 기존의 bounds에서 상하좌우 30px만큼 확장된 영역 객체입니다.  
  return new daum.maps.LatLngBounds(
    proj.coordsFromPoint(sw), proj.coordsFromPoint(ne));

}


function updateDebugConsole() {

  var level = map.getLevel();
  // console.log('* level = '+level);

}
