const bellfull = document.querySelector('.bellfull'),
      pLines = new SplitText('.indexlines p', {type: 'lines'}),
      htitle = new SplitText('.htitle', {type: 'chars'}),
      hnotify = new SplitText('.hnotify', {type: 'chars'}),
      grey = '#777',
      magenta = '#df27ab';

let notificationOpen = false;

gsap.set('.hnotify', {
  display: 'block'
})

gsap.set(hnotify.chars, {
  autoAlpha: 0
})

gsap.set('.xline1, .xline2', {
  autoAlpha: 0,
  scaleY: 0,
  transformOrigin: '50% 0%'
})

const initialBell = () => {
  const tl = gsap.timeline({
    defaults: {
      duration: 0.5
    }
  });
  
  tl.add('mousein', '+=1')
  tl.fromTo('.bellgroup', {
    rotation: 0
  }, {
    rotation: 40,
    transformOrigin: '50% 0%',
    ease: 'back.in(1)'
  }, 'mousein')
  tl.to('.bellgroup', {
    duration: 1.25,
    rotation: 0,
    transformOrigin: '50% 0%',
    ease: 'elastic.out(1.75, 0.4)'
  }, 'mousein+=0.5')
  tl.fromTo('.bloop', {
    strokeWidth: 10,
    scale: 0.5,
    opacity: 0
  }, {
    strokeWidth: 0,
    stroke: magenta,
    scale: 3.5,
    opacity: 0.2,
    transformOrigin: '50% 50%',
    ease:'sine'
  }, 'mousein+=0.5')
  
  //circle
  tl.fromTo('#dingle', {
    x: 0
  }, {
    x: 20,
  }, 'mousein+=0.15')
  tl.to('#dingle', {
    duration: 0.25,
    x: -20,
  }, 'mousein+=0.6')
  tl.to('#dingle', {
    x: 0,
    ease: 'back.out(1)'
  }, 'mousein+=0.75')
  tl.fromTo('.bellgroup', {
    duration: 1.5,
    fill: grey
  }, {
    fill: magenta,
    ease: 'elastic'
  }, 'mousein')
  tl.to('.bellgroup', {
    duration: 0.25,
    fill: grey,
    ease: 'sine.in'
  }, 'mousein+=1.25')
  
  return tl
}

bellfull.addEventListener('click', () => {
  if (!notificationOpen) {
    const tl = gsap.timeline({
      defaults: {
        duration: 0.5,
        ease: 'sine'
      }
    });
    
    tl.add('showN')
    tl.to('.homeview1', {
      scale: 0.3,
      transformOrigin: '0% 0%'
    }, 'showN')
    tl.to(pLines.lines, {
      autoAlpha: 0,
      stagger: {
        amount: 0.5
      },
      transformOrigin: '50% 0%'
    }, 'showN')
    tl.to('.homeview1', {
      float: 'left',
      transformOrigin: '0% 0%'
    }, 'showN+=0.5')
    tl.to(htitle.chars, {
      autoAlpha: 0,
      scaleX: 0,
      stagger: {
        amount: 0.3
      },
      transformOrigin: '50% 50%',
      ease: 'sine.in'
    }, 'showN')
    tl.fromTo(hnotify.chars, {
      autoAlpha: 0,
      scaleX: 0,
    }, {
      scaleX: 1,
      autoAlpha: 1,
      stagger: {
        amount: 0.3
      },
      transformOrigin: '50% 50%'
    }, 'showN+=0.4')
    tl.to('.nextto', {
      autoAlpha: 1,
    }, 'showN+=1')
    tl.to('.restlist', {
      autoAlpha: 1
    }, 'showN+=1')
    tl.fromTo('.restlist li', {
      autoAlpha: 0
    }, {
      autoAlpha: 1,
      stagger: {
        amount: 0.1
      }
    }, 'showN+=1')
    
    bellTL.play()
    notificationOpen = true
  } else {
    const tl = gsap.timeline({
      defaults: {
        duration: 0.5,
        ease: 'sine'
      }
    });
    
    tl.add('hideN')
    tl.to('.homeview1', {
      scale: 1,
      transformOrigin: '0% 0%'
    }, 'hideN')
    tl.to(hnotify.chars, {
      autoAlpha: 0,
      scaleX: 0,
      stagger: {
        amount: 0.3
      },
      transformOrigin: '50% 50%',
      ease: 'sine.in'
    }, 'hideN')
    tl.fromTo(htitle.chars, {
      autoAlpha: 0,
      scaleX: 0,
    }, {
      scaleX: 1,
      autoAlpha: 1,
      stagger: {
        amount: 0.3
      },
      transformOrigin: '50% 50%'
    }, 'hideN+=0.4')
    tl.to('.nextto', {
      autoAlpha: 0,
    }, 'hideN')
    tl.fromTo('.restlist li', {
      autoAlpha: 1
    }, {
      autoAlpha: 0,
      stagger: {
        amount: 0.1
      }
    }, 'hideN')
    tl.to('.restlist', {
      autoAlpha: 0,
    }, 'hideN+=0.5')
    tl.to(pLines.lines, {
      autoAlpha: 1,
      stagger: {
        amount: 0.5
      },
      transformOrigin: '50% 0%'
    }, 'hideN+=0.5')

    bellTL.reverse()
    notificationOpen = false
  }
})

let bellTL = gsap.timeline({
paused: true,
  defaults: {
    duration: 0.7,
    ease: 'sine'
  }
});

bellTL.add('bell')
bellTL.to('.rectmask', {
  scaleY: 1.5,
  transformOrigin: '50% 100%',
  ease: 'sine.in'
}, 'bell')
bellTL.to('#bell', {
  scale: 0,
  autoAlpha: 0,
  transformOrigin: '50% 50%',
  ease: 'sine.in'
}, 'bell')
bellTL.to('#dingle', {
  y: -80,
  ease: 'bounce'
}, 'bell+=0.5')
bellTL.to('#dingle', {
  duration: 0.1,
  autoAlpha: 0,
}, 'bell+=1.2')
bellTL.to('.xline1, .xline2', {
  duration: 0.1,
  autoAlpha: 1,
}, 'bell+=1.1')
bellTL.to('.xline1, .xline2', {
  duration: 0.5,
  scaleY: 1,
}, 'bell+=1.1')
bellTL.to('.xline1', {
  duration: 0.3,
  rotation: 45,
  transformOrigin: '50% 50%',
  ease: 'back.out(2)'
}, 'bell+=1.5')
bellTL.to('.xline2', {
  duration: 0.3,
  rotation: -45,
  transformOrigin: '50% 50%',
  ease: 'back.out(2)'
}, 'bell+=1.5')
  

window.onload = () => {
	initialBell()
};