script.js

// Chart.js Konfiguration
const ctx = document.getElementById('daemmChart').getContext('2d');
let chart;
let clickCount = 0;
let point1Data = null;
let point2Data = null;

// Lambda-Wert Controls
const lambdaSlider = document.getElementById('lambdaSlider');
const lambdaInput = document.getElementById('lambdaInput');
const lambdaValue = document.getElementById('lambdaValue');
const percentageResult = document.getElementById('percentageResult');
const pointInfo = document.getElementById('pointInfo');

// Synchronisiere Slider und Input
lambdaSlider.addEventListener('input', function() {
    lambdaInput.value = this.value;
    lambdaValue.textContent = this.value;
    updateChart();
    if (point1Data || point2Data) {
        recalculatePoints();
    }
});

lambdaInput.addEventListener('input', function() {
    lambdaSlider.value = this.value;
    lambdaValue.textContent = this.value;
    updateChart();
    if (point1Data || point2Data) {
        recalculatePoints();
    }
});

// Berechne Datenpunkte für die Kurve
function calculateCurveData(lambda) {
    const data = [];
    // Dicke von 0.01m bis 0.5m (1cm bis 50cm)
    for (let d = 0.01; d <= 0.5; d += 0.001) {
        const u = lambda / d;
        data.push({
            x: d * 100, // Dicke in cm (X-Achse)
            y: u        // U-Wert (Y-Achse)
        });
    }
    return data;
}

// Berechne U-Wert für gegebene Dicke
function calculateUValue(thickness, lambda) {
    return lambda / (thickness / 100); // Dicke in m umrechnen
}

// Finde den nächsten Punkt auf der Kurve
function findNearestCurvePoint(clickX, clickY, lambda) {
    // Verwende die X-Koordinate (Dicke) direkt vom Klick
    // Runde auf ganze cm für bessere Bedienbarkeit
    const thickness = Math.round(Math.max(1, Math.min(50, clickX)));
    const uValue = calculateUValue(thickness, lambda);
    
    return {
        x: thickness,
        y: uValue
    };
}

// Aktualisiere die Punkte nach Lambda-Änderung
function recalculatePoints() {
    const lambda = parseFloat(lambdaSlider.value);
    
    if (point1Data) {
        point1Data.y = calculateUValue(point1Data.x, lambda);
    }
    if (point2Data) {
        point2Data.y = calculateUValue(point2Data.x, lambda);
    }
    
    updatePointsDisplay();
}

// Aktualisiere die Anzeige der Punkte
function updatePointsDisplay() {
    if (!point1Data && !point2Data) {
        percentageResult.classList.remove('visible');
        pointInfo.classList.remove('visible');
        chart.data.datasets[1].data = [];
        chart.data.datasets[2].data = [];
        chart.update();
        return;
    }
    
    // Update chart points
    if (point1Data) {
        chart.data.datasets[1].data = [point1Data];
    }
    if (point2Data) {
        chart.data.datasets[2].data = [point2Data];
    }
    chart.update();
    
    // Update info display
    let infoHTML = '';
    if (point1Data) {
        infoHTML += `<span class="point-marker point1-marker"></span>Punkt 1: ${point1Data.x.toFixed(1)} cm, U-Wert: ${point1Data.y.toFixed(3)} W/(m²·K)<br>`;
    }
    if (point2Data) {
        infoHTML += `<span class="point-marker point2-marker"></span>Punkt 2: ${point2Data.x.toFixed(1)} cm, U-Wert: ${point2Data.y.toFixed(3)} W/(m²·K)`;
    }
    pointInfo.innerHTML = infoHTML;
    pointInfo.classList.add('visible');
    
    // Calculate and display percentage difference
    if (point1Data && point2Data) {
        // Für die Berechnung der Dämmwirkung verwenden wir die tatsächlichen U-Werte
        // Die Dämmwirkung ist der Kehrwert des U-Werts (Wärmedurchlasswiderstand R = d/λ = 1/U)
        
        const R1 = 1 / point1Data.y; // Wärmedurchlasswiderstand Punkt 1
        const R2 = 1 / point2Data.y; // Wärmedurchlasswiderstand Punkt 2
        
        // Prozentuale Verbesserung der Dämmwirkung (Widerstand)
        const resistanceImprovement = ((R2 - R1) / R1 * 100);
        
        // Prozentuale Reduzierung des Wärmeverlusts (U-Wert)
        const heatLossReduction = ((point1Data.y - point2Data.y) / point1Data.y * 100);
        
        // Für Vergleich mit "keine Dämmung": Annahme Basiswand mit R = 0.5 m²K/W (U = 2.0)
        const RBase = 0.5;
        const RTot1 = RBase + R1;
        const RTot2 = RBase + R2;
        const UTot1 = 1 / RTot1;
        const UTot2 = 1 / RTot2;
        
        // Wärmeverlust-Einsparung gegenüber ungedämmter Wand
        const savingsVsUninsulated1 = ((2.0 - UTot1) / 2.0 * 100);
        const savingsVsUninsulated2 = ((2.0 - UTot2) / 2.0 * 100);
        
        percentageResult.innerHTML = `
            <div style="text-align: left; display: inline-block;">
                <strong>Dämmwirkung-Analyse:</strong><br>
                <strong>${point1Data.x.toFixed(0)} cm → ${point2Data.x.toFixed(0)} cm Dämmung:</strong><br>
                • Dämmwirkung verbessert sich um ${resistanceImprovement.toFixed(0)}%<br>
                • Wärmeverlust reduziert sich um ${heatLossReduction.toFixed(0)}%<br>
                <br>
                <strong>Einsparung ggü. ungedämmter Wand (U=2.0):</strong><br>
                • Bei ${point1Data.x.toFixed(0)} cm: ${savingsVsUninsulated1.toFixed(0)}% weniger Wärmeverlust<br>
                • Bei ${point2Data.x.toFixed(0)} cm: ${savingsVsUninsulated2.toFixed(0)}% weniger Wärmeverlust<br>
                • Zusätzliche Einsparung: ${(savingsVsUninsulated2 - savingsVsUninsulated1).toFixed(0)} Prozentpunkte
            </div>`;
        percentageResult.classList.add('visible');
    } else {
        percentageResult.classList.remove('visible');
    }
}

// Erstelle das Chart
function createChart() {
    const lambda = parseFloat(lambdaSlider.value);
    const data = calculateCurveData(lambda);
    
    chart = new Chart(ctx, {
        type: 'line',
        data: {
            datasets: [{
                label: `Dämmkurve bei λ = ${lambda} W/(m·K)`,
                data: data,
                borderColor: '#2196F3',
                backgroundColor: 'rgba(33, 150, 243, 0.1)',
                borderWidth: 3,
                pointRadius: 0,
                pointHoverRadius: 5,
                tension: 0
            }, {
                label: 'Punkt 1',
                data: [],
                borderColor: '#ff6384',
                backgroundColor: '#ff6384',
                pointRadius: 8,
                pointHoverRadius: 10,
                showLine: false
            }, {
                label: 'Punkt 2',
                data: [],
                borderColor: '#36a2eb',
                backgroundColor: '#36a2eb',
                pointRadius: 8,
                pointHoverRadius: 10,
                showLine: false
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            onClick: function(event, elements) {
                const canvasPosition = Chart.helpers.getRelativePosition(event, chart);
                const dataX = chart.scales.x.getValueForPixel(canvasPosition.x);
                const dataY = chart.scales.y.getValueForPixel(canvasPosition.y);
                
                const lambda = parseFloat(lambdaSlider.value);
                const nearestPoint = findNearestCurvePoint(dataX, dataY, lambda);
                
                clickCount++;
                
                if (clickCount === 1) {
                    point1Data = nearestPoint;
                    point2Data = null;
                } else if (clickCount === 2) {
                    point2Data = nearestPoint;
                } else {
                    clickCount = 0;
                    point1Data = null;
                    point2Data = null;
                }
                
                updatePointsDisplay();
            },
            scales: {
                x: {
                    type: 'linear',
                    position: 'bottom',
                    title: {
                        display: true,
                        text: 'Dämmstoffdicke [cm]',
                        font: {
                            size: 14,
                            weight: 'bold'
                        }
                    },
                    min: 0,
                    max: 50,
                    ticks: {
                        stepSize: 5
                    }
                },
                y: {
                    title: {
                        display: true,
                        text: 'U-Wert [W/(m²·K)]',
                        font: {
                            size: 14,
                            weight: 'bold'
                        }
                    },
                    min: 0,
                    max: 4,
                    ticks: {
                        stepSize: 0.2
                    }
                }
            },
            plugins: {
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            if (context.datasetIndex === 0) {
                                return `Dicke: ${context.parsed.x.toFixed(1)} cm, U-Wert: ${context.parsed.y.toFixed(3)} W/(m²·K)`;
                            } else {
                                return `${context.dataset.label}: Dicke ${context.parsed.x.toFixed(1)} cm, U-Wert ${context.parsed.y.toFixed(3)} W/(m²·K)`;
                            }
                        }
                    }
                },
                legend: {
                    display: true,
                    position: 'top'
                }
            },
            interaction: {
                mode: 'nearest',
                axis: 'x',
                intersect: false
            }
        }
    });
}

// Aktualisiere das Chart mit neuen Daten
function updateChart() {
    const lambda = parseFloat(lambdaSlider.value);
    const data = calculateCurveData(lambda);
    
    chart.data.datasets[0].data = data;
    chart.data.datasets[0].label = `Dämmkurve bei λ = ${lambda} W/(m·K)`;
    chart.update();
}

// Initialisiere das Chart beim Laden der Seite
createChart();

/*  Dynamische Jahreszahl aktualisieren  */
document.getElementById('year').textContent = new Date().getFullYear();

/*  Optional: Lizenz-Hinweis als Tooltip für schnellen Nachweis  */
document.getElementById('copyright')
        .setAttribute('title',
          '© ' + new Date().getFullYear() +
          ' mbnet IT – Alle Rechte vorbehalten');