/*
 * Have one JSON field in the enclosing form that gets updated.
 * An observer submits the form when that field changes
 */
var CheckBoxFilter = function(options) {
  var contElem     = $('#' + options['contElem']);
  var attrib       = options['attrib'];
  var question     = options['question'];
  var tip          = options['tip'] || ("You must add at least one " + attrib + ".");
  var group        = options.group || "container";
  var list         = options['list'];
  var selectedList = _.map(options['selectedList'], function(e) { return e.toString(); });
  var form         = $('#' + options['form']);
  var initOpen     = options['initOpen'] || false;

  if (typeof list[0] == "string") {
    list = _.map(list, function(e) { return [e, e]; });
  }
  if (options.extra) { var extra = _.bind(options['extra'], this); }

  this.toHTML = function() {
    if (contElem === null) { return false; }
    contElem.empty();
    var sp = $("<span></span>").attr('class', 'asterisk').html(initOpen ? "<img src='/images/open-box.png' />" + question : "<img src='/images/close-box.png' />" + question);
    var h3 = $('<h3></h3>').append(sp).click(function(ev) {
      var sp = $(this).find("span");
      $("#" + attrib + "_ul").toggle();
      $("#" + attrib + "_ul:visible").length ? sp.html("<img src='/images/open-box.png' />" + question) : sp.html("<img src='/images/close-box.png' />" + question);
      return false;
    });
    contElem.append(h3);
    contElem.append(this.buildSelect());
    return true;
  };

  this.buildSelect = function() {
    var wrapUl = $("<ul></ul>").attr("id", attrib + "_ul").attr('style', initOpen ? "" : "display: none");
    for (var i = 0, l = list.length; i < l; i++) {
      wrapUl.append(this.buildSelectLi(list[i], i));
    }
    return wrapUl;
  };

  this.buildSelectLi = function(elem, i) {
    var li = $('<li></li>').attr('id', attrib + "_li_" + i.toString());
    var chkBox = $("<input></input>").attr("type", "checkbox").attr("name", group + "[" + attrib + "][vals][]").attr("value", elem[1]).prop("checked", _.indexOf(selectedList, elem[1]) >= 0);
    li.append(chkBox);
    var label = $("<label></label>").html(elem[0]);
    li.append(label);
    if (extra) { label.prepend(extra(elem)); }
    return li;
  };
};