function selectorBoxSetText(id)
{
   var count = $('#' + id).find(':checkbox').length;
   var selected = $('#' + id).find(':checked');
   var title;
   if (selected.length === 0)
   {
      title = '<i>Geen</i>';
   }
   else if (selected.length == count)
   {
      title = '<i>Alle</i>';
   }
   else
   {
      var vals = [];
      for (var i = 0; i < selected.length; i++)
      {
         vals[vals.length] = selected[i].nextSibling.data;
      }
      title = vals.join(',');
   }

   var max_width = $('#' + id).width();
   var ruler = document.getElementById(id + '_ruler');
   ruler.innerHTML = title;
   if (ruler.offsetWidth > max_width)
   {
      var cut_title = title;
      while (ruler.offsetWidth > max_width)
      {
         cut_title = cut_title.substring(0, cut_title.length - 1);
         ruler.innerHTML = cut_title + '...';
      }
      title = cut_title + '...';
   }
   ruler.innerHTML = '';

   document.getElementById(id + '_text').innerHTML = title;
}

function selectorBoxToggle(id)
{
   if ($('#' + id + '_box').is(':visible'))
   {
      selectorBoxSetText(id);
   }
   $('#' + id + '_box').toggle();
   $('#' + id + '_buttons').toggle();
}

/**
 * Check all checkboxes in a selectorbox
 * @param string id The ID of the selectorbox
 */
function selectorBoxSelectAll(id)
{
   $('#' + id + ' :checkbox').attr('checked', true);
   selectorBoxSetText(id);   
}

/**
 * Clear all checkboxes in a selectorbox
 * @param string id The ID of the selectorbox
 */
function selectorBoxClearAll(id)
{
   $('#' + id + ' :checkbox').attr('checked', false);
   selectorBoxSetText(id);   
}

/**
 * Flip the status of all checkboxes in a selectorbox
 * @param string id The ID of the selectorbox
 */
function selectorBoxToggleAll(id)
{
   $('#' + id + ' :checkbox').each(function() {
      $(this).attr('checked', !$(this).attr('checked'));
   });
   selectorBoxSetText(id);   
}

/**
 * Get the values of the checked elements in the selectorbox, and return
 * them as an array.
 * @param string id The ID of the selectorbox
 * @return array with the checked values
 */
function selectorBoxGetValue(id)
{
   var fields = [];
   $('#' + id + ' :checked').each(function() {
      fields.push($(this).val());
   });
   return fields;
}

/**
 * Check the checkboxes in the selectorbox with ID id that have a value that
 * occurs in in fields, and clear all others.
 * @param string id    The ID of the selectorbox
 * @param array fields The values of the fields to set
 */
function selectorBoxSetValue(id, fields)
{
   selectorBoxClearAll(id);
   for (var i = 0; i < fields.length; i++)
   {
      $('#' + id + ' :checkbox[value=' + fields[i] + ']').attr('checked', true);
   }
   selectorBoxSetText(id);
}

function createSelectorBox(id, name, options)
{
   var html;

   html  = "<div class='selectorbox' id='" + id + "'>"
         +    "<span class='selectorbox_ruler' id='" + id + "_ruler'></span>"
         +    "<div class='selectorbox_text' id='" + id + "_text' onclick='selectorBoxToggle(\"" + id + "\");'>"
         +       "<i>Geen</i>"
         +    "</div>"
         +    "<div class='selectorbox_box' id='" + id + "_box' style='display:none;'>";
   for (var val in options)
   {
      html +=    "<input type='checkbox' name='" + name + "' value='" + val + "'>"
                  + options[val] + "<br>";
   }
   html +=    "</div>"     
         +    "<div class='selectorbox_buttons' id='" + id + "_buttons' style='display:none;'>"
         +       "<img onclick='selectorBoxSelectAll(\"" + id + "\")' title='Selecteer alle' src='images/check-checked.gif'/>"
         +       "<img onclick='selectorBoxClearAll(\"" + id + "\")' title='Selecteer geen' src='images/check-cleared.gif'/>"
         +       "<img onclick='selectorBoxToggleAll(\"" + id + "\")' title='Selectie omkeren' src='images/check-toggle.gif'/>"
         +    "</div>"
         + "</div>";

   return html;
}