<?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>
        <![CDATA[
          dump("constructed triangle!\n");
        ]]>
      </constructor>
      <destructor>
        <![CDATA[
          dump("killed triangle!\n");
        ]]>
      </destructor>
      <property name="dX"> 0 </property>
      <property name="dY"> 0 </property>      
      <method name="_mm">
        <parameter name="evt"/>
        <body>
          <![CDATA[ 
            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>
          <![CDATA[
            document.removeEventListener("mousemove", document.draggedItem._mm,true);
            document.removeEventListener("mouseup", document.draggedItem._mu,true);
            document.draggedItem = null;
          ]]>
        </body>
      </method>
      <property name="inner" readonly="true">
        <getter>
          <![CDATA[
            return document.getAnonymousNodes(this)[0];
          ]]>
        </getter>
       </property>
    </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>

