artwork.js

let artworksArr = [

  {
    artworkNumber: 1,
    artworkName: 'The Rape of the Daughters of Leucippus',
    artworkUrl: './assets/images/artworks/artwork-1.png',
    artworkInfo: ["The Rape of the Daughters of Leucippus is a 1618 painting by Peter Paul Rubens and Jan Wildens. It is displayed at the Alte Pinakothek in Munich. The painting was bought in Antwerp in 1716 by Johann Wilhelm, Elector Palatine. Initially sent to Mannheim, by 1805/06 it had reached Munich.","The painting depicts the mortal Castor and the immortal Pollux abducting Phoebe and Hilaeira, daughters of Leucippus of Messenia. Castor the horse-tamer is recognisable from his armour, whilst Pollux the boxer is shown with a bare and free upper body. They are also distinguished by their horses—Castor's is well-behaved and supported by a putto, whereas Pollux's is rearing. The putto's black wing shows the twins' ultimate fate.", "In the painting, Phoebe and Hilaeira do not have distinguishing attributes. From the literature on Greek myths, however, we learn that Phoebe bore a son, Mnesleos, to Pollux, and Hilaeira bore a son, Anogon, to Castor. It would seem therefore, from the directions of the twins' fixed and admiring stares, that the daughter in the lower position, with her back to us, is Phoebe, and the daughter in the upper position, displaying a frontal view, is Hilaeira."]
  },
  {
    artworkNumber: 2,
    artworkName: 'The Consequences of War',
    artworkUrl: './assets/images/artworks/artwork-2.png',
    artworkInfo: ["The Consequences of War, also known as Horror of War, was executed between 1638-1639 by Peter Paul Rubens in oil paint on canvas. It was painted for Ferdinando II de' Medici.", "Rubens painted Consequences of War in response to the Thirty Years' War (1618–1648). The conflict's origins are complex and diverse but animosity between Protestants and Catholics played a significant role. In addition, struggles for political power in Europe contributed to and prolonged the war. Nearly all European states fought at some point in the conflict's long time span. The fighting involved Spain, France, Sweden, Denmark, the Netherlands, Austria, Poland, the Ottoman Empire, and the Holy Roman Empire.In particular, the war represented a continuation and extension of Habsburg and Bourbon rivalry as well as French and Habsburg animosity.","As depicted in Consequences of War, the fighting led to the destruction of large areas of Europe as well as outbreaks of both pestilence and famine. Much of the fighting took place in the German states which suffered significant depopulation as a result. The Thirty Years' War ended in 1648 with the treaties of Osnabruck and Munster as well as the Peace of Westphalia."]
  },
  {
    artworkNumber: 3,
    artworkName: 'The Adoration of the Magi',
    artworkUrl: './assets/images/artworks/artwork-3.png',
    artworkInfo: ["The Adoration of the Magi is a c.1617-18 painting by Peter Paul Rubens. It is now in the Musée des Beaux-Arts de Lyon. Since it is horizontal rather than vertical it was probably commissioned for a private collection rather than as an altarpiece.","The painting arranges full-length figures across the canvas, backed by a frieze-like crowd showing a variety of mature male types, twelve in all. The oldest magus kneels and kisses the foot of the Christ Child with a tender gesture, as the Child, standing on a straw-strewn table, where he is presented by the Virgin Mary, touches the magus' bald head in a gesture of benediction. The dim stable is lit by shafts of light.", "The painting was purchased by Maximilian II Emanuel, Prince-Elector of Bavaria in Antwerp in September 1698, from Gijsbert van Ceulen, part of a spectacular group of paintings that included twelve other paintings by Rubens that are now among the Wittelsbach works of art from Schleissheim now in the Alte Pinakothek, Munich. It languished as a copy until Jacques Fouquart resuscitated its reputation, recognized as a major work of Rubens, in the exhibition Le siècle de Rubens, Paris, 1977-78."]
  },
  {
    artworkNumber: 4,
    artworkName: 'Prometheus Bound',
    artworkUrl: './assets/images/artworks/prometheus-bound.jpg',
    artworkInfo: ["Peter Paul Rubens completed this painting in his studio with collaboration from Frans Snyders, who rendered the eagle. It remained in his possession from 1612 to 1618, when it was traded in a group of paintings completed by Rubens, to Englishmen Sir Dudley Carleton in exchange for his collection of classical statues. This work is currently in the collection of the Philadelphia Museum of Art, Pennsylvania.", "Prometheus Bound, a Greek play attributed to Aeschylus, but thought to have been completed by another after Aeschylus' death in 456 B.C. It is possible that Prometheus Bound is the second play written by Aeschylus in a connected trilogy, followed by Prometheus lyomenos (Prometheus Unbound), of which only a few fragments have survived.", "In the play, Prometheus, the Titan, had assisted Zeus in establishing rule over Cronus and the other Titans, but infuriated Zeus by becoming the champion of mortals and giving them fire and the arts. In the opening of the play, Zeus ordered Hephaestus, Kratos (Power) and Bia (Force) to nail Prometheus to a high rock in Caucasus, to suffer torment as long as Zeus wishes.", "Prometheus's punishment is for stealing fire from Mount Olympus to give to humanity. Zeus, the King of Olympians, ordered Prometheus to be chained to a rock and suffer torment, by having an eagle devour Prometheus's perpetually regenerating liver everyday."]
  },
  {
    artworkNumber: 5,
    artworkName: 'The Disembarkation at Marseilles',
    artworkUrl: './assets/images/artworks/the-disembarkation-at-marseilles.jpg',
    artworkInfo: ["The Arrival of Marie de Medici at Marseilles is a c. 1622-1625 Baroque painting done by Sir Peter Paul Rubens. It was commissioned by Marie de' Medici of France to commemorate the life of her and her husband Henry IV of France. The painting currently resides in the Louvre in Paris.", "Marie de Medici commissioned 24 paintings, pictures that depicted historical events in her life, with the intention to decorate the Palais du Luxembourg. She commissioned the paintings in an attempt to sway public opinion regarding her right to rule. Due to her foreign heritage, the French saw her as undeserving of her position as a ruler.", "The Arrival of Marie de’ Medici at Marseilles shows the Queen of France arriving by ship in Marseille on November 3, 1600. She is greeted by unknown characters that represent France, as they are seen with the French royalty symbol, the Fleur-de-lis. At the bottom of the painting, Neptune and the daughters of Nereus, the Sea God, are seen saluting the Queen.", "At the top of the painting, the character Fame is flying overhead, trumpeting the Queen’s arrival. Rubens uses these symbolic figures to transform a historical event into an allegory that reinforces Marie de' Medici's right to the throne. The various French symbols depicted greeting Marie upon her arrival are meant to establish good will and respect between her and the French people."]
  },
  {
    artworkNumber: 6,
    artworkName: 'The Fall of Phaeton',
    artworkUrl: './assets/images/artworks/the-fall-of-phaeton.jpg',
    artworkInfo: ["Rubens painted The Fall of Phaeton in Rome and the painting was probably reworked later around 1606/1608. It has been housed in the National Gallery of Art since 5 January 1990. Rubens also painted other Greek mythological subjects, such as The Fall of Icarus, Perseus Freeing Andromeda, and The Judgement of Paris.", "The Fall of Phaeton featuring the ancient Greek myth of Phaeton (Phaethon), a recurring theme in visual arts. Rubens chose to depict the myth at the height of its action, with the thunderbolts hurled by Zeus to the right. The thunderbolts provide the light contrast to facilitate the display of horror on the faces of Phaeton, the horses and other figures while preserving the darkness of the event.", "The butterfly winged female figures represent the hours and seasons, who react in terror as the night and day cycle becomes disrupted. The great astrological circle that arches the heavens is also disrupted. The assemblage of bodies form a diagonal oval in the center, separating dark and light sides of the canvas. The bodies are arranged so as to assist the viewer’s travel continually around that oval."]
  },
  {
    artworkNumber: 7,
    artworkName: 'Peace & War',
    artworkUrl: './assets/images/artworks/peace-and-war.png',
    artworkInfo: ["In 1629, Rubens painted Peace and War to encourage the King to prevent war amongst the European nations.",
  
    "In this work, Rubens draws on ancient Greek and Roman mythological subjects and symbols to convey the beauty that peace can bring to Europe and mankind.",
    
    "Peace is the focus of this work and is represented in the person of Ceres, goddess of the earth. She is shown squirting milk from her breast into the mouth of Plutus, the god of wealth, who is depicted as a child.",
    
    "Behind Peace and Wealth is the goddess of wisdom, Minerva. She is presented as a soldier holding up a large shield to ward off Mars, the god of War and Alecto, the fury of war. Minerva protects the humbling scene from potential destruction that looks to break the harmony created. Behind Mars is a woman who represents one of the avenging furies associated with war.",
    
    "To the bottom right of the image Rubens paints children as symbols of the future of mankind, as they are the ones who will benefit the most from peace.",
    
    "Upon completion of Peace and War, Rubens presented it Charles I of England and it helped in the creation of a peace treaty between London and Madrid."]
  }
]

const bodyEl = document.querySelector('body')
const headerEl = document.querySelector('header')
const mainEl = document.querySelector('main')
const footerEl = document.querySelector('footer')
const loadigScreen = document.querySelector('div.loading-screen')

const paginationContainer = document.querySelector('div.pagination')
const currentPageText = document.querySelector('div.pages p.current-page span')
const totalPageText = document.querySelector('div.pages p.total-pages span')
const prevBtn = document.querySelector('button.prev-btn')
const nextBtn = document.querySelector('button.next-btn')
const artworkImg = document.querySelector('div.img-wrapper div.img-container img')
const artworkHeading = document.querySelector('div.artwork__info h1.heading-primary')
const artworkParagraphs = document.querySelector('div.artwork__info div.radial-beams-paragraphs div.paragraphs-pagination div.paragraphs')

let currentPageNumber = 1
let totalPages = 7


function loading() {      
  setTimeout(() => {
      // bodyEl.style.overflowY = "scroll"
      headerEl.style.display = 'flex';
      mainEl.style.display = 'flex';
      footerEl.style.display = 'flex';
      
      setTimeout(() => {
          loadigScreen.style.clipPath = "polygon(0 0, 100% 0, 100% 0, 0 0)"
      }, 550);
  }, 250);
}

function applyArtworkID(){
  let passedArtworkIDNumber = sessionStorage.getItem("artworkIDNumber")
  // console.log(sessionStorage.getItem("artworkIDNumber"))

  if(sessionStorage.getItem("artworkIDNumber")){
    currentPageNumber = parseInt(passedArtworkIDNumber)
    
  } else{
    currentPageNumber = 1

  }


  // console.log(currentPageNumber)
  currentPageText.innerHTML = currentPageNumber
  // console.log(artworksArr)
  let artworkObj = artworksArr.filter(artwork => artwork.artworkNumber === currentPageNumber)
  // console.log(artworkObj)
  artworkImg.src = `${artworkObj[0].artworkUrl}`
  artworkImg.alt = `${artworkObj[0].artworkName}`
  artworkHeading.innerHTML = `${artworkObj[0].artworkName}`
  artworkParagraphs.innerHTML = artworkObj[0].artworkInfo.map((artwork, i) => {       
    return `
            <p class="paragraph">${artwork}</p>        
    `
  }).join('');
  
 
}

  applyArtworkID()



document.addEventListener('DOMContentLoaded', function() {
  window.addEventListener("load", function() {
    setTimeout(() => {
      loading()
    }, 810);
  }, false);
})


// NAVIGATION
// Toggle menu
const hamburgerMenuButton = document.querySelector('header.big-screen .menu-btn');
const menuContainer = document.querySelector('header.big-screen nav.menu-nav');
// const menuList = document.querySelector('header.big-screen nav.menu-nav ul.menu-items');
const menuItemLink1 = document.querySelector('header.big-screen nav.menu-nav ul.menu-items li:nth-child(1) a');
const menuItemLink2 = document.querySelector('header.big-screen nav.menu-nav ul.menu-items li:nth-child(2) a');
const menuItemLink3 = document.querySelector('header.big-screen nav.menu-nav ul.menu-items li:nth-child(3) a');
const menuItemLink4 = document.querySelector('header.big-screen nav.menu-nav ul.menu-items li:nth-child(4) a');
const menuItemLinks = document.querySelectorAll('header.big-screen nav.menu-nav ul.menu-items li a');

const menuContactList = document.querySelector('header.big-screen nav ul.contact li');
// const menuContactLink = document.querySelector('header.big-screen nav.menu-nav ul.contact li a');

const menuIcon = document.querySelector('header.big-screen .menu-btn .menu-icon');


let isMenuOpened = false;

hamburgerMenuButton.addEventListener("click", checkMenuIsOpened);
function checkMenuIsOpened(){
    if(isMenuOpened === false){
        openMenu()
    } else if(isMenuOpened === true){
        closeMenu()
        // console.log("clicked")
    }
}
function openMenu(){
    isMenuOpened = true;
    // console.log("openMenu()", isMenuOpened)

    // menuContainer.style.display = "flex"
    // menuContainer.style.transform = "translate(-50%, 0px)"
    setTimeout(() => {
      // menuContainer.style.clipPath = "circle(200% at 50% 0)"
      menuContainer.style.clipPath = "polygon(0 0, 100% 0, 100% 100%, 0% 100%)"

            setTimeout(() => {

              // console.log(menuItemLink1.parentNode)
              menuItemLink1.parentNode.classList.toggle('opened')
              menuItemLink2.parentNode.classList.toggle('opened')
              menuItemLink3.parentNode.classList.toggle('opened')
              menuItemLink4.parentNode.classList.toggle('opened')

              menuIcon.classList.add('opened')
              setTimeout(() => {
                menuItemLink1.style.clipPath = "polygon(0 0, 100% 0, 100% 100%, 0% 100%)"
                menuItemLink1.style.transform = "translateX(0px)"
          
                  setTimeout(() => {
                   
                    menuItemLink2.style.clipPath = "polygon(0 0, 100% 0, 100% 100%, 0% 100%)"
                    menuItemLink2.style.transform = "translateX(0px)"
                    setTimeout(() => {
                      menuIcon.classList.toggle('clicked')
                   
                      setTimeout(() => {
                        menuItemLink3.style.clipPath = "polygon(0 0, 100% 0, 100% 100%, 0% 100%)"
                        menuItemLink3.style.transform = "translateX(0px)"

                        setTimeout(() => {
                          menuItemLink4.style.clipPath = "polygon(0 0, 100% 0, 100% 100%, 0% 100%)"
                          menuItemLink4.style.transform = "translateX(0px)"

                          setTimeout(() => {
                            menuContactList.style.clipPath = "polygon(0 0, 100% 0, 100% 100%, 0% 100%)"
                            menuContactList.style.transform = "translateX(0px)"
                            // setTimeout(() => {
                            //   menuContactLink.style.clipPath = "polygon(0 0, 100% 0, 100% 100%, 0% 100%)"
                            //   menuContactLink.style.transform = "translateY(0px)"
                            // }, 40)
                          }, 40)
                        }, 40)
                      }, 20)
                    }, 20)

                  }, 20)
              }, 20)
            }, 400)

    }, 20)



   
}
function closeMenu(){
    isMenuOpened = false;
    // console.log("closeMenu()", isMenuOpened)

    // menuList.classList.remove("menu-items-appear");
    menuIcon.classList.remove('clicked')

    menuItemLink1.parentNode.classList.remove('opened')
    menuItemLink2.parentNode.classList.remove('opened')
    menuItemLink3.parentNode.classList.remove('opened')
    menuItemLink4.parentNode.classList.remove('opened')
    
    setTimeout(() => {
      // menuContactList.style.clipPath = "polygon(0 100%, 100% 100%, 100% 100%, 0% 100%)"
      menuContactList.style.clipPath = "polygon(0 0, 0 0, 0 100%, 0% 100%)"
      menuContactList.style.transform = "translateX(10px)"
      // debugger
     
        setTimeout(() => {
          // menuItemLink4.style.clipPath = "polygon(0 100%, 100% 100%, 100% 100%, 0% 100%)"
          // menuItemLink4.style.clipPath = "polygon(0 0, 0 0, 0 100%, 0% 100%)"
          menuItemLink4.style.clipPath = "polygon(100% 0, 100% 0, 100% 100%, 100% 100%)"
          menuItemLink4.style.transform = "translateX(40px)"
          // debugger
          setTimeout(() => {
            // menuItemLink3.style.clipPath = "polygon(0 100%, 100% 100%, 100% 100%, 0% 100%)"
            // menuItemLink3.style.clipPath = "polygon(0 0, 0 0, 0 100%, 0% 100%)"
            menuItemLink3.style.clipPath = "polygon(100% 0, 100% 0, 100% 100%, 100% 100%)"
            menuItemLink3.style.transform = "translateX(40px)"
            // debugger
            
            setTimeout(() => {
              // menuItemLink2.style.clipPath = "polygon(0 100%, 100% 100%, 100% 100%, 0% 100%)"
              // menuItemLink2.style.clipPath = "polygon(0 0, 0 0, 0 100%, 0% 100%)"
              menuItemLink2.style.clipPath = "polygon(100% 0, 100% 0, 100% 100%, 100% 100%)"
              menuItemLink2.style.transform = "translateX(40px)"
              // debugger
              setTimeout(() => {
                // menuItemLink1.style.clipPath = "polygon(0 100%, 100% 100%, 100% 100%, 0% 100%)"
                // menuItemLink1.style.clipPath = "polygon(0 0, 0 0, 0 100%, 0% 100%)"
                menuItemLink1.style.clipPath = "polygon(100% 0, 100% 0, 100% 100%, 100% 100%)"
                menuItemLink1.style.transform = "translateX(40px)"

                menuIcon.classList.remove('opened')
                // debugger
                setTimeout(() => {
                // menuContainer.style.clipPath = "circle(0% at 50% 0)"
                menuContainer.style.clipPath = "polygon(0 0, 100% 0, 100% 0, 0 0)"         
           
                },400)
              },40)
            },40)
          },40)
        },40)
      
    },120)

  
}


menuItemLinks.forEach(menuItemLink => {
  menuItemLink.addEventListener("click",()=>{
    setTimeout(()=>{
      closeMenu()
    }, 400)
  })
   
});


const socialIcons = document.querySelectorAll("footer article.upper div.social-icons a");
const copyright = document.querySelector("footer article.lower div.copyright");
const privacyTerms = document.querySelector("footer article.lower div.privacy-terms");
const developedBy = document.querySelector("footer article.lower div.developed-by");
const menuNavItems = document.querySelectorAll("nav.menu-nav ul.menu-items li");
const menuContactText = document.querySelector("nav.menu-nav ul.contact li");
const logo = document.querySelector(".logo");
const navItems = document.querySelectorAll(".nav-item");
const searchBtn = document.querySelector(".search-btn");
const menuBtn = document.querySelector(".menu-btn");


const imgContainer = document.querySelector(".img-container");
// const artworkInfos = document.querySelectorAll(".artwork__info");
const tracker = document.querySelector(".cursor");



// IMG CONTAINER
function interactWithImgContainer(e){
  const pos = this.getBoundingClientRect();
  const mx = e.clientX - pos.left - pos.width/2; 
  const my = e.clientY - pos.top - pos.height/2;
  //  console.log(this, pos)
  this.style.transform = 'translate('+ mx * 0.15 +'px, '+ my * 0.2 +'px)';
  this.style.transform += 'rotate3d('+ mx * -0.05 +', '+ my * -0.1 +', 0, 12deg)';
  this.children[0].style.transform = 'translate('+ mx * 0.025 +'px, '+ my * 0.075 +'px) scale(1.01)';
  // this.style.transform = 'translate('+ mx * 0.3 +'px, '+ my * 0.6 +'px)';
  // this.style.transform += 'rotate3d('+ mx * -0.1 +', '+ my * -0.3 +', 0, 12deg)';
  // this.children[0].style.transform = 'translate('+ mx * 0.075 +'px, '+ my * 0.125 +'px) scale(1.1)';
}
function dontInteractWithImgContainer(e){
  this.style.transform = 'translate3d(0px, 0px, 0px)';
  this.style.transform += 'rotate3d(0, 0, 0, 0deg)';
  this.children[0].style.transform = 'translate3d(0px, 0px, 0px) scale(1)';
}

// ARTWORK CONTENTS
function interactWithHeading(e) {
  tracker.classList.add('active')
}
function dontInteractWithHeading(e) {
  tracker.classList.remove('active')
}
function interactWithParagraph(e) {
  tracker.classList.add('active')
}
function dontInteractWithParagraph(e) {
  tracker.classList.remove('active')
}

// PAGINATION
function interactWithPagination(e) {
  tracker.classList.add('active')
}
function dontInteractWithPagination(e) {
  tracker.classList.remove('active')
}

// FOOTER
function interactWithCopyright(e) {
  tracker.classList.add('active')
}
function dontInteractWithCopyright(e) {
  tracker.classList.remove('active')
}
function interactWithPrivacyTerms(e) {
  tracker.classList.add('active')
}
function dontInteractWithPrivacyTerms(e) {
  tracker.classList.remove('active')
}
function interactWithDevelopedBy(e) {
  tracker.classList.add('active')
}
function dontInteractWithDevelopedBy(e) {
  tracker.classList.remove('active')
}
function interactWithSocialIcon(e) {
  const pos = this.getBoundingClientRect();
  const mx = e.clientX - pos.left - pos.width/2; 
  const my = e.clientY - pos.top - pos.height/2;

  //  console.log(this, pos)
  this.style.transform = 'translate('+ mx * 0.3 +'px, '+ my * 0.6 +'px)';
  this.style.transform += 'rotate3d('+ mx * -0.1 +', '+ my * -0.3 +', 0, 12deg)';
  this.children[0].style.transform = 'translate('+ mx * 0.075 +'px, '+ my * 0.125 +'px)';

  tracker.classList.add('active')
}
function dontInteractWithSocialIcon(e) {
  this.style.transform = 'translate3d(0px, 0px, 0px)';
  this.style.transform += 'rotate3d(0, 0, 0, 0deg)';
  this.children[0].style.transform = 'translate3d(0px, 0px, 0px)';
  // this.classList.remove('active')
  tracker.classList.remove('active')
}

// MENU NAV ITEMS
function interactWithNavItem(e){
  const pos = this.getBoundingClientRect();
  const mx = e.clientX - pos.left - pos.width/2; 
  const my = e.clientY - pos.top - pos.height/2;

  //  console.log(this, pos)
  this.style.transform = 'translate('+ mx * 0.3 +'px, '+ my * 0.6 +'px)';
  this.style.transform += 'rotate3d('+ mx * -0.1 +', '+ my * -0.3 +', 0, 12deg)';
  this.children[0].style.transform = 'translate('+ mx * 0.075 +'px, '+ my * 0.125 +'px)';

  tracker.classList.add('active')
}
function dontInteractWithNavItem(e){
  this.style.transform = 'translate3d(0px, 0px, 0px)';
  this.style.transform += 'rotate3d(0, 0, 0, 0deg)';
  this.children[0].style.transform = 'translate3d(0px, 0px, 0px)';
  // this.classList.remove('active')
  tracker.classList.remove('active')
}

function interactWithMenuContactText(e){
  tracker.classList.add('active')
}
function dontInteractWithMenuContactText(e){
  tracker.classList.remove('active')
}


//NAV ITEMS
function interactWithNavItem(e){
  const pos = this.getBoundingClientRect();
  const mx = e.clientX - pos.left - pos.width/2; 
  const my = e.clientY - pos.top - pos.height/2;
  //  console.log(this, pos)
  this.style.transform = 'translate('+ mx * 0.3 +'px, '+ my * 0.6 +'px)';
  this.style.transform += 'rotate3d('+ mx * -0.1 +', '+ my * -0.3 +', 0, 12deg)';
  this.children[0].style.transform = 'translate('+ mx * 0.075 +'px, '+ my * 0.125 +'px)';

  // this.classList.add('active')
  tracker.classList.add('active')
}
function dontInteractWithNavItem(e){
  this.style.transform = 'translate3d(0px, 0px, 0px)';
  this.style.transform += 'rotate3d(0, 0, 0, 0deg)';
  this.children[0].style.transform = 'translate3d(0px, 0px, 0px)';
  // this.classList.remove('active')
  tracker.classList.remove('active')
}

// SEARCH BTN
function interactWithSearchBtn(e){
  const pos = this.getBoundingClientRect();
  const mx = e.clientX - pos.left - pos.width/2; 
  const my = e.clientY - pos.top - pos.height/2;
  //  console.log(this, pos)
  this.style.transform = 'translate('+ mx * 0.3 +'px, '+ my * 0.6 +'px)';
  this.style.transform += 'rotate3d('+ mx * -0.1 +', '+ my * -0.3 +', 0, 12deg)';
  this.children[0].style.transform = 'translate('+ mx * 0.075 +'px, '+ my * 0.125 +'px)';

  // this.classList.add('active')
  tracker.classList.add('active')
}
function dontInteractWithSearchBtn(e){
  this.style.transform = 'translate3d(0px, 0px, 0px)';
  this.style.transform += 'rotate3d(0, 0, 0, 0deg)';
  this.children[0].style.transform = 'translate3d(0px, 0px, 0px)';
  // this.classList.remove('active')
  tracker.classList.remove('active')
}

// MENU BTN
function interactWithMenuBtn(e){
  const pos = this.getBoundingClientRect();
  const mx = e.clientX - pos.left - pos.width/2; 
  const my = e.clientY - pos.top - pos.height/2;
  //  console.log(this, pos)
  this.style.transform = 'translate('+ mx * 0.3 +'px, '+ my * 0.6 +'px)';
  this.style.transform += 'rotate3d('+ mx * -0.1 +', '+ my * -0.3 +', 0, 12deg)';
  this.children[0].style.transform = 'translate('+ mx * 0.075 +'px, '+ my * 0.125 +'px)';

  // this.classList.add('active')
  tracker.classList.add('active')
}
function dontInteractWithMenuBtn(e){
  this.style.transform = 'translate3d(0px, 0px, 0px)';
  this.style.transform += 'rotate3d(0, 0, 0, 0deg)';
  this.children[0].style.transform = 'translate3d(0px, 0px, 0px)';
  // this.classList.remove('active')
  tracker.classList.remove('active')
}

// LOGO
function interactWithLogo(e){
  const pos = this.getBoundingClientRect();
  const mx = e.clientX - pos.left - pos.width/2; 
  const my = e.clientY - pos.top - pos.height/2;
  //  console.log(this, pos)
  this.style.transform = 'translate('+ mx * 0.3 +'px, '+ my * 0.6 +'px)';
  this.style.transform += 'rotate3d('+ mx * -0.1 +', '+ my * -0.3 +', 0, 12deg)';
  this.children[0].style.transform = 'translate('+ mx * 0.075 +'px, '+ my * 0.125 +'px)';

  // this.classList.add('active')
  tracker.classList.add('active')
}
function dontInteractWithLogo(e){
  this.style.transform = 'translate3d(0px, 0px, 0px)';
  this.style.transform += 'rotate3d(0, 0, 0, 0deg)';
  this.children[0].style.transform = 'translate3d(0px, 0px, 0px)';
  // this.classList.remove('active')
  tracker.classList.remove('active')
}



// MOUSE TRACKER
const mediaQuery = window.matchMedia("(min-width: 1120px)");
function myFunction(mediaQuery) {
  if (mediaQuery.matches) {
    // IMG CONTAINER
    imgContainer.addEventListener('mousemove', interactWithImgContainer)
    imgContainer.addEventListener('mouseleave', dontInteractWithImgContainer)
    
    // ARTWORK CONTENTS
    artworkHeading.addEventListener('mousemove', interactWithHeading)
    artworkHeading.addEventListener('mouseleave', dontInteractWithHeading)
    artworkParagraphs.addEventListener('mousemove', interactWithParagraph)
    artworkParagraphs.addEventListener('mouseleave', dontInteractWithParagraph)

    // PAGINATION
    paginationContainer.addEventListener('mousemove', interactWithPagination)
    paginationContainer.addEventListener('mouseleave', dontInteractWithPagination)

    // FOOTER
    copyright.addEventListener('mousemove', interactWithCopyright)
    copyright.addEventListener('mouseleave', dontInteractWithCopyright)
    privacyTerms.addEventListener('mousemove', interactWithPrivacyTerms)
    privacyTerms.addEventListener('mouseleave', dontInteractWithPrivacyTerms)
    developedBy.addEventListener('mousemove', interactWithDevelopedBy)
    developedBy.addEventListener('mouseleave', dontInteractWithDevelopedBy)
    socialIcons.forEach(socialIcon => socialIcon.addEventListener('mousemove', interactWithSocialIcon));
    socialIcons.forEach(socialIcon => socialIcon.addEventListener('mouseleave', dontInteractWithSocialIcon));

    // MENU NAV ITEMS
    menuNavItems.forEach(navItem => navItem.addEventListener('mousemove', interactWithNavItem));
    menuNavItems.forEach(navItem => navItem.addEventListener('mouseleave', dontInteractWithNavItem));
    menuContactText.addEventListener('mousemove', interactWithMenuContactText)
    menuContactText.addEventListener('mouseleave', dontInteractWithMenuContactText)

    //NAV ITEMS
    navItems.forEach(navItem => navItem.addEventListener('mousemove', interactWithNavItem));
    navItems.forEach(navItem => navItem.addEventListener('mouseleave', dontInteractWithNavItem));

    // SEARCH BTN
    searchBtn.addEventListener('mousemove', interactWithSearchBtn)
    searchBtn.addEventListener('mouseleave', dontInteractWithSearchBtn)

    // MENU BTN
    menuBtn.addEventListener('mousemove', interactWithMenuBtn)
    menuBtn.addEventListener('mouseleave', dontInteractWithMenuBtn)

    // LOGO
    logo.addEventListener('mousemove', interactWithLogo)
    logo.addEventListener('mouseleave', dontInteractWithLogo)

    const tracker = document.querySelector(".cursor");
      document.addEventListener("mousemove", e => {
        tracker.setAttribute(
          "style",
          "top: " + (e.pageY - 15) + "px; left: " + (e.pageX - 15) + "px;"
        );
      });
      
  } else {
        // IMG CONTAINER
        imgContainer.removeEventListener('mousemove', interactWithImgContainer)
        imgContainer.removeEventListener('mouseleave', dontInteractWithImgContainer)

        // ARTWORK CONTENTS
        artworkHeading.addEventListener('mousemove', interactWithHeading)
        artworkHeading.addEventListener('mouseleave', dontInteractWithHeading)
        artworkParagraphs.addEventListener('mousemove', interactWithParagraph)
        artworkParagraphs.addEventListener('mouseleave', dontInteractWithParagraph)

        // PAGINATION
        paginationContainer.addEventListener('mousemove', interactWithPagination)
        paginationContainer.addEventListener('mouseleave', dontInteractWithPagination)

        // FOOTER
        copyright.removeEventListener('mousemove', interactWithCopyright)
        copyright.removeEventListener('mouseleave', dontInteractWithCopyright)
        privacyTerms.removeEventListener('mousemove', interactWithPrivacyTerms)
        privacyTerms.removeEventListener('mouseleave', dontInteractWithPrivacyTerms)
        developedBy.removeEventListener('mousemove', interactWithDevelopedBy)
        developedBy.removeEventListener('mouseleave', dontInteractWithDevelopedBy)
        socialIcons.forEach(socialIcon => socialIcon.removeEventListener('mousemove', interactWithSocialIcon));
        socialIcons.forEach(socialIcon => socialIcon.removeEventListener('mouseleave', dontInteractWithSocialIcon));
    
        // MENU NAV ITEMS
        menuNavItems.forEach(navItem => navItem.removeEventListener('mousemove', interactWithNavItem));
        menuNavItems.forEach(navItem => navItem.removeEventListener('mouseleave', dontInteractWithNavItem));
        menuContactText.removeEventListener('mousemove', interactWithMenuContactText)
        menuContactText.removeEventListener('mouseleave', dontInteractWithMenuContactText)
    
        //NAV ITEMS
        navItems.forEach(navItem => navItem.removeEventListener('mousemove', interactWithNavItem));
        navItems.forEach(navItem => navItem.removeEventListener('mouseleave', dontInteractWithNavItem));
    
        // SEARCH BTN
        searchBtn.removeEventListener('mousemove', interactWithSearchBtn)
        searchBtn.removeEventListener('mouseleave', dontInteractWithSearchBtn)
    
        // MENU BTN
        menuBtn.removeEventListener('mousemove', interactWithMenuBtn)
        menuBtn.removeEventListener('mouseleave', dontInteractWithMenuBtn)
    
        // LOGO
        logo.removeEventListener('mousemove', interactWithLogo)
        logo.removeEventListener('mouseleave', dontInteractWithLogo)

      const tracker = document.querySelector(".cursor");
      tracker.style.display = "none";
  }
}
myFunction(mediaQuery);
mediaQuery.addEventListener('change', myFunction);

let tlAbout = gsap
    .timeline({
      paused: false
    })

    .fromTo("div.img-wrapper div.img-container img", {duration: 1.6,  clipPath:"polygon(0 0, 100% 0, 100% 0, 0 0)", ease: "elastic(2, .1)"}, {
      clipPath: "polygon(0 0, 100% 0, 100% 100%, 0 100%)"
      }, "<.1")

    .fromTo("div.artwork__info h1", { clipPath:"polygon(0 0, 100% 0, 100% 0, 0 0)",opacity: 1},{
        clipPath: "polygon(0 0, 100% 0, 100% 100%, 0 100%)",
        duration: 0.5,
        ease: "power2.out"
      }, "<0.6")
    .fromTo("div.artwork__info div.radial-beams-paragraphs div.paragraphs-pagination div.paragraphs", {clipPath:"polygon(0 0, 100% 0, 100% 0, 0 0)",opacity: 1},{
        clipPath: "polygon(0 0, 100% 0, 100% 100%, 0 100%)",
        duration: .7,
        stagger: 0,
        ease: "power4.out"
      }, "<0.3")

prevBtn.addEventListener('click', goPrevPage)
nextBtn.addEventListener('click', goNextPage)

function goPrevPage(){  
  setTimeout(()=>{
    // setTimeout(()=>{
      if(currentPageNumber<=totalPages && currentPageNumber>1){
        window.scrollTo(0,0)
        currentPageNumber--
        tlAbout.reverse()

    sessionStorage.setItem("artworkIDNumber", currentPageNumber);
    currentPageText.innerHTML = currentPageNumber

    setTimeout(()=>{
        let artworkObj = artworksArr.filter(artwork => artwork.artworkNumber === currentPageNumber)
        // console.log(artworkObj)
        artworkImg.src = `${artworkObj[0].artworkUrl}`
        artworkImg.alt = `${artworkObj[0].artworkName}`
        artworkHeading.innerHTML = `${artworkObj[0].artworkName}`
        artworkParagraphs.innerHTML = artworkObj[0].artworkInfo.map((artwork, i) => {       
          return `
                  <p class="paragraph">${artwork}</p>        
          `
          }).join('');
        setTimeout(()=>{
          tlAbout.play()
        },80)
      },1800)
    }  else{
        return
      }
    // },1600)

  },0)
}
function goNextPage(){
  setTimeout(()=>{
    // setTimeout(()=>{
      if(currentPageNumber<totalPages && currentPageNumber>=1){
        window.scrollTo(0,0)
        currentPageNumber++
        tlAbout.reverse()

        sessionStorage.setItem("artworkIDNumber", currentPageNumber);
        currentPageText.innerHTML = currentPageNumber
        
        setTimeout(()=>{
          let artworkObj = artworksArr.filter(artwork => artwork.artworkNumber === currentPageNumber)
          // console.log(artworkObj)
          artworkImg.src = `${artworkObj[0].artworkUrl}`
          artworkImg.alt = `${artworkObj[0].artworkName}`
          artworkHeading.innerHTML = `${artworkObj[0].artworkName}`
          artworkParagraphs.innerHTML = artworkObj[0].artworkInfo.map((artwork, i) => {       
            return `
                    <p class="paragraph">${artwork}</p>        
            `
          }).join('');
          
          setTimeout(()=>{
            tlAbout.play()
          },80)
        },1800)
      }  else if(currentPageNumber===totalPages){
        return
      }
    // },1600)
    
  },0)
}