$(document).ready(function()
{
	function click(item) 
	{
		console.log({ item });
		let slideImageAttr;
		if($(window).width() < 768) {
			slideImageAttr = "data-sm-image"
		} else if($(window).width() > 768 && $(window).width() < 1280) {
			slideImageAttr = "data-tb-image"
		} else {
			slideImageAttr = "data-image"
		}

		$(item).addClass("active").siblings().removeClass("active");
		
		$('.slider_active_title').fadeOut(150, function() {
			$(".slider_active_title").html($(item).attr("data-title")).fadeIn(150);
		});
		
		$('.main_slider-image').fadeOut(150, function() {
			$('.main_slider-image').attr("src", $(item).attr(slideImageAttr)).fadeIn(150);
		});

		var erid = $(item).data("erid");
		if(erid !== "")
		{
			$(".adv_button_slider").css("display", "flex");
			$("#main_slider_erid").text("erid: "+erid);
		}
		else
		{
			$(".adv_button_slider").css("display", "none");
			$("#main_slider_erid").text("");
		}
	}

	$("#main_slider .slider_item").on("click", function(){
        if (!$(this).hasClass("active")) {
            click(this);
        }
		
	});

	$('#main_slider .slider_item:first-child').click();

    let item_width = $("#main_slider .slider_item").outerWidth();

    // Scroll slide list
    const scrolledContainer = $('.slider_list .scrolled');
    let initCount =  4;
    const slidesToScroll = initCount;
    let slidesScrolled = initCount;
    const slidesCount = $(".slider_list .slider_item").length;
    let isClicked = false;
    $(".slider_navto a").on("click", function(e) {
        e.preventDefault();
        if(!isClicked) {
            descktopMove();
        }
    });

    function descktopMove() {
        isClicked = true;
        let current_left_offset = $(scrolledContainer).scrollLeft();  
        if(slidesScrolled <= slidesCount - slidesToScroll) {
            slidesScrolled = slidesScrolled + slidesToScroll;
            $(scrolledContainer).animate( { scrollLeft: current_left_offset +  item_width * slidesToScroll}, 250, function() {
                isClicked = false;
                
            });
        
        } else if(slidesScrolled == slidesCount) {
            $(scrolledContainer).animate( { scrollLeft: 0}, 250, function() {
                isClicked = false;
                slidesScrolled = slidesToScroll;
            });
        } else {
            let diff = slidesCount - slidesScrolled;
            $(scrolledContainer).animate( { scrollLeft: current_left_offset +  item_width * (diff)}, 250, function() {
                isClicked = false;
                slidesScrolled = slidesScrolled + (diff);
            });
        }
    }

	// Touch Events
	function nextSlide() {
		let current_left_offset = $(scrolledContainer).scrollLeft(); 
		if($("#main_slider .slider_item.active").next().hasClass( "slider_item" )) {
			current_left_offset = current_left_offset + item_width;
			$("#main_slider .slider_item.active").next().click();
			$(scrolledContainer).animate( { scrollLeft: current_left_offset }, 250);

		} else {
			$('#main_slider .slider_item:first-child').click();
			current_left_offset = 0;
			$(scrolledContainer).animate( { scrollLeft: current_left_offset }, 250);
		}
	}

	function prevSlide() {
		let current_left_offset = $(scrolledContainer).scrollLeft(); 

		if (!$("#main_slider .slider_item:first-child").hasClass( "active" )) {
			$("#main_slider .slider_item.active").prev().click(); 
			current_left_offset = current_left_offset - item_width;
			$(scrolledContainer).animate( { scrollLeft: current_left_offset }, 250);
		} 
	}

	$(".main_slider_swiper").on('touchstart', function(e) {
		handleTouchStart(e);
	});
	$(".main_slider_swiper").on('touchmove', function(e) {
		handleTouchMove(e);
	});

	var xDown = null;
	var yDown = null;

	function getTouches(evt) 
	{
	return evt.touches ||             // browser API
			evt.originalEvent.touches; // jQuery
	}

	function handleTouchStart(evt) {
		const firstTouch = getTouches(evt)[0];
		xDown = firstTouch.clientX;
		yDown = firstTouch.clientY;
	};

	function handleTouchMove(evt) 
	{
		if ( ! xDown || ! yDown ) 
		{
			return;
		}

		var xUp = evt.touches[0].clientX;
		var yUp = evt.touches[0].clientY;

		var xDiff = xDown - xUp;
		var yDiff = yDown - yUp;

		if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) 
		{
			if ( xDiff > 0 ) {
				nextSlide();
			} else {
				prevSlide();
			}
		}

		xDown = null;
		yDown = null;
    };
});