$(document).ready(function() {

    // Turbo
    var turbo = 1;
    var startingHour = "16:20";

    // Functions
    var k = 1/turbo;
    function rand(x) {
        return x[Math.floor(Math.random() * x.length)]
    };
    var chatVelocityIndex = 50;

    // Start Chat - Function
    var startChatContainer = function(element) {
        setTimeout(function() {
            $("#main-wrapper").append('<div id="chat-wrapper"><div id="chat-header"><div class="icon"><i class="fa fa-chevron-left"></i></div><div class="number">11</div><div class="group-picture" style="background-image:url(' + element.groupPicture + ');"></div><div class="info"><div class="group-name">' + element.groupName + '</div><div class="group-label">' + element.label + '</div></div></div><div id="chat-messages-wrapper"></div></div>');
        }, 0 * k);
    }

    // Add Message To Chat - Function
    var addMessageToChat = function(element, i) {
        if (element.direction == "left") {
            setTimeout(function() {
                $("#chat-messages-wrapper").append('<div class="message-single-user-wrapper message-single-user-wrapper-' + i + '" style="float:left; clear:left;"></div>');
                var messageLenght = 0;
                for (var j = 0; j < element.messages.length; j++) {
                    (function() {
                        var message = element.messages[j];
                        var htmlMessage = '<div id="message-wrapper" class="message-wrapper-' + j + '"><div class="message-received-name" style="color:' + element.color + ';">' + element.name + '</div><div class="message">' + message + '<div class="message-date">' + element.date + '</div></div></div>';
                        setTimeout(function() {
                            $(".message-single-user-wrapper-" + i).append(htmlMessage);
                        }, (  ( ( element.end - element.start) / element.messages.length * j ) + (75 / element.messages.length) ) * k  );
                    })();
                };
            }, element.start * k);
        } else if (element.direction == "right") {
            setTimeout(function() {
                $("#chat-messages-wrapper").append('<div class="message-single-user-wrapper message-single-user-wrapper-' + i + '" style="float:right; clear:right;"></div>');
                for (var j = 0; j < element.messages.length; j++) {
                    (function() {
                        var message = element.messages[j];
                        var htmlMessage = '<div id="message-wrapper" class="message-wrapper-personal message-wrapper-' + j + '"><div class="message">' + message + '<div class="message-date message-date-right">' + element.date + '</div></div></div>';
                        setTimeout(function() {
                            $(".message-single-user-wrapper-" + i).append(htmlMessage);
                        }, ((element.end - element.start) / element.messages.length * j) * k);
                    })();
                };
            }, element.start * k);
        }
    }

    var addOrAbandonGroup = function(element) {
        setTimeout(function() {
            $("#chat-messages-wrapper").append('<div class="add-or-abandon"><span>' + element.text + '</span></div>');
        }, element.start * k);
    }

    var whatsappNotification = function(element, i) {
        var notification = '<div style="top:-60px" class="notification-' + i + ' whatsapp-notification-wrapper"><div class="notification-profile-pic" style="background-image:url(' + element.profilePic + ');"></div><div class="notification-info"><div class="notification-sender">' + element.sender + '</div><div class="notification-text">' + element.text + '</div></div></div>';
        $("#main-wrapper").append(notification);
        setTimeout(function() {
            $(".notification-" + i).animate({
                top: 0
            });
        }, element.start * k)
        setTimeout(function() {
            $(".notification-" + i).animate({
                top: "-60px"
            });
        }, element.end * k)
    }

    // Add Vocal Message To Chat - Function
    var addVocalMessageToChat = function(element, i) {
        if (element.direction == "left") {

            setTimeout(function() {
                $("#chat-messages-wrapper").append('<div class="message-single-user-wrapper message-single-user-wrapper-' + i + '" style="float:left; clear:left;"></div>');
                var htmlMessage = '<div style="padding-bottom: 0;" id="message-wrapper" class="message-wrapper-' + j + '"><div class="message-received-name" style="color:' + element.color + ';">' + element.name + '</div><div class="message" style="float:left;"><div class="vocal-message-wrapper"><i class="fa fa-play"></i><div class="vocal-message-bar"></div><div class="vocal-text"><div class="message-vocale-duration">' + element.vocalDuration + '</div><div class="message-date">' + element.date + '</div></div></div></div><div class="vocalProfileImage" style="background-image:url(' + element.vocalProfileImage + ')"></div></div>';
                $(".message-single-user-wrapper-" + i).append(htmlMessage);
            }, element.start * k);

        } else if (element.direction == "right") {
            setTimeout(function() {
                $("#chat-messages-wrapper").append('<div class="message-single-user-wrapper message-single-user-wrapper-' + i + '" style="float:right; clear:right;"></div>');
                var htmlMessage = '<div style="padding-bottom: 0; padding-top: 12px;" id="message-wrapper" class="message-wrapper-personal message-wrapper-' + j + '"><div class="vocalProfileImage" style="top: -5px; margin-left: 3px; background-image:url(' + element.vocalProfileImage + ')"></div><div class="message" style="float:left;"><div class="vocal-message-wrapper"><i class="fa fa-play"></i><div class="vocal-message-bar" style="background-color: #cacaca;"></div><div class="vocal-text"><div class="message-vocale-duration">' + element.vocalDuration + '</div><div class="message-date message-date-right">' + element.date + '</div></div></div></div></div>';
                $(".message-single-user-wrapper-" + i).append(htmlMessage);
            }, element.start * k);

        }
    }

    function updateScroll(){
        $("#chat-messages-wrapper").animate({
            scrollTop: document.getElementById("chat-messages-wrapper").scrollHeight
        }, 600);
    }
    var time = setInterval(updateScroll,600);

    // Main function
    var createChat = function(chat) {
        var totalDuration = 0;
        for (var i = 0; i < chat.length; i++) {
            var element = chat[i];
            if (element.action == "startChatContainer") {
                startChatContainer(element);
            } else if (element.action == "addMessageToChat") {
                addMessageToChat(element, i);
            } else if (element.action == "addOrAbandonGroup") {
                addOrAbandonGroup(element);
            } else if (element.action == "whatsappNotification") {
                whatsappNotification(element, i);
            } else if (element.action == "pause") {
                // setPause(element.duration);
            } else if (element.action == "addVocalMessageToChat") {
                addVocalMessageToChat(element, i);
            }
        };
    };
    // Set time
    var chat2 = [];
    var totalDuration = 0;
    for (var i = 0; i < chat.length; i++) {
        console.log(totalDuration);
        var chatElement = chat[i];
        if (chatElement.action == "addMessageToChat") {
            if (chatElement.hasOwnProperty("forcedDuration")) {
                chatElement["start"] = totalDuration;
                chatElement["end"] = totalDuration + chatElement.forcedDuration;
                chatElement["date"] = startingHour.split(":")[0] + ":" + (parseInt(startingHour.split(":")[1]) + Math.floor(Math.round(totalDuration / 15000)));
                totalDuration += chatElement.forcedDuration + 250;
            } else {
                var messagesLenght = 0;
                for (var j= 0; j < chatElement.messages.length; j++) {
                    if (chatElement.messages[j].substring(0,4) == '<img') {
                        messagesLenght += 20;
                    } else {
                        messagesLenght += chatElement.messages[j].length;
                    }
                };
                chatElement["start"] = totalDuration;
                chatElement["end"] = totalDuration + (messagesLenght * chatVelocityIndex) + (chatElement.messages.length * 75);
                chatElement["date"] = startingHour.split(":")[0] + ":" + (parseInt(startingHour.split(":")[1]) + Math.floor(Math.round(totalDuration / 15000)));
                totalDuration += messagesLenght * chatVelocityIndex + 250;
            }
        } else if (chatElement.action == "pause") {
            totalDuration += chatElement.duration;
        } else if (chatElement.action == "addOrAbandonGroup") {
            chatElement["start"] = totalDuration;
            totalDuration += 1000;
        } else if (chatElement.action == "whatsappNotification") {
            chatElement["start"] = totalDuration;
            chatElement["end"] = totalDuration + 2000;
            totalDuration += 2250;
        } else if (chatElement.action == "addVocalMessageToChat") {
            if (chatElement.hasOwnProperty("forcedDuration")) {
                chatElement["start"] = totalDuration;
                chatElement["end"] = totalDuration + chatElement.forcedDuration;
                chatElement["date"] = startingHour.split(":")[0] + ":" + (parseInt(startingHour.split(":")[1]) + Math.floor(Math.round(totalDuration / 15000)));
                totalDuration += chatElement.forcedDuration + 250;
            } else {
                chatElement["start"] = totalDuration;
                chatElement["end"] = totalDuration + 1000;
                chatElement["date"] = startingHour.split(":")[0] + ":" + (parseInt(startingHour.split(":")[1]) + Math.floor(Math.round(totalDuration / 15000)));
                totalDuration += 1250;
            }
        }
        chat2.push(chatElement);
    }
    console.log(chat2);
    createChat(chat2);
});