// http://ok-cool.com/posts/read/19-jquery-for-programmers-part-1/


//This simple jQuery plugin is for collapsing and expanding sections of content.
(function() {

jQuery.fn.collapse = function(settings) {

var cContainers = this;     //The jquery objects that contain our collapsable items.

// define defaults and override with options, if available
// by extending the default settings, we don't modify the argument
settings = jQuery.extend({
header: "h3",
content: "p",
expandIcon: "", //"images/plus_icon.gif",
collapseIcon: "", //"images/minus_icon.gif"
}, settings);

//Loop through the jquery objects (these are the elements that contain our items to collapse).
return cContainers.each(function(){

//This current dom element.
var jDomElem = this;
var headerDomElem = jQuery(settings.header, jDomElem);
var contentDomElem = jQuery(settings.content, jDomElem);

//Put the plus/minus icon in to the header.
var expandIconDomElem = ''; //headerDomElem.prepend('<img src="' + settings.expandIcon + '" alt="" />');

//Make sure the expand/collapse element that's clickable LOOKS clickable.  --bp
headerDomElem.css("cursor", "pointer");
headerDomElem.css("text-decoration", "underline");

//When the header element is clicked.
headerDomElem.click(function() {

//Determine the correct expand/collapse icon src.
var iconImgSrc = settings.expandIcon;
if(contentDomElem.css("display")=="none") {
iconImgSrc = settings.collapseIcon;
}

//Take the header (the clicked item) and change the icon in it. We know this is the first element inside it because we put it there.
jQuery(this.firstChild).attr("src", iconImgSrc);

//Show/hide the content.
contentDomElem.toggle();

});

//Hide the content area.
contentDomElem.hide();

});

};

})(jQuery);