/*
 * Javascript for MPIWG website
 */

$(document).ready(function() {
    /*
     * autosubmit forms
     */
    $('form.autosubmit').find('.autosubmit').change(function() {
        this.form.submit();
    });
    // hide submit button
    $('form.autosubmit input[type="submit"].autosubmit').hide();

    /*
     * foldout divs
     * 
     * foldable: .foldable is ancestor of .fold_head and .fold_body
     *   that are folded simultaneously.
     * 
     * foldableById: .foldableById is ancestor of multiple .fold_head and .fold_body
     *   where each pair has a common unique .foldId_xxx.
     * 
     * Clicking on .fold_head folds and unfolds .fold_body.
     *  
     * If .foldable has .initially_open .fold_body is initially shown, else its 
     * initally hidden.
     */
    $('.foldable').each(function () {
        var $this = $(this);
        var $head = $this.find('.fold_head');
        var $img = $head.find('img');
        var $body = $this.find('.fold_body');
        $head.on('click', function () {
            $body.slideToggle('fast');
            $img.toggle();
        }).css('cursor', 'pointer');
        if (! $this.hasClass('initially_open')) {
            // hide body initially
            $body.hide();
            $img.toggle();
        }
    });
    $('.foldableById').each(function () {
        var $container = $(this);
        var io = $container.hasClass('initially_open');
        var $heads = $container.find('.fold_head');
        $heads.each(function () {
            var $this = $(this);
            var $img = $this.find('img');
            var id = null;
            // find id in class
            var cls = $this.attr('class').split(' ');
            for (var i = 0; i < cls.length; ++i) {
                var c = cls[i];
                if (c.startsWith('foldId_')) {
                    id = c;
                    break;
                }
            }
            if (id == null) return;
            // get body using id
            var $body = $container.find('.fold_body.'+id);
            $this.on('click', function () {
                $body.slideToggle('fast');
                $img.toggle();
            });
            if (!io) {
                // hide body initially
                $body.hide();
                $img.toggle();
            }
        }).css('cursor', 'pointer');
    });
});