/**
 * define: trigger - the clickable element that will expand/contract a specifid section
 * triggerFoundIn: tells what attribute of trigger contains the id (ie: class or id attribute, to assign '.' or '#' respectivly)
                   if null: assumes that the triggerName is THE fully qualified jquery selector (example: .triggerName OR #triggerName)
 * triggerName: the jquery selector name for the trigger
 * triggerKey: the name of the attribute that holds the id value for the section to expand/contract NOTE: not id, because you will then have 2 elements w/ the same id
 * closedCss, openCss: css names that are used for the expander/contractor element
 * [optional] options, see settings for available options.

 * Example:
      <span class="myTrigger" name="expandSectionId">Title For the Expandable Section in the following DIV</span>
      <div id="expandSectionId">
         ...expandable section...
      </div>

      applyExpanders( "class", "myTrigger", "name", "myClosedCssStyle", "myOpenedCssStyle", [options] )

        OR

      applyExpanders( "", ".myTrigger", "name", "myClosedCssStyle", "myOpenedCssStyle", [options] )

      IN EITHER CASE:
          trigger =                $(".myTrigger")
          expandable section ID =  $( trigger ).attr( "name" )

 */
function applyExpanders( triggerFoundIn, triggerName, triggerKey, closedCss, openCss, options )
{
    var settings = { openSpeed:  600,
                     closeSpeed: 700,
                     unaryDisplay: false,       /* open of one causes others with same triggerName to be closed  */
                     ignoreCloseSpeed: false,
                     easeShow: "jswing",
                     easeHide: "jswing"
                   };

    if ( options != undefined ) $.extend( settings, options );

    if ( $.easing.def == undefined )
        $.extend( settings, { easeShow: "linear", easeHide: "linear" } );

    var trigger = triggerName;

    if ( triggerFoundIn == "class" )
        trigger = "." + trigger;
    else if ( triggerFoundIn == "id" )
        trigger = "#" + trigger;

    var closeSection = function( $section, $trigger )
    {
        $trigger.removeClass( openCss ).addClass( closedCss );

        if ( settings.ignoreCloseSpeed )
        {
            $section.hide();
            $trigger.removeClass( openCss ).addClass( closedCss );
        }
        else
            $section.slideUp({ duration: settings.closeSpeed,
                               easing: settings.easeHide,
                               complete: function() {}
                             });
    };

    var openSection = function( $section, $trigger )
    {
        $section.slideDown({ duration: settings.openSpeed ,
                             easing: settings.easeHide
                           });
    }

    var applyUnary = function( clickedId ) {

        $(trigger).each( function()
        {
            var thisId = $(this).attr( triggerKey );

            if ( thisId == clickedId ) return;

            if ( $(this).hasClass( openCss ) )
            {
                closeSection( $("#" + thisId), $(this) );
            }
        });
    }

    $( trigger ).click(function(){

        var sectionId = $(this).attr( triggerKey );

        var section = $( "#" + sectionId);

        if ( settings.unaryDisplay ) applyUnary( sectionId );

        if ( section.is(":visible") )
        {
            closeSection( section, $(this) );
        }
        else
        {
            $(this).removeClass( closedCss ).addClass( openCss );
            openSection( section, $(this) );
        }
    });
}

function expand( clickSelector, contentSelector, styles )
{
    $( clickSelector ).click(function(){
        var content = $( contentSelector );
        var isOpen = $(this).hasClass( "close" );

        if ( isOpen ) content.slideUp(400);
        else content.slideDown(400);

        $(this).css( isOpen ? styles.open : styles.close ).toggleClass( "open close" );
    });
}