function ChallengeSummary(initialRulesShown, rulesButtonId, rulesSectionId, textShow, textHide)
{

    var rulesShown = initialRulesShown;

    $(document).ready(function()
    {
    
        var $rulesButton = $("#" + rulesButtonId);
        var $rulesSection = $("#" + rulesSectionId);

        $rulesButton.click(function()
        {
            if (!rulesShown)
            {
                rulesShown = true;
                
                // slide-down does not work well anywhere: it looks
                // like a problem in determining the proper height
                // $rulesSection.slideDown("normal");
                
                // fade-in does not work well in IE: fonts are not anti-aliased
                // $rulesSection.fadeIn("normal");
                
                // unsetting filter fixes the problem in IE, but only 
                // *after* the animation is done
                // $rulesSection.fadeIn("normal", function() { this.style.removeAttribute("filter"); } );
                
                // so for now, just plain show ...
                $rulesSection.show();

                $rulesButton.
                    text(textHide).
                    removeClass("buttonRulesCollapsed").
                    addClass("buttonRulesExpanded");

            }
            else
            {
            
                rulesShown = false;
                $rulesSection.slideUp("normal", function()
                {
                    $rulesButton.
                        text(textShow).
                        addClass("buttonRulesCollapsed").
                        removeClass("buttonRulesExpanded");
                });

            }
        });
        
    });

}