
/* Swipe Slideshow */
/* -------------------------------------------------------------------- */

function mk_swipe_slider() {

    $('.mk-swiper-slider').each(function() {
        var $this = $(this);

        if(!(window.matchMedia("(max-width: 650px)").matches && $this.hasClass('mk-portfolio-scroller'))) {

            if($this.data('state') != 'init') {
                $this.data('state', 'init');
            
                var $thumbs = $this.parent().siblings('.gallery-thumbs-small'),
                    $next_arrow = $this.find('.mk-swiper-next'),
                    $prev_arrow = $this.find('.mk-swiper-prev'),
                    $slides = $this.find('.swiper-slide');
                    direction = $this.data('direction'),
                    pagination = $this.data('pagination'),
                    slideshowSpeed = $this.data('slideshowspeed'),
                    animationSpeed = $this.data('animationspeed'),
                    animation = (BrowserDetect.browser == 'IE') ? 'slide' : $this.attr('data-animation'),
                    freeModeFluid = $this.data('freemodefluid'),
                    freeMode = $this.data('freemode'),
                    mousewheelControl = $this.data('mousewheelcontrol'),
                    autoplayStop = $this.data('autoplaystop'),
                    slidesPerView = $this.data('slidesperview'),
                    loop = $this.data('loop'),
                    pagination_class = (pagination) 
                                     ? '#' + $this.attr('id') + ' .swiper-pagination' 
                                     : false;

                var setPerView = function() {
                    if($this.hasClass('mk-employees')) {
                        slidesPerView = 3;
                        if (window.matchMedia("(max-width: 600px)").matches) slidesPerView = 2;
                        else slidesPerView = $this.data('slidesperview');
                    }

                    if($this.hasClass('mk-blog-container')) {
                        slidesPerView = 'auto';
                        if (window.matchMedia("(max-width: 460px)").matches) slidesPerView = 1;
                        else if (window.matchMedia("(max-width: 600px)").matches) slidesPerView = 2;
                        else slidesPerView = $this.data('slidesperview');
                    }
                }
                setPerView();

                var config = {
                    mode: direction,
                    loop: loop,
                    freeMode: freeMode,
                    pagination: pagination_class,
                    freeModeFluid: freeModeFluid,
                    autoplay: slideshowSpeed,
                    speed: animationSpeed,
                    calculateHeight: true,
                    roundLengths: true,
                    grabCursor: true,
                    progress: true,
                    useCSS3Transforms: true,
                    mousewheelControl: mousewheelControl,
                    mousewheelControlForceToAxis: true,
                    paginationClickable: true,
                    slidesPerView: slidesPerView,
                    autoplayDisableOnInteraction: autoplayStop,
                    onSwiperCreated: function(swiper) {
                        mk_lightbox_init();
                    },
                    onSlideChangeStart: function() {
                        $thumbs.find('.active-item').removeClass('active-item');
                        $thumbs.find('a').eq(mk_swiper.activeIndex).addClass('active-item');
                    },
                    onProgressChange: function(swiper){
                        if ($this.attr('data-animation') != "fade") return;
                        for(var i = 0; i < swiper.slides.length; i++) {
                            var slide = swiper.slides[i];
                            var progress = slide.progress;
                            var translateX, opacity, zIndex;

                            opacity = 1 - Math.min(Math.abs(progress),1);
                            zIndex = (1 - Math.min(Math.abs(progress),1))*10;
                            translateX = progress*swiper.width;

                            swiper.setTransform(slide,'translate3d('+translateX+'px,0,0)');
                            slide.style.opacity = opacity;
                            slide.style.zIndex = zIndex;
                        }
                      },
                      onTouchStart:function(swiper){
                        for (var i = 0; i < swiper.slides.length; i++){
                          swiper.setTransition(swiper.slides[i], 0);
                        }
                      },
                      onSetWrapperTransition: function(swiper, speed) {
                        for (var i = 0; i < swiper.slides.length; i++){
                          swiper.setTransition(swiper.slides[i], speed);
                        }
                      }
                };

                var mk_swiper = $(this).swiper(config);

                $(window).on("debouncedresize", function() {
                    setPerView();
                    $slides.width('auto');
                    mk_swiper.reInit();
                    mk_swiper.params.slidesPerView = slidesPerView;
                });

                $prev_arrow.click(function(e) {
                    mk_swiper.swipePrev();
                    e.preventDefault();
                });

                $next_arrow.click(function(e) {
                    mk_swiper.swipeNext();
                    e.preventDefault();
                });

                $thumbs.find('a').on('touchstart mousedown', function(e) {
                    e.preventDefault();
                    $thumbs.find('.active-item').removeClass('active-item');
                    $(this).addClass('active-item');
                    mk_swiper.swipeTo($(this).index());
                });

                $thumbs.find('a').click(function(e) {
                    e.preventDefault();
                });
            }

        } else {
            $this.addClass('scroller-disabled');
        }
    });
}


function mk_gallery_thumbs_width() {

    $('.mk-gallery.thumb-style .gallery-thumbs-small').each(function() {

        var $this = $(this),
            $thumbs_count = $this.children().length,
            $thumbs_width = $thumbs_count * $this.find('a').outerWidth(),
            $container_width = $this.siblings('.gallery-thumb-large').outerWidth();

        if ($thumbs_width > $container_width) {
            $this.find('a').css('width', 100 / $thumbs_count + '%');
        }
    });
}