$(document).on('ready', function() {
    var selectBoxes = $('.selectGroup input.box');
    var selectAllBox = $('.selectAllGroups input.box');
    selectBoxes.on('change', function() {
        var groups = [];
        var allSelected = true;
        $('.selectGroup input.box').each(function() {
            var box = $(this);
            if (box.is(':checked')) {
                groups.push(box.val());
            } else {
                allSelected = false;
            }
        });
        if (allSelected) {
            selectAllBox.prop('checked', true);
        } else {
            selectAllBox.removeAttr('checked');
        }
        $(document).trigger('Application.calendarGroupFilterChanged', {groups: groups});
    });
    selectAllBox.on('change', function() {
        if ($(this).is(':checked')) {
            selectBoxes.prop('checked', true).trigger('change');
        } else {
            selectBoxes.removeAttr('checked').trigger('change');
        }
    });
});