#ifndef _WEBPAGE_H_
#define _WEBPAGE_H_
/*
 * To online encode text file to C source use online utility (Text->Cpp):
 * https://tomeko.net/online_tools/cpp_text_escape.php?lang=en
 * add option <split output into multiple lines> (this is for good reading into browser, as source code)
 * after that insert in any text editor and replace <\n"> sequence to <\n"\> (this is for recognize multiple string into C-source headers)
 *
 * Also can use File->HEX (BIN2HEX) - for prepare images for example:
 * https://tomeko.net/online_tools/file_to_hex.php?lang=en
*/

/*************************************************************************************
 * JavaScript Functions
 *************************************************************************************/

#define wiz550web_ajax_js 	"function AJAX(a,e){var c=d();c.onreadystatechange=b;function d(){if(window.XMLHttpRequest){return new XMLHttpRequest()}else{if(window.ActiveXObject){return new ActiveXObject(\"Microsoft.XMLHTTP\")}}}function b(){if(c.readyState==4){if(c.status==200){if(e){e(c.responseText)}}}}this.doGet=function(){c.open(\"GET\",a,true);c.send(null)};this.doPost=function(f){c.open(\"POST\",a,true);c.setRequestHeader(\"Content-Type\",\"application/x-www-form-urlencoded\");c.setRequestHeader(\"ISAJAX\",\"yes\");c.send(f)}}function $(a){return document.getElementById(a)}function $$(a){return document.getElementsByName(a)}function $$_ie(a,c){if(!a){a=\"*\"}var b=document.getElementsByTagName(a);var e=[];for(var d=0;d<b.length;d++){att=b[d].getAttribute(\"name\");if(att==c){e.push(b[d])}}return e}"

/* Get: Network Information: function NetinfoCallback(o), getNetinfo() */
#define wiz550web_netinfo_js	"function NetinfoCallback(o){"\
									 "$('txtmac').value=o.mac;"\
									 "$('txtip').value=o.ip;"\
									 "$('txtgw').value=o.gw;"\
									 "$('txtsn').value=o.sn;"\
									 "$('txtdns').value=o.dns;"\
									 "if(typeof(window.external)!='undefined'){"\
										"obj=$$_ie('input','dhcp');"\
									 "}else{"\
										"obj=$$('dhcp');"\
									 "}"\
								"}"\
								" "\
								"function getNetinfo(){"\
									 "var oUpdate;"\
									 "setTimeout(function(){"\
									 	"oUpdate=new AJAX('get_netinfo.cgi',function(t){"\
									 		"try{eval(t);}catch(e){alert(e);}"\
									 "});"\
									 "oUpdate.doGet();},300);"\
								 "}"


/* Get: Digital I/O state/dir:  function DioCallback(o), getDio(o) */
/* Set: Digital I/O state: 		function setDiostate(o) */
/* Set: Digital I/O direction: 	function setDiodir(o) */
#define wiz550web_dio_js	\
							"function DioCallback(o){"\
								"var pin = o.dio_p;"\
								"$('txtdio_s'+pin).value=o.dio_s;"\
								"$('txtdio_d'+pin).value=o.dio_d;"\
							"}"\
							"function led1Callback(o){"\
								"$('led1_txt').innerHTML=o.led1_txt;"\
							"}"\
							"function getDio(o) {"\
								"var p=o.attributes['pin'].value;"\
								"var oUpdate;"\
								"oUpdate=new AJAX('get_dio'+p+'.cgi',function(t){try{eval(t);}catch(e){alert(e);}});"\
								"oUpdate.doGet();"\
							"}"\
							" "\
							"function setDiostate(o){"\
								"var p=o.attributes['pin'].value;"\
								"/*var v=$('txtdio_s'+p).value;*/"\
								"var v=o.attributes['s'].value;"\
								"dout=new AJAX('set_diostate.cgi', function(t){try{/*eval(t);*/document.getElementById('led1_txt').innerHTML = t;}catch(e){alert(e);}});"\
								"dout.doPost('pin='+p+'&val='+v);"\
							"}"\
							" "\
							"function setDiodir(o){"\
								"var p=o.attributes['pin'].value;"\
								"/*var v=$('txtdio_d'+p).value;*/"\
								"var v=o.attributes['d'].value;"\
								"dout=new AJAX('set_diodir.cgi', function(t){try{eval(t);}catch(e){alert(e);}});"\
								"dout.doPost('pin='+p+'&val='+v);"\
							"}"\
							" "\
							"function getled1(){"\
								 "var oUpdate;"\
								 "setTimeout(function(){"\
									"oUpdate=new AJAX('get_led1.cgi',function(t){"\
										"try{eval(t);}catch(e){alert(e);}"\
								 "});"\
								 "oUpdate.doGet();},300);"\
								 "setTimeout('getled1()',3000);"\
							 "}"


/* Get: Analog Input: 	function AinCallback(o), getAin(o) */
/* Additional function: function AinDrawgraph(o), getAin6_update() */
#define wiz550web_ain_js	"function AinCallback(o){"\
								"var pin = o.ain_p;"\
								"$('txtain_v'+pin).value=o.ain_v;"\
								"AinDrawgraph(o);"\
							"}"\
							"function getAin(o) {"\
								"var p=o.attributes['pin'].value;"\
								"var oUpdate;"\
								"setTimeout(function(){"\
									"oUpdate=new AJAX('get_ain'+p+'.cgi',function(t){try{eval(t);}catch(e){alert(e);}});"\
								"oUpdate.doGet();},300);"\
							"}"\
							"function AinDrawgraph(o){"\
								"var pin=o.ain_p;"\
								"var val=o.ain_v;"\
								"$('ain_v'+pin).style.width=val*500/1023+'px';"\
							"}"\
							"function getAin6_update() {"\
								"var oUpdate;"\
								"setTimeout(function(){"\
									"oUpdate=new AJAX('get_ain6.cgi',function(t){try{eval(t);}catch(e){alert(e);}});"\
								"oUpdate.doGet();},300);"\
								"setTimeout('getAin6_update()',500);"\
							"}"


/* Get: Analog Input: 	function AinCallback(o), getAin(o) */
/* Additional function: function AinDrawGoogleGauge(o), getAin6_update() */
/*
#define ain_gauge_js		"google.load('visualization', '1', {packages:['gauge']});"\
							"google.setOnLoadCallback(AinDrawGoogleGauge);"\
							"function AinCallback(o){"\
								"var pin = o.ain_p;"\
								"$('txtain_v'+pin).value=o.ain_v;"\
								"AinDrawGoogleGauge(o);"\
							"}"\
							"function getAin(o) {"\
								"var p=o.attributes['pin'].value;"\
								"var oUpdate;"\
								"setTimeout(function(){"\
									"oUpdate=new AJAX('get_ain'+p+'.cgi',function(t){try{eval(t);}catch(e){alert(e);}});"\
								"oUpdate.doGet();},300);"\
							"}"\
							"function AinDrawGoogleGauge(o){"\
								"var val=o.ain_v;"\
								"var temp_val=Number(((((val*3300)/1023)-500)/10).toFixed(2));"\
								"var data = google.visualization.arrayToDataTable(["\
									"['Label', 'Value'],"\
									"['Temp.', 80]"\
								"]);"\
								"var options = {"\
									"width:400, height:120,"\
									"max:100, min:-40,"\
									"greenFrom:-40, greenTo:0,"\
									"redFrom:90, redTo:100,"\
									"yellowFrom:75, yellowTo:90,"\
									"minorTicks: 5"\
								"};"\
								"var chart = new google.visualization.Gauge(document.getElementById('chart_div'));"\
								"data.setValue(0, 1, temp_val);"\
								"chart.draw(data, options);"\
							"}"\
							"function getAin6_update() {"\
								"var oUpdate;"\
								"setTimeout(function(){"\
									"oUpdate=new AJAX('get_ain6.cgi',function(t){try{eval(t);}catch(e){alert(e);}});"\
								"oUpdate.doGet();},300);"\
								"setTimeout('getAin6_update()',500);"\
							"}"
*/

/*************************************************************************************
 * HTML Pages (web pages)
 *************************************************************************************/

#define index_page \
"<!DOCTYPE html>\n"\
"\n"\
"<html>\n"\
"<head>\n"\
"  <title>W5500-AtMEGA1284p Web Server</title>\n"\
"  <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>\n"\
"</head>\n"\
"\n"\
"<body>\n"\
"  <div>\n"\
"    W5500-AtMEGA1284p Web Server Demopage\n"\
"  </div><br>\n"\
"  <a href='netinfo.html'>Network Information</a><br>\n"\
"  <a href='img.html'>Base64 Image Data</a><br>\n"\
"  <br>\n"\
"  <a href='dio.html'>Ex1&gt; Digital I/O</a><br>\n"\
"  <a href='ain.html'>Ex2&gt; Analog Input</a><br>\n"\
"  <a href='ain_gauge.html'>Ex3&gt; Analog Input: Google Gauge Chart</a><br>\n"\
"  <br>\n"\
"  <a href='info.html'>Device Information</a><br>\n"\
"</body>\n"\
"</html>\n"\
""
#define wiz550web_info_js \
"function getInfo()\n"\
"{\n"\
" var oUpdate;\n"\
" setTimeout(function()\n"\
"  {\n"\
"   oUpdate = new AJAX('get_info.cgi', function(t)\n"\
"    {\n"\
"     try\n"\
"     {\n"\
"      //*eval(t);\n"\
"      document.getElementById('info_txt').innerHTML = t;\n"\
"     }\n"\
"     catch(e)\n"\
"     {\n"\
"      alert(e);\n"\
"     }\n"\
"    }\n"\
"   ); oUpdate.doGet();\n"\
"  }\n"\
"  , 300); setTimeout('getInfo()', 3000);\n"\
"}\n"\
""


#define netinfo_page 		"<!DOCTYPE html>"\
							"<html>"\
								"<head>"\
								"<title>W5500-AtMEGA1284p Web Server Network Info</title>"\
								"<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>"\
								"<style>"\
								"label{float:left;text-align:left;width:50px;}"\
								"li {list-style:none;}"\
								"</style>"\
								"<script type='text/javascript' src='ajax.js'></script>"\
								"<script type='text/javascript' src='netinfo.js'></script>"\
								"</head>"\
								"<body onload='getNetinfo();'>"\
									"<div>"\
									"W5500-AtMEGA1284p Web Server Network Information"\
									"</div>"\
									"<br>"\
									"<ul>"\
										"<li><label for='txtmac'>MAC:</label><input id='txtmac' name='mac' type='text' size='20' disabled='disabled'/></li> "\
										"<li><label for='txtip'>IP:</label><input id='txtip' name='ip' type='text' size='20' disabled='disabled'/></li> "\
										"<li><label for='txtgw'>GW:</label><input id='txtgw' name='gw' type='text' size='20' disabled='disabled'/></li> "\
										"<li><label for='txtsn'>SN:</label><input id='txtsn' name='sn' type='text' size='20' disabled='disabled'/></li> "\
										"<li><label for='txtdns'>DNS:</label><input id='txtdns' name='dns' type='text' size='20' disabled='disabled'/></li> "\
									"</ul>"\
								"</body>"\
							"</html>"


#define dio_page  			"<!DOCTYPE html>"\
							"<html>"\
								"<head>"\
								"<title>W5500-AtMEGA1284p Web Server Digital I/O v1.1</title>"\
								"<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>"\
								"<script type='text/javascript' src='ajax.js'></script>"\
								"<script type='text/javascript' src='dio.js'></script>"\
								"</head>"\
								"<body onload='getled1();'>"\
									"<!-- to do -->"\
									"<p id=\"led1_txt\">LED1: unknown..</p>"\
									"<div>"\
									"<input type='button' value='LED 1 Off' pin='LED1' s='0' onclick='setDiostate(this);'> "\
									"<input type='button' value='LED 1 On' pin='LED1' s= '1' onclick='setDiostate(this);'>"\
									"<br>"\
									"</div>"\
									"<!-- to do -->"\
								"</body>"\
							"</html>"


#define ain_page  			"<!DOCTYPE html>"\
							"<html>"\
								"<head>"\
								"<title>W5500-AtMEGA1284p Web Server Analog Input</title>"\
								"<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />"\
								"<meta http-equiv='pragma' content='no-cache' />"\
 	 	 	 	 	 	 	 	"<meta http-equiv='content-type' content='no-cache, no-store, must-revalidate' />"\
								"<script type='text/javascript' src='ajax.js'></script>"\
								"<script type='text/javascript' src='ain.js'></script>"\
								"<style>"\
									".analog{margin-top:2px;margin-right:10px;border:1px solid #ccc;height:20px;width:500px;display:block;}"\
									".ain{width:0%;height:100%;text-align:center;background:red;float:left;display:block;}"\
								"</style>"\
								"</head>"\
								"<body>"\
									"<!-- to do -->"\
									"<div>"\
										"<input type='text' id='txtain_v6' size='5' disabled='disabled' value=''> "\
										"<input type='button' value='Get AIN6' pin='6' onclick='getAin(this);'> "\
										"<input type='button' value='Get AIN6 Auto' onclick='getAin6_update();'> "\
										"<br>"\
										"<div class='analog' style='padding:0px;'><strong id='ain_v6' name='ain' class='ain' style='width:0%;'></strong></div>"\
									"</div>"\
									"<!-- to do -->"\
								"</body>"\
							"</html>"
#define info_page \
"<!DOCTYPE html>\n"\
"\n"\
"<html>\n"\
"<head>\n"\
"  <title>W5500-AtMEGA1284p Device Info</title>\n"\
" <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>\n"\
"  <script type='text/javascript' src='ajax.js'>\n"\
"</script>\n"\
"  <script type='text/javascript' src='info.js'>\n"\
"</script>\n"\
"</head>\n"\
"\n"\
"<body  onload='getInfo();'>\n"\
"  <div>\n"\
"    W5500-AtMEGA1284p Device Information\n"\
"  </div><br>\n"\
"<p id=\"info_txt\">..</p></body>\n"\
"</html>\n"\
"\n"\
""


//!! No space at RAM in AtMega1284p (16kb only..)
//!! Need replace all pages into FLASH memory (PROGMEM) - Shame AVR-8bit HARVARD Architecture!!
/*
#define ain_gauge_page		"<!DOCTYPE html>"\
							"<html>"\
								"<head>"\
								"<title>W5500-AtMEGA1284p Web Server Analog Input Gauge</title>"\
								"<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />"\
								"<meta http-equiv='pragma' content='no-cache' />"\
 	 	 	 	 	 	 	 	"<meta http-equiv='content-type' content='no-cache, no-store, must-revalidate' />"\
								"<script type='text/javascript' src='ajax.js'></script>"\
								"<script type='text/javascript' src='https://www.google.com/jsapi'></script>"\
								"<script type='text/javascript' src='ain_gauge.js'></script>"\
								"</head>"\
								"<body>"\
									"<div>"\
										"<input type='text' id='txtain_v6' size='5' disabled='disabled' value=''> "\
										"<input type='button' value='Get AIN' pin='6' onclick='getAin(this);'> "\
										"<input type='button' value='Get AIN Auto' onclick='getAin6_update();'> "\
										"<br>"\
										"<!--Draw the Google Gauge Chart-->"\
										"<div id='chart_div' style='width: 400px; height: 120px;'></div>"\
									"</div>"\
								"</body>"\
							"</html>"
*/

/* Base64 Image converter: http://base64.wutils.com/encoding-online/ */
/*
#define img_page			"<!DOCTYPE html>"\
							"<html>"\
								"<head>"\
								"<title>W5500-AtMEGA1284p Web Server Image</title>"\
								"<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />"\
								"<meta http-equiv='pragma' content='no-cache' />"\
								"<meta http-equiv='content-type' content='no-cache, no-store, must-revalidate' />"\
								"</head>"\
								"<body>"\
									"<div>"\
									"<img alt='wizwebserver.png'"\
									"src='data:image/png;base64, ' />"\
									"</div>"\
								"</body>"\
							"</html>"
*/
#endif
