/**
 * @name		Page Builder CK
 * @package		com_pagebuilderck
 * @copyright	Copyright (C) 2017. All rights reserved.
 * @license		GNU General Public License version 2 or later; see LICENSE.txt
 * @author		Cedric Keiflin - https://www.template-creator.com - https://www.joomlack.fr
 */


/*
 * Plugin to manage the slider
 */
(function($) {
	"use strict";
	var PBCK_slider = function(el, opts) {
		if (!(this instanceof PBCK_slider)) return new PBCK_slider(el, opts);

		// init vars
		var defaults = {};
		var opts = $.extend(defaults, opts);
		var t = this;
		t.slider = $(el);
		t.slider.slides = t.slider.find('.pbck_slides');

		var isInterface = t.slider.parents('#workspaceck').length || t.slider.parents('#previewarea').length;
		var loader, loader2;
		var rad = 0;
		var radSum = 0.005;

		opts.autoplay = t.slider.slides.attr('data-autoplay') == '1' && !isInterface;
		opts.pausehover = t.slider.slides.attr('data-pausehover') == '1' && !isInterface;
		opts.time = t.slider.slides.attr('data-time') || 5000;
		opts.height = t.slider.slides.attr('data-sliderheight') || 'auto';
		opts.thumbsresponsive = t.slider.slides.attr('data-thumbsresponsive') || '640';
		opts.captionresponsive = t.slider.slides.attr('data-captionresponsive') || '640';

		t.slider.anim = function(control) {anim(control)};
		t.slider.animThumbs = function(control) {animThumbs(control)};

		t.slider.data('processed', '1');

		init();

		// activate autoplay only if not in edition mode
		if (opts.autoplay) autoplay();

		if (opts.pausehover == '1') {
			t.slider.hover(
				function() {
					$(this).addClass('pausedck');
				}, function() {
					$(this).removeClass('pausedck');
				}
			);
		}

		jQuery(window).bind('resize',function(){
			setSliderHeight();
			setThumbsNavigation();
			hideThumbs();
			hideCaption();
		});
		jQuery(window).on('load',function(){
			setSliderHeight();
			setThumbsNavigation();
			hideThumbs();
			hideCaption();
		});

		function hideThumbs() {
			if (jQuery(window).width() < parseInt(opts.thumbsresponsive)) {
				t.slider.find('.pbck_slider_thumbs').hide();
			} else {
				t.slider.find('.pbck_slider_thumbs').show();
			}
		}

		function hideCaption() {
			if (jQuery(window).width() < parseInt(opts.captionresponsive)) {
				t.slider.find('.pbck_slide_caption').hide();
			} else {
				t.slider.find('.pbck_slide_caption').show();
			}
		}

		function setSliderHeight() {
			if (opts.height == 'auto') {
				t.slider.slides.find('.pbck_slide_img').css('height', '');
				t.slider.slides.css('height', t.slider.find('.pbck_slide.current').height());
			} else {
				t.slider.slides.css('height', opts.height);
				t.slider.slides.find('.pbck_slide_img').css('height', opts.height);
			}
		}

		function setThumbsNavigation() {
			if (t.slider.find('.pbck_slider_thumbs').width() > t.slider.find('.pbck_wrap_thumbs').width()) {
				t.slider.find('.pbck_slider_thumbs_control').hide();
			} else {
				t.slider.find('.pbck_slider_thumbs_control').show();
			}
		}

		function init() {
			t.slider.slides.height('');
			t.slider.removeClass('pbck_animate');
			t.slider.find('.pbck_wrapinner')
				.width((t.slider.find('.pbck_slide').length*100)+'%')
				.css('marginLeft', '0');
			t.slider.find('.pbck_slide').width((100/t.slider.find('.pbck_slide').length)+'%');
			t.slider.find('.pbck_slide.current').removeClass('current');
			t.slider.find('.pbck_slide').eq(0).addClass('current');
			t.slider.find('.pbck_slide_thumb').eq(0).addClass('current');
			t.slider.find('.pbck_slider_control').on('click keydown', function(e) { 
				// The Enter/Return key
				if (e.type === 'keydown' && e.key !== "Enter") {
					return;
				}
				t.slider.anim(this);
			});
			t.slider.find('.pbck_slide_thumb').on('click keydown', function(e) {
				// The Enter/Return key
				if (e.type === 'keydown' && e.key !== "Enter") {
					return;
				}
				t.slider.anim(this);
			});
			setSliderHeight();
			setThumbsNavigation();
			t.slider.find('.pbck_slider_thumbs_control').on('click keydown', function(e) {
				// The Enter/Return key
				if (e.type === 'keydown' && e.key !== "Enter") {
					return;
				}
				t.slider.animThumbs(this);
			});
			hideThumbs();
			hideCaption();
			t.slider.addClass('pbck_animate');

			// B/C compat for accessibility
			if (! t.slider.find('.control_next').attr('aria-label')) {
				t.slider.find('.control_next').attr('role', 'button')
						.attr('tabindex', '0')
						.attr('aria-label', Joomla.Text._('CK_NEXT'));
			}
			if (! t.slider.find('.control_prev').attr('aria-label')) {
				t.slider.find('.control_prev').attr('role', 'button')
						.attr('tabindex', '0')
						.attr('aria-label', Joomla.Text._('CK_PREVIOUS'));
			}
			// add alt tag is not exist
			t.slider.find('.pbck_slide img').each(function(i) {
				let image = this;
				if (! image.getAttribute('alt')) {
					let imagTitle = t.slider.find('.pbck_slide').eq(i).find('.pbck_slide_title').text();
					let imageName = imagTitle ? imagTitle : basename(image.src);
					image.setAttribute('alt', imageName);
				}
			});
			// add accessibility for the thumbs
			if (t.slider.find('.pbck_slide_thumb').length) {
				t.slider.find('.pbck_slide_thumb').attr('role', 'button')
						.attr('tabindex', '0')
						.attr('aria-label', Joomla.Text._('CK_GO_TO'));
				t.slider.find('.pbck_slide_thumb img').each(function(i) {
					let image = this;
					image.setAttribute('alt', t.slider.find('.pbck_slide img').eq(i).attr('alt'));
				})
			}

			clearInterval(loader2);
			loader2 = setInterval(
				function(){
					setSliderHeight();
					clearInterval(loader2);
				}
			, 300);
		}

		function next() {
			anim(t.slider.find('.control_next'));
		}

		function prev() {
			anim(t.slider.find('.control_prev'));
		}

		function anim(control) {
			var nb = t.slider.find('.pbck_slide').length;
			var index;
			var cur_slide = t.slider.find('.pbck_slide.current');

			if ($(control).hasClass('control_next')) {
				if (t.slider.find('.pbck_slide.current').next().length) {
					index =  t.slider.find('.pbck_slide').index(cur_slide) + 1;
				} else {
					index = 0;
				}
			} else if ($(control).hasClass('control_prev')) {
				if (t.slider.find('.pbck_slide.current').prev().length) {
					index =  t.slider.find('.pbck_slide').index(cur_slide) - 1;
				} else {
					index = nb - 1;
				}
			} else if ($(control).hasClass('pbck_slide_thumb')) {
				index = t.slider.find('.pbck_slide_thumb').index(control);
			}

			t.slider.find('.pbck_wrapinner').css('margin-left', '-'+(index*100)+'%');
			t.slider.find('.pbck_slide.current, .pbck_slide_thumb.current').removeClass('current');
			t.slider.find('.pbck_slide').eq(index).addClass('current');
			t.slider.find('.pbck_slide_thumb').eq(index).addClass('current');
			t.slider.slides.animate({'height': t.slider.find('.pbck_slide').eq(index).height()}, 300);

			resetAutoplay();
			if (opts.autoplay) autoplay();
		}

		function animThumbs(control) {
			// var nb = t.slider.find('.pbck_slide').length;
			var index;
			var curSlide = t.slider.find('.pbck_slide_thumb.current');
			var thumbs = t.slider.find('.pbck_slider_thumbs');
			var wrapThumbs = t.slider.find('.pbck_wrap_thumbs');
			var thumbWidth = t.slider.find('.pbck_slide_thumb').width() + 5;

			if ($(control).hasClass('control_next')) {
				if (parseInt(wrapThumbs.css('margin-left')) + wrapThumbs.width() > thumbs.width()) {
					wrapThumbs.animate({'margin-left': '-=' + thumbWidth + 'px'});
					t.slider.find('.pbck_slider_thumbs_control').show();
				} else {
					t.slider.find('.pbck_slider_thumbs_control.control_prev').show();
					$(control).hide();
				}
			} else if ($(control).hasClass('control_prev')) {
				if (Math.abs(parseInt(wrapThumbs.css('margin-left'))) > thumbWidth) {
					wrapThumbs.animate({'margin-left': '+=' + thumbWidth + 'px'});
					t.slider.find('.pbck_slider_thumbs_control').show();
				} else {
					wrapThumbs.animate({'margin-left': '0px'});
					t.slider.find('.pbck_slider_thumbs_control.control_next').show();
					$(control).hide();
				}
			}
		}

		function autoplay() {
			if (! opts.autoplay) return;
			clearInterval(loader);
			loader = setInterval(
				function(){
					if(rad<1 && !t.slider.hasClass('pausedck')){
						rad = (rad+radSum);
						if (rad > 1) rad = 1;
					} else if (rad<=1 && t.slider.hasClass('pausedck')){
						rad = rad;
					} else {
						clearInterval(loader);
						if(!t.slider.hasClass('pausedck')) {
							resetAutoplay();
							next();
						}
					}
				}
			, opts.time*radSum);
		}

		function resetAutoplay() {
			clearInterval(loader);
			rad = 0;
		}

		function basename(path) {
			return path.split('/').reverse()[0].replace(/\.[^/.]+$/, "");
		}

		/*==================== Touch swipe functions =================*/

		// method to get the touch device interaction

		var triggerElementID = null; // this variable is used to identity the triggering element
		var fingerCount = 0;
		var startX = 0;
		var startY = 0;
		var curX = 0;
		var curY = 0;
		var deltaX = 0;
		var deltaY = 0;
		var horzDiff = 0;
		var vertDiff = 0;
		var minLength = 72; // the shortest distance the user may swipe
		var swipeLength = 0;
		var swipeAngle = null;
		var swipeDirection = null;
		var initialPosX = null;
		var initialPosY = null;
		var imageMarginLeft = 0;
		var imageMarginTop = 0;
		var isMobile = function() { return 1 };
		
		// The 4 Touch Event Handlers
		
		// NOTE: the touchStart handler should also receive the ID of the triggering element
		// make sure its ID is passed in the event call placed in the element declaration, like:

		function touchStart(event) {
			// disable the standard ability to select the touched object
			// event.preventDefault();
			// get the total number of fingers touching the screen
			fingerCount = event.touches.length;
			// since we're looking for a swipe (single finger) and not a gesture (multiple fingers),
			// check that only one finger was used
			if ( fingerCount == 1 ) {
				// get the coordinates of the touch
				startX = event.touches[0].pageX;
				startY = event.touches[0].pageY;
				// store the triggering element ID
				triggerElementID = '';
			} else {
				// more than one finger touched so cancel
				touchCancel(event);
			}
		}

		function touchMove(event) {
			// event.preventDefault();
			if ( event.touches.length == 1 ) {
				curX = event.touches[0].pageX;
				curY = event.touches[0].pageY;
			} else {
				touchCancel(event);
			}
		}
		
		function touchEnd(event) {
			// event.preventDefault();
			// check to see if more than one finger was used and that there is an ending coordinate
			if ( fingerCount == 1 && curX != 0 ) {
				// use the Distance Formula to determine the length of the swipe
				swipeLength = Math.round(Math.sqrt(Math.pow(curX - startX,2) + Math.pow(curY - startY,2)));
				// if the user swiped more than the minimum length, perform the appropriate action
				if ( swipeLength >= minLength) {
					caluculateAngle();
					determineSwipeDirection();
					processingRoutine();
					touchCancel(event); // reset the variables
				} else {
					touchCancel(event);
				}
			} else {
				touchCancel(event);
			}
		}

		function touchCancel(event) {
			// reset the variables back to default values
			fingerCount = 0;
			startX = 0;
			startY = 0;
			curX = 0;
			curY = 0;
			deltaX = 0;
			deltaY = 0;
			horzDiff = 0;
			vertDiff = 0;
			swipeLength = 0;
			swipeAngle = null;
			swipeDirection = null;
			triggerElementID = null;
			initialPosX = null;
			initialPosY = null;
		}
		
		function caluculateAngle() {
			var X = startX-curX;
			var Y = curY-startY;
			var Z = Math.round(Math.sqrt(Math.pow(X,2)+Math.pow(Y,2))); //the distance - rounded - in pixels
			var r = Math.atan2(Y,X); //angle in radians (Cartesian system)
			swipeAngle = Math.round(r*180/Math.PI); //angle in degrees
			if ( swipeAngle < 0 ) { swipeAngle =  360 - Math.abs(swipeAngle); }
		}
		
		function determineSwipeDirection() {
			if ( (swipeAngle <= 45) && (swipeAngle >= 0) ) {
				swipeDirection = 'left';
			} else if ( (swipeAngle <= 360) && (swipeAngle >= 315) ) {
				swipeDirection = 'left';
			} else if ( (swipeAngle >= 135) && (swipeAngle <= 225) ) {
				swipeDirection = 'right';
			} else if ( (swipeAngle > 45) && (swipeAngle < 135) ) {
				swipeDirection = 'down';
			} else {
				swipeDirection = 'up';
			}
		}
		
		function processingRoutine() {
			if ( swipeDirection == 'left' ) {
				next();
			} else if ( swipeDirection == 'right' ) {
				prev();
			}
		}



		if(isMobile()){
			t.slider[0].addEventListener("touchstart", touchStart, false);
			t.slider[0].addEventListener("touchmove", touchMove, false);
			t.slider[0].addEventListener("touchend", touchEnd, false);
			t.slider[0].addEventListener("touchcancel", touchCancel, false);
		}
		//*===================== End touch swipe =======================*/

		// return instance
		return t;
	}
	window.PBCK_slider = PBCK_slider;
})(jQuery);

// function used in the interface when creating a new slider
function pbck_slider_init(sliderId) {
	new PBCK_slider(document.getElementById(sliderId).querySelector('.pbck_slider'));
}

function pbck_slider_show(control) {
	// B/C to avoid JS errors on click on the controls
}

jQuery(document).ready(function(){
	// Loop though all sliders to initialise them
	jQuery('.pbck_slider').each(function() {
		new PBCK_slider(this);
	});
});