$(function() {
  $('.prettyCheckbox').each(function() {
        var pretty = function(label) {
             /* var v is the V icon for checked fields */
             var v = $(label).children('div').children('img');
             /* ck is the actual checkbox form field */
             var ck = $(label).prev();

             /* If checkbox is disabled, do nothing. */
             if (ck.attr('disabled')) return;
             /*
             If checkbox is checked:
             - hide the V icon
             - set 'checked' attribute to FALSE
             */
             if ( ck.attr('checked') ) {
                 v.hide();
                 ck.attr('checked', false);
                 /*
                 If the field is at top level:
                    - disable all the checkbox children
                    - trigger the click event of the expand icon which will hide all the children (see below)
                 */
                 if( $(label).hasClass('mainService') ) {
                     $(label).nextAll('input').attr('disabled',true);
                     $(label).addClass('expanded').children('.iconExpand').trigger('click');
                 }
             /*
             If checkbox is unchecked:
             - show the V icon
             - set 'checked' attribute to TRUE
             */
             } else {
                 v.show();
                 ck.attr('checked', true);
                 /*
                 If the field is at top level:
                    - trigger the click event of the expand icon which will show all the children (see below)
                 */
                 if( $(label).hasClass('mainService') ) {
                     $(label).removeClass('expanded').children('.iconExpand').trigger('click');
                 }
             }
        }
        $(this).children('label.mainService').each(function() {
                                                   /* if there are no children skip adding the expand icon */
                                                   if($(this).next('input').length==0) {
                                                       $(this).parent().addClass('noChildren');
                                                       return;
                                                   }
                                                   $(this).append('<div class="iconExpand"></div>');
                                                   $(this).children('.iconExpand').click(function(event) {
                                                                                            event.stopImmediatePropagation();
                                                                                            label = $(this).parent();
                                                                                            if (label.hasClass('expanded')) {
                                                                                                label.nextAll().hide();
                                                                                                label.removeClass('expanded');
                                                                                                label.parent().css('padding-bottom', 0);
                                                                                                return false;
                                                                                            }
                                                                                            label.prev().attr('checked', true);
                                                                                            label.children('div').children('img').show();
                                                                                            label.nextAll('input').attr('disabled', false);
                                                                                            label.nextAll().show();

                                                                                            label.addClass('expanded');
                                                                                            label.parent().css('padding-bottom', '10px');

                                                                                            return false;
                                                                                          });
                                                   });
        $(this).children('label').each(function() {
                                       $(this).append('<div class="iconV"><img style="position: absolute; left: 0; bottom: 0; display: none; margin: 0;" src="/img/icon-v.png" /></div>');
                                       pretty(this);
                                       pretty(this);
                                       $(this).click(function() { pretty(this); return false; });
        });
  });
});