1 files changed, 70 insertions, 25 deletions

diff --git a/js/leibovitz/balance.js b/js/leibovitz/balance.js
index 73f60e8..b489a62 100644
--- a/js/leibovitz/balance.js
+++ b/js/leibovitz/balance.js
@@ -1,53 +1,88 @@
 /**
- * White balance management module implementing temperature-based color adjustment
- * Uses the Observer pattern for state management and effect application
- * Implements a non-linear temperature adjustment algorithm with RGB channel scaling
- * Uses a static class pattern for state management
+ * @fileoverview White balance management module implementing temperature-based color adjustment.
+ * 
+ * @description
+ * Implements white balance adjustment using temperature-based RGB channel scaling.
+ * Provides non-linear temperature adjustment for natural color correction.
+ * 
+ * @architecture
+ * Implements the following design patterns:
+ * - Observer Pattern: For state management and effect application
+ * - Factory Pattern: For UI initialization
+ * - Strategy Pattern: For temperature adjustment algorithm
+ * - Command Pattern: For state reset operations
+ * 
+ * @algorithm
+ * White balance adjustment process:
+ * 1. Convert temperature to ratio relative to neutral (6500K)
+ * 2. Apply non-linear scaling (0.2 factor) to red and blue channels
+ * 3. Warmer temps (<6500K) increase red, decrease blue
+ * 4. Cooler temps (>6500K) increase blue, decrease red
+ * 
+ * Features:
+ * - Temperature-based color adjustment
+ * - Non-linear response curve
+ * - Preserves green channel
+ * - Real-time updates
  */
 
-class BalanceManager {
+const BalanceManager = {
+    // Private state
+    _observers: new Set(),
+    _slider: null,
+    _value: null,
+
     /**
      * Initializes the balance manager and sets up UI controls
      * Implements the Factory pattern for UI initialization
      */
-    static init() {
-        this.balanceSlider = document.getElementById('balance-slider');
-        this.balanceValue = document.getElementById('balance-value');
+    init() {
+        this._slider = document.getElementById('balance-slider');
+        this._value = document.getElementById('balance-value');
         this._setupEventListeners();
-    }
+    },
 
     /**
      * Sets up event listeners for UI controls
      * Implements the Observer pattern for state changes
      */
-    static _setupEventListeners() {
-        this.balanceSlider.addEventListener('input', () => {
-            const value = this.balanceSlider.value;
-            this.balanceValue.textContent = `${value}K`;
+    _setupEventListeners() {
+        this._slider.addEventListener('input', () => {
+            const value = this._slider.value;
+            this._value.textContent = `${value}K`;
+            this._notifyObservers();
         });
-    }
+    },
+
+    _notifyObservers() {
+        this._observers.forEach(observer => observer(this.getCurrentBalance()));
+    },
+
+    /**
+     * Subscribes to balance state changes
+     * @param {Function} observer - Callback function for state changes
+     * @returns {Function} Unsubscribe function
+     */
+    subscribe(observer) {
+        this._observers.add(observer);
+        return () => this._observers.delete(observer);
+    },
 
     /**
      * Gets the current white balance temperature
      * @returns {number} Current temperature in Kelvin (2000K-10000K)
      */
-    static getCurrentBalance() {
-        return parseInt(this.balanceSlider.value);
-    }
+    getCurrentBalance() {
+        return parseInt(this._slider.value);
+    },
 
     /**
      * Applies white balance adjustment to an image
      * Implements temperature-based RGB channel scaling with non-linear response
      * @param {ImageData} imageData - Source image data
      * @returns {ImageData} White balanced image data
-     * 
-     * Algorithm:
-     * 1. Convert temperature to ratio relative to neutral (6500K)
-     * 2. Apply non-linear scaling (0.2 factor) to red and blue channels
-     * 3. Warmer temps (<6500K) increase red, decrease blue
-     * 4. Cooler temps (>6500K) increase blue, decrease red
      */
-    static applyBalance(imageData) {
+    applyBalance(imageData) {
         const balance = this.getCurrentBalance();
         if (!balance || balance === 6500) return imageData; // 6500K is neutral
 
@@ -63,5 +98,15 @@ class BalanceManager {
         }
 
         return imageData;
+    },
+
+    /**
+     * Resets balance effect to default state
+     * Implements the Command pattern for state reset
+     */
+    reset() {
+        this._slider.value = 6500;
+        this._value.textContent = '6500K';
+        this._notifyObservers();
     }
-} 
\ No newline at end of file
+}; 
\ No newline at end of file