
let _rollingTimer;

//날씨
function getWeatherInfo(){
    $.ajax({
        type : 'post',
        url : '/common/getWeatherInfo.do',
        success : function(data){
            let presentTemp = "- ℃";
            let weatherCd   = "DB00";
            let altContent  = "정보없음";
            let pm10Val     = "- ㎍/㎥ -";
            let pm25Val     = "- ㎍/㎥ -";

            const todayImg  = $('.todayImg');
            const todayTemp = $(".todayTemp");
            const pm10      = $('.pm10');
            const pm25      = $('.pm25');

            if (data) {
                const {weather, atmp} = data;
                if (weather) {
                    const {wtcd_code, prst_tmpr, wtcd_kor_nm} = weather;
                    altContent= wtcd_kor_nm;
                    presentTemp = prst_tmpr+"℃";
                    weatherCd = wtcd_code;
                }
                if (atmp) {
                    pm10Val = atmp.pm10_val + ' ㎍/㎥ ' + atmp.pm10_1hh_grad_desc;
                    pm25Val = atmp.pm25_val + ' ㎍/㎥ ' + atmp.pm25_1hh_grad_desc;
                }
            }

            todayImg.addClass(weatherCd);
            todayImg.attr('alt', altContent);
            $(".todayTemp").text(presentTemp);
            pm10.text(pm10Val);
            pm25.text(pm25Val);
        }
    });
}

var mapContainer = document.getElementById('map'), // 지도를 표시할 div
    mapOption = {
        center: new kakao.maps.LatLng('36.56346122414198', '128.72071372219347'), // 안동지도의 중심좌표
        maxLevel: 9,
        minLevel: 4,
        level: 7, // 지도의 확대 레벨
        disableDoubleClickZoom: true
    };

// 지도를 표시할 div와  지도 옵션으로  지도를 생성합니다
_Map = new kakao.maps.Map(mapContainer, mapOption);

// 일반 지도와 스카이뷰로 지도 타입을 전환할 수 있는 지도타입 컨트롤을 생성합니다
var mapTypeControl = new kakao.maps.MapTypeControl();
// 지도에 컨트롤을 추가해야 지도위에 표시됩니다 kakao.maps.ControlPosition은 컨트롤이 표시될 위치를 정의하는데
// TOPRIGHT는 오른쪽 위를 의미합니다
_Map.addControl(mapTypeControl, kakao.maps.ControlPosition.RIGHT);

var zoomControl = new kakao.maps.ZoomControl();
_Map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);




kakao.maps.event.addListener(_Map, 'center_changed', function() {

    // 지도의  레벨을 얻어옵니다
    //var level = map.getLevel();

    // 지도의 중심좌표를 얻어옵니다 
    // var latlng = _Map.getCenter();
    // console.log("latlng = "+latlng)
    // var message = '<p>지도 레벨은 ' + level + ' 이고</p>';
    // message += '<p>중심 좌표는 위도 ' + latlng.getLat() + ', 경도 ' + latlng.getLng() + '입니다</p>';

    // var resultDiv = document.getElementById('result');
    // resultDiv.innerHTML = message;

});




// 지도가 확대 또는 축소되면 마지막 파라미터로 넘어온 함수를 호출하도록 이벤트를 등록합니다
kakao.maps.event.addListener(_Map, 'zoom_changed', function () {
    // 지도의 현재 레벨을 얻어옵니다
    _Level = _Map.getLevel();
     //$(".levelTest").html("map level = "+_Level)
    if (!_TrafficFlag) {
        drawVertexArr();
    }

    parkingMarkerSetSize((_size[_Level] + 2));
    // cctvMarkerSetSize(_size[_Level]);
    vmsMarkerSetSize(_size[_Level]);
    incdMarkerSetSize(_size[_Level]);

    if (_AtrdSideMarkerArr.length > 0) {
        let imageSize = new daum.maps.Size(24, 24),
            imageOption = { offset: new daum.maps.Point(12, 24) },
            frontImgSrc = '/images/traffic/map-markerS.png',
            endImgSrc   = '/images/traffic/map-markerE.png';

        if (_Level < 7) {
            imageSize = new daum.maps.Size(48, 48);
            imageOption = { offset: new daum.maps.Point(24, 48) };
        }

        const frontImage    = new daum.maps.MarkerImage(frontImgSrc, imageSize, imageOption);
        const endImage      = new daum.maps.MarkerImage(endImgSrc, imageSize, imageOption);
        const frontPosition = new daum.maps.LatLng(_AtrdFrontPoly.getPath()[0].getLat(), _AtrdFrontPoly.getPath()[0].getLng());
        const backPosition  = new daum.maps.LatLng(_AtrdBackPoly.getPath()[0].getLat(), _AtrdBackPoly.getPath()[0].getLng());
        _AtrdSideMarkerArr[0].setImage(frontImage);
        _AtrdSideMarkerArr[1].setImage(endImage);
        _AtrdSideMarkerArr[0].setPosition(frontPosition);
        _AtrdSideMarkerArr[1].setPosition(backPosition);
    }

});

function parkingMarkerSetSize(size) {
    setMarkerSize(_ParkingInfoArr, size,  'parkingMarker', 1, '주차장', 'park_nm');
}
function incdMarkerSetSize(size) {
    setMarkerSize(_IncdOcrrArr, size,  'incdMarker', 1, '돌발정보', 'incd_titl');
}

function setMarkerSize(array, size, markerName, scale, name, alt) {
    array.forEach(function (el) {
        const marker = el[markerName];
        let  imgSrc = "";
        if (marker && marker.getImage()) {
            imgSrc = marker.getImage().mk;
        }
        let point = size;
        // let img   = image;
        let altTxt =  el[alt] + " - " + name + " 마커"
        if (name === '주차장' || name === '돌발정보') {
            point = size/2;
        }

        if (name === '교통안전') {
            altTxt =  el.m_cd_nm + ' ' + altTxt;
        }

        // let imageSrc = '/images' +img, // 마커이미지의 주소입니다
        let imageSize   = new daum.maps.Size(size, size), // 마커이미지의 크기입니다
            imageOption = {
                offset: new daum.maps.Point(point/scale, point),
                alt: altTxt
            }; // 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다.

        // 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
        let markerImage = new daum.maps.MarkerImage(imgSrc, imageSize, imageOption);
        el[markerName].setImage(markerImage);
    });
}
function cctvMarkerSetSize(size) {
    setMarkerSize(_CctvCtlrArr, size,  'cctvMarker', 2, 'CCTV', 'istl_lctn_nm');
}

function vmsMarkerSetSize(size) {
    setMarkerSize(_VmsCtlrArr, size,  'vmsMarker', 1, 'VMS', 'vms_nm');
}
function taasMarkerSetSize(size) {
    setMarkerSize(_TaasInfoArr, size,  'taasMarker', 2, '교통안전', 'add_jibun');
}

// 마우스 드래그로 지도 이동이 완료되었을 때 마지막 파라미터로 넘어온 함수를 호출하도록 이벤트를 등록합니다
kakao.maps.event.addListener(_Map, 'dragend', function () {
    if (!_TrafficFlag) drawVertexArr();
});

//커서 화살표로 변경
_Map.setCursor('default');

/*kakao.maps.event.addListener(_Map, 'click', function(mouseEvent) {
	    console.log(mouseEvent.latLng);
	});*/

kakao.maps.event.addListener(_Map, 'click', function (mouseEvent) {
    	 	
    if (!_CustomOverlayFlag && _CustomOverlayClick != null) {
        _CustomOverlayClick.setMap(null);
    }
    else{
        _CustomOverlayFlag =false;
    }
    	//if(_CustomOverlayClick.getMap() == null){console.log("커스텀클릭갯맵 널이아님");}
       /* // 클릭한 위도, 경도 정보를 가져옵니다
        var latlng = mouseEvent.latLng;

        var message = '클릭한 위치의 위도는 ' + latlng.getLat() + ' 이고, ';
        message += '경도는 ' + latlng.getLng() + ' 입니다';
*/
});

function init() {
    _TrafficFlag = false;
    _InciFlag = false;
	//소통정보 5분 갱신..
	setInterval(getVertexArr, 1000 * 60 * 5);
	getIncdOcrr();
	getVertexArr();
	getVmsCtlr();
	getCctvCtlr();
	getWeatherInfo();
    getParkingInfo();
    getCongestData();
    getNoticeData();
    _Map.relayout();
}

/* mapMenu */

$(".mapMenu > ul > li").click(function(){
    const buttonInfo = $(this).children().eq(0).attr('title');
    let showMethod;
    let hideMethod;
    switch (buttonInfo) {
        case '소통정보':
            showMethod = () => drawVertexArr();
            hideMethod = () => hideVertexArr(_Level);
            break;
        case '돌발정보':
            showMethod = () => showIncd();
            hideMethod = () => hideIncd();
            break;
        case 'CCTV':
            showMethod = () => showCctv();
            hideMethod = () => hideCctv();
            break;
        case 'VMS':
            showMethod = () => showVms();
            hideMethod = () => hideVms();
            break;
        case '주차정보':
            showMethod = () => showParkingInfo();
            hideMethod = () => hideParkingInfo();
            break;
    }

    if ($(this).hasClass("on")) {
        hideMethod();
    }
    else {
        showMethod();
    }

    $(this).toggleClass("on");
});

var _updnFlag = true;
$('#mapSizeBtn').click(function () {

    if (_updnFlag) {
        $('#mapSizeBtn').removeClass('dn');
        $('#mapSizeBtn').addClass('up');

        updateSizeMap(_updnFlag);
        _updnFlag = false;
    } else {
        $('#mapSizeBtn').removeClass('up');
        $('#mapSizeBtn').addClass('dn');
        updateSizeMap(_updnFlag);
        _updnFlag = true;
    }

});

function updateSizeMap(updnFlag) {
    if (updnFlag) {
        $('#contentList').hide();
        $('#map').css('height', '970');
        $('#mapSizeBtn').attr('title','지도 접기');
        $('#mapSizeBtn').text('접기');
    } else {
        $('#contentList').show();
        $('#map').css('height', '690');
        $('#mapSizeBtn').attr('title','지도 펼치기');
        $('#mapSizeBtn').text('펼치기');
    }
    _Map.relayout();
}

function getCongestData() {
    $.ajax({
        type : 'post',
        url    : '/common/findAllCongestTraffic.do',
        success: (data) => {
            _CongestInfoArr = data;
        },
        complete: () => {
            selectCongestTabs();
        },
        error : (request, status, error) => {
            console.error("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
        }
    })
}

function getNoticeData() {
    $.ajax({
        type   : 'post',
        url    : '/notice/getNoticeList.do',
        success: (data) => {
            _NoticeInfoArr = data;
            // if (data && data.length > 0) {
            //     data.forEach((obj)=>{
            //         _NoticeInfoArr.push(obj);
            //     })
            // }
        },
        complete: () => {
            // selectCongestTabs();
        },
        error : (request, status, error) => {
            console.error("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
        }
    })
}

/**
 * 우측 tab 클릭 이벤트
 * @param tabType
 */
function selectRightTabs(selectId, selectedId) {
    const selectTab   = $('#' + selectId);
    const selectedTab = $('#' + selectedId);
    if (selectTab.hasClass('active')) return;
    selectedTab.removeClass('active');
    selectTab.addClass('active');
    if (_rollingTimer) clearInterval(_rollingTimer);

    if (selectId === 'traffic') {
        selectCongestTabs();
    }
    else {
        selectNoticeTabs();
    }
}

/**
 *  지정체 정보 탭 선택
 */
function selectCongestTabs() {
    let isRolling   = false;
    let rollingList = $(
        `<div class="no-info-box">
           <img src="/images/main/no_info_icon.png" alt="지정체구간이 없습니다">
           <p>현재 진행중인<br><strong>지정체구간정보</strong>가 없습니다.</p>
        </div>`);
    if (_CongestInfoArr.length > 0) {
        let congestContent = '<div class="notice-more-box"><a href="/traffic/realtime.do"><p class="notice-more-btn">+ 더보기</p></a></div><ul class="rollingList">';

        _CongestInfoArr.forEach((obj)=>{
            const cloneObj = congestNullFormatter(obj);
            const {ifsc_id, sped, cmtr_grad_cd, strt_nm, end_nm, cmmn_cd_kor_nm, atrd_nm} = cloneObj;

            congestContent +=
                `<li id="${ifsc_id}">
                    <div class="traffic-bullet">
                        <p class="${cmtr_grad_cd}"><span>${cmmn_cd_kor_nm}</span></p>
                    </div>
                    <div class="road-info">
                        <p>[${atrd_nm}] <strong>${sped}km/h</strong></p>
                        <div style="display: flex;">
                            <div class="road-info-name">${strt_nm}</div>
                            <span class="arrow"></span>
                            <div class="road-info-name">${end_nm}</>
                        </div>
                    </div>
                </li>`;
        })
        congestContent += '</ul>';
        rollingList = $(congestContent);
        isRolling = true;
    }

    $('.traffic-info .rollingOuter').empty();
    $('.traffic-info .rollingOuter').append(rollingList);

    if (isRolling) {
        function itemRolling () {
            const rollingList = $(".rollingList");
            let boxHeight     = $('.rollingOuter').outerHeight() - 50;
            let itemHeight    = rollingList.children("li").outerHeight();
            let itemNum       = rollingList.children("li").length;
            let itemMinNum    = Math.ceil(boxHeight / itemHeight);

            if ( itemMinNum <= itemNum) {
                rollingList.not(":animated").animate({
                    marginTop:parseInt(rollingList.css("margin-top"))-itemHeight+"px"
                },600,"swing",function(){
                        rollingList.css("margin-top", "0px");
                        rollingList.find("li").first().appendTo(rollingList);
                });
            }
        }
        _rollingTimer = setInterval(function(){
            itemRolling();
        },2000);
    }
}

/**
 * 공지사항 탭 선택
 */
function selectNoticeTabs() {
    let isRolling   = false;
    let rollingList = $(
        `<div class="no-info-box">
           <img src="/images/main/no_info_icon.png" alt="지정체구간이 없습니다">
           <p>현재 공지중인<br><strong>공지사항</strong>이 없습니다.</p>
        </div>`);
    if (_NoticeInfoArr.length > 0) {
        let congestContent = '<div class="notice-more-box"><a href="/notice/noticeList.do"><p class="notice-more-btn">+ 더보기</p></a></div><ul class="rollingList">';

        _NoticeInfoArr.forEach((obj)=>{
            const cloneObj = congestNullFormatter(obj);
            const {boardNo, regDate, bSubject} = cloneObj;
            congestContent +=
                `<li class="notice-li" onclick="showDetailNoticeView(${boardNo})">
                    <a href="javascript:showDetailNoticeView(${boardNo})">
                        <span class="notice-txt">${regDate}</span>
                        <p class="notice-name" style="cursor:pointer">
                           ${bSubject}
                        </p>
                    </a>
                </li>`;
        })
        congestContent += '</ul>';
        rollingList = $(congestContent);
    }

    $('.traffic-info .rollingOuter').empty();
    $('.traffic-info .rollingOuter').append(rollingList);

}

function congestNullFormatter(obj) {
    if (obj) {
        const cloneObj = {...obj};
        for (let key in cloneObj) {
            if (!cloneObj[key]) {
                if (key === 'cmtr_grad_cd') cloneObj[key] = 'LTC0';
                cloneObj[key] = '-';
            }
        }
        return cloneObj;
    }
    return obj;
}

function showDetailNoticeView(noticeNum) {
    window.event.preventDefault();
    window.location.href = '/notice/noticeView/' + noticeNum + '.do';
}