// ==UserScript==
// @name         Coord MZ
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Allows you to get/set coordinates of your players within your tactics
// @author       Murder
// @match        https://www.managerzone.com/?p=tactics
// @icon         http://www.rw-designer.com/icon-view/15717.png
// @grant        none
// @downloadURL none
// ==/UserScript==

(function() {
    'use strict';

    var coordsContainerAux = document.getElementById('formation-container');
    var divCoords = coordsContainerAux.innerHTML + "<div><span style=\"font-weight: 600\">Player position: **coords**</span></div>";
    var input = '<input id=\"**id**\" type=\"text\" style=\"width: 20px\" value=\"**val**\">';
    var _x = '--';
    var _y = '--';

    enableActionsForAllTabs();
    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) {
                console.log("Exists!");

                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() {
        var coordsContainer = document.getElementById('formation-container');
        wrapCoordinates();
        coordsContainer.innerHTML = divCoords.replace('**coords**', _x + _y);
        applyCoordinates();
    }

    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(xVal, 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(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) {

            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() {
        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');

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

})();