// ==UserScript==
// @name         Coord MZ
// @namespace    http://tampermonkey.net/
// @version      1.1
// @description  Allows you to get/set coordinates of your players within your tactics
// @author       Murder
// @match        https://www.managerzone.com/?p=tactics
// @icon         https://image.flaticon.com/icons/png/512/147/147215.png
// @grant        none
// @downloadURL none
// ==/UserScript==

(function() {
    'use strict';

    var coordsContainerAux = document.getElementById('formation-container');
    var input = '<input id=\"**id**\" type=\"text\" style=\"width: 20px\" value=\"**val**\">';
    var _x = '--';
    var _y = '--';

    enableActionsForAllTabs();
    enableActionForAltTactics();
    addEventsToPlayers();
    drawCoordinates();
    document.addEventListener("keydown", setKeys);
    document.addEventListener("click", clickEvent);

    function addEventsToPlayers() {
        var checkExist = setInterval(function() {
            if (document.getElementsByClassName('fieldpos fieldpos-ok ui-draggable').length) {
                var players = document.getElementsByClassName('fieldpos fieldpos-ok ui-draggable');
                for (var i = 0; i < players.length; ++i) {
                    players[i].addEventListener('click', setCoordsLabel, false);
                    players[i].addEventListener('keydown', setCoordsLabel, false);
                }
                clearInterval(checkExist);
            }
        }, 1000);

    }

    function setCoordsLabel(player) {
        getOffset(player.path[1]);
        drawCoordinates();
    }

    function getOffset( el ) {
        _y = el.offsetTop - 54;
        _x = el.offsetLeft;
    }

    function drawCoordinates() {
        let coord = document.getElementById('divCoords');
        if(coord) {
            coord.parentElement.removeChild(coord);
        }

        var coordsContainer = document.getElementById('formation-container');
        var divCoords = "<div id=\"divCoords\"><span style=\"font-weight: 600\">Player position: **coords**</span></div>";
        wrapCoordinates();
        var node = createElementFromHTML(divCoords.replace('**coords**', _x + _y));
        coordsContainer.appendChild(node);
        applyCoordinates();
    }

    function createElementFromHTML(htmlString) {
        var div = document.createElement('div');
        div.innerHTML = htmlString.trim();

        // Change this to div.childNodes to support multiple top-level nodes
        return div.firstChild;
    }

    function applyCoordinates() {
        var inpX = document.getElementById('inputX');
        var inpY = document.getElementById('inputY');

        inpX.addEventListener('keyup', setPlayerPosition, false);
        inpY.addEventListener('keyup', setPlayerPosition, false);
    }

    function setPlayerPosition(input) {
        var c = input.currentTarget.id === 'inputX' ? 'x' : 'y';
        //get selected player
        var players = document.getElementsByClassName('fieldpos fieldpos-ok ui-draggable ui-selected');
        var playerCollision = document.getElementsByClassName('fieldpos ui-selected fieldpos-collision');
        if(players.length) {
            let xVal = c === 'x' ? input.currentTarget.value : document.getElementById('inputX').value;
            let yVal = c === 'y' ? input.currentTarget.value : document.getElementById('inputY').value;

            if(isInRange(c == 'x' ? xVal : yVal, c)) {
                players[0].style.left = xVal + "px";
                players[0].style.top = (parseInt(yVal) + 54) + "px";
            }
        }
        else if(playerCollision.length) {
            let xVal = c === 'x' ? input.currentTarget.value : document.getElementById('inputX').value;
            let yVal = c === 'y' ? input.currentTarget.value : document.getElementById('inputY').value;

            if(isInRange(c == 'x' ? xVal : yVal, c)) {
                playerCollision[0].style.left = xVal + "px";
                playerCollision[0].style.top = (parseInt(yVal) + 54) + "px";
            }
        }
    }

    function wrapCoordinates() {
        var inpX = input.replace('**id**','inputX').replace('**val**', _x);
        var inpY = input.replace('**id**','inputY').replace('**val**', _y);
        _x = '<span style=\"color: green\"> X: </span>' + inpX;
        _y = '<span style=\"color: blue\"> Y: </span>' + inpY;
    }

    function isInRange(number, coordinate) {
        if(!isNaN(number)) {
            var integer = parseInt(number);
            if(coordinate == 'x') {
                return integer <= 193 && integer >= 0;
            }
            else if(coordinate == 'y') {
                return integer <= 258 && integer >= 0;
            }
            else {
                return false;
            }
        }
        else {
            return false;
        }
    }

    function setKeys(key) {
        if((key.keyCode === 37 || key.keyCode === 38 || key.keyCode === 39 || key.keyCode === 40)
           && (key.currentTarget.activeElement.localName != 'input')) {

            var players = document.getElementsByClassName('fieldpos fieldpos-ok ui-draggable ui-selected');
            var playerCollision = document.getElementsByClassName('fieldpos ui-selected fieldpos-collision');
            //player selected with or without collision
            if(players.length) {
                _y = players[0].offsetTop - 54;
                _x = players[0].offsetLeft;
            }
            else if (playerCollision.length) {
                _y = playerCollision[0].offsetTop - 54;
                _x = playerCollision[0].offsetLeft;
            }
            else {
                _y = '--';
                _x = '--';
            }

            drawCoordinates();
        }
    }

    function clickEvent(ev) {
        if(ev.currentTarget.activeElement.localName === 'select') {
            return false;
        }
        var players = document.getElementsByClassName('fieldpos fieldpos-ok ui-draggable ui-selected');
        var playerCollision = document.getElementsByClassName('fieldpos ui-selected fieldpos-collision');
        if(!players.length && !playerCollision.length) {
            _y = '--';
            _x = '--';
            drawCoordinates();
        }
    }

    function enableActionsForAllTabs() {
        var tabs = document.getElementsByClassName('ui-state-default ui-corner-top');
        let ttta = document.getElementById('ttta');
        let tttb = document.getElementById('tttb');
        ttta.addEventListener('click',restart);
        tttb.addEventListener('click',restart);

        for (var i = 0; i < tabs.length; ++i) {
            tabs[i].addEventListener("click", function() {
                addEventsToPlayers();
                enableActionForAltTactics();
            });
        }
    }

    function enableActionForAltTactics() {
        var altTactics = document.getElementById('formation_select');
        altTactics.addEventListener('change',tacticChange);
    }

    function tacticChange() {
        let resetBtn = document.getElementById('reset_formation');
        let copyBtn = document.getElementById('replace_starting_formation');

        resetBtn.addEventListener('click',restart);
        copyBtn.addEventListener('click',restart);

        restart();
    }

    function restart() {
        _y = '--';
        _x = '--';
        addEventsToPlayers();
        drawCoordinates();
    }

})();