w.changeZoom (Slow Zoom in/out Update)

/**
 * ZoomControl98-TitleBarControls (V4 - Expanded Range)
 * Flat Windows 98 layout with Max Zoom increased to 5.0
 */
class ZoomControl98Flat {
    constructor() {
        this.zoomInterval = null;
        this.zoomStep = 0.005; // Increased slightly for higher range
        this.currentValue = 1.0;
        this.maxZoom = 5.0;    // Added as a variable for easy maintenance
        this.minZoom = 0.06;

        const oldHud = document.getElementById("zoom-hud-root");
        if (oldHud) oldHud.remove();

        this.initHUD();
    }

    initHUD() {
        this.injectStyles();
        this.hud = document.createElement("div");
        this.hud.id = "zoom-hud-root";
        this.hud.style.cssText = `
            position:fixed; top:120px; left:20px; background:#c0c0c0;
            width:210px; z-index:999999; border:1px solid #000;
            font-family: 'Tahoma', sans-serif; font-size:11px; padding:2px;
            user-select: none; box-shadow: 2px 2px 0 #000;
        `;

        this.hud.innerHTML = `
            <div id="z-title" style="background:#000080; color:white; padding:3px 5px; font-weight:bold; cursor:move; display:flex; justify-content:space-between; align-items:center;">
                <span>Zoom Properties</span>
                <div style="display:flex; gap:2px;">
                    <button id="zReverse" class="win98-flat-btn title-btn" title="Slow Out">-</button>
                    <button id="zForward" class="win98-flat-btn title-btn" title="Slow In">+</button>
                    <button id="z-close" class="win98-flat-btn title-btn" style="font-weight:bold; margin-left:4px;">x</button>
                </div>
            </div>
            <div style="padding:15px 10px;">
                <div style="margin-bottom:4px; color:#000;">Direct Value:</div>
                <div style="display:flex; gap:4px; margin-bottom:12px;">
                    <input type="text" id="zInput" class="win98-flat-inset" style="flex-grow:1; width:0; padding:4px;" value="1.000">
                    <button id="zApply" class="win98-flat-btn" style="padding:0 8px;">Apply</button>
                </div>

                <input type="range" id="zSlider" class="win98-flat-slider" min="${this.minZoom}" max="${this.maxZoom}" step="0.001" value="1">

                <div style="display:flex; justify-content:space-between; font-size:9px; color:#000; margin-top:2px; margin-bottom:15px;">
                    <span>${this.minZoom}</span>
                    <span>${this.maxZoom.toFixed(2)}</span>
                </div>

                <button id="zReset" class="win98-flat-btn" style="width:100%; height:25px;">Reset to Default</button>
            </div>
        `;

        document.body.appendChild(this.hud);
        this.setupEvents();
    }

    stopAuto() {
        if (this.zoomInterval) {
            clearInterval(this.zoomInterval);
            this.zoomInterval = null;
        }
        this.hud.querySelector('#zForward').classList.remove('active');
        this.hud.querySelector('#zReverse').classList.remove('active');
    }

    updateZoom(val, syncUI = true) {
        let num = parseFloat(val);
        if (isNaN(num)) return;

        // Updated clamp range to 5.0
        this.currentValue = Math.min(Math.max(num, this.minZoom), this.maxZoom);

        if (syncUI) {
            this.hud.querySelector('#zSlider').value = this.currentValue;
            this.hud.querySelector('#zInput').value = this.currentValue.toFixed(3);
        }

        if (window.w && typeof w.changeZoom === 'function') {
            w.changeZoom(this.currentValue);
        }
    }

    setupEvents() {
        const slider = this.hud.querySelector('#zSlider');
        const input = this.hud.querySelector('#zInput');
        const fwdBtn = this.hud.querySelector('#zForward');
        const revBtn = this.hud.querySelector('#zReverse');

        slider.oninput = (e) => {
            this.stopAuto();
            this.updateZoom(e.target.value, true);
        };

        const toggleAuto = (dir, btn) => {
            const isRunning = btn.classList.contains('active');
            this.stopAuto();

            if (!isRunning) {
                btn.classList.add('active');
                this.zoomInterval = setInterval(() => {
                    let next = this.currentValue + (this.zoomStep * dir);
                    // Updated auto-stop logic for 5.0
                    if (next <= this.minZoom || next >= this.maxZoom) {
                        this.updateZoom(next);
                        this.stopAuto();
                    } else {
                        this.updateZoom(next);
                    }
                }, 16);
            }
        };

        fwdBtn.onclick = () => toggleAuto(1, fwdBtn);
        revBtn.onclick = () => toggleAuto(-1, revBtn);
        this.hud.querySelector('#zApply').onclick = () => { this.stopAuto(); this.updateZoom(input.value); };
        this.hud.querySelector('#zReset').onclick = () => { this.stopAuto(); this.updateZoom(1.0); };
        this.hud.querySelector('#z-close').onclick = () => { this.stopAuto(); this.hud.remove(); };

        const title = this.hud.querySelector('#z-title');
        let drag = false, ox, oy;
        title.onmousedown = (e) => {
            if(e.target.tagName === 'BUTTON' || e.target.tagName === 'INPUT') return;
            drag = true; ox = e.clientX - this.hud.offsetLeft; oy = e.clientY - this.hud.offsetTop;
        };
        window.addEventListener('mousemove', (e) => {
            if(drag) {
                this.hud.style.left = (e.clientX - ox) + 'px';
                this.hud.style.top = (e.clientY - oy) + 'px';
            }
        });
        window.addEventListener('mouseup', () => drag = false);
    }

    injectStyles() {
        if (document.getElementById('win98-flat-v3')) return;
        const s = document.createElement('style');
        s.id = 'win98-flat-v3';
        s.innerText = `
            .win98-flat-btn { background:#c0c0c0; border:1px solid #000; color:#000; cursor:pointer; outline:none; }
            .win98-flat-btn:active, .win98-flat-btn.active { background:#000080; color:#fff; }
            .title-btn { width:16px; height:14px; font-size:10px; padding:0; line-height:10px; }
            .win98-flat-inset { border:1px solid #000; background:#fff; font-family: 'Courier New', monospace; font-weight: bold; outline: none; color: #000; }
            .win98-flat-slider { -webkit-appearance: none; width: 100%; background: transparent; outline: none; }
            .win98-flat-slider::-webkit-slider-runnable-track { width: 100%; height: 2px; background: #000; }
            .win98-flat-slider::-webkit-slider-thumb { -webkit-appearance: none; height: 18px; width: 8px; background: #c0c0c0; border: 1px solid #000; margin-top: -8px; cursor: pointer; }
        `;
        document.head.appendChild(s);
    }
}

new ZoomControl98Flat();