$(document).ready(function() {
	
	function clearModalData() {

		$('#modal-pictures .infographic-picture__slider').slick('unslick');
		
		$(window).off('resize.picture-modal');

		$('.modal-pictures__title modal-title').html('');
		$('.modal-pictures__content').html('');


	}

	function showModal(el) {

		var pictureTitle = el.next().children('.infographic-picture__title').html(),
			pictureContent = el.next().children('.infographic-picture__content').html();
		
		$('.modal-pictures__title').html( pictureTitle );
		$('.modal-pictures__content').html( pictureContent );

		$('#modal-pictures').modal('show');
		
		var infographicPictureSlider = $('#modal-pictures .infographic-picture__slider');

		if ( infographicPictureSlider.length ) {

			setTimeout(function() {

				infographicPictureSlider
					.css('max-width', $('#modal-pictures .infographic-picture__slider').outerWidth())
					.slick({
						adaptiveHeight: true
					});

			}, 150);

			var windowWidthOld = $(window).width();

			$(window).on('resize.picture-modal', function(e) {
				
				var windowWidthNew = $(window).width();

				if ( windowWidthOld != windowWidthNew ) {
					infographicPictureSlider
						.hide()
						.css('max-width', $('#modal-pictures .modal-pictures__content').outerWidth() - 15*2)
						.show()
						.resize();
				}

			});

		}

	}

	var modalTpl = 
					'<div class="modal-pictures modal fade" id="modal-pictures" tabindex="-1" role="dialog">'+
						'<div class="modal-dialog">'+
							'<div class="modal-content">'+
								'<div class="modal-header">'+
									'<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>'+
									'<h4 class="modal-pictures__title modal-title"></h4>'+
								'</div>'+
								'<div class="modal-pictures__content modal-body"></div>'+
							'</div>'+
						'</div>'+
					'</div>';

	$('body').append( modalTpl );

	$('.infographic-picture__button').on('click', function() {

		showModal( $(this) );

	});

	$('#modal-pictures').on('hidden.bs.modal', function (e) {

	  	clearModalData();

	});

});