/* ------------------------------------------------------------
 * PROJECT        : 
 * FILENAME       : jq.toggleMoreInfo.js
 * ------------------------------------------------------------
 * LAST UPDATED   : 31 Aug 2009
 * ------------------------------------------------------------
 * AUTHOR(S)      : Kevin Scholl (ksscholl@magellanhealth.com/)
 * ------------------------------------------------------------ */

/*

SUMMARY

This plugin is applied to one or more checkbox elements to dynamically create an associated textarea for more information. The contents of the textarea are saved as part of the value of the checkbox, thereby eliminating the need for an additional database entry. If the checkbox is checked on page load, the textarea is also created and populated with the checkbox's value.

OPTIONAL SETTINGS

cols
An integer specifying the cols (width) value for the created textarea. Default value is 50.

rows
An integer specifying the rows (height) value for the created textarea. Default value is 5.

chars
An integer specifying the maximum number of characters allowed for the created textarea. Default value is 255.

instr
A string specifying the additional instructions to be displayed. If explanatory text already exists, set to "inline". Default value is "Please explain below.".

USAGE

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

where el is the checkbox element or elements to be activated (by tag name, id, or class).

EXAMPLE

$(document).ready(function() {
	$("input.moreInfo").toggleDesc({
		cols  :  60,
		rows  :  5,
		chars :  500, // enter "none" for no character counter
		instr : "Please provide an explanation below."
		});
	});

MINIMUM BROWSER SUPPORT

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

*/

// save value function for the toggleMoreInfo plugin
function saveMoreInfo(cID) {
	$("#" + cID + "Desc").val() == "" ? $("#" + cID).val("") : $("#" + cID).val($("#" + cID + "Desc").val());
	}
	
// create function for the toggleMoreInfo plugin
function createMoreInfo(el,cols,rows,chars,instr) {
	(instr == "inline") ? 
	  $(el).siblings(".instructions").show() : 
		$(el).parent().append("<span class=\"instructions\"> " + instr + "</span>");
	var elID    = $(el).attr("id");
	// create the new field
	var newDesc = "\n";
			newDesc = newDesc + "<li class=\"radioCheck\" id=\"" + elID + "Item\">\n";
			newDesc = newDesc + "  <textarea cols=\"" + cols + "\" rows=\"" + rows + "\" wrap=\"virtual\" name=\"" + elID + "Desc\" id=\"" + elID + "Desc\" onblur=\"saveMoreInfo('" + elID + "');\">" + $("#" + elID).val() + "</textarea>\n";
			if (chars != "unlimited")
  			newDesc = newDesc + "  <span class=\"example\" id=\"" + elID + "Cntr\" style=\"display: block;\"></span>\n";
			newDesc = newDesc + "</li>\n";	
	// display the new field
  $(el).parent().after(newDesc);
	
	// add the toggle Active plugin to the new field
  $("#" + elID + "Desc").toggleActive({
		focusBG   : "#FFF5EA",
		toggleVal :  false
  	});
	// add the character counter to the new field
	if (chars != "none") {
		$("#" + elID + "Desc").charCounter(chars, {
			container: "#" + elID + "Cntr",
			pulse    : false
      });
		}
	}

// remove function for the toggleMoreInfo plugin
function removeMoreInfo(el,instr) {
	$(el).val("");
	(instr == "inline") ? $(el).siblings(".instructions").hide() : $(el).siblings(".instructions").remove();
	$("#" + $(el).attr("id") + "Item").remove();
	}

jQuery.fn.toggleMoreInfo = function(settings) {
	settings = jQuery.extend({
		cols  :  50,
		rows  :  5,
		chars :  255, // enter "unlimited" for no character counter
		instr : "Please explain below." // enter "inline" if instructions already exist
		}, settings);
	this.each(function() {
		if ($(this).attr('checked')) {
			createMoreInfo($(this),settings.cols,settings.rows,settings.chars,settings.instr);										 
			}
		$(this).click(function() {
			$(this).attr('checked') ? 
			  createMoreInfo($(this),settings.cols,settings.rows,settings.chars,settings.instr) : 
				removeMoreInfo($(this),settings.instr);
			});
		});
	};