class Engine {

    overlay_inv = null;
    overlay_eq = null;
    mutation_inveq = null;

    constructor() {
        this._prepare_css();
        this._add_overlay();
        $("tg-right-sidebar").css("zoom", "0.7");

        MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

        const mutation_inveq_temp = new MutationObserver(function (mutations, observer) {

            let overlay_equip_container = $(".cdk-overlay-container");

            if (!overlay_equip_container.length)
                return;

            console.log("trovato eqinv...");

            this.disconnect();


            $global_handler.mutation_inveq = new MutationObserver($global_handler.update_eqine);

            console.log("attaching observer");

            overlay_equip_container.each(function () {

                $global_handler.mutation_inveq.observe(this, {
                    subtree: true,
                    childList: true
                });
            });

            //overlay_equip_container.css("z-index", "0");

        });

        $("body").each(function () {
            mutation_inveq_temp.observe(this, {
                subtree: true,
                childList: true
            });
        });

    }

    detach_engine() {
        this.mutation_inveq.disconnect();
    }

    update_eqine(mutations, observer) {
        console.log("try update_eginv");

        var cont = $(".eqinv-container:last");

        if (!cont.length)
            return;

        var newcont = cont.clone();

        $(newcont).find(".eqinv-switch-action").remove();

        var htm = newcont.html();

        if (htm.indexOf("Inventario") !== -1) {
            console.log("update inventory");
            $global_handler.overlay_inv.html(newcont.html());
        } else if(htm.indexOf("Equipaggiamento")){
            console.log("update equip");
            $global_handler.overlay_eq.html(newcont.html());
        }

    }

    _prepare_css() {
        $("<style type='text/css'> .overlay_custom{position:fixed;top:0;left:0;width:380px;height:350px;background-color:#000;z-index:10000} </style>").appendTo("head");
    }

    _add_overlay() {

        var overlay = jQuery('<div id="overlay_custom_content_inv_drag" class="b-ironlight-mini tg-box overlay_custom">' +
            ' <div id="overlay_custom_content_inv" class="tg-dialog-content-nopadding tg-shadow-inset"> </div><div class="tg-border-box"><div class="tg-border tg-border-top"></div><div class="tg-border tg-border-left"></div><div class="tg-border tg-border-right"></div><div class="tg-border tg-border-bottom"></div></div>' +
            '</div>' +
            '<div id="overlay_custom_content_eq_drag" class="b-ironlight-mini tg-box overlay_custom">' +
            ' <div id="overlay_custom_content_eq" class="tg-dialog-content-nopadding tg-shadow-inset"> </div><div class="tg-border-box"><div class="tg-border tg-border-top"></div><div class="tg-border tg-border-left"></div><div class="tg-border tg-border-right"></div><div class="tg-border tg-border-bottom"></div></div>' +
            '</div>');
        overlay.appendTo(document.body);

        this.overlay_inv = $("#overlay_custom_content_inv");
        this.overlay_eq = $("#overlay_custom_content_eq");


        // Make the DIV element draggable:
        //
        dragElement(document.getElementById("overlay_custom_content_inv_drag"));
        dragElement(document.getElementById("overlay_custom_content_eq_drag"));

        function dragElement(elmnt) {
            var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
            if (document.getElementById(elmnt.id + "header")) {
                // if present, the header is where you move the DIV from:
                document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
            } else {
                // otherwise, move the DIV from anywhere inside the DIV:
                elmnt.onmousedown = dragMouseDown;
            }

            function dragMouseDown(e) {
                e = e || window.event;
                e.preventDefault();
                // get the mouse cursor position at startup:
                pos3 = e.clientX;
                pos4 = e.clientY;
                document.onmouseup = closeDragElement;
                // call a function whenever the cursor moves:
                document.onmousemove = elementDrag;
            }

            function elementDrag(e) {
                e = e || window.event;
                e.preventDefault();
                // calculate the new cursor position:
                pos1 = pos3 - e.clientX;
                pos2 = pos4 - e.clientY;
                pos3 = e.clientX;
                pos4 = e.clientY;
                // set the element's new position:
                elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
                elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
            }

            function closeDragElement() {
                // stop moving when mouse button is released:
                document.onmouseup = null;
                document.onmousemove = null;
            }
        }

    };
}


if (window.script === undefined) {


    if (window.main_function === undefined) {
        $main_function = function () {
            $(document).ready(function () {
                console.log("creo engine");
                $global_handler = new Engine();


                // define what element should be observed by the observer
                // and what types of mutations trigger the callback

            });
        };
    }
    console.log("carico jquery");
    $script = document.createElement("SCRIPT");
    $script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js';
    $script.type = 'text/javascript';
    $script.onload = function () {
        var $ = window.jQuery;
        // Use $ here...
        $main_function();
    };
    document.getElementsByTagName("head")[0].appendChild($script);
}