/*
	This file is part of Bolixo.

	Bolixo is free software: you can redistribute it and/or modify
	it under the terms of the GNU General Public License as published by
	the Free Software Foundation, either version 3 of the License, or
	(at your option) any later version.

	Bolixo is distributed in the hope that it will be useful,
	but WITHOUT ANY WARRANTY; without even the implied warranty of
	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
	GNU General Public License for more details.

	You should have received a copy of the GNU General Public License
	along with Bolixo.  If not, see <https://www.gnu.org/licenses/>.
*/
/*
	This file hold various test done to figure out how to use html and javascript
*/
// To learn and experiment with HTML
#include <tlmplib.h>
#include <tlmpweb.h>
#include <tlmp/translat.h>
#include "../instrument.h"

extern "C" void tlmp_initmod()
{
	translat_load ("bolixo");
}
<mod>
static void do_webtable(const WEBID &id, int nbrow, unsigned &cur)
{
	glocal int nbrow = nbrow;
	<call webtable>(id,cur,0,5);
	<f load>
		sethead ("title1\ttitle2\ttitle3\ttitle4");
		setrowstyle ("white","bgcolor=white");
		setrowstyle ("white+current","bgcolor=lightblue");
		setclickopt(true,"","");
		for (int i=0; i<glocal.nbrow; i++) setrow("white",i,"aaaa\tbbbb\tcccc\tdddd");
	</f>
	</call>
}
</mod>
static void do_webtable(const WEBID &id, int nbrow)
{
	unsigned cur = 0;
	do_webtable (id,nbrow,cur);
}
<mod>
static void layout (int width, int toprep, int middlerep)
{
	//DIV main; main.w(width).h(100).disp("table").print();
	DIV main; main.w(width).disp("flex").flowcol().print();
	if (0){
		DIV tb; tb.w(100).h(100).disp("flex").flowrow().print();
		DIV c1; c1.flex("0 1 auto").print();
		/- allo
		c1.end();
		DIV c2; c2.flex("0 1 auto").print();
		/- comment ca va
		c2.end();
	}else if (0){
		DIV tb; tb.h(5).disp("table-row").flex("0 1 auto").print();
		DIV c1; c1.disp("table-cell").print();
		/- allo
		c1.end();
		DIV c2; c2.disp("table-cell").print();
		/- comment ca va
		c2.end();
	}
	if (0){
		DIV tb; tb.h(95).disp("table-row").flex("1 1 auto").print();
		DIV c1; c1.disp("table-cell").print();
		/- Une autre ligne
		c1.end();
		DIV c2; c2.disp("table-cell").print();
		DIV col; col.bg("red").disp("flex").flowcol().print();
	}
	DIV to; to.bg("gray").disp("flex").flex("0 1 auto").print();
	for (int i=0; i<toprep; i++){
		/- <table border=1><tr><td>Button4<td>Button5</table>
		/- <br>
	}
	to.end();
	DIV mi; mi.bg("yellow").w(100).disp("flex").flex("1 1 auto").print();
	static int level = 0;
	if (level == 0){
		level++;
		DIV d; d.w(100).disp("flex").flowrow().print();

		layout(50,1,10);
		layout(50,2,10);
		level--;
	}else{
		DIV d; d.w(100).disp("flex").flowrow().print();
		DIV dd; dd.w(30).flex("0 1 auto").print();
		<call webtable>(WEBID("titi"));
		<f load>
			for (int i=0; i<20; i++) setrow("white",0,"a\tb\tc");
		</f>
		</call>
		dd.end();
		DIV ddd; ddd.flex("1 1 auto").print();
		/-      <table border=1>
		for (int i=0; i<middlerep; i++){
			htmlprintf ("<tr><td>field-%d\n",i);
		}
		/-      </table>
	}
	mi.end();
	DIV bo; bo.bg("pink").flex("0 1 auto").print();
	/- 			toto
	bo.end();
	//col.end();
	/- </table>
}
</mod>

/*
	This test was done to experiment with div inside div, to learn how it behave
*/
void test1()
{
	tlmpweb_title ("This is the start of a long long journey");
	<?
	<style>
	* {
		box-sizing: border-box;
	}
	.flex-container {
		display: flex;
		background-color: DodgerBlue;
		height: 100%;
	}
	.flex-ccontainer > div {
		background-color: #f1f1f1;
		margin: 10px;
		padding: 20px;
		font-size: 30px;
		height: 100%;
	}
	section {
		display: -webkit-flex;
		display: flex;
		background-color:lightblue;
	}
	.div{
		width:30%;
	}
	.box {
		display: flex;
		flex-flow: column;
		height: 100%;
	}

	.right{
		background-color:red;
		height:100%;
		display: flex;
		flex-flow: column;
	}
	.top{
		background-color:gray;
		flex: 0 1 auto;
	}
	.middle{
		background-color:yellow;
		flex: 1 1 auto;
	}
	.bottom{
		flex: 0 1 auto;
		background-color:pink;
	}
	</style>
	?>
	tlmpweb_body("white",NULL);
	<?
	<div class="flex-container">
	<div style="width:20%">
		allo le monde
		bababa
		babababa
		abababba
	</div>
	?>
	layout(40,1,10);
	layout(40,2,10);
	/- </div>
}
/*
	This is replicating the complete layout of bolixo
*/
<mod>
void bolixo()
{
	<?
	<style>
	.tab {
		//margin-bottom: 100%;
		//position: absolute;
		//top: 0;
		//left: 0;
		//bottom: 0;
		//width: 10em; /* or whatever */
	}
	</style>
	?>
	tlmpweb_body("white",NULL);
	DIV main("main"); main.dispflex().flowcol().w(100).h(100).print();
	{	// The title
		DIV b0("main0","main0"); b0.w(100).flexfixe().print();
		DIV banner; banner.w(100).dispflex().flowrow().bg("lightgray").print();
		// Put some items
		DIV it;
		it.flexfixe().content("<font size=+2>Bolixo.org</font>");
		it.flexgrow().content("<center>Welcome</center>");
		it.flexfixe().content("<table width=100% border=0><tr><td bgcolor=blue>About<td bgcolor=blue align=right>Logout</table>");
	}
	WEBID table1("table1");
	WEBID table2("table2");
	{
		DIV body("main1"); body.flexgrow().w(100).bg("red").print();
		DIV tabs("tabs"); tabs.w(100).dispflex().flowrow().bg("gray").align("stretch").print();
		DIV t("tab","tab");
		t.w(20).flexfixe().bg("yellow").print();
		{
			do_webtable(table1,20);
			//DIV grow; grow.dispflex().flowcol().print();
			//DIV b0; b0.bg("black").flexgrow().content("<font color=white>This is a test</font>");
		}
		t.w(40).flexfixe().bg("lightblue").print();
		{
			DIV t; t.dispflex().flowcol().print();
			DIV tab21("tab2","tab2"); tab21.bg("blue").flexfixe().print();
			/- <h3 id='t2'>THIS IS T2</h3>
			tab21.end();
			DIV tab22; tab22.flexgrow().print();
			do_webtable(table2,20);
		}
		t.w(40).flexfixe().bg("pink").print();
		/- <h3 id='t3'>THIS IS T2</h3>

		t.end();
		/- <div style="clear:both;"></div>
	}
	main.end();
	<?
	<script>
		var t = document.getElementById('main0').clientHeight;
		var col = document.getElementById("t2");
		var diff = window.innerHeight-t;
		var line = "title bar height = " + t + " screenh = " + window.innerHeight + " res= " + diff;
		col.innerHTML = line + "<br>" + line + "<br>" + line;
		document.getElementById("tab").style.height=diff;
		var tables = document.getElementsByClassName('webtable');
		var i;
		var tablestr='';
		var sep='';
		for (i = 0; i < tables.length; i++) {
			var table = tables[i];
			tablestr+=sep+table.id+','+table.offsetHeight+','+table.offsetWidth;
			sep=',';
		}
		var ttop = document.getElementById("table2-top");
		var tt = 0;
		if (ttop != null) tt = ttop.clientHeight;
		t = document.getElementById('tab2').clientHeight;
		document.getElementById("t3").innerHTML = tablestr + " tab2=" + t + " top=" + tt;
		document.getElementById("table2").style.height=diff-t-tt;
		document.getElementById("table1").style.height=diff-document.getElementById("table1-top").clientHeight;
	</script>
	?>
}
/*
	Try to understand why a form creates some vertical spaces in a layout
	The trick was "margin-bottom:0;"
*/
<mod>
void form_space()
{
	tlmpweb_body("white",NULL);
	DIV d; d.h(100).dispflex().flowcol().print();
	DIV sub; sub.h(10).bg("yellow").print();
	/- 111111<br>
	{
		DIV s; s.w(100).bg("blue").print();
		// /- <table border=1><tr><td>
		/- <form id=form action=journey.hc#form method=post ENCTYPE="multipart/form-data" style='margin-bottom: 0;'></form>
		// /- </table>
	}	
	// /- <a name=toto style='background-color:blue;'/>
	/- 22222<br>
	/- 33333<br>
	sub.h(30).bg("red").print();
	<call form>("test");
	<f top>
		/- <table bgcolor=pink>
		/- <tr><td>allo
	</f>
	<f bottom>
		/- </table>
	</f>
	<f setup>
	</f>
	<f validate>
		return true;
	</f>
	<f process>
	</f>
	</call>
	sub.h(60).bg("green").print();
	/- End
}
</mod>
/*
	Simple test to see the new HTML 5 tags section and friends
*/
</mod>
void newtags()
{
	<?
<style>
.page-wrap {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
 }
.main-content {
  width: 60%;
}
.main-nav,
.main-sidebar {
  -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1;         /* OLD - Firefox 19- */
  width: 20%;               /* For old syntax, otherwise collapses. */
  -webkit-flex: 1;          /* Chrome */
  -ms-flex: 1;              /* IE 10 */
  flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.main-content {
  -webkit-box-ordinal-group: 2;   /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-ordinal-group: 2;      /* OLD - Firefox 19- */
  -ms-flex-order: 2;              /* TWEENER - IE 10 */
  -webkit-order: 2;               /* NEW - Chrome */
  order: 2;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.main-nav {
  -webkit-box-ordinal-group: 1;  
  -moz-box-ordinal-group: 1;     
  -ms-flex-order: 1;     
  -webkit-order: 1;  
  order: 1;
}
.main-sidebar {
  -webkit-box-ordinal-group: 3;  
  -moz-box-ordinal-group: 3;     
  -ms-flex-order: 3;     
  -webkit-order: 3;  
  order: 3;
}
</style>
	?>
	tlmpweb_body("white",NULL);
	<?
<div class="page-wrap">
  
  <section class="main-content" role="main">
    Main content: first in source order
  </section>
  
  <nav class="main-nav" role="navigation">
    Links
  </nav>
  
  <aside class="main-sidebar" role="complementary">
    Sidebar
  </aside>
    
</div>
	?>
}
<mod>
void scrollbar()
{
	tlmpweb_body("white",NULL);
	DIV d; d.dispflex().flowcol().print();
	/- <div style='width:500px;'>
		/- <div style='float:right;'>
		/- previous page next page
		/- </div>
	/- </div>
	/- <div style='height:500px; width:500px; overflow: auto; background-color:yellow;'>
	WEBID table("table");
	do_webtable(table,100);
	/- </div>
}
</mod>
static void draw_tab (unsigned width, unsigned height, const char *fill, bool close, const char *title, bool drawx, const char *href, const char *xref)
{
	if (width == 0){
		width = strlen(title)*9;
		if (drawx) width += 25;
	}
	htmlprintf ("<svg width=%u height=%u>\n",width,height);
	htmlprintf ("<a href=%s>\n",href);
	htmlprintf ("<path fill='%s' stroke=black stroke-width=1\n",fill);
	htmlout ("d=\"\n");
	htmlprintf ("M0,%u\n",height);
	htmlout ("H1\n");
	htmlout ("V10\n");
	htmlout ("C1,0 10,0 20,0\n");
	htmlprintf ("H%u\n",width-12);
	htmlprintf ("C%u,0 %u,0 %u,5\n",width-10,width-2,width-2);
	htmlprintf ("V%u\n",height);
	htmlprintf ("H%u\n",width);
	if (close) htmlout ("z\n");
	htmlout ("\"/>\n");
	htmlprintf ("\t<text x=10 y=%u class=small>%s</text>\n",height-10,title);
	htmlout ("</a>\n");
	if (drawx){
		unsigned x=width-20;
		unsigned y=height-10;
		static unsigned id=0;
		htmlprintf ("<a href='%s' onmouseover=changefill('tabrect%u','#D0D0D0') onmouseout=changefill('tabrect%u','none')>\n",xref,id,id);
		htmlprintf ("<rect id='tabrect%u' x=%u y=%u rx=2 ry=2 width=14 height=14 fill=none />\n",id,x-3,y-11);
		htmlprintf ("<path stroke=black stroke-width=1 d='M%u,%u l8,8 M%u,%u l8,-8'/>\n",x,y-8,x,y);
		id++;
		htmlout ("</a>\n");
	}
	htmlout ("</svg>\n");
}
static void draw_tab (unsigned width, unsigned height, const char *fill, bool close, const char *title)
{
	draw_tab (width,height,fill,close,title,false,"","");
}
<mod>
void draw_left_arrow(bool visible, const char *xref)
{
	htmlout ("<svg width=20 height=30>\n");
	if (visible){
		static unsigned id=0;
		htmlprintf ("<a href='%s' onmouseover=changefill('larrow%u','#D0D0D0') onmouseout=changefill('larrow%u','none')>\n",xref,id,id);
		htmlprintf ("<rect id='larrow%u' x=2 y=2 rx=2 ry=2 width=16 height=26 fill=none />\n",id);
		id++;
	}
	const char *color = visible ? "black" : "white";
	htmlprintf ("<path fill=%s stroke=%s stroke-width=1 d='M4,15 L12,8 L12,22 z' />\n",color,color);
	if (visible) htmlout ("</a>\n");
	// Always put the underline
	htmlout ("<path stroke=black stroke-width=1 d='M0,29 l20,0'/>\n");
	htmlout ("</svg>\n");	
}
void draw_right_arrow(bool visible, const char *xref)
{
	htmlout ("<svg width=20 height=30>\n");
	if (visible){
		static unsigned id=0;
		htmlprintf ("<a href='%s' onmouseover=changefill('rarrow%u','#D0D0D0') onmouseout=changefill('rarrow%u','none')>\n",xref,id,id);
		htmlprintf ("<rect id='rarrow%u' x=2 y=2 rx=2 ry=2 width=16 height=26 fill=none />\n",id);
		id++;
	}
	const char *color = visible ? "black" : "white";
	htmlprintf ("<path fill=%s stroke=%s stroke-width=1 d='M16,15 L8,8 L8,22 z' />\n",color,color);
	if (visible) htmlout ("</a>\n");
	// Always put the underline
	htmlout ("<path stroke=black stroke-width=1 d='M0,29 l20,0'/>\n");
	htmlout ("</svg>\n");	
}
// Draw nice tabs using SVG
static void tabs (int nbrep, bool arrow_left, bool arrow_right)
{
	DIV main; main.dispflex().w(100).flowcol().print();
	DIV head; head.h(10).w(100).flexfixe().bg("lightgray").print();
	/- <h1>Title</h1>
	head.end();
	DIV body; body.w(100).flexfixe().print();
	DIV tabs; tabs.dispflex().flowrow().print();
	{
		DIV col; col.flexfixe().w(50).print();
		DIV cols; cols.dispflex().flowrow().print();
		{
			DIV col; col.flexfixe().print();
			draw_left_arrow(arrow_left,"");
		}
		{
			DIV col; col.flexgrow().overflow("hidden").print();
			static struct {
				const char *s;
				bool dox;
			} tb[]={{"Messages",false},{"Projects",true},{"Mails",true}};
			DIV d; d.dispflex().flowrow().bg("none").overflow("hidden").print();
			DIV c;
			for (int i=0; i<nbrep; i++){
				for (auto x:tb){
					c.print();
					draw_tab(0,30,"white",false,x.s,x.dox,"https://truelies.news","https://solucorp.solutions");
				}
			}
			c.print();
			#if 1
			<?
			<svg width=2000 height=30>
			<path stroke=black stroke-width=1 d="M0,30 h2000" />
			</svg>
			?>
			#endif
		}
		{
			DIV col; col.flexfixe().print();
			draw_right_arrow(arrow_right,"");
		}
		DIV end; end.flexfixe().print();
		/- ?
	}
	{
		DIV col; col.flexfixe().w(50).bg("yellow").print();
	}
		//line x1=0 y1=20 x2=1000 y2=20 style='stroke-width:4; stroke=black;'/>
}
</mod>
void tabs()
{
	tlmpweb_body("white",NULL);
	<?
			<script>
			function changefill(id,color){
				var e = document.getElementById(id);
				console.log ("e " + e != null);
    				e.setAttribute('fill', color);
    				//e.currentTarget.setAttribute('fill', color);
			}
			</script>
			<style>
			.small { font: normal 14px sans-serif; file: black;}
			.heavy { font: bold 30px sans-serif; }

			.table{
				border:0;
				padding:0;
				margin:0;
			}
			.td{
				margin:0;
				border:0;
				padding:0;
			}
			</style>
	?>
	tabs (0,true,true);
	tabs (1,false,true);
	tabs (2,false,true);
	tabs (8,false,true);
}
<mod>
static W_SSTRING  table("webtable");
static W_UNSIGNED menu("menu");
static W_UNSIGNED line("line");
static W_UNSIGNED screenheight("screenheight");
static W_UNSIGNED screenwidth("screenwidth");
static W_SSTRING fontsize("fontsize");
void popup()
{
	<?
	<style>
	.dropbtn {
		background-color: #4CAF50;
		color: white;
		padding: 16px;
		font-size: 16px;
		border: none;
		cursor: pointer;
	}
	.show {display: block;}
	.active { background-color: lightgrey;}
	</style>
	?>
	#if 0
	<?
	.dropdown {
		position: absolution;	//relative;
		display: inline-block;
	}

	.dropdown-content {
		display: none;
		position: absolute;
		background-color: #f1f1f1;
		min-width: 160px;
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		z-index: 1;
	}

	.dropdown-content a {
		color: black;
		padding: 6px 6px;
		text-decoration: none;
		display: block;
	}

	.dropdown-content a:hover {background-color: #add;}

	</style>
	<script>
	var dropdown_rect = null;
	function dropdown_function(id,event,visibles) {
		if (dropdown_rect == null){
			var rect = event.target.getBoundingClientRect();
			console.log ("event.target " +event.target + " pos " + rect.left + " " + rect.top + " " + rect.bottom);
			var drop = document.getElementById(id);
			if (drop == null){
				console.log ("myFunction id " + id + " is null");
			}else{
				if (visibles != null){
					console.log ("childnodes="+drop.childNodes.length);
					var atags = drop.getElementsByTagName('a');
					console.log ("atags =" + atags.length);
					for (var i = 0; i < atags.length; i++) {
						var child = atags[i];
						console.log ("child = " + child);
						var found = false;
						var gray_out = false;
						for (var j=0; j<visibles.length; j++){
							if (visibles[j] == 100+i){
								gray_out = true;
								found = true;
								break;
							}else if (visibles[j] == i){
								found = true;
								break;
							}
						}
						console.log ("found="+found + " i="+i);
						if (found){
							child.style.display = "block";
							if(gray_out){
								child.style.color = "gray";
							}else{
								child.style.color = "black";
							}
						}else{
							child.style.display = "none";
						}
					}
				}
				drop.style.left = event.clientX;
				drop.style.top = rect.bottom;
				drop.classList.toggle("show");
				dropdown_rect = drop.getBoundingClientRect();
			}
		}
		return false;
	}

	// Close the dropdown if the user clicks outside of it
	window.onclick = function(event) {
		console.log ("event = " + event.target + " dropdown_rect " + dropdown_rect + " coor " + event.clientX + " " + event.clientY);
		if (dropdown_rect != null){
			if (event.clientX >= dropdown_rect.left && event.clientX <= dropdown_rect.right
				&& event.clientY >= dropdown_rect.top && event.clientY <= dropdown_rect.bottom){
				console.log ("egal");
			}else{
				dropdown_rect = null;
				var dropdowns = document.getElementsByClassName("dropdown-content");
				var i;
				for (i = 0; i < dropdowns.length; i++) {
					var openDropdown = dropdowns[i];
					if (openDropdown.classList.contains('show')) {
						openDropdown.classList.remove('show');
					}
				}
				console.log ("different");
			}
		}
	}
	</script>
	?>
	#endif
	tlmpweb_setscripts();
	tlmpweb_body("white",NULL);
	if (table.isset()) htmlprintf ("webtable=%s<br>\n",table.c_str());
	if (menu.isset()) htmlprintf ("menu=%u<br>\n",menu.getval());
	if (line.isset()) htmlprintf ("line=%u<br>\n",line.getval());
	if (screenheight.isset()) htmlprintf ("screenheight=%u<br>\n",screenheight.getval());
	if (screenwidth.isset()) htmlprintf ("screenwidth=%u<br>\n",screenwidth.getval());
	if (fontsize.isset()) htmlprintf ("fontsize=%s<br>\n",fontsize.c_str());


	<?
	<h2>Test dropdown</h2>
	<script>
	var webtable_line=0;
	var webtable_tb="";
	function f_tb1(l,tr,ev,visibles){
		webtable_tb = "tb1";
		webtable_line = l;
		return dropdown_function("dropdown-tb1",tr,event,visibles);
	}
	function f_tb2(l,tr,ev,visibles){
		webtable_tb = "tb2";
		webtable_line = l;
		return dropdown_function("dropdown-tb2",tr,event,visibles);
	}
	function f_item(num){
		formsubmit("/journey.hc?line="+webtable_line+"&webtable="+webtable_tb+"&menu="+num);
	}
	</script>
	<div class="dropdown">
		<button onclick="dropdown_function('dropdown',event,null)" class="dropbtn">DDropdown</button>
		<div id="dropdown" class="dropdown-content">
		<a href="#" onclick=f_item(1)>Link 1</a>
		<a href="#" onclick=f_item(2)>Link 2</a>
		<a href="#" onclick=f_item(3)>Link 3</a>
		</div>
	</div>
	<div class="dropdown">
		<div id="dropdown-tb1" class="dropdown-content">
		<a href="#" onclick=f_item(1)>tb1 Link 1</a>
		<a href="#" onclick=f_item(2)>tb1 Link 2</a>
		<a href="#" onclick=f_item(3)>tb1 Link 3</a>
		</div>
	</div>
	<div class="dropdown">
		<div id="dropdown-tb2" class="dropdown-content">
		<a href="#" onclick=f_item(1)>tb2 Link 1</a>
		<a href="#" onclick=f_item(2)>tb2 Link 2</a>
		<a href="#" onclick=f_item(3)>tb2 Link 3</a>
		<a href="#" onclick=f_item(4)>tb2 Link 4</a>
		<a href="#" onclick=f_item(5)>tb2 Link 5</a>
		<a href="#" onclick=f_item(6)>tb2 Link 6</a>
		</div>
	</div>
	?>
	/- <h1>Table tb1</h1><br>
	/- <table border=0>
	for (int i=0; i<5; i++){
		htmlprintf ("<tr style=cursor:pointer oncontextmenu=\"return f_tb1(%d,this,event,[1,2])\">\n",i);
		for (int j=0; j<5; j++){
			htmlprintf ("<td>hello world how are you today %d",j);
		}
		/-
	}
	/- </table>
	/- <h1>Table tb2</h1><br>
	/- <table border=0>
	for (int i=0; i<5; i++){
		htmlprintf ("<tr style=cursor:pointer oncontextmenu=\"return f_tb2(%d,this,event,[%s])\">\n",i,i&1?"0,2,4":"0,101,3,5");
		for (int j=0; j<5; j++){
			htmlprintf ("<td>this is table tb2 %d",j);
		}
		/-
	}
	/- </table>
}
</mod>
<mod>
void webtable_drowdown()
{
	WEBID table1("table1");
	WEBID table2("table2");
	tlmpweb_setscripts();
	tlmpweb_body("white",NULL);
	unsigned cur = 0;
	<call webtable>(table1,cur,0,5);
	<f load>
		setthparms ("align=left bgcolor=lightgray","");
		setrowstyle ("white","bgcolor=white");
		setrowstyle ("white+current","bgcolor=lightblue");

		for (unsigned i=0; i<4; i++){
			adddrop_opt (i,string_f("menu %u",i));
		}
		sethead ("title1\ttitle2\ttitle3\ttitle4");
		setclickopt (true,"","");
		for (int i=0; i<5; i++){
			resetdrop();
			if (i&1){
				setdrop_visibles({0,1,2});
			}
			setrow("white",i,"aaaa\tbbbb\tcccc\tdddd");
		}
	</f>
	</call>
}
</mod>
static W_SSTRING w_file("file");
<mod>
void webtable_popup()
{
	tlmpweb_setscripts();
	<?
	<style>
	
	.xpopup {
		display: inline-block;
	}

	.iipopup-content {
		display: none;
		position: absolute;
		background-color: #f1f1f1;
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		z-index: 1;
	}

	</style>
	<script>
	function unshow(){
		var elm = document.getElementById('popup');
		console.log ("elm="+elm);
		console.log ("unshow="+elm.classList.toggle('show'));
	}
	</script>
	?>
	tlmpweb_body("white",NULL);
	WEBID id ("id");
	do_webtable(id, 5);
	{
	DIV a("popup"); a.print();
	DIV d("popup-content","popup"); d.print();
	DIV dd; dd.dispflex().flowrow().print();
	DIV left; left.flexfixe().margins(10,10).vmargins(5,0).print();
	if (0){
		/- This is an error
		/- <p>
		/- Another error
	}else{
		<call form>("popup");
		<f setup>
			/- <table border=0>
			/- <tr><td>New file name<td>
			field_string (w_file,"");
			/- </table>
		</f>
		<f validate>
			return true;
		</f>
		<f process>
		</f>
		</call>
	}
	left.end();
	DIV right; right.print();
	<?	
	<svg width=20 height=20>
		<a href="#" onclick=unshow()
			onmouseover=changefill('svg1','#D0D0D0')
			onmouseout=changefill('svg1','#F1F1F1')
		>
		<rect id=svg1 x=2 y=2 rx=2 ry=2 width=18 height=18 fill=#f1f1f1 />\n");
		<path stroke=black stroke-width=1 d='M7,7 l8,8 M7,15 l8,-8'/>
		</a>
	</svg>
	?>
	}
	<?
	<script>
	var pop = document.getElementById("popup");
	if (pop != null){
		pop.style.left = 200;
		pop.style.top = 100;
		console.log ("show="+pop.classList.toggle("show"));
	}
	</script>
	?>

}
</mod>

static void index_script(unsigned scrollid1, unsigned scrollid2)
{
	// Script to make sure the webtabs tabs use the full height of the screen
	// Then it takes the webtables and grows them too.
	<?
	<script>
		document.onreadystatechange = function () {
			var state = document.readyState;
			if (state == 'interactive') {
				fixsize();
			} else if (state == 'complete') {
			}
		};
		var diff = 0;
		function allDescendants (node,total) {
			//console.log ("Enter " + node.className + " " + node.id);
			if (node.className == "tabs"){
				var bord=(node.offsetHeight-node.clientHeight);
				var style = node.currentStyle || window.getComputedStyle(node);
				var margins = parseInt(style.marginTop,10) + parseInt(style.marginBottom,10);
				var paddings = parseInt(style.paddingTop,10) + parseInt(style.paddingBottom,10);
				total += bord + margins + paddings;
				console.log ("border node.id=" + node.id + " total="+total+" bord="+bord);
			}
			for (var i = 0; i < node.childNodes.length; i++) {
				var child = node.childNodes[i];
				if (child.id != null
					&& (child.id == "tabs"
						|| child.id == "tab_form"
						|| child.id == "webtable-top")){
					total += child.offsetHeight;
					if (child.id == "tab_form") total += 2;	// Bug scrollbar ???
					console.log ("child.id=" + child.id + " total="+total+" height="+child.offsetHeight);
				}else{
					if (child.id != null && child.id == "vframe2h"){
						var bord=(child.offsetWidth-child.clientWidth);
						total += bord;
						console.log ("border child.id=" + child.id + " total="+total+" border="+bord);
					}else if (child.className == "webtable" || child.id == "textgrow"){
						console.log ("Set webtable "+child.id+" total="+total+" diff="+diff+" oldheight="+child.offsetHeight);
						child.style.height = diff - total;
						break;
					}
					total = allDescendants(child,total);
				}
			}
			return total;
		}
		function fixsize(){
			var t = document.getElementById('head').offsetHeight;
			diff = window.innerHeight-t;
			document.getElementById('body').style.height = diff-1;
			document.getElementById('main').style.height = window.innerHeight-1;
			var tabs = document.getElementsByClassName("tabs");
			for (var i=0; i<tabs.length; i++){
				var node = tabs[i];
				var style = node.currentStyle || window.getComputedStyle(node);
				var margins = parseInt(style.marginTop,10);
				margins += parseInt(style.marginBottom,10);
				node.style.height = diff-2-margins;
			}
			console.log ("tabs.length=" + tabs.length);
			var i;
			for (i=0; i<tabs.length; i++){
				allDescendants (tabs[i],0);
			}
			var tables = document.getElementsByClassName('webtable');
			console.log ("ready " + document.readyState);
			for (i = 0; i < tables.length; i++) {
				var table = tables[i];
				console.log (table.id+" "+table.offsetHeight+" "+table.offsetWidth);
			}
	?>
	webtable_setscroll();
	<?
		}
	</script>
	?>
}
<mod>
static void journey_setscroll()
{
	<obj WEBCONTEXT ctx>();
	</obj>
	tlmpweb_setscripts();
	tlmpweb_body("white",NULL);
	WEBID id1 ("id1");
	WEBID id2 ("id2");
	{
		DIV m("","main"); m.w(100).h(100).print();
		DIV d("","head"); d.w(100).h(10).print();
		/- Hello
		d.end();
		unsigned cur1 = 10;
		unsigned cur2 = 20;
		d.id("body").w(100).dispflex().flowrow().print();
		{
			DIV tab("tabs"); tab.flexfixe().w(40).bg("lightblue").margins(5,5).vmargins(5,5).border(1,"black").print();
			do_webtable(id1, 100,cur1);
		}
		{
			DIV tab("tabs"); tab.flexfixe().w(60).bg("lightred").margins(5,5).vmargins(5,5).border(1,"black").print();
			do_webtable(id2, 100,cur2);
		}
	}
	unsigned w,h,l,scroll_top1=100,scroll_top2=400;
	tlmpweb_gettablegeometry (id1,w,h,scroll_top1,l);
	tlmpweb_gettablegeometry (id2,w,h,scroll_top2,l);
tlmp_error ("top %u %u\n",scroll_top1,scroll_top2);
	index_script(scroll_top1,scroll_top2);
}
</mod>
void util_endscript(PARAM_STRING);

<mod>
static void journey_subtabs()
{
	<obj WEBCONTEXT ctx>();
	</obj>
	tlmpweb_setscripts();
	tlmpweb_body("white",NULL);
	WEBID id1 ("id1");
	WEBID id2 ("id2");
	{
		DIV m("","main"); m.w(100).h(100).print();
		DIV d("","head"); d.w(100).h(10).print();
		/- Hello
		d.end();
		d.cls("tabs").id("body").w(100).dispflex().flowrow().print();
		DIV d1("subtabs","d1"); d1.w(50).vpaddings(10,10).bg("pink").print();
		DIV d2("subtabs","d2"); d2.w(95).vpaddings(10,10).bg("white").print();
		DIV d3("subtabs","d3"); d3.w(95).vpaddings(10,10).bg("pink").print();
	}
	util_endscript("");
}
</mod>
/*
	When you click on a link, it jumps to a new tab.
	If you click with the middle mouse button, it opens in a new tab, but stay in the current one (like normal).
*/
<mod>
static void journey_click()
{
	<obj WEBCONTEXT ctx>();
	</obj>
	tlmpweb_setscripts();
	htmlout (
		"<script>\n"
		"function openintab(event,href){\n"
		"	if (event.which == 1){\n"
		"		window.open(href,'_blank');\n"
		"		event.stopPropagation();\n"
		"	}else if (event.which == 2){\n"
		"		window.open(href,'_blank');\n"
		"		window.focus();\n"
		"		event.stopPropagation();\n"
		"	}\n"
		"	return false;\n"
		"}\n"
		"</script>\n"
		);
	tlmpweb_body("white",NULL);


	const char *url = "http://test1.bolixo.org/talk1.jpg";
	htmlprintf ("<span style=color:blue onmousedown=openintab(event,'%s')>",url);
	htmlprintf ("<img width=300 src=%s>\n",url);
	htmlout ("</span>\n");
}
</mod>
extern "C" void webmain()
{
	tlmpweb_title ("This is the start of a long long journey");
	//test1();
	//bolixo();
	//newtags();
	//form_space();
	//scrollbar();
	//tabs();
	//popup();
	//webtable_dropdown();
	//webtable_popup();
	//journey_setscroll();
	//journey_subtabs();
	journey_click();
}