diff -r 000000000000 -r 1450b09d0cfd ginebra2/chrome/js/ToggleButton.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/ginebra2/chrome/js/ToggleButton.js	Tue May 04 12:39:35 2010 +0300
@@ -0,0 +1,136 @@
+// Call ToggleButton to wire an HTML button (typically an <img> tag) to a JS callback
+// when you want the button pressed state to be tied to a Ginebra snippets 
+// visible attribute.
+// 
+//
+// Params:
+//   id - the id of the button.  Ex:  <img id="buttonId" .../>
+//   snippetId - the id of the ginebra snippet to which the button state should be tied
+//   upImg - the path to the "up" image for the button.
+//   downImg - the path to the "down" image for the button.
+//   disabledImg - the path to the "disabled" image for the button.
+//   handler - the javascript callback to be called when triggered
+//   triggerOnMouseUp- if true the handler will be called on mouse-up, defaults to true.
+//   triggerOnMouseDown - if true the handler will be called on mouse-down, defaults to false.
+//   triggerOnMouseOut - if true the handler will be called on mouse-out, defaults to false.
+//
+function ToggleButton(id, snippetId, upImg, downImg, disabledImg, handler, triggerOnMouseUp, triggerOnMouseDown, triggerOnMouseOut) {
+    this.id = id;
+    this.snippetId = snippetId;
+    this.upImg = upImg;
+    this.downImg = downImg;
+    this.disabledImg = disabledImg;
+    this.handler = handler;
+    this.isDown = false;
+    this.enabled = true;
+    this.triggerOnMouseUp= triggerOnMouseUp == undefined ? true : triggerOnMouseUp;
+    this.triggerOnMouseDown = triggerOnMouseDown == undefined ? false : triggerOnMouseDown;
+    this.triggerOnMouseOut = triggerOnMouseOut == undefined ? false : triggerOnMouseOut;
+
+    // attach this class to the item as "button" for later access
+    // delete/cleanup existing button (if any) and attach this as button
+    dom = document.getElementById(this.id);
+    if (dom.button) {
+        delete dom.button;
+    }
+    dom.button = this;
+
+    //! Provide easy access to button element.
+    this.element = function() {
+        return document.getElementById(this.id);
+    }
+
+    //! Allow client to change button images after object creation.
+    this.updateImages = function(upImg, downImg, disabledImg) {
+        this.upImg = upImg;
+        this.downImg = downImg;
+        this.disableImg = disabledImg;
+        this.updateButton();
+    }
+
+    //! Updates button image to appropriate up/down/disabled icon.
+    this.updateButton = function() {
+        if (this.enabled) {
+            // button is enabled
+            if (this.isDown) {
+                // button is down
+                this.element().src = this.downImg;
+            } else {
+                // button is up
+                this.element().src = this.upImg;
+            }
+        } else {
+            // button is disabled
+            this.element().src = this.disabledImg;
+        }
+    }
+
+    //! Enables/Disables button.
+    this.setEnabled = function(state) {
+        this.enabled = state;
+        this.updateButton();
+    }
+    
+    //! Handler for the mouse down event.
+    this.onMouseDown = function() {
+        if (this.triggerOnMouseDown && this.enabled) {
+            this.handler();
+        }
+    }
+    
+    //! Handler for the mouse up event.
+    this.onMouseUp = function() {
+        if (this.triggerOnMouseUp && this.enabled) {
+            this.handler();
+        }
+    }
+
+    //! Handler for the mouse out event.
+    this.onMouseOut = function() {
+        if (this.isDown) {
+            if (this.triggerOnMouseOut && this.enabled) {
+                this.handler();
+            }
+        }
+    }
+    
+    //! Handler for the snippet shown signal.
+    this.onSnippetShown = function() {
+        // When the snippet is shown the button should be down.
+        this.isDown = true;
+        this.updateButton.call(this);
+    }
+    
+    //! Handler for the snippet hidden signal.
+    this.onSnippetHidden = function() {
+        // When the snippet is hidden the button should be up.
+        this.isDown = false;
+        this.updateButton.call(this);
+    }
+    
+    //! After chrome is loaded, setup shown/hidden handlers.
+    this.chromeLoadComplete = function() {
+        // The up/down state of this button is tied to the visibility state of
+        // the specified snippet.
+        window.snippets[this.snippetId].shown.connect(this.onSnippetShown.bind(this));
+        window.snippets[this.snippetId].hidden.connect(this.onSnippetHidden.bind(this));
+    }
+ 
+    // Make sure we can find the element.
+    if (!this.element()) {
+        alert("ToggleButton: element not found, " + id);
+        return;
+    }
+    
+    // Set up element event handlers.
+    this.element().onmousedown = this.onMouseDown.bind(this);
+    this.element().onmouseup = this.onMouseUp.bind(this);
+    this.element().onmouseout = this.onMouseOut.bind(this);
+
+    // Set the initial state of the button.
+    this.updateButton();
+
+    // can't access chrome snippets until chrome load complete
+    window.chrome.chromeComplete.connect(this.chromeLoadComplete.bind(this));
+}
+