console.clear();

let h = window.innerHeight
let w = window.innerWidth
    //
    // Pin Works
    //-------------------------------------------------

let $header = $('header.header')
let $footer = $('footer.footer')
let $trgSticky = document.querySelectorAll('.trg-sticky')
let stickies = []
$trgSticky.forEach(function(item){
	stickies.push(item)
})



  function pinned(scrolled){

		
		
		
	//? - =========================  FAKE STICKY  ========================= -//
	//? - =========================  FAKE STICKY  ========================= -//
	$trgSticky.forEach(function(item, index){
		let itemPosition = item.getBoundingClientRect().top
		let itemBottom = item.getBoundingClientRect().bottom
		let fakeOffset = ((scrolled * -1) - (itemPosition - window.innerHeight)) * - 1
		if(itemPosition <  (window.innerHeight * 1.1) && itemBottom > 0) {
				let percentageDuration = (scrolled - fakeOffset) / ((fakeOffset + (window.innerHeight * 1.5)) - fakeOffset)
				gsap.set($('.sticked').eq(index), { yPercent:  (150 * percentageDuration)})
		}
	})
		
		
		
    //______________ HEADER
		if(scrolled < h) {
			let percentHeader = scrolled / h
      gsap.set($header, { yPercent:  (40* percentHeader)})
      gsap.set($header.find('img'), { scale: 1 + ((1.03 * percentHeader) / 3)})
		}
		
		
		
    
    //______________ FOOTER PARALLAX
    let sizeDocument =  $('[data-scroll-content]').height()
    //console.log(sizeDocument - (h * 2))
		
    if(scrolled > sizeDocument - (h * 2)) {
      let percentageFromTop =  ((sizeDocument - h) - scrolled) / h
      gsap.set($footer, { y: - (h * percentageFromTop)})
      gsap.set($footer, { yPercent:  (30 * percentageFromTop)})
    }

    
} //close pinned

        
        
        

function smoothScroll() {
  if($(window).width() > 80) {
  
    const math = {
        lerp: (a, b, n) => {
            return (1 - n) * a + n * b
        },
        norm: (value, min, max) => {
              return (value - min) / (max - min)
        }
      
    }
    
    const config = {
      height: window.innerHeight,
      width: window.innerWidth
    }
    
    class Smooth {
      constructor() {
        this.bindMethods()
    
        this.data = {
          ease: 0.085,
          current: 0,
          last: 0
        }
    
        this.dom = {
          el: document.querySelector('[data-scroll]'),
          content: document.querySelector('[data-scroll-content]')
        }
    
        this.rAF = null
    
        this.init()
      }
    
      bindMethods() {
        ['scroll', 'run', 'resize']
        .forEach((fn) => this[fn] = this[fn].bind(this))
      }
    
      setStyles() {
        this.dom.el.style.position = 'fixed';
        this.dom.el.style.top = 0;
        this.dom.el.style.left = 0;
        this.dom.el.style.height = '100%'
        this.dom.el.style.width = '100%'
        this.dom.el.style.overflow = 'hidden'   
      }
    
      setHeight() {
        document.body.style.height = `${this.dom.content.offsetHeight}px`
      }
    
      resize() {
        this.setHeight()
        this.scroll()
      }
    
    
    
      scroll() {
        this.data.current = window.scrollY
      }
    
      run() {
        this.data.last = math.lerp(this.data.last, this.data.current, this.data.ease)
        this.data.last = Math.floor(this.data.last * 100) / 100
        
        const diff = this.data.current - this.data.last
        const acc = diff / config.width
        const velo =+ acc
        
          //console.log(velo)
        this.dom.content.style.transform = `translate3d(0, -${this.data.last.toFixed(0)}px, 0) `
        
        
        //call pinned
        pinned(this.data.last)
        
        this.requestAnimationFrame()
      }
        
    
      on(requestAnimationFrame = true) { 
        this.setStyles()
        this.setHeight()
        this.addEvents()
    
        requestAnimationFrame && this.requestAnimationFrame()
      }
    
      off(cancelAnimationFrame = true) {
        cancelAnimationFrame && this.cancelAnimationFrame()
    
        this.removeEvents()
      }
    
      requestAnimationFrame() {
        this.rAF = requestAnimationFrame(this.run)
      }
    
      cancelAnimationFrame() {
        cancelAnimationFrame(this.rAF)
      }
    
      destroy() {
        document.body.style.height = ''
    
        this.data = null
    
        this.removeEvents()
        this.cancelAnimationFrame()
      }
    
      resize() {
        this.setHeight()
      }
    
      addEvents() {
        window.addEventListener('resize', this.resize, { passive: true })
        window.addEventListener('scroll', this.scroll, { passive: true })
      }
    
      removeEvents() {
        window.removeEventListener('resize', this.resize, { passive: true })
        window.removeEventListener('scroll', this.scroll, { passive: true })
      }
    
      init() {
        this.on()
      }
    }
    const smooth = new Smooth()
  }
}//close menu


smoothScroll()