// ==UserScript==
// @name         Legacy Chat 2
// @namespace    https://www.twitch.tv/garych
// @version      0.0.1
// @include      *://*.twitch.tv/*
// @exclude      *://www.twitch.tv/*/chat*
// @exclude      *://twitch.tv/*/chat*
// @exclude      *://api.twitch.tv/*
// @exclude      *://*.destiny.gg/*
// @author       garych
// @grant        GM_addStyle
// @require      https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js
// @description  Replaces New Chat
// @downloadURL none
// ==/UserScript==


(function(factory, undefined) {
    if (typeof define === 'function' && define.amd) {
        // AMD
        define(['jquery'], factory);
    } else if (typeof module === 'object' && typeof module.exports === 'object') {
        // CommonJS
        module.exports = factory(require('jquery'));
    } else {
        // Global jQuery
        factory(jQuery);
    }
}(function($, undefined) {

    function getHandle(selector, $el) {
        if (selector && selector.trim()[0] === ">") {
            selector = selector.trim().replace(/^>\s*/, "");

            return $el.find(selector);
        }

        return selector ? $(selector) : $el;
    }

    if ($.fn.resizable)
        return;

    $.fn.resizable = function fnResizable(options) {
        var opt = {
            // selector for handle that starts dragging
            handleSelector: null,
            // resize the width
            resizeWidth: true,
            // resize the height
            resizeHeight: true,
            // the side that the width resizing is relative to
            resizeWidthFrom: 'right',
            // the side that the height resizing is relative to
            resizeHeightFrom: 'bottom',
            // hook into start drag operation (event passed)
            onDragStart: null,
            // hook into stop drag operation (event passed)
            onDragEnd: null,
            // hook into each drag operation (event passed)
            onDrag: null,
            // disable touch-action on $handle
            // prevents browser level actions like forward back gestures
            touchActionNone: true
        };
        if (typeof options == "object") opt = $.extend(opt, options);

        return this.each(function() {
            var startPos, startTransition;

            var $el = $(this);

            var $handle = getHandle(opt.handleSelector, $el);

            if (opt.touchActionNone)
                $handle.css("touch-action", "none");

            $el.addClass("resizable");
            $handle.bind('mousedown.rsz touchstart.rsz', startDragging);

            function noop(e) {
                e.stopPropagation();
                e.preventDefault();
            };

            function startDragging(e) {
                // Prevent dragging a ghost image in HTML5 / Firefox and maybe others
                if (e.preventDefault) {
                    e.preventDefault();
                }
                document.body.style.pointerEvents = 'none';
                startPos = getMousePos(e);
                startPos.width = parseInt($el.width(), 10);
                startPos.height = parseInt($el.height(), 10);

                startTransition = $el.css("transition");
                $el.css("transition", "none");

                if (opt.onDragStart) {
                    if (opt.onDragStart(e, $el, opt) === false)
                        return;
                }
                opt.dragFunc = doDrag;

                $(document).bind('mousemove.rsz', opt.dragFunc);
                $(document).bind('mouseup.rsz', stopDragging);
                if (window.Touch || navigator.maxTouchPoints) {
                    $(document).bind('touchmove.rsz', opt.dragFunc);
                    $(document).bind('touchend.rsz', stopDragging);
                }
                $(document).bind('selectstart.rsz', noop); // disable selection
            }

            function doDrag(e) {
                var pos = getMousePos(e),
                    newWidth, newHeight;

                if (opt.resizeWidthFrom === 'left')
                    newWidth = startPos.width - pos.x + startPos.x;
                else
                    newWidth = startPos.width + pos.x - startPos.x;

                if (opt.resizeHeightFrom === 'top')
                    newHeight = startPos.height - pos.y + startPos.y;
                else
                    newHeight = startPos.height + pos.y - startPos.y;

                if (!opt.onDrag || opt.onDrag(e, $el, newWidth, newHeight, opt) !== false) {
                    if (opt.resizeHeight)
                        $el.height(newHeight);

                    if (opt.resizeWidth)
                        $el.width(newWidth);
                }
            }

            function stopDragging(e) {
                e.stopPropagation();
                e.preventDefault();
                document.body.style.pointerEvents = 'auto';
                $(document).unbind('mousemove.rsz', opt.dragFunc);
                $(document).unbind('mouseup.rsz', stopDragging);

                if (window.Touch || navigator.maxTouchPoints) {
                    $(document).unbind('touchmove.rsz', opt.dragFunc);
                    $(document).unbind('touchend.rsz', stopDragging);
                }
                $(document).unbind('selectstart.rsz', noop);

                // reset changed values
                $el.css("transition", startTransition);

                if (opt.onDragEnd)
                    opt.onDragEnd(e, $el, opt);

                return false;
            }

            function getMousePos(e) {
                var pos = { x: 0, y: 0, width: 0, height: 0 };
                if (typeof e.clientX === "number") {
                    pos.x = e.clientX;
                    pos.y = e.clientY;
                } else if (e.originalEvent.touches) {
                    pos.x = e.originalEvent.touches[0].clientX;
                    pos.y = e.originalEvent.touches[0].clientY;
                } else
                    return null;

                return pos;
            }
        });
    };
}));


function cleanName(str) {
    var strLength = str.length;
    for (var i = 0; i < strLength; i++) {
        if (!/^\w+$/.test(str[i])) {
            return str.slice(0, i);
        }
    }
    return str;
}


function switchChannel(channel, iframe) {
    if (event.key === 'Enter') {
        chat = $(iframe);
        if (channel === '') {
            if (iframe == '.chat-1') {
                chat[0].style.maxHeight = "0";
                chat.attr('src', "about:blank");
            } else {
                return;
            }
        } else {
            if ((iframe == '.chat-1') && ($(".resizable").length === 0)) {
                $(".chat-1").resizable({
                    handleSelector: ".splitter-horizontal",
                    resizeWidth: false
                });
            }
            if (channel !== 'destinygg') {
                chat.attr('src', ("https://www.twitch.tv/" + channel + "/chat"));
            } else {
                chat.attr('src', "https://destiny.gg/embed/chat");
            }
            if (chat[0].offsetHeight < (0.1 * $('#chats').height())) {
                $('.chat-1')[0].style.height = "calc(50% - 7px)";
                $('.chat-1')[0].style.maxHeight = "calc(100% - 14px)";
            }
        }
    }
}

$(document).keyup(function (e) {
    if ($("#input-1:focus") && (e.keyCode === 13)) {
       switchChannel($('#input-1')[0].value,'.chat-1');
    }
    if ($("#input-2:focus") && (e.keyCode === 13)){
        switchChannel($('#input-2')[0].value,'.chat-2');
    }
 });

GM_addStyle('#chat-holder {margin: 0; height: 100%}');

GM_addStyle('#chat-selection { margin-top: 0; padding: 0;}');

GM_addStyle('#input-1, #input-2 { border-style: solid; background-color: #252525; border-color: #3b3b3b; border-width: 1px; display: inline-block; margin-right: 0px; padding-left: 9px; width: 50%; color: #d3d3d3;}');

GM_addStyle('#chat-selection,#input-1,#input-2 {    height: 32px;}');

GM_addStyle('#chats, .chat-1, .chat-2 {    background-color: #252525;}');

GM_addStyle('.chat-1 {    transition: height 0.2s ease;}');

GM_addStyle('#chats {    height: calc(100% - 32px);    display: flex;    flex-direction: column;}');

GM_addStyle('.chat-1,.chat-2 {    border: none;    min-height: 0;    max-height: calc(100% - 14px);    width: 100%;}');

GM_addStyle('.chat-1 {    flex: 0 0 auto;    height: 0;}');

GM_addStyle('.splitter-horizontal {    flex: 0 0 auto;    height: 14px;    background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/hsizegrip.png) center center no-repeat #191919;    cursor: row-resize;}');

GM_addStyle('.chat-2 {    margin-bottom: 0px;    flex: 1 1 auto;}');

function replaceChat() {
    var url = window.location.href;
    var chan = url.split("/");
    var chanName = cleanName(chan[3]);
    var chat1 = "'.chat-1'";
    var chat2 = "'.chat-2'";
    var embeddedChat = '<div id="chat-holder"><div id="chat-selection"> <input id="input-1" type="text" placeholder="Top" onkeydown="switchChannel(this,'+chat1+')"><input id="input-2" type="text" placeholder="Bottom" onkeydown="switchChannel(this,'+chat2+')"></div><div id="chats"><iframe class="chat-1" src="about:blank"></iframe><div class="splitter-horizontal"></div><iframe class="chat-2" src="https://www.twitch.tv/'+chanName+'/chat"></iframe></div></div>';
    $(".chat-room__container").html(embeddedChat);
}
var observer = new MutationObserver(function() {
    console.log("Mutation Detected");
    if (!$(".chat-room__container #chat-holder").length) {
        console.log("Replacing Chat");
        replaceChat();
    }
});

var config = {
    attributes: true,
    childList: true,
    characterData: true
};

observer.observe(document.body, config);