<?xml-stylesheet href="../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:math="http://exslt.org/math"
>
<head>
    <title>Next Generation Internet</title>
    <style type="text/css">
        @import fonts/source-sans-pro.css
	body {font-family: "Source Sans Pro"; margin: 2rem 2rem 2rem 0; padding: 1rem; max-width: 50rem; font-size: large;}
	.xforms-label {display: inline-block; font-weight: 900; font-family: "Source Sans Pro", sans-serif;}
	.xforms-group > .xforms-label {border-bottom: thin black solid; border-top: thin black solid; margin-bottom: 1rem; margin-top: 1rem;}
	.xforms-textarea {display: block; width: 100%;}
	.xforms-select, .xforms-select1 {display: block}
	.xforms-submit, .xforms-trigger {display: block}
	textarea {width: 80%; height: 7em; font-family: "Source Sans Pro", serif;}
	p {font-family: "Source Sans Pro", serif;}
	img.xforms-value {display: inline-block; width: 6em;}
	div.xforms-item {display: inline-block; width: 10em; vertical-align: top; }
	select.xforms-value {clear: both; display: block; vertical-align: top; margin: auto;}
	input {display: inline-block; vertical-align: top; margin: 0.2em 0.4em 0.2em 0.2em;}
	.text {margin: 1em 20% 1em 20%; display: block; font-size: 1.5em; font-weight: 100;}
        label {clear: both; margin: 0.5em 0 0.5em 0;}
        .xforms-group-label { 
	font				: 2.5em "Source Sans Pro";
	color				: #ffffff;
	background			: #98bf00;
	margin                          : 0.2em 0 0.2em 0;
	padding                         : 0.2em auto 0.2em 1em;
	font-size			: 2em;
	width                           : 100%;
        font-weight                     : 900;
        }
        .xforms-label { 
	font				: 17px "Source Sans Pro";
	margin                          : 0.2em 0 0.2em 0;
	padding                         : 0.2em auto 0.2em 1em;
	width                           : 100%;
        font-weight                     : 700;
        }
        .xforms-group { 
	font				: 12px Source Sans Pro;
	color				: #000000;
	margin                          : 0.2em 0 0.2em 0;
	padding                         : 0.2em 0.2 0.2em 1em;
	text-align                      : center;
        }
        
        .xforms-optional { 
	color				: #000000;
	margin                          : 0.2em 0 0.2em 0;
	padding                         : 0.2em 0.2 0.2em 1em;
	text-align                      : center;
        width                           : 100%;
        }

.xforms-item-label {
        display                         : block;
	width                           : 70%;
	background			: #98bf00;
	padding                         : 1em 1em 1em 1em;
	margin                          : 1em 0.4em 0.1em 0.4em;
        color                           : #ffffff;
        font-size                       : 12pt;
        font-weight                     : 700;
        border-bottom-left-radius       : 100%30px;
        border-bottom-right-radius      : 100%30px;
        min-height                      : 135px;
        
};

.xforms-item {
        display                         : block;
	width                           : 100%;
	float                           : right;
};

.inline { display: inline;}

#xsltforxms-mainform-label-2_4_2_2_4_3_ { background: #333333;}

    </style>
<!--
	.xforms-textarea > .xforms-label{display: block; width: 40em;}
-->
    <model xmlns="http://www.w3.org/2002/xforms">
        <schema xmlns="http://www.w3.org/2001/XMLSchema">
	    <simpleType name="telephone">
	        <restriction base="xsd:string">
	 	   <pattern value="(^[+]?[0-9][0-9-]*[0-9]$)?"/>
	        </restriction>
	    </simpleType>
        </schema>
        <instance id="data">
	    <data xmlns="">
		<answer>
		    <type/>
		    <problem><description/><solution/></problem>
		    <failure><description/><solution/></failure>
		    <solution><description/><solution/></solution>
		    <prediction><description/><solution/><who/><likely/><comments/></prediction>
		</answer>
		<understanding>
		    <topic>unknown</topic>
		    <other/>
		    <experience/>
		    <communities/>
		    <expertise/>
		    <contact>
		      <phone/>
		      <email/>
		      <keepposted/>
		    </contact>
		    <stakeholders><person><name/><email/></person></stakeholders>
		    <extra>
			<pointers/><criteria/><cost/><actorrequirement/><notify/><obstacles/>
		    </extra>
		</understanding>
	      </data>
	    </instance>
	    <bind ref="answer">
		<bind ref="problem" relevant="../type='problem'"/>
		<bind ref="failure" relevant="../type='failure'"/>
		<bind ref="solution" relevant="../type='solution'"/>
		<bind ref="prediction" relevant="../type='prediction'"/>
	    </bind>

	    <bind ref="understanding" relevant="instance('admin')/answered=true() and instance('admin')/submitted=false()">
	        <bind ref="other" relevant="../topic='other'"/>
	        <bind ref="contact">
		    <bind ref="keepposted" type="boolean"/>
		    <bind ref="email" type="email"/>
		    <bind ref="phone" type="telephone"/>
		</bind>
		<bind ref="stakeholders/person/email" type="email"/>
		<bind ref="more" type="boolean"/>
		<bind ref="extra" relevant="instance('admin')/extra=true()"/>
	    </bind>
	    
	    <submission resource="/NGI/submit.pl" method="post" replace="none" indent="true"/>

	    <instance id="admin">
	      <data xmlns="">
		<answers/>
		<extra>false</extra>
		<answered>false</answered>
		<submitted>false</submitted>
		<submittable/>
		<finished/>
	      </data>
	    </instance>
	    <bind ref="instance('admin')">
    	      <bind ref="submittable" relevant="instance('data')/answer/type!=''"/>
	      <bind ref="answers" relevant="../answered=false()"/>
	      <bind ref="extra" type="boolean"/>
	      <bind ref="answered" type="boolean"/>
	      <bind ref="submitted" type="boolean"/>
	      <bind ref="finished" relevant="../submitted=true()"/>
	    </bind>

	    <!-- The data values and descriptions for controls -->
	    <instance id="m" resource="mdata.xml"/>
    </model>

</head>
<body>
<group xmlns="http://www.w3.org/2002/xforms">
    <group ref="instance('admin')/answers">
      <group ref="instance('data')/answer"> 
	<label><output ref="instance('m')/label"/></label>

        <repeat ref="instance('m')/intro/p"><output class="text" ref="."/></repeat>

	<select1 ref="type" appearance="full">
	   <label ref="instance('m')/answer/label"/>
	   <itemset ref="instance('m')/answer/item"><label ref="label"/><value ref="@value"/></itemset>
	</select1>
	<group ref="problem" class="case">
	    <label><output ref="instance('m')/answer/item[@value='problem']/label"/></label>
	    <textarea ref="description">
		<label ref="instance('m')/answer/item[@value='problem']/description/label"/>
		<hint><output ref="instance('m')/answer/item[@value='problem']/description/hint"/></hint>
	    </textarea>

	    <textarea ref="solution">
		<label ref="instance('m')/answer/item[@value='problem']/solution/label"/>
		<hint><output ref="instance('m')/answer/item[@value='problem']/solution/hint"/></hint>
	    </textarea>
	</group>  <!-- problem -->
	<group ref="failure" class="case">
	    <label><output ref="instance('m')/answer/item[@value='failure']/label"/></label>

	    <textarea ref="description">
		<label ref="instance('m')/answer/item[@value='failure']/description/label"/>
		<hint><output ref="instance('m')/answer/item[@value='failure']/description/hint"/></hint>
	    </textarea>

	    <textarea ref="solution">
		<label ref="instance('m')/answer/item[@value='failure']/solution/label"/>
		<hint><output ref="instance('m')/answer/item[@value='failure']/solution/hint"/></hint>
	    </textarea>
	</group> <!-- failure -->

	<group ref="solution" class="case">
	    <label><output ref="instance('m')/answer/item[@value='solution']/label"/></label>

	    <textarea ref="description">
		<label ref="instance('m')/answer/item[@value='solution']/description/label"/>
		<hint><output ref="instance('m')/answer/item[@value='solution']/description/hint"/></hint>
	    </textarea>

	    <textarea ref="solution">
		<label ref="instance('m')/answer/item[@value='solution']/solution/label"/>
		<hint><output ref="instance('m')/answer/item[@value='solution']/solution/hint"/></hint>
	    </textarea>
	</group> <!-- solution -->

	<group ref="prediction" class="case">
	    <label><output ref="instance('m')/answer/item[@value='prediction']/label"/></label>
	    <output class="text" ref="instance('m')/answer/item[@value='prediction']/intro"/>

	    <textarea ref="description">
		<label ref="instance('m')/answer/item[@value='prediction']/description/label"/>
		<hint><output ref="instance('m')/answer/item[@value='prediction']/description/hint"/></hint>
	    </textarea>

	    <select1 ref="likely" appearance="minimal">
	        <label ref="instance('m')/answer/item[@value='prediction']/likely"/>
		<itemset ref="instance('m')/likely/item"><label ref="."/><value ref="@value"/></itemset>
	    </select1>

	    <textarea ref="who"><label ref="instance('m')/answer/item[@value='prediction']/who"/></textarea>

	    <textarea ref="solution">
		<label ref="instance('m')/answer/item[@value='prediction']/solution/label"/>
		<hint><output ref="instance('m')/answer/item[@value='prediction']/solution/hint"/></hint>
	    </textarea>

	    <textarea ref="comments"><label ref="instance('m')/answer/item[@value='prediction']/comments"/></textarea>
	</group>  <!-- prediction -->

	<trigger ref="instance('admin')/submittable">
	    <label ref="instance('m')/next"/>
	    <action ev:event="DOMActivate">
		<setvalue ref="instance('admin')/answered" value="true()"/>
	    </action>
	</trigger>
      </group>  <!-- answer -->
    </group>  <!-- answers -->

    <group ref="understanding" class="more">
	<label><output ref="instance('m')/understanding/label"/></label>

	<select1 ref="topic" appearance="minimal" selection="open">
	    <label ref="instance('m')/topic/label"/>
	    <itemset ref="instance('m')/topic/item"><label ref="label"/><value ref="@value"/></itemset>
	</select1>
	<input ref="other"><label ref="instance('m')/understanding/other"/></input>
         <output class="hint" ref="instance('m')/topic/item[@value=context()/topic]/hint"/>

<!--
	<select1 ref="topic" appearance="minimal" selection="open">
	    <label ref="instance('m')/topic/label"/>
	    <itemset ref="instance('m')/topic/item"><label ref="label"/><hint>Hint here</hint><value ref="@value"/></itemset>
	</select1>
	<input ref="other"><label ref="instance('m')/understanding/other"/></input>
-->
	<select1 ref="experience" appearance="minimal">
	    <label ref="instance('m')/experience/label"/>
	    <itemset ref="instance('m')/experience/item"><label ref="."/><value ref="@value"/></itemset>
	</select1>

	<select1 ref="expertise" appearance="minimal">
	    <label ref="instance('m')/expertise/label"/>
	    <itemset ref="instance('m')/expertise/item"><label ref="."/><value ref="@value"/></itemset>
	</select1>

	<select ref="communities" appearance="full">
	    <label ref="instance('m')/communities/label"/>	    
            <itemset ref="instance('m')/communities/item"><label><output ref="@img" mediatype="image/*"/></label><value ref="@value"/></itemset>
	</select>

	<group ref="contact">
	  <label><output ref="instance('m')/contact/label"/></label>
	  <input ref="phone" class="inline">
	    <label ref="instance('m')/contact/phone/label"/>
	    <alert><output ref="instance('m')/contact/phone/alert"/></alert>
	  </input>
	  <input ref="email" class="inline">
	    <label ref="instance('m')/contact/email/label"/>
	    <alert><output ref="instance('m')/contact/email/alter"/></alert>
	  </input>
	  <input ref="keepposted">
	    <label ref="instance('m')/contact/posted"/>
	  </input>
	</group>
	
	<group ref="stakeholders">
	    <label><output ref="instance('m')/stakeholders/label"/></label>

	    <output ref="instance('m')/stakeholders/intro"/>

	    <repeat ref="person">
	      <input ref="name"><label ref="instance('m')/stakeholders/name"/></input>
	      <input ref="email">
		<label ref="instance('m')/stakeholders/email"/>
		<alert><output ref="instance('m')/stakeholders/alert"/></alert>
	      </input>
	    </repeat>
	    <trigger>
	      <label>+</label>
	      <action ev:event="DOMActivate">
		<insert ref="person"/>
		<setvalue ref="person[last()]/name"/>
		<setvalue ref="person[last()]/email"/>
	      </action>
	    </trigger>
	</group> <!-- stakeholders -->
    </group> <!-- understanding part 1 -->

    <group ref="understanding">
	<label><output ref="instance('m')/extra/label"/></label>

<trigger>
   <label ref="instance('m')/extra/sure"/>
   <action ev:event="DOMActivate">
      <setvalue ref="instance('admin')/extra" value="true()"/>
   </action>
</trigger>

	<!--<input ref="instance('admin')/extra"><label ref="instance('m')/extra/sure"/></input>-->

	<group ref="extra" class="more">
	    <label><output ref="instance('m')/extra/optional"/></label>

	    <textarea ref="pointers"><label ref="instance('m')/extra/pointers"/></textarea>

	    <textarea ref="criteria"><label ref="instance('m')/extra/criteria"/></textarea>

	    <textarea ref="cost"><label ref="instance('m')/extra/cost"/></textarea>

	    <textarea ref="actorrequirement"><label ref="instance('m')/extra/actorrequirement"/></textarea>

	    <textarea ref="notify"><label ref="instance('m')/extra/notify"/></textarea>

	    <textarea ref="obstacles"><label ref="instance('m')/extra/obstacles"/></textarea>
	</group> <!-- understanding extra -->
	<trigger><label ref="instance('m')/submit"/>
	    <action ev:event="DOMActivate">
		<send/>
		<setvalue ref="instance('admin')/submitted" value="true()"/>
	    </action>
	</trigger>
    </group> <!-- understanding part 3 -->
    <group ref="instance('admin')/finished">
        <label><output ref="instance('m')/thanks/label"/></label>
	<trigger>
	    <label ref="instance('m')/thanks/another"/>
	    <action ev:event="DOMActivate">
	        <reset/>
	    </action>
	</trigger>
    </group>
</group>

<div style="text-align: center; margin-top: 15em;">
<a href="https://www.w3.org/community/xformsusers/wiki/XForms_2.0" style="text-decoration:none;">
<img src="/image/valid-xforms11.png" style="vertical-align:middle;border:0;"/>
</a>

<p>This form was created by NLnet and Gartner for the European Commission's <a href="/NGI">Next Generation Internet</a> initiative.</p>
<p>It is built with XForms, using  the (open source) <a href="http://www.agencexml.com/xsltforms" style="text-decoration:none;">
XSLTForms</a>. <br /> With thanks to dr. <a href="http://www.cwi.nl/~steven/">Steven Pemberton</a>. Please read the <a href="privacy.html">privacy information</a>. 
</p></div>

</body>
</html>


