/**
 * Helper for using CSS classes to define a component's state
 */
(function($){
     /**
      * Set an element's state, based on a predicate
      * @param {string} className
      * @param {function | boolean} pred
      */
	 $.fn.setClass = function(className, pred) {
         var elm = $(this);
         var value = (typeof pred == 'function')
             ? pred() : !!pred;

         if (value) {
             elm.addClass(className);
         }
         else {
             elm.removeClass(className);
         }
         return elm;
     };

     /**
      * Set a class on an element, from a family of classes
      * @param {string} classPrefix
      * @param {string} name
      */
	 $.fn.pickClass = function(classPrefix, name) {
         var elm = $(this);

         // remove all classes from the family
         var regexp = new RegExp('\\b' + classPrefix + '.*?\\b', 'g');
         elm[0].className = elm[0].className.replace(regexp, '');

         if (name) {
             // add the new class
             elm.addClass(classPrefix + name);
         }
         return elm;
     };
 })(jQuery);