<?xml version="1.0" encoding="iso-8859-1"?>
<?xml-stylesheet href="xsltforms/xsltforms.xsl" type="text/xsl"?>
<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}
	  label { display: inline-block; width: 3em; margin: 0 1em }
          .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>

