$(document).ready(function(){
    //add buttons
    $('.chatLog').append(`<div class="btn btn-success btn-toggle-chat-events">Game Events</div>`);
    $('.chatLog').eq(0).css('max-height', '200px');
    $('.chatLog').eq(1).css('max-height', '600px');

    var events = [];
    $('.chatLog tr').each(function(){
        var isLog;

        if ($(this).find('td').eq(1).find('span').length){
            isLog = $(this).find('td').eq(1).find('span').html() ? false : true;
        }else{
            isLog = $(this).find('td').eq(1).html() ? false : true;
        }

        var t = $(this).find('td').eq(0).html().split(':');
        var time = (+t[0]) * 60 + (+t[1]);

        $(this).attr({
            'data-line': $(this).index() + 1,
            'data-log': isLog,
            'data-time': time
        });

        if (isLog){
            var text = $(this).find('td').eq(3).text();

            if (text.split("]").length > 1 && text[0] == "["){
                text = text.replace(text.split("]")[0] + "]", "");

                var found = $.grep(events, (e) => {
                    return (text == e.text && time < e.time + 2) ? true : false;
                })

                if(found.length){
                    $(this).remove();
                }else{
                    $(this).find('td').eq(3).text(text);
                    events.push({
                        text: text,
                        time: time
                    });
                }
            }
        }
    })


    $('.btn-toggle-chat-events').on('click', function(){
        $(this).toggleClass('off');

        $(this).closest('.chatLog').find('tr[data-log="true"]').toggle();
    });
})