class Title extends EventObject {
    #manager = null;
    #ignoreEvents = false;
    #dom = null;
    #title = null;
    showImportance = true;
    #index = 0;
    #haveSetting = true;
    #parentNode = null;
    #importance = 0;
    #margin = 15;
    #id = null;
    #name = null;
    #ready = false;
    #activeSetting = false;
    #settingAlradyShowed = false;
    #shift = 0;
    #value = 0;
    #width = 0;
    #step = 1;
    #lastValue = 0;
    #steptCouldown = 10;
    #option = {
        value: {
            min: 0,
            max: 100,
            threshold: 60
        },
        width: {
            min: 40,
            threshold: 50,
            max: 180,
        },
    };
    #controls = {};
    #mouseDownTimer = null;
    #setEvents() {
        const controls = this.#dom.getElementsByClassName('control');
        for (var i = 0; i < controls.length; i++) {
            if (controls[i].classList.contains('minus')) {
                this.#controls['minus'] = controls[i];
            }
            if (controls[i].classList.contains('plus')) {
                this.#controls['plus'] = controls[i];
            }
            if (controls[i].classList.contains('settings')) {
                this.#controls['settings'] = controls[i];
                let $self = this;
                this.#controls['settings'].addEventListener('click', (this.#controls['settings'].evt = function () {
                    if (!$self.#activeSetting) {
                        $self.#showSettingBlock(true);
                    } else {
                        $self.dispatchEvent('closeSettings', { 'id': $self.#id }, $self);
                        $self.activeSetting = false;
                    }
                }));
            }
        }
        this.#setPlusMinusEvent(this.#controls['minus']);
        this.#setPlusMinusEvent(this.#controls['plus']);
    }
    #showSettingBlock(byButton) {
        var byButton = byButton || false;
        if (!this.#ready) {
            return;
        }
       
        this.dispatchEvent('needSettings', { 'id': this.#id, 'button': byButton }, this);
        this.activeSetting = true;
       
    }
    #tryToShowSettingBlock() {
        if (!this.#ignoreEvents && this.#ready && !this.#settingAlradyShowed && this.#shift > 0) {
            if(this.#manager.autoShowPopup){
                this.#option.value.threshold = this.#manager.popupShowValue ?? this.#option.value.threshold;
                this.#option.value.threshold = parseInt(this.#option.value.threshold);
                if(parseInt(this.#title) > this.#option.value.threshold){
                    this.#settingAlradyShowed = true;
                    this.#showSettingBlock();
                }
            }
        }
    }
    set activeSetting(value) {
        let button = this.#controls['settings'];
        if (button) {
            if (value) {
                button.classList.add('active');
            } else {
                button.classList.remove('active');
            }
        }
        this.#activeSetting = value;
        
    }
    #startChageValueInteval(step) {
        let $step = step;
        let $self = this;
        this.#lastValue = this.value;
        $self.$mouseDownTimer = setInterval(function () {
            $self.value += $step;
            $self.dispatchEvent('change', { 'value': $self.value, 'oldValue': $self.#lastValue }, $self);
        }, $self.#steptCouldown);
    }
    #stopChangeValueInterval() {
        let $self = this;
        if ($self.$mouseDownTimer) {
            clearInterval($self.$mouseDownTimer);
            $self.$mouseDownTimer = null;
            $self.dispatchEvent('blur', { 'value': $self.value, 'oldValue': $self.#lastValue }, this);
            $self.#lastValue = $self.value;
        }
    }

    #showValue() {
        if (this.#dom && this.showImportance) {
            let valueDom = this.#dom.getElementsByClassName('value')[0];
            if (valueDom) {
                valueDom.innerText = Number(this.#value).toFixed(1);
            }
        }
    }
    showValue(value) {
        let valueDom = this.#dom.getElementsByClassName('value')[0];
        if (valueDom) {
            valueDom.innerText = value + '%'
        }
        this.#title = value;
    }
    #changeDomClassNameOnWidthChange() {
        if (this.#width < this.#option.width.threshold) {
            this.#dom.classList.add('small');
        } else {
            this.#dom.classList.remove('small');
        }
        if (parseInt(this.#title) < 1) {
            this.#dom.classList.add('zerro');
        } else {
            this.#dom.classList.remove('zerro');
        }
    }
    #setPlusMinusEvent(dom) {
        if (dom) {
            let $step = this.#step * (dom.classList.contains('minus') ? -1 : 1);
            let $self = this;
            dom.addEventListener('mousedown', (dom.mousedown = function () {
                $self.#startChageValueInteval($step);
            }));
            document.body.addEventListener('mouseup', (dom.mouseup = function () {
                $self.#stopChangeValueInterval();
            }));
            dom.addEventListener('touchstart', (dom.touchstart = function () {
                $self.#startChageValueInteval($step);
            }),{ passive: false });
            document.body.addEventListener('touchend', (dom.touchend = function () {
                $self.#stopChangeValueInterval();
            }));
            document.body.addEventListener('touchcancel', (dom.touchcancel = function () {
                $self.#stopChangeValueInterval();
            }));
            document.body.addEventListener("mouseout", (dom.mouseout = function (e) {
                if (e.toElement === null || e.toElement.nodeName == 'HTML') {
                    if ($self.$mouseDownTimer) {
                        $self.#stopChangeValueInterval();
                    }
                }
            }));
        }

    }
    preventDefault() {
        this.#ignoreEvents = true;
    }
    resolveDefault() {
        this.#ignoreEvents = false;
    }
    get intImportance(){
        return parseInt(this.#title) ?? null;
    }
    get maxValue() {
        return this.#option.value.max;
    }
    get minValue() {
        return this.#option.value.min;
    }
    get parentNode() {
        return this.#parentNode ?? document.body;
    }
    get dom() {
        return this.#dom ?? document.body;
    }
    set dom(dom) {
        var dom = dom || document.body;
    }
    constructor(dom, parentNode, option ,manager) {
        super();
        this.#dom = dom;
        this.#manager = manager;
        this.#parentNode = parentNode;
        let nodes = dom.getElementsByTagName("NODE");
        const fieldMapping = {
            name: "name",
            idx: "index",
            importance: "importance",
            fieldid: "id",
        };
        if(this.#dom.getAttribute("setting") && this.#dom.getAttribute("setting") == "false"){
            this.#haveSetting = false;
            try{
                this.#dom.getElementsByClassName("settings")[0].style.display = "none";
            }catch(e){

            }
        }
        for (var i = 0; i < nodes.length; i++) {
            if (nodes[i] && nodes[i].getAttribute("auguri-app-setting-display")) {
                const attribute = nodes[i].getAttribute("auguri-app-setting-display");
                if (attribute) {
                    const fieldName = attribute.substring(attribute.indexOf(".") + 1);
                    const property = fieldMapping[fieldName];
                    if (property) {
                        //this[`#${property}`] = nodes[i].innerText.trim();
                        switch (property) {
                            case "name":
                                this.#name = nodes[i].innerText.trim();
                                break;
                            case "index":
                                this.#index = nodes[i].innerText.trim();
                                break;
                            case "importance":
                                this.#importance = nodes[i].innerText.trim();
                                break;
                            case "id":
                                this.#id = nodes[i].innerText.trim();
                                break;
                        }
                    }
                }
            }
        }
        this.#dom.style.marginLeft = (this.#margin - 2) + "px";
        this.#dom.style.maxWidth = this.#option.width.max + "px";
        this.#dom.style.minWidth = this.#option.width.min + "px";
        this.#dom.title = this.#name;
        this.#value = parseFloat(this.#importance);
        this.value = this.#value;
        this.#setEvents();
        this.#ready = true;
    }
    get haveSettings(){
        return this.#haveSetting;
    }
    get value() {
        return this.#value;
    }
    get maxWidth() {
        return this.#option.width.max;
    }
    get minWidth() {
        return this.#option.width.min;
    }
    get id() {
        return this.#id;
    }
    set value(value) {
        let $self = this;
        let hasChange = value != this.#value;
        $self.#lastValue = this.#value;
        this.#value = value < this.#option.value.min ? this.#option.value.min : (value > this.#option.value.max ? this.#option.value.max : value);
        let widthRange = this.#option.width.max - this.#option.width.min;
        let valueRange = this.#option.value.max - this.#option.value.min;
        this.#width = this.#option.width.min + ((this.#value - this.#option.value.min) / valueRange) * widthRange;
        this.#dom.style.width = this.#width + 'px';
        this.#shift = this.#width - this.#lastValue;
        this.#lastValue = this.value;
        this.#changeDomClassNameOnWidthChange();
        if (hasChange && !this.#ignoreEvents) {
            $self.dispatchEvent('change', { 'value': $self.value, 'oldValue': $self.#lastValue }, $self);
            $self.#lastValue = $self.value;
        }

        this.#tryToShowSettingBlock();
        this.#showValue();
    }
    get width() {
        const width = this.#dom.getBoundingClientRect().width;
        return width < 700 ? 700 : width;
    }
    set width(value) {
        let $self = this;
        let hasChange = value != this.#width;
        $self.#lastValue = this.#value;
        this.#width = value < this.#option.width.min ? this.#option.width.min : (value > this.#option.width.max ? this.#option.width.max : value);
        this.#dom.style.width = this.#width + 'px';
        this.#shift = this.#width - this.#lastValue;
        this.#lastValue = this.#width;
        let widthRange = this.#option.width.max - this.#option.width.min;
        let valueRange = this.#option.value.max - this.#option.value.min;
        this.#value = this.#option.value.min + ((this.#width - this.#option.width.min) / widthRange) * valueRange;
        if (hasChange && !this.#ignoreEvents) {
            $self.dispatchEvent('change', { 'value': $self.value, 'oldValue': $self.#lastValue }, $self);
            $self.#lastValue = $self.value;
        }
        this.#changeDomClassNameOnWidthChange();
        this.#tryToShowSettingBlock();
        this.#showValue();
    }

    setBaseParam(width, maxWidth) {
        let $self = this;
        this.#width = width;
        this.#dom.style.width = this.#width + 'px';
        this.#option.width.max = maxWidth;
        this.#dom.style.maxWidth = this.#option.width.max + "px";
    }

    dynamicallyChangeWidth(value) {
        if (!value) {
            return;
        }
        console.log(this.#dom);
        let width = this.#dom.getBoundingClientRect().width;
        width = width < 700 ? 700 : width;
        let newWidth = width + value;
        newWidth = Math.max(this.#option.width.min, Math.min(newWidth, this.#option.width.max));
        
        this.#dom.style.width = newWidth + 'px';
        this.#width = newWidth;
        this.#shift = this.#width - this.#lastValue;
        this.#lastValue = this.#width;

        let widthRange = this.#option.width.max - this.#option.width.min;
        let valueRange = this.#option.value.max - this.#option.value.min;

        let newValue = this.#option.value.min + ((newWidth - this.#option.width.min) / widthRange) * valueRange;

        if (newWidth <= this.#option.width.min) {
            newValue = this.#option.value.min;
        } else if (newWidth >= this.#option.width.max) {
            newValue = this.#option.value.max;
        }

        if ((value > 0 && newValue < this.#value) || (value < 0 && newValue > this.#value)) {
            newValue = this.#value;
        }
        this.#value = newValue;

        this.#changeDomClassNameOnWidthChange();
        this.#tryToShowSettingBlock();
        this.#showValue();
    }

    changeSize(newWidth) {
        let proportion = this.#width / newWidth;
        this.#width = newWidth;
        let widthRange = this.#option.width.max - this.#option.width.min;
        let newWidthRange = widthRange / proportion;
        this.#option.width.max = this.#option.width.max / proportion;
        this.#dom.style.maxWidth = this.#option.width.max + "px";
        this.#dom.style.width = this.#width + 'px';
    }

}
class TileController extends EventObject {
    static RecalculationMode = Object.freeze({
        WIDTH: 'width',
        VALUE: 'value',
        NONE: 'none'
    });
    #dom = null;
    #rowWidth = 0;
    #shiftLeft = 0;
    #margin = 11;
    #tiles = [];
    #lockWhenAlone = true;
    #move = null;
    autoShowPopup = true;
    popupShowValue = 0;
    #settingBlock = null;
    #settingTile = null;
    #isSettingBlockWaitToClose = false;
    #childRecal = true;
    #childRecalOnBlur = false; 
    #resizeTarget = null;
    #resizeTargetLastValue = 0;
    #tilesSumm = 0;
    constructor() {
        super();
        this.RecalculationMode = TileController.RecalculationMode.VALUE;
    }
    get parentNode() {
        return this.#dom ?? document.body;
    }
    set parentNode(dom) {
        var dom = dom || document.body;
        if (this.#dom != dom) {
            this.#free();
            this.#dom = dom;
            this.#init();
        }
        this.#dom = dom;
    }


    #recalculateСhildrenWidths(mainTile) {
        var mainTile = mainTile || null;
        let availableWidth = this.#rowWidth;
        let totalFixedWidth = 0; 
        let summ = 0;
        if (this.#tiles.length > 0) {
            for (let i = 0; i < this.#tiles.length; i++) {
                if (this.#tiles[i]) {
                    summ += parseInt( this.#tiles[i].value);   
                    totalFixedWidth += this.#tiles[i].minWidth;
                }
            }
            let totalMargin = this.#margin * (this.#tiles.length - 1);
            let remainingWidth = availableWidth - totalFixedWidth - totalMargin;
            if (remainingWidth < 0) {
                remainingWidth = 0;
            }
            for (let i = 0; i < this.#tiles.length; i++) {
                if (this.#tiles[i]) {
                    let text = '0%';
                    if (this.#tiles[i].value > 1) {
                        let proportion = this.#tiles[i].value / summ;
                        let additionalWidth = remainingWidth * proportion;
                        let newWidth = this.#tiles[i].minWidth + additionalWidth;
                        console.log(`Tile ${i}: Old width: ${this.#tiles[i].width}, New width: ${newWidth}`);
                        this.#tiles[i].changeSize(newWidth);
                        text = (100 * proportion).toFixed();
                       
                    }
                    this.#tiles[i].showValue(text);
                    //this.#tiles[i].showValue(this.#tiles[i].value.toFixed(0));//check this
                }
            }
        }
    }
    
    #recalculateСhildrenValues(mainTile = null, oldValue = 0) {
        let total = 0;
        this.#tiles.forEach((t) => {
            total += t.value;
        });
        if (mainTile === null) {
            if (total <= 0) {
                let portion = 100 / this.#tiles.length;
                this.#tiles.forEach((tile) => {
                    tile.preventDefault();
                    tile.value = portion; 
                    tile.showValue(String(portion.toFixed(0))); 
                    tile.resolveDefault();
                });
            } else {
                
                let factor = 100 / total;
                this.#tiles.forEach((tile) => {
                    tile.preventDefault();
                    let newVal = tile.value * factor;
                    tile.value = newVal;
                    tile.showValue(String(newVal.toFixed(0)));
                    tile.resolveDefault();
                });
            }
    
        } else {
            const newValue = mainTile.value; 
            const oldMain = oldValue;         
            const oldOthers = (total - oldMain);
            if (oldOthers === 0 && this.#lockWhenAlone) {
                if (newValue < oldMain) {
                    mainTile.preventDefault();
                    mainTile.value = oldMain;
                    mainTile.showValue(String(oldMain.toFixed(0)));
                    mainTile.resolveDefault();
                    return;
                }
            }
            if (newValue < 0) {
                mainTile.preventDefault();
                mainTile.value = 0;
                mainTile.showValue('0');
                mainTile.resolveDefault();
            } else if (newValue > 100) {
                mainTile.preventDefault();
                mainTile.value = 100;
                mainTile.showValue('100');
                mainTile.resolveDefault();
            }
            let finalValueMain = mainTile.value;
            let leftForOthers = 100 - finalValueMain;
            if (leftForOthers < 0) {
               
                leftForOthers = 0;
            }
            let currentSumOthers = 0;
            this.#tiles.forEach((t) => {
                if (t !== mainTile) {
                    currentSumOthers += t.value;
                }
            });
            let factor = (currentSumOthers > 0)
                ? (leftForOthers / currentSumOthers)
                : 0;
    
            this.#tiles.forEach((tile) => {
                tile.preventDefault();
                if (tile !== mainTile) {
                    let newVal = tile.value * factor;
                    tile.value = newVal;
                    tile.showValue(String(newVal.toFixed(0)));
                } else {
                   
                    tile.showValue(String(finalValueMain.toFixed(0)));
                }
                tile.resolveDefault();
            });
        }
        let sumAfter = 0;
        this.#tiles.forEach((t) => { sumAfter += t.value; });
        this.#tilesSumm = sumAfter; 
        if (this.#tiles.length > 0) {
            let totalFixedWidth = 0;
            this.#tiles.forEach((tile) => {
                totalFixedWidth += tile.minWidth;
            });
           
            let totalMargin = this.#margin * (this.#tiles.length - 1);
            let availableWidth = this.#rowWidth - totalMargin;
            let remainingFlex = availableWidth - totalFixedWidth;
            if (remainingFlex < 0) {
                remainingFlex = 0;
            }
    
            this.#tiles.forEach((tile) => {
                tile.preventDefault();
                let proportion = (sumAfter > 0) ? (tile.value / sumAfter) : 0;
                let newWidth = tile.minWidth + remainingFlex * proportion;
                tile.changeSize(newWidth);
                tile.resolveDefault();
            });
        }
    }
    
    

    #updateTilesSum() {
        let total = 0;
        this.#tiles.forEach(t => {
            total += t.value;
        });
        this.#tilesSumm = total;
    }
    
    

    #recalculateСhildrenValuesold(title, value) {
        const newValue = mainTile.value;
        let skip = mainTile;
        let old = oldValue;
        let summ = this.#tilesSumm;
        let rightSide = 100 - oldValue / summ * 100;
        let leftSide = 100 - mainTile.value / summ * 100;
        if (rightSide == 0) {
            return;
        }
        this.#tiles.forEach(function (item) {
            if (item != skip) {
                item.preventDefault();
                let calcValue = item.width * (leftSide / rightSide);
                if (!isNaN(calcValue)) {
                    item.width = calcValue;
                }
                item.resolveDefault();
            }
        });
    }


    #recalculateParams(mainTile, oldValue) {
        if (!this.#childRecal || this.#tiles.length == 0) {
            return;
        }
       
        switch (this.RecalculationMode) {
            case TileController.RecalculationMode.WIDTH:
                this.#recalculateСhildrenWidths(mainTile);
                break;
            case TileController.RecalculationMode.VALUE:
                this.#recalculateСhildrenValues(mainTile,oldValue);
                break;
            case TileController.RecalculationMode.NONE:
                return;
                break;
        }
    }

    #getSumm() {
        this.#tilesSumm = 0;
        for (var i = 0; i < this.#tiles.length; i++) {
            this.#tilesSumm += this.#tiles[i].value;
        }
    }

    #getSizeOptions() {
        const contentRect = this.#dom.getBoundingClientRect();
        this.#rowWidth = window.innerWidth <= contentRect.width ? window.innerWidth : (contentRect.width < 700 ? 700 : contentRect.width);
        this.#rowWidth = this.#rowWidth - 200;
        this.#shiftLeft = contentRect.left;
    }

    #init(dom) {
        let $self = this;
        let tiles = this.#dom.getElementsByClassName("tile");
        this.#tilesSumm = 0;
        this.#getSizeOptions();
        [].forEach.call(tiles, function (item) {
            let nodes = item.getElementsByTagName("NODE");
            for (var i = 0; i < nodes.length; i++) {
                if (nodes[i] && nodes[i].getAttribute("auguri-app-setting-display")) {
                    const attribute = nodes[i].getAttribute("auguri-app-setting-display");
                    if (attribute) {
                        const fieldName = attribute.substring(attribute.indexOf(".") + 1);
                        if (fieldName == "importance") {
                            let value = parseInt(nodes[i].innerText.trim());
                            $self.#tilesSumm += isNaN(value) ? 0 : value;
                        }
                    }
                }
            }
        });
        [].forEach.call(tiles, function (item) {
            if (item.getAttribute("tile") && item.getAttribute("tile") != "false") {
                let tile = new Title(item, $self.#dom, { 'parentSumm': $self.#tilesSumm, 'parentWidth': $self.#rowWidth }, $self);
                
                tile.addEventListener('blur', function (e) {
                    if ($self.#childRecal && $self.#childRecalOnBlur) {
                        $self.#recalculateParams();
                    }
                    $self.#submit();
                });
                tile.addEventListener('change', function (e) {
                    if ($self.#childRecal && !$self.#childRecalOnBlur) {
                        $self.#recalculateParams(e.target, e.oldValue);
                    }
                    $self.dispatchEvent('change', e, this);
                });
                tile.addEventListener('closeSettings', function (e) {
                    if ($self.#settingBlock) {
                        $self.#hideSettingBlock(e);
                    }
                });
                tile.addEventListener('needSettings', function (e) {
                    if ($self.#settingBlock) {
                        $self.#hideSettingBlock(e);
                    }
                    let id = e.id;
                    let lis = $self.#dom.getElementsByClassName("item");
                    [].forEach.call(lis, function (li) {
                      
                        if (li.getAttribute("auguri-app-field") && li.getAttribute("auguri-app-field") == id) {
                            $self.#showSettingBlock(li, e);
                            if (e.button) {
                                $self.#isSettingBlockWaitToClose = true;
                            }
                        }
                    });
                });
                $self.#tiles.push(tile);
            } else {
                if (item.getAttribute("tile") && item.getAttribute("tile") == "false") {
                    item.style.display = 'none';
                }
            }
        });
        this.#setEvents();
        this.#getSumm();
        
        switch (this.RecalculationMode) {
            case TileController.RecalculationMode.WIDTH:
                this.#recalculateСhildrenWidths();
                break;
            case TileController.RecalculationMode.VALUE:
                this.#recalculateСhildrenValues();
                break;
            case TileController.RecalculationMode.NONE:
                return;
                break;
        }

    }
    #positionSettingBlock() {
        const minWidth = 380;
        if (this.#settingBlock && this.#settingTile) {
            const rect = this.#settingTile.dom.getBoundingClientRect();
            const containerRect = this.#dom.getBoundingClientRect();
            const tileCenter = rect.left + rect.width / 2;
            const leftOffset = tileCenter - minWidth / 2;
    
            this.#settingBlock.style.width = minWidth + 'px';
            this.#settingBlock.style.zIndex = 11;
    
            if (leftOffset < containerRect.left) {
                this.#settingBlock.style.left = '0px';
            } else if (leftOffset + minWidth > containerRect.right) {
                this.#settingBlock.style.left = (containerRect.width - minWidth) + 'px';
            } else {
                this.#settingBlock.style.left = (leftOffset - containerRect.left) + 'px';
            }
        }
    }
    /*#positionSettingBlock() {
        const minWidth = 380;
        if (this.#settingBlock && this.#settingTile) {
            this.#settingBlock.style.width = minWidth + 'px';
            this.#settingBlock.style.zIndex = 11;
            const rect = this.#settingTile.dom.getBoundingClientRect();
            const tileCenter = parseInt((rect.left + rect.width / 2).toFixed());
            if (tileCenter - this.#shiftLeft < minWidth) {
                this.#settingBlock.style.left = 0 + 'px';
            } else {
                let rightBorder = tileCenter - this.#shiftLeft + (minWidth/2);
                if (rightBorder > this.#rowWidth) {
                    this.#settingBlock.style.left = parseInt(tileCenter + 0 - minWidth) + 'px';
                } else {
                    this.#settingBlock.style.left = parseInt(tileCenter + 0 - (minWidth/1.25)) + 'px';
                }
            }
        }
    }*/
    #hideSettingBlock() {
        let $self = this;
        if ($self.#settingBlock) {
            $self.#settingBlock.style.display = 'none';
            $self.#settingBlock.getElementsByClassName('upper')[0].style.display = 'none';
            $self.#settingBlock.classList.remove('setting');
            if ($self.#settingTile) {
                $self.#settingTile.activeSetting = false;
                $self.#settingTile = null;
            }
            $self.#settingBlock = null;
            $self.#isSettingBlockWaitToClose = false;
            $self.#submit()
        }
    }

    #showSaveButton(){
        let $self = this;
        let save = $self.#settingBlock.getElementsByClassName('Save')[0];
        if(!save){
            save = document.createElement('input');
            save.setAttribute('type','button');
            save.value = 'Save';
            save.classList.add('Save');
            $self.#settingBlock.appendChild(save);
            save.addEventListener('click',function(){
                $self.#hideSettingBlock();
            });
        }
    }

    #showSettingBlock(item, e) {
        if(e.target && !e.target.haveSettings){
            return;
        }
        let $self = this;
        item.style.display = 'block';
        item.getElementsByClassName('upper')[0].style.display = 'block';
        $self.#settingBlock = item;
        $self.#settingTile = e.target;
        $self.#settingBlock.classList.add('setting');
        
        const rect = $self.#dom.getBoundingClientRect();

        $self.#settingBlock.style.top = rect.height + 0  + 'px';
        $self.#positionSettingBlock();
        $self.#showSaveButton();
    }

    #startResize(e) {
        let $self = this;
        this.#move = {
            target: e.target,
            shift: { 'X': 0, 'Y': 0 },
            mouse: { 'X': e.pageX, 'Y': e.pageY },
            timer: setInterval(function () {
                $self.#Resize();
            }, 2)
        };
    }

    #Resize() {
        this.#resizeTarget.dynamicallyChangeWidth(-this.#move.shift.X);
        this.#move.shift.X = 0;
        this.#move.shift.Y = 0;
        if (this.#childRecal && !this.#childRecalOnBlur) {
            this.#recalculateParams(this.#resizeTarget, this.#resizeTargetLastValue);
            this.#resizeTargetLastValue = this.#resizeTarget.value;
        }
    }

    #stopResize() {
        if (this.#move) {
            if (this.#move.timer) {
                clearInterval(this.#move.timer);
                this.#move.timer = null;
            }
            this.#move = null;
            if (this.#childRecal && this.#childRecalOnBlur) {
                this.#recalculateParams(this.#resizeTarget, this.#resizeTargetLastValue);
            }
            this.#resizeTargetLastValue = this.#resizeTarget.value;
            this.#resizeTarget = null;
            this.#submit();
        }
    }

    #mouseMove(e) {
        if (this.#move) {
            this.#move.shift.X = this.#move.mouse.X - e.pageX;
            this.#move.shift.Y = this.#move.mouse.Y - e.pageY;
            this.#move.mouse.X = e.pageX;
            this.#move.mouse.Y = e.pageY;
        }
    }

    #findTitleByDom(dom) {
        let exampe = dom;
        if (this.#tiles.length > 0) {
            for (var i = 0; i < this.#tiles.length; i++) {
                var item = this.#tiles[i];
                if (item && item.dom == exampe) {
                    return item;
                }
            }
        }
        return null;
    }

    #setEvents() {
        let $self = this;
        document.body.addEventListener('mousedown', ($self.#dom.mousedown = function (e) {
            if (e.target.classList.contains('border') && e.target.isChild($self.#dom)) {
                $self.#resizeTarget = $self.#findTitleByDom(e.target.parentNode);
                if ($self.#resizeTarget) {
                    $self.#resizeTargetLastValue = $self.#resizeTarget.value;
                    $self.#startResize(e);
                }
            }
        }));
        document.body.addEventListener('mouseup', ($self.#dom.mouseup = function (e) {
            $self.#stopResize();
            if ($self.#settingBlock && !e.target.isChild($self.#settingTile.dom)) {
                if (!$self.#isSettingBlockWaitToClose) {
                    $self.#isSettingBlockWaitToClose = true;
                } else {
                    if (e.target && !e.target.isChild($self.#settingBlock)) {
                        $self.#hideSettingBlock();
                    }
                }
            }
        }));
        document.body.addEventListener('mousemove', ($self.#dom.mousemove = function (e) {
            $self.#mouseMove(e);
        }));
        document.body.addEventListener('click', ($self.#dom.click = function (e) {

        }));
        document.body.addEventListener('touchstart', ($self.#dom.touchstart = function () {

        }));
        document.body.addEventListener('touchend', ($self.#dom.touchend = function () {

        }));
        document.body.addEventListener('touchcancel', ($self.#dom.touchcancel = function () {

        }));
        document.body.addEventListener('touchmove', ($self.#dom.touchmove = function () {

        }));
        document.body.addEventListener("mouseout", ($self.#dom.mouseout = function (e) {
            if (e.toElement === null || e.toElement.nodeName == 'HTML') {
                $self.#stopResize();
            }
        }));
    }


    #free() {
        if (this.#tiles.length > 0) {
            this.#tiles.forEach(function (item) {
                item.dom.removeEventListener('mousedown', item.dom.mousedown);
                item.dom.removeEventListener('mouseup', item.dom.mouseup);
                item.dom.removeEventListener('touchstart', item.dom.touchstart);
                item.dom.removeEventListener('touchend', item.dom.touchend);
                item.dom.removeEventListener('touchcancel', item.dom.touchcancel);
                document.body.removeEventListener('mouseout', item.dom.mouseout);
            });
            this.#tiles = [];
        }
        if (this.#dom) {
            this.#dom.removeEventListener('mousedown', this.#dom.mousedown);
            this.#dom.removeEventListener('mousemove', this.#dom.mousemove);
            this.#dom.removeEventListener('touchstart', this.#dom.touchstart);
            this.#dom.removeEventListener('touchend', this.#dom.touchend);
            this.#dom.removeEventListener('touchcancel', this.#dom.touchcancel);
            this.#dom.removeEventListener('click', this.#dom.click);
            this.#dom.removeEventListener('touchmove', this.#dom.touchmove);
            document.body.removeEventListener('mouseout', this.#dom.mouseout);
        }
        this.#resizeTarget = null;
        this.#dom = null;
    }

    #submit() {
        let values = this.#getValue();
        this.dispatchEvent('submit', { 'value': values }, this);
    }
    #getValue(importance = true) {
        let values = {};
        if (this.#tiles.length > 0) {
            this.#tiles.forEach(function (item) {
                values[item.id] = importance ? item.intImportance : item.value;
            });
        }
        return values;
    }
    submit() {
        return this.#getValue();
    }
    setValues(values){
        if (this.#tiles.length > 0) {
            this.#tiles.forEach(function (item) {
                if(values[item.id]){
                    item.preventDefault();
                    item.value = Number(values[item.id].importance);
                    item.resolveDefault();
                }
            });
            switch (this.RecalculationMode) {
                case TileController.RecalculationMode.WIDTH:
                    this.#recalculateСhildrenWidths();
                    break;
                case TileController.RecalculationMode.VALUE:
                    this.#recalculateСhildrenValues();
                    break;
                case TileController.RecalculationMode.NONE:
                    return;
                    break;
            }
    
        }
    }
}


HTMLElement.prototype.isChild = function (dom) {
    if (this != document.body) {
        if (this == dom)
            return this;
        else
            if (this.parentNode)
                return this.parentNode.isChild(dom);
    }
    return false;
}




document.addEventListener('DOMContentLoaded', function () {
    window.tileController = new TileController();
    tileController.parentNode = document.getElementById('appview').getElementsByClassName('items')[0];
    tileController.autoShowPopup = tileController.parentNode.getAttribute('autoShowPopup') ? true : false;
    tileController.popupShowValue = tileController.parentNode.getAttribute('popupShowValue') ?? 0;
    tileController.addEventListener('submit',function(e){
        const inputs = appManager.processedInputs(null,e.value);
        window.criteria = window.criteria ?? {};
        window.criteria['current_page'] = 1;
        const button = document.getElementById('thumbsupbutton');
        if(button){
            button.style.display = 'none';
        }
        appManager.decide(tileController.parentNode,inputs);
        
    });
    appManager.onSetImportance = function(value){
        tileController.setValues(value);
    };

    appManager.autoreload = function() {
        const e = tileController.submit();
        const inputs = appManager.processedInputs(null,e);
        window.criteria = window.criteria ?? {};
        window.criteria['current_page'] = 1;
        this.decide(tileController.parentNode,inputs);
    }

    appManager.paginate = function(dom, options = null) {
        let inputs = this.processedInputs(null, tileController.submit());
        appManager.changePage(dom,inputs);

    }

    appManager.rerank = function(dom) {
        let inputs = this.processedInputs(null, tileController.submit());
        const id = dom.getAttribute('id');
        const rerank = dom.getAttribute('rerank');
        const action = `https://decisionin.com/public/sparkdit/app/${id}/rerank/result`;
        window.criteria = window.criteria ?? {};
        window.criteria['current_page'] = 1;
        this.reload(action, JSON.stringify(inputs), { 'rerank': rerank }, true, true);

    }
});