/* ------------------------------------------------------------
 * PROJECT        : 
 * FILENAME       : jq.toggleColumns.js
 * ------------------------------------------------------------
 * LAST UPDATED   : 11 Aug 2009
 * ------------------------------------------------------------
 * AUTHOR(S)      : Kevin Scholl (kevin@ksscholl.com)
 * ------------------------------------------------------------
 * NOTE(S)        : 
 * ------------------------------------------------------------ */

/*

SUMMARY

This plugin indexes the columns of a specified table, along with the text in the TH tags of the header row, and contructs a control of checkboxes with a direct association to each column. The user can then show and hide any column by simply checking and unchecking the associated checkbox in the control manager. The appearance of the control manager may be determined by setting up styles for .colManager in your CSS.

OPTIONAL SETTINGS

ctrlWrap
An HTML element that tells toggleColumns how to wrap the column manager. Options include any block-level element, such as DIV (default), FORM, or P.

leadText
A string used to label the control manager. Default value is "Show columns:".

disabled
An array specifying the columns (ordered by index, base 1) for which to disallow hiding. Default is none, denoted as an empty array, [ ].

initHide
An array specifying the columns (ordered by index, base 1) to hide on initial load. Default is none, denoted as an empty array, [ ].

USAGE

$("el").toggleColumns();
$("el").toggleColumns({ options });

where el is typically a table ID.

EXAMPLE

$(document).ready(function() {
	$("#el").toggleColumns({
		ctrlWrap : "div",
		leadText : "Show the following columns:",
		disabled : [1],
		initHide : [3,7]
		});
	});

MINIMUM BROWSER SUPPORT

Apple Safari 3, Google Chrome 1, Microsoft Internet Explorer 6, Mozilla Firefox 3, Opera 9

*/

jQuery.fn.toggleColumns = function(settings) {
	settings = jQuery.extend({
		ctrlWrap : "div",
		leadText : "Show columns:",
		disabled : [],
		initHide   : []
		}, settings);
	
	var theTbl  = $(this).attr('id');
  var theCtrl = $(this).attr("id") + "Cols";
	var colIdx  = "";
	var theCol  = "";
	
	// build toggle controls
	$(this).before("<" + settings.ctrlWrap + ""
	  + " class=\"colManager\""
		+ " rel=\"" + theTbl + "\""
		+ " id=\"" + theCtrl + "\">\n<strong>" + settings.leadText + "</strong>\n</" + settings.ctrlWrap + ">\n");	
	for (h = 0; h < $(this).find("thead th").length; h++) {
		$("#" + theCtrl)
		  .append("<span><input type=\"checkbox\" checked=\"true\" />" + $(this).find("thead th:eq(" + h + ")").text() + "</span>\n");
		}
	
	// hide specified columns on initial load
	for (i = 0; i < settings.initHide.length; i++) {
		$("#" + theCtrl).find("input:checkbox:eq(" + (settings.initHide[i] - 1) + ")").attr("checked",false);
		$(this).find("th:nth-child(" + (settings.initHide[i]) + "), td:nth-child(" + (settings.initHide[i]) + ")").hide();
		}

	// disable toggle on specified columns
	for (j = 0; j < settings.disabled.length; j++) {
		$("#" + theCtrl).find("input:checkbox:eq(" + (settings.disabled[j] - 1) + ")").attr("disabled",true);
		}

	// toggle selected column
	$("#" + theCtrl).find("input:checkbox").each(function() {
		$(this)
		  .click(function() {
				colIdx = $(this).parent().parent().find("span input:checkbox").index(this) + 1;
				theCol = $("#" + theTbl).find("th:nth-child(" + colIdx + "), td:nth-child(" + colIdx + ")");
			  this.checked ? theCol.show() : theCol.hide();
			});
		});
	};