(function($) {
    $(document).ready(function() {
        var chatbox = $('#chatwrapper'),
            chatboxTitle = $('#chatwrapper .chatbox__title'),
            chatboxTitleClose = $('#chatwrapper .chatbox__title__close'),
            chatboxCredentials = $('#chatwrapper .chatbox__credentials');
        chatboxTitle.on('click', function() {
            chatbox.toggleClass('chatbox--tray');
            console.log(chatbox.classList);
        });
        chatboxTitleClose.on('click', function(e) {
            e.stopPropagation();
            chatbox.addClass('chatbox--closed');
        });
        chatbox.on('transitionend', function() {
            if (chatbox.hasClass('chatbox--closed')) chatbox.remove();
        });
        chatboxCredentials.on('submit', function(e) {
            e.preventDefault();
            chatbox.removeClass('chatbox--empty');
        });
    });
})(jQuery);