.title
  span Day 9. Calendar

.calendar
  - var index = 0, className = '', block = 0;
  each val in [ '', 'jan', 'feb', 'mar', 'apr', 'may', 'june', '', 'july', 'aug', 'sep', 'oct', 'nov', 'dec', '' ]
    - if (val != '') { className = 'calendar__month--' + index; index=index+1; } else { block++; className = "calendar__empty--" + block; }
    div(class='calendar__month ' + className)
      span.title= val
      if val != ''
        .calendar__days
          - for (var x = 0; x < 42; x++)
          span(class='calendar__day calendar__day__' + x) #{x}
          - end
      else
        .year-block.hidden 2017
        .clock.hidden
          .clock__hour__container
            .clock__hour
          .clock__minute__container
            .clock__minute
          .clock__second__container
            .clock__second
          .clock__dot
        .date-block.hidden
          .date-block__month Jan
          .date-block__date 12
          .date-block__day Wed
        
  

@import url('https://fonts.googleapis.com/css?family=Pacifico');
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700');

@mixin size($width, $height) {
  width: $width;
  height: $height;
}

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

@mixin centered() {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

$red: #CA3644;
$yellow: #EBC85B;
$blue: #1AA1AF;
$orange: #E86948;

*, 
*::before, 
*::after {
  box-sizing: border-box;
}

*::before, 
*::after {
  content: '';
  display: block;
  position: absolute;
}

body {
  background-color: #F3F4F5;
  background-image: radial-gradient(#F3F4F5 0, darken(#F3F4F5, 10%) 100%);
  min-height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
  font-family: 'Pacifico', cursive;
}

.title {  
  padding: 10px 20px;
  
  span {
    font-size: 20px;
    font-weight: bold;
    color: rgba(0,0,0,0.5);
  }
}

.hidden {
  display: none;
}

.half-transparent {
  color: rgba(#fff, 0.3);
}

.bold {
  font-weight: bold;
}

.year-block {
  font-size: 5vmin;
  font-weight: bold;
  @include centered;
}

.date-block {
  &__month {
    font-size: 3vmin;
    font-weight: bold;
  }
  &__date {
    font-size: 6vmin;
    font-weight: bold;
  }
  &__day {
    font-size: 3vmin;
    color: rgba(#fff, 0.5);
  }
  @include centered;
}

.calendar {
  @include size(100vmin, 60vmin);
  @include centered;
  background: $red;
  display: flex;
  flex-wrap: wrap;
  box-shadow: -1vmin 1vmin 2vmin rgba(#000, 0.5);
  
  &__days {
    display: flex;
    flex-wrap: wrap;
    margin-top: 1vmin;
  }
  
  &__day {
    font-size: 1.4vmin;
    display: inline-block;
    @include size(percentage(1/7), 2vmin);
  }
  
  &__month {
    font-family: 'Open Sans Condensed', sans-serif;
    @include size(20%, 33.33333%);
    display: block;
    color: rgba(#fff, 0.8);
    text-transform: uppercase;
    text-align: center;
    padding: 2vmin;
    position: relative;
    
    .title {
      font-weight: bold;
      font-size: 2vmin;
    }
    
    &:nth-child(4n+1) {
      background: $blue;
    }
    &:nth-child(4n+2) {
      background: $orange;
    }
    &:nth-child(4n+3) {
      background: $yellow;
    }
    &:nth-child(4n+4) {
      background: $red;
    }
  }
}

.clock {
  @include centered;
  @include size(90%, 90%);
  border-radius: 100%;
  &__container {
    @include size(100%, 100%);
    @include position();
  }
  
  &__dot {
    @include size(5%, 5%);
    @include centered;
    background: white;
  }
  
  &__hour {
    &__container {
      @include size(100%, 100%);
      @include position();
    }
    @include size(100%, 100%);
    @include position();
    animation: rotate 43200s infinite linear;
    &::before {
      width: 3%;
      height: 30%;
      top: 20%;
      left: 50%;
      transform: translatex(-50%);
      background: white;
    }
  }
  &__minute {
    &__container {
      @include size(100%, 100%);
      @include position();
    }
    @include size(100%, 100%);
    @include position();
    animation: rotate 3600s infinite linear;
    &::before {
      width: 2%;
      height: 40%;
      top: 10%;
      left: 50%;
      transform: translatex(-50%);
      background: white;
    }
  }
  &__second {
    &__container {
      @include size(100%, 100%);
      @include position();
    }
    @include size(100%, 100%);
    @include position();
    animation: rotate 60s infinite steps(60);
    &::before {
      width: 1%;
      height: 45%;
      top: 5%;
      left: 50%;
      transform: translatex(-50%);
      background: white;
    }
  }
}

@keyframes rotate {
  100% {
    transform: rotateZ(360deg);
  }
}

$(() => {
  const currentDate = new Date();
  const weekDays = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'];
  const months = ['jan', 'feb', 'mar', 'apr', 'may', 'june', 'july', 'aug', 'sep', 'oct', 'nov', 'dec'];
  
  $('.date-block__day').text(weekDays[currentDate.getDay()]);
  $('.date-block__date').text(currentDate.getDate());
  $('.date-block__month').text(months[currentDate.getMonth()]);
  $('.year-block').text(currentDate.getFullYear());
  
  $('.calendar__empty--1 .date-block').removeClass('hidden');
  $('.calendar__empty--2 .clock').removeClass('hidden');
  $('.calendar__empty--3 .year-block').removeClass('hidden');
  
  for (let i=0; i<12; i++) {
    const year = currentDate.getYear(),
          month = i,
          daysCount = daysInMonth(month + 1, year),
          prevMonthDaysCount = daysInMonth(month, year),
          firstDay = new Date(year, month, 1),
          firstDayOfWeek = (firstDay.getDay() + 1);
    let j;
    for (j=0; j<firstDayOfWeek; j++) {
      let $e = $('.calendar__month--' + i +' .calendar__day__' + j);
      $e.text(prevMonthDaysCount - firstDayOfWeek + j + 1);
      $e.addClass('half-transparent');
      addBold($e, j);
    }
    for (;j<42 && j<firstDayOfWeek+daysCount;j++) {
      let $e = $('.calendar__month--' + i +' .calendar__day__' + j);
      $e.text(j - firstDayOfWeek + 1);
      addBold($e, j);
    }
    for (let k=0;j<42;k++,j++) {
      let $e = $('.calendar__month--' + i +' .calendar__day__' + j);
      $e.text(k + 1);
      $e.addClass('half-transparent');
      addBold($e, j);
    }
  }
  
  initLocalClocks();
});

const daysInMonth = (m, y) => /8|3|5|10/.test(--m)?30:m==1?(!(y%4)&&y%100)||!(y%400)?29:28:31;

const addBold = ($e, i) => {
  if (i % 7 == 5 || i % 7 == 6) {
    $e.addClass('bold');
  }
}

function initLocalClocks() {
  const date = new Date();
  const seconds = date.getSeconds();
  const minutes = date.getMinutes();
  const hours = date.getHours();

  const hands = [
    {
      hand: 'clock__hour__container',
      angle: (hours * 30) + (minutes / 2)
    },
    {
      hand: 'clock__minute__container',
      angle: (minutes * 6) + (seconds / 10)
    },
    {
      hand: 'clock__second__container',
      angle: (seconds * 6)
    }
  ];
  hands.forEach((hand) => {
    const elements = document.querySelectorAll('.' + hand.hand);
    Array.from(elements).forEach((element) => {
      element.style.transform = `rotateZ(${ hand.angle }deg)`;
    });
  });
}