//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: "ul",
         expandIcon: "images/plus_icon.gif",
         collapseIcon: "images/minus_icon.gif",
         expandText: "Show ",
         collapseText: "Hide ",
         callBack: null
        }, 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.
            headerDomElem.prepend( '<a href="#" class="trigger_href">' + settings.expandText + '</a>');
            headerDomElem.prepend('<img class="trigger_img" style="cursor:pointer;" src="' + settings.expandIcon + '" alt="" />');

            //When the header element is clicked.
            headerDomElem.click(function() 
            {
                //Determine the correct expand/collapse icon src.
                var iconImgSrc = settings.expandIcon;
                var txt = settings.expandText;
                
                var vIsShow = false;
                if(contentDomElem.css("display")=="none") 
                {
                    iconImgSrc = settings.collapseIcon;
                    txt = settings.collapseText;
                    vIsShow = true;
                }                

                //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(".trigger_img", this).attr("src", iconImgSrc); 
                jQuery(".trigger_href", this).empty().prepend( txt );
                
                //Show/hide the content.
                contentDomElem.toggle('med');                
                
                var vCallBack = settings.callBack;
                if (vCallBack != null) 
                {
                    vCallBack(vIsShow);
                }
                
            });

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