var bar

const app = new Vue({
    el: '#app',
    data: {
        playerId: 0,
        bankMoney: 0,
        blackMoney: 0,
        bossMoney: 0,
        cash: 0,
        joblabel: '',
        seatbeltaudio: false,

        grade_label: '',
        isMuted: false,
        svg: [],
        weaponImage: '',
        currentHud: 'classic',
        selectSpeedUnit: 'kmh',
        selectedMap: 'radial',
        showCompass: true,
        showOxy: false,
        engineHealth: 1000,
        hide: false,
        indicatorDegree: 0,
        enableCinematic: false,
        speed: 0,
        rpm: 0,
        toggleMapButtonEnabled: false,
        fuel: 0,
        settingsOpen: false,
        showSpeedometer: false,
        speedometerSize: 1.1,
        hudSize: 1.0,
        showHideBox: true,
        isBoss: false,
        hideBoxData: {
            health: 100,
            armor: 100,
            water: 100,
            stress: 100,
            hunger: 100,
            stamina: 100,
        },
        hideBoxDataDisplay: {
            health: 100,
            armor: 100,
            water: 100,
            stress: 100,
            hunger: 100,
            stamina: 100,
        },
        heading: '',
        statusData: {
            health: 0,
            hunger: 0,
            thirst: 0,
            stamina: 0,
            stress: 0,
            armour: 0,
            altitude: 0,
            oxy: 0,
            nitro: 0,
            mic_level: 1,
            talking: false,
        },
        bars: {
            bar_1: null,
            bar_2: null,
            bar_3: null,
            bar_4: null,
            bar_5: null,
            bar_6: null,
            bar_7: false,
            bat_8: null,
            bat_9: null,

            bar_1_set: false,
            bar_2_set: false,
            bar_3_set: false,
            bar_4_set: false,
            bar_5_set: false,
            bar_6_set: false,
            bar_7_set: false,
            bar_8_set: false,
            bar_9_set: false,

        },
        text1: '',
        text2: '',
        addedMoney: null,
        isMinus: false,
        street: '',
        zone: '',
        clock: '',
        date: '',
        forceHide: true,
        DisplayRealTime: true,
        displayOnWalk: false,
        useStress: true,
        cruiseIsOn: false,
        engineIsOn: false,
        sealtBeltIsOn: false,
        lightsOn: false,
        locales: {},
        showParachute: false,
        showAltitude: false,
        altitude: 0,
        enableWaterMarkHud: true,
        useNitro: true,
        hudColors: {},
        moneyType: 'cash',
        dateDisplay: true,
        seatbeltDisplayActive: false,
        cruiseDisplayActive: false,
        resourceName: 'Test',
        UseWaterMarkText: true,
        WaterMarkLogo: '',
        text1Style: {},
        text2Style: {},
        logoWidth: 0,
        logoHeight: 0,
        enableAmmoHud: true,
        displayAmmoHud: false,
        ammo: 0,
        max_ammo: 0,
        refreshRate: 0,
        enableHunger: true,
        enableThirst: true,
        enableStamina: true,
        enableArmor: true,
        enableHealth: true,
        positionsData: {},
        displayRefreshRate: 0,
        editModeActive: false,
        editAllModeActive: false,
        enableHud: false,
        enableWaterMarkId: true,
        enableSpeedometer: true,
        disableWaterMarkTextAndLogo: false,
        enableWaterMarkCash: true,
        enableWaterMarkBank: true,
        enableWaterMarkBlackMoney: false,
        enableWaterMarkBossMoney: false,
        enableWatermarkJob: true,
        enableCompass: true,
        framework: '',
        enableWatermarkWeaponImage: true,
        waterMarkHudVisibleData: {},
        enableWaterMarkHudHideButtons: false,
        accountSizes: {
            cash: 4,
            bank: 3,
            black_money: 2,
            boss_money: 1,
        },

    },

    watch: {
        refreshRate(newD, old) {
            if (newD <= 135) {
                $.post(`https://${this.resourceName}/hudselected`, JSON.stringify({ settingstype: 'refreshRate', val: 135 }));
            }
        },
        hideBoxData: {
            handler(val) {
                // do stuff
                if (val.stamina > 100) {
                    $.post(`https://${this.resourceName}/hudselected`, JSON.stringify({
                        settingstype: "hideBoxData", val: {
                            ...this.hideBoxData,
                            ["stamina"]: 100
                        }
                    }));
                }
                if (val.health > 100) {
                    $.post(`https://${this.resourceName}/hudselected`, JSON.stringify({
                        settingstype: "hideBoxData", val: {
                            ...this.hideBoxData,
                            ["health"]: 100
                        }
                    }));
                }
                if (val.stress > 100) {
                    $.post(`https://${this.resourceName}/hudselected`, JSON.stringify({
                        settingstype: "hideBoxData", val: {
                            ...this.hideBoxData,
                            ["stress"]: 100
                        }
                    }));
                }
                if (val.water > 100) {
                    $.post(`https://${this.resourceName}/hudselected`, JSON.stringify({
                        settingstype: "hideBoxData", val: {
                            ...this.hideBoxData,
                            ["water"]: 100
                        }
                    }));
                }
                if (val.armor > 100) {
                    $.post(`https://${this.resourceName}/hudselected`, JSON.stringify({
                        settingstype: "hideBoxData", val: {
                            ...this.hideBoxData,
                            ["armor"]: 100
                        }
                    }));
                }
                if (val.hunger > 100) {
                    $.post(`https://${this.resourceName}/hudselected`, JSON.stringify({
                        settingstype: "hideBoxData", val: {
                            ...this.hideBoxData,
                            ["hunger"]: 100
                        }
                    }));
                }
            },
            deep: true
        }
    },
    methods: {
        EnableCompass(val) {
            this.enableCompass = val
        },
        GetAccountSize(type) {
            let val = this.accountSizes[type]
            return 'account-size-' + val
        },
        SetAccountSizes(val) {
            this.accountSizes = val
        },
        SetIsBoss(val) {
            this.isBoss = val
        },
        EnableWaterMarkHudHideButtons(val) {
            this.enableWaterMarkHudHideButtons = val
        },
        SetBlackMoney(val) {
            this.blackMoney = val
        },
        SetBossMoney(val) {
            this.bossMoney = val
        },
        SetFramework(val) {
            this.framework = val
        },
        SetEnableWatermarkBlackMoney(val) {
            if (this.framework == 'esx') {
                this.enableWaterMarkBlackMoney = val
            } else {
                this.enableWaterMarkBlackMoney = false
                this.waterMarkHudVisibleData['black_money'] = false
            }
        },
        SetEnableWatermarkBossMoney(val) {
            if (this.framework == 'esx') {
                this.enableWaterMarkBossMoney = val
            } else {
                this.enableWaterMarkBossMoney = false
                this.waterMarkHudVisibleData['boss_money'] = false
            }
        },
        ColorInput(e) {
            $(e.currentTarget).parent().find('.colorinput').click()
        },
        EnableToggleMapButton(value) {
            this.toggleMapButtonEnabled = value
        },
        ToggleMinimap() {
            $.post(`https://${this.resourceName}/ToggleMinimap`, JSON.stringify({}));
        },
        LoadSettingsBox() {
            let val = 100
            if (document.querySelector('#healthLoader2')) {
                if (val <= 0) {
                    val = 0
                }
                init('healthLoader2', 'healthBorder2', val / 100);
                let bar = new ProgressBar.Path('#healthText2', {
                    easing: 'easeInOut',
                    duration: 400
                });

                bar.set(0)

                bar.animate(val / 100)
            }
            if (document.querySelector('#healthLoader3')) {
                if (val <= 0) {
                    val = 0
                }
                init('healthLoader3', 'healthBorder3', val / 100);
                let bar = new ProgressBar.Path('#healthText3', {
                    easing: 'easeInOut',
                    duration: 400
                });

                bar.set(0)

                bar.animate(val / 100)
            }
            if (document.querySelector('#waterLoader2')) {
                if (val <= 0) {
                    val = 0
                }
                init('waterLoader2', 'waterBorder2', val / 100);
                let bar = new ProgressBar.Path('#waterText2', {
                    easing: 'easeInOut',
                    duration: 400
                });

                bar.set(0)

                bar.animate(val / 100)
            }
            if (document.querySelector('#waterLoader3')) {
                if (val <= 0) {
                    val = 0
                }
                init('waterLoader3', 'waterBorder3', val / 100);
                let bar = new ProgressBar.Path('#waterText3', {
                    easing: 'easeInOut',
                    duration: 400
                });

                bar.set(0)

                bar.animate(val / 100)
            }
            if (document.querySelector('#stressLoader2')) {
                if (val <= 0) {
                    val = 0
                }
                init('stressLoader2', 'stressBorder2', val / 100);
                let bar = new ProgressBar.Path('#stressText2', {
                    easing: 'easeInOut',
                    duration: 400
                });

                bar.set(0)

                bar.animate(val / 100)
            }
            if (document.querySelector('#stressLoader3')) {
                if (val <= 0) {
                    val = 0
                }
                init('stressLoader3', 'stressBorder3', val / 100);
                let bar = new ProgressBar.Path('#stressText3', {
                    easing: 'easeInOut',
                    duration: 400
                });

                bar.set(0)

                bar.animate(val / 100)
            }
            if (document.querySelector('#armorLoader2')) {
                if (val <= 0) {
                    val = 0
                }
                init('armorLoader2', 'armorBorder2', val / 100);
                let bar = new ProgressBar.Path('#armorText2', {
                    easing: 'easeInOut',
                    duration: 400
                });

                bar.set(0)

                bar.animate(val / 100)
            }
            if (document.querySelector('#armorLoader3')) {
                if (val <= 0) {
                    val = 0
                }
                init('armorLoader3', 'armorBorder3', val / 100);
                let bar = new ProgressBar.Path('#armorText3', {
                    easing: 'easeInOut',
                    duration: 400
                });

                bar.set(0)

                bar.animate(val / 100)
            }
            if (document.querySelector('#hungerLoader2')) {
                if (val <= 0) {
                    val = 0
                }
                init('hungerLoader2', 'hungerBorder2', val / 100);
                let bar = new ProgressBar.Path('#hungerText2', {
                    easing: 'easeInOut',
                    duration: 400
                });

                bar.set(0)

                bar.animate(val / 100)
            }
            if (document.querySelector('#hungerLoader3')) {
                if (val <= 0) {
                    val = 0
                }
                init('hungerLoader3', 'hungerBorder3', val / 100);
                let bar = new ProgressBar.Path('#hungerText3', {
                    easing: 'easeInOut',
                    duration: 400
                });

                bar.set(0)

                bar.animate(val / 100)
            }
            if (document.querySelector('#staminaLoader2')) {
                if (val <= 0) {
                    val = 0
                }
                init('staminaLoader2', 'staminaBorder2', val / 100);
                let bar = new ProgressBar.Path('#staminaText2', {
                    easing: 'easeInOut',
                    duration: 400
                });

                bar.set(0)

                bar.animate(val / 100)
            }
            if (document.querySelector('#staminaLoader3')) {
                if (val <= 0) {
                    val = 0
                }
                init('staminaLoader3', 'staminaBorder3', val / 100);
                let bar = new ProgressBar.Path('#staminaText3', {
                    easing: 'easeInOut',
                    duration: 400
                });

                bar.set(0)

                bar.animate(val / 100)
            }
            if (document.querySelector('#nitroLoader2')) {
                if (val <= 0) {
                    val = 0
                }
                init('nitroLoader2', 'nitroBorder2', val / 100);
                let bar = new ProgressBar.Path('#nitroText2', {
                    easing: 'easeInOut',
                    duration: 400
                });

                bar.set(0)

                bar.animate(val / 100)
            }
            if (document.querySelector('#nitroLoader3')) {
                if (val <= 0) {
                    val = 0
                }
                init('nitroLoader3', 'nitroBorder3', val / 100);
                let bar = new ProgressBar.Path('#nitroText3', {
                    easing: 'easeInOut',
                    duration: 400
                });

                bar.set(0)

                bar.animate(val / 100)
            }
            if (document.querySelector('#altitudeLoader2')) {
                if (val <= 0) {
                    val = 0
                }
                init('altitudeLoader2', 'altitudeBorder2', val / 100);
                let bar = new ProgressBar.Path('#altitudeText2', {
                    easing: 'easeInOut',
                    duration: 400
                });

                bar.set(0)

                bar.animate(val / 100)
            }
            if (document.querySelector('#altitudeLoader3')) {
                if (val <= 0) {
                    val = 0
                }
                init('altitudeLoader3', 'altitudeBorder3', val / 100);
                let bar = new ProgressBar.Path('#altitudeText3', {
                    easing: 'easeInOut',
                    duration: 400
                });

                bar.set(0)

                bar.animate(val / 100)
            }
            if (document.querySelector('#parachuteLoader2')) {
                if (val <= 0) {
                    val = 0
                }
                init('parachuteLoader2', 'parachuteBorder2', val / 100);
                let bar = new ProgressBar.Path('#parachuteText2', {
                    easing: 'easeInOut',
                    duration: 400
                });

                bar.set(0)

                bar.animate(val / 100)
            }
            if (document.querySelector('#parachuteLoader3')) {
                if (val <= 0) {
                    val = 0
                }
                init('parachuteLoader3', 'parachuteBorder3', val / 100);
                let bar = new ProgressBar.Path('#parachuteText3', {
                    easing: 'easeInOut',
                    duration: 400
                });

                bar.set(0)

                bar.animate(val / 100)
            }
            if (document.querySelector('#oxyLoader2')) {
                if (val <= 0) {
                    val = 0
                }
                init('oxyLoader2', 'oxyBorder2', val / 100);
                let bar = new ProgressBar.Path('#oxyText2', {
                    easing: 'easeInOut',
                    duration: 400
                });

                bar.set(0)

                bar.animate(val / 100)
            }
            if (document.querySelector('#oxyLoader3')) {
                if (val <= 0) {
                    val = 0
                }
                init('oxyLoader3', 'oxyBorder3', val / 100);
                let bar = new ProgressBar.Path('#oxyText3', {
                    easing: 'easeInOut',
                    duration: 400
                });

                bar.set(0)

                bar.animate(val / 100)
            }

        },
        SetEnableWatermarkId(val) {
            this.enableWaterMarkId = val
        },
        SetDisableWaterMarkTextAndLogo(val) {
            this.disableWaterMarkTextAndLogo = val
        },
        GetVisibleStatusWaterMarkHud(type) {
            let status = false
            if (type == 'logo') {
                if (this.enableWaterMarkHudHideButtons) {
                    status = !this.disableWaterMarkTextAndLogo && this.waterMarkHudVisibleData['logo'] || ((this.editAllModeActive || this.editModeActive) && !this.disableWaterMarkTextAndLogo)
                } else {
                    status = !this.disableWaterMarkTextAndLogo
                }
            }
            if (type == 'id') {
                if (this.enableWaterMarkHudHideButtons) {
                    status = this.enableWaterMarkId && this.waterMarkHudVisibleData['id'] || ((this.editAllModeActive || this.editModeActive) && this.enableWaterMarkId)
                } else {
                    status = this.enableWaterMarkId
                }
            }

            if (type == 'weapon') {
                if (this.enableWaterMarkHudHideButtons) {
                    status = (this.weaponImage != '' && this.enableWatermarkWeaponImage && this.waterMarkHudVisibleData['weapon']) || ((this.editAllModeActive || this.editModeActive) && this.enableWatermarkWeaponImage)
                } else {
                    status = (this.weaponImage != '' && this.enableWatermarkWeaponImage) || ((this.editAllModeActive || this.editModeActive) && this.enableWatermarkWeaponImage)
                }
            }

            if (type == 'job') {
                if (this.enableWaterMarkHudHideButtons) {
                    status = this.enableWatermarkJob && this.waterMarkHudVisibleData['job'] || ((this.editAllModeActive || this.editModeActive) && this.enableWatermarkJob)
                } else {
                    status = this.enableWatermarkJob
                }
            }
            if (type == 'ammo') {
                if (this.enableWaterMarkHudHideButtons) {
                    status = this.displayAmmoHud && this.enableAmmoHud && this.waterMarkHudVisibleData['ammo'] || ((this.editAllModeActive || this.editModeActive) && this.enableAmmoHud)
                } else {
                    status = this.displayAmmoHud && this.enableAmmoHud || ((this.editAllModeActive || this.editModeActive) && this.enableAmmoHud)
                }
            }
            if (type == 'boss_money') {
                if (this.enableWaterMarkHudHideButtons) {
                    status = this.enableWaterMarkBossMoney && this.waterMarkHudVisibleData['boss_money'] && this.framework == 'esx' && this.isBoss || ((this.editAllModeActive || this.editModeActive) && this.enableWaterMarkBossMoney)

                } else {
                    status = this.enableWaterMarkBossMoney && this.isBoss && this.framework == 'esx' || ((this.editAllModeActive || this.editModeActive) && this.enableWaterMarkBossMoney)
                }
            }
            if (type == 'black_money') {
                if (this.enableWaterMarkHudHideButtons) {
                    status = this.enableWaterMarkBlackMoney && this.waterMarkHudVisibleData['black_money'] && this.framework == 'esx' || ((this.editAllModeActive || this.editModeActive) && this.enableWaterMarkBlackMoney)

                } else {
                    status = this.enableWaterMarkBlackMoney && this.framework == 'esx' || ((this.editAllModeActive || this.editModeActive) && this.enableWaterMarkBlackMoney)
                }
            }

            if (type == 'bank_money') {
                if (this.enableWaterMarkHudHideButtons) {
                    status = this.enableWaterMarkBank && this.waterMarkHudVisibleData['bank_money'] || ((this.editAllModeActive || this.editModeActive) && this.enableWaterMarkBank)

                } else {
                    status = this.enableWaterMarkBank || ((this.editAllModeActive || this.editModeActive) && this.enableWaterMarkBank)
                }
            }
            if (type == 'bank_money') {
                if (this.enableWaterMarkHudHideButtons) {
                    status = this.enableWaterMarkBank && this.waterMarkHudVisibleData['bank_money'] || ((this.editAllModeActive || this.editModeActive) && this.enableWaterMarkBank)

                } else {
                    status = this.enableWaterMarkBank || ((this.editAllModeActive || this.editModeActive) && this.enableWaterMarkBank)
                }
            }
            if (type == 'cash') {
                if (this.enableWaterMarkHudHideButtons) {
                    status = this.enableWaterMarkCash && this.waterMarkHudVisibleData['cash'] || ((this.editAllModeActive || this.editModeActive) && this.enableWaterMarkCash)

                } else {
                    status = this.enableWaterMarkCash || ((this.editAllModeActive || this.editModeActive) && this.enableWaterMarkCash)
                }
            }
            if (type == 'money-add') {
                status = (this.addedMoney != null || (this.editAllModeActive || this.editModeActive)) && (this.enableWaterMarkCash || this.enableWaterMarkBank || this.enableWaterMarkBlackMoney)
            }
            return status
        },
        SetEnableWatermarkCash(val) {
            this.enableWaterMarkCash = val
        },
        SetEnableWatermarkBankMoney(val) {
            this.enableWaterMarkBank = val
        },
        SetEnableWatermarkJob(val) {
            this.enableWatermarkJob = val
        },
        SetEnableWatermarkWeaponImage(val) {
            this.enableWatermarkWeaponImage = val
        },
        SetEngineHealth(val) {
            this.engineHealth = val
        },
        SetWeaponImage(val) {
            this.weaponImage = val
        },
        SetIsMuted(toggle) {
            this.isMuted = toggle
        },
        OnChangeInput(e) {
            // $('#radialHealth radialGradient stop').attr('stop-color', e.target.value)
            // $('#radialHealth2 radialGradient stop').attr('stop-color', e.target.value)
            // $('#radialHealth3 radialGradient stop').attr('stop-color', e.target.value)
            // $('#healthText').attr('stroke', e.target.value)
            // $('#healthText2').attr('stroke', e.target.value)
            // $('#healthText3').attr('stroke', e.target.value)

        },
        OnChangeColor(e) {
            $.post(`https://${this.resourceName}/hudselected`, JSON.stringify({ settingstype: 'hudColors', val: { color: e.target.value, type: e.target.getAttribute('data-type') } }));
        },
        ResetHudPositions() {
            $.post(`https://${this.resourceName}/ResetHudPositions`, JSON.stringify({}));

        },
        SetShowOxy(toggle) {
            this.showOxy = toggle
        },
        set_EnableSpeedometer(toggle) {
            this.enableSpeedometer = toggle
        },
        set_EnableHUD(toggle) {
            this.enableHud = toggle
        },
        SetAllEditMode(toggle) {
            this.editAllModeActive = toggle
            if (toggle) {
                this.ExitSettings()
                $.post(`https://${this.resourceName}/editModeActive`, JSON.stringify({ toggle: true }));
                SetProgressBar(0)
                setTimeout(() => {
                    this.InitDrag()

                }, 200)
            } else {
                $.post(`https://${this.resourceName}/editModeActive`, JSON.stringify({ toggle: false }));
            }
        },

        SetEditMode(toggle) {
            this.editModeActive = toggle
            if (toggle) {
                this.ExitSettings()
                $.post(`https://${this.resourceName}/editModeActive`, JSON.stringify({ toggle: true }));
                SetProgressBar(0)
                setTimeout(() => {
                    this.InitDrag()

                }, 200)
            } else {
                $.post(`https://${this.resourceName}/editModeActive`, JSON.stringify({ toggle: false }));

            }
        },
        SetHideData(type, e) {
            let val = e.target.value
            if (val > 0 && val <= 100) {
                $.post(`https://${this.resourceName}/hudselected`, JSON.stringify({
                    settingstype: "hideBoxData", val: {
                        ...this.hideBoxData,
                        [type]: val
                    }
                }));
            }
        },
        GetPositionsData(type) {
            if (this.positionsData[type]) {
                this.position[type].position = "absolute"
                return this.positionsData[type]
            }
        },
        SetHideShowBox(toggle) {
            $.post(`https://${this.resourceName}/hudselected`, JSON.stringify({ settingstype: 'showHideBox', val: toggle }));
        },
        SetEnableHealth(toggle) {
            this.enableHealth = toggle
        },
        SetEnableHunger(toggle) {
            this.enableHunger = toggle
        },
        SetEnableThirst(toggle) {
            this.enableThirst = toggle
        },
        SetEnableStamina(toggle) {
            this.enableStamina = toggle
        },
        SetEnableArmor(toggle) {
            this.enableArmor = toggle
        },
        SetRefreshRate(e) {
            $.post(`https://${this.resourceName}/hudselected`, JSON.stringify({ settingstype: 'refreshRate', val: e.target.value }));

        },
        SetEnableAmmoHUD(val) {
            this.enableAmmoHud = val
        },
        DisplayWeaponAmmo(toggle) {
            this.displayAmmoHud = toggle
        },

        SetAmmos(ammo, max_ammo) {
            this.ammo = ammo
            this.max_ammo = max_ammo

        },
        SetLogoSize(width, height) {
            this.logoWidth = width
            this.logoHeight = height

        },
        HideWaterMarkElement(type) {
            $.post(`https://${this.resourceName}/HideWaterMarkElement`, JSON.stringify({ type }));

        },
        SetSpeedometerSize() {
            $.post(`https://${this.resourceName}/hudselected`, JSON.stringify({ settingstype: 'speedometerSize', val: this.speedometerSize }));
        },
        SetHudSize() {
            $.post(`https://${this.resourceName}/hudselected`, JSON.stringify({ settingstype: 'hudSize', val: this.hudSize }));

        },
        SetStyles(val, val2) {


            this.text2Style = val2
            this.text1Style = val


        },
        SetSelectedMap(map) {
            $.post(`https://${this.resourceName}/hudselected`, JSON.stringify({ settingstype: 'maptype', val: map }));

        },
        SetShowCompass(val) {
            $.post(`https://${this.resourceName}/hudselected`, JSON.stringify({ settingstype: 'showCompass', val }));

        },
        SetUseWaterMarkText(val) {
            this.UseWaterMarkText = val
        },
        SetWaterMarkLogo(val) {
            this.WaterMarkLogo = val
        },
        GetResponse(resourceName) {
            this.resourceName = resourceName
            $.post(`https://${this.resourceName}/SendResponse`, JSON.stringify({}));

        },
        SetCruiseDisplay(val) {
            this.cruiseDisplayActive = val
        },
        SetSeatbeltDisplay(val) {
            this.seatbeltDisplayActive = val
        },
        SetDateDisplay(val) {
            this.dateDisplay = val
        },
        SetWaterMarkHud(val) {
            this.enableWaterMarkHud = val
        },
        SetUseNitro(val) {
            this.useNitro = val
        },
        UpdateAltitude(val) {
            this.showAltitude = val
        },
        UpdateParachute(val) {
            this.showParachute = val
        },
        UpdateJob(joblabel, gradelabel) {
            this.joblabel = joblabel
            this.grade_label = gradelabel
        },
        SetLocales(val) {
            this.locales = val
        },
        UpdateLights(val) {
            this.lightsOn = val
        },
        UpdateSeatbelt(val) {
            this.sealtBeltIsOn = val
        },
        ToggleCruise(val) {
            this.cruiseIsOn = val
        },
        ToggleEngine(val) {
            this.engineIsOn = val
        },
        UseStress(useStress) {
            this.useStress = useStress
        },
        SetDisplayRealTime(val) {
            this.DisplayRealTime = val
        },
        SetDate(clock, date) {
            this.clock = clock
            this.date = date

        },
        SetId(val) {
            this.playerId = val
        },
        SetBankMoney(val) {
            this.bankMoney = val
        },
        SetCash(val) {
            this.cash = val
        },
        deepEqual(x, y) {
            return (x && y && typeof x === 'object' && typeof y === 'object') ?
                (Object.keys(x).length === Object.keys(y).length) &&
                Object.keys(x).reduce((isEqual, key) => {
                    return isEqual && this.deepEqual(x[key], y[key]);
                }, true) : (x === y);
        },
        UpdateSettings(data) {
            if (data.showHideBox != null && data.showHideBox != undefined) {
                this.showHideBox = data.showHideBox
            }
            if (data.waterMarkHudVisibleData != null && data.waterMarkHudVisibleData != undefined) {
                this.waterMarkHudVisibleData = data.waterMarkHudVisibleData
            }
            if (data.speedtype) {
                this.selectSpeedUnit = data.speedtype
            }

            if (data.maptype) {
                this.selectedMap = data.maptype
            }
            if (data.showCompass != null && data.showCompass != undefined) {
                this.showCompass = data.showCompass
            }
            if (data.hudColors) {
                let prev = this.hudColors[this.currentHud]
                this.hudColors = data.hudColors
                if (prev) {
                    if (JSON.stringify(prev) !== JSON.stringify(this.hudColors[data.hud])) {
                        progress = {}
                        this.bars.bar_1 = null
                        this.bars.bar_2 = null
                        this.bars.bar_3 = null
                        this.bars.bar_4 = null
                        this.bars.bar_5 = null
                        this.bars.bar_6 = null
                        this.bars.bar_7 = null
                        this.bars.bar_8 = null
                        this.bars.bar_9 = null
                        this.bars.bar_1_set = false
                        this.bars.bar_2_set = false
                        this.bars.bar_3_set = false
                        this.bars.bar_4_set = false
                        this.bars.bar_5_set = false
                        this.bars.bar_6_set = false
                        this.bars.bar_7_set = false
                        this.bars.bar_8_set = false
                        this.bars.bar_9_set = false
                        onLoad(this.hudColors, data.hud)
                        setTimeout(() => {
                            this.LoadSettingsBox()
                        }, 300)
                    }
                } else {
                    progress = {}
                    this.bars.bar_1 = null
                    this.bars.bar_2 = null
                    this.bars.bar_3 = null
                    this.bars.bar_4 = null
                    this.bars.bar_5 = null
                    this.bars.bar_6 = null
                    this.bars.bar_7 = null
                    this.bars.bar_8 = null
                    this.bars.bar_9 = null
                    this.bars.bar_1_set = false
                    this.bars.bar_2_set = false
                    this.bars.bar_3_set = false
                    this.bars.bar_4_set = false
                    this.bars.bar_5_set = false
                    this.bars.bar_6_set = false
                    this.bars.bar_7_set = false
                    this.bars.bar_8_set = false
                    this.bars.bar_9_set = false
                    onLoad(this.hudColors, data.hud)
                    setTimeout(() => {
                        this.LoadSettingsBox()
                    }, 300)
                }

            }
            if (data.hud) {
                this.currentHud = data.hud
            }

            if (data.forceHide != null && data.forceHide != undefined) {
                this.forceHide = data.forceHide
            }
            if (data.refreshRate != null && data.refreshRate != undefined) {
                this.refreshRate = data.refreshRate
                this.displayRefreshRate = data.refreshRate


            }

            if (data.positionsData != null && data.positionsData != undefined) {
                this.positionsData = data.positionsData
            }

            if (data.hideBoxData != null && data.hideBoxData != undefined) {
                this.hideBoxData = data.hideBoxData
                this.hideBoxDataDisplay = data.hideBoxData

            }
            if (data.hide != null && data.hide != undefined) {
                this.hide = data.hide
            }

            if (data.speedometerSize != null && data.speedometerSize != undefined) {
                this.speedometerSize = data.speedometerSize
            }
            if (data.hudSize != null && data.hudSize != undefined) {
                this.hudSize = data.hudSize
            }

        },
        InitDrag() {
            var click = {
                x: 0,
                y: 0
            };
            $('.textHudDrag').draggable({
                helper: "clone",
                revertDuration: 0,
                revert: "invalid",
                cancel: ".item-nodrag",
                scroll: false,
                start: function (event, ui) {


                },
                drag: (event, ui) => {

                },
                stop: (event, ui) => {
                    //$(event.target).css('position', "absolute")
                    //$(event.target).css('left', ui.position.left)
                    //$(event.target).css('top', ui.position.top)
                    let left = ui.position.left
                    let top = ui.position.top
                    let type = $(event.target).attr('data-type')
                    $.post(`https://${this.resourceName}/hudselected`, JSON.stringify({
                        settingstype: "positionsData", val: {
                            ...this.positionsData,
                            [type]: {
                                position: 'absolute',
                                left: left + 'px',
                                top: top + 'px',
                            }
                        }
                    }));
                    SetProgressBar(0)

                },
            });
            $('.classicHudWrapper').draggable({
                helper: "clone",
                revertDuration: 0,
                revert: "invalid",
                cancel: ".item-nodrag",
                containment: "body",
                scroll: false,
                start: function (event, ui) {


                },
                drag: (event, ui) => {

                },
                stop: (event, ui) => {
                    //$(event.target).css('position', "absolute")
                    //$(event.target).css('left', ui.position.left)
                    //$(event.target).css('top', ui.position.top)
                    let left = ui.position.left
                    let top = ui.position.top
                    let type = $(event.target).attr('data-type')
                    $.post(`https://${this.resourceName}/hudselected`, JSON.stringify({
                        settingstype: "positionsData", val: {
                            ...this.positionsData,
                            [type]: {
                                position: 'absolute',
                                left: left + 'px',
                                top: top + 'px',
                            }
                        }
                    }));
                    SetProgressBar(0)

                },
            });
            $('.textHudWrapper').draggable({
                helper: "clone",
                revertDuration: 0,
                revert: "invalid",
                cancel: ".item-nodrag",
                containment: "body",
                scroll: false,
                start: function (event, ui) {


                },
                drag: (event, ui) => {

                },
                stop: (event, ui) => {
                    //$(event.target).css('position', "absolute")
                    //$(event.target).css('left', ui.position.left)
                    //$(event.target).css('top', ui.position.top)
                    let left = ui.position.left
                    let top = ui.position.top
                    let type = $(event.target).attr('data-type')
                    $.post(`https://${this.resourceName}/hudselected`, JSON.stringify({
                        settingstype: "positionsData", val: {
                            ...this.positionsData,
                            [type]: {
                                position: 'absolute',
                                left: left + 'px',
                                top: top + 'px',
                            }
                        }
                    }));
                    SetProgressBar(0)

                },
            });


            $('.textHudMicrophone').draggable({
                helper: "clone",
                revertDuration: 0,
                revert: "invalid",
                cancel: ".item-nodrag",
                containment: "body",
                scroll: false,
                start: function (event, ui) {
                    click.x = event.clientX;
                    click.y = event.clientY;

                },
                drag: (event, ui) => {
                    var zoom = this.hudSize;

                    var original = ui.originalPosition;

                    // jQuery will simply use the same object we alter here
                    ui.position = {
                        left: (event.clientX - click.x + original.left) / zoom,
                        top: (event.clientY - click.y + original.top) / zoom
                    };
                },
                stop: (event, ui) => {
                    //$(event.target).css('position', "absolute")
                    //$(event.target).css('left', ui.position.left)
                    //$(event.target).css('top', ui.position.top)
                    let left = ui.position.left
                    let top = ui.position.top
                    let type = $(event.target).attr('data-type')
                    $.post(`https://${this.resourceName}/hudselected`, JSON.stringify({
                        settingstype: "positionsData", val: {
                            ...this.positionsData,
                            [type]: {
                                position: 'absolute',
                                left: left + 'px',
                                top: top + 'px',
                            }
                        }
                    }));
                    SetProgressBar(0)

                },
            });
            $('.hud-topRight').draggable({
                helper: "clone",
                revertDuration: 0,
                revert: "invalid",
                cancel: ".item-nodrag",
                scroll: false,
                start: function (event, ui) {


                },
                drag: (event, ui) => {

                },
                stop: (event, ui) => {
                    //$(event.target).css('position', "absolute")
                    //$(event.target).css('left', ui.position.left)
                    //$(event.target).css('top', ui.position.top)
                    let left = ui.position.left
                    let top = ui.position.top
                    let type = $(event.target).attr('data-type')
                    $.post(`https://${this.resourceName}/hudselected`, JSON.stringify({
                        settingstype: "positionsData", val: {
                            ...this.positionsData,
                            [type]: {
                                position: 'absolute',
                                left: left + 'px',
                                top: top + 'px',
                            }
                        }
                    }));
                    SetProgressBar(0)

                },
            });

            $('.HudCompassDrag').draggable({
                helper: "clone",
                revertDuration: 0,
                revert: "invalid",
                cancel: ".item-nodrag",
                scroll: false,
                start: function (event, ui) {


                },
                drag: (event, ui) => {

                },
                stop: (event, ui) => {
                    //$(event.target).css('position', "absolute")
                    //$(event.target).css('left', ui.position.left)
                    //$(event.target).css('top', ui.position.top)
                    let left = ui.position.left
                    let top = ui.position.top
                    let type = $(event.target).attr('data-type')
                    $.post(`https://${this.resourceName}/hudselected`, JSON.stringify({
                        settingstype: "positionsData", val: {
                            ...this.positionsData,
                            [type]: {
                                position: 'absolute',
                                left: left + 'px',
                                top: top + 'px',
                            }
                        }
                    }));
                    SetProgressBar(0)
                },
            });
            $('.watermarkHudDrag').draggable({
                helper: "clone",
                revertDuration: 0,
                revert: "invalid",
                cancel: ".item-nodrag",
                scroll: false,
                start: function (event, ui) {


                },
                drag: (event, ui) => {

                },
                stop: (event, ui) => {
                    //$(event.target).css('position', "absolute")
                    //$(event.target).css('left', ui.position.left)
                    //$(event.target).css('top', ui.position.top)
                    let left = ui.position.left
                    let top = ui.position.top
                    let type = $(event.target).attr('data-type')
                    $.post(`https://${this.resourceName}/hudselected`, JSON.stringify({
                        settingstype: "positionsData", val: {
                            ...this.positionsData,
                            [type]: {
                                position: 'absolute',
                                left: left + 'px',
                                top: top + 'px',
                            }
                        }
                    }));
                    SetProgressBar(0)
                },
            });
            $('.classicHudDrag').draggable({
                helper: "clone",
                revertDuration: 0,
                revert: "invalid",
                cancel: ".item-nodrag",
                scroll: false,
                start: function (event, ui) {
                    click.x = event.clientX;
                    click.y = event.clientY;

                },
                drag: (event, ui) => {
                    var zoom = this.hudSize;

                    var original = ui.originalPosition;

                    // jQuery will simply use the same object we alter here
                    ui.position = {
                        left: (event.clientX - click.x + original.left) / zoom,
                        top: (event.clientY - click.y + original.top) / zoom
                    };
                },
                stop: (event, ui) => {
                    //$(event.target).css('position', "absolute")
                    //$(event.target).css('left', ui.position.left)
                    //$(event.target).css('top', ui.position.top)
                    let left = ui.position.left
                    let top = ui.position.top
                    let type = $(event.target).attr('data-type')
                    $.post(`https://${this.resourceName}/hudselected`, JSON.stringify({
                        settingstype: "positionsData", val: {
                            ...this.positionsData,
                            [type]: {
                                position: 'absolute',
                                left: left + 'px',
                                top: top + 'px',
                            }
                        }
                    }));
                    SetProgressBar(0)
                },
            });


            $('.speedometerDrag').draggable({
                helper: "clone",
                revertDuration: 0,
                revert: "invalid",
                cancel: ".item-nodrag",
                containment: "body",
                scroll: false,
                start: function (event, ui) {
                    click.x = event.clientX;
                    click.y = event.clientY;
                },
                drag: (event, ui) => {
                    var zoom = this.speedometerSize;

                    var original = ui.originalPosition;

                    // jQuery will simply use the same object we alter here
                    ui.position = {
                        left: (event.clientX - click.x + original.left) / zoom,
                        top: (event.clientY - click.y + original.top) / zoom
                    };
                },
                stop: (event, ui) => {
                    //$(event.target).css('position', "absolute")
                    //$(event.target).css('left', ui.position.left)
                    //$(event.target).css('top', ui.position.top)
                    let left = ui.position.left
                    let top = ui.position.top
                    let type = $(event.target).attr('data-type')
                    $.post(`https://${this.resourceName}/hudselected`, JSON.stringify({
                        settingstype: "positionsData", val: {
                            ...this.positionsData,
                            [type]: {
                                position: 'absolute',
                                left: left + 'px',
                                top: top + 'px',
                            }
                        }
                    }));
                    SetProgressBar(0)

                },
            });

            $('.textHudIcons').draggable({
                helper: "clone",
                revertDuration: 0,
                revert: "invalid",
                cancel: ".item-nodrag",
                containment: "body",
                scroll: false,
                start: function (event, ui) {
                    click.x = event.clientX;
                    click.y = event.clientY;

                },
                drag: (event, ui) => {
                    var zoom = this.hudSize;

                    var original = ui.originalPosition;

                    // jQuery will simply use the same object we alter here
                    ui.position = {
                        left: (event.clientX - click.x + original.left) / zoom,
                        top: (event.clientY - click.y + original.top) / zoom
                    };
                },
                stop: (event, ui) => {
                    //$(event.target).css('position', "absolute")
                    //$(event.target).css('left', ui.position.left)
                    //$(event.target).css('top', ui.position.top)
                    let left = ui.position.left
                    let top = ui.position.top
                    let type = $(event.target).attr('data-type')
                    $.post(`https://${this.resourceName}/hudselected`, JSON.stringify({
                        settingstype: "positionsData", val: {
                            ...this.positionsData,
                            [type]: {
                                position: 'absolute',
                                left: left + 'px',
                                top: top + 'px',
                            }
                        }
                    }));
                    SetProgressBar(0)

                },
            });

            if (this.editAllModeActive) {
                $('.classicHudDrag').draggable('destroy');
                $('.textHudIcons').draggable('destroy');
                $('.textHudMicrophone').draggable('destroy')
            } else {
                $('.classicHudWrapper').draggable('destroy')
                $('.textHudWrapper').draggable('destroy')
                $('.hud-topRight').draggable('destroy')


            }

        },
        SetForceHide(val) {
            this.forceHide = val
        },
        DisplayMapOnWalk(displayOnWalk) {
            this.displayOnWalk = displayOnWalk
        },
        SetSpeedometerVisibility(visibility, displayOnWalk) {
            this.showSpeedometer = visibility
            this.displayOnWalk = displayOnWalk
        },
        SetHudSettingsVisibilty(visibility) {
            this.settingsOpen = visibility
            if (visibility) {
                this.bars.bar_1 = null
                this.bars.bar_2 = null
                this.bars.bar_3 = null
                this.bars.bar_4 = null
                this.bars.bar_5 = null
                this.bars.bar_6 = null
                this.bars.bar_7 = null
                this.bars.bar_8 = null
                this.bars.bar_9 = null
                this.LoadSettingsBox()
                this.bars.bar_1_set = false
                this.bars.bar_2_set = false
                this.bars.bar_3_set = false
                this.bars.bar_4_set = false
                this.bars.bar_5_set = false
                this.bars.bar_6_set = false
                this.bars.bar_7_set = false
                this.bars.bar_8_set = false
                this.bars.bar_9_set = false


            }
        },
        SetStatusData(type, val) {
            if (type == "altitude") {
                if (val >= 2483) {
                    val = 2483
                } else if (val <= 0) {
                    val = 0
                }

            }
            if (type == 'health') {
                if (val < 0) {
                    val = 0
                }
            }
            if (typeof (val) == 'boolean') {
                this.statusData[type] = val

            } else {

                this.statusData[type] = val.toFixed(0)
            }

            if (type == "nitro") {
                if (val <= 0) {
                    val = 0
                }
                if (document.querySelector('#nitroLoader')) {
                    init('nitroLoader', 'nitroBorder', val / 100);
                    if (this.bars.bar_8 == null) {
                        this.bars.bar_8 = new ProgressBar.Path('#nitroText', {
                            easing: 'easeInOut',
                            duration: 400
                        });
                    }

                    if (this.bars.bar_8 && !this.bars.bar_8_set) {
                        this.bars.bar_8.set(0)
                        this.bars.bar_8_set = true
                    }
                    this.bars.bar_8.animate(val / 100)

                }

            }
            if (type == "altitude") {
                if (document.querySelector('#altitudeLoader')) {


                    init('altitudeLoader', 'altitudeBorder', 1.0 - (val / 2483));
                    if (this.bars.bar_7 == null) {
                        this.bars.bar_7 = new ProgressBar.Path('#altitudeText', {
                            easing: 'easeInOut',
                            duration: 400
                        });
                    }

                    if (this.bars.bar_7 && !this.bars.bar_7_set) {
                        this.bars.bar_7.set(0)
                        this.bars.bar_7_set = true
                    }
                    this.bars.bar_7.animate(1.0 - (val / 2483))
                }
                if (document.querySelector('#parachuteLoader')) {

                    init('parachuteLoader', 'parachuteBorder', 1.0 - (val / 2483));
                    if (this.bars.bar_9 == null) {
                        this.bars.bar_9 = new ProgressBar.Path('#parachuteText', {
                            easing: 'easeInOut',
                            duration: 400
                        });
                    }

                    if (this.bar_9 && !this.bar_9_set) {
                        this.bars.bar_9.set(0)
                        this.bars.bar_9_set = true
                    }
                    this.bars.bar_9.animate(1.0 - (val / 2483))
                }
            }
            if (type == "health") {
                if (document.querySelector('#healthLoader')) {
                    if (val <= 0) {
                        val = 0
                    }
                    init('healthLoader', 'healthBorder', val / 100);
                    if (this.bars.bar_1 == null) {
                        this.bars.bar_1 = new ProgressBar.Path('#healthText', {
                            easing: 'easeInOut',
                            duration: 400
                        });
                    }

                    if (this.bars.bar_1 && !this.bars.bar_1_set) {
                        this.bars.bar_1.set(0)
                        this.bars.bar_1_set = true
                    }
                    this.bars.bar_1.animate(val / 100)
                }
            }
            if (type == "oxy") {
                if (document.querySelector('#oxyLoader')) {
                    if (val <= 0) {
                        val = 0
                    }
                    init('oxyLoader', 'oxyBorder', val / 100);
                    if (this.bars.bar_8 == null) {
                        this.bars.bar_8 = new ProgressBar.Path('#oxyText', {
                            easing: 'easeInOut',
                            duration: 400
                        });
                    }

                    if (this.bars.bar_8 && !this.bars.bar_8_set) {
                        this.bars.bar_8.set(0)
                        this.bars.bar_8_set = true
                    }
                    this.bars.bar_8.animate(val / 100)
                }
            }

            if (type == "hunger") {

                if (document.querySelector('#hungerLoader')) {
                    init('hungerLoader', 'hungerBorder', val / 100);
                    if (this.bars.bar_2 == null) {
                        this.bars.bar_2 = new ProgressBar.Path('#hungerText', {
                            easing: 'easeInOut',
                            duration: 400
                        });
                    }

                    if (this.bars.bar_2 && !this.bars.bar_2_set) {
                        this.bars.bar_2.set(0)
                        this.bars.bar_2_set = true
                    }
                    this.bars.bar_2.animate(val / 100)
                }
            }
            if (type == "thirst") {
                if (document.querySelector('#waterLoader')) {
                    init('waterLoader', 'waterBorder', val / 100);
                    if (this.bars.bar_3 == null) {
                        this.bars.bar_3 = new ProgressBar.Path('#waterText', {
                            easing: 'easeInOut',
                            duration: 400
                        });
                    }

                    if (this.bars.bar_3 && !this.bars.bar_3_set) {
                        this.bars.bar_3.set(0)
                        this.bars.bar_3_set = true
                    }
                    this.bars.bar_3.animate(val / 100)
                }
            }
            if (type == "stamina") {

                if (document.querySelector('#staminaLoader')) {
                    init('staminaLoader', 'staminaBorder', val / 100);
                    if (this.bars.bar_4 == null) {
                        this.bars.bar_4 = new ProgressBar.Path('#staminaText', {
                            easing: 'easeInOut',
                            duration: 400
                        });
                    }

                    if (this.bars.bar_4 && !this.bars.bar_4_set) {
                        this.bars.bar_4.set(0)
                        this.bars.bar_4_set = true
                    }
                    this.bars.bar_4.animate(val / 100)
                }
            }
            if (type == "armour") {
                if (document.querySelector('#armorLoader')) {
                    init('armorLoader', 'armorBorder', val / 100);
                    if (this.bars.bar_5 == null) {
                        this.bars.bar_5 = new ProgressBar.Path('#armorText', {
                            easing: 'easeInOut',
                            duration: 400
                        });
                    }

                    if (this.bars.bar_5 && !this.bars.bar_5_set) {
                        this.bars.bar_5.set(0)
                        this.bars.bar_5_set = true
                    }
                    this.bars.bar_5.animate(val / 100)
                }
            }
            if (type == "stress" && this.useStress) {
                if (document.querySelector('#stressLoader')) {
                    init('stressLoader', 'stressBorder', val / 100);
                    if (this.bars.bar_6 == null) {
                        this.bars.bar_6 = new ProgressBar.Path('#stressText', {
                            easing: 'easeInOut',
                            duration: 400
                        });
                    }

                    if (this.bars.bar_6 && !this.bars.bar_6_set) {
                        this.bars.bar_6.set(0)
                        this.bars.bar_6_set = true
                    }
                    this.bars.bar_6.animate(val / 100)
                }
            }

        },
        LocationUpdate(zone, street, heading) {
            this.street = street
            this.zone = zone
            this.heading = heading
        },
        OnAddedMoney(amount, minus, moneyType) {
            this.addedMoney = amount
            this.moneyType = moneyType
            this.isMinus = minus
            setTimeout(() => {
                this.addedMoney = null
            }, 1500)
        },
        numberWithSpaces(x) {
            return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, "  ");
        },
        SetCurrentHud(hud) {
            $.post(`https://${this.resourceName}/hudselected`, JSON.stringify({ settingstype: 'hud', val: hud }));
        },

        SetSelectSpeedUnit(val) {
            $.post(`https://${this.resourceName}/hudselected`, JSON.stringify({ settingstype: 'speedtype', val }));

        },
        ToggleHud() {
            $.post(`https://${this.resourceName}/hudselected`, JSON.stringify({ settingstype: 'hide', val: !this.hide }));
        },
        ToggleCinematic() {
            $.post(`https://${this.resourceName}/toggleCinematic`, JSON.stringify({}), (val) => {
                this.enableCinematic = val
            });
        },
        ExitSettings() {
            this.SetHudSettingsVisibilty(false)

            $.post(`https://${this.resourceName}/ExitSettings`, JSON.stringify({}));
        },
        SetFuel(fuel) {
            this.fuel = fuel
        },
        GetSvg(type) {
            let data = this.svg.filter((s) => s.type == type)
            return data[0] ? data[0].svg : ''
        },
        SetIndicatorDegree(val, rpm) {
            this.speed = val
            this.rpm = rpm
            if (val >= 100) {
                if (val >= 240) {
                    this.indicatorDegree = 240 - 140
                } else {
                    this.indicatorDegree = val - 140
                }
            } else {
                this.indicatorDegree = val - 124

            }
        },
        AddSvg(type, svg) {
            let alreadyExist = this.svg.filter((s) => s.type == type)
            if (alreadyExist[0]) {
                alreadyExist[0].svg = svg
            }
            this.svg.push({
                svg,
                type
            })
        },
        SetWaterMarkText(text1, text2) {
            this.text1 = text1
            this.text2 = text2

        }
    },
    computed: {
        GetCompassStyle() {
            if (this.positionsData[this.currentHud + '-compass']) {
                return { ...this.positionsData[this.currentHud + '-compass'], transform: 'scale(' + this.hudSize + ')' }
            } else {
                let bottom = '6rem'
                if (this.showSpeedometer || this.displayOnWalk) {
                    if (this.selectedMap == 'rectangle') {
                        bottom = '17.5rem'
                    } else {
                        bottom = '21rem'
                    }
                }

                return { left: '1.7rem', bottom, transform: 'scale(' + this.hudSize + ')' }
            }

        },
        GetSpeedometerSize() {
            return {
                transform: `scale(${this.speedometerSize})`
            }
        },
        GetMphButton() {
            return this.selectSpeedUnit == 'mph' ? '<div  class="speedometerButtonActive">MPH</div>' : '<div @click=`SetSelectSpeedUnit(`mph`)` class="speedometerButton">MPH</div>'
        },
        GetKmhButton() {
            return this.selectSpeedUnit == 'kmh' ? '<div class="speedometerButtonActive">KMH</div>' : '<div class="speedometerButton">KMH</div>'

        },

        GetCircleButton() {
            return this.selectedMap == 'radial' ? `<div  class="circleButtonActive">${this.locales['radial']}</div>` : `<div class="circleButtonDisabled">${this.locales['radial']}</div>`
        },
        GetRectangleButton() {
            return this.selectedMap == 'rectangle' ? `<div class="rectangleButtonActive">${this.locales['rectangle']}</div>` : `<div  class="rectangleButtonDisabled">${this.locales['rectangle']}</div>`

        },

        GetSpeed() {
            if (this.speed.length >= 3) {
                return `<span class="activeSpeed">${this.speed}</span>`
            } else if (this.speed.length == 2) {
                return `<span class="lightSpeed">0</span><span class="activeSpeed">${this.speed}</span>`
            } else if (this.speed.length == 1 && this.speed != 0) {
                return `<span class="lightSpeed">00</span><span class="activeSpeed">${this.speed}</span>`
            } else {
                return `<span class="lightSpeed">000</span>`

            }
        },
        style() {
            return { transform: 'translate(-50%, -95%) rotate(' + this.indicatorDegree + 'deg)' }
        }
    },
    mounted() {

        $.post(`https://${this.resourceName}/NuiReady`, JSON.stringify({}));
        this.InitDrag()

    }
})


if (app.DisplayRealTime) {
    let interval = setInterval(() => {
        const date = new Date()
        let minutes = date.getMinutes()
        let seconds = date.getSeconds()
        if (minutes < 10) {
            minutes = "0" + minutes
        }
        if (seconds < 10) {
            seconds = "0" + seconds
        }
        if (!app.DisplayRealTime) {
            clearInterval(interval)
        }

        const time = date.getHours() + ":" + minutes + ":" + seconds;

        app.SetDate(time, GetDateFormat())

    }, 1000)
    const date = new Date()
    let minutes = date.getMinutes()
    let seconds = date.getSeconds()
    if (minutes < 10) {
        minutes = "0" + minutes
    }
    if (seconds < 10) {
        seconds = "0" + seconds
    }
    const time = date.getHours() + ":" + minutes + ":" + seconds;

    app.SetDate(time, GetDateFormat())
}

var fuel


if (document.querySelector('#fuel')) {
    fuel = new ProgressBar.Path('#fuel', {
        easing: 'easeInOut',
        duration: 150
    });
    fuel.set(1);
}


function SetProgressBar(val) {
    if (bar) {
        if (val >= 240) {
            bar.animate(240 / 550)
        } else {
            if (val >= 100) {
                bar.animate(val / 550)
            } else {
                bar.animate(val / 500)
            }
        }
    } else {
        if (document.querySelector('#path-2')) {
            bar = new ProgressBar.Path('#path-2', {
                duration: 300
            });
        }
    }
}

function GetDateFormat() {
    const date = new Date();
    let month = date.getMonth() + 1
    let day = date.getDate()
    if (month < 10) {
        month = '0' + month
    }
    if (day < 10) {
        day = '0' + day
    }

    const dateD = date.getFullYear() + '/' + month + '/' + day;
    return dateD
}

window.addEventListener("message", function (event) {
    var item = event.data;
    switch (item.type) {

        case "speed_update":
            let rpm = (item.rpm - 0.20) / 1.83;
            if (rpm < 0) {
                rpm = 0
            }
            if (bar) {
                bar.animate(rpm)
            } else {
                if (document.querySelector('#path-2')) {
                    bar = new ProgressBar.Path('#path-2', {
                        duration: 300
                    });
                }
            }

            app.SetIndicatorDegree(item.speed, rpm)
            break
        case "fuel_update":
            if (fuel) {
                fuel.animate(item.fuel / 100)

            } else {
                if (document.querySelector('#fuel')) {
                    fuel = new ProgressBar.Path('#fuel', {
                        easing: 'easeInOut',
                        duration: 150
                    });
                    fuel.set(1);
                }
            }
            app.SetFuel(item.fuel.toFixed(0))
            break
        case "open_hudsettings":
            app.SetHudSettingsVisibilty(true)
            break
        case "show_speedometer":

            app.SetSpeedometerVisibility(true, item.displayOnWalk)

            break
        case "hide_speedometer":

            app.SetSpeedometerVisibility(false, item.displayOnWalk)
            if (this.seatbeltaudio) {
                this.seatbeltaudio.pause();
            }
            break
        case "set_status":

            app.SetStatusData(item.statustype, item.value)
            break
        case "EnableWatermarkJob":
            app.SetEnableWatermarkJob(item.value)
            break
        case "update_settings":
            app.UpdateSettings(item.val)
            break
        case "set_id":
            app.SetId(item.value)
            break
        case "set_EnableAmmohud":

            app.SetEnableAmmoHUD(item.value)
            break
        case "update_bank":
            app.SetBankMoney(item.money)
            break
        case "update_money":
            app.SetCash(item.money)
            break
        case "watermark_text":
            app.SetWaterMarkText(item.text1, item.text2)
            break
        case "on_added_money":
            app.OnAddedMoney(item.amount, item.minus, item.moneyType)
            break
        case "location_update":
            app.LocationUpdate(item.street, item.zone, item.heading)
            break
        case "UseStress":
            app.UseStress(item.value)
            break
        case "DisplayRealTime":

            app.SetDisplayRealTime(item.value)
            break
        case "clock_update":

            app.SetDate(item.hours + ":" + item.minutes, GetDateFormat())
            break
        case "SetIsBoss":
            app.SetIsBoss(item.value)
            break
        case "toggle_cruise":
            app.ToggleCruise(item.toggle)
            break
        case "toggle_engine":
            app.ToggleEngine(item.toggle)
            break
        case "EnableWatermarkCash":
            app.SetEnableWatermarkCash(item.value)
            break
        case "EnableWatermarkBlackMoney":
            app.SetEnableWatermarkBlackMoney(item.value)
            break

        case "EnableWatermarkBossMoney":
            app.SetEnableWatermarkBossMoney(item.value)
            break
        case "update_seatbelt":
            app.UpdateSeatbelt(item.toggle)
            if (item.toggle) {
                if (this.seatbeltaudio) {
                    this.seatbeltaudio.pause();
                }
            }
            break
        case "unbuckle":
            const unbuckle = document.querySelector('#unbuckle')
            unbuckle.volume = event.data.volume;
            unbuckle.play();
            break;
        case "EnableWatermarkId":
            app.SetEnableWatermarkId(item.value)
            break
        case "buckle":
            const buckle = document.querySelector('#buckle')
            buckle.volume = event.data.volume;
            buckle.play();
            break;
        case "update_ligths":
            app.UpdateLights(item.state)
            break
        case "set_locales":
            app.SetLocales(item.value)
            break
        case "EnableWaterMarkHudHideButtons":
            app.EnableWaterMarkHudHideButtons(item.value)
            break
        case "set_force_hide":
            app.SetForceHide(item.value)
            break
        case "SetBlackMoney":
            app.SetBlackMoney(item.money)
            break
        case "SetBossMoney":
            app.SetBossMoney(item.money)
            break
        case "update_job":
            app.UpdateJob(item.joblabel, item.grade_label)
            break
        case "DisableWaterMarkTextAndLogo":
            app.SetDisableWaterMarkTextAndLogo(item.value)
            break
        case "update_parachute":
            app.UpdateParachute(item.val)
            break
        case "update_altitude":
            app.UpdateAltitude(item.val)
            break
        case "set_watermarkhud":
            app.SetWaterMarkHud(item.value)
            break
        case "set_useNitro":
            app.SetUseNitro(item.value)
            break
        case "EnableCompass":
            app.EnableCompass(item.value)
            break
        case "set_DateDisplay":
            app.SetDateDisplay(item.value)
            break
        case "set_cruiseDisplay":
            app.SetCruiseDisplay(item.value)
            break
        case "EnableWatermarkWeaponImage":
            app.SetEnableWatermarkWeaponImage(item.value)
            break
        case "set_seatbeltDisplay":
            app.SetSeatbeltDisplay(item.value)
            break
        case "SetAccountSizes":
            app.SetAccountSizes(item.value)
            break
        case "send_response":
            app.GetResponse(item.resourceName)
            break
        case "UseWaterMarkText":
            app.SetUseWaterMarkText(item.value)
            break
        case "EnableWatermarkBankMoney":

            app.SetEnableWatermarkBankMoney(item.value)
            break
        case "WaterMarkLogo":
            app.SetWaterMarkLogo(item.value)
            break
        case "SetStyles":
            app.SetStyles(item.text1, item.text2)
            break
        case "SetLogoSize":
            app.SetLogoSize(item.width, item.height)
            break
        case "display_weapon_ammo":
            app.DisplayWeaponAmmo(item.toggle)
            break
        case "update_weapon_ammo":
            app.SetAmmos(item.ammo, item.maxammo)
            break
        case "set_EnableArmor":
            app.SetEnableArmor(item.value)
            break
        case "set_EnableHealth":
            app.SetEnableHealth(item.value)
            break
        case "set_EnableStamina":
            app.SetEnableStamina(item.value)
            break
        case "set_EnableHunger":
            app.SetEnableHunger(item.value)
            break
        case "set_EnableThirst":
            app.SetEnableThirst(item.value)
            break
        case "set_EnableSpeedometer":
            app.set_EnableSpeedometer(item.value)
            break
        case "set_EnableHUD":
            app.set_EnableHUD(item.value)
            break
        case "toggle_oxy":
            app.SetShowOxy(item.toggle)
            break
        case "toggle_muted":
            app.SetIsMuted(item.toggle)
            break
        case "SetEngineHealth":
            app.SetEngineHealth(item.value)
            break
        case "SetWeaponImage":
            app.SetWeaponImage(item.value)
            break
        case "EnableToggleMapButton":
            app.EnableToggleMapButton(item.value)
            break
        case "DisplayMapOnWalk":
            app.DisplayMapOnWalk(item.value)
            break
        case "SetFramework":
            app.SetFramework(item.value)
            break
        case "PLAY_SEATBELT_SOUND":
            if (this.seatbeltaudio) {
                this.seatbeltaudio.setAttribute('src', 'seatbeltbeep.ogg'); //change the source
                this.seatbeltaudio.load(); 
                this.seatbeltaudio.play(); 
            }
            this.seatbeltaudio = document.querySelector('#seatbeltbeep')
            this.seatbeltaudio.play();
            this.seatbeltaudio.volume = 0.1;

            break
        default:
            break

    }
})

const handleEsc = (event) => {
    if (event.keyCode === 27) {
        app.ExitSettings()
        app.SetEditMode(false)
        app.SetAllEditMode(false)
    }
};
window.addEventListener('keydown', handleEsc);