<?xml-stylesheet href="../forms/xsltforms/xsltforms.xsl" type="text/xsl"?>
<?xsltforms-options debug="no"?>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://www.w3.org/1999/xhtml"
      xmlns:xf="http://www.w3.org/2002/xforms"
      xmlns:ev="http://www.w3.org/2001/xml-events"
      xmlns:xsd="http://www.w3.org/2001/XMLSchema"
>
<head>
   <title>Model-based switching</title>

   <style type="text/css">
      body { font-family: sans-serif}
      .xforms-repeat-item-selected { background: yellow}
   </style> 

   <model xmlns="http://www.w3.org/2002/xforms">
      <instance>
	 <details xmlns="">
	    <name/>
	 </details>
      </instance>
      <instance id="control">
	 <cases xmlns="">
	    <toggle>1</toggle>
	    <case>1</case>
	    <case>2</case>
	    <case>3</case>
	    <case>4</case>
	 </cases>
      </instance>
      <bind nodeset="instance('control')/case" relevant=". = ../toggle"/>
   </model>
</head>
<body>
   <group xmlns="http://www.w3.org/2002/xforms">
      <group ref="instance('control')/case[1]">
	 <label>This is group 1, which contains this text</label>
	 <trigger>
	    <label>Next</label>
	    <setvalue ref="instance('control')/toggle" value="2" ev:event="DOMActivate"/>
	 </trigger>
	 </group><group ref="instance('control')/case[2]">
	 <label>This is group 2, which contains some different text</label>
	 <trigger>
	    <label>Next</label>
	    <setvalue ref="instance('control')/toggle" value="3" ev:event="DOMActivate"/>
	 </trigger>
	 </group><group ref="instance('control')/case[3]">
	 <label>This is group 3 which contains yet another bit of text</label>
	 <trigger>
	    <label>Next</label>
	    <setvalue ref="instance('control')/toggle" value="4" ev:event="DOMActivate"/>
	 </trigger>
	 </group><group ref="instance('control')/case[4]">
	 <label>This is group 4, which is the last of the groups in this example.</label>
	 <trigger>
	    <label>Next</label>
	    <setvalue ref="instance('control')/toggle" value="1" ev:event="DOMActivate"/>
	 </trigger>
      </group>
      <select1 ref="instance('control')/toggle">
	 <label>Show group:</label>
	 <item><label>1</label><value>1</value></item>
	 <item><label>2</label><value>2</value></item>
	 <item><label>3</label><value>3</value></item>
	 <item><label>4</label><value>4</value></item>
      </select1>
   </group>
</body>
</html>
