<html>
  <head>
    <link rel="stylesheet" href="./assets/css/axist.min.css" />
    <link rel="stylesheet" href="./assets/css/style.css" />
  </head>
  <body>
    <script src="./../dist/xrfragment.js"></script>
		<script>
		  var DOMReady = function(a,b,c){b=document,c='addEventListener';b[c]?b[c]('DOMContentLoaded',a):window.attachEvent('onload',a)}

		  DOMReady(function () {

				let XRF = xrfragment;
				let $   = (e) => document.querySelector(e)
				
				log = (str) => {
					$("#console").innerHTML    =  JSON.stringify(str, null, 2)
					$("#console").style.border = "10px solid #"+ ((1 << 24) * Math.random() | 0).toString(16).padStart(6, "0")+"66";
				}
				
				let update = () => {
				  let result = {}
					XRF.Parser.parse( $('#fragment').value, $('#value').value, result );
					log(result)	
				}

				$("#fragment").addEventListener("change", (e) => {
					let opt = e.target.options[ e.target.selectedIndex ]
					$('#value').value = opt.getAttribute("x")
					update()
			  })
				
				$('#value').addEventListener("change", update )
				$('#value').addEventListener("keyup", update )
				
				addEventListener("hashchange", (e) => log( XRF.URI.parse( document.location.href, true ) ) );

				if( document.location.hash.length < 2 ) document.location.hash = "#t=1,100"

		 	})

		</script>
		<section id="forms">
       <form>
         <fieldset>
           <p>
		 				<table>
		 					<tr>
		 						<td width="200">
		 							<label for="fragment">Property in 3D file</label>
		 							<br><br>
		 							<select id="fragment" class="w-100">
                    <optgroup label="default / predefined view">
		 									<option x="pos=0,0,1&fov=2">#</option>
		 									<option x="">#mypredefinedview</option>
                    </optgroup>
                    <optgroup label="tagging / lazyloading content">
		 									<option x="foo">tag</option>
		 									<option x="./2.gtlf">src</option>
		 								</optgroup>
		 								<optgroup label="href navigation / portals / teleporting">
		 									<option x="1,2,0">pos</option>
		 									<option x="1,2,3">rot</option>
		 									<option x="3.gltf#q=.kitchen">href</option>
		 								</optgroup>
		 								<optgroup label="animation">
		 									<option x="1,200">t</option>
		 								</optgroup>
		 								<optgroup label="device / viewport settings">
		 									<option x="1,100">clip</option>
		 									<option x="45">fov</option>
		 								</optgroup>
		 								<optgroup label="author / metadata">
		 									<option x="XXX">namespace</option>
		 									<option x="GPL-3.0-or-later">SPFX</option>
		 									<option x="1m">unit</option>
		 									<option x="this is an example scene">description</option>
		 								</optgroup>
		 								<optgroup label="multiparty">
		 									<option x="matrix://matrix.org/#myroom&room.key=123">src_session</option>
		 								</optgroup>
		 							</select>
		 						</td>
		 						<td style="text-align:left">
		 							<label for="value">Value</label>
		 							<br><br>
		 							<input id="value" class="w-100" type="text" value=".summer -.winter cube" placeholder="" >
		 						</td>
		 					</tr>
		 					<tr>
		 						<td colspan="2" style="border=bottom:none;" class="small">
		 							<br><br>
                  You can test 👩 NAVIGATOR-enabled fragments (<i>#t=1,200</i> or <i>#fog=2m|FFAABB</i>) by updating the url.<br> For more info see <a href="https://coderofsalvation.github.io/xrfragment/#List%20of%20fragments" target="_blank">the docs</a><br><br>
		 						</td>
		 					</tr>
		 				</table>
           </p>
		 			<p>
             <label for="console">parser output:</label>
		 				<br><br>
             <textarea id="console" style="width:100%;height:50vh;" placeholder="" class="w-100"></textarea>
           </p>
         </fieldset>
       </form>
     </section>
  </body>
</html>