- var dotw = ["Mon", "Tues", "Wed", "Thu", "Fri", 'Sat', "Sun"]
#calendar
  #current_day
    p="Monday 6.12.17"
    p
      strong="Calendar"
  #week-container
    #week            
      - for (var i = 0; i < dotw.length; i++) {
        input(type="radio", id= "day-" + i, name="day")
        label(for= "day-" + i)
          p
            span.dotw=dotw[i]
            span.date='0'+(i+1)
          div
            div.images
              img(src="https://guidetoiceland.is/image/229305/x/0/top-10-worst-things-about-iceland-1.jpg")
              img(src="https://guidetoiceland.is/image/229305/x/0/top-10-worst-things-about-iceland-1.jpg")
              img(src="https://guidetoiceland.is/image/229305/x/0/top-10-worst-things-about-iceland-1.jpg")
            ol
              li="test"
              li=dotw[i]
      - }

@import url('https://fonts.googleapis.com/css?family=Roboto:100,700');
:root {
  --margin-left: 0px;
}
* {
  outline: 0;
  box-sizing: border-box;
}
html, body {
  margin: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(to right, #C4D8D5, #D3D1C5);
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 100;
  overflow: hidden;
}
#calendar {
  width: 30vw;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  transition: 1s;
  transform-origin: center center;
  #current_day {
    background: rgba(white, 0.4);
    padding: 0.4rem 1.5rem;
    text-transform: uppercase;
    font-size: 1.6rem;
    line-height: 2.2rem;
    transition: 0.5s;
    transform-origin: center center;
    p {
      margin: 0;
    }
  }
  #week-container {
    -webkit-mask-image: linear-gradient(to left, transparent 0%, white 35%, white 65%, transparent 100%);
  }
  #week {
    transition: 0.5s;
    padding: 1rem 1.5rem 0;
    display: grid;
    grid-template-columns: repeat(7, 150px);
    grid-gap: 0px;
    grid-auto-rows: minmax(100px, auto);
    margin-left: var(--margin-left);
    font-size: 0.9rem;
    input {
      display: none;
      + label {
        position: relative;
        &:hover {
          cursor: pointer;
        }
        p {
          transition: 0.5s;
          text-transform: uppercase;
          border-bottom: 1px solid black;
          padding: 0 3rem 0 0;
          .date {
            float: right;
            font-weight: bold;
          }
        }
        .images {
          width: 52px;
          height: 36px;
          float: left;
          position: relative;
          transition: 0.5s;
          img {
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            transition: 1s;
            border: 2px solid white;
            &:first-child {
              z-index: 3;
            }
            &:nth-child(2) {
              z-index: 2;
            }
            &:last-child {
              z-index: 1;
            }
          }
        }
        ol {
          transition: transform 0.5s;
          margin: 0 0 0 25px;
          padding: 0;
          position: relative;
          float: left;
        }
      }
    }
  }
  &.active {
    transition: 1s;
    width: 45vw;
    transform: perspective( 600px ) rotateY( -10deg ) rotateX(2deg) translateX(-70%) translateY(-55%);
    transform-origin: center center;
    #current_day {
      transition: 1s;
      font-size: 2.7rem;
      line-height: 3.4rem;
    }
    label {
      transform-style: preserve-3d;
      p, div {
        transition: 1s;
        font-size: 1.3rem;
      }
    }
    input:checked + label {
      padding-bottom: 2rem;
      .images {
        transition: 0.5s;
        transform: perspective( 600px ) translate3d(0, 0, 100px);
        margin-right: 10px;
        img {
          transition: 1s;
          &:first-child {
            transform: perspective( 600px ) translate3d(-28px, 0px, 160px);
          }
          &:nth-child(2) {
            transform: perspective( 600px ) translate3d(-14px, 0px, 70px);
          }
        }
      }
    }
    #week {
      transition: 0.5s;
      grid-template-columns: repeat(7, 200px);
    }
  }
}

window.onload = function(){
  
  var labels = document.querySelectorAll('label');
  var checked = false;
  var last_id = '';
  for(var i = 0; i<labels.length; i++){
    labels[i].addEventListener('mouseup', function(e){
     if(last_id.length > 0){
       
       if(e.currentTarget.getAttribute('for') === last_id){
         last_id = '';
       } else {
         last_id = e.currentTarget.getAttribute('for');
       }
       
     } else {
       last_id = e.currentTarget.getAttribute('for');
     }
      if(last_id.length > 0){
        document.getElementById('calendar').className = 'active';
        var index = last_id.split('-')[1];
        var elm_width = window.getComputedStyle(document.querySelector('label[for="'+last_id+'"]')).width;
       if(last_id.match(/0/)){
         document.documentElement.style.setProperty('--margin-left', elm_width);   
       } else if (last_id.match(/1/)){
          document.documentElement.style.setProperty('--margin-left', '0px');
       } else {
         document.documentElement.style.setProperty('--margin-left', '-'+(parseInt(elm_width)*(index-1))+'px');
       }
      } else {
        document.getElementById('calendar').className = '';
        document.documentElement.style.setProperty('--margin-left', '0px');   
      }
    });
  }
}