Raw Source Toggle Dropdown

• Minified Source

xtioo / Mark enemy villages on map Tsane

// ==UserScript==
// @name           Mark enemy villages on map Tsane
// @version        1.5
// @author         Tsane
// @copyright 2018, xtioo (https://openuserjs.org/users/xtioo)
// @include        https://nl*.tribalwars.nl*
// @grant 		   none
// @license MIT
// ==/UserScript==

function main() {
    var configurations = getUserData(),
        screen = game_data.screen,
        showMsg = true;

    switch(screen) {
        case 'report':
            createReportBoxes($('#attack_info_def'), true);
            createReportBoxes($('#attack_info_att'), true);

            $('.ME_Report').on('click', addToCoords);
            break;
        case 'map':
            var a = ' - <a href="#" id="MEUpdate">ME: Update dorpen</a>';
            $('#linkContainer').append(a);
            $('#MEUpdate').on('click', updateDorpen);

            var newDiv = reshapeDiv($('.containerBorder').eq(1));
            newDiv.insertAfter($('#village_colors').prev().prev()[0]);

            $('.markEnemy').on('click', function (e) {
                createPopUp($('.markEnemy').parent().parent().parent().parent().parent(), e.pageY, e.pageX, $(this).attr('id'));
            });

            $('#newGroup').on('click', createNewGroup);

            $('.remove_ME').on('click', removeGroup);

            markCoords();
            break;
        case 'overview_villages':
            var mode = game_data.mode;
            if (mode === 'incomings') {
                var $table = $('#incomings_table'),
                    $rows = $table.find('td').closest('tr');
                lookForMatch($rows);
                showIcons();
                addFilterForIcons($table);
            }
            break;
        case 'info_village':
            var coord = $('#map_toggler').closest('table').find('td').eq(2).text().match(/\d{1,3}\|\d{1,3}/g).slice(-1)[0].toString(),
                $content = $('#content_value'),
                $header = $content.find('h2').first();
            for (var prop in configurations) {
                if (configurations.hasOwnProperty(prop)) {
                    if (configurations[prop]['info'].hasOwnProperty(coord)) {
                        var img = '<img src="' + configurations[prop]['img'] + '" style="background-color:' + configurations[prop]['background'] + ';border-radius:8px;vertical-align:middle;margin-left:4px;">';
                        $header.append($(img));
                    }
                }
            }

            $content.children('table').find('tr').first().children('td').last().prepend('<div id="ME_Info" style="float:left;"><table class="vis"><tbody><tr><th colspan="10">Groepen voor: <span class="village_anchor">' + coord + '</span></tr></tbody></table></div>');
            createReportBoxes($('#ME_Info'), false);
            showMsg = false;
            $('.ME_Report').on('click', addToCoords);
            break;
    }

    /******************
     **** FUNCTIONS ***
     ******************/

    function getUserData() {
        var userData = JSON.parse(localStorage.getItem('markEnemyObject'));
        if (!userData) {
            userData = {
                off: {
                    info: {},
                    img: '/graphic/unit_map/axe.png',
                    background: '#FE0000'
                },
                def: {
                    info: {},
                    img: '/graphic/unit_map/sword.png',
                    background: '#FEFE00'
                }
            };
            localStorage.setItem('markEnemyObject', JSON.stringify(userData));
        }
        return userData;
    }

    function lookForMatch($rows) {
        var i = 0,
            l = $rows.length,
            allCoords = getAll(configurations);

        for (i; i < l; i++) {
            var $row = $rows.eq(i),
                $a = $row.find('td').eq(2).find('a').first(),
                coord = $a.text().match(/\d{1,3}\|\d{1,3}/g).slice(-1)[0].toString();
            if (allCoords.hasOwnProperty(coord)) {
                for (var j = 0, k = allCoords[coord].length; j < k; j++) {
                    $a.addClass('ME_Inc_' + allCoords[coord][j]);
                }
            }
        }
    }

    function showIcons() {
        for (var prop in configurations) {
            if (configurations.hasOwnProperty(prop)) {
                var $anchors = $('.ME_Inc_' + prop);
                if ($anchors) {
                    var img = '<img src="' + configurations[prop]['img'] + '" style="background-color:' + configurations[prop]['background'] + ';border-radius:8px;vertical-align:middle;margin-left:4px;">';
                    $anchors.closest('td').append($(img));
                }
            }
        }
    }

    function addFilterForIcons($table) {
        var filters = '';

        for (var prop in configurations) {
            if (configurations.hasOwnProperty(prop)) {
                filters  += '<img class="ME_filter_Icon" data-type="' + prop + '" src="' + configurations[prop]['img'] + '" style="background-color:' + configurations[prop]['background'] + ';border-radius:8px;vertical-align:middle;cursor:pointer;margin-left:4px;">';
            }
        }

        filters += '<a href="#" id="ME_Icon_Reset" style="margin-left: 4px">Reset</a>';

        $table.find('th').eq(2).append(filters);

        var $rows = $table.find('td').closest('tr');

        $('.ME_filter_Icon').on('click', function() {
            var type = $(this).data('type');

            $rows.hide().find('.ME_Inc_' + type).closest('tr').show();
        });

        $('#ME_Icon_Reset').on('click', function (e) {
            e.preventDefault();
            e.stopPropagation();
            $rows.show();
        });
    }

    function updateDorpen(e) {
        e.preventDefault();
        e.stopPropagation();
        var popUp = '<h3>Mark Enemies - Updater</h3><table class="vis" style="margin-left: auto;margin-right: auto;"><thead><tr><th>Groep</th><th>Updatestatus</th></tr></thead><tbody>';

        var prop;

        for (prop in configurations) {
            if (configurations.hasOwnProperty(prop)) {
                popUp += '<tr><td>' + prop + '</td><td><span id="me_' + prop + '">0</span>/' + Object.keys(configurations[prop]['info']).length + '</td>';
            }
        }

        popUp += '</tbody></table>';

        var width = 375,
            style = 'position:fixed;overflow:auto;top:100px;max-height:' + (window.outerHeight - 250) + 'px;width:' + width + 'px;left:' + (window.outerWidth / 2 - (width / 2)) + 'px;background-color:#e8d4a9;border:2px solid #804000;padding:10px;text-align:center;font-size:12px;z-index:100;box-shadow:0 0 50px 0px #000000;';
        $('body').append('<div id="MEUpdater" style="' + style + '">' + popUp + '</div>');

        var lastProp = Object.keys(configurations);
        lastProp = lastProp[lastProp.length - 1];

        for (prop in configurations) {
            if (configurations.hasOwnProperty(prop)) {
                var coords = Object.keys(configurations[prop]['info']);
                if (coords.length || prop === lastProp) {
                    if (prop !== lastProp) {
                        getOwners(coords, prop, true, $('#me_' + prop));
                    } else {
                        getOwners(coords, prop, true, $('#me_' + prop), true);
                    }
                }
            }
        }
    }

    function createReportBoxes(elem, prepend) {
        var row = '';
        if (prepend) {
            row = '<td><p><strong>ME: </strong><strong></strong></p></td>';
            elem.find('table').find('tbody').prepend('<tr id="ME"></tr>');
        } else {
            elem.find('table').find('tbody').append('<tr id="ME"></tr>');
        }
        var coord = elem.find('.village_anchor').parent().text().match(/\d{1,3}\|\d{1,3}/g).slice(-1)[0].toString();
        for (var key in configurations) {
            var arr = Object.keys(configurations[key]['info']);
            var style = 'background-color:' + configurations[key]['background'] + ';pointer:cursor;margin-left:4px;border-radius:100%;';
            if (arr.indexOf(coord) != -1) {
                style += 'border:2px red solid';
            }
            row += '<td><img src="' + configurations[key]['img'] + '"style="' + style + '" id="ME_' + key + '" class="ME_Report"></td>';
        }
        $('#ME').append(row);
    }

    function createNewGroup() {
        $(this).parent().prepend('<input type="text" value="" placeholder="Nieuwe naam..." id="newName">')
            .append('<button id="saveNew" class="btn" title="Opslaan en herladen">Opslaan</button>');
        $(this).remove();
        $('#saveNew').on('click', function () {
            configurations[$('#newName').val()] = {
                info: {},
                img: '" width="0" height="0',
                background: 'black'
            };
            localStorage.setItem('markEnemyObject', JSON.stringify(configurations));
            location.reload();
        });
    }

    function removeGroup() {
        var type = $(this).data('group');
        if (confirm('Zeker dat u de groep ' + type + ' wilt verwijderen?')){
            delete configurations[type];
            localStorage.setItem('markEnemyObject', JSON.stringify(configurations));
            location.reload();
        } else {
            return false;
        }
    }

    function createPopUp(elem, y, x, type, input) {
        var coord;
        var strong= '<strong style="display:block;">Coordinaten</strong>';
        var txtArea = '<textarea style="display:block;width:90%;height:150px;">' + Object.keys(configurations[type]['info']).join('\n') + '</textarea>';
        var styleDiv = 'z-index:100;position:absolute;top:' + (y - 150) + ';left:100px;top:-130px;padding:10px;border:solid 1px #8c5f0d; background-color: #f4e4bc; margin-left: 0px; border-collapse:separate; text-align:left;';
        var html = $('<div id="edit_color_popup" class="popup_style ui-draggable" style="width: auto; left: 413px; position: fixed; display: block; top: 118px"> <div id="edit_color_popup_menu" class="popup_menu"> Kleur bewerken <a id="closelink_edit_color_popup" href="#">X</a> </div><div id="edit_color_popup_content" class="popup_content" style="height: auto; overflow-y: auto"> <div id="color_picker_popup" style=" padding:10px;background-image:url(\'http://dsnl.innogamescdn.com/8.30/23662/graphic//background/content.jpg\')"> <form id="editcolorform" method="post" action="/game.php?village=19535&action=change_group_color&h=c75b&screen=map"> <strong>Markering veranderen</strong> <table style="margin-top:5px;"> <tbody> <tr> <td width="10">Kleur:</td><td id="color" width="20" style="background-color: #000000; background-image: none"></td><td> <span id="trans_color"> <label> <input type="checkbox" onchange="this.checked ? $(\'#color\').css(\'background-color\', \'transparent\' ) : color_picker_change();" name="transparent" value="1" id="trans_color_input"> transparant </label> </span> </td></tr></tbody> </table> <script type="text/javascript">function color_picker_choose(r, g, b, ignore_transparency){$("#color_picker_r").val(r);$("#color_picker_g").val(g);$("#color_picker_b").val(b);color_picker_change(ignore_transparency);}function color_picker_change(ignore_transparency){var r=$("#color_picker_r").val();var g=$("#color_picker_g").val();var b=$("#color_picker_b").val();$("#color").css(\'background-color\', "rgb("+r+", "+g+", "+b+")");$("#color").css(\'background-image\',\'none\');if (ignore_transparency !==true)$(\'#trans_color_input\').attr(\'checked\', false);}function color_picker_ok(){color_picker_change(false);}</script> <table id="color_picker" style="border-spacing: 0px"> <tbody> <tr> <td>Rood:</td><td> <input onclick="this.focus();" name="color_picker_r" id="color_picker_r" style="font-size:10px; " onchange="color_picker_change()" onkeyup="color_picker_change()" size="4" type="text"> </td><td style="background-color:rgb(0,0,0); background-image:none" width="15" onclick="color_picker_choose(0,0,0)"> </td><td style="background-color:rgb(0,0,127); background-image:none" width="15" onclick="color_picker_choose(0,0,127)"> </td><td style="background-color:rgb(0,0,254); background-image:none" width="15" onclick="color_picker_choose(0,0,254)"> </td><td style="background-color:rgb(0,127,0); background-image:none" width="15" onclick="color_picker_choose(0,127,0)"> </td><td style="background-color:rgb(0,127,127); background-image:none" width="15" onclick="color_picker_choose(0,127,127)"> </td><td style="background-color:rgb(0,127,254); background-image:none" width="15" onclick="color_picker_choose(0,127,254)"> </td><td style="background-color:rgb(0,254,0); background-image:none" width="15" onclick="color_picker_choose(0,254,0)"> </td><td style="background-color:rgb(0,254,127); background-image:none" width="15" onclick="color_picker_choose(0,254,127)"> </td><td style="background-color:rgb(0,254,254); background-image:none" width="15" onclick="color_picker_choose(0,254,254)"> </td></tr><tr> <td>Groen:</td><td> <input onclick="this.focus();" name="color_picker_g" id="color_picker_g" style="font-size:10px; " onchange="color_picker_change()" onkeyup="color_picker_change()" size="4" type="text"> </td><td style="background-color:rgb(127,0,0); background-image:none" width="15" onclick="color_picker_choose(127,0,0)"> </td><td style="background-color:rgb(127,0,127); background-image:none" width="15" onclick="color_picker_choose(127,0,127)"> </td><td style="background-color:rgb(127,0,254); background-image:none" width="15" onclick="color_picker_choose(127,0,254)"> </td><td style="background-color:rgb(127,127,0); background-image:none" width="15" onclick="color_picker_choose(127,127,0)"> </td><td style="background-color:rgb(127,127,127); background-image:none" width="15" onclick="color_picker_choose(127,127,127)"> </td><td style="background-color:rgb(127,127,254); background-image:none" width="15" onclick="color_picker_choose(127,127,254)"> </td><td style="background-color:rgb(127,254,0); background-image:none" width="15" onclick="color_picker_choose(127,254,0)"> </td><td style="background-color:rgb(127,254,127); background-image:none" width="15" onclick="color_picker_choose(127,254,127)"> </td><td style="background-color:rgb(127,254,254); background-image:none" width="15" onclick="color_picker_choose(127,254,254)"> </td></tr><tr> <td>Blauw:</td><td> <input onclick="this.focus();" name="color_picker_b" id="color_picker_b" style="font-size:10px; " onchange="color_picker_change()" onkeyup="color_picker_change()" size="4" type="text"> </td><td style="background-color:rgb(254,0,0); background-image:none" width="15" onclick="color_picker_choose(254,0,0)"> </td><td style="background-color:rgb(254,0,127); background-image:none" width="15" onclick="color_picker_choose(254,0,127)"> </td><td style="background-color:rgb(254,0,254); background-image:none" width="15" onclick="color_picker_choose(254,0,254)"> </td><td style="background-color:rgb(254,127,0); background-image:none" width="15" onclick="color_picker_choose(254,127,0)"> </td><td style="background-color:rgb(254,127,127); background-image:none" width="15" onclick="color_picker_choose(254,127,127)"> </td><td style="background-color:rgb(254,127,254); background-image:none" width="15" onclick="color_picker_choose(254,127,254)"> </td><td style="background-color:rgb(254,254,0); background-image:none" width="15" onclick="color_picker_choose(254,254,0)"> </td><td style="background-color:rgb(254,254,127); background-image:none" width="15" onclick="color_picker_choose(254,254,127)"> </td><td style="background-color:rgb(254,254,254); background-image:none" width="15" onclick="color_picker_choose(254,254,254)"> </td></tr></tbody> </table> <br><table id="icon_picker" style="border-spacing:0px"> <tbody> <tr> <td> Symbool-URL:  <input id="icon_url" name="icon_url" value=""> </td></tr><tr> <td> <img src="http://dsnl.innogamescdn.com/8.30/23662/graphic/unit_map/spear.png?1e448" style="cursor: pointer" onclick="$(\'#icon_url\').val(\'/graphic/unit_map/spear.png\');"> <img src="http://dsnl.innogamescdn.com/8.30/23662/graphic/unit_map/sword.png?5a9e6" style="cursor: pointer" onclick="$(\'#icon_url\').val(\'/graphic/unit_map/sword.png\');"> <img src="http://dsnl.innogamescdn.com/8.30/23662/graphic/unit_map/axe.png?538b1" style="cursor: pointer" onclick="$(\'#icon_url\').val(\'/graphic/unit_map/axe.png\');"> <img src="http://dsnl.innogamescdn.com/8.30/23662/graphic/unit_map/archer.png?0cb28" style="cursor: pointer" onclick="$(\'#icon_url\').val(\'/graphic/unit_map/archer.png\');"> <img src="http://dsnl.innogamescdn.com/8.30/23662/graphic/unit_map/spy.png?521cb" style="cursor: pointer" onclick="$(\'#icon_url\').val(\'/graphic/unit_map/spy.png\');"> <img src="http://dsnl.innogamescdn.com/8.30/23662/graphic/unit_map/light.png?0af57" style="cursor: pointer" onclick="$(\'#icon_url\').val(\'/graphic/unit_map/light.png\');"> <img src="http://dsnl.innogamescdn.com/8.30/23662/graphic/unit_map/marcher.png?5702d" style="cursor: pointer" onclick="$(\'#icon_url\').val(\'/graphic/unit_map/marcher.png\');"> <img src="http://dsnl.innogamescdn.com/8.30/23662/graphic/unit_map/heavy.png?85dae" style="cursor: pointer" onclick="$(\'#icon_url\').val(\'/graphic/unit_map/heavy.png\');"> <img src="http://dsnl.innogamescdn.com/8.30/23662/graphic/unit_map/ram.png?a7134" style="cursor: pointer" onclick="$(\'#icon_url\').val(\'/graphic/unit_map/ram.png\');"> <img src="http://dsnl.innogamescdn.com/8.30/23662/graphic/unit_map/catapult.png?8f24e" style="cursor: pointer" onclick="$(\'#icon_url\').val(\'/graphic/unit_map/catapult.png\');"> <img src="http://dsnl.innogamescdn.com/8.30/23662/graphic/unit_map/knight.png?b9d02" style="cursor: pointer" onclick="$(\'#icon_url\').val(\'/graphic/unit_map/knight.png\');"> <img src="http://dsnl.innogamescdn.com/8.30/23662/graphic/unit_map/snob.png?46f95" style="cursor: pointer" onclick="$(\'#icon_url\').val(\'/graphic/unit_map/snob.png\');">  <img src="https://swtools.programmingtuts.nl/images/ME/defIcon.png" style="cursor: pointer" title="Made by: Xessential" onclick="$(\'#icon_url\').val(\'https://swtools.programmingtuts.nl/images/ME/defIcon.png\');">  <img src="https://swtools.programmingtuts.nl/images/ME/offIcon.png" style="cursor: pointer" title="Made By: Xessential" onclick="$(\'#icon_url\').val(\'https://swtools.programmingtuts.nl/images/ME/offIcon.png\');"></td></tr></tbody> </table> <br><input type="hidden" name="group_id" id="color_group_id" value="60785"> <input class="btn" type="submit" value="Markering veranderen en kaart opnieuw laden" style="margin-top:5px;"> </form> </div></div></div>');
        html.find('#editcolorform').find('input').last().attr('id', 'saveC');
        html.find('#editcolorform').prepend(txtArea).prepend(strong);
        html.find('#color').css({'background-color': configurations[type]['background'], 'border-radius': '100%'});
        html.find('#icon_url').val(configurations[type]['img']);
        $(elem).append(html);

        $('.ui-draggable').draggable();
        $('#saveC')
            .attr('type', 'button')
            .on('click', function (e) {
                e.preventDefault();
                var coords = $('#editcolorform').find('textarea').first().val().match(/\d{1,3}\|\d{1,3}/g);
                configurations[type]['info'] = {};
                if (coords !== null) {
                    getOwners(coords, type, false);
					
                } else {
                    configurations[type]['img'] = $('#icon_url').val();
                    configurations[type]['background'] = $('#color').css('background-color');
                    localStorage.setItem('markEnemyObject', JSON.stringify(configurations));
                    location.reload();
                }
            });
        $('#closelink_edit_color_popup').on('click', function(e) {
            e.stopPropagation();
            e.preventDefault();
            $('#edit_color_popup').remove();
        });
        $('#removeGroup').on('click', function () {
            delete configurations[type];
            localStorage.setItem('markEnemyObject', JSON.stringify(configurations));
            location.reload();
        });
    }

    function getOwners(coords, type, update, elem, last) {
        // made possible by Warre
        var url = 'https://swtools.programmingtuts.nl/Secret/TWinfo_converter.php?game_data='+encodeURIComponent(JSON.stringify(game_data))+'&input=coords&output=player_id';
        $.ajax({
            url: url,
            method: 'POST',
            async: false,
            data: { coords: JSON.stringify(coords) }
        }).done(function(ids) {
            ids = JSON.parse(ids);

            if (coords.length === ids.length) {
                for (var i = 0, l = coords.length; i < l; i++) {
                    if (coordValidity(coords[i])) {
                        if (update) {
                            elem.text(i + 1);
                            var owner = configurations[type]['info'][coords[i]];
                            if (owner !== ids[i]) {
                                alert(owner + ' =/= ' + ids[i]);
                                delete configurations[type]['info'][coords[i]];
                            }
                        } else {
                            configurations[type]['info'][coords[i]] = ids[i];
                        }
                    }
                }

                if (!update || last) {
                    if (!update) {
                        configurations[type]['img'] = $('#icon_url').val();
                        configurations[type]['background'] = $('#color').css('background-color');
                    }
                    localStorage.setItem('markEnemyObject', JSON.stringify(configurations));
                    location.reload();
                }
            }
        });

    }

    function coordValidity(coord) {
        var stringedConfigs = JSON.stringify(configurations),
            spl = coord.split('|'),
            re = new RegExp(spl[0] + '\\|' + spl[1], 'g');
        var amountOfMatches = stringedConfigs.match(re);
        amountOfMatches = amountOfMatches !== null ? amountOfMatches.length : 0;
        return amountOfMatches < 3;
    }

    function getOwnerOfVillage(coord, callback) {
        TribalWars.get("api", {
            ajax: "target_selection",
            async: false,
            input: coord,
            limit: 1,
            offset: 0,
            request_id: 6,
            type: "coord"
        }, function(e) {
            callback(e.villages[0].player_id);
        });
    }

    function addToCoords() {
        $(this).parent().find('.ME_Report').css('border', 'none');
        var type = $(this).attr('id').split('_')[1],
            coord = $(this).closest('table').parent().closest('table').find('.village_anchor').parent().text().match(/\d{1,3}\|\d{1,3}/g).slice(-1)[0].toString();
        var arrToAddCoord = Object.keys(configurations[type]['info']);
        var index = arrToAddCoord.indexOf(coord);
        var $th = $(this);
        if (index === -1) {
            if (coordValidity(coord)) {
                getOwnerOfVillage(coord, function(owner) {
                    configurations[type]['info'][coord] = owner;
                    $th.css('border', 'red 2px solid');
                    if (showMsg)  {
                        $th.closest('tr').find('p').find('strong').last().text('Toegevoegd aan ' + type + '!');
                    }
                    localStorage.setItem('markEnemyObject', JSON.stringify(configurations));
                });
            } else {
                alert(coord + ' zit al in 3 groepen!');
            }
        } else {
            delete configurations[type]['info'][coord];
            $(this).css('border', 'none');
            if (showMsg) {
                $(this).closest('tr').find('p').find('strong').last().text('Verwijderd uit ' + type + '!');
            }
            localStorage.setItem('markEnemyObject', JSON.stringify(configurations));
        }
    }

    function removeFromOtherTypes(coord, type) {
        for (var prop in configurations) {
            if (prop !== type) {
                var arr = configurations[prop]['coords'];
                var index = arr.indexOf(coord);
                if (index != -1) {
                    arr.splice(index, 1);
                }
            }
        }
    }

    function getAll(obj, count) {
        var allCoords = {};
        for (var key in obj) {
            if (obj.hasOwnProperty(key)) {
                var coords = Object.keys(obj[key]['info']);
                if (coords.length > 0) {
                    for (var i = 0, l = coords.length; i < l; i++) {
                        var c = coords[i];
                        if (allCoords.hasOwnProperty(c)) {
                            allCoords[c].push(key);
                        } else {
                            allCoords[c] = [key];
                        }
                        if (count) {
                            if (allCoords.hasOwnProperty('count')) {
                                allCoords['count'] += 1;
                            } else {
                                allCoords['count'] = 1;
                            }
                        }
                    }
                }
            }
        }

        return allCoords;
    }

    function markCoords() {
        var totalCoords = getAll(configurations, true);
        if (totalCoords['count'] > 0) {
            delete totalCoords['count'];
            var enemyMarkMap = TWMap;

            function spawnSectorReplacer(data, sector) {
                enemyMarkMap.mapHandler.enemyMarkMapspawnSector(data, sector);
                var beginX = sector.x - data.x;
                var endX = beginX + enemyMarkMap.mapSubSectorSize;
                var beginY = sector.y - data.y;
                var endY = beginY + enemyMarkMap.mapSubSectorSize;
                for (var x in data.tiles) {
                    var x = parseInt(x, 10);
                    if (x < beginX || x >= endX) {
                        continue;
                    }
                    for (var y in data.tiles[x]) {
                        var y = parseInt(y, 10);
                        if (y < beginY || y >= endY) {
                            continue;
                        }
                        var xCoord = data.x + x;
                        var yCoord = data.y + y;
                        var v = enemyMarkMap.villages[(xCoord) * 1000 + yCoord];
                        if (v) {
                            for (var key in totalCoords) {
                                if (totalCoords.hasOwnProperty(key)) {
                                    if (key == (xCoord + "|" + yCoord)) {
                                        for (var i = 0, l = totalCoords[key].length; i < l; i++) {
                                            var img = document.createElement('img');
                                            img.src = configurations[totalCoords[key][i]]['img'];
                                            img.style.position = 'absolute';
                                            img.style.margin = '17px 0 0 ' + (40 - (20 * i)) + 'px';
                                            img.style.zIndex = '50';
                                            img.style.borderRadius = '8px';
                                            img.style.background = configurations[totalCoords[key][i]]['background'];
                                            sector.appendElement(img, x - beginX, y - beginY);
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }

            enemyMarkMap.mapHandler.enemyMarkMapspawnSector = enemyMarkMap.mapHandler.spawnSector;
            enemyMarkMap.mapHandler.spawnSector = spawnSectorReplacer;
            enemyMarkMap.reload();
        }
    }

    function reshapeDiv ($div) {
        var $divClone = $div.clone();
        $divClone.css('margin-top', '10px');
        $divClone.css('position', 'relative');
        var $divCloneTbody = $divClone.find('tbody');
        $divCloneTbody.empty();
        for (var prop in configurations) {
            $divCloneTbody.append('<tr class="nowrap"><td><img src="' + configurations[prop]['img'] + '" style="border-radius:8px;background-color:' + configurations[prop]['background'] + '"></td><td>' + prop + '</td><td>'
            + '<a href="#current" class="markEnemy rename-icon" id="' + prop + '" style="vertical-align:middle;"></a><img src="http://dsnl.innogamescdn.com/8.30/23662/graphic/delete.png?78406" class="remove_ME" title="Verwijder groep" alt="Verwijder groep" data-group="' + prop + '" style="cursor:pointer;margin-left:5px;vertical-align:middle;"></td></tr>');
        }
        $divCloneTbody.append('<tr class="nowrap"><td colspan="3"><a href="#village_colors" id="newGroup">Nieuwe groep</a></td></tr>');
        $divClone.css({
            'float': 'none',
            'clear': 'both'
        });
        return $divClone;
    }


}

(function () {
    var script = document.createElement('script');
    script.textContent = '$(document).ready(' + main + ');';
    document.readyState === "complete" ? document.body.appendChild(script) : window.onload = main;
}());