//LatLon Distance
function getDistanceFromLatLon(lon1, lat1, lon2, lat2) {
    var R = 6371000; // Radius of the earth in m
    var dLat = deg2rad(lat2-lat1);  // deg2rad below
    var dLon = deg2rad(lon2-lon1); 
    var a = 
      Math.sin(dLat/2) * Math.sin(dLat/2) +
      Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) * 
      Math.sin(dLon/2) * Math.sin(dLon/2)
      ; 
    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
    var d = R * c; // Distance in m
    return d;
  }
  
function deg2rad(deg) {
    return deg * (Math.PI/180)
}

function genderRevealClue(longitude, latitude){

    function beforeDecimal(number){
        return number.toString().split(".")[0].length;
    }

    const conversionUnits = [
        {title: "Football Fields", value: 91.44},
        {title: "Bananas", value: 0.13}, 
        {title: "Washing Machines", value: 1},
        {title: "Mount Everests", value: 8849},
        {title: "Trucks", value: 6.03504},
        {title: "Floridas", value: 721000},
        {title: "Blue Whales", value: 24},
        {title: "Eiffel Towers", value: 330},
        {title: "Statues of Liberty", value: 93},
        {title: "Empire State Buildings", value: 443},
        {title: "City Blocks", value: 274},
        {title: "Convenience Store Fried Chickens", value: 0.08},
        //{title: "Sphinxes", value: 73},
        {title: "Nautical Miles", value: 1852},
        {title: "Mississippi Rivers", value: 3766000}

     ];

    let distance = getDistanceFromLatLon(longitude, latitude, 136.9085235595703, 35.169151306152344);
     
    const randomIdx = Math.floor(Math.random()*conversionUnits.length);
    const unitDistance = distance / conversionUnits[randomIdx].value;
    const significantDecimals = Math.max(0, 3-Math.floor(Math.log10(unitDistance) + 1 ));
    const unitDistanceRound = unitDistance.toFixed(significantDecimals);

    let message = "The distance to the Gender Reveal is bigger than the size of Niko's ego";
    if (distance < 14000000 ){
        message =  `The Gender Reveal is ${unitDistanceRound} ${conversionUnits[randomIdx].title} away`
    }

    toastManager.Toast(message);
    analyticsManager.sendAction(
        "gender_reveal_clue",
        {
            "channelId": theJapanMap.getChannelId(),
            "longitude": longitude,
            "latitude": latitude,
            "distance": distance,
            "unit": conversionUnits[randomIdx].title,
            "unitMeters": conversionUnits[randomIdx].value,
            "unitDistance": unitDistanceRound,
        }
    );
}


stamenMapStyle = {
                 'version': 8,
                 'sources': {
                     'raster-tiles': {
                         'type': 'raster',
                         'tiles': ['https://watercolormaps.collection.cooperhewitt.org/tile/watercolor/{z}/{x}/{y}.jpg'],
                         'tileSize': 256,
                         'attribution':
                         'Map tiles by <a target="_top" rel="noopener" href="http://stamen.com">Stamen Design</a>, under <a target="_top" rel="noopener" href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a target="_top" rel="noopener" href="http://openstreetmap.org">OpenStreetMap</a>, under <a target="_top" rel="noopener" href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>'
                     },
                     //'mapbox-dem': sourceMapboxDem,
                 },
                'layers': [{
                         'id': 'simple-tiles',
                         'type': 'raster',
                         'source': 'raster-tiles',
                         'minzoom': 0,
                         'maxzoom': 22
                     }]
                 }


let toastManager = new ToastClass();
let mainChannelId = "UC3k7YSlLHVvISRtuygXparw";

const markers = [
    {id: "marker-redvalue",
     url: directory_uri.red_value_icon},
    {id: "marker-other",
     url: directory_uri.other_channel_icon},
    {id: "marker-question",
     url: directory_uri.question_icon},
    {id: "marker-foundvideos",
     url: directory_uri.found_videos_icon}
]

const mapBoxLayerLayout = {
    "icon-image":
        [
        "match",
        ["get", "icon"],
        0,
        "marker-redvalue",
        1,
        "marker-other",
        2,
        "marker-question",
        3,
        "marker-foundvideos",
        "marker-other"
        ],
    "text-allow-overlap": true,
    "icon-allow-overlap": true,
    "icon-anchor" : "bottom"
}

const mapBoxStyleRoot = "mapbox://styles/mapbox/";
const mapStyles = {
    "watercolor": {
        style: stamenMapStyle,
        terrainEnabled: false,
        buildingsEnabled: false,
        fogEnabled: false,
    },
    "satellite-v9": {
        style: `${mapBoxStyleRoot}satellite-v9`,
        terrainEnabled: true,
        buildingsEnabled: false,
        fogEnabled: false,
    },
    "light-v10": {
        style: `${mapBoxStyleRoot}light-v10`,
        terrainEnabled: true,
        buildingsEnabled: false,
        fogEnabled: false,
    },
    "dark-v10": {
        style: `${mapBoxStyleRoot}dark-v10`,
        terrainEnabled: true,
        buildingsEnabled: false,
        fogEnabled: false,
    },
    "streets-v11": {
        style: `${mapBoxStyleRoot}streets-v11`,
        terrainEnabled: true,
        buildingsEnabled: true,
        fogEnabled: false,
    },
    "outdoors-v11": {
        style: `${mapBoxStyleRoot}outdoors-v11`,
        terrainEnabled: true,
        buildingsEnabled: false,
        fogEnabled: false,
    }
}

let theJapanMap = new TheJapanMap(
    japanMapParams = {
        apiKey: directory_uri.mapDataApiKey,
        channelId: "latest",
        urlManagement: true,
        mapBoxMarkers: markers,
        mapBoxLayerLayout: mapBoxLayerLayout,
        allowedMapStyles: mapStyles,
        heightSetting: "adaptive",
        mapBoxParams: {
            container: "map",
            mapBoxToken: directory_uri.mapbox_token
        }
    }
);


let analyticsManager = theJapanMap.getAnalyticsManager();


document.addEventListener("DOMContentLoaded", redValueMapDisplay);



var siteOpenMessages = ["Achievement Unlocked: Visited thejapanmap.com!",
                        "Clicking on the location names brings you to their Wikipedia page! (mostly)", "Clicking on the location names brings you to their Wikipedia page! (mostly)",
                        "Subscribe to The Red Value on YouTube!",
                        "Fun Fact: The Kurobe Gorge Power Plant generates Power equal to one Hiroshima Bomb per week!",
                        "Pro Tip: You can right-click anywhere on the map to search for nearby videos", "Pro Tip: You can right-click anywhere on the map to search for nearby videos", "Pro Tip: You can right-click anywhere on the map to search for nearby videos",
                        "Enter a channel name on the top left to see all of that channel's videos",
                        "Did you know? You can hide most of the UI by clicking on the arrow next to 'Find Channel'",
                        "Pro Tip: Food = Good. Particularly in Japan",
                        "Did you know? You can copy and paste the browser url to share a specific place to your friends",
                        "Pro Tip: If you eat some food you will become less hungry",
                        "Did you know? I created an AI to automatically remove all Anime videos from the map",
                        "Pro Tip: Take a look at Mount Fuji in Satellite mode. It's worth it.",
                        "Fun Fact: This box is called a toast. A toast that you can't eat...",
                        "In 'Streets' mode, you can see 3d-buildings if you zoom in close enough."]


function redValueMapDisplay(){
    toastManager.Toast(siteOpenMessages[Math.floor(Math.random()*siteOpenMessages.length)]);


    const channelListUrl = `${directory_uri.mapDataApiUrl}/v1/map/channels?` + new URLSearchParams({
        session_id: analyticsManager.sessionId,
        request_id: analyticsManager.generateRequestId(),
        api_key: directory_uri.mapDataApiKey
    });
    var channelFetch = fetch(channelListUrl, {method: "GET"})
        .then((response) => response.json());

    // open map
    if (theJapanMap.getChannelId() == "latest"){
        theJapanMap.getUrlParameterManager().updateChannelId(theJapanMap.getChannelId());
    }

    var mainChannelCheckbox = document.getElementById("red-value-videos-enabled-checkbox");
    var mainChannelEnabled = mainChannelCheckbox.checked;

    function mainChannelFilter(arrValue, index, arr){
        return mainChannelEnabled || arrValue.channel_id != mainChannelId;
    }

    
    mainChannelCheckbox.addEventListener("change", function(){
        mainChannelEnabled = this.checked;
        theJapanMap.updateDataSource(mainChannelFilter);
        const analyticsAction = "main_channel_" + (mainChannelEnabled ? "on" : "off");
        analyticsManager.sendAction( analyticsAction, {"channelId": theJapanMap.getChannelId()});
    });

    let map = theJapanMap.getMap();
    

    const otherChannelElement = document.getElementById("map-other-channel-selected");
    
    
    Promise.all([theJapanMap.getDataLoadedPromise(), channelFetch]).then(
        (data) => {

            //Show Main Channel Checkbox
            document.getElementById("map-red-value-channel-selected").style.removeProperty("display");
            
            // Show Other Channel Checkbox
            const channelId = theJapanMap.getUrlParameterManager().getChannelId();
            const isLatest = channelId == "latest";
            if (channelId != "null") showOtherChannelElement();

            const otherChannelIcon = document.createElement("IMG");
            otherChannelIcon.src = directory_uri.other_channel_icon;

            const channelNameContainer = document.createElement("DIV");
            channelNameContainer.classList.add("map-channel-name-container");

            const channelLinkElement = document.createElement("A");
            channelLinkElement.classList.add("map-channel-link");
            channelLinkElement.target = isLatest ? "_self" : "_blank";
            channelLinkElement.href = isLatest ? "javascript:;" :
                `https://www.youtube.com/channel/${channelId}`;
            
            const channelIconElement = document.createElement("IMG");
            channelIconElement.style.display = "none";
            channelIconElement.classList.add("map-channel-icon");
            var channelName = "Latest Videos";
            if (!isLatest){
                for (i = 0; i < data[1].length; i++) {
                    if (channelId == data[1][i].channel_id){
                        channelIconElement.src = data[1][i].thumbnails.default.url;
                        channelIconElement.style.display = "block";
                        channelName = data[1][i].name;
                    }       
                }
            }

            const channelNameElement = document.createElement("SPAN");
            channelNameElement.classList.add("map-channel-name");
            channelNameElement.innerHTML = channelName;

            const closeButton = document.createElement("DIV");
            closeButton.classList.add("channel-close");
            closeButton.innerHTML = "&times;";
            closeButton.addEventListener("click", function(e){
                hideOtherChannelElement();
                theJapanMap.loadChannel(null, mainChannelFilter);
            });

            channelLinkElement.appendChild(channelIconElement);
            channelLinkElement.appendChild(channelNameElement);
            channelNameContainer.appendChild(channelLinkElement)
            
            otherChannelElement.appendChild(otherChannelIcon);
            otherChannelElement.appendChild(channelNameContainer);
            otherChannelElement.appendChild(closeButton);

            

        }
    )

      
    function showOtherChannelElement(){
        otherChannelElement.style.opacity=1;
        otherChannelElement.style.visibility="visible";
        otherChannelElement.style.display="flex";
    }

    function hideOtherChannelElement(){
        otherChannelElement.style.opacity = 0;
        otherChannelElement.style.visibility = "hidden";
        otherChannelElement.style.display = "none";
    }


    function findNearbyVideos(longitude, latitude, callback=null, callbackLocationName = ""){
        let requestId = analyticsManager.generateRequestId();
        const channelUrl = `${directory_uri.mapDataApiUrl}/v1/map/videos/nearby?` + new URLSearchParams({
            session_id: analyticsManager.sessionId,
            request_id: requestId,
            api_key: directory_uri.mapDataApiKey,
            longitude: longitude,
            latitude: latitude
        });

        fetch(channelUrl, {method: "GET"})
        .then((response) => response.json())
        .then((data) => {
            theJapanMap.setExtraMapData(data);
            findVideosInfoElement.style.opacity=1;
            findVideosInfoElement.style.visibility="visible";
            findVideosInfoElement.style.display="flex";
            let videoCount = 0;
            for (const [key, value] of Object.entries(data)) {
                videoCount += value.videos.length;
            }
            let videoCountInfoString = (videoCount == 1) ? videoCount + " Video Found" : videoCount + " Videos Found";
            findVideosInfoElement.getElementsByClassName("map-channel-name")[0].innerHTML = videoCountInfoString;
            theJapanMap.updateDataSource();
            typeof callback == "function" && callback(callbackLocationName, longitude, latitude);

        });
        return requestId;
    }

    let rotated = false;

    map.on('rotate', () => {
    	rotated = true;
    });

    map.on('mouseup', () => {setTimeout(() => { rotated = false; }, 10);});
    map.on('touchend', () => {setTimeout(() => { rotated = false; }, 10);});

    var contextPopup = new mapboxgl.Popup({className: "context-popup", anchor:"bottom"});
    var contextPopupHtml = "<ul class='map-context-menu-list'>" + 
        "<li class='map-context-menu-nearby'>Find Nearby Videos</li></ul>"; 

    function openContextMenu(e){
        if (!rotated) {
            contextPopup.remove();
            contextPopup = new mapboxgl.Popup({className: "context-popup", anchor:"bottom"})
            .setLngLat(e.lngLat)
            .setHTML(contextPopupHtml)
            .on('open', function (popup_element) {
                document.querySelectorAll(".map-context-menu-nearby").forEach(function(popupList){
                    popupList.addEventListener("click", function(listElement){
                        if (listElement.target && listElement.target.nodeName=="LI"){
                            //findNearbyVideos
                            let requestId = findNearbyVideos(e.lngLat.lng, e.lngLat.lat);
                            // send analytics to server
                            analyticsManager.sendAction("find_nearby_videos", 
                                {"channelId": theJapanMap.getChannelId(),
                                "longitude": e.lngLat.lng,
                                "latitude": e.lngLat.lat,
                                "request_id": requestId
                            });
                            contextPopup.remove();
                        }
                    });
                });
                document.querySelectorAll(".map-gender-reveal").forEach(function(popupList){
                    popupList.addEventListener("click", function(listElement){
                        if (listElement.target && listElement.target.nodeName=="LI"){
                            //gender Reveal Clue
                            genderRevealClue(e.lngLat.lng, e.lngLat.lat);
                            // send analytics to server                                
                            contextPopup.remove();
                        }
                    });
                });
            }).addTo(map);
        }
    }

    var findVideosButton = document.getElementById("map-find-videos-button");
    findVideosButton.addEventListener("click", function(e){
        openContextMenu({"lngLat": map.getCenter()});
    })

    map.on("contextmenu", (e) => {
    	openContextMenu(e);
    });

    map.on("click", (e)=>{
        contextPopup.remove()
    });


    // swap map style with inputs
    var layerList = document.getElementById("map-style-toggle");
    var inputs = layerList.getElementsByTagName("input");

    function switchLayer(layer) {
        const layerId = layer.target.id;
        if (layerId in mapStyles && mapStyles[layerId] != map.getStyle() ){
            theJapanMap.switchMapStyle(layerId, mapStyles[layerId]);
            analyticsManager.sendAction("style_select", {"channelId": theJapanMap.getChannelId(), "mapStyle": mapStyles[layerId].style});
        }
        
    }

    for (var i = 0; i < inputs.length; i++) {
        inputs[i].onchange  = switchLayer;
    }


    function autocompleteChannels(inp) {
        /*the autocomplete function takes two arguments,
        the text field element and an array of possible autocompleted values:*/
        var currentFocus;
        var typingTimer;
        const typingInterval = 800;
        var loadingRing = document.getElementById("map-search-loading-ring");
        /*execute a function when someone writes in the text field:*/
        inp.addEventListener("input", function(e) {
            loadingRing.style.display = "flex";
            clearTimeout(typingTimer);

            typingTimer = setTimeout(function(e){
                
                var a, b, i, val = inp.value;
                var cnt = 0;
                var sortArr = [];
                /*close any already open lists of autocompleted values*/
                closeAllLists();
                if (!val) {
                    loadingRing.style.display = "none";
                    return false;
                }
                //send analytics action
                const request_id = analyticsManager.generateRequestId();
                analyticsManager.sendAction("search_input", 
                    {"channelId": theJapanMap.getChannelId(),
                    "search_input": val,
                    "request_id": request_id});
                
                currentFocus = -1;
                /*create a DIV element that will contain the items (values):*/
                a = document.createElement("DIV");
                a.setAttribute("id", inp.id + "autocomplete-list");
                a.setAttribute("class", "autocomplete-items");
                /*append the DIV element as a child of the autocomplete container:*/
                inp.parentNode.appendChild(a);
                
                
                /* Create a new promise and send geocoding request */
                var promise = new Promise((resolve, reject) => {
                    currentPromiseReject = reject;
    
                    var url = `${directory_uri.mapDataApiUrl}/v1/map/places/find?` + new URLSearchParams({
                        session_id: analyticsManager.sessionId,
                        request_id: request_id,
                        search_input: val,
                        api_key: directory_uri.mapDataApiKey
                    });

                    if (val.length > 2){
                        fetch(url ,{method: "GET"})
                        .then(response => {
                        // check if the call was successful
                        if (response.ok) {
                            response.json().then(data => resolve(data));
                            
                        } else {
                            response.json().then(data => reject(data));
                        }
                        });
                    }else{
                        reject("Not enough characters");
                        //resolve({features: []});
                    }
                    
                });
    
                
                Promise.allSettled([promise, channelFetch]).then((data) => {
                    const iconArray = {
                        street : "road",
                        city : "building-o",
                        building: "building-o",
                        postcode : "building-o",
                        county: "flag",
                        state: "flag",
                        country: "flag"
                    }
                    
                    const searchResults = data[0].status=="fulfilled" ? data[0].value.features.slice(0,5) : [];
                    /* For each item in the results */
                    searchResults.forEach((feature, index) => {
                        {}
                        /* Create a DIV element for each element: */
                        var itemElement = document.createElement("DIV");
                        itemElement.style.display = "flex";
                        itemElement.style.alignItems = "center";
                        itemElement.classList.add("autocomplete-item");
                        const iconType = feature.properties.result_type in iconArray ? iconArray[feature.properties.result_type] : "map-marker";
                        const itemName = "name" in feature.properties ? feature.properties.name : feature.properties.address_line1.split(",")[0];
                        /* Set formatted address as item value */
                        const iconHtml = "<div style='width: 2rem; margin-right: .5rem; font-size: 1.8rem; flex-shrink: 0; display: flex; justify-content: center;'>" + 
                            "<i class='Defaults-" + iconType + "'></i></div>";
                        itemElement.innerHTML = iconHtml + "<div style='display:flex; flex-direction: column'><span style='line-height: 1.2rem'>" + itemName + 
                            "</span><span style='font-size: 0.6rem; line-height: 0.6rem'>" + 
                            feature.properties.formatted + "</span></div>";
    
                        /* Set the value for the autocomplete text field and notify: */
                        itemElement.addEventListener("click", function(e) {
                            inp.value = "";
                            closeAllLists();
                            findLocationVideos(feature);
                            
                            let analyticsParams = {
                                "locationName" : feature.properties.name,
                                "channelId" : theJapanMap.getChannelId(),
                                "search_input" : val,
                                "formatted_address" : feature.properties.formatted
                            }
                            analyticsManager.sendAction("search_location_click", analyticsParams);
                        });
    
                        a.appendChild(itemElement);
                    });

                    const channelList= data[1].status=="fulfilled" ? data[1].value : [];;
                    /*for each item in the array...*/
                    for (i = 0; i < channelList.length; i++) {
                        /*check if the item has the text field value as a substring and return start index:*/
                        var subStringIndex = channelList[i].name.toUpperCase().indexOf(val.toUpperCase());
                        var aliasIndex = channelList[i].aliases.toUpperCase().indexOf(val.toUpperCase());
                        if (subStringIndex > -1 || aliasIndex > -1) {
                            sortArr.push({"element": channelList[i],
                                        "startIndex": (subStringIndex != -1) ? subStringIndex : 1000,
                                        "aliasIndex": (aliasIndex != -1) ? aliasIndex : 1000});
                        }
                    }

                    sortArr.sort((c, d) => (c.startIndex > d.startIndex) ? 1 : ((c.aliasIndex > d.aliasIndex) ? 0 : -1));
                    addYouTubeChannels(sortArr, Math.max(0,8-searchResults.length));
                    loadingRing.style.display = "none";
                    addExtras();
    
                }, (err) => {
                    if (!err.canceled) {
                        addYouTubeChannels(8);
                        addExtras();
                    }
                });
    
                function addYouTubeChannels(sortArr, amount = 8){
                    for (i=0; i<sortArr.length && i<amount; i++){
                        /*create a DIV element for each matching element:*/
                        b = document.createElement("DIV");
                        b.style.display = "flex";
                        b.style.alignItems = "center";
                        b.classList.add("autocomplete-item");
        
                        /*make the matching letters bold:*/
                        thumbnails = sortArr[i].element.thumbnails;
                        b.innerHTML = "";
                        if (thumbnails != null){
                            b.innerHTML += "<img src='" + thumbnails.default.url + "' style='height: 2rem; margin-right: 0.5rem'>";
                        }
                        if (sortArr[i].startIndex != -1){
                            b.innerHTML += "<span>" + sortArr[i].element.name.substr(0, sortArr[i].startIndex) +
                                "<strong>" + sortArr[i].element.name.substr(sortArr[i].startIndex, val.length) + "</strong>" +
                                sortArr[i].element.name.substr(sortArr[i].startIndex + val.length) + "</span>";
                        }else{
                            b.innerHTML += sortArr[i].element.name;
                        }
                        b.innerHTML += "<input type='hidden' value='" + JSON.stringify(sortArr[i].element).split("'").join("&apos;") + "'>";
        
                        /*execute a function when someone clicks on the item value (DIV element):*/
                        b.addEventListener("click", function(e){
                            bindListClickEvent(JSON.parse(this.getElementsByTagName("input")[0].value), true);
                        });
                        a.appendChild(b);
                    }
                }
    
                function addExtras(){
                    const findNearbyVideosDiv = document.createElement("DIV");
                    findNearbyVideosDiv.classList.add("autocomplete-item");
                    findNearbyVideosDiv.innerHTML = "<img src='" + directory_uri.found_videos_icon +
                                                       "' style='height: 2rem; margin-right: 0.5rem'><span>Find Nearby Videos</span>";
                    findNearbyVideosDiv.addEventListener("click", function(e) {
                        inp.value = "";
                        toastManager.Toast("You can also right-click anywhere on the map to search for nearby videos!");
                        openContextMenu({"lngLat": map.getCenter()});
                        closeAllLists();
                    });
                    findNearbyVideosDiv.style.display = "flex";
                    findNearbyVideosDiv.style.alignItems = "center";
                   
                    a.appendChild(findNearbyVideosDiv);
                    const showLatestVideoDiv = document.createElement("DIV");
                    showLatestVideoDiv.style.display = "flex";
                    showLatestVideoDiv.style.alignItems = "center";
                    showLatestVideoDiv.classList.add("autocomplete-item");
                    showLatestVideoDiv.innerHTML = "<div style='background-color: #b33d3d; border-radius: 0.25rem; height: 2rem; width: 2rem; margin-right: 0.5rem;" + 
                                                      " display: flex; align-items: center; justify-content: center; border-radius: 0.5rem'>" +
                                                      "<span style='font-size: .5rem; text-align: center; color: white; font-weight: bold'>NEW</span></div>" + 
                                                      "<span>Show Latest Videos</span>";
                    showLatestVideoDiv.addEventListener("click", function(e){
                        bindListClickEvent({"name": "Latest Videos", "channel_id" : "latest", "channelLink":"javascript:;"});
                    });
                    a.appendChild(showLatestVideoDiv);
                }
                function bindListClickEvent(channelJson) {
                    
                    inp.value = "";
                    closeAllLists();
                    showOtherChannelElement();
                    
                    
                    otherChannelElement.getElementsByClassName("map-channel-name")[0].innerHTML = channelJson.name;
                    theJapanMap.loadChannel(channelJson.channel_id, mainChannelFilter);
                    otherChannelElementIcon = otherChannelElement.getElementsByClassName("map-channel-icon")[0];
                    if ("thumbnails" in channelJson){
                        otherChannelElementIcon.src = channelJson.thumbnails.default.url;
                        otherChannelElementIcon.style.display = "block";
                    }else{
                        otherChannelElementIcon.style.display = "none";
                    }
                    otherChannelElementLink = otherChannelElement.getElementsByClassName("map-channel-link")[0];
                    if("channelLink" in channelJson){
                        otherChannelElementLink.href = channelJson.channelLink;
                        otherChannelElementLink.target = "_self";
                    }else{
                        otherChannelElementLink.href =
                            "https://www.youtube.com/channel/" + channelJson.channel_id;
                        otherChannelElementLink.target = "_blank";
                    }
                }
            }, typingInterval);
            
            
        });
        /*execute a function presses a key on the keyboard:*/
        inp.addEventListener("keydown", function(e) {
            var x = document.getElementById(this.id + "autocomplete-list");
            if (x) x = x.getElementsByTagName("div");
            if (e.keyCode == 40) {
                /*If the arrow DOWN key is pressed,
                increase the currentFocus variable:*/
                currentFocus++;
                /*and and make the current item more visible:*/
                addActive(x);
            } else if (e.keyCode == 38) { //up
                /*If the arrow UP key is pressed,
                decrease the currentFocus variable:*/
                currentFocus--;
                /*and and make the current item more visible:*/
                addActive(x);
            } else if (e.keyCode == 13) {
                /*If the ENTER key is pressed, prevent the form from being submitted,*/
                e.preventDefault();
                if (currentFocus > -1) {
                    /*and simulate a click on the "active" item:*/
                    if (x) x[currentFocus].click();
                }
            }
        });
        function addActive(x) {
            /*a function to classify an item as "active":*/
            if (!x) return false;
            /*start by removing the "active" class on all items:*/
            removeActive(x);
            if (currentFocus >= x.length) currentFocus = 0;
            if (currentFocus < 0) currentFocus = (x.length - 1);
            /*add class "autocomplete-active":*/
            x[currentFocus].classList.add("autocomplete-active");
        }
        function removeActive(x) {
            /*a function to remove the "active" class from all autocomplete items:*/
            for (var i = 0; i < x.length; i++) {
                x[i].classList.remove("autocomplete-active");
            }
        }
        function closeAllLists(elmnt) {
            /*close all autocomplete lists in the document,
            except the one passed as an argument:*/
            var x = document.getElementsByClassName("autocomplete-items");
            for (var i = 0; i < x.length; i++) {
                if (elmnt != x[i] && elmnt != inp) {
                    x[i].parentNode.removeChild(x[i]);
            }
          }
        }

        //test comment with commit
        /*execute a function when someone clicks in the document:*/
        document.addEventListener("click", function (e) {
            closeAllLists(e.target);
        });
    }

    function findLocationVideos(geoapifyLocation){
        var locationName = geoapifyLocation.properties.address_line1;

        analyticsManager.sendAction("find_location_videos", {"channelId": theJapanMap.getChannelId(),
            "longitude": geoapifyLocation.properties.lon,
            "latitude": geoapifyLocation.properties.lat});
        findNearbyVideos(geoapifyLocation.properties.lon, geoapifyLocation.properties.lat, createClosestLocationPopup, locationName);
        map.flyTo({
            center: [geoapifyLocation.properties.lon, geoapifyLocation.properties.lat],
            zoom: 8.5
        });
    }

    function createClosestLocationPopup(selectedLocationName, longitude, latitude){
        var nameMatched = false;
        var closestEntry = null;
        var longestDistance = 0;
        for (const [key, value] of Object.entries(theJapanMap.getExtraMapData())) {
            value.distance = getDistanceFromLatLon(value.longitude, value.latitude, longitude, latitude);
            if (closestEntry === null ||
                (selectedLocationName == value.location && !nameMatched) ||
                (closestEntry.distance > value.distance && (!nameMatched || (nameMatched && selectedLocationName==value.location)))){
                    closestEntry = value;
                    nameMatched = selectedLocationName == value.location ? true : false || nameMatched;
            }
            if (longestDistance < value.distance){
                longestDistance = value.distance;
            }
        }
        if (closestEntry !== null){
            theJapanMap.makeLocationPopup(
                [closestEntry.longitude, closestEntry.latitude],
                closestEntry.location, closestEntry.videos,
                "url" in closestEntry ? closestEntry.url : null);
        }
        const zoomLevel = Math.max(8.5, Math.min(13, 13-4.5*longestDistance/70000));
        theJapanMap.getMap().flyTo({
            center: [longitude, latitude],
            zoom: zoomLevel
        })
    }

    var findVideosInfoElement = document.getElementById("map-find-videos-info");
    var findVideosInfoCloseButton = findVideosInfoElement.getElementsByClassName("channel-close")[0];
    findVideosInfoCloseButton.addEventListener("click", function(e){
        findVideosInfoElement.style.opacity = 0;
        findVideosInfoElement.style.visibility = "hidden";
        findVideosInfoElement.style.display = "none";
        theJapanMap.extraMapData = {};
        theJapanMap.updateDataSource();
    });

    autocompleteChannels(document.getElementById("map_channel_search"));
    
    var hideUiButtonElement = document.getElementById('map-hide-ui-button');
    hideUiButtonElement.addEventListener("click", function(e){
        hideUiButtonElement.classList.toggle("ui-hidden-active");
         document.querySelectorAll(".map-ui-moveable").forEach(function(uiElement){
                    uiElement.classList.toggle("map-ui-hidden");
            if (uiElement.classList.contains("map-ui-display-hidden")) {
                function removeDisplayHiddenClass(callback){
                    uiElement.classList.remove("map-ui-display-hidden");
                    callback();
                }
                function removeHiddenClass(){
                    uiElement.classList.remove("map-ui-hidden");
                }
                removeDisplayHiddenClass(removeHiddenClass);
            } else {
                uiElement.classList.add("map-ui-hidden");
                uiElement.addEventListener('transitionend', function(e) {
                    uiElement.classList.add('map-ui-display-hidden');
                }, {
                    capture: false,
                    once: true,
                    passive: false
                });
            }
        });
    });

};