$(function() {

    'https://api.themoviedb.org/3/discover/movie?'
    var baseUrl = "https://api.themoviedb.org/3/discover/movie/";
    //var baseUrl = "https://api.themoviedb.org/3/movie/";
    /*I NEED TO MOVE THE BELOW API KEY INTO THE BACKEND!!!*/
    var apiKey = "?page=1&include_video=false&include_adult=false&sort_by=popularity.desc&language=en-US&api_key=45ddf563ac3fb845f2d5c363190d1a33"; //Include adult = false still shown pornographic material?
    //var rng = (Math.floor(Math.random() * 520271) + 1);
    var APIurl = baseUrl + apiKey; /*+ rng +*/

    console.log("Url it is loading the data from: " + APIurl);// for testing / debugging

    fetch(new Request(APIurl))
      .then(response => {
        if (response.status === 200) return response.json();
        else throw new Error('No film found or no response from the API server!!!');
      })
      .then(feed => {
        let item = '<li class="list-group-item">';
        item += '<img class="center-block img-fluid" alt="Movie Poster Image" src="' + 'http://image.tmdb.org/t/p/w500' + feed.results[0].poster_path + '" alt="">'
        console.log("Full image path: " + 'http://image.tmdb.org/t/p/w500' + feed.results[0].poster_path); // for testing / debugging
        item += '<br>' + '<br>' + '<strong>' +"Title of film / movie: " + '</strong>' + feed.title;
        console.log("Title of film / movie: " + feed.results[0].title); // for testing / debugging
        item += '<br>' + '<br>' + '<strong>' + "Overview / description of film: " + '</strong>' + feed.overview;
        console.log("Overview / description of film: " + feed.overview)


        let genre = feed.genres.length ? feed.genres[0].name : '';

        if (genre) {
        item += '<br>' + '<br>' + '<strong>' + "Genre of film / movie: " + '</strong>' +  feed.genres[0].name;
        console.log("Genre of film / movie: " + feed.genres[0].name);
        } else {
        item += '<br>' + '<br>' +  '<strong>' + "No genre defined: " + '</strong>' + "undefined";
        console.log("No genre defined (undefined)");
        }



        item += '</li>';

        $('#feed').append(item);
      });
  });