// Record player inspiration by Kofe: https://dribbble.com/shots/2613678-Music-Player
// Playlist: https://soundcloud.com/ryanjohndee/sets/small-multiples
main
  .player
    .record
      .label
        h2 ryan johndee
        h3 small multiples
      .spindle
    .arm-container
      .knob.weight.bottom
      .arm
      .knob.weight.top
        button.play
          .tooltip click on this
    .speaker
      each hole in new Array(8)
        .hole
    .knob.volume.bottom 
      .down
      .up
    .knob.volume.top
footer
 a(href="https://dribbble.com/shots/2613678-Music-Player") Visual inspiration
 a(href="https://soundcloud.com/ryanjohndee/sets/small-multiples") See playlist

@import "compass";
@import url(https://fonts.googleapis.com/css?family=Dosis:400,700);

$color-arm: #ededed;
$color-bg: #f7f7f7;
$color-knob: $color-arm;
$color-player: #f4f3f2;
$color-player-border: #aeaeae;
$color-record: #363636;
$color-record-label: #ff4e5b;
$color-record-label-text: darken($color-record-label, 40%);
$color-speaker: #262626;
$color-spindle: #ededed;

@mixin pos($position: absolute) {
  position: $position;
  top: 0; right: 0; bottom: 0; left: 0;
  margin: auto;
}

@mixin circle {
  &:after {
    content: "";
    display: block;
    padding-bottom: 100%;
  }
}

@mixin bg-lines($c1: darken($color-record-label, 5%), $c2: $color-record-label, $px1: 1px, $px2: 3px, $deg: -45deg) {
  background: repeating-linear-gradient(
    $deg,
    $c1,
    $c1 $px1,
    $c2 $px1,
    $c2 $px2
  );
}

@mixin gradient-knob {
  background:
    linear-gradient(
      to right,
      rgba(242,242,242,1) 0%,
      rgba(254,254,254,1) 100%
    );
}

* {
  box-sizing: border-box;
}

body {
  overflow: hidden;
  background-color: $color-bg;
  padding: 0;
  margin: 0;
  font-family: "Dosis", sans-serif;
}

main {
  @include pos;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  max-width: 950px;
}

.player {
  position: relative;
  width: 60%;
  background-color: $color-player;
  @include bg-lines(darken($color-player, 5%), $color-player, 1px, 10%, 90deg);
  border: 1px solid $color-player-border;
  border-radius: 25%;
  box-shadow: 
    inset rgba(white, 1) 0 0 2px 1px,
    inset rgba(black, 0.06) 0 0 48px,
    rgba(black, 0.2) 0 15px 30px -10px;
  @include circle;
  &:before {
    content: "";
    @include pos;
    width: 100%;
    height: 100%;
    @include bg-lines(darken($color-player, 2%), transparent, 1px, 4px, -45deg);
    border-radius: 25%;
  }
}

.record {
  @include pos;
  width: 70%;
  height: 70%;
  background-color: $color-record;
  background: 
      linear-gradient(
        to right,
        rgba(54,54,54,1) 0%,
        rgba(102,102,102,1) 40%,
        rgba(97,97,97,1) 60%,
        rgba(31,30,31,1) 100%
      );
  border-radius: 100%;
  box-shadow: 
    inset darken($color-record, 20%) 0 0 0 1px,
    inset rgba(white, 0.3) 0 0 0 2px;
  transform: rotate(0) translateZ(0);
  &:before, &:after {
    content: "";
    @include pos;
    background: 
      linear-gradient(
        to right,
        rgba(54,54,54,1) 0%,
        rgba(102,102,102,1) 41%,
        rgba(97,97,97,1) 61%,
        rgba(31,30,31,1) 100%
      );
    border-radius: 100%;
  }
  &:before {
    width: 88%;
    height: 88%;
    background-color: lighten($color-record, 10%);
    box-shadow: 
      inset darken($color-record, 10%) 0 0 0 1px,
      inset rgba(white, 0.4) 0 0 0 2px,
      inset darken($color-record, 5%) 0 0 0 3px;
  }
  &:after {
    width: 48%;
    height: 48%;
    background-color: $color-record;
    box-shadow: 
      inset rgba(black, 0.2) 0 0 0 1px,
      rgba(black, 0.1) 0 0 2px 3px;
    transform: rotate(5deg);
  }
}

.record .label {
  @include pos;
  width: 36%;
  height: 36%;
  padding: 4.5% 6%;
  background-color: $color-record-label;
  @include bg-lines;
  text-align: center;
  border-radius: 100%;
  z-index: 2;
  &:before, &:after {
    content: "";
    @include pos;
    border-radius: 100%;
    z-index: -1;
  }
  &:before {
    width: 35%;
    height: 35%;
    background-color: darken($color-record-label, 6%);
  }
  &:after {
    width: 30%;
    height: 30%;
    @include bg-lines;
  }
  h2 {
    font-weight: bold;
  }
  h2, h3 {
    color: $color-record-label-text;
    z-index: 4;
  }
  p {
    position: absolute;
    top: 50%; right: 10%; bottom: 0;
    margin: auto;
  }
}

.spindle {
  @include pos;
  width: 25%;
  height: 25%;
  background-color: black;
  border-radius: 100%;
  box-shadow: 
    rgba(black, 0.1) 0 0 12px 2px;
  transform: scale(0.2);
  z-index: 3;
  &:before {
    content: "";
    @include pos;
    width: 70%;
    height: 70%;
    background-color: $color-spindle;
    background: linear-gradient(
      left,
      rgba(226,226,226,1) 0%,
      rgba(209,209,209,1) 51%,
      rgba(219,219,219,1) 51%,
      rgba(254,254,254,1) 100%
    );
    border-radius: 100%;
    z-index: 4;
  }
}

.arm-container {
  position: absolute;
  width: 30%;
  height: 5%;
  top: 15%;
  right: 19%;
  transform-origin: 94.2%;
  transform: rotate(-120deg);
}

.arm {
  position: absolute;
  top: 0;
  right: -25%;
  width: 100%;
  height: 100%;
  background-color: $color-arm;
  @include gradient-knob;
  border: 1px solid darken($color-arm, 4%);
  border-radius: 12px;
  box-shadow:
    inset white 0 -1px 2px,
    inset rgba(black, 0.1) -2px -4px 12px,
    rgba(black, 0.06) -4px 4px 6px;
  z-index: 2;
}

.knob {
  position: absolute;
  background-color: $color-knob;
  border-radius: 100%;
  @include circle;
  transform: translateZ(0);
  z-index: 2;
  &.bottom {
    background-color: darken($color-knob, 6%);
    border: 1px solid darken($color-knob, 8%);
    border-radius: 100%;
  }
  &.top {
    @include gradient-knob;
    border: 1px solid darken($color-knob, 4%);
    box-shadow:
      inset white 0 -1px 2px,
      inset rgba(black, 0.06) -6px -6px 18px,
      rgba(black, 0.06) -4px 4px 6px,
      rgba(black, 0.15) 2px 2px 6px;
  }
}

.weight {
  &.bottom {
    top: -61%;
    right: -13.5%;
    width: 38%;
  }
  &.top {
    width: 30%;
    top: -40%;
    right: -9.5%;
    &:before {
      content: "";
      position: absolute;
      top: 35%;
      right: 245%;
      width: 25%;
      height: 25%;
      background-color: lighten($color-record-label, 5%);
      border: 1px solid darken($color-record-label, 2%);
      border-radius: 100%;
      box-shadow: inset rgba(white, 0.6) 2px 2px 4px;
      transform: translateZ(0);
      z-index: 4;
    }
  }
}

button.play {
  @include pos;
  width: 100%;
  height: 100%;
  background-color: transparent;
  border: none;
  border-radius: 100%;
  font-family: "Dosis", sans-serif;
  cursor: pointer;
  outline: none;
  transform: rotate(120deg);
}

.tooltip {
  position: absolute;
  bottom: 150%; left: 50%;
  margin-left: -60px;
  padding: 8px 20px;
  width: 120px;
  color: $color-player;
  background: $color-record;
  text-transform: uppercase;
  text-align: center;
  border-radius: 2px;
  opacity: 0;
  transform: translateY(-60%);
  z-index: 1;
  &:after {
    content: "";
    @include pos;
    top: 100%;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 12px 0 12px;
    border-color: $color-record transparent transparent transparent;
  }
}

.volume {
  &.bottom {
    bottom: 13.5%;
    left: 14%;
    width: 11%;
    transform: translateZ(0);
    div {
      position: absolute;
      width: 20%;
      height: 5%;
      background-color: darken($color-knob, 10%);
      transform: translateZ(0);
      &:first-child {
        bottom: 110%;
        right: 80%;
      }
      &:last-child {
        top: 85%;
        left: 105%;
        &:after {
          content: "";
          @include pos;
          width: 100%;
          height: 100%;
          background-color: inherit;
          transform: rotate(90deg);
        }
      }
    }
  }
  &.top {
    bottom: 14.8%;
    left: 15.3%;
    width: 8.5%;
    &:before {
      content: "";
      @include pos;
      bottom: 55%;
      width: 5%;
      height: 25%;
      background-color: darken($color-knob, 10%);
      border-radius: 24px;
    }
  }
}

.speaker {
  position: absolute;
  right: 5%;
  bottom: 4%;
  width: 20%;
  @include circle;
  transform: scale(0.4);
  .hole {
    margin-right: 12%;
    margin-bottom: 12%;
    width: 13%;
    @include circle;
    float: left;
    background-color: $color-speaker;
    border-radius: 100%;
  }
}

footer {
  position: fixed;
  right: 0; bottom: 0;
  padding: 12px;
  font-size: 11px;
  a {
    display: inline-block;
    margin-right: 12px;
  }
}

// Animations
.tooltip {
  animation: tooltip .4s .5s ease-out forwards;
}

.record {
  .is-playing & {
    animation: spin-on 4s .51s linear infinite;
  }
  .is-stopped & {
    animation: spin-off 1s ease-out forwards; 
  }
}

.arm-container {
  .is-stopped & {
    animation: arm-off .51s ease-out forwards; 
  }
  .is-playing & {
    animation:
      arm-on .5s .01s ease-out forwards,
      arm-playing 3s .51s linear infinite;
  }
}

@keyframes tooltip {
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes spin-on {
  to {
    transform: rotate(360deg) translateZ(0);
  }
}

@keyframes spin-off {
  to {
    transform: rotate(360deg) translateZ(0);
  }
}

@keyframes arm-playing {
  0% {
    transform: rotate(-45deg);
  }
  50% {
    transform: rotate(-47deg);
  }
  100% {
    transform: rotate(-45deg);
  }
}

@keyframes arm-off {
  0% {
    transform: rotate(-45deg);
  }
  100% {
    transform: rotate(-120deg);
  }
}

@keyframes arm-on {
  100% {
    transform: rotate(-45deg);
  }
}

var turntable = $('.player');
var tooltip = $('.tooltip');
var playBtn = $('button.play');

// Get hooked up
SC.initialize({
  client_id: 'c92343835f607734d719d94afcb679d7'
});

// Get SoundCloud playlist
SC.get('/playlists/200584993').then(function(playlist) {

  // Setup array of tracks
  var tracks = [];
  // Loop through playlist for track IDs and add to array
  playlist.tracks.forEach(function(track) {
    tracks.push(track.id);
  });

  // Randomly set a song to play on page load
  var track_id = tracks[Math.floor(Math.random()*tracks.length)];

  // Stream randomly selected song
  SC.stream('/tracks/' + track_id).then(function(player) {

    playBtn.on('click', function() {
      // Bye bye tooltip, we get it
      tooltip.remove();
      // Check classes and update
      // Play or pause track
      if(!turntable.hasClass('is-playing')) {
        turntable
          .removeClass('is-stopped')
          .addClass('is-playing');
        setTimeout(function() {
          player.play();
        }, 500);
      } else {
        turntable
          .removeClass('is-playing')
          .addClass('is-stopped');
        player.pause();
      }
      
    });

  });

});

// For flexible label text
$("h2, h3").fitText();