.share
  .share-content
    button.share-toggle-button
      i.share-icon.fa.fa-share-alt
    ul.share-items
      li.share-item
        a.share-button(href="#")
          i.share-icon.fa.fa-facebook
      li.share-item
        a.share-button(href="#")
          i.share-icon.fa.fa-twitter
      li.share-item
        a.share-button(href="#")
          i.share-icon.fa.fa-pinterest
      li.share-item
        a.share-button(href="#")
          i.share-icon.fa.fa-linkedin

.share
  width 600px
  height 200px
  position absolute
  top 50%
  left 50%
  transform translate(-50%, -50%)
  
  &-content
    max-width 600px
    height 200px
    position relative

  &-button,
  &-toggle-button
    position absolute
    display inline-block
    left 50%
    top 50%
    border-radius 50%
    width 80px
    height 80px
    line-height 80px
    margin-left -40px
    margin-top -40px
    background #7C4DFF
    text-align center
    color #e6e3e3
    border 0 0
    outline 0
    border none
    
    &:hover
      color #fff
      cursor pointer

  &-button
    font-size 30px
    background #7C4DFF
    -webkit-transform scale(0.95, 0.95)
    transform scale(0.95, 0.95)
    color #222

  &-toggle-button
    z-index 100
    background #7C4DFF
    font-size 20px
    
  &-items
    display inline-block
    list-style-type none
    padding 0
    margin 0
    
a.share-button
  color #e6e3e3
  
  &:hover,
  &:focus
    color #fff
    cursor pointer

let $shareButtons = $(".share-button"),
  $toggleButton = $(".share-toggle-button"),
  menuOpen = false,
  buttonsNum = $shareButtons.length,
  buttonsMid = (buttonsNum / 2),
  spacing = 75;

function openShareMenu() {
  TweenMax.to($toggleButton, 0.1, {
    scaleX: 1.2,
    scaleY: 0.6,
    ease: Quad.easeOut,
    onComplete: function () {
      TweenMax.to($toggleButton, .8, {
        scale: 0.6,
        ease: Elastic.easeOut,
        easeParams: [1.1, 0.6]
      })
      TweenMax.to($toggleButton.children(".share-icon"), .8, {
        scale: 1.4,
        ease: Elastic.easeOut,
        easeParams: [1.1, 0.6]
      })
    }
  })
  $shareButtons.each(function (i) {
    var $cur = $(this);
    var pos = i - buttonsMid;
    if (pos >= 0) pos += 1;
    var dist = Math.abs(pos);
    $cur.css({
      zIndex: buttonsMid - dist
    });
    TweenMax.to($cur, 1.1 * (dist), {
      x: pos * spacing,
      scaleY: 0.6,
      scaleX: 1.1,
      ease: Elastic.easeOut,
      easeParams: [1.01, 0.5]
    });
    TweenMax.to($cur, .8, {
      delay: (0.2 * (dist)) - 0.1,
      scale: 0.6,
      ease: Elastic.easeOut,
      easeParams: [1.1, 0.6]
    })
    TweenMax.fromTo($cur.children(".share-icon"), 0.2, {
      scale: 0
    }, {
      delay: (0.2 * dist) - 0.1,
      scale: 1,
      ease: Quad.easeInOut
    })
  })
}

function closeShareMenu() {
  TweenMax.to([$toggleButton, $toggleButton.children(".share-icon")], 1.4, {
    delay: 0.1,
    scale: 1,
    ease: Elastic.easeOut,
    easeParams: [1.1, 0.3]
  });
  $shareButtons.each(function (i) {
    var $cur = $(this);
    var pos = i - buttonsMid;
    if (pos >= 0) pos += 1;
    var dist = Math.abs(pos);
    $cur.css({
      zIndex: dist
    });
    TweenMax.to($cur, 0.4 + ((buttonsMid - dist) * 0.1), {
      x: 0,
      scale: .95,
      ease: Quad.easeInOut,
    });
    TweenMax.to($cur.children(".share-icon"), 0.2, {
      scale: 0,
      ease: Quad.easeIn
    });
  })
}

function toggleShareMenu() {
  menuOpen = !menuOpen
  menuOpen ? openShareMenu() : closeShareMenu();
}

$toggleButton.on("mousedown", function () {
  toggleShareMenu();
})