//This simple jQuery plugin is for collapsing and expanding sections of content.
(function($) {
	$.fn.dcCollapse = function(settings) {
		// define defaults and override with options, if available
		// by extending the default settings, we don't modify the argument
		settings = $.extend({
			header: "h2",
			content: "div",
			expandIcon: "images/plus.jpg",
			collapseIcon: "images/minus.jpg",
			hideOnStart: false
		}, settings);

		//Loop through the jquery objects (these are the elements that contain our items to collapse).
		return this.each(function() {
			//This current dom element.
			var headerDomElem = $(settings.header, this);
			var contentDomElem = $(settings.content, this);

			//Put the plus/minus icon in to the header.
			var iconImgSrc = settings.collapseIcon;
			if (settings.hideOnStart) {
				iconImgSrc = settings.expandIcon;
			}
			var child = headerDomElem.prepend('<img src="' + iconImgSrc + '" alt="" /> ');

			//When the header element is clicked.
			child.children('img').click(function() {
				//var contentDomElem = $(settings.content);

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

				//Take the image (the clicked item) and change the icon in it.
				$(this).attr("src", iconImgSrc);

				//Show/hide the content.
				if (iconImgSrc == settings.expandIcon) {
					contentDomElem.hide();
				} else {
					contentDomElem.show();
				}
			});

			if (settings.hideOnStart) {
				//Hide the content area.
				contentDomElem.hide();
			}
		});
	};
})(jQuery);