docs: function () {
        
        // Create the containers for the liked or disliked avatars
        if (initial) {
          $('<div id="LikedAvatars" class="AvatarsCollection"/>').appendTo($('body'));
          $('<div id="DislikedAvatars" class="AvatarsCollection"/>').appendTo($('body'));
        }
        
        $.each(this.footer.find('button'), function (index, el) {
          
          // Adding the click events for the buttons in the footer
          $(el).on('click', function () {
            
            // Storing a global var that the user clicked on a button
            DemoAvatars.clicked = true;
            
            // When a user clicks a button close the tooltips
            DemoAvatars.AvatarsTooltipLike && DemoAvatars.AvatarsTooltipLike.close();
            DemoAvatars.AvatarsTooltipDislike && DemoAvatars.AvatarsTooltipDislike.close();
            
            // When we click a button, the jBox disappears, let's tell this jBox that we removed it
            this.AvatarRemoved = true;
            
            // Did we like or dislike the avatar?
            var liked = $(el).hasClass('button-heart');
            
            // Slide the jBox to the left or right depending on which button the user clicked
            this.animate('slide' + (liked ? 'Right' : 'Left'), {
              
              // Once the jBox is removed, hide it and show the avatar in the collection
              complete: function () {
                this.wrapper.css('display', 'none');
                
                // Which container to use
                var collectionContainer = liked ? $('#LikedAvatars') : $('#DislikedAvatars');
                
                // If there if not enough space for the avatars to show in one line remove the first one
                if (collectionContainer.find('div[data-avatar-tooltip]').length && ((collectionContainer.find('div[data-avatar-tooltip]').length + 1) * $(collectionContainer.find('div[data-avatar-tooltip]')[0]).outerWidth(true) > collectionContainer.outerWidth())) {
                  $(collectionContainer.find('div[data-avatar-tooltip]')[0]).remove();
                }
                
                // Add the avatar to the collection
                this.animate('popIn', {
                  element: $('<div data-avatar-tooltip="You ' + (liked ? 'liked' : 'disliked') + ' ' + DemoAvatars.Avatars[this.AvatarIndex] + '"/>').append($('<div/>').html('<img src="https://stephanwagner.me/img/jBox/avatar/' + DemoAvatars.Avatars[this.AvatarIndex] + '.svg"/>')).appendTo(collectionContainer)
                });
                
                // Attach the avatar tooltip
                DemoAvatars.AvatarsTooltip && DemoAvatars.AvatarsTooltip.attach();
                
              }.bind(this)
            });
            
            // Open another Avatar jBox
            generateAvatarJBox();
            
          }.bind(this));
        }.bind(this));
      }