/* jshint esversion: 6 */
import 'babel-polyfill'
import lazysizes from 'lazysizes'
import optimumx from 'lazysizes'
require('../../node_modules/lazysizes/plugins/object-fit/ls.object-fit.js')
require('../../node_modules/lazysizes/plugins/unveilhooks/ls.unveilhooks.js')
import Amplitude from 'amplitudejs'
import imagesLoaded from 'imagesloaded'
// import Packery from 'packery'
import InfiniteGrid, {
  JustifiedLayout,
  FrameLayout
} from "@egjs/infinitegrid";
import IScroll from 'iscroll'
import Hls from 'hls.js'
import throttle from 'lodash.throttle'
// import {
//   TweenMax,
//   AttrPlugin
// } from 'gsap'
import Barba from 'barba.js'
require('viewport-units-buggyfill').init()

function updateURLParameter(url, param, paramVal) {
  var TheAnchor = null;
  var newAdditionalURL = "";
  var tempArray = url.split("?");
  var baseURL = tempArray[0];
  var additionalURL = tempArray[1];
  var temp = "";
  if (additionalURL) {
    var tmpAnchor = additionalURL.split("#");
    var TheParams = tmpAnchor[0];
    TheAnchor = tmpAnchor[1];
    if (TheAnchor)
      additionalURL = TheParams;
    tempArray = additionalURL.split("&");
    for (var i = 0; i < tempArray.length; i++) {
      if (tempArray[i].split('=')[0] != param) {
        newAdditionalURL += temp + tempArray[i];
        temp = "&";
      }
    }
  } else {
    var tmpAnchor = baseURL.split("#");
    var TheParams = tmpAnchor[0];
    TheAnchor = tmpAnchor[1];
    if (TheParams)
      baseURL = TheParams;
  }
  if (TheAnchor)
    paramVal += "#" + TheAnchor;
  var rows_txt = temp + "" + param + "=" + paramVal;
  return baseURL + "?" + newAdditionalURL + rows_txt;
}

function addListenerMulti(el, s, fn) {
  s.split(' ').forEach(e => el.addEventListener(e, fn, false));
}
const isInViewport = (elem) => {
  const bounding = elem.getBoundingClientRect();
  return (
    bounding.top >= 0 &&
    bounding.left >= 0 &&
    bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
};
const getUrlParams = prop => {
  var params = {};
  var search = decodeURIComponent(window.location.href.slice(window.location.href.indexOf('?') + 1));
  var definitions = search.split('&');
  definitions.forEach(function(val, key) {
    var parts = val.split('=', 2);
    params[parts[0]] = parts[1];
  });
  return (prop && prop in params) ? params[prop] : params;
}
const simulateClick = elem => {
  // Create our event (with options)
  var evt = new MouseEvent('click', {
    bubbles: true,
    cancelable: true,
    view: window
  });
  // If cancelled, don't dispatch our event
  var canceled = !elem.dispatchEvent(evt);
}
const resizeWindow = () => {
  var event = document.createEvent('HTMLEvents');
  event.initEvent('resize', true, false);
  window.dispatchEvent(event);
}
const sizeElem = (id, sizeW, sizeH) => {
  const elem = document.getElementById(id)
  if (elem) {
    if (sizeW)
      elem.style.width = sizeW + 'px'
    if (sizeH)
      elem.style.height = sizeH + 'px'
  }
}
const placeElem = (id, top, left) => {
  const elem = document.getElementById(id)
  if (elem) {
    if (top)
      elem.style.top = top + 'px'
    if (left)
      elem.style.left = left + 'px'
  }
}
const margeElem = (id, top) => {
  const elem = document.getElementById(id)
  if (elem) {
    if (top)
      elem.style.marginTop = top + 'px'
  }
}
const App = {
  root: '/',
  init: () => {
    App.pageType = document.body.getAttribute('page-type');
    App.sizeSet()
    App.hiddenNav.init()
    App.interact.init()
    window.addEventListener('resize', throttle(App.sizeSet, 128), false);
    document.getElementById('loader').style.display = 'none'
    App.intro.init()
    document.addEventListener('click', e => {
      if (e.target.getAttribute('event-target') !== 'about-panel' && document.body.classList.contains('about-panel') && !App.aboutPanel.contains(e.target) || e.target.getAttribute('event-target') === 'about-panel' && document.body.classList.contains('about-panel') && App.aboutPanel.contains(e.target)) document.body.classList.remove('about-panel')
    })
    document.addEventListener('lazybeforeunveil', Scroller.refresh);
  },
  sizeSet: () => {
    App.width = (window.innerWidth || document.documentElement.clientWidth);
    App.height = (window.innerHeight || document.documentElement.clientHeight);
    if (App.width <= 1024)
      App.isMobile = true;
    if (App.isMobile) {
      if (App.width > 1024) {
        location.reload();
        App.isMobile = false;
      }
    }
    App.setElements();
  },
  setElements: () => {
    App.header = document.querySelector('header')
    App.menu = document.getElementById('menu')
    App.aboutPanel = document.getElementById('about-panel')
    // if (!App.isMobile) {
    //   const elem = document.querySelector('#artist-releases .inner-scroll')
    //   if (elem) {
    //     let sizeW = 16
    //     elem.querySelectorAll('.release').forEach(elem => {
    //       sizeW += Math.floor(elem.offsetWidth + parseInt(getComputedStyle(elem).marginRight))
    //     })
    //     if (sizeW) elem.style.width = sizeW + 'px'
    //   }
    // }
  },
  intro: {
    init: () => {
      const intro = document.getElementById('intro')
      if (intro) {
        if (App.intro.localstorage.load('intro')) {
          intro.style.display = 'none'
        } else {
          intro.classList.add('show')
          setTimeout(function() {
            intro.classList.add('animate')
            setTimeout(function() {
              intro.classList.add('hide')
            }, 2000);
          }, 800);
          intro.addEventListener('click', () => {
            intro.classList.add('hide')
          })
          App.intro.localstorage.save('intro', '{introShown: true}', 1440 / 2)
        }
      }
    },
    localstorage: {
      save: (key, jsonData, expirationMin) => {
        if (!Modernizr.localstorage) {
          return false;
        }
        var expirationMS = expirationMin * 60 * 1000;
        var record = {
          value: JSON.stringify(jsonData),
          timestamp: new Date().getTime() + expirationMS
        }
        localStorage.setItem(key, JSON.stringify(record));
        return jsonData;
      },
      load: (key) => {
        if (!Modernizr.localstorage) {
          return false;
        }
        var record = JSON.parse(localStorage.getItem(key));
        if (!record) {
          return false;
        }
        return (new Date().getTime() < record.timestamp && JSON.parse(record.value));
      }
    }
  },
  hiddenNav: {
    distance: 0,
    active: false,
    init: () => {
      if (App.isMobile) return
      window.addEventListener('mousemove', throttle(App.hiddenNav.check, 128), false);
    },
    check: event => {
      App.hiddenNav.distance++
        if (!App.hiddenNav.active) {
          App.hiddenNav.distance = 0
          App.hiddenNav.show()
          window.clearTimeout(App.hiddenNav.tm)
          if (event.pageY > App.height / 5) {
            App.hiddenNav.tm = setTimeout(function() {
              App.hiddenNav.hide()
            }, 1500);
          }
        } else
      if (App.hiddenNav.distance > 4) {
        App.hiddenNav.distance = 0
        App.hiddenNav.show()
      }
    },
    show: () => {
      App.hiddenNav.active = false
      document.querySelector('header').classList.remove('hidden')
    },
    hide: () => {
      App.hiddenNav.active = true
      document.querySelector('header').classList.add('hidden')
    }
  },
  interact: {
    init: () => {
      App.interact.embedKirby()
      App.interact.linkTargets()
      App.interact.eventTargets()
      App.interact.previews()
      App.interact.lightbox()
      Shop.init()
      Audio.init()
      Sliders.init()
      Players.init()
      Scroller.init()
      App.newsGrid.init()
      // if(!Pjax.loaded || !App.isMobile) Pjax.init()
      imagesLoaded(document.getElementById('main'), Scroller.refresh)
    },
    previews: () => {
      if (App.isMobile) return
      const previews = document.querySelectorAll('.artist-preview')
      for (var i = 0; i < previews.length; i++) {
        previews[i].style.visibility = "hidden"
      }
      const artistsLinks = document.querySelectorAll('[data-page=artist][data-id]')
      for (var i = 0; i < artistsLinks.length; i++) {
        const elem = artistsLinks[i]
        const preview = document.querySelector('.artist-preview[data-id="' + elem.dataset.id + '"]')
        if (preview) {
          elem.addEventListener('mouseenter', e => {
            preview.style.visibility = 'visible'
          })
          elem.addEventListener('mouseleave', e => {
            preview.style.visibility = 'hidden'
          })
        }
      }
    },
    eventTargets: () => {
      App.productOpened = false
      const panelToggle = document.querySelectorAll('[event-target=panel]')
      for (var i = 0; i < panelToggle.length; i++) {
        panelToggle[i].addEventListener('click', e => {
          document.body.classList.toggle('infos-panel')
        })
      }
      const productToggle = document.querySelectorAll('[event-target=product-panel]')
      for (var i = 0; i < productToggle.length; i++) {
        const elem = productToggle[i]
        elem.addEventListener('click', e => {
          if(App.isMobile) {
            window.location.href = window.location.origin + App.root + elem.parentNode.dataset.id
            return
          }
          if (!document.body.classList.contains('about-panel')) {
            if (App.productOpened) {
              const opened = document.querySelector('.product.opened')
              if (opened) {
                opened.classList.remove('opened')
                App.productOpened = false
                document.body.classList.remove('product-opened')
                Scroller.enable('x')
              }
            } else {
              if (!elem.parentNode.classList.contains('opened')) {
                elem.parentNode.classList.add('opened')
                App.productOpened = true
                document.body.classList.add('product-opened')
                setTimeout(function() {
                  Scroller.shop.scrollToElement(elem.parentNode, 1000, (App.width - App.height) / -2, 0, IScroll.utils.ease.circular)
                }, 600);
                Scroller.disable('x')
                window.history.replaceState('', '', updateURLParameter(window.location.href, "product", elem.parentNode.dataset.id));
              } else {
                elem.parentNode.classList.remove('opened')
                App.productOpened = false
                document.body.classList.remove('product-opened')
                Scroller.enable('x')
              }
            }
          }
        })
      }
      const aboutToggle = document.querySelectorAll('[event-target=about-panel]:not(.loaded)')
      for (var i = 0; i < aboutToggle.length; i++) {
        const elem = aboutToggle[i]
        elem.addEventListener('click', e => {
          e.preventDefault()
          elem.classList.add('loaded')
          document.body.classList.toggle('about-panel')
          App.menu.classList.remove('opened')
        })
      }
      const artistMedias = document.getElementById('artist-medias')
      if (artistMedias) {
        artistMedias.addEventListener('click', e => {
          let isPlayer = false
          Players.elements.forEach(elem => {
            if (elem.container.contains(e.target))
              isPlayer = true
          })
          if (!isPlayer && !e.target.getAttribute('event-target') && e.target.tagName !== 'SPAN' && e.target.className !== 'embed__thumb' && e.target.tagName !== 'DIV') document.body.classList.toggle('infos-panel')
        })
      }
      if (!App.isMobile) {
        const menus = document.querySelectorAll('#primary-nav > li')
        menus.forEach(element => {
          element.addEventListener('mouseenter', e => {
            window.clearTimeout(App.hiddenNav.tm2)
            menus.forEach(menuElem => {
              menuElem.classList.remove('hover')
            })
            e.currentTarget.classList.add('hover')
          })
          element.addEventListener('mouseleave', e => {
            const target = e.currentTarget
            window.clearTimeout(App.hiddenNav.tm2)
            App.hiddenNav.tm2 = setTimeout(function() {
              target.classList.remove('hover')
            }, 500);

          })
        })
      }
      if (App.isMobile) {
        const releases = document.querySelectorAll('[data-href]')
        releases.forEach(element => {
          element.addEventListener('click', e => {
            e.preventDefault()
          })
          element.addEventListener('tapEvent', e => {
            e.preventDefault()
            window.location.href = element.dataset.href
          })
        })
      }
      const menuTargets = document.querySelectorAll('[event-target=menu]')
      menuTargets.forEach(element => {
        element.addEventListener('click', e => {
          App.menu.classList.toggle('opened')
        })
      })
    },
    linkTargets: () => {
      const links = document.querySelectorAll("a");
      for (var i = 0; i < links.length; i++) {
        const element = links[i];
        if (element.host !== window.location.host) {
          element.setAttribute('target', '_blank');
          element.setAttribute('rel', 'nofollow noopener');
        } else {
          element.setAttribute('target', '_self');
        }
      }
    },
    embedKirby: () => {
      var pluginEmbedLoadLazyVideo = function() {
        var wrapper = this.parentNode;
        var embed = wrapper.children[0];
        var script = wrapper.querySelector('script');
        embed.src = script ? script.getAttribute('data-src') + '&autoplay=1' : embed.getAttribute('data-src') + '&autoplay=1';
        wrapper.removeChild(this);
      };
      var thumb = document.getElementsByClassName('embed__thumb');
      for (var i = 0; i < thumb.length; i++) {
        thumb[i].addEventListener('click', pluginEmbedLoadLazyVideo, false);
      }
    },
    lightbox: () => {
      const elems = document.querySelectorAll('.product-medias .responsive-image')

      elems.forEach(el => {
        el.addEventListener('click', () => {
          var cln = el.cloneNode(true)
          cln.classList.add('lightbox')
          document.getElementById("main").appendChild(cln)
          resizeWindow()
          cln.addEventListener('click', i => {
            cln.remove()
          })
        })
      })
    }
  },
  newsGrid: {
    pattern: [
      [1, 1, 1, 1, 3, 3, 5, 5],
      [1, 1, 1, 1, 3, 3, 5, 5],
      [2, 2, 2, 2, 4, 4, 6, 6],
      [2, 2, 2, 2, 4, 4, 6, 6]
    ],
    init: () => {
      if (App.isMobile) return
      const news = document.getElementById('news')
      if (news && news.dataset.grid !== '[]') {
        App.newsGrid.pattern = JSON.parse(news.dataset.grid)
      }
      if (App.newsGrid.eg) {
        App.newsGrid.eg.destroy()
        App.newsGrid.eg = null
      }
      if (news) {
        App.newsGrid.eg = new InfiniteGrid("#news .grid", {
          margin: 10,
          horizontal: true,
        });
        // App.newsGrid.eg.setLayout(JustifiedLayout, {
        //   margin: 10,
        //   minSize: 500,
        //   maxSize: 1200,
        // });
        App.newsGrid.eg.setLayout(FrameLayout, {
          margin: 4,
          frame: App.newsGrid.pattern
        });
        App.newsGrid.eg.on('layoutComplete', e => {
          Scroller.refresh()
          for (var i = 0; i < e.target.length; i++) {
            const elem = e.target[i].el
            if (elem.style.left == "0px") {
              elem.classList.add('side')
            } else {
              elem.classList.remove('side')
            }
            // const caption = elem.querySelector('.caption')
            // elem.style.paddingBottom = caption.offsetHeight + 'px'
          }
        })
        App.newsGrid.eg.layout()
      }
    },
    init2: () => {
      App.newsGrid.pckry = new Packery('#news .grid', {
        itemSelector: '.item',
        horizontal: true,
        gutter: 10,
        transitionDuration: 0
      });
      App.newsGrid.pckry.on('layoutComplete', function(laidOutItems) {
        for (var i = 0; i < laidOutItems.length; i++) {
          const elem = laidOutItems[i]
          console.log(elem.style.left, laidOutItems)
          // if (elem.style.left == 0) {
          //   elem.classList.add('side')
          // } else {
          //   elem.classList.remove('side')
          // }
        }
      })
    }
  }
}
const Sliders = {
  flickitys: [],
  init: () => {
    Sliders.elements = document.getElementsByClassName('slider');
    if (Sliders.elements.length > 0) {
      for (var i = 0; i < Sliders.elements.length; i++) {
        Sliders.flickity(Sliders.elements[i], {
          cellSelector: '.slide',
          imagesLoaded: true,
          lazyLoad: 1,
          cellAlign: 'left',
          setGallerySize: App.isMobile,
          adaptiveHeight: App.isMobile,
          wrapAround: true,
          prevNextButtons: true,
          pageDots: false,
          draggable: App.isMobile ? '>1' : false,
          arrowShape: 'M29.7 77.4l4.8-3.7L10 41.8h90v-6.1H10.1L34.5 4.6 29.7.9 0 38.7z'
        });
      }
      Sliders.accessibility()
    }
  },
  flickity: (element, options) => {
    Sliders.slider = new Flickity(element, options);
    Sliders.flickitys.push(Sliders.slider);
    if (Sliders.slider.slides.length < 1) return; // Stop if no slides
    Sliders.slider.on('change', function() {
      if (this.selectedElement) {
        const caption = this.element.parentNode.querySelector('.caption');
        if (caption)
          caption.innerHTML = this.selectedElement.getAttribute('data-caption');
        const number = this.element.parentNode.querySelector('.slide-number');
        if (number)
          number.innerHTML = (this.selectedIndex + 1) + '/' + this.slides.length;
      }
      const adjCellElems = this.getAdjacentCellElements(1);
      for (let i = 0; i < adjCellElems.length; i++) {
        const adjCellImgs = adjCellElems[i].querySelectorAll('.lazy:not(.lazyloaded):not(.lazyload)')
        for (let j = 0; j < adjCellImgs.length; j++) {
          adjCellImgs[j].classList.add('lazyload')
        }
      }
    });
    Sliders.slider.on('staticClick', function(event, pointer, cellElement, cellIndex) {
      if (!cellElement) {
        return;
      } else {
        this.next();
      }
    });
    if (Sliders.slider.selectedElement) {
      const caption = Sliders.slider.element.querySelector('.caption');
      if (caption)
        caption.innerHTML = Sliders.slider.selectedElement.getAttribute('data-caption');
      const number = Sliders.slider.element.parentNode.querySelector('.slide-number');
      if (number)
        number.innerHTML = (Sliders.slider.selectedIndex + 1) + '/' + Sliders.slider.slides.length;
    }
  },
  accessibility: () => {
    const prevNext = document.getElementsByClassName('flickity-prev-next-button')
    for (var i = 0; i < prevNext.length; i++) {
      const elem = prevNext[i]
      elem.addEventListener('mousemove', event => {
        var svg = elem.querySelector("svg");
        var parentOffset = elem.getBoundingClientRect();
        svg.style.top = event.pageY - parentOffset.top - pageYOffset + "px";
        svg.style.left = event.pageX - parentOffset.left + "px";
      })
    }
  }
}
const Shop = {
  scriptURL: 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js',
  init: () => {
    if (window.ShopifyBuy) {
      if (window.ShopifyBuy.UI) {
        Shop.ShopifyBuyInit();
      } else {
        loadScript();
      }
    } else {
      loadScript();
    }

    function loadScript() {
      var script = document.createElement('script');
      script.async = true;
      script.src = Shop.scriptURL;
      (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
      script.onload = Shop.ShopifyBuyInit;
    }
  },
  ShopifyBuyInit: () => {
    Shop.client = ShopifyBuy.buildClient({
      domain: 'bigwax.myshopify.com',
      apiKey: '31682f9bb9f4efdfdcfd96fb08af4c27',
      appId: '6',
    });
    const items = document.querySelectorAll('[data-shop]')
    items.forEach(el => {
      Shop.createButton(el.dataset.shop)
    })
  },
  createButton: id => {
    const node = document.getElementById('product-component-' + id)
    ShopifyBuy.UI.onReady(Shop.client).then(function(ui) {
      ui.createComponent('product', {
        id: [id],
        node: node,
        moneyFormat: '%E2%82%AC%7B%7Bamount_with_comma_separator%7D%7D',
        options: {
          "product": {
            iframe: false,
            variantId: "all",
            events: {
              afterRender: Scroller.refresh
            },
            text: {
              button: App.pageType == 'artist' ? 'ADD TO CART' : 'BUY'
            },
            "contents": {
              "img": false,
              "title": false,
              "imgWithCarousel": false,
              "variantTitle": false,
              "description": false,
              "buttonWithQuantity": false,
              "quantity": false
            },
            "styles": {
              "product": {
                "@media (min-width: 601px)": {
                  "max-width": "calc(25% - 20px)",
                  "margin-left": "20px",
                  "margin-bottom": "50px"
                }
              },
              "button": {
                "color": "#fff",
                "background": "transparent",
                ":hover": {
                  "color": "#fff",
                  "background": "transparent",
                }
              },
              "price": {
                "color": "#fff",
                "fontSize": "15px",
              }
            }
          },
          "cart": {
            iframe: true,
            "contents": {
              "button": true
            },
            "styles": {
              "background-color": "#000",
              "color": "#fff",
              "footer": {
                "background-color": "#000",
                "color": "#fff"
              },
              "header": {
                "background-color": "#000",
                "color": "#fff"
              },
              "cartScroll": {
                "background-color": "#000",
                "color": "#fff"
              },
              "button": {
                "background-color": "#000",
                "color": "#fff",
                "border": "1px solid rgba(255,255,255,0.3)",
                ":hover": {
                  "background-color": "#000",
                  "color": "#fff",
                  "border": "1px solid rgba(255,255,255,0.3)",
                }
              }
            }
          },
          "lineItem": {
            "styles": {
              "quantity": {
                "filter": "invert(1)"
              }
            }
          },
          "toggle": {
            iframe: false,
            "contents": {
              "title": true,
              "icon": false
            },
            "text": {
              title: "Cart"
            },
            "styles": {
              "background-color": "#ffffff",
              "color": "#000000"
            }
          },
          "modalProduct": {
            "contents": {
              "img": false,
              "imgWithCarousel": true,
              "variantTitle": false,
              "buttonWithQuantity": true,
              "button": false,
              "quantity": false
            },
            "styles": {
              "product": {
                "@media (min-width: 601px)": {
                  "max-width": "100%",
                  "margin-left": "0px",
                  "margin-bottom": "0px"
                }
              }
            }
          },
          "productSet": {
            "styles": {
              "products": {
                "@media (min-width: 601px)": {
                  "margin-left": "-20px"
                }
              }
            }
          }
        }
      });
    });
  }
}
const Players = {
  elements: [],
  init: () => {
    const videoPlayers = document.getElementsByClassName('video-player')
    const options = {
      controls: [''],
      fullscreen: {
        enabled: true,
        fallback: true,
        iosNative: true
      },
      // iconUrl: _root + "/assets/images/player.svg"
    }
    for (var i = 0; i < videoPlayers.length; i++) {
      const videoElement = videoPlayers[i]
      const player = {
        element: videoElement,
        container: videoElement.parentNode
      }
      Players.elements.push(player)
    }
    Players.prepareStream(Players.elements)
    Players.events()
    Players.accessibility()
  },
  events: () => {
    for (var i = 0; i < Players.elements.length; i++) {
      const player = Players.elements[i]
      player.element.addEventListener('playing', e => {
        player.container.classList.add('video-is-playing')
      })
      player.element.addEventListener('pause', e => {
        player.container.classList.remove('video-is-playing')
      })
      player.element.addEventListener('click', e => {
        if (player.element.paused) {

          var playPromise = player.element.play()

          if (playPromise !== undefined) {
            playPromise.then(_ => {
                // Automatic playback started!
                // Show playing UI.
              })
              .catch(error => {
                // Auto-play was prevented
                // Show paused UI.
                player.hls.on(Hls.Events.MANIFEST_PARSED, function() {
                  player.element.play()
                });
              });
          }
          document.body.classList.remove('infos-panel')
        } else {
          player.element.pause()
        }
      })
    }
  },
  prepareStream: (players) => {
    if (players.length === 0) return;
    const attachStream = (player) => {
      if (player.element.dataset.stream && Hls.isSupported()) {
        player.hls = new Hls({
          minAutoBitrate: 1700000
        });
        player.hls.loadSource(player.element.dataset.stream);
        player.hls.attachMedia(player.element);
      }
    };
    for (var i = 0; i < players.length; i++) {
      attachStream(players[i]);
    }
  },
  pauseAll: () => {
    for (var i = 0; i < Players.elements.length; i++) {
      const player = Players.elements[i];
      player.element.pause()
    }
  },
  muteAll: () => {
    for (var i = 0; i < Players.elements.length; i++) {
      const player = Players.elements[i];
      player.container.classList.add('video-is-muted')
      player.element.muted = true
    }
  },
  unmute: player => {
    if (!Players.forceMute && player.muted) {
      Players.muteAll()
      player.container.classList.remove('video-is-muted')
      player.element.muted = false
    }
  },
  mute: player => {
    if (!player.muted) {
      player.container.classList.add('video-is-muted')
      player.element.muted = true
    }
  },
  accessibility: () => {
    for (var i = 0; i < Players.elements.length; i++) {
      const player = Players.elements[i];
      const playPause = player.container.querySelectorAll('[event-target=playpause]')
      const muteBtn = player.container.querySelector('[event-target=mute]')
      const unmuteBtn = player.container.querySelector('[event-target=unmute]')
      const fullscreenBtn = player.container.querySelector('[event-target=fullscreen]')
      const seekbar = player.container.querySelector('.seekbar')
      if (playPause) {
        for (var j = 0; j < playPause.length; j++) {
          playPause[j].addEventListener('click', () => {
            if (player.playing) {
              player.forceStop = true;
            } else {
              player.forceStop = false;
            }
            player.togglePlay()
          })
        }
      }
      if (muteBtn) {
        muteBtn.addEventListener('click', () => {
          Players.forceMute = true
          Players.mute(player)
        })
      }
      if (unmuteBtn) {
        unmuteBtn.addEventListener('click', () => {
          Players.forceMute = false
          Players.unmute(player)
        })
      }
      if (fullscreenBtn) {
        fullscreenBtn.addEventListener('click', () => {
          Players.forceMute = false
          player.fullscreen.enter()
          Players.unmute(player)
        })
      }
      const cursors = player.container.querySelectorAll('.video-cursor')
      player.container.addEventListener('mousemove', event => {
        for (var j = 0; j < cursors.length; j++) {
          const elem = cursors[j]
          const parentOffset = player.container.getBoundingClientRect();
          elem.style.top = event.pageY - parentOffset.top - pageYOffset + "px";
          elem.style.left = event.pageX - parentOffset.left + "px";
        }
      })
      if (seekbar) {
        player.element.addEventListener('timeupdate', () => {
          const percentage = (player.element.currentTime / player.element.duration) * 100;
          seekbar.querySelector('.thumb').style.left = percentage + '%'
        });
        seekbar.addEventListener('mouseenter', () => {
          cursors.forEach(el => {
            el.style.display = 'none'
          })
        })
        seekbar.addEventListener('mouseleave', () => {
          cursors.forEach(el => {
            el.removeAttribute('style')
          })
        })
        seekbar.addEventListener('click', e => {
          let offset = seekbar.getBoundingClientRect()
          let left = (e.pageX - offset.left)
          let totalWidth = seekbar.offsetWidth
          let percentage = (left / totalWidth)
          let vidTime = player.element.duration * percentage
          player.element.currentTime = vidTime
        });
      }
    }
  }
}
const Scroller = {
  elements: [],
  optionsX: {
    scrollX: true,
    mouseWheelScrollsHorizontally: true,
    scrollY: false,
    freeScroll: true,
    mouseWheel: true,
    scrollbars: false,
    tap: 'tapEvent',
    interactiveScrollbars: false,
    preventDefault: true,
    preventDefaultException: {
      tagName: /^(VIDEO|INPUT|TEXTAREA|BUTTON|SELECT|A)$/,
      className: /(^|\s)click-enabled(\s|$)/,
    },
    bounce: false
  },
  optionsY: {
    mouseWheel: true,
    freeScroll: true,
    scrollbars: true,
    fadeScrollbars: true,
    tap: 'tapEvent',
    interactiveScrollbars: true,
    preventDefault: true,
    preventDefaultException: {
      tagName: /^(VIDEO|INPUT|TEXTAREA|BUTTON|SELECT|A)$/,
      className: /(^|\s)click-enabled(\s|$)/,
    },
    bounce: false
  },
  init: function() {
    Scroller.elements = []
    if (!App.isMobile) {
      document.querySelectorAll('[data-scroll=y]').forEach(scroller => {
        const s = new IScroll(scroller, Scroller.optionsY)
        s.direction = "y"
        Scroller.elements.push(s)
      })
      document.querySelectorAll('[data-scroll=x]').forEach(scroller => {
        const s = new IScroll(scroller, Scroller.optionsX)
        s.direction = "x"
        Scroller.elements.push(s)
      })
    } else {
      document.querySelectorAll('[data-scrollmobile=y]').forEach(scroller => {
        const s = new IScroll(scroller, Scroller.optionsY)
        s.direction = "y"
        Scroller.elements.push(s)
      })
      document.querySelectorAll('[data-scrollmobile=x]').forEach(scroller => {
        const s = new IScroll(scroller, Scroller.optionsX)
        s.direction = "x"
        Scroller.elements.push(s)
      })
    }
    Scroller.shop = null
    Scroller.elements.forEach(s => {
      if (s.wrapper.id === 'shop') {
        Scroller.shop = s
      }
      // s.on('scrollEnd', () => {
      //   Players.elements.forEach(v => {
      //     if (isInViewport(v.element)) v.element.play()
      //   })
      // });
    })
      const hash = getUrlParams()
      if (hash.product && App.isMobile) window.location.href = window.location.origin + App.root + hash.product
    if (Scroller.shop) {
      if (hash.product) {
        const elem = document.querySelector('[data-id="' + hash.product + '"] [event-target]')
        if (elem) simulateClick(elem)
      }
    }
    // document.addEventListener('lazybeforeunveil', Scroller.refresh);
  },
  enable: function(direction) {
    if (direction) {
      for (var i = 0; i < Scroller.elements.length; i++) {
        if (Scroller.elements[i].direction === direction) Scroller.elements[i].enable();
      }
    } else {
      for (var i = 0; i < Scroller.elements.length; i++) {
        Scroller.elements[i].enable();
      }
    }
  },
  disable: function(direction) {
    if (direction) {
      for (var i = 0; i < Scroller.elements.length; i++) {
        if (Scroller.elements[i].direction === direction) Scroller.elements[i].disable();
      }
    } else {
      for (var i = 0; i < Scroller.elements.length; i++) {
        Scroller.elements[i].disable();
      }
    }
  },
  refresh: function() {
    for (var i = 0; i < Scroller.elements.length; i++) {
      const elem = Scroller.elements[i]
      setTimeout(function() {
        elem.refresh();
      }, 0);
    }
  }
}
const Audio = {
  init: () => {
    Audio.songs = null
    Audio.player = document.getElementById('player')
    if (Audio.player)
      Audio.songs = JSON.parse(Audio.player.dataset.songs)
    if (Audio.player && Audio.songs) {
      Amplitude.init({
        "bindings": {
          37: 'prev',
          39: 'next',
          32: 'play_pause'
        },
        "songs": Audio.songs,
        "continue_next": false,
        "callbacks": {
          'after_play': function() {
            window.clearTimeout(Audio.stopTm)
            document.body.classList.add('player-playing')
          },
          'after_stop': function() {
            window.clearTimeout(Audio.stopTm)
            if (App.isMobile) {
              Audio.stopTm = setTimeout(function() {
                document.body.classList.remove('player-playing')
              }, 300);
            } else {
              document.body.classList.remove('player-playing')
            }
          }
        }
      });
      // var p = document.getElementById("player");
      // var d = document.getElementById("duration");
      // document.getElementById('progress-container').addEventListener('click', function(e) {
      //   var offset = this.getBoundingClientRect();
      //   var x = e.pageX - offset.left;
      //   Amplitude.setSongPlayedPercentage((parseFloat(x) / parseFloat(this.offsetWidth)) * 100);
      // });
      if (App.isMobile) document.getElementById('page-content').appendChild(Audio.player)
    }
  }
}
const Pjax = {
  titleTransition: 0.7,
  init: function() {
    Barba.Pjax.getTransition = function() {
      return Pjax.hideShowTransition
    };
    Barba.Dispatcher.on('linkClicked', function(el) {
      App.linkClicked = el
    });
    Barba.Pjax.Dom.wrapperId = 'main'
    Barba.Pjax.Dom.containerClass = 'pjax'
    Barba.BaseCache.reset()
    // Barba.Pjax.cacheEnabled = false;
    Barba.Pjax.start()
  },
  hideShowTransition: Barba.BaseTransition.extend({
    start: function() {
      let _this = this
      _this.newContainerLoading.then(_this.startTransition.bind(_this))
    },
    startTransition: function() {
      document.body.classList.add('is-loading')
      document.body.classList.remove('player-playing', 'infos-panel', 'about-panel', 'product-opened')
      Amplitude.pause()
      let _this = this
      const newContent = _this.newContainer.querySelector('#page-content')
      // const currentLink = document.querySelector('a.active')
      // if (currentLink) currentLink.classList.remove('active')
      // if (App.linkClicked) App.linkClicked.classList.add('active')
      App.nextPageType = newContent.getAttribute('page-type')

      document.body.setAttribute('page-type', App.nextPageType)
      _this.endTransition(_this, newContent)

    },
    endTransition: function(_this, newContent) {
      window.scroll(0, 0)
      resizeWindow()
      _this.finish(_this, newContent)
    },
    finish: function(_this, newContent) {
      _this.done()
      App.pageType = App.nextPageType
      App.sizeSet()
      App.interact.init()
      document.body.classList.remove('is-loading')
      if (window.ga) window.ga('send', 'pageview')
    }
  })
}

document.addEventListener("DOMContentLoaded", App.init);