<?xml-stylesheet href="xsltforms/xsltforms.xsl" type="text/xsl"?>
<html
   xmlns="http://www.w3.org/1999/xhtml"
   xmlns:xf="http://www.w3.org/2002/xforms" 
   xmlns:xs="http://www.w3.org/2001/XMLSchema" 
   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	 xmlns:sample="http://www.agencexml.com/sample"
	 >
   <head>
      <title>Your Title Here</title>
      <xf:model>
         <xf:instance>
            <sample:data>
               <sample:PersonGivenName/>
               <sample:PersonSurName/>
            </sample:data>
         </xf:instance>
         <xf:bind id="PersonGivenName" nodeset="/sample:data/sample:PersonGivenName"/>
         <xf:bind id="PersonSurName" nodeset="/sample:data/sample:PersonSurName"/>
      </xf:model>
   </head>
   <body>
			<div id="xformControl">
				<span>
					<input type="checkbox" onclick="$('console').style.display = this.checked? 'block' : 'none';"  checked="checked"/> Debug
				</span>
			</div>
		 <xf:input bind="PersonGivenName" incremental="true">
				<xf:label>Input First Name:</xf:label>
		 </xf:input>
		 <br/>
		 <xf:input bind="PersonSurName" incremental="true">
				<xf:label>Input Last Name:</xf:label>
		 </xf:input>
		 <br/>
		 <xf:output bind="PersonGivenName">
				<xf:label>Output First Name:</xf:label>
		 </xf:output>
		 <br/>
		 <xf:output bind="PersonSurName">
				<xf:label>Output Last Name:</xf:label>
		 </xf:output>
			<div id="console"></div>
   </body>
</html>
