/**
 * Variable declarations
 */
$btn-color: #eceff1; 
$btn-size : 100px;
$duration : 300ms;
$easing   : cubic-bezier(0, 0, .2, 1);
$half-size: ($btn-size / 2);

/**
 * Initial set-up
 */
*,
*:before,
*:after {
  
  box-sizing: border-box;
  
}

body {
  
  background-color: #607d8b;
  
}

/**
 * The actual play button
 */
.play-btn {
	
  /** Positioning */
  position    : absolute;
  left        : 50%;
  top         : 50%;
  margin-left : -$half-size;
  margin-top  : -$half-size;
  
  /** Sizing */
  width       : $btn-size;
  height      : $btn-size;
  
  /** Border styling */
  border-style: solid;
  border-color: transparent $btn-color transparent $btn-color;
  border-width: $half-size 0 $half-size $btn-size;

  
  &.stop,
  &.to-play {
  	
    /** Animate morphing */
    transition  : transform           $duration $easing,
                  border-top-width    $duration $easing,
                  border-bottom-width $duration $easing;
  
  }
  
  &.stop {
  	
    /** Morph to a stop button */
    transform   : rotate(90deg);
    border-width: 0 0 0 $btn-size;
    
  }
  
  &.to-play {
    
    /** Morph back from a stop button to a play button */
    transform   : rotate(180deg);
    border-width: $half-size $btn-size $half-size 0;
    
  }
  
}

$(function() {
  
  /**
   * Store the transition end event names for convenience.
   */
  var transitionEnd = 'transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd';
  
  /**
   * Trigger the play button states upon clicking.
   */
  $( '.play-btn' ).click(function( e ) {
    
    e.preventDefault();
    
    if ( $(this).hasClass('stop') ) {
      
      $( this ).removeClass( 'stop' )
               .addClass( 'to-play' );
      
    } else if ( !$(this).hasClass('to-play') ) {
      
      $( this ).addClass( 'stop' );
      
    }
    
  });
  
  /**
   * Remove the 'to-play' class upon transition end.
   */
  $( document ).on( transitionEnd, '.to-play', function() {
    
    $( this ).removeClass( 'to-play' );
    
  });
  
});