// ==UserScript==
// @name         Grepolis Resources Manager
// @version      0.3_ALPHA
// @include		 /http[s]{0,1}://[a-z]{2}[0-9]{1,2}\.grepolis\.com/game*/
// @include		 https://*.forum.grepolis.com/*
// @require		 http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
// @require      https://code.jquery.com/ui/1.12.1/jquery-ui.js
// @description  A little handy script to help with resource management and more
// @author       MajorOrbital
// @copyright    2020+
// @grant        unsafeWindow
// @grant        GM_addStyle
// @namespace https://greasyfork.org/users/451401
// @downloadURL none
// ==/UserScript==

//TODO: fix dropdown for selecting levels

// GM-API?
GM = (typeof GM_info === 'object');
var uw = unsafeWindow

GM_addStyle(`
#GRM_window{background-color: #ffe2a2;
    display: block;
    height: 550px;
    width: 780px;
    z-index: 1100;
    position: absolute;
    top: 100px;
    left: 30vw;
    border: 2px black solid
}
#GRM_toolbar{
    height: 30px;
    border-bottom: 2px black solid;
}
#GRM_toolbar_list{
    list-style-type: none;
    margin: 0;
    padding-top:3px;
    padding-left: 1px;
    overflow: hidden;
    top: 10px;
}
#GRM_title{
    padding-top: 3px;
    float: left;
    width: 40%;
    text-align: left;
}
.GRM_toolbar_item{
    height: 25px;
    float: left;
    width: 27%;
    text-align: center;
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-top: 1px solid black;
    border-top-left-radius: 5px 5px;
    border-top-right-radius: 5px 5px;
    margin: 1px
}
#GRM_close{
    padding-top: 5px;
    float: left;
}
#GRM_close_img{
    margin-left: 10px;
}
.GRM_building_image{
    height: 40px;
    width: 40px;
    letter-spacing: -1px;
    margin: 0;
    display: inline-grid;
}

.GRM_building_level{
    position: relative;
    bottom: -25px;
    right: -10px;
    color: white;
    font-weight: bolder;
}

.GRM_selector{
    height: 40px;
    width: 30px;
    top: 10px;
    display: inline;
    position: relative;
}

.GRM_input{
    width: 25px;
}
`);

function openGRMWindow(){
   var grmWindow = document.querySelector("#GRM_window");
    if (grmWindow === null) {
        initializeGRMWindow();
        openGRMWindow();
        return;
    }
    //console.log(uw.ITowns.getCurrentTown());
    fillGRMWindow(uw.ITowns.getCurrentTown());
    $("#GRM_window").css("display","block");
}

function fillGRMWindow(town){
    $("#GRM_city_name").text(`${town.getName()}`)
    const buildings = town.getBuildings().getLevels();
    $("#GRM_main_level").text(`${buildings.main}`);
    $("#GRM_hide_level").text(`${buildings.hide}`);
    $("#GRM_place_level").text(`${buildings.place}`);
    $("#GRM_lumber_level").text(`${buildings.lumber}`);
    $("#GRM_stoner_level").text(`${buildings.stoner}`);
    $("#GRM_ironer_level").text(`${buildings.ironer}`);
    $("#GRM_market_level").text(`${buildings.market}`);
    $("#GRM_docks_level").text(`${buildings.docks}`);
    $("#GRM_barracks_level").text(`${buildings.barracks}`);
    $("#GRM_wall_level").text(`${buildings.wall}`);
    $("#GRM_storage_level").text(`${buildings.storage}`);
    $("#GRM_farm_level").text(`${buildings.farm}`);
    $("#GRM_academy_level").text(`${buildings.academy}`);
    $("#GRM_temple_level").text(`${buildings.temple}`);
    var json_data = uw.ITowns.getCurrentTown().getBuildings().getBuildings();
    var result = [];

    var counter = 0;
    for(var i in json_data){
        if(counter !== 14){
            counter++;
            continue;
        }
        result.push([i, json_data [i]]);
    }

    var special1 = getSpecialBuilding(result.slice(0,4));
    var special2= getSpecialBuilding(result.slice(4));


    var specialImage1 = special1 === null ? 'url(https://i.imgur.com/ScMZ4ns.png)' : `url('https://gpnl.innogamescdn.com/images/game/main/${special1}.png')`;
    var specialImage2 = special2 === null ? 'url(https://i.imgur.com/L26ZuJ4.png)' : `url('https://gpnl.innogamescdn.com/images/game/main/${special2}.png')`;


    $("#GRM_special_1_background").css("background-image", specialImage1);
    $("#GRM_special_2_background").css("background-image", specialImage2);
}

function getSpecialBuilding(specialList){
 var specialBuilding = null;
    for(let i in specialList){
        if(specialList[i][1]===1) return specialList[i][0];
    }
    return null;
}

function initializeGRMWindow(){
    var left = document.querySelector("body").clientWidth;
   $("body").append(`
<div id="GRM_window">
    <div id="GRM_toolbar">
        <ul id="GRM_toolbar_list">
            <li class="GRM_toolbar" id="GRM_title">Grepolis Resources Manager</li>
            <li class="GRM_toolbar_item" id="GRM_builder">City Manager</li>
            <li class="GRM_toolbar_item" id="GRM_resources">Resource Manager</li>
            <li id="GRM_close"><img id="GRM_close_img" src="https://i.imgur.com/cceOkEu.png"></li>
        </ul>
    </div>
    <div id="GRM_buildings">
        <label id="city_name"></label>
        <table>
            <tr>
                <th colspan="4" id="GRM_city_name">
                </th>
            </tr>
            <tr>
                <td colspan="4" id="GRM_main" class="building">
                    <div class="GRM_container">
                        <div class="GRM_building_image"
                             style="background-image: url('https://gpnl.innogamescdn.com/images/game/main/main.png');">
                            <span class="GRM_building_level" id="GRM_main_level"></span>
                        </div>
                        <div class="GRM_selector" id="GRM_main_level_pick">
                            <input type="text" class="GRM_input ac_input" value="1" id="GRM_main_input"
                                   name="Main Level">
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td id="GRM_lumber">
                    <div class="GRM_container">
                        <div class="GRM_building_image"
                             style="background-image: url('https://gpnl.innogamescdn.com/images/game/main/lumber.png');">
                            <span class="GRM_building_level" id="GRM_lumber_level"></span>
                        </div>
                        <div class="GRM_selector" id="GRM_lumber_selector"><input type="text" class="GRM_input ac_input"
                                                                                  value="1" id="GRM_lumber_input"
                                                                                  name="lumber_level"></div>
                    </div>
                </td>
                <td id="GRM_farm">
                    <div class="GRM_container">
                        <div class="GRM_building_image"
                             style="background-image: url('https://gpnl.innogamescdn.com/images/game/main/farm.png');">
                            <span class="GRM_building_level" id="GRM_farm_level"></span>
                        </div>
                        <div class="GRM_selector" id="GRM_lumber_farm"><input type="text" class="GRM_input ac_input"
                                                                              value="1" id="GRM_farm_input"
                                                                              name="farm_level"></div>
                    </div>
                </td>
                <td id="GRM_stoner">
                    <div class="GRM_container">
                        <div class="GRM_building_image"
                             style="background-image: url('https://gpnl.innogamescdn.com/images/game/main/stoner.png');">
                            <span class="GRM_building_level" id="GRM_stoner_level"></span>
                        </div>
                        <div class="GRM_selector" id="GRM_stoner_selector"><input type="text" class="GRM_input ac_input"
                                                                                  value="1" id="GRM_stoner_input"
                                                                                  name="stoner_level"></div>
                    </div>
                </td>
                <td id="GRM_storage">
                    <div class="GRM_container">
                        <div class="GRM_building_image"
                             style="background-image: url('https://gpnl.innogamescdn.com/images/game/main/storage.png');">
                            <span class="GRM_building_level" id="GRM_storage_level"></span>
                        </div>
                        <div class="GRM_selector" id="GRM_storage_selector"><input type="text"
                                                                                   class="GRM_input ac_input" value="1"
                                                                                   id="GRM_storage_input"
                                                                                   name="storage_level"></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td id="GRM_ironer">
                    <div class="GRM_container">
                        <div class="GRM_building_image"
                             style="background-image: url('https://gpnl.innogamescdn.com/images/game/main/ironer.png');">
                            <span class="GRM_building_level" id="GRM_ironer_level"></span>
                        </div>
                        <div class="GRM_selector" id="GRM_ironer_selector"><input type="text" class="GRM_input ac_input"
                                                                                  value="1" id="GRM_ironer_input"
                                                                                  name="ironer_level"></div>
                    </div>
                </td>
                <td id="GRM_barracks">
                    <div class="GRM_container">
                        <div class="GRM_building_image"
                             style="background-image: url('https://gpnl.innogamescdn.com/images/game/main/barracks.png');">
                            <span class="GRM_building_level" id="GRM_barracks_level"></span>
                        </div>
                        <div class="GRM_selector" id="GRM_barracks_selector"><input type="text"
                                                                                    class="GRM_input ac_input" value="1"
                                                                                    id="GRM_barracks_input"
                                                                                    name="barracks_level"></div>
                    </div>
                </td>
                <td id="GRM_temple">
                    <div class="GRM_container">
                        <div class="GRM_building_image"
                             style="background-image: url('https://gpnl.innogamescdn.com/images/game/main/temple.png');">
                            <span class="GRM_building_level" id="GRM_temple_level"></span>
                        </div>
                        <div class="GRM_selector" id="GRM_temple_selector"><input type="text" class="GRM_input ac_input"
                                                                                  value="1" id="GRM_temple_input"
                                                                                  name="temple_level"></div>
                    </div>
                </td>
                <td id="GRM_market">
                    <div class="GRM_container">
                        <div class="GRM_building_image"
                             style="background-image: url('https://gpnl.innogamescdn.com/images/game/main/market.png');">
                            <span class="GRM_building_level" id="GRM_market_level"></span>
                        </div>
                        <div class="GRM_selector" id="GRM_market_selector"><input type="text" class="GRM_input ac_input"
                                                                                  value="1" id="GRM_market_input"
                                                                                  name="market_level"></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td id="GRM_docks">
                    <div class="GRM_container">
                        <div class="GRM_building_image"
                             style="background-image: url('https://gpnl.innogamescdn.com/images/game/main/docks.png');">
                            <span class="GRM_building_level" id="GRM_docks_level"></span>
                        </div>
                        <div class="GRM_selector" id="GRM_docks_selector"><input type="text" class="GRM_input ac_input"
                                                                                 value="1" id="GRM_docks_input"
                                                                                 name="dock_level"></div>
                    </div>
                </td>
                <td id="GRM_academy">
                    <div class="GRM_container">
                        <div class="GRM_building_image"
                             style="background-image: url('https://gpnl.innogamescdn.com/images/game/main/academy.png');">
                            <span class="GRM_building_level" id="GRM_academy_level"></span>
                        </div>
                        <div class="GRM_selector" id="GRM_academy_selector"><input type="text"
                                                                                   class="GRM_input ac_input" value="1"
                                                                                   id="GRM_academy_input"
                                                                                   name="academy_level"></div>
                    </div>
                </td>
                <td id="GRM_wall">
                    <div class="GRM_container">
                        <div class="GRM_building_image"
                             style="background-image: url('https://gpnl.innogamescdn.com/images/game/main/wall.png');">
                            <span class="GRM_building_level" id="GRM_wall_level"></span>
                        </div>
                        <div class="GRM_selector" id="GRM_wall_selector"><input type="text" class="GRM_input ac_input"
                                                                                value="1" id="GRM_wall_input"
                                                                                name="wall_level"></div>
                    </div>
                </td>
                <td id="GRM_hide">
                    <div class="GRM_container">
                        <div class="GRM_building_image"
                             style="background-image: url('https://gpnl.innogamescdn.com/images/game/main/hide.png');">
                            <span class="GRM_building_level" id="GRM_hide_level"></span>
                        </div>
                        <div class="GRM_selector" id="GRM_hide_selector"><input type="text" class="GRM_input ac_input"
                                                                                value="1" id="GRM_hide_input"
                                                                                name="hide_level"></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="2" id="GRM_special_1">
                    <div class="GRM_building_image GRM_special" id="GRM_special_1_background"></div>
                </td>
                <td colspan="2" id="GRM_special_2">
                    <div class="GRM_building_image GRM_special" id="GRM_special_2_background"></div>
                </td>
            </tr>
        </table>
    </div>
</div>`);
    $('#GRM_window').draggable();
    var close = document.querySelector("#GRM_close_img");
    close.addEventListener("click", function(){
        $("#GRM_window").css("display","none");
    });
    $(".GRM_input").each( function(){
       $(this).on('input', function(){
           var input = $(this);
           console.log(input.val());
       });
    });
}

function addMenuItem(){
    $("#ui_box > div.nui_main_menu > div.middle > div.content > ul").append(
    `<li id="GRM_Button">
        <span class="content_wrapper">
            <span class="button_wrapper">
                <span class="button">
                    <span class="icon" style="background: url(&quot;https://s19.directupload.net/images/200222/6wtpwmkp.png&quot;) no-repeat;"></span>
                </span>
            </span>
            <span class="name_wrapper">
                <span class="name">GRM</span>
            </span>
        </span>
    </li>`);
    var li = document.querySelector("#GRM_Button");
    li.addEventListener("click", openGRMWindow);
}


function startup() {
    'use strict';
    addMenuItem();
    //console.log(uw.GameModels.TownIdList());

};

startup();