/* ===================================================================
    
    Author          : Valid Theme
    Template Name   : Dilabs - Creative Digital Agency Template
    Version         : 1.0
    
* ================================================================= */
(function($) {
	"use strict";

	$(document).ready(function() {



		/* ==================================================
		    # Tooltip Init
		===============================================*/
		$('[data-toggle="tooltip"]').tooltip();


		/* ==================================================
		    # Youtube Video Init
		 ===============================================*/
		$('.player').mb_YTPlayer();



		/* ==================================================
		    # Scrolla active
		===============================================*/
		$('.animate').scrolla();


		/* ==================================================
		    # imagesLoaded active
		===============================================*/
		$('#gallery-masonary,.blog-masonry').imagesLoaded(function() {

			/* Filter menu */
			$('.mix-item-menu').on('click', 'button', function() {
				var filterValue = $(this).attr('data-filter');
				$grid.isotope({
					filter: filterValue
				});
			});

			/* filter menu active class  */
			$('.mix-item-menu button').on('click', function(event) {
				$(this).siblings('.active').removeClass('active');
				$(this).addClass('active');
				event.preventDefault();
			});

			/* Filter active */
			var $grid = $('#gallery-masonary').isotope({
				itemSelector: '.gallery-item',
				percentPosition: true,
				masonry: {
					columnWidth: '.gallery-item',
				}
			});

			/* Filter active */
			$('.blog-masonry').isotope({
				itemSelector: '.blog-item',
				percentPosition: true,
				masonry: {
					columnWidth: '.blog-item',
				}
			});

		});


		/* ==================================================
		    # Fun Factor Init
		===============================================*/
		$('.timer').countTo();
		$('.fun-fact').appear(function() {
			$('.timer').countTo();
		}, {
			accY: -100
		});



		/* ==================================================
		    _Progressbar Init
		 ===============================================*/
		function animateElements() {
			$('.progressbar').each(function() {
				var elementPos = $(this).offset().top;
				var topOfWindow = $(window).scrollTop();
				var percent = $(this).find('.circle').attr('data-percent');
				var animate = $(this).data('animate');
				if (elementPos < topOfWindow + $(window).height() - 30 && !animate) {
					$(this).data('animate', true);
					$(this).find('.circle').circleProgress({
						// startAngle: -Math.PI / 2,
						value: percent / 100,
						size: 130,
						thickness: 13,
						lineCap: 'round',
						emptyFill: '#f1f1f1',
						fill: {
							gradient: ['#2667FF', '#6c19ef']
						}
					}).on('circle-animation-progress', function(event, progress, stepValue) {
						$(this).find('strong').text((stepValue * 100).toFixed(0) + "%");
					}).stop();
				}
			});

		}

		animateElements();
		$(window).scroll(animateElements);

		/* ==================================================
            # Banner Carousel
         ===============================================*/
		 const swiperCounter = new Swiper(".banner-slide-counter", {
            // Optional parameters
            // direction: "vertical",
            loop: true,
            grabCursor: true,
            mousewheel: true,
            autoplay: true,
            speed: 1000,
			autoplay: {
				delay: 5000,
				disableOnInteraction: false,
			},

            // If we need pagination
            pagination: {
                el: '.swiper-pagination',
				clickable: true,
            },


            // Navigation arrows
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev"
            }

            // And if we need scrollbar
            /*scrollbar: {
            el: '.swiper-scrollbar',
          },*/
        });


		/* ==================================================
            # Services Carousel
         ===============================================*/
		//  const servicesCarousel = new Swiper(".services-carousel", {
		// 	// Optional parameters
		// 	loop: true,
		// 	autoplay: true,
		// 	freeMode: true,
		// 	grabCursor: true,
		// 	slidesPerView: 1,
		// 	spaceBetween: 30,
		// 	// Navigation arrows
		// 	navigation: {
		// 		nextEl: ".services-button-next",
		// 		prevEl: ".services-button-prev"
		// 	},
		// 	breakpoints: {
		// 		768: {
		// 			slidesPerView: 2,
		// 			spaceBetween: 50,
		// 		},
		// 		1400: {
		// 			slidesPerView: 2.5,
		// 			spaceBetween: 60,
		// 		},

		// 		1800: {
		// 			spaceBetween: 60,
		// 			slidesPerView: 2.8,
		// 		},
		// 	},
		// });



		/* ==================================================
            # Testimonial Carousel
         ===============================================*/
         const testimonialOne = new Swiper(".testimonial-style-one-carousel", {
            // Optional parameters
            loop: true,
            slidesPerView: 1,
            spaceBetween: 0,
            autoplay: true,

			pagination: {
                el: '.testimonial-one-pagination',
                type: 'fraction',
                clickable: true,
            },

            // Navigation arrows
            navigation: {
                nextEl: ".testimonial-one-button-next",
                prevEl: ".testimonial-one-button-prev"
            }

            // And if we need scrollbar
            /*scrollbar: {
            el: '.swiper-scrollbar',
          },*/
        });


		/* ==================================================
            # Project Carousel
         ===============================================*/
		 // const projectStage = new Swiper(".project-center-stage-carousel", {
   //          // Optional parameters
   //          loop: true,
   //          freeMode: true,
   //          grabCursor: true,
   //          slidesPerView: 1,
   //          centeredSlides: true,
   //          spaceBetween: 30,
			// autoplay: true,
   //          pagination: {
   //              el: ".swiper-pagination",
   //              clickable: true,
   //          },
   //          // Navigation arrows
   //          navigation: {
   //              nextEl: ".project-button-next",
   //              prevEl: ".project-button-prev"
   //          },
   //          breakpoints: {
			// 	991: {
   //                  slidesPerView: 2,
			// 		spaceBetween: 30,
			// 		centeredSlides: false,
   //              },
   //              1200: {
   //                  slidesPerView: 2.5,
			// 		spaceBetween: 60,
   //              },
			// 	1800: {
   //                  slidesPerView: 2.8,
			// 		spaceBetween: 80,
   //              },
   //          },
   //      });

		


		/* ==================================================
		    Contact Form Validations
		================================================== */
		$('.contact-form').each(function() {
			var formInstance = $(this);
			formInstance.submit(function() {

				var action = $(this).attr('action');

				$("#message").slideUp(750, function() {
					$('#message').hide();

					$('#submit')
						.after('<img src="assets/img/ajax-loader.gif" class="loader" />')
						.attr('disabled', 'disabled');

					$.post(action, {
							name: $('#name').val(),
							email: $('#email').val(),
							phone: $('#phone').val(),
							comments: $('#comments').val()
						},
						function(data) {
							document.getElementById('message').innerHTML = data;
							$('#message').slideDown('slow');
							$('.contact-form img.loader').fadeOut('slow', function() {
								$(this).remove()
							});
							$('#submit').removeAttr('disabled');
						}
					);
				});
				return false;
			});
		});


		/* ==================================================
		    Services Hover JS
		================================================== */
		const link = document.querySelectorAll('.service-hover-item');
		const linkHoverReveal = document.querySelectorAll('.service-hover-wrapper');
		const linkImages = document.querySelectorAll('.service-hover-placeholder');
		for (let i = 0; i < link.length; i++) {
		  link[i].addEventListener('mousemove', (e) => {
			linkHoverReveal[i].style.opacity = 1;
			linkHoverReveal[i].style.transform = `translate(-100%, -50% ) rotate(-3deg)`;
			linkImages[i].style.transform = 'scale(1, 1)';
			linkHoverReveal[i].style.left = e.clientX + "px";
		  })
		  link[i].addEventListener('mouseleave', (e) => {
			linkHoverReveal[i].style.opacity = 0;
			linkHoverReveal[i].style.transform = `translate(-50%, -50%) rotate(5deg)`;
			linkImages[i].style.transform = 'scale(0.8, 0.8)';
		  })
		}




	}); // end document ready function


	$(window).scroll(function() {

        /* Background Zoom */
        var scroll = $(window).scrollTop();
        $("#js-hero").css({
          width: (100 + scroll/18) + "%"
        })

        /* Image Move */
        $(".bg-static").each(function() {
            var windowTop = $(window).scrollTop();
            var elementTop = $(this).offset().top;
            var leftPosition = windowTop - elementTop;
              $(this)
                .find(".bg-move")
                .css({ left: leftPosition });
          });
    });

    /* ==================================================
	    # Magnific popup init
	 ===============================================*/
	 $(".popup-link").magnificPopup({
		type: 'image',
		// other options
	});

	$(".popup-gallery").magnificPopup({
		type: 'image',
		gallery: {
			enabled: true
		},
		// other options
	});

	$(".popup-youtube, .popup-vimeo, .popup-gmaps").magnificPopup({
		type: "iframe",
		mainClass: "mfp-fade",
		removalDelay: 160,
		preloader: false,
		fixedContentPos: false
	});

	$('.magnific-mix-gallery').each(function() {
		var $container = $(this);
		var $imageLinks = $container.find('.item');

		var items = [];
		$imageLinks.each(function() {
			var $item = $(this);
			var type = 'image';
			if ($item.hasClass('magnific-iframe')) {
				type = 'iframe';
			}
			var magItem = {
				src: $item.attr('href'),
				type: type
			};
			magItem.title = $item.data('title');
			items.push(magItem);
		});

		$imageLinks.magnificPopup({
			mainClass: 'mfp-fade',
			items: items,
			gallery: {
				enabled: true,
				tPrev: $(this).data('prev-text'),
				tNext: $(this).data('next-text')
			},
			type: 'image',
			callbacks: {
				beforeOpen: function() {
					var index = $imageLinks.index(this.st.el);
					if (-1 !== index) {
						this.goTo(index);
					}
				}
			}
		});
	});



	/* ==================================================
        Preloader Init
     ===============================================*/
     $(window).on('load', function() {
        // Animate loader off screen
        $(".se-pre-con").fadeOut("slow");;
    });

})(jQuery); // End jQuery