$(document).ready(function () {
    new Swiper('.swiper-container', {
        loop: true,
        autoplay: 5000,
        speed: 500,
        pagination: '.Search__pagination',
        paginationClickable: true,
        paginationBulletRender: function (swiper, index, className) {
            var circle = "<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 22 22\">\n<defs>\n    <style>\n      .circle {\n        fill: none;\n        stroke: #fff;\n        stroke-width: 1px;\n      }\n    <\/style>\n  <\/defs>\n  <circle class=\"circle\" cx=\"11\" cy=\"11\" r=\"10.5\"\/>\n<\/svg>\n";
            var bullet = "<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"7\" height=\"7\" viewBox=\"0 0 7 7\">\n  <circle class=\"bullet\" cx=\"3.5\" cy=\"3.5\" r=\"3.5\"\/>\n<\/svg>";
            return '<div class="sliderPagination">\n' +
                '       <span class="with-svg-icon with-svg-icon--single '+ className +'">'+ circle +'</span>\n' +
                '       <span class="with-svg-icon with-svg-icon--single sliderPagination__bullet">'+ bullet +'</span>\n' +
                '   </div>';
        },
        bulletClass: 'sliderPagination__circle',
        bulletActiveClass: 'sliderPagination__circle--active',
    });

    $('.Teaser__button').on('click touch', function (event) {
        event.preventDefault();
        $Teaser = $(this).closest('.Teaser');

		var $button = $(this);
		var buttonHtml = $button.html();
		$button.html("lädt ...");
		$.get('', {
			cmd: 'getTeaserCards',
			offset: $Teaser.find('.Teaser-card').length,
			count: 6
		})
            .done(function (data) {
				console.log(data);
				$Teaser.find('.Teaser__cards > .row').append(data);
			})
			.always(function () {
				$button.html(buttonHtml);
			})
	})
});