/**
 * @class
 * Simple widget which shows an element in response to a click somewhere,
 * and hides it in response to any other click.
 * 
 * @constructor
 * @param {String} id The <code>id</code> of the element to be shown/hidden.
 * @param {String} showTrigger The <code>id</code> of the element to be clicked on
 * to trigger the "show".
 * @param {String} hideTrigger The <code>id</code> of an element to click on to
 * trigger the "hide". Optional; if not specified, clicking anywhere will hide.
 */
WOL.widget.showHide = function(id, showTrigger, hideTrigger) {
   /**
    * The element to be shown/hidden.
    * @type HTMLElement
    */
   this.targetEl = document.getElementById(id);
   
   if(Dom.getStyle(this.targetEl, 'display') != 'none') {
      Dom.setStyle(this.targetEl, 'display', 'none');
   };
   
   /**
    * The element to click on to trigger the "show".
    * @type HTMLElement
    */
   this.showTrigger = document.getElementById(showTrigger);

   /**
    * The element to click on to trigger the "hide".
    * @type HTMLElement
    */
   this.hideTrigger = null;
   
   if(typeof(hideTrigger) != 'undefined') {
      this.hideTrigger = document.getElementById(hideTrigger);
   };
   
   Evt.addListener(this.showTrigger, 'click', this.show, this);
   
   if(this.hideTrigger) {
      Evt.addListener(this.hideTrigger, 'click', this.hide, this);
   } else {
      Evt.addListener(document.body, 'click', this.hide, this);
   };
};

/**
 * Shows the element to be shown/hidden, in response to a click.
 * @param {Event} e The click event.
 * @param {showHide} instance The instance of <code>showHide</code>
 * in use.
 */
WOL.widget.showHide.prototype.show = function(e, instance) {
   Evt.preventDefault(e);
   Dom.setStyle(instance.targetEl, 'display', 'block');
};

/**
 * In response to a click anywhere but on the <code>trigger</code>
 * element, or on the "hide" element if specified, hides the element
 * to be shown/hidden.
 * @param {Event} e The click event.
 * @param {showHide} instance The instance of <code>showHide</code>
 * in use.
 */
WOL.widget.showHide.prototype.hide = function(e, instance) {
   var target = Evt.getTarget(e);
   if(instance.hideTrigger) {
      Evt.preventDefault(e);
      Dom.setStyle(instance.targetEl, 'display', 'none');
   } else {
      if(!(instance.showTrigger == target) &&
         !Dom.isAncestor(instance.showTrigger, target)) {
         Dom.setStyle(instance.targetEl, 'display', 'none');
      };
   };
};