var heiglight = "";
n = 0
var flag = 0;
var flag2 = 0;

function step1() {
  // document.getElementById("start").setAttribute("style", "border:4px solid #9d6262;");
  // document.getElementById("under_fun").setAttribute("style", "border:4px solid gray;"); ////
  // document.getElementById("under_while").setAttribute("style", "border:0px solid gray;");
  // document.getElementById("under_for").setAttribute("style", "border:0px solid gray;");
}

function step2() {
  // document.getElementById("start").setAttribute("style", "border:4px solid gray");
  // document.getElementById("under_fun").setAttribute("style", "border:4px solid #9d6262;"); ////
  // document.getElementById("under_while").setAttribute("style", "border:0px solid #9d6262;");
  // document.getElementById("under_for").setAttribute("style", "border:0px solid gray;");
}

function step3() {
  // document.getElementById("start").setAttribute("style", "border:4px solid gray");
  // document.getElementById("under_fun").setAttribute("style", "border:4px solid #9d6262;"); ////
  // document.getElementById("under_while").setAttribute("style", "border:0px solid gray;");
  // document.getElementById("under_for").setAttribute("style", "border:0px solid #9d6262;");
}

var p = 2;
var numbers = [];
listbox = [];


function myFunction() {
  if (numbers[1]) { document.location.reload() }
  flag = 1;
  var n = document.getElementById("inp").value; // takes  the input valude
  if (n == 0 || n == null) {
    alert("you entered nothing");
    document.location.reload();
  }

  var b2 = document.getElementById("button2");
  b2.setAttribute("style", "height: 75px; margin-left: 10px");
  b2.setAttribute("onclick", "prime()")
  p = 2
  step1();
  document.getElementById("valp").innerHTML = (2).toString();
  document.getElementById("button2").innerHTML = "Iteration on";
  document.getElementById("ans").innerHTML = 'p*p=4';
  document.getElementById("range").innerHTML = "Nothing";
  var table = document.getElementById("myTable");
  table.innerHTML = ""
  document.getElementById("range").innerHTML = n.toString();
  if (n - Math.floor(n) != 0) {
    alert("Number you entered is not an integer");
    return;
  }
  num = 1;
  for (i = 0; i < 10; i++) {
    var row = table.insertRow();
    for (j = 0; j < 10; j++) {
      var cell1 = row.insertCell();
      var k = j + i * 10
      if (num <= n) {
        cell1.innerHTML = "<span style='display: inline-block;color:blue;style='color:blue;height:20px;'>" + num.toString() + "</span>";
        numbers.push(true);
      }
      else {
        cell1.innerHTML = " &nbsp&nbsp "
      }
      num = num + 1;
    }
  }
  numbers[0] = false;
  document.getElementById("button2").setAttribute("onclick", "prime()")
}

function prime() {
  if (flag == 0) {
    alert("first click on read button");
  }

  var fin = p;
  var n = document.getElementById("inp").value;
  step2();
  if (p * p < n) {
    document.getElementById("ans").innerHTML = "since p*p=" + (p * p).toString() + " is less then " + n.toString() + " Iteration is on <br> we have result";
    document.getElementById("valp").innerHTML = (p + 1).toString();
    document.getElementById("button2").innerHTML = "click again";
  }
  else {
    //
    //document.getElementById('img3') = "images/blankimg.png";
    document.getElementById("button2").setAttribute("style", "font-size:30px;height: 75px;");
    document.getElementById("button2").innerHTML = "&rArr;";
    document.getElementById("process").setAttribute("src", "images/blankimg.png");
    step3();
    answer();
    document.getElementById("ans").innerHTML = "since p*p=" + (fin * fin).toString() + " is not less then " + n.toString() + " Iteration is </br> ended  we have result";
    document.getElementById('button2').onclick = null;
    flag = 2;
  }
  fin = p;
  var table = document.getElementById("myTable");
  table.innerHTML = "";
  for (var j = p * p - 1; j < n; j += p) {
    numbers[j] = false;
  }
  p += 1;
  num = 1;
  for (i = 0; i < 10; i++) {
    var row = table.insertRow();
    for (j = 0; j < 10; j++) {           //10 column        
      var cell1 = row.insertCell();
      var k = j + i * 10
      if (k <= n - 1) {
        if (numbers[num - 1]) {
          cell1.innerHTML = "<span style='display: inline-block;color:blue;font-size: 20px;align-text:center; align-text:top';height:20px;'>" + num.toString() + "</span>";
        }
        else {
          cell1.innerHTML = "<span style='display: inline-block;color:red;font-size: 20px;align-text:top;height:20px;'>X</p>";
        }
      }
      else {
        cell1.innerHTML = " &nbsp&nbsp "
      }
      num = num + 1;
    }
  }
}
var k = 0
function answer() {
  if (k == 0) {
    if (flag == 0) {
      alert("First click read button")
    }

    var n = document.getElementById("inp").value;
    for (var i = 1; i < n; i++) {
      if (numbers[i]) {
        listbox.push(i + 1)
      }
    }
    var br =0;
    document.getElementById('allprime').innerText="";
    str = "";
    for (var i = 0; i < listbox.length; i++) {
      
      br++;
      str += listbox[i];
        if(i===listbox.length-1){
         str+=".";}
        else{
        str+=","}
        if(br ===10) {
        str += "\n";
        br=0;
      }
    }
    document.getElementById('allprime').innerText=str;
    // document.getElementById('allprime').innerText = listbox;
     k=1; 
  }
}