(function($) {
    var iconCollapsed = "ui-icon-circle-plus";
    var iconExpanded = "ui-icon-circle-minus";

    $.fn.expandable = function() {       
        var box = this;
        var boxTitle = $(".boxTitle", box);

        // Add formatting to the overall container.
        $(this).addClass("ui-widget ui-widget-content ui-corner-all");

        // Insert the icon element, assume the box is expanded/visible
        $("<span style='float:left;'/>").addClass("ui-icon " + iconExpanded).prependTo(boxTitle);

        // Change the icon for any that default to collapsed/hidden
        boxTitle.each(
		    function() {

		        if ($(this).siblings().is(":hidden")) {
		            $(this).find(".ui-icon").removeClass(iconExpanded).addClass(iconCollapsed);
		        }
		    }
		);

        // Configure the Mouse Pointer behaviors
        boxTitle.addClass("ui-accordion-header ui-helper-reset ui-state-default ui-corner-all")
        boxTitle.bind("mouseenter.accordion", function() { $(this).addClass('ui-state-hover'); });
        boxTitle.bind("mouseleave.accordion", function() { $(this).removeClass('ui-state-hover'); });
        boxTitle.bind("focus.accordion", function() { $(this).addClass('ui-state-focus'); });
        boxTitle.bind("blur.accordion", function() { $(this).removeClass('ui-state-focus'); });

        // Hook up the event handler for the title bar Click                
        boxTitle.click(
            function() {
                var collapsing = $(this).siblings().is(":visible");
                $(this).siblings().slideToggle("slow");
                $(this).find(".ui-icon")
                    .toggleClass(iconExpanded, !collapsing)
                    .toggleClass(iconCollapsed, collapsing);
            }
        );

        return this
    };

    $.fn.expandableCollapse = function() {
        var box = this;
        var boxTitle = $(".boxTitle", box);

        boxTitle.siblings().hide("slow");
        boxTitle.find(".ui-icon")
            .toggleClass(iconExpanded, false)
            .toggleClass(iconCollapsed, true);                   
    };

    $.fn.expandableExpand = function() {
        var box = this;
        var boxTitle = $(".boxTitle", box);
        boxTitle.siblings().show("slow");
        boxTitle.find(".ui-icon")
            .toggleClass(iconExpanded, true)
            .toggleClass(iconCollapsed, false);
    };


})(jQuery);