var poiList;
var currentPage = 1;
var isShared = false;
var pathArray = [];
var totalPathData;
var startPlaceInfo;
var endPlaceInfo;
var inputId;
let pinD;
let pinA;
let bezierXPoint;
let bezierYPoint;

// 4-열차, 5-고속버스, 6-시외버스, 7-항공
let lineClassType = {
    4: 'line_train',
    5: 'line_busE',
    6: 'line_bus',
    7: 'line_air',
}

$(document).ready(function (){

    // 현재 페이지 URL에 장소 공유 파라미터가 있는지 확인한다.
    const urlParams = new URLSearchParams(window.location.search)
    let shareParam = {
        startX: urlParams.get('sx'),
        startY: urlParams.get('sy'),
        startName:  urlParams.get('sname'),
        endX: urlParams.get('ex'),
        endY:  urlParams.get('ey'),
        endName:  urlParams.get('ename'),
        pathidx:  urlParams.get('pathidx'),
        pathType:  urlParams.get('type'),
        typeidx:  urlParams.get('typeidx'),
        placename:  urlParams.get('pname'),
        setting:  urlParams.get('set'),
        searchMethod:  urlParams.get('searchMethod'), // 교통수단 구분
        mode:  'findWay',
    }
    mode = "findWay";
    let latLng = { lng : urlParams.get('x'), lat : urlParams.get('y')};

    if (urlParams.get('posx')) {
        // 공유하기 2
        latLng = { lng : urlParams.get('posx'), lat : urlParams.get('posy')};
    }

    initMapContainer();
    resizeResultContainer();
    initMap({'lat': 37.56060, 'lng': 126.98657});

    // 길찾기 공유 확인 ( 경로 그리기)
    if (shareParam.startX && shareParam.startY && shareParam.endX && shareParam.endY && !shareParam.searchMethod) {
        isShared = true;
        findShared(shareParam);
    // 출도착지 버튼 클릭시 들어옴 (줌 + 이동 필요)
    } else if(latLng.lng && latLng.lat && shareParam.setting && shareParam.placename) {
        // 출도착 장소 설정 확인
        inputId = 'arrival';
        if (shareParam.setting === "depart") {
            inputId = 'departure';
        }
        setPlace(inputId, latLng, shareParam.placename)
        $('#' + inputId).parent().removeClass('input_def input_act').addClass('input_fin');	// 검색어 삭제 버튼 활성화
        $(".result .result_list").removeClass('departure arrival').addClass(inputId).addClass(langStr);
        isShared = false;
    // 관광공사 POI 상세 -> Go to map -> 마커, 출/도착지 설정 메뉴 표시 (기능 추가)
    } else if (latLng.lng && latLng.lat){
        gotoMappins(latLng)
    } else {
        isShared = false;
        isInit = true;
        myLocation();
    }
    
    checkTravelPlannerParameter(shareParam)
})

const checkTravelPlannerParameter = async (params) => {
	
	// 교통수단 구분 또는 도착지 파라미터가 존재하지 않는 경우
	if (!params.searchMethod || !(params.endX && params.endY && params.endName)) {
		return
	}
	
	common.startSpinner()
	// 현 위치 정보를 검색 중인 경우
	if (isLocationAct) {
		setTimeout(() => checkTravelPlannerParameter(params), 500)
		return
	}
	
	// 도착지 설정한다
	setPlace('arrival', { lat: params.endY, lng: params.endX }, common.decode(params.endName), 0)
	// 도착지 인풋박스를 검색 완료 상태로 변경한다
	$('input#arrival').parent().removeClass('input_def input_act').addClass('input_fin')
	
	// 현 위치 정보와 출발지 파라미터가 모두 존재하지 않는 경우
	if ($.isEmptyObject(myLatLng) && !(params.startX && params.startY && params.startName)) {
		if (pinA) {
			// 도착지 위치로 지도를 이동시킨다
			map.setCenter(pinA.getPosition())
		}
		common.endSpinner()
		return
	}
	
	// 출발지 파라미터가 존재하는 경우
	if (params.startX && params.startY && params.startName) {
		setPlace('departure', { lat: params.startY, lng: params.startX }, common.decode(params.startName), 0)
	} else if (!$.isEmptyObject(myLatLng)) {
		// 현 위치 정보가 존재하는 경우
		setPlace('departure', { lat: myLatLng.lat, lng: myLatLng.lng }, await searchAddress(myLatLng.lat, myLatLng.lng), 0)
	}
	// 출발지 인풋박스를 검색 완료 상태로 변경한다
	$('input#departure').parent().removeClass('input_def input_act').addClass('input_fin')
	
	
	// 선택한 교통수단 구분
	const searchMethod = Number(params.searchMethod)
	
	// 경로 검색을 수행하는 경우
	if (searchMethod === 1 || searchMethod === 2 || searchMethod === 3) {
		common.startSpinner()
		
		// 구글 애널리틱스 이벤트 추적
		common.sendGAEvent(400, $('input#departure').val().trim() + '>' + $('input#arrival').val().trim())
		
		const promises = []
		// 대중교통 경로 검색
		promises.push(apis.searchPubTransPathT({ SX: startX, SY: startY, EX: endX, EY: endY }))
		// 도보 경로 검색
		promises.push(apis.searchWalkPath2({ opt: 'short', coordSystem: 'WGS84', loc: `${startX},${startY},${endX},${endY}` }))
		// 택시 경로 검색
		if (searchMethod === 3) {
			promises.push(apis.searchKtoCarPathFind({ SX: startX, SY: startY, EX: endX, EY: endY }))		
		}
		
		const responses = await Promise.all(promises)
		
		if (searchMethod === 1 && !responses[0]) {
			onRouteSearchFailure(messages[langStr].noRoutingResults)
			return
		}
		
		if (searchMethod === 2 && (!responses[1] || !responses[1].path || !responses[1].path[0][0].isRoute)) {
			if (responses[1]?.[0]?.code === '409') {
				// 도보 길찾기 직선거리 제한 초과
				onRouteSearchFailure(messages[langStr].noWalk)
			} else {
				onRouteSearchFailure(messages[langStr].noWalkingRouteFound)
			}
			return
		}
		
		if (searchMethod === 3 && (!responses[2] || responses[2].error)) {
			onRouteSearchFailure(messages[langStr].noTaxi)
			return
		}
		
		// 경로 결과 표시 전 초기화
		searchPathDisplay()
		
		if (responses[0]) {
			setPathList(responses[0])
		} else {
			// 대중교통 경로가 존재하지 않는 경우
			pathArray = []
		}
		
		if (responses[1] && responses[1].path && responses[1].path[0][0].isRoute) {
			$('#foot').data('data', responses[1].path[0][0])
		} else {
			// 도보 경로가 존재하지 않는 경우
			if (responses[1]?.[0]?.code === '409') {
				$('#foot').data('data', { error: 409 })
			} else {
				$('#foot').removeData('data')
			}
		}
		
		if (searchMethod === 1) {
			common.sendGAEvent(4, '메뉴')
			pathDisplay()
		} else if (searchMethod === 2) {
			getFootData()
			walkDisplay(true)
		} else if (searchMethod === 3) {
			common.sendGAEvent(5, '메뉴')
			taxiDatas(responses[2])
            setRouteByCarData(responses[2])
            viewMapSize()
    		mapCallMove(1)
            taxiDisplay(true)
		}
	} else {
		fitBoundsToMarkers()
	}
	
	common.endSpinner()
}

const fitBoundsToMarkers = () => {
	// 현재 표시중인 마커에 맞춰 지도 영역을 변경한다
	const boundsArray = []
	if (pinD) {
		boundsArray.push(pinD.getPosition())
	}
	if (pinA) {
		boundsArray.push(pinA.getPosition())
	}
	map.fitBounds(boundsArray, { top: 10, right: 10, bottom: 10, left: 10 })
}

const onRouteSearchFailure = (alertMessage) => {
	// 출도착지 마커를 제외한 지도 위 오버레이를 제거한다
	removeMyLocation()
    removeLines()
	$('.map_pin').not('.pin_d').not('.pin_a').remove()
	
	// 인풋박스 버튼을 초기 상태로 변경한다
  	$('.btn_del').css('width', '30px')
    $('.btn_departure').hide()
    $('.btn_arrival').hide()
    $('.btn_spots').removeAttr('style')
    
    // 결과 및 지도 영역을 초기화한다
    mapCallMove(2)
    resizeMapContainer()
    // 출도착지 마커에 맞춰 지도 영역을 변경한다
    fitBoundsToMarkers()
    
    // 안내 문구를 표출한다
    if (alertMessage) {
    	alert(alertMessage)		
	}
	
	// 로딩 표시를 숨긴다
	common.endSpinner()
}

// 개발 : https://ktodev.odsay.com/gis_od.kto?mode=findWay&lang=1&posx=126.98657&posy=37.56060
const gotoMappins = async (e) => {
    let img = "/vkmap/img/class/map/pin_gotomap.png"
    new naver.maps.Marker({
        position: new naver.maps.LatLng(e),
        map: map,
        icon: {
            content: [` <span class="pin_default2" id="map_choice" style="left:-15px; top: -38px">
                     <img src=${img} style="position:absolute; width:26px; height:38px; display: block; center no-repeat; background-size:auto 38px; z-index: 10"/>
					<span class="choice" style="display: flex; left: -64px">
					<a href="javascript:void(0)" onclick="event.stopPropagation(); searchAddress(${e.lat}, ${e.lng}, 'departure')">${messages[langStr].departure}</a>
					<a href="javascript:void(0)" onclick="event.stopPropagation(); searchAddress(${e.lat}, ${e.lng}, 'arrival')">${messages[langStr].arrival}</a>
					</span></span>`].join(''),
        },
    });
    mapZoom(e, 2)
}

// 길찾기 경로 공유하기
const findShared = async (shareParam) => {

    let params = {OPT: 0, radius: '700:2000', SX: shareParam.startX, SY: shareParam.startY, EX: shareParam.endX, EY: shareParam.endY,}
    let startEndPointObj = {
        sx : shareParam.startX,
        sy : shareParam.startY,
        ex : shareParam.endX,
        ey : shareParam.endY
    }

    let startEndName = { sname : shareParam.startName, ename: shareParam.endName }
    common.startSpinner()
    let datas = apis.searchPubTransPathT(params);
    let data = await datas.then(function (resolvedData) {
        common.sendGAEvent(20000, shareParam.startName + ">" + shareParam.endName);
        return resolvedData
    }).finally(() => {common.endSpinner()})

    let path = data.path[Number(shareParam.pathidx)]
    cityCard_m(startEndPointObj, path, startEndName, data.searchType);
}

// 길찾기 공유
const cityCard_m = (startEndPointObj, data, startEndName, type) => {
    cityCardPlace(startEndPointObj, startEndName);
    if (type === 0) {
        innerCityCardObj(data);
    } else {
        outerCityCard(data);
    }
    $('.list_card ul:first-child').trigger('click');
    showTransPath('trans');
    viewHeaderSize('share');
    map.fitBounds(boundsPush(), { top: 10, right: 10, bottom: 10, left: 10 })
}
const cityCardPlace = (startEndPointObj, startEndName) => {
    setPlace('departure', {'lng': startEndPointObj.sx, 'lat': startEndPointObj.sy}, startEndName.sname)
    setPlace('arrival', {'lng': startEndPointObj.ex, 'lat': startEndPointObj.ey}, startEndName.ename)
}

//길찾기 버튼 활성화
const searchBtnOnOff = () => {
    if(startX && startY && endX && endY){
        $('.search a.btn').addClass('on');
    }else{
        $('.search a.btn').removeClass('on');
    }
}

//출도착지 swap
const changeStartEndPlace = () => {

    let tempX, tempY, tempName, tempInfo;
    if (!startName || !endName) {
        alert(messages[langStr].inputYourLocation)
        return false;
    }
    tempX = startX;
    tempY = startY;
    tempName = startName;

    startX = endX;
    startY = endY;
    startName = endName;

    endX = tempX;
    endY = tempY;
    endName = tempName;

    tempInfo = startPlaceInfo;
    startPlaceInfo = endPlaceInfo;
    endPlaceInfo = tempInfo;

    setSwap();

    $('#departure').parent().removeClass('input_def input_act').addClass('input_fin');
    $('#arrival').parent().removeClass('input_def input_act').addClass('input_fin');

    $('.result').hide();
    $('.btn_del').css('width', '30px');
    $('.btn_departure').hide();
    $('.btn_arrival').hide();

    $('.result_list ul').children().not('.li_spot').remove();
    if ( !$('.result_list .list_place li').hasClass('li_spot') ) {
        $('.result_list ul').hide();
    }
    $('.pin_t').remove();
    $('.pin_icon').remove();
    removeMyLocation();
    removeLines();
    let bounds = []
    bounds.push(new naver.maps.LatLng(startY, startX));
    bounds.push(new naver.maps.LatLng(endY, endX));
    if(bounds.length !== 0){
        map.fitBounds(bounds,{ top: 10, right: 10, bottom: 10, left: 10 })
    }
    return false;
}


const setPlace = (type, latLng, name, mapMove = 2) => {
	const placeName = decodeURIComponent(name)
	
    removeMyLocation();
    if (type === 'arrival') {
        endX = latLng.lng;
        endY = latLng.lat;
        endName = placeName;
        endPlaceInfo = $('.result .list_place li.on').clone().addClass('aTagNone');
        let markerIcon = { content: `<span class='map_pin pin_a' id="pin_a"/>` };
        $('#pin_a').remove();
        pinA = markerType(markerIcon, latLng, mapMove);
    } else {
        startX = latLng.lng;
        startY = latLng.lat;
        startName = placeName;
        let markerIcon = { content: `<span class='map_pin pin_d' id="pin_d"/>` };
        startPlaceInfo = $('.result .list_place li.on').clone().addClass('aTagNone');
        $('#pin_d').remove();
        pinD = markerType(markerIcon, latLng, mapMove);
    }
    $('#' + type).val(placeName);
    $('#' + type).parent().removeClass('input_def input_act').addClass('input_fin');
    searchBtnOnOff();
    return false;
}

const setSwap = () => {
    removeMyLocation();
    $('#arrival').val(endName);
    $('#departure').val(startName);
    $('#pin_a').remove();
    $('#pin_d').remove();
    // 스크롤 초기화
    $('#view_header').scrollTop(0)

    let markerIcon = { content: `<span class='map_pin pin_a' id="pin_a"/>` };
    pinA = markerType(markerIcon, {'lng': endX, 'lat': endY});

    markerIcon = { content: `<span class='map_pin pin_d' id="pin_d"/>` };
    pinD = markerType(markerIcon, {'lng': startX, 'lat': startY});
    searchBtnOnOff();
    mapCallMove(2);
    resizeMapContainer();
}

const spotHide = (type) => {
    $('.spot_info .info_trans').hide();
    $('.spot_info .info_taxi').hide();
    $('.spot_info .info_foot').hide();

    if (type === 'trans') {
        $('.spot_info .info_trans').show();
    } else if (type === 'taxi') {
        $('.spot_info .info_taxi').show();
    } else if (type === 'foot') {
        $('.spot_info .info_foot').show();
    }
}

// 관광 장소 세팅
const setStartEndClick = (fullAddr, point, type) => {
    $('.result .list_place').children().remove();
    spotHide();
    $('#top_menu').show();
    $('.search').show();
    removePlace(type)
    if (!point.lat) {
        point = JSON.parse(point)
    }
    setPlace(type, point, fullAddr)
    $('#'+type).parent().removeClass('input_def input_act').addClass('input_fin');	// 검색어 삭제 버튼 활성화
    $(".result .result_list").removeClass('departure arrival').addClass(type);
    setBtnMapBackVisibility(false);
    onPrev = null;
    // 지도화면 처음으로 이동
    mapCallMove(2)
    resizeMapContainer();
}

const removePlace = (type) => {
    $('#' + type).val('').parent().removeClass('input_fin').removeClass('input_act').addClass('input_def');
    $(".result .result_list").removeClass('departure arrival');
    $('.search a.btn').removeClass('on');

    $('.spot_info .list_place').children().remove();

    removeMyLocation();
    removeLines();

    if (type === 'arrival') {
        endX = null
        endY = null
        endName = null
        $('.map_pin').not('.pin_d').remove();
    } else {
        startX = null;
        startY = null;
        startName = null;
        $('.map_pin').not('.pin_a').remove()
    }

    $('.btn_del').css('width', '30px');
    $('.btn_departure').hide();
    $('.btn_arrival').hide();
    $('.btn_spots').removeAttr('style');
    mapCallMove(2)
    resizeMapContainer();
    return false;
}

// find route 클릭시 화면단 정리
async function searchPath() {
    if (!startX) {
        alert(messages[langStr].noStartX);
        return false;
    }

    if (!endX) {
        alert(messages[langStr].noEndX);
        return false;
    }
    
    if (startX === endX && startY === endY) {
		alert(messages[langStr].confirmDA)
        return false
	}
 
    common.sendGAEvent(400, $('#departure').val().trim() + '>' + $('#arrival').val().trim());

    // 길찾기 관련 API 호출함수
    await findWayApi();
    
    $('#departure').parent().removeClass('input_def input_act').addClass('input_fin');
    $('#arrival').parent().removeClass('input_def input_act').addClass('input_fin');
}

const searchPathDisplay = () => {
    $('#departure').val(startName);
    $('#arrival').val(endName);
    $('.pin_t').remove();
    $('.pin_icon').remove();
    removeMyLocation();
    removeLines();
    // Locations 초기화
    resetSpots(true);
    $('.result .list_place').hide();
    $('.result .find_bottom').hide();
    $('.result .list_card').children().remove();
    $('.result').hide();
    $('.spot_info ul').hide();
    closeLongTab();
    // 스크롤 초기화
    $('#view_header').scrollTop(0);
}

const findWayApi = async () => {
    let params = {opt: 'short', coordSystem: 'WGS84', loc: `${startX},${startY},${endX},${endY}`}
    let params2 = {OPT: 0, radius: '700:2000', SX: startX, SY: startY, EX: endX, EY: endY}

    let searchWalkPath = apis.searchWalkPath2(params);
    let searchPubTransPathT = apis.searchPubTransPathT(params2);

    common.startSpinner()
    let datas = await Promise.allSettled([searchWalkPath, searchPubTransPathT]).then(function (resolvedData) {
        common.sendGAEvent(4, '메뉴');
        return resolvedData
    }).finally(() => {common.endSpinner()})
    
  	// 경로 검색 결과가 존재하지 않는 경우 리턴
  	if ((!datas[0].value || !datas[0].value.path?.[0]?.[0]?.isRoute) && !datas[1].value) {
		alert(messages[langStr].noRoutingResults)
		return
	}
	
	// 경로 표시 전 초기화
	searchPathDisplay();
	// 경로 이동수단 탭 초기화
    routeTabChange('pub')

    // 도보 정보가 있다면 도보는 저장해준다.
    if (datas[0].value.path && datas[0].status === "fulfilled") {
        $("#foot").data("data", datas[0].value.path[0][0]);
    } else {
		if (Number(datas[0].value[0].code) === 409) {
			// 검색 가능한 최대 거리를 초과한 경우
			$("#foot").data('data', { error: 409 })
		} else {
			$("#foot").removeData('data')
		}
	}

    // 길찾기 정보가 없으면 도보 정보를 보여준다
    if (datas[1].status === "rejected" || !datas[1].value) {
        if (datas[0].value.path && datas[0].status === "fulfilled") {
            getFootData();
            walkDisplay(true);
            pathArray = [];
            $('.result .find_bottom').hide();
        } else {
            $("#foot").removeData('data');
        }
    } else {
        setPath(datas[1]);
        removeLines();
        // 첫번째 경로 클릭
        // $("#view_header ul.list_card > li:nth-child(1)").trigger('click');
        map.fitBounds(boundsPush())
    }
    $('#view_header').scrollTop(0)
}

const setPath = (data) => {
    closeLongTab();
    // 길찾기 경로 생성
    setPathList(data.value);
    pathDisplay();
}

const routeTabChange = (type) => {
    $('.route_tab').removeClass('on');
    if (type === "pub") {
        $(".tab_bs").addClass('on');
    } else if (type === "taxi") {
        $(".tab_taxi").addClass('on');
    } else {
        $(".tab_walk").addClass('on');
    }
}

const walkDisplay = (isWalk) => {
    if (isWalk) {
        viewMapSize();
        mapCallMove(1)
    }
    $('#option_tabmenu').show();
    $('.result').show();
    routeTabChange('walk')
}

const pathDisplay = () => {
    viewMapSize();
    routeTabChange('pub')
    mapCallMove(1)
    $('.result .list_card').show();
    $('.result .result_list2').hide();
    $('.result').show();
    $('.btn_del').css('width', '30px');
    $('.btn_departure').hide();
    $('.btn_arrival').hide();
}

function getTransData() {
    if (pathArray.length === 0) {
        alert(messages[langStr].noRoutingResults);
        return;
    }
    routeTabChange('pub')
    common.sendGAEvent(4,'메뉴');

    $('.result .list_card').show();
    $('.result .option_tabmenu .submenu').show();
    $('.result_list2').hide();
    $('.btn_del').css('width', '30px');
    $('.btn_departure').hide();
    $('.btn_arrival').hide();
}

// 택시탭 누르면 폴리라인 생성하기
async function getTaxiData() {
    let params = {SX: startX, SY: startY, EX: endX, EY: endY}

    common.startSpinner()

    await apis.searchKtoCarPathFind(params).then((response) => {
        // 택시 경로 검색에 실패한 경우
        if ($.isEmptyObject(response) || response.error) {
        	alert(messages[langStr].noTaxi);
            return false;
        } else {
            common.sendGAEvent(5, '메뉴');
            taxiDatas(response);
            setRouteByCarData(response);
            taxiDisplay();
        }
    }) .finally(() => {
        common.endSpinner()
    })

}

const taxiDisplay = () => {
    routeTabChange('taxi')
    $('.result .list_card li.on').find('.title_name').show();
    $('.result .list_card li.on').find('.card_tit').show();
    $('.result .list_card li.on').removeClass('on');
    $('.result .list_card').hide();
    $('.result .option_tabmenu .submenu').hide();
    $('.result_list2 .result_taxi').show();
    $('.result_list2 .result_foot').hide();
    $('.result_list2').show();
    $('.btn_del').css('width', '0px');
    $('.btn_departure').show();
    $('.btn_arrival').show();
}

const taxiDatas = (data) => {
    let resultInfoHtml = [];
    let resultMapInfoHtml = [];
    resultInfoHtml.push('<ul>');
    resultMapInfoHtml.push('<li>');
    resultMapInfoHtml.push('<dl class="card_tit">');
    resultMapInfoHtml.push('<dt>');
    resultInfoHtml.push(`<li><span class="tit">${messages[langStr].distance}</span>`);
    resultInfoHtml.push('<span class="text"><span class="big">' + common.convertMetersToKilometers(data.info.totalDistance) + '</span>km</span></li>');
    resultInfoHtml.push(`<li><span class="tit">${messages[langStr].estimated}</span>`);
    let cvtTime = common.timeConvert(data.info.totalTime);
    resultInfoHtml.push('<span class="text">');
    if(cvtTime[0] > 0){
        resultInfoHtml.push('<span class="big">');
        resultInfoHtml.push(cvtTime[0]);
        resultInfoHtml.push('</span>');
        resultInfoHtml.push(messages[langStr].hour+'&nbsp;');

        resultMapInfoHtml.push('<span class="big">');
        resultMapInfoHtml.push(cvtTime[0]);
        resultMapInfoHtml.push('</span>');
        resultMapInfoHtml.push(messages[langStr].hour+'&nbsp;');
    }
    resultInfoHtml.push('<span class="big">');
    resultInfoHtml.push(cvtTime[1]);
    resultInfoHtml.push('</span>');
    resultInfoHtml.push(messages[langStr].min);
    resultInfoHtml.push('</span></li>');

    resultMapInfoHtml.push('<span class="big">');
    resultMapInfoHtml.push(cvtTime[1]);
    resultMapInfoHtml.push('</span>');
    resultMapInfoHtml.push(messages[langStr].min);
    resultMapInfoHtml.push('</dt>');
    resultMapInfoHtml.push('<dd>');
    resultMapInfoHtml.push(`<span class="type1">${messages[langStr].distance}&nbsp;`);
    resultMapInfoHtml.push(common.convertMetersToKilometers(data.info.totalDistance) + '&nbsp;km</span>');
    resultMapInfoHtml.push('</dd>');
    resultMapInfoHtml.push('</dl>');
    $('.spot_info .info_taxi').children().remove().end().append(resultMapInfoHtml.join(""));
    resultInfoHtml.push(`<li><span class="tit">${messages[langStr].estimatedFare}</span>`);
    resultInfoHtml.push(`<span class="text"><span class="price">${data.info.taxiFare}</span>&nbsp;${messages[langStr].won}</span></li>`);
    resultInfoHtml.push('</ul>');
    resultInfoHtml.push('<div class="section">');
    resultInfoHtml.push('<div class="btn_area">');
    resultInfoHtml.push(`<a href="javascript:void(0);" onclick="showTransPath('taxi')">${messages[langStr].mapStr}</a>`);
    resultInfoHtml.push('</div>');
    resultInfoHtml.push('</div>');
    resultInfoHtml.push('<div class="maker">powered by <em>www.ODsay.com</em></div>');
    $('.result_taxi').children().remove().end().append(resultInfoHtml.join(""));
}

// 차 경로 , 카드 생성, 핏바운즈
function setRouteByCarData(data) {
    removeLines();
    $('.pin_t').remove();
    $('.pin_icon').remove();
   	const pointArray = $.map(data.graphPos, (v) => {
		return { lat: v.y, lng: v.x }
    })
    map.fitBounds(pointArray, { top: 10, right: 10, bottom: 10, left: 10 });
    // 출발지에서 택시 탑승 지점까지의 도보 폴리라인 생성한다
    drawLines({ path: [{ lat: startY, lng: startX }, pointArray[0]], ...getStrokeOptions(TRAFFIC_TYPE['WALK'])});
    // 택시 경로 폴리라인을 생성한다
    drawLines({ path: pointArray, ...getStrokeOptions(TRAFFIC_TYPE['TAXI'])});
    // 택시 하차 지점에서 도착지까지의 도보 폴리라인 생성한다
    drawLines({ path: [{ lat: endY, lng: endX }, pointArray[pointArray.length - 1]], ...getStrokeOptions(TRAFFIC_TYPE['WALK'])});
}

function getFootData() {
    common.sendGAEvent(6,'메뉴')
    if(setRouteByFootData()){
        routeTabChange('walk');
        $('.result .list_card li.on').find('.title_name').show();
        $('.result .list_card li.on').find('.card_tit').show();
        $('.result .list_card li.on').removeClass('on');
        $('.result .list_card').hide();
        $('.result .option_tabmenu .submenu').hide();
        $('.result_list2 .result_taxi').hide();
        $('.result_list2 .result_foot').show();
        $('.result_list2').show();
        $('.btn_del').css('width', '0px');
        $('.btn_departure').show();
        $('.btn_arrival').show();
    }
}

function setRouteByFootData() {
    let footdata = $("#foot").data("data");
    if(!footdata || !footdata?.isRoute) {
		if (footdata && footdata.error === 409) {
			// 출,도착지간 직선거리 제한을 초과한 경우
        	alert(messages[langStr].noWalk)			
		} else {
			// 도보 검색이 불가능한 경우
			alert(messages[langStr].noWalkingRouteFound)	
		}
        return false;
    }
    removeLines();
    $('.pin_t').remove();
    $('.pin_icon').remove();

  	const bounds = footdata.summary.bound
    createFitBounds({ left: bounds.ltX, top: bounds.ltY, right: bounds.rbX, bottom: bounds.rbY })
    drawWalkLine(footdata)
        
    let resultInfoHtml = [];
    let resultMapInfoHtml = [];
    resultInfoHtml.push('<ul>');
    resultMapInfoHtml.push('<li>');
    resultMapInfoHtml.push('<dl class="card_tit">');
    resultMapInfoHtml.push('<dt>');
    resultInfoHtml.push(`<li><span class="tit">${messages[langStr].distance}</span>`);
    resultInfoHtml.push('<span class="text"><span class="big">' + (footdata.summary.dist / 1000).toFixed(2) + '</span>km</span></li>');
    resultInfoHtml.push(`<li><span class="tit">${messages[langStr].estimated}</span>`);
    let cvtTime = common.timeConvert(footdata.summary.duration / 60);
    resultInfoHtml.push('<span class="text">');
    if(cvtTime[0] > 0){
        resultInfoHtml.push('<span class="big">');
        resultInfoHtml.push(cvtTime[0]);
        resultInfoHtml.push('</span>');
        resultInfoHtml.push(messages[langStr].hour+'&nbsp;');

        resultMapInfoHtml.push('<span class="big">');
        resultMapInfoHtml.push(cvtTime[0]);
        resultMapInfoHtml.push('</span>');
        resultMapInfoHtml.push(messages[langStr].hour+'&nbsp;');
    }
    resultInfoHtml.push('<span class="big">');
    resultInfoHtml.push(cvtTime[1]);
    resultInfoHtml.push('</span>');
    resultInfoHtml.push(messages[langStr].min);
    resultInfoHtml.push('</span></li>');

    resultMapInfoHtml.push('<span class="big">');
    resultMapInfoHtml.push(cvtTime[1]);
    resultMapInfoHtml.push('</span>');
    resultMapInfoHtml.push(messages[langStr].min);
    resultMapInfoHtml.push('</dt>');
    resultMapInfoHtml.push('<dd>');
    resultMapInfoHtml.push(`<span class="type1">${messages[langStr].distance}&nbsp;`);
    resultMapInfoHtml.push((footdata.summary.dist / 1000).toFixed(2) + '&nbsp;km</span>');
    resultMapInfoHtml.push('</dd>');
    resultMapInfoHtml.push('</dl>');
    $('.spot_info .info_foot').children().remove().end().append(resultMapInfoHtml.join(""));
    resultInfoHtml.push('</ul>');
    resultInfoHtml.push('<div class="section">');
    resultInfoHtml.push('<div class="btn_area">');
    resultInfoHtml.push(`<a href="javascript:void(0);" onclick="showTransPath('foot')">${messages[langStr].mapStr}</a>`);
    resultInfoHtml.push('</div>');
    resultInfoHtml.push('</div>');
    resultInfoHtml.push('<div class="maker">powered by <em>www.ODsay.com</em></div>');
    $('.result_foot').children().remove().end().append(resultInfoHtml.join(""));
    return true;
}


//서브 메뉴 (교통 수단 옵션) 설정
function setSubMenu(type, data) {
    const pathTypes = common.getPublicTransitPathTypeNameByCode(lang)
    if (data != null && typeof data != 'undefined') {
        let menuHtmlArray = [];
        menuHtmlArray.push('<div class="submenu" id="sub_menu"><ul>');
        if (type === 'inner') {
            menuHtmlArray.push(`<li><a href="javascript:void(0);" onclick="changePathType(0);" class="on">${pathTypes[0]}&nbsp;${data.path.length}</a></li>`);
            menuHtmlArray.push(`<li><a href="javascript:void(0);" onclick="changePathType(1);">${pathTypes[1]}&nbsp;${data.subwayCount}</a></li>`);
            menuHtmlArray.push(`<li><a href="javascript:void(0);" onclick="changePathType(2);">${pathTypes[2]}&nbsp;${data.busCount}</a></li>`);
        } else if (type === 'outer') {
            menuHtmlArray.push(`<li><a href="javascript:void(0);" onclick="changePathType(0);" class="on">${pathTypes[0]}&nbsp;${data.path.length}</a></li>`);
            menuHtmlArray.push(`<li><a href="javascript:void(0);" onclick="changePathType(3);">${pathTypes[3]}&nbsp;${data.trainCount}</a></li>`);
            menuHtmlArray.push(`<li><a href="javascript:void(0);" onclick="changePathType(4);">${pathTypes[4]}&nbsp;${data.busCount}</a></li>`);
            menuHtmlArray.push(`<li><a href="javascript:void(0);" onclick="changePathType(5);">${pathTypes[5]}&nbsp;${data.airCount}</a></li>`);
        }
        menuHtmlArray.push('</ul></div>');
        $('#sub_menu').remove();
        $('#option_tabmenu').append(menuHtmlArray.join(""));
        $('#option_tabmenu').show();
    }
}

//서브 메뉴 클릭 이벤트
function changePathType(pathType) {
    let target = event.target;
    let opt = {};
    if (pathType != 0 && pathType != null) {
        opt.pathType = [];
        opt.pathType.push(pathType);
    }
    optionalCards(opt);
    $('.result .list_card li.on').find('.title_name').show();
    $('.result .list_card li.on').find('.card_tit').show();
    $('.result .list_card li.on').removeClass('on');
    $('#sub_menu').find('ul').find('li').find('a.on').removeClass('on');
    $(target).addClass('on');
}

function optionalCards(opt) {
    let optionTrueCount = 0;
    $.each(pathArray.reverse(), function(index, entry) {
        if (entry.checkOptions(opt)) {
            entry.getCardObject().css('display', 'block');
            optionTrueCount++;
        } else {
            entry.getCardObject().css('display', 'none');
        }
    })
    if (optionTrueCount > 0) $('#routeNothing').hide();
    else {
        if ($('.list_card').find('#routeNothing').length !== 0) $('#routeNothing').show();
        else $('.list_card').append('<p class="nothing" id="routeNothing"> 0 ' + messages[langStr].routes + '</p>');
    }
}

// 길찾기 API호출 후 첫번째
function setPathList(data){
    totalPathData = data;
    pathArray = []
    // 0-도시내, 1-도시간 직통, 2-도시간 환승
    // 도시내 검색 결과 일 경우
    if (data.searchType === 0) {
        $.each(data.path, function(index, entry) {
            pathArray.push(new innerCityCardObj(entry));
        });
        setSubMenu('inner', data);
    } else if (data.searchType === 1) { // 도시간 검색 결과 일 경우
        $.each(data.path, function(index, entry) {
            pathArray.push(new outerCityCard(entry));
        });
        setSubMenu('outer', data);
    } else { // 예외 시
        alert(messages[langStr].noTaxi);
    }
}

let outerCityCard = function(data) {
        // data.path.pathType: 11-열차, 12-고속/시외버스, 13-항공, 20-시외교통 복합(열차+고속버스 등)
        // data.subPath[0].trafficType : 4-열차, 5-고속버스, 6-시외버스, 7-항공

        let cardData, cardObject;
        var pathType;

        let card;
        card = {
            init: function() {
                cardData = data;
                card.drawCard();
            },
            remove: function() {
                $('.pin_t').remove();
                $('.pin_icon').remove();
                $('.spot_info .info_trans').children().remove();
                removeLines();
                findWayBounds = [];
            },
            getCardObject: function() {
                return cardObject;
            },
            clickCard: async function () {
                card.remove();
                let pathLength = cardData.subPath.length;

                let endId;
                let startId;
                let beforePath, afterPath, middlePath;

                // 폴리라인 생성하는 부분
                for (const [i, el] of cardData.subPath.entries()) {
                    // 출발지점으로부터 도시간 길찾기 시작지점까지의 도시내 경로 그려주기
                    if (i === 0) {
                        beforePath = await searchPathOuterCardDetail(startX, startY, el.startX, el.startY, 'beforePath').then((path) => {
                            return path;
                        });
                        endId = {
                            id: el.endID,
                            endX: el.endX,
                            endY: el.endY,
                        }
                    }

                    let startLatLng = {'lng': el.startX, 'lat': el.startY};
                    let endLatLng = {'lng': el.endX, 'lat': el.endY};
                    let markerIcon = { content: `<span class='map_pin pin_t' id="pin_t"/>` };
                    // 이동수단간 마커 생성하기
                    markerType(markerIcon, startLatLng)
                    markerType(markerIcon, endLatLng)

                    // 도시간 경로 그리기
                    drawLines({path: PrepareBezierPoints(el.startX, el.startY, el.endX, el.endY), ...getStrokeOptions(el.trafficType)});

                    // 도시간 도착지점으로부터 최종 도착지점까지의 도시내 경로 그리기
                    if(i === pathLength-1) {
                        afterPath = await searchPathOuterCardDetail(el.endX, el.endY, endX, endY, 'afterPath').then((path) => {
                            return path;
                        });
                        startId = {
                            id: el.startID,
                            startX: el.startX,
                            startY: el.startY,
                        }
                    }

                    // 시외 환승 사이에 시내 경로 재검색
                    // endID - startID 비교
                    if (endId && startId && pathLength !== 1) {
                        if (endId.id !== startId.id) {
                            // 두 사이 경로 검색하기
                            middlePath = await searchPathOuterCardDetail(endId.endX, endId.endY, startId.startX, startId.startY, 'middlePath').then((path) => {
                                return path;
                            });
                        }
                    }

                }

                cardData.beforePath = { time: 0, payment: 0, distance: 0 };
                cardData.middlePath = { time: 0, payment: 0, distance: 0 };
                cardData.afterPath = { time: 0, payment: 0, distance: 0 };

                // 카드 데이터 넣는 부분
                // 카드 클릭시 시내 경로를 재호출하게되면 요금과 거리 시간 계산을 다시 해줘야 한다.
                if (beforePath) {
                    cardData.beforePath = {
                        time: beforePath.path[0].info.totalTime,
                        payment: beforePath.path[0].info.payment,
                        distance: beforePath.path[0].info.totalDistance,
                    };
                    beforePath.path[0].info.arriveName = cardData.subPath[0].startName;
                }

                // 23.03.09 시외 환승 사이에 시내 경로가 있을시 재검색하는부분 추가
                if (middlePath) {
                    cardData.middlePath = {
                        time: middlePath.path[0].info.totalTime,
                        payment: middlePath.path[0].info.payment,
                        distance: middlePath.path[0].info.totalDistance,
                    };
                    middlePath.path[0].info.startName = cardData.subPath[0].endName;
                    middlePath.path[0].info.arriveName = cardData.subPath[pathLength - 1].startName;

                    // 이상하게 값이 삭제가 안되고 중첩되서 넣은 코드
                    for(let i = 0; i < cardData.subPath.length; i++){
                        if (cardData.subPath[i].type === 7) {
                            cardData.subPath.splice(i, 1);
                        }
                    }
                    let middleSubPath = {type: 7, sectionTime: middlePath.path[0].info.totalTime, payment: middlePath.path[0].info.payment, distance: middlePath.path[0].info.totalDistance}
                    cardData.subPath.splice(cardData.subPath.length -1, 0, middleSubPath);
                }

                if (afterPath) {
                    cardData.afterPath = {
                        time: afterPath.path[0].info.totalTime,
                        payment: afterPath.path[0].info.payment,
                        distance: afterPath.path[0].info.totalDistance,
                    };
                    afterPath.path[0].info.startName = cardData.subPath[cardData.subPath.length - 1].endName;
                }
                // 타임바 생성 (전체요금 및 경로 표시)
                $('.list_card li.on .card_detail').children().remove().end().append(makeOuterResultInfoTagF(cardData));
                // 카드에 상세 경로 생성
                $(makeInnerResultDetailTagF(data, 'inner')).find('li:last-child').addClass('end').end().appendTo('.list_card li.on .card_detail');
                if (beforePath) {
                    $(makeInnerResultDetailTagF(beforePath.path[0], 'outer'), true).appendTo('.list_card li.on .card_detail .result_detail ul');
                } else {
                    $(noDataDetailTag(startName)).appendTo('.list_card li.on .card_detail .result_detail ul');
                }

                if (middlePath) {
                    $(makeOuterResultDetailTagF(data, 0)).find('li:last-child').addClass('end').end().appendTo('.list_card li.on .card_detail .result_detail ul');
                    // startName이 전역변수로 쓰이기 때문에 구별해줄 필요있음
                    $(makeInnerResultDetailTagF(middlePath.path[0], 'outer', 'middle')).appendTo('.list_card li.on .card_detail .result_detail ul');
                    $(makeOuterResultDetailTagF(data, data.subPath.length -1)).find('li:last-child').addClass('end').end().appendTo('.list_card li.on .card_detail .result_detail ul');
                } else {
                    $(makeOuterResultDetailTagF(data)).find('li:last-child').addClass('end').end().appendTo('.list_card li.on .card_detail .result_detail ul');
                }
                if (afterPath) {
                    $(makeInnerResultDetailTagF(afterPath.path[0], 'outerEnd')).appendTo('.list_card li.on .card_detail .result_detail ul');
                } else {
                    $(noDataDetailTag(data.subPath[data.subPath.length-1].endName)).appendTo('.list_card li.on .card_detail .result_detail ul');
                    $(lastWalkTag(data)).appendTo('.list_card li.on .card_detail .result_detail ul');
                }

                $('.list_card li.on .card_detail .result_detail ul').find('li:last-child').addClass('end');
                $('.list_card li.on').clone().appendTo('.spot_info .info_trans').on('click', toggleInfoTrans);
                $('.spot_info .info_trans > li.on .card_detail .result_detail').append('<div class="maker">powered by <em>www.ODsay.com</em></div>');

                if (!isShared) {
                    let pathidx = totalPathData.path.indexOf(cardData);
                    let shareParams = new URLSearchParams({
                        sx : startX,
                        sy : startY,
                        sname : startName,
                        ex : endX,
                        ey : endY,
                        ename : endName,
                        type : null,
                        pathidx : pathidx
                    }).toString();
                    $('.list_card li.on .card_detail .result_detail').append(
                        `<div class="btn_area">
                       <a class="btn_share" href="javascript:void(0);" onclick="share_poi('${shareParams}'); event.stopPropagation();"></a>
    	                   <a href="javascript:void(0);" onclick="showTransPath('trans'); event.stopPropagation();">${messages[langStr].mapStr}</a>
    	                </div>`
                    );
                }
                $('.list_card li.on .card_detail .result_detail').append('<div class="maker">powered by <em>www.ODsay.com</em></div>');
            },
            drawCard: function() {
                cardObject = $(makeOuterCardHtmlTag(cardData));
                cardObject.find('li:last-child').addClass('end').end().appendTo('.list_card').on('click', function(e) {
                    $('.list_card').find('li').not(cardObject).removeClass('on');
                    $('.list_card').find('li').not(cardObject).find('.title_name').show();
                    $('.list_card').find('li').not(cardObject).find('.card_tit').show();

                    if(cardObject.attr('class') == 'on'){
                        cardObject.removeClass('on');
                        cardObject.find('.title_name').show();
                        cardObject.find('.card_tit').show();
                    }else{
                        cardObject.addClass('on');
                        cardObject.find('.title_name').hide();
                        cardObject.find('.card_tit').hide();
                        card.clickCard();
                    }
                    e.stopPropagation();
                });
            },
            checkOptions: function(options) {
                // data.path.pathType: 11-열차, 12-고속/시외버스, 13-항공, 20-시외교통 복합(열차+고속버스 등)
                let valueCh = {
                    11: 3,
                    12: 4,
                    13: 5,
                }
                if (options.pathType) {
                    let code = valueCh[data.pathType]
                    if (options.pathType.indexOf(code) == -1 && options.pathType.length < 4) {
                        return false;
                    }
                }
                return true;
            }
        }
        card.init();
        return card;
}

//도시내 결과시에 쓰일 카드객체
let innerCityCardObj = function(data) {
    let cardData;
    let card;
    let cardObject;
    let mapObj;
    // 요금
    let payment;
    // 도보시간
    let totalWalkTime = 0;
    // 환승횟수
    let transitCount;
    // 교통수단
    let pathType;
    card = {
        init : function() {
            card.dataSet();
            card.drawCard();
        },
        dataSet : function() {
            cardData = data;
            payment = cardData.info.payment;
            totalWalkTime = 0;
            transitCount = (cardData.info.busTransitCount + data.info.subwayTransitCount) - 1;
            pathType = cardData.pathType;
            mapObj = cardData.info.mapObj;
            $.each(cardData.subPath, function(i, e) {
                if (e.trafficType === 3) {
                    totalWalkTime += e.sectionTime;
                }
            });
        },
        clickCard : function() {
            findWayBounds = [];

            $('.pin_t').remove();
            $('.pin_icon').remove();
            $('.spot_info .info_trans').children().remove();
            removeLines();

            innerCityDrawLine(mapObj, 'inner', null);
            $('.list_card li.on .card_detail').children().remove().end().append(makeInnerResultInfoTagF(cardData));
            $(makeInnerResultDetailTagF(cardData, 'inner')).find('li:last-child').addClass('end').end().appendTo('.list_card li.on .card_detail');
            $('.list_card li.on').clone().appendTo('.spot_info .info_trans').on('click', toggleInfoTrans);
            $('.spot_info .info_trans > li.on .card_detail .result_detail').append('<div class="maker">powered by <em>www.ODsay.com</em></div>');

            if(!isShared){
                let pathidx = totalPathData.path.indexOf(cardData);
                let shareParams = new URLSearchParams({
                    sx : startX,
                    sy : startY,
                    sname : startName,
                    ex : endX,
                    ey : endY,
                    ename : endName,
                    type : null,
                    pathidx : pathidx,
                    pathType : null
                }).toString();
                $('.list_card li.on .card_detail .result_detail').append(
                    `<div class="btn_area">
                           <a class="btn_share" href="javascript:void(0);" onclick="share_poi('${shareParams}'); event.stopPropagation();"></a>
			                   <a href="javascript:void(0);" onclick="showTransPath('trans'); event.stopPropagation();">${messages[langStr].mapStr}</a>
						</div>`
                );
            }
            $('.list_card li.on .card_detail .result_detail').append('<div class="maker">powered by <em>www.ODsay.com</em></div>');
        },
        // 카드객체 리턴
        getCardObject : function() {
            return cardObject;
        },
        // 카드 그리기
        drawCard : function() {
            // 외국어 카드태그
            cardObject = $(makeInnerCardHtmlTagF(cardData));
            cardObject.find('li:last-child').addClass('end').end().appendTo('.list_card').on('click', function(e) {
                $('.list_card').find('li').not(cardObject).removeClass('on');
                if(cardObject.attr('class') === 'on'){
                    cardObject.removeClass('on');
                }else{
                    cardObject.addClass('on');
                    card.clickCard();
                }
                e.stopPropagation();
            });
        },
        // 카드 옵션체크
        checkOptions : function(options) {
            if (options.pathType) {
                if (options.pathType.indexOf(pathType) === -1 && options.pathType.length < 2) {
                    return false;
                }
            }
            return true;
        }
    }
    card.init();
    return card;
}


//장소 검색 버튼 클릭 이벤트
async function onSearch(id) {
    let keyword = $('#' + id).val().trim();
    // 검색어 없을 경우 경고 표출
    if (!keyword) {
        if (!keyword.replace(/^\s+|\s+$/g, '')) {
            alert(messages[langStr].inputYourLocation)
        }
        return false;
    }
    inputId = id;

    totalMapDataYN = true;
    contentsKeyword = keyword;

    common.startSpinner()
    let param = {}
    param.keyword = keyword;
    let datas = apis.searchKtoMapPoi(param);
    let data = await datas.then(function (resolvedData) {
        common.sendGAEvent(1002, keyword);
        return resolvedData
    }).finally(() => {common.endSpinner()})
    getPoiData(data);
}

function setPoiList(items){
    // Locations 초기화
    resetSpots(true);
    // 인풋박스 버튼 초기화
    $('.btn_del').css('width', '30px');
    $('.btn_departure').hide();
    $('.btn_arrival').hide();
    
    viewMapSize();
    currentPage = 1;
    poiList = items;
    setPoiListDisplay();
    // 검색된 POI 리스트 생성
    displayPlaces();
    onClickNavi(1);
    common.endSpinner();
}

const setPoiListDisplay = () => {
    // 기존 마커 제거
    removeLines();
    $('.pin_icon').remove();
    $('.map_choice').remove();
    $('#'+inputId).parent().removeClass('input_def input_act').addClass('input_fin');	// 검색어 삭제 버튼 활성화
    $('.result .result_list').removeClass('departure arrival').addClass(inputId);
    $('.result .list_place').show();
    $('.result .list_card').hide();
    $('.result .option_tabmenu').hide();
    $('.result_list2').hide();
    closeLongTab();
    removeMyLocation();
    $('.spot_info .list_place').children().remove();
    $('#map_call').appendTo('#view_map');
    $('#view_map').show();
    $('.pin_icon').remove();	// 기존 마커 제거
    $('.result .list_place').children().remove();	// 기존 POI 리스트 제거
    $('.result .find_bottom').show();
    $('#view_header').removeClass().addClass('view_con nav2');
    $('.btn_area').hide();
    $('#spotNavi').hide();
    $('#spotBtn').hide();
    $('.result').show();
    // 스크롤 초기화
    $('#view_header').scrollTop(0)
}


function displayPlaces() {
    let listItems = []
    let places = isShared ? poiList : poiList.slice((currentPage - 1) * 10, currentPage * 10);
    let isLastPage = poiList.slice(currentPage * 10, (currentPage + 1) * 10).length === 0;
    if (places) {
        $.each(places, function(idx, entry) {
            let index = isShared ? ++idx : (currentPage - 1) * 10 + (++idx);
            let itemCell = []

            let cx = entry.mapX
            let cy = entry.mapY
            let tel = entry.tel
            let name = entry.title

            let category;
            if (entry.poiCdName !== "" && entry.poiCdName) category = entry.poiCdName.split(/[\|]+/).join('>');
            if (entry.cat3Name) category = entry.cat3Name;

            let add;
            if (entry.addr1) add = (entry.addr1).replace(/^,\x20/, '').trim()
            if (entry.addr2) add = (entry.addr1 + entry.addr2).replace(/^,\x20/, '').trim()
            let latLng = { 'lng': cx, 'lat': cy };

            let html = `
                <li cx=${cx} cy=${cy} name=${encodeURIComponent(name)} class='poi_${index} li_place'>
                <a href="javascript:cardMarkerClick(${index})">
                <dl><dt class="pin">
                <span class="pin_icon">${index}</span>
                </dt><dd>
                <span class="tit">${name}</span>
                <span class="type">
                `
            itemCell.push(html);
            if (entry.contentTypeId) {
                let catg = categoryID[entry.contentTypeId]
                category = contentsCategory(catg)
                itemCell.push('<span class="icon_spot' + catg + '"></span>');
            }
            if (category) {
                itemCell.push(category + '</span>');
            } else {
                itemCell.push('</span>');
            }
            if (name === add) {
				itemCell.push('<span class="add" style="visibility: hidden;">'+add+'</span>');
			} else {
				itemCell.push('<span class="add">'+add+'</span>');
			}
            if (tel) itemCell.push('<span class="tel">Tel. '+tel+'</span>');
            itemCell.push('</dd>');
            itemCell.push('</dl>');
            itemCell.push('</a>');
            itemCell.push('<div class="btn_area">');
            itemCell.push(`<a href="javascript:cardClick(${index})" class="btn_map">${messages[langStr].mapStr}</a>`);
            itemCell.push('</div>');
            itemCell.push('</li>');
            listItems.push(itemCell.join(""));

            let markerIcon = { content: `<span id='pin_map2' class='map_pin pin_icon pin_${index}' onclick='event.stopPropagation(); cardMarkerClick(${index})'>${index}</span>` };
            markerType(markerIcon, latLng)

        });
        $('.result .list_place').append(listItems);
        currentPage++;
    }
    if (isLastPage) {
        $('.find_bottom #btn_more').hide();
    } else {
        $('.find_bottom #btn_more').show();
    }
}

const cardMarkerClick = (idx) => {
    let $el = $(".result li.poi_" + idx);
    $(".result li").removeClass('on');
    $($el).addClass('on');
    let latLng = {'lng': $el[0].getAttribute('cx'), 'lat': $el[0].getAttribute('cy')}
    let placeName = $el[0].getAttribute('name');

    // 마커 이동
    mapZoom(latLng, 2)

    // 마커 on
    setPlace(inputId, latLng, placeName);
    // 스크롤 초기화
    $('#view_header').scrollTop(0)
    // 스크롤 이동
    $('#view_header').scrollTop($el.offset().top -429)
    if ($('#back_btn').css('display') === 'block') {
        $('#view_header > div.spot_info > div > ul.list_place').children().remove().end().append($el.clone().addClass('aTagNone'));
        viewHeaderSize();
    }
}

const onClickNavi = (idx) => {
    let $el = $(".result li.poi_" + idx);
    $(".result li").removeClass('on');
    $($el).addClass('on');

    let latLng = {'lng': $el[0].getAttribute('cx'), 'lat': $el[0].getAttribute('cy')}
    let name = $el[0].getAttribute('name');

    // 출발지 설정인 경우
    setPlace(inputId, latLng, name);
}

const showPlaceOnMap = (idx, isMarkerClicked) => {
    let $el = $(".result li.poi_" + idx);
    let latLng = {'lng': $el[0].getAttribute('cx'), 'lat': $el[0].getAttribute('cy')};
    let placeName = $el[0].getAttribute('name');

    $('.result').css('display','block');
    $('.search').hide();
    $('.result').hide();
    $('#top_menu').hide();
    $(".result li").removeClass('on');
    $('#spotBtn a:nth-child(1n+2)').css('margin-left', '37px');

    spotHide();
    $('.list_place').children().remove().end().append($el.clone().addClass('aTagNone'));
    $el.addClass('on');
    $('.list_place').show();
    $('#spotBtn .btn_spots').show();

    setBtnMapBackVisibility(true);

    // 지도에서 마커 클릭한 경우
    if(!isMarkerClicked){
        setPlace(inputId, latLng, placeName);
    }
    resetSpots(true);
    onPrev = window['closeMap'];
    resizeMapContainer();
    mapZoom(latLng, 2);
}

const cardScrollTo = () => {
    let pin_on = $('.result_list .on').attr('class');
    let regex = /[^0-9]/g;
    let pinNum = pin_on?.replace(regex, "");
    if (pinNum) {
        cardMarkerClick(pinNum);
    }
}

function closeMap () {
    $('#top_menu').show();
    setBtnMapBackVisibility(false);

    const placeElement = $('.spot_info .li_place')
	// 하지만 키워드 검색 결과물이라면 다르게 가져가야 한다.
    if (placeElement.hasClass('aTagNone')) {
        mapCallMove(placeElement.data('map-move-type') || 4);
        cardScrollTo();
    } else {
        mapCallMove(1);
    }

    $('.spot_pin').remove();
    $('#spotBtn .btn_spots').show();
    $('.spot_info').hide();
    $('.search').show();
    $('.aTagNone').remove();
    removeMyLocation();
    $('.info_trans').removeClass('detail_act');
    $('#pin_d').removeAttr('onclick');
    $('#pin_a').removeAttr('onclick');
    spotHide();
    onPrev = null;
    if(isShared){
        isShared = false;
        removePlace('departure')
        removePlace('arrival')
        return;
    }
    viewMapSize();
}

const makeInnerCardHtmlTagF = (data) => {
    var cardHtmlArray = [];
    var payment, time, distance;
    if(data.info){
        //시내
        payment = data.info.payment;
        time 	= data.info.totalTime;
        distance = data.info.totalDistance;
    }else{
        payment = data.payment;
        time	= data.time;
        distance = 0;
    }
    cardHtmlArray.push('<li>');
    cardHtmlArray.push('<dl class="card_tit">');
    cardHtmlArray.push('<dt>');
    let cvtTime = common.timeConvert(data.info.totalTime);
    if(cvtTime[0] > 0){
        cardHtmlArray.push('<span class="big">');
        cardHtmlArray.push(cvtTime[0]);
        cardHtmlArray.push('</span>');
        cardHtmlArray.push(messages[langStr].hour+'&nbsp;');
    }
    cardHtmlArray.push('<span class="big">');
    cardHtmlArray.push(cvtTime[1]);
    cardHtmlArray.push('</span>');
    cardHtmlArray.push(messages[langStr].min);
    cardHtmlArray.push('</dt>');
    let sumTime = 0;
    $.each(data.subPath,function(i,e){
        if(e.trafficType === 3){
            sumTime += e.sectionTime;
        }
    });
    cardHtmlArray.push('<dd>');
    cardHtmlArray.push('<span class="type1">');
    cardHtmlArray.push(messages[langStr].optStrWalk+'&nbsp;');
    cardHtmlArray.push(sumTime + messages[langStr].min+"&nbsp;,");
    cardHtmlArray.push(messages[langStr].optStrTransit+'&nbsp;');
    cardHtmlArray.push(Number(data.info.busTransitCount) + Number(data.info.subwayTransitCount) -1);
    cardHtmlArray.push(messages[langStr].cntByLang);
    cardHtmlArray.push('</span>');
    cardHtmlArray.push('<span class="type2">');
    cardHtmlArray.push('<span class="price">');
    if (data.info.payment == null || data.info.payment === -1) {
		cardHtmlArray.push(messages[langStr].noFareInfo);
        cardHtmlArray.push('</span></span>');
    } else {
        cardHtmlArray.push(data.info.payment);
        cardHtmlArray.push('</span>&nbsp;'+messages[langStr].won+'</span>');
    }
    cardHtmlArray.push('</dd>');
    cardHtmlArray.push('</dl>');
    cardHtmlArray.push('<div class="card_route"><ul>');
    $.each(data.subPath, function(index, entry) {
        switch (entry.trafficType) {
            case 1: case "1":
                if (entry.lane[0].subwayCityCode === 2000 ) entry.lane[0].subwayCityCode = 1000
                cardHtmlArray.push('<li class="line_sub_' + entry.lane[0].subwayCityCode + '_' + entry.lane[0].subwayCode + '">');
                cardHtmlArray.push('<div class="detail_info">');
                cardHtmlArray.push('<dl><dt>');
                cardHtmlArray.push('<span class="head2">');
                cardHtmlArray.push('</span>');
                cardHtmlArray.push(entry.startName);
                cardHtmlArray.push('</dt></dl>');
                cardHtmlArray.push('</div></li>');
                break;
            case 2: case "2":
                cardHtmlArray.push('<li class="line_bus">');
                cardHtmlArray.push('<div class="detail_info">');
                cardHtmlArray.push('<dl><dt>');
                cardHtmlArray.push('<span class="head2">');
                cardHtmlArray.push('</span>');
                cardHtmlArray.push(entry.startName);
                cardHtmlArray.push('</dt>');
                cardHtmlArray.push('<dd>');
                cardHtmlArray.push(entry.lane[0].busNo);
                cardHtmlArray.push('</dd></dl>');
                cardHtmlArray.push('</div></li>');
                break;
            case 3: case "3":
                if (index === 0 && entry.distance>5) {
                    cardHtmlArray.push('<li class="line_walk">');
                    cardHtmlArray.push('<div class="detail_info">');
                    cardHtmlArray.push('<dl><dt>');
                    cardHtmlArray.push('<span class="head2">');
                    cardHtmlArray.push('</span>');
                    cardHtmlArray.push(startName);
                    cardHtmlArray.push('</dt></dl>');
                    cardHtmlArray.push('</div></li>');
                }
                if (index > 0 && index === (data.subPath.length) - 1) {
                    switch (data.subPath[index - 1]) {
                        case 1: case "1":
                            cardHtmlArray.push('<li class="line_sub_' + data.subPath[index - 1].lane[0].subwayCityCode + '_' + data.subPath[index - 1].lane[0].subwayCode + '">');
                            cardHtmlArray.push('<div class="detail_info">');
                            cardHtmlArray.push('<dl><dt>');
                            cardHtmlArray.push('<span class="head2">');
                            cardHtmlArray.push('</span>');
                            cardHtmlArray.push(data.subPath[index - 1].endName);
                            cardHtmlArray.push('</dt></dl>');
                            cardHtmlArray.push('</div></li>');
                            break;

                        case 2: case "2":
                            cardHtmlArray.push('<li class="line_bus">');
                            cardHtmlArray.push('<div class="detail_info">');
                            cardHtmlArray.push('<dl><dt>');
                            cardHtmlArray.push('<span class="head2">');
                            cardHtmlArray.push('</span>');
                            cardHtmlArray.push(data.subPath[index - 1].endName);
                            cardHtmlArray.push('</dt></dl>');
                            cardHtmlArray.push('</div></li>');
                            break;
                        default:
                            break;
                    }
                    cardHtmlArray.push('<li class="line_walk">');
                    cardHtmlArray.push('<div class="detail_info">');

                    cardHtmlArray.push('<dl><dt>');
                    cardHtmlArray.push('<span class="head2">');
                    cardHtmlArray.push('</span>');
                    cardHtmlArray.push(endName);
                    cardHtmlArray.push('</dt></dl>');
                    cardHtmlArray.push('</div></li>');
                }
                break;
            default:
                break;
        }

    });
    cardHtmlArray.push('</ul></div>');
    cardHtmlArray.push('<div class="card_detail"></div>');
    cardHtmlArray.push('</li>');
    return cardHtmlArray.join("");
}
const makeOuterCardHtmlTag = (data, trafficType) => {

    let datas = {
        payment: data.info.totalPayment,
        time: data.info.totalTime,
        distanc: data.info.totalDistance,
    }

    let cardHtmlArray =[];

    cardHtmlArray.push('<li>');
    cardHtmlArray.push('<div class="title_name">');
    cardHtmlArray.push('<span class="fl">'+messages[langStr].interCityTime+'</span>');
    cardHtmlArray.push('<span class="fr">'+messages[langStr].interCityFare+'</span>');
    cardHtmlArray.push('</div>');
    cardHtmlArray.push('<dl class="card_tit">');
    cardHtmlArray.push('<dt>');
    let cvtTime = common.timeConvert(datas.time);
    if(cvtTime[0] > 0){
        cardHtmlArray.push('<span class="big">');
        cardHtmlArray.push(cvtTime[0]);
        cardHtmlArray.push('</span>');
        cardHtmlArray.push(messages[langStr].hour+'&nbsp;');
    }
    cardHtmlArray.push('<span class="big">');
    cardHtmlArray.push(cvtTime[1]);
    cardHtmlArray.push('</span>');
    cardHtmlArray.push(messages[langStr].min);
    cardHtmlArray.push('</dt>');
    cardHtmlArray.push('<dd>');
    cardHtmlArray.push('<span class="type2" style="top:-22px">');
    if (!datas.payment) {
        cardHtmlArray.push('<span class="price" style="padding:0">');
        cardHtmlArray.push(messages[langStr].noFareInfo+'</span></span>');
    } else {
        cardHtmlArray.push('<span class="price">');
        cardHtmlArray.push(datas.payment);
        cardHtmlArray.push('</span>&nbsp;'+messages[langStr].won+'</span>');
    }
    cardHtmlArray.push('</dd>');
    cardHtmlArray.push('</dl>');
    cardHtmlArray.push('<div class="card_route"><ul>');

    cardHtmlArray.push('<li class="line_walk">');
    cardHtmlArray.push('<div class="detail_info">');
    cardHtmlArray.push('<dl><dt>');
    cardHtmlArray.push('<span class="head2">');
    cardHtmlArray.push('</span>');
    cardHtmlArray.push(startName);
    cardHtmlArray.push('</dt></dl>');
    cardHtmlArray.push('</div></li>');

    $.each(data.subPath, function(index,entry){

        cardHtmlArray.push(`<li class="${lineClassType[entry.trafficType]}">`);
        cardHtmlArray.push('<div class="detail_info">');
        cardHtmlArray.push('<dl><dt>');
        cardHtmlArray.push('<span class="head2">');
        cardHtmlArray.push('</span>');

        if (entry.trafficType === 5) {
            cardHtmlArray.push(`(${messages[langStr].expressBus}) ${entry.startName}`);
        } else if (entry.trafficType === 6) {
            cardHtmlArray.push(`(${messages[langStr].intercityBus}) ${entry.startName}`);
        } else {
            cardHtmlArray.push(`${entry.startName}`);
        }
        cardHtmlArray.push('</dt></dl>');
        cardHtmlArray.push('</div></li>');

        if (index === data.subPath.length - 1) {
            datas.middleEndName = entry.endName;
            datas.type = entry.trafficType;
        }
    })

    cardHtmlArray.push(`<li class="${lineClassType[datas.type]}">`);
    cardHtmlArray.push('<div class="detail_info">');
    cardHtmlArray.push('<dl><dt>');
    cardHtmlArray.push('<span class="head2">');
    cardHtmlArray.push('</span>');
    cardHtmlArray.push(datas.middleEndName);
    cardHtmlArray.push('</dt></dl>');
    cardHtmlArray.push('</div></li>');

    cardHtmlArray.push('<li class="line_walk">');
    cardHtmlArray.push('<div class="detail_info">');
    cardHtmlArray.push('<dl><dt>');
    cardHtmlArray.push('<span class="head2">');
    cardHtmlArray.push('</span>');
    cardHtmlArray.push(endName);
    cardHtmlArray.push('</dt></dl>');
    cardHtmlArray.push('</div></li>');
    cardHtmlArray.push('</ul></div>');
    cardHtmlArray.push('<div class="card_detail"></div>');
    cardHtmlArray.push('</li>');
    return cardHtmlArray.join("");
}

const showStartEndPlace = (type) => {
    topHideMap();
    spotHide();
    $('.list_place').children().remove();
    $('.list_place').show();

    if (type === 'departure') {
        if (startPlaceInfo.length > 0) {
			startPlaceInfo.data('map-move-type', 1)
            $('.list_place').append(startPlaceInfo.removeClass('on'));
        } else {
            // 정보가 없으면 지도확대
            $('#view_header').removeClass('view_con').addClass('header_con');
        }
        mapZoom({'lng': startX, 'lat': startY}, 2);
    } else {
        if (endPlaceInfo.length > 0) {
			endPlaceInfo.data('map-move-type', 1)
            $('.list_place').append(endPlaceInfo.removeClass('on'));
        } else {
            // 정보가 없으면 지도확대
            $('#view_header').removeClass('view_con').addClass('header_con');
        }
        mapZoom({'lng': endX, 'lat': endY}, 2);
    }
    $('#pin_d').attr('onclick', 'showStartEndPlace("departure"); event.stopPropagation();');
    $('#pin_a').attr('onclick', 'showStartEndPlace("arrival"); event.stopPropagation();');
    common.endSpinner();
}

function toggleInfoTrans() {
    if ( $('.info_trans').hasClass('detail_act') ) {
        $('.info_trans').animate({top: ($(window).height()-115)}, 500);
        $('.info_trans').removeClass('detail_act');
        $('#map_call').fadeIn(600);
        onPrev = window['closeMap'];
    }
    else {
        $(".info_trans").css('display', 'block');
        $('.info_trans').addClass('detail_act');
        $('.info_trans').animate({top: 44}, 500);
        $('#map_call').fadeOut(600);
        onPrev = window['toggleInfoTrans'];
    }
}

const makeInnerResultInfoTagF = (data) => {

    let detailHtmlArray = [];

    detailHtmlArray.push('<div class="time_bar">');

    let fullSectionTime = 0;
    $.each(data.subPath, function(index, entry) {
        fullSectionTime += entry.sectionTime;
    });

    $.each(data.subPath, function(index, entry) {
        switch (entry.trafficType) {
            case 1: case "1":
                detailHtmlArray.push('<span class="sub_' + entry.lane[0].subwayCityCode + '_' + entry.lane[0].subwayCode + '" style="width:' + 100 * (entry.sectionTime / fullSectionTime) + '%;">');
                detailHtmlArray.push('<span class="pin"></span>' + entry.sectionTime + messages[langStr].min+'</span>');
                break;
            case 2: case "2":
                detailHtmlArray.push('<span class="bus" style="width:' + 100 * (entry.sectionTime / fullSectionTime) + '%;">');
                detailHtmlArray.push('<span class="pin"></span>' + entry.sectionTime + messages[langStr].min+'</span>');
                break;
            case 3: case "3":
                if(index !== 0 && index !== data.subPath.length-1){
                    getWalkPath(data.subPath[index-1].endX,data.subPath[index-1].endY,data.subPath[index+1].startX,data.subPath[index+1].startY);
                }
                if(100 * (entry.sectionTime / fullSectionTime) > 4){
                    detailHtmlArray.push('<span class="walk" style="width:' + 100 * (entry.sectionTime / fullSectionTime) + '%;">');
                    detailHtmlArray.push('<span class="pin"></span>' + entry.sectionTime + messages[langStr].min+'</span>');
                }else{
                    detailHtmlArray.push('<span class="downtown" style="width:' + 100 * (entry.sectionTime / fullSectionTime) + '%;">');
                    detailHtmlArray.push('<span class="pin"></span></span>');
                }
                break;
            default:
                break;
        }
    });
    detailHtmlArray.push('</div>');
    return detailHtmlArray.join("");
}

const makeInnerResultDetailTagF = (data, type, type2) => {

    let detailHtmlArray = [];

    if (type === 'inner') {
        detailHtmlArray.push('<div class="result_detail">');
        detailHtmlArray.push('<ul>');
    }

    $.each(data.subPath, function(index, entry) {
        switch (entry.trafficType) {
            case 1: case "1":
                detailHtmlArray.push('<li class="line_sub_' + entry.lane[0].subwayCityCode + '_' + entry.lane[0].subwayCode + '">');
                detailHtmlArray.push('<div class="time"><span>');
                detailHtmlArray.push(entry.sectionTime);
                detailHtmlArray.push(messages[langStr].min+'</span></div>');
                detailHtmlArray.push('<div class="detail_info"><dl>');
                detailHtmlArray.push('<dt><span class="head"></span>');
                detailHtmlArray.push(entry.startName);
                detailHtmlArray.push('</dt>');
                detailHtmlArray.push(`<dd>${langStops(entry.stationCount)}</dd>`);
                if (entry.door && entry.door !== 'null') {
                    switch (lang) {
                        case 1: case "1":
                            //Door where rapid transit is convenient: #O-O door
                            detailHtmlArray.push('<dd>Platform where rapid transit is convenient:</dd>');
                            detailHtmlArray.push('<dd>Platform ' + entry.door + '</dd>');
                            break;
                        case 2: case "2":
                            //早い乗り換え0-0度門
                            let _door = (entry.door).split('-');
                            detailHtmlArray.push('<dd>'+_door[0]+'両目 ' + _door[1] + 'ドア</dd>');
                            break;
                        case 3: case "3":
                            //快速换乘0-0号门
                            detailHtmlArray.push('<dd>快速换乘 ' + entry.door + ' 号门</dd>');
                            break;
                    }
                } else {
                    detailHtmlArray.push('<dd></dd>');
                }
                detailHtmlArray.push('</dl><div></li>');
                break;

            case 2: case "2":
                detailHtmlArray.push('<li class="line_bus">');
                detailHtmlArray.push('<div class="time"><span>');
                detailHtmlArray.push(entry.sectionTime);
                detailHtmlArray.push(messages[langStr].min+'</span></div>');
                detailHtmlArray.push('<div class="detail_info"><dl>');
                detailHtmlArray.push('<dt><span class="head"></span>');
                detailHtmlArray.push(entry.startName);
                detailHtmlArray.push('</dt>');
                detailHtmlArray.push(`<dd>${entry.lane[0].busNo} ${messages[langStr].getOn}</dd>`);
                detailHtmlArray.push(`<dd>${langStops(entry.stationCount)}</dd>`);
                detailHtmlArray.push('</dl></div></li>');
                break;

            case 3: case "3":
                if (type === 'inner') {
                    if (entry.sectionTime !== 0) {
                        detailHtmlArray.push('<li class="line_walk">');
                        detailHtmlArray.push('<div class="time"><span>');
                        detailHtmlArray.push(entry.sectionTime);
                        detailHtmlArray.push(messages[langStr].min+'</span></div>');
                        detailHtmlArray.push('<div class="detail_info"><dl>');
                        detailHtmlArray.push('<dt><span class="head"></span>');
                        if (index === 0 && data.subPath[index + 1]) {
                            // startName :: 전역변수
                            detailHtmlArray.push(startName);
                            detailHtmlArray.push('</dt>');
                            detailHtmlArray.push(`<dd>${messages[langStr].usePedestrianWay}</dd>`);
                            detailHtmlArray.push('<dd>' + entry.distance + 'm</dd>');
                        } else if (index === data.subPath.length - 1 && data.subPath[index - 1]) {
                            detailHtmlArray.push(data.subPath[index - 1].endName);
                            detailHtmlArray.push(`</dt><dd>${langWalkTo(endName)}</dd>`);
                            detailHtmlArray.push(`<dd>${langMove(entry.distance)}</dd>`);
                        } else {
                            if (entry.endName) {
                                detailHtmlArray.push(entry.endName);
                            } else {
                                detailHtmlArray.push(data.subPath[index - 1].endName);
                            }
                            detailHtmlArray.push(`</dt><dd>${langWalkTo(data.subPath[index + 1].startName)}</dd>`);
                            detailHtmlArray.push(`<dd>${langMove(entry.distance)}</dd>`);
                        }
                        detailHtmlArray.push('</dl></div></li>');
                    }
                        if (index === data.subPath.length - 1) {
                            detailHtmlArray.push('<li class="line_walk">');
                            detailHtmlArray.push('<div class="time"><span>');
                            detailHtmlArray.push(data.sectionTime);
                            detailHtmlArray.push('</span></div>');
                            detailHtmlArray.push('<div class="detail_info"><dl>');
                            detailHtmlArray.push('<dt><span class="head"></span>');
                            detailHtmlArray.push(endName);
                            detailHtmlArray.push('</dt>');
                            detailHtmlArray.push('<dd></dd>');
                            detailHtmlArray.push('<dd></dd>');
                            detailHtmlArray.push('</dl><div></li>');
                        }
                } else {
                    if (type === "outerEnd") {
                        if ( index !== 0 && index !== data.subPath.length-1 ) {
                            getWalkPath(data.subPath[index-1].endX, data.subPath[index-1].endY, data.subPath[index+1].startX, data.subPath[index+1].startY);
                        }
                        if(entry.sectionTime === 0 && entry.distance ===0) { break; };
                        let nextStnName = (index !== data.subPath.length-1)?  data.subPath[index + 1].startName : endName;

                        detailHtmlArray.push('<li class="line_walk">');
                        detailHtmlArray.push('<div class="time"><span>');
                        detailHtmlArray.push(entry.sectionTime);
                        detailHtmlArray.push(messages[langStr].min+'</span></div>');
                        detailHtmlArray.push('<div class="detail_info"><dl>');
                        detailHtmlArray.push('<dt><span class="head"></span>');
                        if(index === 0){
                            detailHtmlArray.push(data.info.startName);
                        }else{
                            detailHtmlArray.push(data.subPath[index - 1].endName);
                        }
                        detailHtmlArray.push('</dt>');
                        detailHtmlArray.push(`<dd>${langWalkTo(nextStnName)}</dd>`);
                        detailHtmlArray.push(`<dd>${langMove(entry.distance)}</dd>`);
                        detailHtmlArray.push('</dl><div></li>');
                        if(index === data.subPath.length-1){
                            detailHtmlArray.push('<li class="line_walk">');
                            detailHtmlArray.push('<div class="detail_info"><dl>');
                            detailHtmlArray.push('<dt><span class="head"></span>');
                            detailHtmlArray.push(endName);
                            detailHtmlArray.push('</dt>');
                            detailHtmlArray.push('</dl></div></li>');
                        }
                    } else if (type === "outer") {
                        if ( index !== 0 && index !== data.subPath.length-1 ) {
                            getWalkPath(data.subPath[index-1].endX, data.subPath[index-1].endY, data.subPath[index+1].startX, data.subPath[index+1].startY);
                        }
                        if(entry.sectionTime === 0 && entry.distance ===0) { break; };

                        let nextStnName = (index !== data.subPath.length-1)?  data.subPath[index + 1].startName : data.info.arriveName;
                        if (index !== 0 && type2 === 'middle') {
                            nextStnName = data.info.arriveName;
                        }

                        detailHtmlArray.push('<li class="line_walk">');
                        detailHtmlArray.push('<div class="time"><span>');
                        detailHtmlArray.push(entry.sectionTime);
                        detailHtmlArray.push(messages[langStr].min+'</span></div>');
                        detailHtmlArray.push('<div class="detail_info"><dl>');
                        detailHtmlArray.push('<dt><span class="head"></span>');
                        if(index !== 0){
                            detailHtmlArray.push(data.subPath[index - 1].endName);
                        }else {
                            if (type2 === 'middle') {
                                detailHtmlArray.push(data.info.startName);
                            } else {
                                detailHtmlArray.push(startName);
                            }
                        }
                        detailHtmlArray.push('</dt>');
                        detailHtmlArray.push(`<dd>${langWalkTo(nextStnName)}</dd>`);
                        detailHtmlArray.push(`<dd>${langMove(entry.distance)}</dd>`);
                        detailHtmlArray.push('</dl></div></li>');
                    }
                }
                break;
            default:
                break;
        }
    });
    if (type === 'inner') {
        detailHtmlArray.push('</ul>');
        detailHtmlArray.push('</div>');
    }

    return detailHtmlArray.join("");
}

// 도시간 길찾기카드 상세정보
const searchPathOuterCardDetail = async function (sx, sy, ex, ey, type) {

    let params2 = {OPT: 0, radius: '700:2000', SX: sx, SY: sy, EX: ex, EY: ey}
    common.startSpinner()
    let datas = apis.searchPubTransPathT(params2);
    let data = await datas.then(function (resolvedData) {
        return resolvedData
    }).finally(() => {common.endSpinner()})

    let byOuterResultCoord = {
        ex: ex,
        ey: ey,
        sx: sx,
        sy: sy,
        type: type,
        ranNum: sx - ex,
    };

    if (data) {
        if (data.path) {
            if (data.path[0].info.mapObj) {
                innerCityDrawLine(data.path[0].info.mapObj, 'inner', byOuterResultCoord);
            }
            $("#publicTrans").data("mapObj", data.path[0].info.mapObj);
            $("#publicTrans").data("type", "inner");
            $("#publicTrans").data("byOuterResultCoord", byOuterResultCoord);
        } else if (data.searchType === 1) {
            let lowRoute = getLowTimeRoute(data);
            if (lowRoute.obj) {
                // 출발지점으로부터 도시간 길찾기 시작지점까지의 도시내 경로 그려주기
                await searchPathOuterCardDetail(sx, sy, lowRoute.obj.SX, lowRoute.obj.SY, 'beforePath');

                if (lowRoute.type) {
                    innerCityDrawLine(lowRoute.obj.mapOBJ, 'train', null);
                    $("#publicTrans").data("mapObj", lowRoute.obj.mapOBJ);
                    $("#publicTrans").data("type", "train");
                    $("#publicTrans").data("byOuterResultCoord", null);
                } else {
                    outerCityDrawLine2(lowRoute.obj.SX, lowRoute.obj.SY, lowRoute.obj.EX, lowRoute.obj.EY);
                }
                // 도시간 도착지점으로부터 최종 도착지점까지의 도시내 경로 그리기
                await searchPathOuterCardDetail(lowRoute.obj.EX, lowRoute.obj.EY, ex, ey, 'afterPath');
            }
        } else {
            // "출, 도착지가 700m이내입니다" --> 경로 제공 X
            alert(messages[langStr].noRoutingResults)
        }

    }
    return data;
}

function outerCityDrawLine(sx, sy, ex, ey) {
    drawLines({ path: PrepareBezierPoints(sx, sy, ex, ey), ...getStrokeOptions(TRAFFIC_TYPE['INTERCITY_BUS'])});
}

function outerCityDrawLine2(sx, sy, ex, ey) {
    drawLines({ path: PrepareBezierPoints(sx, sy, ex, ey), ...getStrokeOptions(TRAFFIC_TYPE['INTERCITY_BUS'])});
}

function PrepareBezierPoints(ax, ay, zx, zy) {

    let bezierArray = [];
    bezierArray.push({'lng':ax, 'lat':ay});

    let k = 0;
    let cx = (ax + zx + ((zx - ax) * 0.5 + (zy - ay) * -0.86602540378443864676372317075294 + ax)) / 3;
    let cy = (ay + zy + (-(zx - ax) * -0.86602540378443864676372317075294 + (zy - ay) * 0.5 + ay)) / 3;

    for (i = 0; i < 0.9; i = i + 0.1) {
        k = k + 1;
        bezierXPoint = bezierPointX(ax, cx, zx, i);
        bezierYPoint = bezierPointY(ay, cy, zy, i);
        bezierArray.push({'lng':bezierXPoint, 'lat':bezierYPoint});
    }
    bezierArray.push({'lng':zx, 'lat':zy});

    return bezierArray;
}

function bezierPointX(x1, x2, x3, t) {
    let x = (1 - t) * (1 - t) * x1 + 2 * t * (1 - t) * x2 + t * t * x3;
    return x;
}

function bezierPointY(y1, y2, y3, t) {
    let y = (1 - t) * (1 - t) * y1 + 2 * t * (1 - t) * y2 + t * t * y3;
    return y;
}


// 경로 카드바
const makeOuterResultInfoTagF = function(data, middle) {

    let trafficTypevalueCheck = {
        4: 'train',
        5: 'busE',
        6: 'bus',
        7: 'air',
    }

    let detailHtmlArray = [];
    let totals = {
        time: data.info.totalTime + data.beforePath.time + data.afterPath.time + data.middlePath.time,
        payment: data.info.totalPayment + data.beforePath.payment + data.afterPath.payment + data.middlePath.payment,
        distance: data.info.totalDistance + data.beforePath.distance + data.afterPath.distance + data.middlePath.distance,
    }
    const hasNoFareInfo = [data.beforePath.payment, data.afterPath.payment, data.middlePath.payment].includes(-1)

    let cvtTime = common.timeConvert(totals.time);

    detailHtmlArray.push('<div class="card_title_total">');

    if(cvtTime[0]>0){
        detailHtmlArray.push('<span class="big">');
        detailHtmlArray.push(cvtTime[0]);
        detailHtmlArray.push('</span>');
        detailHtmlArray.push(messages[langStr].hour+'&nbsp;');
    }

    detailHtmlArray.push('<span class="big">');
    detailHtmlArray.push(cvtTime[1]);
    detailHtmlArray.push('</span>');
    detailHtmlArray.push(messages[langStr].min);

    detailHtmlArray.push('<span class="card_sub1"><span class="tb"></span></span>');
    detailHtmlArray.push('<span class="card_sub2">');
    detailHtmlArray.push('<span class="price">');

	if (hasNoFareInfo || totals.payment === 0) {
		detailHtmlArray.push(messages[langStr].noFareInfo + '</span>');
	} else {
		detailHtmlArray.push(totals.payment);
        detailHtmlArray.push('</span>'+messages[langStr].won);
	}

    detailHtmlArray.push('</div>');

    detailHtmlArray.push('<div class="time_bar">');
    let barLength = {
        1: '60%',
        2: '30%',
        3: '20%',
        4: '15%',
        5: '12%',
    }
    detailHtmlArray.push('<span class="downtown" style="width:20%;">');
    detailHtmlArray.push('<span class="pin"></span>' + data.beforePath.time + messages[langStr].min+'</span>');
    $.each(data.subPath, function(index, entry){
        let barWidth = barLength[data.subPath.length];
        let type = trafficTypevalueCheck[entry.trafficType];
        if (entry.type === 7) {
            type = 'downtown'
        }
        detailHtmlArray.push(`<span class=${type} style="width:${barWidth};">`);
        detailHtmlArray.push('<span class="pin"></span>' + entry.sectionTime + messages[langStr].min+'</span>');
    })
    detailHtmlArray.push('<span class="downtown" style="width:20%;">');
    detailHtmlArray.push('<span class="pin"></span>' + data.afterPath.time + messages[langStr].min+'</span>');
    detailHtmlArray.push('</div>');
    return detailHtmlArray.join("");
}

const makeOuterResultDetailTagF = (data, num) => {

    let detailHtmlArray = [];
    let cvtTime;
    let datas = [];

    if (num === 0) datas.push(data.subPath[0])
    else if (num === data.subPath.length -1) datas.push(data.subPath[num])
    else datas = data.subPath;

    $.each(datas, function(index,entry){
        cvtTime = common.timeConvert(entry.sectionTime);
        detailHtmlArray.push(`<li class="${lineClassType[entry.trafficType]}">`);
        detailHtmlArray.push('<div class="time"><span>');
        detailHtmlArray.push(entry.sectionTime);
        detailHtmlArray.push(messages[langStr].min+'</span></div>');
        detailHtmlArray.push('<div class="detail_info"><dl>');
        detailHtmlArray.push('<dt><span class="head"></span>');
        detailHtmlArray.push(entry.startName);
        detailHtmlArray.push('</dt>');
        if(cvtTime[0]>0){
            detailHtmlArray.push('<dd>' + cvtTime[0] + messages[langStr].hour+' ' + cvtTime[1] + messages[langStr].min+'</dd>');
        }else{
            detailHtmlArray.push('<dd>' + cvtTime[1] + messages[langStr].min+'</dd>');
        }
        detailHtmlArray.push('<dd></dd>');
        detailHtmlArray.push('</dl></div></li>');
    })

    detailHtmlArray.push('</dd>');
    detailHtmlArray.push('<dd></dd>');
    detailHtmlArray.push('</dl><div></li>');

    return detailHtmlArray.join("");
}
const noDataResultTag = () => {
    let arr = [];
    arr.push('<li class="line_walk">');
    arr.push('<div class="time"><span>');
    arr.push('</span></div>');
    arr.push('<div class="detail_info"><dl>');
    arr.push('<dt><span class="head"></span>');
    arr.push(startName);
    arr.push('</dt>');
    arr.push('<dd>데이터미제공</dd>');
    arr.push('<dd></dd>');
    arr.push('</dl></div></li>');
    return arr.join("");
}

const noDataDetailTag = (place) => {
    let detailHtmlArray = [];
    detailHtmlArray.push('<li class="line_walk">');
    detailHtmlArray.push('<div class="time"><span>');
    detailHtmlArray.push('</span></div>');
    detailHtmlArray.push('<div class="detail_info"><dl>');
    detailHtmlArray.push('<dt><span class="head"></span>');
    detailHtmlArray.push(place);
    detailHtmlArray.push('</dt>');
    detailHtmlArray.push('<dd>데이터미제공</dd>');
    detailHtmlArray.push('<dd></dd>');
    detailHtmlArray.push('</dl></div></li>');
    return detailHtmlArray.join("");
}

const lastWalkTag = () => {
    let detailHtmlArray = [];
    detailHtmlArray.push('<li class="line_walk">');
    detailHtmlArray.push('<div class="time"><span>');
    detailHtmlArray.push('</span></div>');
    detailHtmlArray.push('<div class="detail_info"><dl>');
    detailHtmlArray.push('<dt><span class="head"></span>');
    detailHtmlArray.push(endName);
    detailHtmlArray.push('</dt>');
    detailHtmlArray.push('<dd></dd>');
    detailHtmlArray.push('<dd></dd>');
    detailHtmlArray.push('</dl><div></li>');
    return detailHtmlArray.join("");
}

function getLowTimeRoute(data) {

    let result = {};

    if (data.outBusRequest.count > 0) {
        $.each(data.outBusRequest.OBJ, function(index, entry) {
            if (!result.obj) {
                result.obj = entry;
            } else {
                if (result.obj.time < entry.time) {
                    result.obj = entry;
                }
            }
        });
    }
    if (data.exBusRequest.count > 0) {
        $.each(data.exBusRequest.OBJ, function(index, entry) {
            if (!result.obj) {
                result.obj = entry;
            } else {
                if (result.obj.time < entry.time) {
                    result.obj = entry;
                }
            }
        });
    }
    if (data.trainRequest.count > 0) {
        $.each(data.trainRequest.OBJ, function(index, entry) {
            if (!result.obj) {
                result.obj = entry;
                result.type = 3;
            } else {
                if (result.obj.time < entry.time) {
                    result.obj = entry;
                    result.type = 3;
                }
            }
        });
    }

    return result;

}

/**
 * 내위치 버튼 누르면 롱탭 함수 실행
 */
const inputActive = () => {
    removeMyLocation();
    let latLng = {'y': myLatLng.lat, 'x': myLatLng.lng };
    onMapLongClick(latLng);
}

/**
 * 1 : 상세보기에서 길찾기 화면 리스트로 돌아감
 * 2 : 리스트에서 첫화면으로 돌아감
 * 3 : 상세보기에서 첫화면으로 돌아감
 * 4 : 상세보기에서 키워드 검색 리스트로 돌아감
 * @param type
 */
const mapCallMove = (type) => {
    if (type === 1) {
        $('.result').show();
        $('#view_map').hide();
        $('#view_header').removeClass().addClass('view_con nav2r');
        $('#map_call').appendTo('#view_map');
        $('#spotBtn').hide();
        $('#option_tabmenu').show();
    } else if (type === 2) {
        $('#view_header').removeClass().addClass('header_con nav2 contents');
        $('#view_map').hide();
        $('.result').hide();
        $('#spotBtn').show();
        $('#location_btn').show();
        $('#map_call').prependTo('#view_header');
    } else if (type === 3) {
        $('#view_header').removeClass().addClass('header_con nav2 contents');
        $('#map_call').prependTo('#view_header');
        $('#location_btn').show();
    } else {
        $('#view_map').show();
        $('.result').show();
        $('#view_header').removeClass('header_con').addClass('view_con nav2');
        $('#map_call').appendTo('#view_map');
        $('#spotBtn').hide();
    }
}

// 지도 상세보기 페이지
const topHideMap = () => {
    common.startSpinner()
    $('.search').hide();
    $('#location_btn').hide();
    $('#top_menu').hide();
    $('#view_map').hide();
    $('.result').hide();
    $('#map_call').prependTo('#view_header');
    $('#view_header').removeClass().addClass('header_con');
    $('.spot_info').show();
    setBtnMapBackVisibility(true);
    $('#spotBtn .btn_spots').hide();
    $('#back_btn').show();
    $('#spotBtn').show();
    $('#map_choice').remove();
    resizeMapContainer('spotRemove');
    onPrev = window['closeMap'];
}

// 탭 보기
const showTransPath = (type) => {
    topHideMap();
    spotHide(type)
    
    // 지도 위 오버레이 요소에 맞춰 지도의 중심 좌표와 확대 수준을 설정한다
    const initialBounds = new naver.maps.LatLngBounds.bounds(pinD.getPosition(), pinA.getPosition())
    const bounds = paths.reduce(
	  (acc, cur) => {
		  const curBounds = cur.getBounds()
		  if (!acc.hasBounds(curBounds)) {
			  acc.union(curBounds)
		  }
		  return acc
	  }, initialBounds,
	)
    map.fitBounds(bounds, { top: 10, right: 10, bottom: 10, left: 10 })
    
    common.endSpinner();
}

const cardClick = (idx) => {
    topHideMap();
    let $el = $(".poi_" + idx);
    $(".result li").removeClass('on');
    $($el).addClass('on');
    $('#view_header > div.spot_info > div > ul.list_place').children().remove().end().append($el.clone().addClass('aTagNone')).show();
    viewHeaderSize();
    common.endSpinner();
}