<?xml version="1.0"?>  
<bindings xmlns="http://www.mozilla.org/xbl">
  <binding id="fader">
    <implementation>

      <method name="fade">
        <body>
          this.index = 0;
          this.fadeIn(this);
        </body>
      </method>

      <method name="fadeIn">
        <parameter name="self"/>
        <body>
          <![CDATA[
            if ((self.index < 0) || (self.index > self.steps)) {
              return;
            }
            self.style.fontSize = ((self.fontSizeB - self.fontSizeA) * (self.index / self.steps) + self.fontSizeA) + 'em';
            self.style.letterSpacing = ((self.letterSpacingB - self.letterSpacingA) * (self.index / self.steps) + self.letterSpacingA) + 'em';
            //self.style.MozOpacity = (self.mozOpacityB - self.mozOpacityA) * (self.index / self.steps) + self.mozOpacityA;
            if (self.index == self.steps) {
              self.index = 1;
              var foo = function(meSelf) { meSelf.fadeOut(meSelf) };
              setTimeout(foo, self.length / self.steps, self);
            } else {
              self.index++;
              var foo = function(meSelf) { meSelf.fadeIn(meSelf) };
              setTimeout(foo, self.length / self.steps, self);
            }
          ]]>
        </body>
      </method>

      <method name="fadeOut">
        <parameter name="self"/>
        <body>
          <![CDATA[
            if ((self.index < 0) || (self.index > self.steps)) {
              return;
            }
            self.style.fontSize = ((self.fontSizeC - self.fontSizeB) * (self.index / self.steps) + self.fontSizeB) + 'em';
            self.style.letterSpacing = ((self.letterSpacingC - self.letterSpacingB) * (self.index / self.steps) + self.letterSpacingB) + 'em';
            self.style.MozOpacity = (self.mozOpacityC - self.mozOpacityB) * (self.index / self.steps) + self.mozOpacityB;
            if (self.index < self.steps) {
              self.index++;
              var foo = function(meSelf) { meSelf.fadeOut(meSelf) };
              setTimeout(foo, self.length / self.steps, self);
            }
          ]]>
        </body>
      </method>

      <property name="fontSizeA">2</property>
      <property name="fontSizeB">3</property>
      <property name="fontSizeC">4</property>

      <property name="letterSpacingA">0</property>
      <property name="letterSpacingB">1</property>
      <property name="letterSpacingC">0</property>

      <property name="mozOpacityA">0</property>
      <property name="mozOpacityB">1</property>
      <property name="mozOpacityC">0</property>

      <property name="index">0</property>
      <property name="steps">25</property>
      <property name="length">1500</property>

    </implementation>
    <resources>
      <stylesheet src="../style/spaced-header.css"/>
    </resources>
  </binding>
</bindings>
