// Searches Flickr API for images based on latitude and longitude from Google Search, sends pictues to createPicture function
function photoSearch(latLon) {

    // gets radius, units and tags
    var radius = getRadius();
    var units = getUnits();
    var tags = chooseTags();

    //Creates error function w/message to be returned if no pictures found
    var errorPics = errorMessage('No pictures were found for this location, radius, and tags, please try your search again.');

    // Adds in tags. Tags are essential in the search process,as well as radius units. These aspects will be changed later to get respnoses from the user
    var resp = $.get("https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=" + FLICKR_API_KEY + "&lat=" + latLon["lat"] + "&lon=" + latLon["lng"]+ "&tags=" + tags + "&tag_mode=any&radius=" + radius + "&radius_units=" + units + "&format=json&nojsoncallback=1");
   
    resp
        .catch(errorPics)
        .then(checkForPics)
};

//Carousel control; rotates through jumbotron images
function carouselControl() {
    $(document).ready(function(){
        $('.carousel').slick({
        autoplay: true,
        mobileFirst: true,
        autoplaySpeed: 5000,
        arrows: false,
        pauseOnFocus: false,
        pauseOnHover: false,
        swipeToSlide: true,
        }); 
    });
};

// ******************************
// *******REACTIVE MENUS*********
// ******************************
function clickShowMap() {
    $SHOW_MAP.click(function () {
        $('[data-images-role="hide-map"]').show();
        printIt($(this));
        $(this).hide();
        $(".click-to-close").hide();
        $(".click-to-open").show();
        $(".map-banner-container").slideDown(1000);
    });
};

function clickHideMap() {
    $HIDE_MAP.click(function () {
        $('[data-images-role="show-map"]').show();
        $(this).hide();
        $(".click-to-close").show();
        $(".click-to-open").hide();
        $(".map-banner-container").slideUp(1000);
    });
};

// when hamburger menu icon is clicked, the hamburger icon hids, the exit icon shows and the menu-container shows slowly
function clickMenuShow() {
    $HAMBURGER.click(function () {
        $EXIT_ICON.show();
        $(this).hide();
        $(".myAtlas-logo").hide("slow");
        $MENU_CONTAINER.show("slow");
    });
};
// when exit icon is clicked, the exit icon hids, the hamburger menu shows, and the menu-container hids slowly
function clickExitButton() {
    $EXIT_ICON.click(function () {
        $HAMBURGER.show();
        $(this).hide();
        $(".myAtlas-logo").show("slow");
        $MENU_CONTAINER.hide("slow");
    });
};

google.maps.event.addListener(infoWindow, 'domready', function() {
    if (document.querySelector('[data-role="save"]')) {
        document.querySelector('[data-role="save"]').addEventListener("click", function handler(e) {
            e.preventDefault();
            this.textContent = '\u2713Saved to myPlaces';
            this.setAttribute('data-role', 'saved');
            this.setAttribute('class', 'saved');
            addPlace(formatted_address, picInfo, latLon);
            e.currentTarget.removeEventListener('click', handler);
        });
    }
});

// Takes myPlaces from local storage and prints information to screen
function displayMyPlaces(myPlaces) {
    var $myPlacesContainer = $('<div></div>', {
        'class': 'places-container',
        'data-role': 'places-container'
    });
    
    for (var key in myPlaces) {
        var id = stringMaker(key);
        var $place = $('<div></div>', {
        'class': 'place',
        'data-role': 'place',
        'name': key,
        'id': id
        });
        appendImages(myPlaces[key]["images"], $place);
        var $address = $('<span></span>', {
            'text': key
        });
        $place.append($address);
        var URI = encodeURI(key);
        var link = "https://maps.google.com?q=" + URI;
        var $directions = $('<a></a>', {
            'target': "_blank", 
            'rel': "noopener noreferrer",
            'href': link,
            'text': 'Directions'
        });

        $place.append($directions);
        var $delete = $('<a></a>', {
            'href': "#",
            'text': "Delete",
            'class': 'delete',
            'data-role': 'delete'
        });
        $place.append($delete);
        $myPlacesContainer.append($place);
    }
    $myPlacesDisplay.append($myPlacesContainer);
};