$(document).ready(function(){
    function setMapApi() {
        var mapDiv = document.getElementById("naverMap");
        var selectLoca = document.getElementById("selectLocation");
        var inputLoca = document.getElementById("inputLocation");
        var findLoca = document.getElementById("findLocation");
        var findLoca02 = document.getElementById("findLocation02");
        var resetLoca = document.getElementById("resetLocation");
        var findList = document.getElementsByClassName('store_list ul li .storeName');
    
    
        //¸ÅÀå Á¤º¸
        var pinInfo = [
           
            {
                name: "´õÅ·½ºÅ͵ðÄ«Æä ¼­¿ï ¸¶ÃµÁ¡",
                address:"¼­¿ï ¼ÛÆı¸ ¸¶Ãµ·Î 251 5Ãþ",
                link: "#link",
                lat:  37.4989755,
                lng: 127.1453488,
                time: "24½Ã°£ ¿µ¾÷ ¡¤ ¿¬Áß¹«ÈÞ",
            },
            {
                name: "´õÅ·½ºÅ͵ðÄ«Æä °æ±â ¹Î¶ôº»Á¡",
                address:"°æ±â ÀÇÁ¤ºÎ½Ã ¿ë¹Î·Î 122 2Ãþ",
                link: "#link",
                lat:  37.7399567,
                lng: 127.0906847,
                time: "24½Ã°£ ¿µ¾÷ ¡¤ ¿¬Áß¹«ÈÞ",
            },
            {
                name: "´õÅ·½ºÅ͵ðÄ«Æä °æ±â Çϳ²¹Ì»çÁ¡",
                address:"°æ±â Çϳ²½Ã ¹Ì»ç°­º¯´ë·Î 222 ¹Ì»ç Áß¾ÓÇÁ¶óÀÚ 4Ãþ 1È£",
                link: "#link",
                lat:  37.5695150,
                lng: 127.1842201,
                time: "24½Ã°£ ¿µ¾÷ ¡¤ ¿¬Áß¹«ÈÞ",
            },    
            {
                name: "´õÅ·½ºÅ͵ðÄ«Æä °æ±â ÇѼ¼´ëÁ¡",
                address:"°æ±â ±ºÆ÷½Ã °í»ê·Î151¹ø±æ 21 ½Å¼¼±âÇÁ¶óÀÚ 3Ãþ 302È£",
                link: "#link",
                lat:  37.3469044,
                lng: 126.9560961,
                time: "24½Ã°£ ¿µ¾÷ ¡¤ ¿¬Áß¹«ÈÞ",
            },
            {
                name: "´õÅ·½ºÅ͵ðÄ«Æä ÀüºÏ ÀüÁÖº»Á¡",
                address:"Àü¶óºÏµµ ÀüÁֽà ´öÁø±¸ °Ç»ê·Î 277 ¼¼±¤ºôµù 3Ãþ",
                link: "#link",
                lat:  35.8359341,
                lng: 127.1671941,
                time: "24½Ã°£ ¿µ¾÷ ¡¤ ¿¬Áß¹«ÈÞ",
            },
            {
                name: "´õÅ·½ºÅ͵ðÄ«Æä ¿ï»ê´ëÁ¡",
                address:"¿ï»ê ³²±¸ ´ëÇзΠ122 4Ãþ",
                link: "#link",
                lat:  35.5455215,
                lng: 129.2613309,
                time: "24½Ã°£ ¿µ¾÷ ¡¤ ¿¬Áß¹«ÈÞ",
            },
            {
                name: "´õÅ·½ºÅ͵ðÄ«Æä ±º»ê¼ö¼Ûº»Á¡",
                address:"Àü¶óºÏµµ ±º»ê½Ã ¼ö¼Û·Î 202 401È£",
                link: "#link",
                lat:  35.9637072,
                lng: 126.7176834,
                time: "24½Ã°£ ¿µ¾÷ ¡¤ ¿¬Áß¹«ÈÞ",
            },
            {
                name: "´õÅ·½ºÅ͵ðÄ«Æä Àϱ¤½Åµµ½ÃÁ¡",
                address:"ºÎ»ê ±âÀ屺 Àϱ¤À¾ Çغû5·Î 25 7Ãþ",
                link: "#link",
                lat:  35.2605010,
                lng: 129.2218535,
                time: "24½Ã°£ ¿µ¾÷ ¡¤ ¿¬Áß¹«ÈÞ",
            },
            {
                name: "´õÅ·½ºÅ͵ðÄ«Æä Ãáõº»Á¡",
                address:"°­¿øµµ Ãáõ½Ã Åð°è³ó°ø·Î 19 5Ãþ",
                link: "#link",
                lat:  37.8514234,
                lng: 127.7448870,
                time: "24½Ã°£ ¿µ¾÷ ¡¤ ¿¬Áß¹«ÈÞ",
            },
            {
                name: "´õÅ·½ºÅ͵ðÄ«Æä ºÎ»êÈ­¸íÁ¡",
                address:"ºÎ»ê ºÏ±¸ È­¸í½Åµµ½Ã·Î 120 3Ãþ 303È£",
                link: "#link",
                lat:  35.2345977,
                lng: 129.0111527,
                time: "24½Ã°£ ¿µ¾÷ ¡¤ ¿¬Áß¹«ÈÞ",
            },
            {
                name: "´õÅ·½ºÅ͵ðÄ«Æä »óÁÖº»Á¡",
                address:"°æ»óºÏµµ »óÁֽà µ¿¼ö4±æ 34 2Ãþ",
                link: "#link",
                lat:  36.4228824,
                lng: 128.1531027,
                time: "24½Ã°£ ¿µ¾÷ ¡¤ ¿¬Áß¹«ÈÞ",
            },
            {
                name: "´õÅ·½ºÅ͵ðÄ«Æä â¿øÁßµ¿Á¡",
                address:"°æ»ó³²µµ â¿ø½Ã ÀÇⱸ ³²»ê·Î 87 2Ãþ",
                link: "#link",
                lat:  35.2555582,
                lng: 128.6181422,
                time: "24½Ã°£ ¿µ¾÷ ¡¤ ¿¬Áß¹«ÈÞ",
            },
            {
                name: "´õÅ·½ºÅ͵ðÄ«Æä ÁøÇØ¿ë¿øÁ¡",
                address:"°æ»ó³²µµ â¿ø½Ã ÁøÇر¸ ¾È°ñ·Î 348",
                link: "#link",
                lat:  35.1020412,
                lng: 128.8102967,
                time: "24½Ã°£ ¿µ¾÷ ¡¤ ¿¬Áß¹«ÈÞ",
            },
            {
                name: "´õÅ·½ºÅ͵ðÄ«Æä ´ë±¸µ¿¼º·ÎÁ¡",
                address:"´ë±¸ Áß±¸ Áß¾Ó´ë·Î 372 2Ãþ",
                link: "#link",
                lat:  35.8663521,
                lng: 128.5936905,
                time: "24½Ã°£ ¿µ¾÷ ¡¤ ¿¬Áß¹«ÈÞ",
            },
            // new
            {
                name: "´õÅ·½ºÅ͵ðÄ«Æä ¼ö¿ø¿µÅëÁ¡",
                address:"°æ±â ¼ö¿ø½Ã ¿µÅ뱸 ¿µÅë·Î525¹ø±æ 19, 3Ãþ",
                link: "#link",
                lat:  37.2656135,
                lng: 127.0763008,
                time: "24½Ã°£ ¿µ¾÷ ¡¤ ¿¬Áß¹«ÈÞ",
            },
            {
                name: "´õÅ·½ºÅ͵ðÄ«Æä ´ëÀü¼ÛÃÌÁ¡",
                address:"´ëÀü ´ë´ö±¸ ¼±ºñ¸¶À»·Î5¹ø±æ 31, 5Ãþ",
                link: "#link",
                lat:  36.3626400,
                lng: 127.4445645,
                time: "24½Ã°£ ¿µ¾÷ ¡¤ ¿¬Áß¹«ÈÞ",
            },
            {
                name: "´õÅ·½ºÅ͵ðÄ«Æä û¶ó¼öÀÚÀÎÁ¡",
                address:"ÀÎõ ¼­±¸ û¶óÇѳ»·Î162¹ø±æ 4-14, 2Ãþ",
                link: "#link",
                lat:  37.5391801,
                lng: 126.6289212,
                time: "24½Ã°£ ¿µ¾÷ ¡¤ ¿¬Áß¹«ÈÞ",
            },
            {
                name: "´õÅ·½ºÅ͵ðÄ«Æä ¿ëÀκ¸¶óÁ¡",
                address:"°æ±â ¿ëÀνà ±âÈﱸ ÇѺ¸¶ó1·Î 56 3Ãþ 303È£",
                link: "#link",
                lat:  37.2506081,
                lng: 127.1078455,
                time: "24½Ã°£ ¿µ¾÷ ¡¤ ¿¬Áß¹«ÈÞ",
            },
            {
                name: "´õÅ·½ºÅ͵ðÄ«Æä õ¾È½Å¹æÁ¡",
                address:"Ãæ³² õ¾È½Ã µ¿³²±¸ ¼­ºÎ´ë·Î 257-3 7Ãþ",
                link: "#link",
                lat:  36.7910986,
                lng: 127.1285676,
                time: "24½Ã°£ ¿µ¾÷ ¡¤ ¿¬Áß¹«ÈÞ",
            }
        ];
    
    
        //ÃÖÃÊ À§Ä¡ ¹× ±âÃʼ³Á¤
        var map = new naver.maps.Map("naverMap", {
            center: new naver.maps.LatLng(37.4989755, 127.1453488),
            zoom: 15,
            zoomControl: true,
            zoomControlOptions: {
                position: naver.maps.Position.RIGHT_CENTER,
            },
        });
    
    
        //º¸¿©ÁÙ ÇÉ ¼±ÅÃ(Ãʱâ»óÅ´ Àüü ¼±ÅÃ)
        var selectedPins = pinInfo;
        function makePins(name, address, tel, time, lat, lng) {
            var contentsHtml =
                "<div class='nm-marker'>" +
                    "<img src='/base/img/work_custom/img/icon/loca.png'/>" +
                    "<div class='marker-detail'>" +
                        "<div class='md-txt'>" +
                            "<h3>" + name + "</h3>" +
                        "<span class='md-address'>" + address + "</span>" +
                        "<span class='md-time'>" + time + "</span>" +
                        "</div>" +
                    "</div>" +
                "</div>";
            var marker = new naver.maps.Marker({
                position: new naver.maps.LatLng(lat, lng),
                map: map,
                title: name,
                icon: {
                    content: contentsHtml,
                },
            });
            return marker;
        }
    
    
        var pins;
        function showPins() {
            for (let i = 0; i < selectedPins.length; i++) {
                new makePins(
                    selectedPins[i].name,
                    selectedPins[i].address,
                    selectedPins[i].tel,
                    selectedPins[i].time,
                    selectedPins[i].lat,
                    selectedPins[i].lng
                );
            }
            pins = document.querySelectorAll(".nm-marker");
            clickablePin();
        }
        showPins();
    
    
        //ÇÉ Å¬¸¯½Ã Á¤º¸ ³ëÃâ    
        var openedMarker, closePin;
        function clickablePin() {
            for (let i = 0; i < pins.length; i++) {
                pins[i].childNodes[0].addEventListener("click", function () {
                    openedMarker = document.querySelector(".markerOpen");
                    if (openedMarker) {
                        openedMarker.classList.remove("markerOpen");
                    }
                    pins[i].classList.add("markerOpen");
                    closePin = pins[i].childNodes[1].childNodes[2];
                });
            }   
        }
    
    
        //Àüü ÇÉ ¸®¼Â
        function resetPins() {
            var alivePins = document.querySelectorAll(".nm-marker");
            for (let i = 0; i < alivePins.length; i++) {
                alivePins[i].parentNode.remove();
            }
        }
    
    
        //Áöµµ À§Ä¡, ÁÜ ¼¼ÆÃ
        function setView(lat, lng, zoom) {
            map.setCenter(new naver.maps.LatLng(lat, lng));
            map.setZoom(zoom);
        }
    
    
        //°Ë»ö±â´É
        var inputVal, nullArray;
        function findPins() {
            nullArray = 0;
            selectedPins = [];
            for (let i = 0; i < pinInfo.length; i++) {
                if (
                    pinInfo[i].name.indexOf(inputVal) != -1 ||
                    pinInfo[i].address.indexOf(inputVal) != -1
                ) {
                    selectedPins.push(pinInfo[i]);
                } else {
                    nullArray++;
                }
            }
            if (nullArray >= pinInfo.length) {
                //ÀÏÄ¡ÇÏ´Â °Ë»ö¾î°¡ ¾øÀ» ½Ã
                showPins();
            } else if (selectedPins.length == 1) {
                //°Ë»ö°á°ú°¡ ÇÑ°³ÀÏ ½Ã ÁÜÀÎ
                setView(selectedPins[0].lat, selectedPins[0].lng, 17);
                showPins();
            } else {
                //°Ë»öµÈ ÇÉÀÌ º¹¼öÀÏ ½Ã Ãâ·Â
                setView(35.70846173527562, 127.394279615093, 7);
                showPins();
            }
        }
    
    
        //ÅؽºÆ®·Î °Ë»ö
        findLoca.addEventListener("submit", function (e) {
            e.preventDefault();
            if (inputLoca.value) {
                selectLoca.value = "all";
                inputVal = inputLoca.value;
                findPins();
            } else {
                inputLoca.focus();
            }
        });
    
    
        //ÅؽºÆ®·Î °Ë»ö02
        findLoca02.addEventListener("submit", function (e) {
            e.preventDefault();
            if (inputLoca.value) {
                $(".nm-marker").removeClass("markerOpen")
                selectLoca.value = "all";
                inputVal = inputLoca.value;
                findPins();
            } else {
                $(".nm-marker").removeClass("markerOpen")
                alert("°Ë»ö¾î¸¦ ÀÔ·ÂÇØÁÖ¼¼¿ä");
                inputLoca.focus();
            }
        });
    
    
        //Áö¿ª¼±ÅÃÀ¸·Î °Ë»ö
        selectLoca.addEventListener("change", function () {
            if (selectLoca.value != "all") {
                $(".nm-marker").removeClass("markerOpen")
                inputLoca.value = "";
                inputVal = selectLoca.value;
                findPins();
                switch (selectLoca.value) {
                    case "¼­¿ï":
                        setView(37.500723330022026, 126.93466391779291, 11);
                        break;
                    case "ºÎ»ê":
                        setView(35.15416443166336, 129.12022799840625, 11);
                        break;
                    case "´ë±¸":
                        setView(35.86101781551269, 128.60755489137176 , 17);
                        break;
                    case "ÀÎõ":
                        setView(37.465179306385654, 126.67064612750795, 12);
                        break;
                    case "±¤ÁÖ":
                        setView(35.86101781551269, 128.60755489137176, 9);
                        break;
                    case "´ëÀü":
                        setView(36.34545040607542, 127.38942719119221, 10);
                        break;
                    case "¿ï»ê":
                        setView(35.5383773, 129.3113596, 11);
                        break;
                    case "¼¼Á¾":
                        setView(35.86101781551269, 128.60755489137176, 11);
                        break;
                    case "°æ±â":
                        setView(37.22867125304893, 126.97032376183225, 11);
                        break;
                     case "°­¿øµµ":
                        setView( 38.12289429294408, 127.29107344161186 , 10);
                        break;
                    case "ÃæûºÏµµ":
                        setView(36.824444938104705, 127.77244541537213, 9);
                        break;
                    case "Ãæû³²µµ":
                        setView(36.59855776656117, 126.94048778613669, 9);
                        break;
                    case "Àü¶óºÏµµ":
                        setView(35.75645240873911, 127.0883125829057 , 9);
                        break;
                    case "Àü¶ó³²µµ":
                        setView(34.95927513279897, 126.98233942435108, 9);
                        break;
                    case "°æ»óºÏµµ":
                        setView(36.6308397, 128.962578, 9);
                        break;
                    case "°æ»ó³²µµ":
                        setView(35.4414209, 128.2417453, 9);
                        break;
                    case "Á¦ÁÖƯº°ÀÚÄ¡µµ":
                        setView(33.37173549821991, 126.53014067680218, 11);
                        break;
                }
            }
           /* console.log(inputVal);*/
        });
    
    
        // focus list
        $(".mapFinder select[name=city]").change(function(){
            var select_city = $('#selectLocation').val();
            var rel_attr = $( '.store_list ul li' ).attr('rel');
            if($( '.store_list ul li' ).hasClass(select_city)){
               $( '.store_list ul li').css('display','none');
               $( '.store_list ul li.'+ select_city ).css('display','block');
            }
        });
    
    
        // focus position
        var position01 = new naver.maps.LatLng(37.4989755, 127.1453488)
        var position02 = new naver.maps.LatLng(37.7399567, 127.0906847)
        var position03 = new naver.maps.LatLng(37.5695150, 127.1842201)
        var position04 = new naver.maps.LatLng(37.3469044, 126.9560961)
        var position05 = new naver.maps.LatLng(35.8359341, 127.1671941)
        var position06 = new naver.maps.LatLng(35.5455215, 129.2613309)
        var position07 = new naver.maps.LatLng(35.9637072, 126.7176834)
        var position08 = new naver.maps.LatLng(35.2605010, 129.2218535)
        var position09 = new naver.maps.LatLng(37.8514234, 127.7448870)
        var position10 = new naver.maps.LatLng(35.2345977, 129.0111527)
        var position11 = new naver.maps.LatLng(36.4228824, 128.1531027)
        var position12 = new naver.maps.LatLng(35.2555582, 128.6181422)
        var position13 = new naver.maps.LatLng(35.1020412, 128.8102967)
        var position14 = new naver.maps.LatLng(35.8663521, 128.5936905)
        var position15 = new naver.maps.LatLng(37.2656135, 127.0763008)
        var position16 = new naver.maps.LatLng(36.3626400, 127.4445645)
        var position17 = new naver.maps.LatLng(37.5391801, 126.6289212)
        // new
        var position18 = new naver.maps.LatLng(37.2506081, 127.1078455)
        var position19 = new naver.maps.LatLng(36.7910986, 127.1285676)
        $(".store_list ul li").on('click',function() {
            $(this).addClass("active")
            $(this).siblings().removeClass("active");
            if($(this).filter("[attr-position]")){
                map.setZoom(15, true);
                if($(this).attr("attr-position") == 'position01'){
                    map.panTo(position01);
                }else if($(this).attr("attr-position") == 'position02'){
                    map.panTo(position02);
                }else if($(this).attr("attr-position") == 'position03'){
                    map.panTo(position03);
                }else if($(this).attr("attr-position") == 'position04'){
                    map.panTo(position04);
                }else if($(this).attr("attr-position") == 'position05'){
                    map.panTo(position05);
                }else if($(this).attr("attr-position") == 'position06'){
                    map.panTo(position06);
                }else if($(this).attr("attr-position") == 'position07'){
                    map.panTo(position07);
                }else if($(this).attr("attr-position") == 'position08'){
                    map.panTo(position08);
                }else if($(this).attr("attr-position") == 'position09'){
                    map.panTo(position09);
                }else if($(this).attr("attr-position") == 'position10'){
                    map.panTo(position10);
                }else if($(this).attr("attr-position") == 'position11'){
                    map.panTo(position11);
                }else if($(this).attr("attr-position") == 'position12'){
                    map.panTo(position12);
                }else if($(this).attr("attr-position") == 'position13'){
                    map.panTo(position13);
                }else if($(this).attr("attr-position") == 'position14'){
                    map.panTo(position14);
                }else if($(this).attr("attr-position") == 'position15'){
                    map.panTo(position15);
                }else if($(this).attr("attr-position") == 'position16'){
                    map.panTo(position16);
                }else if($(this).attr("attr-position") == 'position17'){
                    map.panTo(position17);
                }else if($(this).attr("attr-position") == 'position18'){
                    map.panTo(position18);
                }else if($(this).attr("attr-position") == 'position19'){
                    map.panTo(position19);
                }
            }
        });
    }
    
    
    $( '#inputLocation' ).keyup( function() {
        var input_loca = $('#inputLocation').val();
        var str_name =  $('.store_list ul li .storeName').text();
        var str_addr =  $('.store_list ul li .storeAddr').text();    
        if(str_name.includes(input_loca)){
            $( '.store_list ul li').css('display','block');
            $( '.store_list ul li').css('display','none');
            $( '.store_list ul li .storeName:contains("'+input_loca+'")' ).parents('li').css('display','block');
            $( '.store_list ul li .storeName').not( '.store_list ul li .storeName:contains("'+input_loca+'")' ).parents('li').css('display','none');
        }
        else if(str_addr.includes(input_loca)){     
            $( '.store_list ul li').css('display','block');
            $( '.store_list ul li').css('display','none');
            $( '.store_list ul li .storeAddr:contains("'+input_loca+'")' ).parents('li').css('display','block');
            $( '.store_list ul li .storeAddr').not( '.store_list ul li .storeAddr:contains("'+input_loca+'")' ).parents('li').css('display','none');
        }
    });
    
    
    setMapApi()
    
    
    })