fix: resolve price statistics toggle button not working

- Create PriceAnalytics instance in app.js initialization
- Fix toggleOverlay method to create overlay when it doesn't exist
- Add createEmptyOverlay method for initial state
- Ensure overlay shows appropriate message when no data available
- Fix button event handlers to properly toggle visibility
- Add proper initialization check for PriceAnalytics class

Author: matthewgall

public/js/app.js

@@ -1676,9 +1676,12 @@ map.on('load', function () {
 
     // Initialize Price Analytics
     try {
-        if (window.priceAnalytics) {
+        if (typeof PriceAnalytics !== 'undefined') {
+            window.priceAnalytics = new PriceAnalytics();
             window.priceAnalytics.init(map);
             console.log('📊 Price analytics initialized successfully');
+        } else {
+            console.warn('PriceAnalytics class not found');
         }
     } catch (error) {
         console.warn('Failed to initialize price analytics:', error);

public/js/price-analytics.js

@@ -618,13 +618,52 @@ class PriceAnalytics {
      */
     toggleOverlay() {
         this.overlayVisible = !this.overlayVisible;
-        const overlay = document.getElementById('price-stats-overlay');
-        if (overlay) {
-            overlay.style.display = this.overlayVisible ? 'block' : 'none';
+        let overlay = document.getElementById('price-stats-overlay');
+        
+        if (this.overlayVisible) {
+            // Show overlay - create it if it doesn't exist
+            if (!overlay) {
+                // Try to get current station data to show stats
+                if (window.lastStationData) {
+                    this.updateStatistics(window.lastStationData);
+                } else {
+                    // Create empty overlay with message
+                    this.createEmptyOverlay();
+                }
+                overlay = document.getElementById('price-stats-overlay');
+            }
+            if (overlay) {
+                overlay.style.display = 'block';
+            }
+        } else {
+            // Hide overlay
+            if (overlay) {
+                overlay.style.display = 'none';
+            }
         }
+        
         return this.overlayVisible;
     }
 
+    /**
+     * Create empty overlay when no data is available
+     */
+    createEmptyOverlay() {
+        const overlay = document.createElement('div');
+        overlay.id = 'price-stats-overlay';
+        overlay.className = 'price-stats-overlay';
+        overlay.innerHTML = `
+            <div class="stats-header">
+                <h3>${this.getIcon('chart')} Price Statistics</h3>
+            </div>
+            <div style="text-align: center; padding: 20px; color: #666;">
+                <p>Move the map to view stations and generate price statistics.</p>
+                <p style="font-size: 12px; margin-top: 10px;">Statistics will appear automatically when fuel stations are loaded.</p>
+            </div>
+        `;
+        document.body.appendChild(overlay);
+    }
+
     /**
      * Update statistics when map data changes
      */