giphy

var Gallery = (function($, document){

    var offset = 0;
    var limit = 25;
    var ratings = ['Y', 'G', 'PG', 'PG-13', 'R'];

    var $galleyContainer = document.querySelector('#my-gallery');

    function init() {
        displayGallery();
    }

    function loadMore() {
       offset += limit;
       loadGiphies(offset).done(function(data){
        var giphies = data.data;
            return giphies.map(function(giphy){
                renderGallery(giphy);
            });
       });
    }

    function loadGiphies(offset) {
        var ajax = $.ajax({
            url: "https://api.giphy.com/v1/gifs/trending?api_key=e31e45220be04dd583208d4337a8144d&limit="+ limit +"&offset=" + offset,
            method: "GET",
            headers: {"Accept":"application/json"},
            error: function(err) {
                console.log(err);
            }
        });

        return ajax;
    }

    function displayGallery() {
        loadGiphies().done(function(data){
            var giphies = data.data;

            return giphies.map(function(giphy){
                renderGallery(giphy);
            });
        });
    }


    function renderGallery(data) {
        var imgUrl = data.images.original.url;

        var div = createThumbnail();
        div.id = data.id;
        var a = div.querySelector('a');
        a.href = imgUrl;
        var img = new Image();
        img.className = "img-fluid";
        img.src = imgUrl;
        img.onload = function() {
            appendNodeElement(a, img);
            appendNodeElement(div, a);
            appendNodeElement($galleyContainer, div);
        }
    }

    function createThumbnail() {
        var div = createNodeElement('DIV');
        var a = createNodeElement('A');
        div.className = 'col-lg-3 col-md-4 col-xs-6';
        appendNodeElement(div, a);

        return div;
    }

    function showLoader(itemName) {
        var div = createThumbnail();
        var img = createNodeElement('IMG');
        div.className = 'col-lg-3 col-md-4 col-xs-6 ';
        div.id = itemName;
        img.className = 'img-fluid';
        img.src = "images/loader.gif";
        appendNodeElement(div, img);
        appendNodeElement($galleyContainer, div);
    }

    function hideLoader(itemName) {
        $("#" + itemName).hide();
    }

    function createNodeElement(el) {
        return document.createElement(el);
    }

    function appendNodeElement(parent, el) {
        return parent.appendChild(el);
    }

    return {
        init: init,
        loadMore: loadMore
    }
})($,document);

//Main.js
$(document).ready(function () {

    //Initialize gallery
    Gallery.init();

    //Infinite scroll
    $(window).scroll(function () {
      if ($(window).scrollTop() + $(window).height() == $(document).height()) {
        Gallery.loadMore();
      }
    });

    //Gallery popup
    $("#my-gallery").magnificPopup({
      delegate: 'a',
      type: 'image',
      gallery: {
        enabled: true
      }
    })
  });