// restore all square backgrounds so red is gone (if there)
function bg_restore(id) {
  var el=document.getElementById(id);
  el.style.backgroundColor=g_bg;
}
// add the heavier box borders - tricky stuff!
function borders() {
  var id=0; var v1='.5'; var v2='.35';
  for (var row=0;row<9;row++) {
    for (var col=0;col<9;col++) {
      var el=document.getElementById(id);
      id++;
      if (row==0) {
        el.style.borderTopWidth=v1+'vmin';
        el.style.borderTopColor='brown';
      }
      if (row==3 || row==6) {
        el.style.borderTopWidth=v2+'vmin';
        el.style.borderTopColor='brown';
      }
      if (row==8) {
        el.style.borderBottomWidth=v1+'vmin';
        el.style.borderBottomColor='brown';
      }
      if (col==0) {
        el.style.borderLeftWidth=v1+'vmin';
        el.style.borderLeftColor='brown';
      }
      if (col==3 || col==6) {
        el.style.borderLeftWidth=v2+'vmin';
        el.style.borderLeftColor='brown';
      }
      if (col==8) {
        el.style.borderRightWidth=v1+'vmin';
        el.style.borderRightColor='brown';
      }
    }
  }
}
// work out the box # (0..8) for given id (0..80)
// tricky also!
function box(id) {
  var r=row(id); var c=col(id);
  var b=0; var bx=-1;
  for (var rr=0;rr<9;rr+=3) {
    for (var cc=0;cc<9;cc+=3) {
      for (var i=0;i<3;i++) {
        for (var j=0;j<3;j++) {
          if ((rr+i)==r && (cc+j)==c) {
            bx=b;
          }
        }
      }
      b++;
    }
  }
  return bx;
}
// draw the buttons (very easy ... diabolical)
function buttons() {
  for (var i=0;i<g_buttons.length;i++) {
    var s1="<div onClick='button_click(this);'>";
    var s2="</div>";
    document.write(s1+g_buttons[i]+s2);
  }
}
function button_click(el) {
  show_pencils();
  var txt=el.textContent;
  g_level=g_buttons.indexOf(txt);
  reset(); deal(); display();
  var el=document.getElementById('level');
  el.textContent=txt;
}
// if finished, show smiley for perfect run only
function check_finish() {
  var done=true;
  for (var i=1;i<10;i++) {
    if (g_counts[i]>0) done=false;
  }
  if (done || false) { ////
    undim();
    message(-1);
    var el=document.getElementById('pencils');
    el.style.display='none';
    var el=document.getElementById('buttons');
    el.style.display='flex';
    var el=document.getElementById('gift');
    el.style.display='none';
    var el=document.getElementById('replay');
    el.style.display='block';
    if (g_gifts==0 && g_mistakes==0) {
      var el=document.getElementById('smiley');
      el.style.display='grid';
      setTimeout(smiley_off,2000);
    }
  }
  return done;
}
function clear_highlights() {
  for (var id=0;id<81;id++) {
    var el=document.getElementById(id);
    el.classList.remove('highlight');
  }
  g_square=-1;
}
// return column # (0..8) for given id
function col(id) {
  return id%9;
}
function deal() {
  // benjamin 0,flash 1,easy 2,medium 3,hard 4,diabolical 5
  g_which=Random0(g_solutions[g_level].length-1);
  //g_level=2; g_which=2; ////
  g_solution=g_solutions[g_level][g_which];
  g_reveal=g_reveals[g_level][g_which];
  rearrange();////
}
function dim(n) {
  undim();
  for (var id=0;id<81;id++) {
    var el=document.getElementById(id);
    var reveal=el.getAttribute('r')=='1';
    if (reveal) {
      var v=el.getAttribute('n');
      if (v!=n) {
        var childs=el.childNodes;
        childs[0].style.opacity=.3;
      }
    }
  }
}
function display() {
  var id=0;
  for (var row=0;row<9;row++) {
    for (var col=0;col<9;col++) {
      var el=document.getElementById(id);
      id++;
      var soln=g_solution[row].substring(col,col+1);
      el.setAttribute('n',soln);
      if (g_reveal[row].substring(col,col+1)==1 || false) { ////
        //el.textContent=soln;
        el.innerHTML="<img src='images/"+soln+".png'>";
        el.setAttribute('r',1);
        g_counts[soln]--;
      } else {
        el.innerHTML='';
      }
    }
  }
  message(1);
}
function gift_click() {
  message(1);
  if (g_square!=-1) {
    var id=g_square; // the chosen square
    var el=document.getElementById(g_square);
    var n=el.getAttribute('n');
    g_pencils[g_square]='';
    el.innerHTML="<img src='images/"+n+".png'>";
    //el.textContent=n;
    el.setAttribute('r',1);
    pencil_clear(id,n);
    clear_highlights();
    g_counts[n]--; g_gifts++;
    if (g_counts[n]==0) {
      var el=document.getElementById('t'+n);
      el.style.visibility='hidden';
    }
  }
}
// highlight = dashed red border on empty box
function highlight(el) { // 0..80
  clear_highlights();
  el.classList.add('highlight');
}
function info_click() {
  var el_info=document.getElementById('info');
  var el_message=document.getElementById('message');
  var opacity=1; var visibility='visible';
  if (g_info) {opacity=.4; visibility='hidden';}
  el_message.style.visibility=visibility;
  el_info.style.opacity=opacity;
  g_info=!g_info;
}
function message(n,v) {
  var el=document.getElementById('message');
  if (n==-1) {
    el.innerHTML='Gifts: '+g_gifts+'&nbsp; &nbsp;Mistakes: '+g_mistakes;
  } else if (n==3) {
    var s1="Click on&nbsp;<span id='level_button'>";
    var s2="</span>&nbsp;to restart this board";
    el.innerHTML=s1+g_buttons[g_level]+s2;
  } else {
    el.textContent=g_messages[n];
  }
}
function number_shuffle() {
  var a=['a','b','c','d','e','f','g','h','i'];
  var arr=g_solution;
  for (var r=0;r<9;r++) {
    var cols=arr[r]; // eg '729146358'
    for (var i=1;i<10;i++) {
      cols=cols.replace(i,a[i-1]);
    }
    arr[r]=cols; // 
  }
  Shuffle(a);
  for (var r=0;r<9;r++) {
    var cols=arr[r]; // eg 'gbiadfceh'
    for (var i=1;i<10;i++) {
      cols=cols.replace(a[i-1],i);
    }
    arr[r]=cols; // eg 'gbiadfceh'
  }
}

// display g_pencils[id] using innerHTML
// 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;
}
function pencils() {
  for (var i=1;i<10;i++) {
    var s1="<div onClick='pencil_click(this);' v=";
    var s2=">";
    var s3="</div>"
    document.write(s1+i+s2+i+s3);
  }
}
// n has just been entered in id
// remove all pencilled n's from the same row, col & box
function pencil_clear(id,n) {
  var r=row(id); var c=col(id); var b=box(id);
  for (var i=0;i<81;i++) {
    if (g_pencils[i]!='') {
      var rr=row(i); var cc=col(i); var bx=box(i);
      if (rr==r || cc==c || bx==b) {
        pencil_del(i,n);
        bg_restore(i);
      }
    }
  }
}
function pencil_click(el) {
  if (g_square==-1) {
    message(1);
  } else {
    var v=el.getAttribute('v');
    var id=g_square; // the chosen square
    bg_restore(id);
    var p=g_pencils[id];
    var ind=p.indexOf(v);
    if (ind==-1) {
      p+=v;
    } else {
      p=p.substr(0,ind)+p.substr(ind+1);
    }
    g_pencils[id]=p;
    pencil(id);
  }
}
// remove n from g_pencils[id] if there
// and redisplay
function pencil_del(id,n) {
  var p=g_pencils[id];
  var ind=p.indexOf(n);
  if (ind!=-1) {
    p=p.substr(0,ind)+p.substr(ind+1);
  }
  g_pencils[id]=p;
  pencil(id);
}
function rearrange(){
  if (Random(2)==1) swap_cols();
  if (Random(2)==1) swap_rows();
  if (Random(2)==1) swap_big_cols();
  if (Random(2)==1) swap_big_rows();
  number_shuffle();
}
function replay() {
  reset(); display();
  show_pencils();
}
function reset() {
  for (var i=1;i<10;i++) {
    g_counts[i]=9;
    var el=document.getElementById('t'+i);
    el.style.visibility='visible';
  }
  for (var id=0;id<81;id++) {
    g_pencils[id]=''; bg_restore(id);
    var el=document.getElementById(id);
    el.setAttribute('r',0);
  }
  g_square=-1; // 0..80 - the one clicked
  g_info=true;
  g_mistakes=0; g_gifts=0;
  clear_highlights();
  var el=document.getElementById('gift');
  el.style.display='block';
  var el=document.getElementById('replay');
  el.style.display='none';
}
// return row # (0..8) for given id
function row(id) {
  return parseInt(id/9);
}
function show_pencils() {
  var el=document.getElementById('pencils');
  el.style.display='flex';
  var el=document.getElementById('buttons');
  el.style.display='none';
}
function smiley_off() {
  var el=document.getElementById('smiley');
  el.style.display='none';    
}
// rows & columns 0 to 8; ids 0 to 80
// n=number(1-9) r=reveal(0/1)
function squares() {
  document.write("<div id='board'>");
  var id=0;
  var s1='<div id=';
  var s2=" n=0 r=0 onClick='square_click(this);'></div>";
  for (var row=0;row<9;row++) {
    document.write("<div class='row'>");
    for (var col=0;col<9;col++) {
      document.write(s1+id+s2); id++;
    }
    document.write('</div>');
  }
  document.write("</div>");
  borders();
  document.write("<img src='images/smiley.png' id='smiley'>");
}
function square_click(el) {
  for (var i=0;i<81;i++) bg_restore(i);
  var id=el.id;
  var reveal=el.getAttribute('r')=='1';
  if (reveal) {
    clear_highlights();
    var v=el.getAttribute('n');
    dim(v); // dim all but this value
    message(1);
  } else {
    if (id==g_square) {
      clear_highlights();
      message(1);
    } else {
      undim();
      highlight(el); g_square=id;
      message(2);
    }
  }
}
function swap_2big_cols(bc1,bc2) {
  var c1=bc1*3; var c2=bc2*3;
  for (var i=0;i<3;i++) {
    swap_2cols(c1+i,c2+i);
  }
}
function swap_big_cols() {
  var arr=[0,1,2];
  Shuffle(arr);
  swap_2big_cols(arr[0],arr[1]);
  swap_2big_cols(arr[1],arr[2]);
}  
function swap_2big_rows(br1,br2) {
  var r1=br1*3; var r2=br2*3;
  for (var i=0;i<3;i++) {
    swap_2rows(r1+i,r2+i);
  }
}
function swap_big_rows() {
  var arr=[0,1,2];
  Shuffle(arr);
  swap_2big_rows(arr[0],arr[1]);
  swap_2big_rows(arr[1],arr[2]);
}  
function swap_2cols(c1,c2) {
  if (c1>c2) {var t=c1; c1=c2; c2=t;}
  for (var r=0;r<9;r++) {
    var cols=g_solution[r];
    var s1=cols.substr(c1,1);
    var s2=cols.substr(c2,1);
    var lft=cols.substr(0,c1);
    var mid=cols.substr(c1+1,c2-c1-1);
    var rt=cols.substr(c2+1,8-c2);
   g_solution[r]=lft+s2+mid+s1+rt;
  }
  for (var r=0;r<9;r++) {
    var cols=g_reveal[r];
    var s1=cols.substr(c1,1);
    var s2=cols.substr(c2,1);
    var lft=cols.substr(0,c1);
    var mid=cols.substr(c1+1,c2-c1-1);
    var rt=cols.substr(c2+1,8-c2);
    g_reveal[r]=lft+s2+mid+s1+rt;
  }
}
function swap_cols() {
  var arr=[0,1,2];
  for (var c0=0;c0<8;c0+=3) {
    Shuffle(arr);
    swap_2cols(c0+arr[0],c0+arr[1]);
    swap_2cols(c0+arr[1],c0+arr[2]);
  }
}
function swap_2rows(r1,r2) {
  var arr1=g_solution;
  var arr2=g_reveal;
  var t=arr1[r1]; arr1[r1]=arr1[r2]; arr1[r2]=t;
  var t=arr2[r1]; arr2[r1]=arr2[r2]; arr2[r2]=t;
}
function swap_rows() {
  var arr=[0,1,2];
  for (var r0=0;r0<8;r0+=3) {
    Shuffle(arr);
    swap_2rows(r0+arr[0],r0+arr[1]);
    swap_2rows(r0+arr[1],r0+arr[2]);
  }
}
function tiles() {
  for (var i=1;i<10;i++) {
    document.write("<img src='images/"+i+".png' id=t"+i+" v="+i+" onClick='tile_click(this);'>");
  }
}
function tile_click(el) {
  if (g_square==-1) {
    message(1);
  } else {
    var v=el.getAttribute('v');
    var id=g_square; // the chosen square
    var el=document.getElementById(g_square);
    var n=el.getAttribute('n');
    if (n==v) {
      message(1);
      g_pencils[g_square]='';
      pencil_clear(id,n);
      bg_restore(id);
      el.innerHTML="<img src='images/"+n+".png'>";
      //el.textContent=n;
      el.setAttribute('r',1);
      dim(n);
      clear_highlights();
      g_counts[n]--;
      if (g_counts[n]==0) {
        var el=document.getElementById('t'+n);
        el.style.visibility='hidden';
        check_finish();
      }
    } else {
      message(3,v);
      el.style.backgroundColor='red';
      g_mistakes++;
    }
  }
}
function undim() {
  for (var id=0;id<81;id++) {
    var el=document.getElementById(id);
    var reveal=el.getAttribute('r')=='1';
    if (reveal) {
      var childs=el.childNodes;
      childs[0].style.opacity=1;
    }
  }
}  
