(function($) {


	window.lsShowTransition = function( el ) {

		var $el = jQuery( el ),

			// Get transition index
			index = parseInt( $el.data('key') ) - 1,

			// Get transition class
			trclass = $el.closest('.lse-transitions-section').data('tr-type'),
			trtype, trObj;

		// Built-in 3D
		if(trclass == '3d_transitions') {
			trtype = '3d';
			trObj = layerSliderTransitions['t'+trtype+''][index];

		// Built-in 2D
		} else if(trclass == '2d_transitions') {
			trtype = '2d';
			trObj = layerSliderTransitions['t'+trtype+''][index];

		// Custom 3D
		} else if(trclass == 'custom_3d_transitions') {
			trtype = '3d';
			trObj = layerSliderCustomTransitions['t'+trtype+''][index];

		// Custom 3D
		} else if(trclass == 'custom_2d_transitions') {
			trtype = '2d';
			trObj = layerSliderCustomTransitions['t'+trtype+''][index];
		}

		// Parse settings
		let settings = $.extend( true, {}, {
			width: 500,
			height: 250,
			imgPath: '../assets/img/',
			skinPath: '../layerslider/skins/',
			transitionType: '2d',
			transitionObject: null,
			showCircleTimer: false,
			pauseOnHover: false,
			skin: 'noskin',
			slidedelay: 100,
			startInViewport: false
		}, {
			transitionType: trtype,
			transitionObject: trObj,
			imgPath: lsTrImgPath,
			skinsPath: pluginPath+'layerslider/skins/'
		} );

		settings.slideTransition = {
			type: settings.transitionType,
			obj: settings.transitionObject
		};

		let $previewSlider = jQuery( '#lse-slide-transition-sample' );

		// Add slider HTML markup
		jQuery(`<div class="transitionpreview" style="width: ${settings.width}px; height: ${settings.height}px;">
			<div class="ls-slide" data-ls="slidedelay: ${settings.slidedelay};">
				<img src="${LS_slideTransitionImages[0]}" class="ls-bg">
			</div>
			<div class="ls-slide" data-ls="slidedelay: ${settings.slidedelay};">
				<img src="${LS_slideTransitionImages[1]}" class="ls-bg">
			</div>
			<div class="ls-slide" data-ls="slidedelay: ${settings.slidedelay};">
				<img src="${LS_slideTransitionImages[2]}" class="ls-bg">
			</div>
		</div>`).appendTo( $previewSlider );

		// Initialize the slider
		$previewSlider.find('.lse-transition-preview-slider').layerSlider( settings );
	};


	window.lsHideTransition = function() {

		// Stop transition
		var $slider = jQuery('#lse-slide-transition-sample' ).find('.lse-transition-preview-slider');
		if( $slider.length ) {
			$slider.layerSlider( 'destroy', true );
		}
	};

})(jQuery);
