$(function(){

  function changeState(state){

    console.log(state);
    
    var $btn = $('.btn'),
      $currentState = $btn.find('.state--is-active'),
      $newState = $btn.find(state);

    $currentState.removeClass('state--is-active');
    $currentState.addClass('state--is-hidden');

    $btn.width( $newState.outerWidth() );

    $newState
      .addClass('state--is-active')
      .removeClass('state--is-hidden');
    
    
  }
  
  
  // the following is only for presentational purpose
  var states = [
  '.state--add', 
  '.state--adding', 
  '.state--added'
  ];

  var pointer = 1,
  l = states.length;
  
  setInterval( function(){

    console.log(pointer);
    
    changeState(states[pointer]);

    pointer++;
    
    if( pointer === l){
      pointer = 0;
    }
    
    
  }, 1800 );
  
  
})