<xsl:stylesheet  version="1.0" 
 xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
 xmlns="http://www.w3.org/2000/svg" 
 xmlns:svg="http://www.w3.org/2000/svg" 
 xmlns:xlink="http://www.w3.org/1999/xlink" 
 xmlns:ex="http://www.treebuilder.de/namespace"> 
 <xsl:template match="/"> 
 <xsl:apply-templates /> 
 </xsl:template> 
 <xsl:template match="*">
  <xsl:copy>
    <xsl:apply-templates select="@*|node()"/>
  </xsl:copy>
</xsl:template>
<xsl:template match="@*">
  <xsl:copy/>
</xsl:template>
<xsl:template match="processing-instruction()">
  <xsl:copy-of select="."/>	
</xsl:template>

<xsl:template match="ex:textbox">
<xsl:variable name="id" select="generate-id()"/>
  <svg id="{$id}" xmlns="http://www.w3.org/2000/svg" width="{@width}" height="{@height}">
  <xsl:apply-templates select="@*"/>
    <defs>
      <linearGradient id="{$id}_grad1" x1="0" y1="1" x2="0" y2="0">
      <stop offset="0" stop-color="grey"/>
      <stop offset="1" stop-color="gainsboro"/>
      </linearGradient>
      <linearGradient id="{$id}_grad2" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="black"/>
      <stop offset="1" stop-color="white"/>
      </linearGradient>
      <linearGradient id="{$id}_grad3" x1="0" y1="1" x2="0" y2="0">
      <stop offset="0" stop-color="white" stop-opacity="0"/>
      <stop offset="1" stop-color="white"/>
      </linearGradient>
      <linearGradient id="{$id}_grad4" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="white" stop-opacity="0"/>
      <stop offset="1" stop-color="white"/>
      </linearGradient>
      <linearGradient id="{$id}_grad5" gradientUnits="userSpaceOnUse" y1="10" x1="0" y2="{@height - 20}" x2="0">
      <stop offset="0" stop-color="yellow"/>
      <stop offset="1" stop-color="orangered"/>
      </linearGradient>
    </defs>    

   <rect x="0" y="0" width="{@width}" height="{@height}" fill="url(#{$id}_grad1)" rx="10" ry="10"/>
   <rect x="10" y="10" width="{@width - 20}" height="{@height - 20}" fill="#333" rx="5" ry="5"/>
   <g fill="lightblue">
   <text xml:space="preserve" id="{$id}_text" x="15" y="25"  font-size="18">text</text>
   <rect id="cursor_{$id}" display="none" x="0" y="10" width="3" height="20"/>
   </g>
   <script>
   document.getElementById("<xsl:value-of select='$id'/>").addEventListener("click",registertextbox_<xsl:value-of select='$id'/>,false)
   currentTextbox=""
   function registertextbox_<xsl:value-of select='$id'/>(evt){
   if(currentTextbox!=""){
   window["unregistertextbox_"+currentTextbox](evt)
   }
   evt.preventDefault()
   evt.stopPropagation()
   document.getElementById("cursor_<xsl:value-of select='$id'/>").setAttributeNS(null,"x",16 + document.getElementById("<xsl:value-of select='$id'/>_text").getComputedTextLength())
   document.getElementById("cursor_<xsl:value-of select='$id'/>").setAttributeNS(null,"display","inline")
   document.documentElement.addEventListener("click",unregistertextbox_<xsl:value-of select='$id'/>,false)
   document.documentElement.addEventListener("keypress",getKeys4_<xsl:value-of select='$id'/>,true)
   currentTextbox="<xsl:value-of select='$id'/>"
   }
   
   function unregistertextbox_<xsl:value-of select='$id'/>(evt){
   evt.preventDefault()
   evt.stopPropagation()
   document.getElementById("cursor_<xsl:value-of select='$id'/>").setAttributeNS(null,"display","none")
   document.documentElement.removeEventListener("click",unregistertextbox_<xsl:value-of select='$id'/>,false)
   document.documentElement.removeEventListener("keypress",getKeys4_<xsl:value-of select='$id'/>,true)
   }
   function getKeys4_<xsl:value-of select='$id'/>(evt){
   evt.preventDefault()
   evt.stopPropagation()
   var key=evt.keyCode
   if(key==0){key=evt.charCode}
   var ch=String.fromCharCode(key)
   //alert(key)
   switch(key){
   case 8:
   var input=document.getElementById("<xsl:value-of select='$id'/>_text").firstChild.nodeValue
   input=input.substring(0,input.length-1)
    document.getElementById("<xsl:value-of select='$id'/>_text").firstChild.nodeValue=input
   break;
   case 16:

break;
case 17:

break;
case 18:

break;
   
   default:
   document.getElementById("<xsl:value-of select='$id'/>_text").firstChild.nodeValue+=ch
   break;
   }
   
   
   
   document.getElementById("cursor_<xsl:value-of select='$id'/>").setAttributeNS(null,"x",16 + document.getElementById("<xsl:value-of select='$id'/>_text").getComputedTextLength())
   }
</script>








    <path d="M10 {@height - 15} v-{@height - 30} a 5 5 0 0 1 5 -5 h{@width - 30}" fill="none" stroke="black" stroke-width="2"/>
    <path d="M15 {@height - 10} h{@width - 30} a 5 5 0 0 0 5 -5 v-{@height - 30}" fill="none" stroke="white" stroke-width="2"/>
    <path d="M10 {@height - 15} a 5 5 0 0 0 5 5" fill="none" stroke="url(#{$id}_grad2)" stroke-width="2"/>
    <path d="M{@width - 15} 10 a 5 5 0 0 1 5 5" fill="none" stroke="url(#{$id}_grad2)" stroke-width="2"/>
    <rect x="2" y="2" width="{@width - 4}" height="{(@height) div 2 }" fill="url(#{$id}_grad3)" rx="8" ry="8"/>
    <rect x="2" y="{@height  - (@height) div 2 + 4}" width="{@width - 4}" height="{(@height ) div 2 - 6}" fill="url(#{$id}_grad4)" rx="8" ry="8"/>
  </svg>
</xsl:template>


 </xsl:stylesheet>
