(function($){

  var edit_interests = function(el){
    $(el).data('edit_interests', this);
    this.init();
  }
  
  edit_interests.prototype = {
    
    init: function(){
      var checkboxes = $(':checkbox')
            .each(this.link_containers);
            
      checkboxes.bind('click', { controller:this, checkboxes:checkboxes }, this.checkbox_clicked);    
      
      this.update_display( checkboxes, true )
    },
    
    link_containers: function( ){
      var current = $(this), link = $(document.getElementById(current.data('link')));        
      current.data('links_to', link);    
    },
    
    /* Sync true if you need to resync display of selected items to actual checkbox values. e.g. on page refresh. */
    update_display: function( checkboxes, sync ){      
      var details = $('#edit-details'),
          selected = checkboxes.filter(':checked');
      
      if (sync){
        checkboxes.each(function(){
          var checkbox = $(this), detail = checkbox.data('links_to');
              checkbox.is(':checked') ? detail.addClass('selected') : detail.removeClass('selected');
        })        
      }
      
      selected.length ? details.show() : details.hide(); 
    },
    
    checkbox_clicked: function(e){
      var checkbox = $(this), 
          controller = e.data.controller,
          detail = checkbox.data('links_to');
      
      checkbox.is(':checked') ?
        detail.addClass('selected') :
        detail.removeClass('selected'); 
        
      controller.update_display( e.data.checkboxes );
    }  
  }
 
  $.fn.edit_interests = function(){
    if (!this.length) return;
    return this.each(function(){
       (new edit_interests(this));
    });
  }
 
})(jQuery);

(function($){

  $('#edit-interests').edit_interests();

})(jQuery);