function borders() {
  var id=0;
  for (var row=1;row<10;row++) {
    for (var col=1;col<10;col++) {
      var el=document.getElementById(id);
      id++;
      if (row==1) {
        el.style.borderTopWidth='.8vmin';
      }
      if (row==4 || row==7) {
        el.style.borderTopWidth='.6vmin';
      }
      if (row==9) {
        el.style.borderBottomWidth='.8vmin';
      }
      if (col==1) {
        el.style.borderLeftWidth='.8vmin';
      }
      if (col==4 || col==7) {
        el.style.borderLeftWidth='.6vmin';
      }
      if (col==9) {
        el.style.borderRightWidth='.8vmin';
      }
    }
  }
}
// rows & columns 1 to 9; ids 0 to 80
// <div class='row'>
// <div id=0 n=7 p=0 r=1 onClick='box_click(this);'></div>
// n=number(1-9) p=player(0/1) r=reveal(0/1)
function boxes() {
  var id=0;
  var s1='<div id=';
  var s2=" n=0 p=0 r=0 onClick='box_click(this);'></div>";
  for (var row=1;row<10;row++) {
    document.write("<div class='row'>");
    for (var col=1;col<10;col++) {
      document.write(s1+id+s2); id++;
    }
    document.write('</div>');
  }
  borders();
}
function box_click(el) {
  var id=el.id;
  var reveal=el.getAttribute('r')=='1';
  if (!reveal) {
    if (g_pencil) {
      var p=g_pencils[id];
      var ind=p.indexOf(g_n);
      if (ind==-1) {
        p+=g_n;
      } else {
        p=p.substr(0,ind)+p.substr(ind+1);
      }
      g_pencils[id]=p;
      pencil(id);
    } else {
      var n=el.getAttribute('n');
      if (n==g_n) {
        el.textContent=n;
        el.setAttribute('r',1);
        highlight(n);
      } else {
        el.style.backgroundColor='red';
      }
    }
  }
}
function clear_highlights() {
  for (var id=0;id<81;id++) {
    var el=document.getElementById(id);
    el.style.backgroundColor='oldlace';
  }
}
function highlight(n) { // 1..9
  clear_highlights();
  for (var id=0;id<81;id++) {
    var el=document.getElementById(id);
    if (el.getAttribute('r')==1) {
      var v=el.getAttribute('n');
      if (v==n) {
        el.style.backgroundColor='palegreen';
      }
    }
  }
}
function images() {
  for (var i=1;i<10;i++) {
    g_img[i]=new Image();
    g_img[i].src='images/'+i+'.png';
  }
}
// eg <pre class='pencil'> 1   3\n 4 5 6\n 7 8 9</pre>
function pencil(id) {
  var s=g_pencils[id]; // eg s='13459'  
  var el=document.getElementById(id);
  var s1="<pre class='pencil'>";
  var s2="</pre>";
  var i=1; var s3=' ';
  for (var r=1;r<4;r++) {
    for (var c=1;c<4;c++) {
      s4=' ';
      var j=i.toString();
      if (s.includes(j)) s4=j;
      i++;
      s3=s3+s4+' ';
    }
    if (r<3) s3+='\n ';
  }
  el.innerHTML=s1+s3+s2;
}
// bn=board# 0...
function populate(bn) {
  var id=0;
  for (var row=1;row<10;row++) {
    var reveals=g_reveals[bn][row-1]; // eg '001001000'
    var solutions=g_solutions[bn][row-1]; // eg 729146359'
    for (var col=1;col<10;col++) {
      var el=document.getElementById(id);
      id++;
      var soln=solutions.substring(col-1,col);
      el.setAttribute('n',soln);
      if (reveals.substring(col-1,col)==1) {
        el.textContent=soln;
        //el.innerHTML="<img src='images/"+soln+'.png>';
        el.setAttribute('r',1);
      }
    }
  }
  for (var id=0;id<81;id++) g_pencils[id]='';
}
function test() {
  boxes(); populate(0);
}

