<?xml version="1.0"?>

<bindings
   xmlns="http://www.mozilla.org/xbl"
   xmlns:html="http://www.w3.org/1999/xhtml"
>

<binding id="obj">

  <content>

    <html:div style="-moz-outline: 1px solid red; text-align: center; color: black; background: white; cursor: pointer; height: inherit; width: inherit; min-height: 1em; min-width: 1em; overflow: hidden;">
       <html:span style="color: red; font-weight: bold; font-style: italic">f</html:span>
       [[Click to play]]
    </html:div>

    <html:object style="display: none; height: inherit; width: inherit;">
      <children />
    </html:object>

  </content>

  <implementation>
    <constructor>
      <![CDATA[
        document.getAnonymousNodes(this)[0].onmouseover = function()
        {
          this.style.MozOutline='3px outset white';
          this.style.background='lightgrey'        
        }
        document.getAnonymousNodes(this)[0].onmouseout = function()
        {
          this.style.background='white';
          this.style.MozOutline='1px solid red';
        }
        document.getAnonymousNodes(this)[0].onclick = function()
        {
          this.style.display='none'; 
          document.getAnonymousNodes(this.parentNode)[1].style.display='inline';
        }
      ]]>
    </constructor>
  </implementation>

</binding>

</bindings>