// From a div, show h2, and hide .info, then, if you pulse on moreinfo, .info is visible.
// You need a special structure and styles
//
// See naturearea/naturearea_view.html

(function($) {
    $.fn.CollapsableSection = function () {
        var header = '<div class="collapsableActions">';
        header += '<img class="collapsable-expand" title="' + gettext("Expand") + '" alt="' + gettext("Expand") + '" src="/media/img/plus.gif" />';
        header += '<img class="collapsable-collapse" title="' + gettext("Collapse") + '" alt="' + gettext("Collapse") + '" src="/media/img/minus.gif" /></div>';

	return this.each(function() {
            var container = $(this);
            var title = $(this).find('.collapsableTitle');
            var content = $(this).find('.collapsableContent');
            var group = $(this).parents('.collapsableGroup').eq(0);

            var collapse = function() {
                content.slideUp();
                title.find('.collapsable-collapse').hide();
                title.find('.collapsable-expand').show();
            };

            var expand = function() {
                if (group.hasClass('onlyOneExpanded')) {
                    group.find('.collapsableContainer').trigger('collapse');
                }
                content.slideDown();
                title.find('.collapsable-collapse').show();
                title.find('.collapsable-expand').hide();
            };

            var toggle = function() {
                if (content.not(':hidden').length) {
                   collapse();
                } else {
                   expand();
                }
            }

            var initialize = function() {
                title.prepend(header);
                title.find('.collapsable-collapse').click(collapse);
                title.find('.collapsable-expand').click(expand);
                container.bind('collapse', collapse);
                title.dblclick(toggle);
                if (container.hasClass('showOnInit')) {
                    content.show();
                    expand();
                }
            };

            initialize();
        });
    };

    $(document).ready(function(){
        $('.collapsableContainer').CollapsableSection();
    });
})(jQuery);