/*include JS for mutlibox custom inputs for multiselect type fields

Example: 

<div class="multiboxholder">
 *Categories: (<a href="suggest.cfm?s=Company" class="colorbox">suggest one</a>)<br>
 <div class="multibox">
  <cfloop query="qryCategories">
   <li><input type="checkbox" value="#qryCategories.id#" name="categories" rel="#qLoggedIn.categories#" class="required"<cfif ListFind(variables.membercategories, qryCategories.id)> checked</cfif>> <a href="">#qryCategories.name#</a></li>
  </cfloop>
 </div>
 <div class="limitDisplay">
 <cfif qLoggedIn.categories EQ "">
  Unlimited selections
 <cfelse>
  Choose up to #qLoggedIn.categories# Categories
 </cfif>
 </div>
</div>  
*/

$(document).ready(function(){
  
 $(".multibox input").click(function() {
  if ($(this).parent().parent().find(':checkbox:checked').length > $(this).attr('rel') && $(this).attr('rel') != 0) { 
   $(this).attr('checked', false);
   alert('You may only choose up to ' + $(this).attr('rel') + ' items.');
  }
  
  highlightFields();
 });
 
 $(".multibox a").click(function() {
  $(this).prev().attr('checked') ? $(this).prev().attr('checked', false) : $(this).prev().attr('checked', true);
  
  if ($(this).parent().parent().find(':checkbox:checked').length > $(this).parent().find(':checkbox').attr('rel')  && $(this).parent().find(':checkbox').attr('rel') != 0) { 
   $(this).parent().find(':checkbox').attr('checked', false);
   alert('You may only choose up to ' + $(this).parent().find(':checkbox').attr('rel') + ' items.');
  }
      
  highlightFields();
  return false;
 });
 
 highlightFields();
});

function highlightFields() { 
 $(".multibox input").each(function(i) { 
  if ($(this).attr('checked') == true) {
   $(this).parent().css('background-color', '#feeeb8');

  }
  else { 
   $(this).parent().css('background-color', '');
  }
 });
}