function clear_marks() {
  set_cookie("sudokulist_ids", "");
  $(".layout").removeClass("marked");
}
function toggle_mark(layout) {
  $(layout).toggleClass("marked");
}
function toggle_mark_and_remember(layout) {
  var ids = get_cookie("sudokulist_ids");
  if (!ids)
    ids = "";
  var id = layout.id.substring("layout".length); //layout{{#id}}
  var pos = ("," + ids + ",").indexOf("," + id + ",");
  if (pos == -1) {
    ids += "," + id;
  } else {
    ids = ids.substring(0, pos) + ids.substring(pos + ("," + id).length);
  }
  set_cookie("sudokulist_ids", ids);
  toggle_mark(layout);
}

function render_layouts() {
  var ids = get_cookie("sudokulist_ids");
  $(".layout").each(function() {
    this.oncontextmenu = function() { return false; };
    $(this).mousedown(function(eve) { if (eve.button & 2) toggle_mark_and_remember(this); });
    //toggle mark for list/add/ page
    var id = this.id.substring("layout".length); //layout{{#id}}
    var pos = ("," + ids + ",").indexOf("," + id + ",");
    if (pos != -1)
      toggle_mark(this);
    var jqobj = $(this);
    var layout = jqobj.attr("tag");
    var i = 0;
    var values = [];
    for (i=0; i<81; i++)
      values.push(parseInt(layout.charAt(i),10));
    var html_str = '';
    var big_class = "odd";
    var top = 0;
    var left = 0;
    var shift=[];
    //create 9 block cells
    for (i=0; i<9; i++) {
      html_str = '<div class="block ' + big_class + '"';
      shift = [0, 1, 2];
      top = Math.floor(i / 3);
      top = top * 33 + shift[top];
      left = (i % 3);
      left = left * 33 + shift[left];
      html_str += ' style="top:' + top + 'px; left:' + left + 'px;" ';
      html_str += ' ></div>';
      jqobj.append(html_str);
      if (big_class == "odd") big_class = "even";
      else big_class = "odd";
    }
    //create 81 cells
    for (i=0; i<values.length; i++) {
      html_str = '<div class="cell cell' + values[i];
      var locked = (values[i] !== 0);
      if (!locked)
        html_str += ' cell-unlocked ';
      else
        html_str += ' cell-locked ';
      html_str += '"';
      shift = [0, 1, 2, 4, 5, 6, 8, 9, 10];
      top = Math.floor(i / 9);
      top = top * 10 + shift[top];
      left = (i % 9);
      left = left * 10 + shift[left];
      html_str += ' style="top:' + top + 'px; left:' + left + 'px;" > </div>';
      jqobj.append(html_str);
      var obj = document.getElementById("cell" + i);
    }
  });
}