/*
 * Javascript for MPIWG website
 * (C) 2013 MPIWG Berlin
 */

/* 
 * AjaxSlider plugin.
 */
(function ($) {
	$.fn.AjaxSlider = function (opts) {
		var settings = $.extend({
			dataUrl : null,
			dataSel : '',
			windowSel : 'div.slidewindow',
			contentSel : 'div.row',
			minHeight : 0,
			buttonWidth : '20px',
			scrollBy: '100px',
		}, opts);
		var url = settings.dataUrl + ' ' + settings.dataSel;
		var $slider = this;
		var winW = this.width() - 2 * settings.buttonWidth;
		var sliderH = this.height();
		this.load(url, function () {
			var $window = $slider.find(settings.windowSel);
            var $content = $slider.find(settings.contentSel);
			// fix window width and height and hide overflow
			var winH = Math.max($content.height(), settings.minHeight);
			$window.css({'width':winW, 'height':winH, 'margin':'0 '+settings.buttonWidth,  
						 'overflow':'hidden', 'position':'relative'});
			// content will be moved
			$content.css({'position':'absolute', 'left':'0'});
			$slider.find('.slidebutton.prev').show().on('click', function () {
				$content.animate({'left':'+='+settings.scrollBy}, 'fast');
			});
			$slider.find('.slidebutton.next').show().on('click', function () {
				$content.animate({'left':'-='+settings.scrollBy}, 'fast');
			});
		});
	};
}(jQuery));


$(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();
        }
    });
    $('.foldable2').each(function () {
        var $this = $(this);
        var $head = $this.find('.fold_head2');
        var $img = $head.find('img');
        var $body = $this.find('.fold_body2');
        $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');
    });
});