var files = 
{"2":"052F78B8-48F4-4AF6-A331-73E5640343F4.jpeg","3":"0538714E-5780-4859-9E66-A7FF7FCBEAB7.jpeg","4":"05D597DB-8D5F-47C3-963B-B22BB1D72C4D.jpeg","5":"08EBEC13-BC99-40ED-88C1-7736944218AD.jpeg","6":"0A9B12FA-6618-41D9-A878-B95DD8606939.jpeg","7":"0F3A6CB9-F7E8-4AB8-80CB-4B1943744A9A.jpeg","8":"0F84FD27-6A98-4D09-A25C-901F0799CDA2.jpeg","9":"1356DDDA-11F7-4DAB-BBAB-29169822DA23.jpeg","10":"16D3F81C-BD29-43E8-A6A1-4C651261EDD8.jpeg","11":"177B2C88-1933-48A4-9D29-B48FED0866BE.jpeg","12":"1B216452-501B-4749-8498-383BA3FD13B5.jpeg","13":"1C472A44-9A30-480C-BE25-5B39AD22EF0B.jpeg","14":"20A3C094-0BCD-4BDD-89E6-325CF962479C.jpeg","15":"25E1B00A-FCF7-4F35-ADFC-8B6DA09F0087.jpeg","16":"2660F464-7A99-4659-A671-3BAB9E037525.jpeg","17":"27EA386C-2CCA-40F5-A9EF-7D5E429F966E.jpeg","18":"2801A076-C5C4-44B2-8A35-8616D0239554.jpeg","19":"282B8A6B-677C-4222-872C-C50820736BBD.jpeg","20":"28CC64A4-5DD3-4E49-9197-A44DD68C8045.jpeg","21":"28CE6C00-301D-4687-B1C9-60B437902281.jpeg","22":"2F77B7C2-9193-4D44-94C3-779BBC717E27.jpeg","23":"2FBE8DB4-5A9B-4784-BA07-2F9015ED1961.jpeg","24":"2FFF8644-F47A-4415-BAF1-65950B50ED47.jpeg","25":"365D9711-D4DE-424B-AA68-C54AFC4820E1.jpeg","26":"38100269-D342-4829-B421-0A2009E2B239.jpeg","27":"3834BAD7-3C4E-46BA-8FEB-EC2F415E2BB8.jpeg","28":"3B16DF84-6334-45D4-B961-3AC17D54F373.jpeg","29":"3B5D3A21-3E10-4687-9419-62AADAB524E9.jpeg","30":"3B87C5C1-E3F5-4ED2-9058-723F487BF636.jpeg","31":"3BD28A0D-5A07-402D-985E-3DCE9B45333A.jpeg","32":"3D997E88-9D34-4B79-90F9-CF6C2354225E.jpeg","33":"40A98A9D-6C31-4E03-AFD2-2D648B2B6DBD.jpeg","34":"40E7790C-73F2-4F74-8590-69A15FF28081.jpeg","35":"4387B827-7ABF-4CD5-B470-B5D7AD630EE7.jpeg","36":"453CABB5-7591-4126-9879-2C9E0CF2E2FE.jpeg","37":"475F7182-6C55-4F66-9132-43648809A1BB.jpeg","38":"4DAF56C6-B240-46D1-A0D5-414E8EF68098.jpeg","39":"506A8E8B-0A83-46AA-81EA-DCE29F843D8F.jpeg","40":"577952E4-63A2-454C-9FE9-97AF484752BD.jpeg","41":"59474A18-2F87-43B5-89BA-54E57329B882.jpeg","42":"59E89EB6-95B7-4C97-9BB4-E83AD0EC4A40.jpeg","43":"5C905920-F7A5-4E25-B5F7-09FF744B36FA.jpeg","44":"5F19B2F4-6808-4DD1-95D5-946BC12C1F33.jpeg","45":"62E4D6A3-444E-4C96-A4F9-CF0EDC6F4079.jpeg","46":"647625EB-2F49-4ED3-B2ED-443802D91681.jpeg","47":"66D7F2B0-867A-4EE1-9F2E-15372D1A1AB2.jpeg","48":"679752B9-01CB-4C7C-8FA1-C1B495D6CEF2.jpeg","49":"68575DE4-D73D-444D-A388-6016F3289B0B.jpeg","50":"6C47443C-1984-4085-8935-52329AA03375.jpeg","51":"6CF0E5EC-ED73-4DD2-9F08-C5122D772022.jpeg","52":"6F2FB0F0-3702-4053-B0AA-73D61F423192.jpeg","53":"70C17F61-E4E7-40EF-AC90-8245598A5FDB.jpeg","54":"7131E082-9BD5-4D7E-9332-EC23FEA782F8.jpeg","55":"722C467F-C924-4854-9381-0AABB6A0B4B8.jpeg","56":"7269FDDC-A588-4276-9D5F-5F6A57D59F76.jpeg","57":"72DF56EE-427D-4C2B-9613-2E79747C7012.jpeg","58":"754737EA-5CDF-4E3E-A052-25E82168B24F.jpeg","59":"75915291-A6EC-4E95-9004-5ADC9B5BCF07.jpeg","60":"75C030AC-AE80-4F5C-A2FC-671B3D52F955.jpeg","61":"7821FB91-9713-4032-87ED-BEAB79CF316B.jpeg","62":"7A513CFF-6CE8-4F86-811F-E320CE22D87A.jpeg","63":"82772658-C7F3-4517-A77F-30E843D0CEB6.jpeg","64":"86ACB62E-0727-450D-A9DA-C94E66F9DD39.jpeg","65":"889A229F-4F32-4DEA-B402-1888DA95D376.jpeg","66":"89651747-11BE-44AD-8558-0D721035CA6F.jpeg","67":"8BA32C93-3280-4BFD-9F89-E9E7F607909B.jpeg","68":"8BB3007C-276C-4CAA-ADE0-CCD6AC0DF5E7.jpeg","69":"8C552938-F614-4FFA-8FA1-9C9121CC9931.jpeg","70":"8FD9FA3E-E2F2-469E-8432-4B14DBE7A897.jpeg","71":"92ECD8AE-76FA-418C-B745-8E1E38013E43.jpeg","72":"93B37331-2551-4E7D-9021-249DEA1107C6.jpeg","73":"95A5D845-3473-4B56-B861-99C6DA42AA07.jpeg","74":"961EFBA7-8D2F-47FD-A427-D4F8096CDB1A.jpeg","75":"9AF7CBBF-78EF-49BE-B405-382576D008A0.jpeg","76":"9B1AA10F-810F-48AE-B2D1-233E33B5FAB1.jpeg","77":"9B8D3469-F75E-4ADD-9BF7-BC341240ECF5.jpeg","78":"9BB33D5E-8E81-481A-B3FC-0BF37781F4E2.jpeg","79":"9C985017-9851-4F34-9688-1F5F03EB179A.jpeg","80":"9DC0D9F7-EB8C-42A5-BC23-7B1FE652F845.jpeg","81":"9DCE4F78-2A85-430A-805B-46E271D6345E.jpeg","82":"9F2DB89C-9BD1-496C-B634-4C0DB84BB033.jpeg","83":"A0D31964-A337-4A20-BDF8-64CA003AADC3.jpeg","84":"A1B333D9-53ED-488F-A4B4-65DC689BDEAE.jpeg","85":"A3B794BE-BA8E-41B6-8913-74EF691156E7.jpeg","86":"A63A2736-DCE8-440F-89D4-5E667D51898A.jpeg","87":"A6B75543-D2AE-4EBA-8302-38CF15718BB8.jpeg","88":"A7977F11-9C4D-4B77-BAD8-3AA8BF27529A.jpeg","89":"AAF9B40C-D6EE-4988-BA18-A59CA1E269F3.jpeg","90":"ABFD43A6-C6E6-4BDB-B9DE-DF9BF7F29BDC.jpeg","91":"AC24231E-DC5E-4AD7-BE95-9D9B44935F28.jpeg","92":"AD307998-9FF4-44AC-A596-69F1834334A3.jpeg","93":"BC94BC99-F9EE-4E2A-B186-73414D0F485E.jpeg","94":"BC9BFB49-6332-45A7-AFAE-923ABA506B94.jpeg","95":"C15E36CC-61D2-469D-9AD6-8608CFBE66FA.jpeg","96":"C1BB9050-9512-4534-9F8E-768B0BC490A1.jpeg","97":"C2BEE877-1C8E-4F1C-869C-31FC71E6006B.jpeg","98":"C48F90C6-4234-49C2-AB49-0ACBCC090CC9.jpeg","99":"C7C4CE52-BAFE-4864-9462-D5A619D56CCF.jpeg","100":"CB36270E-3AEC-4E79-8A00-0643A2E61DBC.jpeg","101":"CB7A83C9-5D5A-495F-A1A6-C9016FC363FF.jpeg","102":"CBE27BD7-2093-4903-B20E-BADA2D99FA86.jpeg","103":"CBEE7AED-4FB5-4B20-9FFA-AF55998508D6.jpeg","104":"CC6C3FCB-89D8-48EC-9358-1896D599BAD0.jpeg","105":"CE69B810-C2D2-4B88-848A-A22A9E3468D2.jpeg","106":"D1C3CE85-28C5-4B61-B610-CF82BA436305.jpeg","107":"D27FE5B7-2055-44CC-94E0-25A092688DA2.jpeg","108":"D4D9A01F-A8F8-487E-BBA8-034B5786D756.jpeg","109":"D5174563-7517-434C-9FCF-DE7FF9BFEB19.jpeg","110":"D5330355-2304-40F5-B9E2-F6D3C226028F.jpeg","111":"D64FD333-F6AB-44DD-8D38-6EA1DFB1C87A.jpeg","112":"D6F331E9-B40C-47C6-B4A5-F66B9D0C0167.jpeg","113":"D7A74E97-49CA-4035-89EB-029C816252DE.jpeg","114":"D9028B9E-2B8C-4C48-BEA5-FA752AE684F0.jpeg","115":"DB54BF3D-6FD1-4D34-B7A1-87553F63A7E6.jpeg","116":"DED54781-CA7E-40C6-8DE8-1AD275976A3A.jpeg","117":"DFC79E4A-5FB7-435D-B4E5-811CF069214A.jpeg","118":"E0811FF7-458D-4035-BF59-6A415721C704.jpeg","119":"E10A8879-DE78-4D82-B5B7-045CAD970028.jpeg","120":"E1EB2E0D-D0EE-470F-AEBF-1412C33F5E16.jpeg","121":"E334EB6E-3964-459C-9C4B-6BEEB7D84DE5.jpeg","122":"E5A81DAD-20F3-43C8-B3DF-A3D8C6D641F5.jpeg","123":"E5BD561B-AD70-4A64-BF96-FA5863871708.jpeg","124":"E6228C05-17F4-430D-8266-644A5424E3CA.jpeg","125":"E80F9C49-1B06-4410-81B8-BDCDA22EA90F.jpeg","126":"EDDA78D6-BD71-446E-93E3-CA4E8CD2B4B6.jpeg","127":"F023E0A6-9DD6-4F82-B739-1A0178038CFC.jpeg","128":"F25B809E-DBAB-4927-A44B-0E0C2AAEBEA3.jpeg","129":"F44CF995-A3D0-48C9-AA57-4A41FA97E215.jpeg","130":"F8F53495-A769-4EA2-9BC1-B938B0CBA00C.jpeg","131":"F9CB42EA-07F2-4BEA-A884-4172077BA999.jpeg","132":"FF0E1857-FEF1-4714-A4CA-82423A0DD06B.jpeg"};

var previous = document.getElementById('btnPrevious')
    var next = document.getElementById('btnNext')
    var gallery = document.getElementById('image-gallery')
    var pageIndicator = document.getElementById('page')
    var galleryDots = document.getElementById('gallery-dots');

    
    var images= [];


    for (var i = 0; i < 131; i++) {
      images.push({
        title: "Image " + (i + 1),
        source: "/assets/img/tenis/" + files[i]
      });
    }

    var perPage = 12;
    var page = 1;
    var pages = Math.ceil(images.length / perPage)


    // Gallery dots
    for (var i = 0; i < pages; i++) {
      var dot = document.createElement('button')
      var dotSpan = document.createElement('span')
      var dotNumber = document.createTextNode(i + 1)
      dot.classList.add('gallery-dot');
      dot.setAttribute('data-index', i);
      dotSpan.classList.add('sr-only');

      dotSpan.appendChild(dotNumber);
      dot.appendChild(dotSpan)

      dot.addEventListener('click', function(e) {
        var self = e.target
        goToPage(self.getAttribute('data-index'))
      })

      galleryDots.appendChild(dot)
    }

    // Previous Button
    previous.addEventListener('click', function() {
      if (page === 1) {
        page = 1;
      } else {
        page--;
        showImages();
      }
    })

    // Next Button
    next.addEventListener('click', function() {
      if (page < pages) {
        page++;
        showImages();
      }
    })

    // Jump to page
    function goToPage(index) {
      index = parseInt(index);
      page = index + 1;

      showImages();
    }

    // Load images
    function showImages() {
      while (gallery.firstChild) gallery.removeChild(gallery.firstChild)

      var offset = (page - 1) * perPage;
      var dots = document.querySelectorAll('.gallery-dot');

      for (var i = 0; i < dots.length; i++) {
        dots[i].classList.remove('active');
      }

      dots[page - 1].classList.add('active');

      for (var i = offset; i < offset + perPage; i++) {
        if (images[i]) {
          var template = document.createElement('div');
          var title = document.createElement('p');
          var titleText = document.createTextNode(images[i].title);
          var img = document.createElement('img');

          template.classList.add('template')
          img.setAttribute("src", images[i].source);
          img.setAttribute('alt', images[i].title);

          title.appendChild(titleText);
          template.appendChild(img);
          template.appendChild(title);
          gallery.appendChild(template);
        }
      }

      // Animate images
      var galleryItems = document.querySelectorAll('.template')
      for (var i = 0; i < galleryItems.length; i++) {
        var onAnimateItemIn = animateItemIn(i);
        setTimeout(onAnimateItemIn, i * 100);
      }

      function animateItemIn(i) {
        var item = galleryItems[i];
        return function() {
          item.classList.add('animate');
        }
      }

      // Update page indicator
      pageIndicator.textContent = "Page " + page + " of " + pages;

    }

    showImages();