<div id="cursor" class="visible"></div>

<div id="numbers">
  <div id="numbers_wrap"></div>
</div>

<div id="label"></div>

<nav class="open">
  <li label="Home" active></li>
  <li label="About me"></li>
  <li label="Gallery"></li>
  <li label="Documents"></li>
  <li label="Hire me"></li>
</nav>

<div id="labels">
  <div id="labels_wrap"></div>
</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Oswald", sans-serif;
}

:root{
  --list-item-height: 40px;
}

@mixin flexbox {
  display: flex;
  justify-content: center;
  align-items: center;
}

body {
  min-height: 100vh;
  cursor:none;
  overflow:hidden;
}

#cursor {
  position: absolute;
  background: transparent;
  border: 2px solid black;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  transform:scale(0);
  transition:transform .3s ease;
  
  &.visible{
    transform:scale(1);
  }
}

#numbers{
  position: absolute;
  height: var(--list-item-height);
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  margin-left:2em;
  transition:clip-path .3s ease;
  
  &.visible{
    clip-path: polygon(-150% 0, 100% 0, 100% 100%, -150% 100%);
  }

  &:before {
    content: "0";
    position: absolute;
    left: -20px;
    font-size: 2em;
    font-weight:600;
    line-height: 1;
    height: var(--list-item-height);
    @include flexbox;
  }

  &_wrap {
    overflow:hidden;
    height: var(--list-item-height);
    
    span {
      position:relative;
      @include flexbox;
      height: var(--list-item-height);
      font-size: 2em;
      font-weight:600;
      line-height: 1;
      transition:.3s ease;
    }
  }
}

nav {
  padding-top:20px;
  display:inline-block;
  position:absolute;
  transform:translateY(-50%);
  top:50%;
  left:50px;
  min-width:5px;
  
  li {
    //@include flexbox;
    align-items:flex-start;
    height: var(--list-item-height);
    position: relative;
    transition:all .2s ease;
    font-size:1em;
    list-style-type:none;

    &:before {
      content: "";
      position: absolute;
      width: 5px;
      height: 5px;
      border-radius:50%;
      background: black;
    }
    
    &[active]{
      &:before{
        left:-3px;
        border:2px solid #fff;
        outline:1px solid #000;
      }
    }
  }
}

#labels{
  position:absolute;
  top:50%;
  left:15px;
  transform:translateY(-50%);
  height:100px;
  margin-top:-10px;
  overflow:hidden;
  
  &_wrap{
    overflow:hidden;
    display:inline-block;
    
    span{
      height:100px;
      text-align:center;
      display:block;
      font-weight:400;
      line-height:1;
      writing-mode:vertical-lr;
      transition:.3s ease;
    }
  }
}

// position of each bullet point
var listNodePos = {};

// height of nodes
const listItemHeight = parseInt(getComputedStyle(document.body).getPropertyValue(
  "--list-item-height"
), 10);

$("nav li").each(function() {
  var i = $(this).index() + 1;
  var label = $(this).attr('label');

  listNodePos[i] = $(this).offset().top;

  // add number for each list element
  $("#numbers_wrap").append("<span>" + i + "</span>");
  
  // add labels for each label
  $("#labels_wrap").append("<span>" + label + "</span>");
});

const cursor = $("#cursor");
const numbers = $("#numbers");

var listPos = {
  x: $("nav").offset().left,
  y: $("nav").offset().top
};

$(window).resize(function(){
  listPos = {
    x: $("nav").offset().left,
    y: $("nav").offset().top
  };
});

$(document).mousemove(function(e) {
  // update cursor position object
  var cursorPos = {
    x: e.pageX,
    y: e.pageY
  };

  // make cursor follow
  cursor.css({
    top: cursorPos.y - $("#cursor").height() / 2 + "px",
    left: cursorPos.x - $("#cursor").width() / 2 + "px"
  });

  // when leaving defined bounding box of nav
  if (
    cursorPos.y < listPos.y ||
    cursorPos.y > listPos.y + $("nav").height() ||
    cursorPos.x > listPos.x + 60 ||
    cursorPos.x < listPos.x
  ) {
    // show cursor
    numbers.removeClass("visible");
    cursor.addClass("visible");

    // reset bullet transforms
    $("nav li").css("transform", "");
    
    $("#labels_wrap span").css('transform', '');
    
  } else { 
    // when entering defined bounding box

    // show numbers
    numbers.addClass("visible");
    cursor.removeClass("visible");
    
    for (var node in listNodePos) {
      // find closest bullet point
      if (
        cursorPos.y < listNodePos[node] + listItemHeight / 2 &&
        cursorPos.y > listNodePos[node] - listItemHeight / 2
      ){
        var offset = listNodePos[node] - listNodePos[1];
        
        // "scroll" to right number
        $("#numbers_wrap span").css({
          transform: "translateY(" + offset * -1 + "px)"
        });
        
        $("#labels_wrap span").css({
          transform: "translateY(" + offset * -2.5 + "px)"
        });
        
        // position bullet should have when close
        var txBullet = {
          x: cursorPos.x - listPos.x - 20,
          y: cursorPos.y - listNodePos[node]
        };
        
        // transform bullet point
        $("nav li")
          .eq(node - 1)
          .css({
            transform: "translate(" + txBullet.x + "px, " + txBullet.y + "px)"
          });
        
      } else {
        
        // remove transform styles
        $("nav li")
          .eq(node - 1)
          .css("transform", "");
      }
    }

    numbers.css({
      top: cursorPos.y - listItemHeight / 2 + "px",
      left: cursorPos.x - listItemHeight / 2 + "px"
    });
  }
});