<article>
	<div style="display:grid;grid-template-columns: max-content repeat(6, 1fr);text-align: center; gap: 5px 10px;margin:10px 0">
		<div>param</div>
		<div>gθ sign flip proba</div>
		<div>gx sign flip proba</div>
		<div>θ  sign flip proba</div>
		<div>θ  keep only sign </div>
		<div>gx keep only sign</div>
		<div>gθ keep only sign</div>

		<div>value</div>
		<select id="θ_flip">
			<option value="0">0</option>
			<option value="0.1">0.1</option>
			<option value="0.2">0.2</option>
			<option value="0.3">0.3</option>
			<option value="0.4">0.4</option>
			<option value="*">all</option>
		</select>
		<select id="gθ_flip">
			<option value="0">0</option>
			<option value="0.1">0.1</option>
			<option value="0.2">0.2</option>
			<option value="0.3">0.3</option>
			<option value="0.4">0.4</option>
			<option value="*">all</option>
		</select>
		<select id="gx_flip">
			<option value="0">0</option>
			<option value="0.1">0.1</option>
			<option value="0.2">0.2</option>
			<option value="0.3">0.3</option>
			<option value="0.4">0.4</option>
			<option value="*">all</option>
		</select>
		<select id="θ_only_sign">
			<option value="0">false</option>
			<option value="1">true</option>
			<option value="*">all</option>
		</select>
		<select id="gθ_only_sign">
			<option value="0">false</option>
			<option value="1">true</option>
			<option value="*">all</option>
		</select>
		<select id="gx_only_sign">
			<option value="0">false</option>
			<option value="1">true</option>
			<option value="*">all</option>
		</select>
	</div>
	<div style="display:grid;grid-template-columns: max-content max-content max-content 1fr;gap:10px">
		<input id="columns" type="number" value=3 min=0 max=10 style="width:100%">
		<select id="loss">
			<option value="0">hide loss</option>
			<option value="1">show loss</option>
		</select>
		<button id="btn_play" style="width:40px">⟩</button>
		<input id="slider" type="range" value=0 min=0 max=1 step=0.0001 style="width:100%">
	</div>
	<div id="videos" style="display:grid"></div>
	<script>
		function $(id) {return document.getElementById(id)}
		function loop(f) {
			let t=0
			let kill_me=false
			function looper(time) {
				let dt = time/1000 - t
				t = time/1000
				f(time/1000,dt)
				if(!kill_me) window.requestAnimationFrame(looper)
			}
			looper(0)
			function kill(){kill_me=true}
			return kill
		}
		function set_col(n) {
			videos.style.gridTemplateColumns=`repeat(${n}, 1fr)`
		}
		$("columns").addEventListener('input',e=>{
			set_col($("columns").value)
		})
		set_col($("columns").value)

		let all_videos=[]
		let btn_play = $('btn_play')
		let slider = $('slider')
		let play_status=false
		btn_play.addEventListener('click', e=>{
			play_status = !play_status
			if(play_status) all_videos.filter(v=>!isNaN(v.duration)).forEach(e=>e.play())
			else            all_videos.filter(v=>!isNaN(v.duration)).forEach(e=>e.pause())
			btn_play.innerHTML= play_status?'||':'⟩'
		})
		slider.addEventListener('input', e=>{
			let t = parseFloat(slider.value)
			console.log(t)
			all_videos.filter(v=>!isNaN(v.duration)).forEach(v => v.currentTime=t*v.duration)
		})
		loop((time,dt)=>{
			let t = all_videos.map(v=>v.currentTime/v.duration).filter(v=>!isNaN(v))
			let T = t.length
			t = t.reduce((a,b)=>a+b,0)/T
			slider.value = t
		})


		function add_video(dim_m,θ_only_sign,θ_flip,gx_only_sign,gx_flip,gθ_only_sign,gθ_flip,lr) {
			let c = $('videos')
			let container = document.createElement('div')
			container.style="display:grid;grid-template-rows: 1fr max-content"
			let v = document.createElement('video')
			v.src= `out-brokenJ/LinearBrokenJ-dim_m=${dim_m}-θsgn=${θ_only_sign}-θ_flip=${θ_flip}-gxsgn=${gx_only_sign}-gx_flip=${gx_flip}-gθsgn=${gθ_only_sign}-gθ_flip=${gθ_flip}-lr=${lr}.mp4`
			// v.controls=true
			v.style="width:100%;"
			v.title=`dim_m=${dim_m}\nθsgn=${θ_only_sign}\nθ_flip=${θ_flip}\ngxsgn=${gx_only_sign}\ngx_flip=${gx_flip}\ngθsgn=${gθ_only_sign}\ngθ_flip=${gθ_flip}\nlr=${lr}`
			container.appendChild(v)
			c.appendChild(container)
			all_videos.push(v)
			if($('loss').value=='1') {
				let v = document.createElement('img')
				v.src= `out-brokenJ/LinearBrokenJ-dim_m=${dim_m}-θsgn=${θ_only_sign}-θ_flip=${θ_flip}-gxsgn=${gx_only_sign}-gx_flip=${gx_flip}-gθsgn=${gθ_only_sign}-gθ_flip=${gθ_flip}-lr=${lr}.png`
				v.style="width:100%;"
				v.title=`dim_m=${dim_m}\nθsgn=${θ_only_sign}\nθ_flip=${θ_flip}\ngxsgn=${gx_only_sign}\ngx_flip=${gx_flip}\ngθsgn=${gθ_only_sign}\ngθ_flip=${gθ_flip}\nlr=${lr}`
				container.appendChild(v)
			}
		}
		function update() {

			let θ_flip_element       = $('θ_flip'      )
			let gx_flip_element      = $('gx_flip'     )
			let gθ_flip_element      = $('gθ_flip'     )
			let θ_only_sign_element  = $('θ_only_sign' )
			let gx_only_sign_element = $('gx_only_sign')
			let gθ_only_sign_element = $('gθ_only_sign')

			let θ_flip       = θ_flip_element.value
			let gx_flip      = gx_flip_element.value
			let gθ_flip      = gθ_flip_element.value
			let θ_only_sign  = θ_only_sign_element.value
			let gx_only_sign = gx_only_sign_element.value
			let gθ_only_sign = gθ_only_sign_element.value
			let lr           = 0.01

			let c = $('videos')
			Array.from(c.children).forEach(e => c.removeChild(e))
			all_videos=[]

			if(θ_flip!="*"      ) {θ_flip      =[θ_flip]      } else {θ_flip       = Array.from(θ_flip_element.options)      .map(o=>o.value).filter(o=>o!="*") }
			if(gx_flip!="*"     ) {gx_flip     =[gx_flip]     } else {gx_flip      = Array.from(gx_flip_element.options)     .map(o=>o.value).filter(o=>o!="*") }
			if(gθ_flip!="*"     ) {gθ_flip     =[gθ_flip]     } else {gθ_flip      = Array.from(gθ_flip_element.options)     .map(o=>o.value).filter(o=>o!="*") }
			if(θ_only_sign!="*" ) {θ_only_sign =[θ_only_sign] } else {θ_only_sign  = Array.from(θ_only_sign_element.options) .map(o=>o.value).filter(o=>o!="*") }
			if(gx_only_sign!="*") {gx_only_sign=[gx_only_sign]} else {gx_only_sign = Array.from(gx_only_sign_element.options).map(o=>o.value).filter(o=>o!="*") }
			if(gθ_only_sign!="*") {gθ_only_sign=[gθ_only_sign]} else {gθ_only_sign = Array.from(gθ_only_sign_element.options).map(o=>o.value).filter(o=>o!="*") }

			dim_m = 16

			θ_flip      .map(θ_flip=>{
			gx_flip     .map(gx_flip=>{
			gθ_flip     .map(gθ_flip=>{
			θ_only_sign .map(θ_only_sign=>{
			gx_only_sign.map(gx_only_sign=>{
			gθ_only_sign.map(gθ_only_sign=>{
				add_video(dim_m,θ_only_sign,θ_flip,gx_only_sign,gx_flip,gθ_only_sign,gθ_flip,lr)
			})
			})
			})
			})
			})
			})
		}

		$('θ_only_sign' ).addEventListener('input',update)
		$('θ_flip'      ).addEventListener('input',update)
		$('gx_only_sign').addEventListener('input',update)
		$('gx_flip'     ).addEventListener('input',update)
		$('gθ_only_sign').addEventListener('input',update)
		$('gθ_flip'     ).addEventListener('input',update)
		$('loss'        ).addEventListener('input',update)
		update()
	</script>
</article>
