<?xml version="1.0"?>
<bindings id="expanderBindings"
          xmlns="http://www.mozilla.org/xbl"
          xmlns:xbl="http://www.mozilla.org/xbl"
          xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

  <binding id="expander" display="xul:vbox">
    <resources>
      <stylesheet src="chrome://global/skin/expander.css"/>
    </resources>
    <content>
      <xul:hbox align="center">
        <xul:button type="disclosure" class="expanderButton" anonid="disclosure" xbl:inherits="disabled" mousethrough="always"/>
        <xul:label class="header expanderButton" anonid="label" xbl:inherits="value=label,disabled" mousethrough="always" flex="1"/>
        <xul:button anonid="clear-button" xbl:inherits="label=clearlabel,disabled=cleardisabled,hidden=clearhidden" mousethrough="always" icon="clear"/>
      </xul:hbox>
      <xul:vbox flex="1" anonid="settings" class="settingsContainer" collapsed="true" xbl:inherits="align">
        <children/>
      </xul:vbox>
    </content>
    <implementation>
      <constructor><![CDATA[
        var settings = document.getAnonymousElementByAttribute(this, "anonid", "settings");
        var expander = document.getAnonymousElementByAttribute(this, "anonid", "disclosure");
        var open = this.getAttribute("open") == "true";
        settings.collapsed = !open;
        expander.open = open;
      ]]></constructor>
      <property name="open">
        <setter>
          <![CDATA[
            var settings = document.getAnonymousElementByAttribute(this, "anonid", "settings");
            var expander = document.getAnonymousElementByAttribute(this, "anonid", "disclosure");
            settings.collapsed = !val;
            expander.open = val;
            if (val)
              this.setAttribute("open", "true");
            else
              this.setAttribute("open", "false");
            return val;
          ]]>
        </setter>
        <getter>
          return this.getAttribute("open");
        </getter>
      </property>        
      <method name="onCommand">
        <parameter name="aEvent"/>
        <body><![CDATA[
          var element = aEvent.originalTarget;
          var button = element.getAttribute("anonid");
          switch (button) {
          case "disclosure":
          case "label":
            if (this.open == "true")
              this.open = false;
            else
              this.open = true;
            break;
          case "clear-button":
            var event = document.createEvent("Events");
            event.initEvent("clear", true, true);
            this.dispatchEvent(event);
            break;
          }
        ]]></body>
      </method>
    </implementation>
    <handlers>
      <handler event="command"><![CDATA[
        this.onCommand(event);
      ]]></handler>
      <handler event="click"><![CDATA[
        if (event.originalTarget.localName == "label")
          this.onCommand(event);
      ]]></handler>
    </handlers>
  </binding>
          
</bindings>

          
