Index: trunk/FACT++/www/index.css
===================================================================
--- trunk/FACT++/www/index.css	(revision 13470)
+++ trunk/FACT++/www/index.css	(revision 13479)
@@ -7,7 +7,7 @@
 	border-width: 1px 1px 2px 1px;
 	text-shadow: 0 1px 0 #37b2eb;
-	-moz-border-radius: 5px 5px 0 0;
-	-webkit-border-top-left-radius: 5px;
-	-webkit-border-top-right-radius: 5px;
+	/*-moz-border-radius: 5px 5px 0 0;*/
+	/*-webkit-border-top-left-radius: 5px;*/
+	/*-webkit-border-top-right-radius: 5px;*/
 	font-size: 13px;
 }
@@ -30,5 +30,4 @@
 
 .tcol1 {
-	border-left: 1px solid #ccc;
 	border-bottom: 1px solid #ccc;
 }
@@ -37,5 +36,13 @@
 	border-right: 1px solid #ccc;
 	border-bottom: 1px solid #ccc;
-        text-align:center;
+        text-align:right;
+        margin-left:5px;
+	margin-right:5px;
+}
+
+.tcol0 {
+	border-left: 1px solid #ccc;
+	border-bottom: 1px solid #ccc;
+        text-align:left;
         margin-left:5px;
 	margin-right:5px;
@@ -84,7 +91,7 @@
 	vertical-align: middle;
 	padding: 6px;
-	-moz-border-radius: 0 0 5px 5px;
-	-webkit-border-bottom-left-radius: 5px;
-	-webkit-border-bottom-right-radius: 5px;
+	/*-moz-border-radius: 0 0 5px 5px;*/
+	/*-webkit-border-bottom-left-radius: 5px;*/
+	/*-webkit-border-bottom-right-radius: 5px;*/
 	text-shadow: 0 -1px 0 #333;
 	font-size: 12px;
Index: trunk/FACT++/www/index.html
===================================================================
--- trunk/FACT++/www/index.html	(revision 13470)
+++ trunk/FACT++/www/index.html	(revision 13479)
@@ -1,4 +1,5 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional"
-       "http://www.w3.org/TR/html4/loose.dtd">
+<!--<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional"
+       "http://www.w3.org/TR/html4/loose.dtd">-->
+<!DOCTYPE HTML>
 <html>
 
@@ -7,116 +8,56 @@
   <script type="text/javascript" src="index.js"></script>
   <link rel="stylesheet" type="text/css" href="index.css" />
+  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
 </head>
 
-<body id="body" onload="onload(true)" onresize="onresize(false)">
-<!--<font size="+2">-->
-<table id="table" border="0" cellspacing="0" cellpadding="6" class="tborder" width="100%">
+<body id="body" onload="onload();" onresize="onresize();" data-visible='0'>
 
-<!-------------------------------------------------->
-<!------------------    Header   ------------------->
-<!-------------------------------------------------->
-<thead>
-  <tr>
-    <td class="thead" colspan="2" width="100%">
-    <table width="100%"><tr>
-        <td class="tcell1"><font size="+2">&raquo;&nbsp;<a href="forumdisplay.php?fid=1">FACT</a>&nbsp;&laquo;</font></td>
-        <td class="tcell2"><font size="-2"><div id="time">Wed, 25 Apr 2012 10:45:23 GMT</div></font></td>
-      </tr></table>
-    </td>
-  </tr>
-</thead>
+<table id="table0" border="0" cellspacing="0" cellpadding="6" class="tborder" width="100%" style="overflow:hidden;position:fixed;top:0;left:0;display:none;" >
+  <thead>
+    <tr>
+      <td class="thead" colspan="3" width="100%">
+      <table width="100%"><tr>
+          <td class="tcell1"><font size="+2">&raquo;&nbsp;<a href="forumdisplay.php?fid=1" id="title0">FACT</a>&nbsp;&laquo;</font></td>
+          <td class="tcell2"><font size="-2" id="reporttime0">Wed, 25 Apr 2012 10:45:23 GMT</font></td>
+        </tr></table>
+      </td>
+    </tr>
+  </thead>
+  <tbody></tbody>
+  <tfoot>
+    <tr>
+      <td class="tfoot" width="100%" colspan="3">
+       <table width="100%"><tr>
+          <td class="tcell1"><font size="+2"><A HREF="/logbook">logbook</A></font></td>
+          <td class="tcell2"><font size="-2" id="localtime0">booting...</font></td>
+        </tr></table>
+      </td>
+    </tr>
+  </tfoot>
+</table>
 
-<!-------------------------------------------------->
-<!------------------    Body     ------------------->
-<!-------------------------------------------------->
-<tbody>
-  
-  <!------------------- System status ---------------------->
-  <tr class="row" id="system_row">
-    <td class="tcol1" width="100%" onclick="location.href='forumdisplay.php?fid=2';">
+<table id="table1" border="0" cellspacing="0" cellpadding="6" class="tborder" width="100%" style="overflow:hidden;position:fixed;top:0;left:0;display:none;" >
+  <thead>
+    <tr>
+      <td class="thead" colspan="3" width="100%">
       <table width="100%"><tr>
-        <td class="tcell1" id="system_title">System status</td>
-        <td class="tcell2" id="system">---</td>
-      </tr></table>
-    </td>
-    <td class="tcol2">&gt;</td>
-  </tr>
-
-  <!-------------------- Drive ---------------------------->
-  <tr class="row" id="drive_row">
-    <td class="tcol1" width="100%" onclick="location.href='forumdisplay.php?fid=2';">
-      <table width="100%"><tr>
-        <td class="tcell1" id="drive_title">Drive</td>
-        <td class="tcell2" id="drive">---</td>
-      </tr></table>
-    </td>
-    <td class="tcol2">&gt;</td>
-  </tr>
-
-  <!-------------------- Temperature -------------------->
-  <tr class="row" id="temp_row">
-    <td class="tcol1" width="100%" onclick="location.href='forumdisplay.php?fid=2';">
-     <table width="100%"><tr>
-        <td class="tcell1" id="temp_title">Temp [dew]</td>
-        <td class="tcell2" id="temp">---</td>
-      </tr></table>
-    </td>
-    <td class="tcol2">&gt;</td>
-  </tr>
-
-  <!----------------------- Wind -------------------------->
-  <tr class="row" id="aux_row">
-    <td class="tcol1" width="100%" onclick="location.href='forumdisplay.php?fid=2';">
-     <table width="100%"><tr>
-        <td class="tcell1" id="aux_title">Wind</td>
-        <td class="tcell2" id="aux">---</td>
-      </tr></table>
-    </td>
-    <td class="tcol2">&gt;</td>
-  </tr>
-
-  <!-------------------- Bias ------------------------>
-  <tr class="row" id="bias_row">
-    <td class="tcol1" width="100%" onclick="location.href='forumdisplay.php?fid=2';">
-     <table width="100%"><tr>
-        <td class="tcell1" id="bias_title">Bias</td>
-        <td class="tcell2" id="bias">---</td>
-      </tr></table>
-    </td>
-    <td class="tcol2">&gt;</td>
-  </tr>
-
-  <!-------------------- Picture ------------------------>
-  <tr class="row" style="margin:0;padding:0;"> 
-     <td class="container" id="container" onclick="save()" colspan="2">
-        <canvas id="canvas" width="1" height="1"/>
-     </td>
-  </tr>
-</tbody>
-
-<!-------------------------------------------------->
-<!------------------   Footer    ------------------->
-<!-------------------------------------------------->
-<tfoot>
-  <tr>
-    <td class="tfoot" width="100%" colspan="2">
-     <table width="100%"><tr>
-        <td class="tcell1"><font size="+2"><A HREF="/logbook">logbook</A></font></td>
-        <td class="tcell2"><font size="-2"><div id="localtime">booting...</div></font></td>
-      </tr></table>
-    </td>
-  </tr>
-</tfoot>
-
+          <td class="tcell1"><font size="+2">&raquo;&nbsp;<a href="forumdisplay.php?fid=1" id="title1">FACT</a>&nbsp;&laquo;</font></td>
+          <td class="tcell2"><font size="-2" id="reporttime1">Wed, 25 Apr 2012 10:45:23 GMT</font></td>
+        </tr></table>
+      </td>
+    </tr>
+  </thead>
+  <tbody></tbody>
+  <tfoot>
+    <tr>
+      <td class="tfoot" width="100%" colspan="3">
+       <table width="100%"><tr>
+          <td class="tcell1"><font size="+2"><A HREF="/logbook">logbook</A></font></td>
+          <td class="tcell2"><font size="-2" id="localtime1">booting...</font></td>
+        </tr></table>
+      </td>
+    </tr>
+  </tfoot>
 </table>
-<!--</font>-->
-
-<!-------------------- Debug ------------------------>
-<div id="debug"/>
-
-      <!--
-        <strong><a href="forumdisplay.php?fid=2" class="forum_on">Logbook</a></strong>
-        <div class="lastbytext">1,210 Posts. Last post:  17.04.2012</div>
-        -->
 
 </body>
Index: trunk/FACT++/www/index.js
===================================================================
--- trunk/FACT++/www/index.js	(revision 13470)
+++ trunk/FACT++/www/index.js	(revision 13479)
@@ -22,8 +22,5 @@
 function onload()
 {
-    loadPage("fact");
-
-    refresh_text();
-    refresh_graphics();
+    loadPage("fact", 0);
 }
 
@@ -54,10 +51,11 @@
                 }
 
+                buildPage(name, xmlHttp.responseText, (z+1)%2);
+                changePage(z);
+
                 //changePage(name, xmlHttp.resposeText);
-
                 //slideOut(name, xmlHttp.responseText);
-
-                displayPage(name, xmlHttp.responseText, 1);
-                onresize(true);
+                //displayPage(name, xmlHttp.responseText);
+                //onresize(true);
             }
         };
@@ -67,12 +65,15 @@
 
 
-function displayPage(name, text, z)
-{
-    var table = $("tbody"+z);
-
+function buildPage(name, text, z)
+{
+    var table = $("table"+z);
     table.setAttribute("data-file", "");
 
-    while (table.hasChildNodes())
-        table.removeChild(table.lastChild);
+    var p = table.tBodies.length==3 ? 1 : 0;
+
+    var tbody = $("table"+z).tBodies[p];
+
+    while (tbody.hasChildNodes())
+        tbody.removeChild(tbody.lastChild);
 
     var lines = text.split('\n');
@@ -80,7 +81,19 @@
     if (lines.length>0)
     {
+        /*
         var newe = document.createElement("span");
         newe.innerHTML = lines[0];
-        $("title").replaceChild(newe, $("title").lastChild);
+        var title = $("table"+z).tHead.rows[0].cells[0].childNodes[0].childNodes[1];
+        title.replaceChild(newe, title.lastChild);
+        */
+
+        //var x = title.lastChild;
+        //title.removeChild(title.lastChild);
+        //title.appendChild(newe);
+
+        var newe = document.createElement("span");
+        newe.innerHTML = lines[0];
+        var title = $("title"+z);//.innerHtml = lines[0];
+        title.replaceChild(newe, title.lastChild);
     }
 
@@ -96,5 +109,5 @@
         if (cols.length != 3 && cols.length !=4)
         {
-            alert("Size mismatch #"+i+": "+lines[i]);
+            alert("Size mismatch #"+i+": '"+lines[i]+"' N(cols)="+cols.length);
             continue;
         }
@@ -114,11 +127,18 @@
 
             var canv = document.createElement("canvas");
-            canv.setAttribute("id",     "canvas");
+            canv.setAttribute("id",     "canvas"+z);
             canv.setAttribute("width",  "1");
             canv.setAttribute("height", "1");
             canv.setAttribute("data-file", cols[1].substring(7));
+            canv.setAttribute("style", "display:none;");
             td.appendChild(canv);
 
-            table.appendChild(tr);
+            var img = document.createElement("img");
+            img.setAttribute("id",     "image"+z);
+            img.setAttribute("width",  "1");
+            img.setAttribute("height", "1");
+            td.appendChild(img);
+
+            tbody.appendChild(tr);
             continue;
         }
@@ -126,4 +146,8 @@
         var tr = document.createElement("tr");
         tr.setAttribute("class", "row");
+        if (valid(cols[0]))
+            tr.setAttribute("onclick", "this.style.background='#ccb'; loadPage('"+cols[0]+"',"+z+");");
+        if (valid(cols[3]))
+            tr.setAttribute("onclick", "this.style.background='#ccb'; loadPage('"+cols[3]+"',"+z+");");
         //tr.setAttribute("id",    cols[0]+"_row");
 
@@ -137,8 +161,4 @@
         td1.setAttribute("class", "tcol1");
         td1.setAttribute("width", "100%");
-        if (valid(cols[0]))
-            td1.setAttribute("onclick", "loadPage('"+cols[0]+"');");
-        if (valid(cols[3]))
-            td1.setAttribute("onclick", "loadPage('"+cols[3]+"');");
         tr.appendChild(td1);
 
@@ -170,5 +190,5 @@
         innertr.appendChild(cell2);
 
-        table.appendChild(tr);
+        tbody.appendChild(tr);
 
         counter++;
@@ -201,86 +221,97 @@
     tr.appendChild(td);
 
-    table.appendChild(tr);
+    tbody.appendChild(tr);
 
     table.setAttribute("data-file", name);
 }
 
-function onresize(load)
-{
+function onresize()
+{
+    var z = $("body").getAttribute("data-visible");
+
+    var img  = $("image"+z);
+    var canv = $("canvas"+z);
+    if (img == undefined || canv == undefined)
+        return;
+
     var W = window.innerWidth;
     var H = window.innerHeight;
 
-    var canv = $("canvas");
-
-    if (canv != undefined)
-    {
-        canv.width  = 1;
-        canv.height = 1;
-    }
-
-    var tw = $('table').offsetWidth;
-    var th = $('table').offsetHeight;
-
-    var tx = $('table').offsetLeft;
-    var ty = $('table').offsetTop;
-
-    //var margin = (W-tw)*2;
-
-    var cw =     tw - 2*tx;
-    var ch = H - th - 2*ty;
-
-    if (canv != undefined)
-    {
-        canv.width  = cw;
-        canv.height = ch-ty;
-    }
+    img.width  = 1;
+    img.height = 1;
+
+    img.width   = W;
+    img.height += H - $("table"+z).offsetHeight;
+
+    canv.width  = img.width;
+    canv.height = img.height;
 
     // ------ debug -----
     $('debug').innerHTML = "";
-    $('debug').innerHTML += "|x="+tx+"/"+ty;
     $('debug').innerHTML += "|W="+W +"/"+H;
-    $('debug').innerHTML += "|T="+tw+"/"+th;
-    $('debug').innerHTML += "|C="+cw+"/"+ch;
-}
-
-var intervalSlideOut = null;
-
-function changePage(newpage)
-{
-    var z = $("body").dataset.visible;
-    $('table').style.position="fixed";
-    intervalSlideOut = setInterval("doSlideOut('"+newpage+"')", 100);
-}
-
-function doSlideOut(newpage)
-{
+}
+
+var intervalSlide = null;
+
+function changePage(z)
+{
+    // No page displayed yet
+    if ($("table0").style.display=="none" && $("table1").style.display=="none")
+    {
+        $("table1").style.display="";
+        $("body").setAttribute("data-visible", "1");
+
+        onresize();
+
+        refresh_text();
+        refresh_graphics();
+        return;
+    }
+
+    intervalSlide = setInterval("doSlideOut("+z+")", 25);
+}
+
+function doSlideOut(z)
+{
+    var table = $("table"+z);
+
     var W = window.innerWidth;
-    var x = $('table').offsetLeft;
+    var x = table.offsetLeft;
 
     var ix = parseInt(x);
     if (ix>W)
     {
-        clearInterval(intervalSlideOut);
-        slideIn();
+        clearInterval(intervalSlide);
+
+        table.style.display="none";
+
+        z = (z+1)%2;
+        table = $("table"+z);
+
+        table.style.display="";
+        table.style.left = window.innerWidth+"px";
+
+        $("body").setAttribute("data-visible", z);
+        onresize();
+
+        intervalSlide = setInterval("doSlideIn("+z+")", 25);
         return;
     }
 
     ix += W/10;
-
-    $('table').style.left=ix+"px";
-
-//    timeoutSlideOut = setTimeout("slideOut()", 100);
-}
-
-function slideIn()
-{
+    table.style.left=ix+"px";
+}
+
+function doSlideIn(z)
+{
+    var table = $("table"+z);
+
     var W = window.innerWidth;
-    var x = $('table').offsetLeft;
+    var x = table.offsetLeft;
 
     var ix = parseInt(x);
     if (ix==0)
     {
-        $('table').style.position="";
-        // restart refersh!
+        clearInterval(intervalSlide);
         return;
     }
@@ -290,19 +321,15 @@
         ix = 0;
 
-    $('table').style.left=ix+"px";
-
-    setTimeout("slideIn()", 100);
+    table.style.left=ix+"px";
 }
 
 function refresh_text()
 {
-    // Is sliding?
-    if ($('table').style.position=="fixed")
-        return;
-
-    var z=$("body").dataset.visible;
-
-    var fname = $("tbody"+z).dataset.file;
-    if (!valid(fname))
+    var z=$("body").getAttribute("data-visible");
+    var table = $("table"+z);
+
+    // Is sliding or no file defined?
+    var fname = table.getAttribute("data-file");
+    if (table.offsetLeft>0 || !valid(fname))
     {
         setTimeout("refresh_text()", 1000);
@@ -330,10 +357,8 @@
                     alert("ERROR[1] - HTTP request '"+fname+".txt': "+this.statusText+" ["+this.status+"]");
                     setTimeout("refresh_text()", 10000);
-                    /****** invalidate ******/
                     return;
                 }
 
-                //alert("ok");
-                process_status(fname, this.responseText);
+                update_text(fname, this.responseText);
                 setTimeout("refresh_text()", 3000);
             }
@@ -343,7 +368,6 @@
 }
 
-function strike(id, status)
-{
-    var e = $(id);
+function strike(e, status)
+{
     if (!e)
         return;
@@ -376,8 +400,10 @@
 var date0 = null;
 
-function process_status(fname, result)
-{
-    var z=$("body").dataset.visible;
-    if ($("tbody"+z).dataset.file != fname)
+function update_text(fname, result)
+{
+    var z=$("body").getAttribute("data-visible");
+    var table = $("table"+z);
+
+    if (table.getAttribute("data-file") != fname)
         return;
 
@@ -385,4 +411,8 @@
 
     // ----------------------------------------------------
+
+    var  time = $("reporttime"+z);
+    var ltime = $("localtime"+z);
+
     var date1 = new Date();
 
@@ -390,5 +420,5 @@
     {
         if (date0 != null)
-        strike("time", date0.getTime()+60000>date1.getTime());
+            strike(time, date0.getTime()+60000>date1.getTime());
         // FIXME: Reset display to "---" values -- no connection
         return;
@@ -398,17 +428,29 @@
     date2.setTime(tokens[0]);
 
-    strike("time", date2.getTime()+60000>date1.getTime());
+    strike(time, date2.getTime()+60000>date1.getTime());
 
     date0 = date2;
 
+    time.innerHTML =
+        "&middot;&nbsp;"+date0.toUTCString()+"&nbsp;&middot;";//getUTCFullYear()+"/"+date0.getUTCMonth()+"/"+date0.getUTCDate()+" "+date0.getUTCHours()+":"+date0.getUTCMinutes()+":"+date0.getUTCSeconds()+"."+date0.getUTCMilliseconds();
+    ltime.innerHTML =
+        "&middot;&nbsp;"+date1.toLocaleString()+"&nbsp;&middot;";//ISOlocalDateStr();//ltoString();
+
     // ----------------------------------------------------
 
+    var p = table.tBodies.length==3 ? 1 : 0;
+    var tbody = table.tBodies[p];
+
     for (var line=1; line<tokens.length; line++)
     {
-        var e = $("data"+line);
+        var c = tbody.rows[line-1].cells[1];
+        if (c == undefined)
+            continue;
+
+        var e = c.childNodes[0].rows[0].cells[1];
         if (e == undefined)
             continue;
 
-        var form = e.dataset.form;
+        var form = e.getAttribute("data-form");
         if (form==undefined)
             continue;
@@ -424,10 +466,4 @@
         e.parentNode.parentNode.parentNode.parentNode.style.background=cols[0];
     }
-
-    $("time").innerHTML =
-        "&middot;&nbsp;"+date0.toUTCString()+"&nbsp;&middot;";//getUTCFullYear()+"/"+date0.getUTCMonth()+"/"+date0.getUTCDate()+" "+date0.getUTCHours()+":"+date0.getUTCMinutes()+":"+date0.getUTCSeconds()+"."+date0.getUTCMilliseconds();
-
-    $("localtime").innerHTML =
-        "&middot;&nbsp;"+date1.toLocaleString()+"&nbsp;&middot;";//ISOlocalDateStr();//ltoString();
 }
 
@@ -438,12 +474,11 @@
 function refresh_graphics()
 {
-    // Is sliding?
-    if ($('table').style.position=="fixed")
-        return;
-
-    var canvas = $("canvas");
-
-    var fname = canvas==null ? "" : $("canvas").dataset.file;
-    if (!valid(fname))
+    var z = $("body").getAttribute("data-visible");
+
+    var canvas = $("canvas"+z);
+
+    // Is sliding or no data file defined?
+    var fname = canvas==null ? "" : canvas.getAttribute("data-file");
+    if ($("table"+z).offsetLeft>0|| !valid(fname))
     {
         setTimeout("refresh_graphics()", 1000);
@@ -456,14 +491,6 @@
     catch(e)
     {
-        try { xmlHttp  = new ActiveXObject("Microsoft.XMLHTTP"); }
-        catch(e)
-        {
-            try { xmlHttp  = new ActiveXObject("Msxml2.XMLHTTP"); }
-            catch(e)
-            {
-                alert("Your browser doesn't support dynamic reload.");
-                return;
-            }
-        }
+        alert("Your browser doesn't support dynamic reload.");
+        return;
     }
 
@@ -548,5 +575,6 @@
 function drawPix(x, y, col)
 {
-    var canv = $("canvas");
+    var z = $("body").getAttribute("data-visible");
+    var canv = $("canvas"+z);
 
     var cw = canv.width;
@@ -570,5 +598,6 @@
         return;
 
-    var canv = $("canvas");
+    var z = $("body").getAttribute("data-visible");
+    var canv = $("canvas"+z);
     if (canv == undefined)
         return;
@@ -675,6 +704,9 @@
     ctx.strokeText("2.0V", cw-5, 5);
 
-}
-
+    var img = $("image"+z);
+    img.src = canv.toDataURL("image/png");
+
+}
+/*
 function save()
 {
@@ -686,2 +718,3 @@
     document.location.href = img;
 }
+*/
