<?xml version="1.0"?>
<?xml-stylesheet href="xbl1-bindings.css" type="text/css"?>

<bindings xmlns="http://www.mozilla.org/xbl"
          xmlns:xbl="http://www.mozilla.org/xbl"
          xmlns:svg="http://www.w3.org/2000/svg">

  <binding id="triangle" extends="svg:generic">
    <content>
      <svg:polygon xbl:inherits="style, transform" points="0,0 300,50 100,200" class="area"/>
    </content>
    <implementation>
      <constructor>
        dump("constructed triangle!\n");
      </constructor>
      <destructor>
        dump("killed triangle!\n");
      </destructor>
      <property name="dX"> 0 </property>
      <property name="dY"> 0 </property>
      <method name="_mm">
        <parameter name="evt"/>
        <body>
          document.draggedItem.inner.transform.baseVal.getItem(0).setTranslate(
            evt.clientX - document.draggedItem.dX,
            evt.clientY - document.draggedItem.dY);
        </body>
      </method>
      <method name="_mu">
        <parameter name="evt"/>
        <body>
          document.removeEventListener("mousemove", document.draggedItem._mm,true);
          document.removeEventListener("mouseup", document.draggedItem._mu,true);
          document.draggedItem = null;
        </body>
      </method>
      <property name="inner" readonly="true" onget="return document.getAnonymousNodes(this)[0];"/>
    </implementation>
    <handlers>
      <handler event="mousedown">
        <![CDATA[
          // make sure we're at the top of the z-order:
          if (this != this.parentNode.lastChild) {
            // save our internal state back onto the bound element, so that
            // it will get restored correctly when we move this node
            this.setAttribute("transform", this.inner.getAttribute("transform"));

            // suspending redraw stops the flicker during removing & appending the node:
            this.inner.ownerSVGElement.suspendRedraw(1000);

            // now move us to the top of the z-order
            // this will remove & reappend us:
            this.parentNode.appendChild(this);

            this.inner.ownerSVGElement.unsuspendRedraw(1);

            // XXX. For some reason the style doesn't get resolved correctly. 
            // The border should be thick but it isn't until you move the mouse...
          }

          document.draggedItem = this;
          this.dX = event.clientX - this.inner.transform.baseVal.getItem(0).matrix.e;
          this.dY = event.clientY - this.inner.transform.baseVal.getItem(0).matrix.f;
          document.addEventListener("mousemove", this._mm, true);
          document.addEventListener("mouseup", this._mu, true);
        ]]>
      </handler>
    </handlers>
  </binding>

</bindings>
