header
  h1 Clockwerk
  small 
    | Photography ©
    a(href="http://alexdemora.com/") Alex de Mora
nav
  a(href="#").btn.prev ←
  a(href="#").btn.next →

section
  .layer.image-1
    .slice.left
      .inner
    .slice.right
      .inner

  .layer.image-2
    .slice.left
      .inner
    .slice.right
      .inner

  .layer.image-3
    .slice.left
      .inner
    .slice.right
      .inner

  .layer.image-4
    .slice.left
      .inner
    .slice.right
      .inner

$img-1: url( "https://assets.codepen.io/76888/CW01.jpg" )
$img-2: url( "https://assets.codepen.io/76888/CW02.jpg" ) 
$img-3: url( "https://assets.codepen.io/76888/CW03.jpg" ) 
$img-4: url( "https://assets.codepen.io/76888/CW04.jpg" )
@mixin spin
  transition: all 400ms linear

@mixin spin-in
  transition: all 400ms ease-in

@mixin spin-out
  transition: all 400ms ease-out

@keyframes btn-wake
  0%
    opacity: 1
  50%
    opacity: 0
  100%
    opacity: 1

body
  margin:           0
  padding:          0
  background-color: pink
  font-family:      helvetica, arial, sans-serif
  display:          flex
  align-items:      center
  justify-content:  center
  height:           100vh
  width:            100vw

header
  color:      white
  position:   fixed
  width:      100%
  bottom:     5vh
  text-align: center
  z-index:    98
  
  h1
    font-family:  'Abril Fatface', georgia, times, serif
    font-size:    4rem
    line-height:  4rem
    margin:       0
    padding:      0
    
  small
    font-size:   0.6rem
    line-height: 0.6rem
    margin:      0.6rem 0
    letter-spacing: 0.05em
    display:     block

  a
    color: white
    text-decoration: none

nav
  display: flex
  justify-content: center
  align-items: center
  z-index:  99
  position: fixed
  top:      0
  left:     0
  height: 100vh
  width:  100vw
  
  a
    font-family:  arial
    color:        white
    border:       2px solid white
    padding:      10px 15px
    transition:   100ms ease all
    text-decoration: none
    
    &.wake
      animation-fill-mode: forwards
      animation-iteration-count: 2
      animation-timing-function: ease
      animation-duration: 0.5s
      animation-name: btn-wake
      animation-delay: 1s
  
    &.disable
      opacity: 0.3
      &:hover
        background: none
      &:active
        background: none

    &:hover
      background: rgba(255,255,255,.2)
    &:active
      background: rgba(255,255,255,.7)
    & + a
      margin-left: 60vw

section
  width:      500px
  height:     500px
  min-width:  500px
  margin:     0 auto
  border-radius: 50%
  overflow:   hidden
  position:   relative
  z-index:    1

  .layer
    display: flex
    position: absolute
    top:  0
    left: 0
    width: 100%
    height: 100%

    &:nth-child(1)
      z-index: 4
    &:nth-child(2)
      z-index: 3
    &:nth-child(3)
      z-index: 2
    &:nth-child(4)
      z-index: 1

    &.image-1 .slice
      &.left,
      &.right
        .inner
          background-image: $img-1
          background-color: #6fb4c4
    &.image-2 .slice
      &.left,
      &.right
        .inner
          background-image: $img-2
          background-color: #d25223
    &.image-3 .slice
      &.left,
      &.right
        .inner
          background-image: $img-3
          background-color: #fec763
    &.image-4 .slice
      &.left,
      &.right
        .inner
          background-image: $img-4
          background-color: #a52a2c
    .slice
      width:    50%
      height:   100%
      overflow: hidden

      &.left,
      &.right
        .inner
          width:  100%
          height: 100%

        &.next
          transform: rotate(180deg)
          .inner
            transform: rotate(-180deg)

        &.prev
          transform: rotate(-180deg)
          .inner
            transform: rotate(180deg)

      &.left,
      &.left .inner
        transform-origin: 100% 50%
        background-position: 0 50%

      &.right,
      &.right .inner
        transform-origin: 0 50%
        background-position: 100% 50%

      &.spin-in
        @include spin-in
        .inner
          @include spin-in

      &.spin-out
        @include spin-out
        .inner
          @include spin-out

var blnReady	   = true;
var strPath 	   = 'section .layer';
var strFinished  = 'webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend';

$('.btn').click(function(e) {
  e.preventDefault();

  var top 		= $(strPath).first();
  var bottom 	= $(strPath).last();
  var sliceL	= $(top).find('.slice.left');
  var sliceR	= $(top).find('.slice.right');
  var btn     = $(this);

  if($(btn).hasClass("next") && (blnReady === true)){
    blnReady = false;
    $(btn).addClass('disable');
    $(sliceR).addClass('next spin-in');
    $(sliceR).one(strFinished,   
      function() {
        $(sliceL).addClass('next spin-out');
        $(sliceL).one(strFinished,   
          function() {
            $(top).insertAfter(bottom);
            $(sliceL).removeClass('next spin-out');
            $(sliceR).removeClass('next spin-in');
            $(btn).removeClass('disable');
            blnReady = true;
            return;
          });	
      });
  }

  if($(this).hasClass("prev") && (blnReady === true)){
    blnReady = false;
    $(btn).addClass('disable');
    $(bottom).insertAfter(top);
    $(sliceL).addClass('prev spin-in');
    $(sliceL).one(strFinished,
      function() {
        $(sliceR).addClass('prev spin-out');
        $(sliceR).one(strFinished,   
          function() {
            $(bottom).insertBefore(top);
            $(sliceL).removeClass('prev spin-in');
            $(sliceR).removeClass('prev spin-out');
            $(btn).removeClass('disable');
            blnReady = true;
            return;
          });	
      });
  }
});


$('.btn').hover(function(e) {
  $('.btn').removeClass('wake');
});
$('.btn').addClass('wake');