jQuery(document).ready(function($){

  function updateUI($wrapper, $checkbox){
    var $contentA  = $wrapper.find('.content-a');
    var $contentB  = $wrapper.find('.content-b');
    var $labelA    = $wrapper.find('.label-a');
    var $labelB    = $wrapper.find('.label-b');

    var isChecked = $checkbox.is(':checked');

    $contentA.toggleClass('active', !isChecked);
    $contentB.toggleClass('active', isChecked);

    $labelA.toggleClass('active', !isChecked);
    $labelB.toggleClass('active', isChecked);
  }

  $(document).on('change', '.sifency-content-toggle-checkbox', function(){
    var $checkbox = $(this);
    var $wrapper  = $checkbox.closest('.sifency-toggle-wrapper');
    updateUI($wrapper, $checkbox);
  });

  $(document).on('click', '.sifency-content-toggle-label', function(){
    var $label    = $(this);
    var $wrapper  = $label.closest('.sifency-toggle-wrapper');
    var $checkbox = $wrapper.find('.sifency-content-toggle-checkbox');
    var isTargetB = $label.data('target') === 'b';

    if($checkbox.is(':checked') !== isTargetB){
      $checkbox.prop('checked', isTargetB).trigger('change');
    }
  });

  $('.sifency-toggle-wrapper').each(function(){
    var $wrapper  = $(this);
    var $checkbox = $wrapper.find('.sifency-content-toggle-checkbox');
    if($checkbox.length){
      updateUI($wrapper, $checkbox);
    }
  });

});
