/*
 * 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();
		// load HTML from dataUrl into $slider
		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');
			}).css('cursor', 'pointer');
			$slider.find('.slidebutton.next').show().on('click', function () {
				$content.animate({'left':'-='+settings.scrollBy}, 'fast');
			}).css('cursor', 'pointer');
		});
		
	
	
	};
}(jQuery));


/* experimental function for adding swiping functionallities to the slider */

var startX;
var startY;
var endX
var endY

function touchStart(event){
               startX = event.touches[0].pageX;
               startY = event.touches[0].pageY;
       };

function touchMove(event){
               endX = event.targetTouches[0].pageX;
               endY = event.targetTouches[0].pageY;
};
function touchEnd(event){
               var scrollBy='143px';
               var contentSel = 'div.row';
               
               //slider = document.getElementById('newBooksSlider');
               slider=event.currentTarget;
              
              content = $(slider).find(contentSel);

              if((startX-endX) > 0){

                     content.animate({'left':'-='+scrollBy}, 'fast');

                                     }
               if((startX-endX) < 0){
                     content.animate({'left':'+='+scrollBy}, 'fast');
                                     }
       }

function initialize_swipe(selector){

    $('.ajaxSlider').each(function(){
     this.addEventListener("touchstart",touchStart,false);
	this.addEventListener("touchend",touchEnd,false);
	this.addEventListener("touchmove",touchMove,false);

   }	); 
};

$(document).ready(function() {
	/*
	 * show javascriptonly
	 */
	$('.javascriptonly').show();
	
    /*
     * 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
     *   all children 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');
    });
    
    /*
     * flyout divs
     * 
     * currently only for div.flyout in col in row.triple.
     * 
     * div.flyout contains img.flyout_open and img.flyout_close.
     * 
     * div.flyout gets additional class .flying when open.
     * 
     * div.folded will be shown when open.
     * 
     */
    $('.flyout').each(function () {
    	// flyout target size
    	var tw = 300;
    	var th = 400;
        var $flyout = $(this);
        var $buttons = $flyout.find('.flyout_open, .flyout_close');
        // size up to parent in folded state
        var dh = $flyout.parent().height() - $flyout.outerHeight();
        if (dh > 0) {
            $flyout.height($flyout.height()+dh);
        }
        // save original size
        var ow = $flyout.width();
        var oh = $flyout.height();
        // handle click on open button
        $flyout.find('.flyout_open').on('click', function () {
            $flyout.addClass('flying');
            $flyout.css('position','absolute');
            $flyout.animate({'width': tw, 'height': th}, 'fast');
            // change open to close button
            $buttons.toggle();
        }).css('cursor', 'pointer');
        // handle click on close button
        $flyout.find('.flyout_close').on('click', function () {
            $flyout.animate({'width': ow, 'height': oh}, {
        		'duration': 'fast',
        		'complete': function () {
                    $flyout.removeClass('flying');
                    $flyout.css('position','relative');
                    // change close to open button
                    $buttons.toggle();
        		}
            });
        }).css('cursor', 'pointer');        
    });     

});