
/* Edge Slideshow */
/* -------------------------------------------------------------------- */

function mk_edge_slider_init() {

    $('.mk-edge-slider').each(function(i, val) {
        var $wrapper = $(this),
            $nav = $('.mk-edge-nav'),
            $nextBtn = $wrapper.find('.mk-edge-next'),
            $prevBtn = $wrapper.find('.mk-edge-prev'),
            pause = $wrapper.data('pause'),
            firstEl = $wrapper.data('first'),
            speed = $wrapper.data('speed'),
            loop = $wrapper.data('loop'),
            height = $wrapper.data('height'),
            fullHeight = $wrapper.data('fullheight'),
            pagination = $wrapper.data('pagination'),
            paginationClass = (pagination) ? '#' + $wrapper.attr('id') + ' .swiper-pagination' : false,
            headerHeight = 0,
            edgeHeight = 0,
            animation = (BrowserDetect.browser == 'IE' && $wrapper.data('animation') == 'horizontal_curtain') 
                        ? 'slide' 
                        : $wrapper.data('animation');

        function setEdgeHeight() {
            edgeHeight = fullHeight ? abb.fullHeight() : height;
        } 
        // set initial height before swiper initialization 
        setEdgeHeight();

        var $prevBtnCaption = $prevBtn.find('.prev-item-caption');
        var $nextBtnCaption = $nextBtn.find('.next-item-caption');
        var $prevBtnBg = $prevBtn.find('.edge-nav-bg');
        var $nextBtnBg = $nextBtn.find('.edge-nav-bg');
        var $slides = $wrapper.find('.swiper-slide');
        var $slideNextNr = $wrapper.find('.slide-next-nr');
        var $slidePrevNr = $wrapper.find('.slide-prev-nr');
        var $slidesAll = $wrapper.find('.slides-all');
        function setNavigationContents($el) {
            var $active = $el;
            var $prev = $active.prev();
            var $next = $active.next();
            var prevTxt = $prev.find('.mk-edge-title').text();
            var nextTxt = $next.find('.mk-edge-title').text();
            var prevBg = $prev.css('background-image');
            var nextBg = $next.css('background-image');
            var prevVideo = $prev.find('.mk-video-section-touch').css('background-image');
            var nextVideo = $next.find('.mk-video-section-touch').css('background-image');
            var prevColor = $prev.css('background-color');
            var nextColor = $next.css('background-color');

            if (prevTxt) $prevBtnCaption.show().text(prevTxt);
            if (nextTxt) $nextBtnCaption.show().text(nextTxt);
            if (prevBg && prevBg != "none") $prevBtnBg.show().css({ 'background-image': prevBg });
            else if (prevVideo && prevVideo != "none") $prevBtnBg.show().css({ 'background-image': prevVideo });
            else if (prevColor) $prevBtnBg.show().css({ 'background-color': prevColor });
            if (nextBg && nextBg != "none") $nextBtnBg.show().css({ 'background-image': nextBg });
            else if (nextVideo && nextVideo != "none") $nextBtnBg.show().css({ 'background-image': nextVideo });
            else if (nextColor) $nextBtnBg.show().css({ 'background-color': nextColor });

            if($nav.hasClass('nav-flip'))  {
                var activeIndex = $active.data('sliderIndex') + 1; // start at 1;
                $slidesAll.text($slides.length);
                $slidePrevNr.text( (activeIndex === 1) 
                    ? $slides.length 
                    : activeIndex - 1 );
                $slideNextNr.text( (activeIndex === $slides.length) 
                    ? 1 
                    : activeIndex + 1 );
            } 
        }

        function toggleNav($el, swiper) {
            $prevBtn[(!$el.data('sliderIndex') ? 'fadeOut' : 'fadeIn')]();
            $nextBtn[($el.data('sliderIndex') ===  $slides.length - 1 ? 'fadeOut' : 'fadeIn')]();

            swiper[($el.data('sliderIndex') ===  $slides.length - 1 ? 'stopAutoplay' : 'startAutoplay')]();
        }

        // We will need easy access to natural index of slides. Swiper duplicates some of them or not depending on loop option.
        // Get rid of heavy logic later by indexing slides before slider is created
        $slides.each(addNaturalIndex);
        function addNaturalIndex(i, el) {
            $(el).attr('data-slider-index', i);
        }

        var $header = $('#mk-header');
        var $skipBtn = $wrapper.find('.edge-skip-slider');
        function setSkin($el) {
            var $active = $el;
            var currentSkin = $active.attr("data-header-skin");

            $prevBtn.attr('data-skin', currentSkin);
            $nextBtn.attr('data-skin', currentSkin);
            $skipBtn.attr('data-skin', currentSkin);
            $(paginationClass).attr('data-skin', currentSkin);
            if (!$header.hasClass('transparent-header-sticky') && firstEl) setHeaderSkin(currentSkin);
        }

        // remove viewport animations from slider
        $wrapper.find('.mk-animate-element').removeClass('mk-animate-element fade-in scale-up right-to-left left-to-right bottom-to-top top-to-bottom forthy-five-rotate');

        if(pagination) $wrapper.find('.edge-skip-slider').css('bottom', '14%');

        var mk_swiper = $wrapper.swiper({
            mode: 'horizontal', 
            loop: loop,
            roundLengths: true,
            calculateHeight: true,
            grabCursor: true,
            useCSS3Transforms: true,
            mousewheelControl: false,
            pagination : paginationClass,
            paginationClickable: true,
            freeModeFluid: true,
            speed: speed,
            autoplay: pause,
            progress: true,
            autoplayDisableOnInteraction: false,
            onSwiperCreated: function(swiper) {
                var $active = $wrapper.find('.swiper-slide-active');
                setNavigationContents($active);
                setSkin($active);
                if(!loop) toggleNav($active, swiper);
                $(paginationClass).find('span').append('<a href="#"></a>');
            },
            onSlideChangeEnd: function(swiper) {
                var $active = $wrapper.find('.swiper-slide-active');
                setNavigationContents($active);
                setSkin($active);
                if(!loop) toggleNav($active, swiper);
            },
            onProgressChange: function(swiper){
                for (var i = 0; i < swiper.slides.length; i++){
                    var slide = swiper.slides[i];
                    var progress = slide.progress;

                    if(animation == "vertical_slide") {
                        var translateX, translateY;
                        translateX = progress*swiper.width;
                        translateY = progress*edgeHeight;
                        swiper.setTransform(slide,'translate3d('+translateX+'px,'+ (-translateY) +'px,0)');
                    }
                    else if(animation == "zoom") {
                        var scale, scaleContent, translate, opacity, zIndex;
                        if (progress<=0) {
                            opacity = 1 - Math.min(Math.abs(progress),1);
                            scale = 1 - Math.min(Math.abs(progress/12),1);
                            scaleContent = 1;
                            translate = progress*swiper.width;
                        }
                        else {
                            opacity = 1 - Math.min(Math.abs(progress/2),1);
                            scale = 1 + Math.min(Math.abs(progress/6),1);
                            translate = progress*swiper.width;
                        }
                        zIndex = (1 - Math.min(Math.abs(progress),1))*10;
                        slide.style.opacity = opacity;
                        swiper.setTransform(slide,'translate3d('+translate+'px,0,0) scale('+scale+')');
                        slide.style.zIndex = zIndex;
                    }
                    else if(animation == "zoom_out") {
                        var scale, translateX, translateY, opacity, zIndex;
                        translateX = progress*swiper.width;
                        if (progress<=0) {
                            opacity = 1;
                            scale = 1;
                            zIndex = 1;
                            translateY = progress*edgeHeight;
                        } 
                        else if (progress>0) {
                            opacity = (1 - Math.min(Math.abs(progress),1))/2;
                            scale = 1 - Math.min(Math.abs(progress/2),1);
                            zIndex = 0;
                            translateY = 0;
                        }
                        swiper.setTransform(slide,'translate3d('+translateX+'px,'+ -translateY +'px,0)  scale('+scale+')');
                        slide.style.opacity = opacity;
                        slide.style.zIndex = zIndex;
                    }
                    else if(animation == "fade") {
                        var translateX, opacity, zIndex;
                        translateX = progress*swiper.width;
                        opacity = 1 - Math.min(Math.abs(progress),1);
                        zIndex = (1 - Math.min(Math.abs(progress),1))*10;
                        swiper.setTransform(slide,'translate3d('+translateX+'px,0,0)');
                        slide.style.opacity = opacity;
                        slide.style.zIndex = zIndex;
                    }
                    else if(animation == "horizontal_curtain") {
                        var translateX, zIndex, transitionTiming;
                        translateX = progress*swiper.width;
                        if (progress<=0) {
                            zIndex = 1;
                            translateX = 0;
                            transitionTiming = 'ease';
                        }
                        else if (progress>0){
                            zIndex = 0;
                            translateX = (progress*swiper.width)/2;
                            transitionTiming = 'ease';
                        }
                        swiper.setTransform(slide,'translate3d('+(translateX/2)+'px,0,0)');
                        slide.style.webkitTransitionTimingFunction = transitionTiming;
                        slide.style.zIndex = zIndex;
                    }
                    else if(animation == "perspective_flip") {
                        var translateX, translateY, rotateX;
                        translateX = progress*swiper.width;
                        translateY = progress*edgeHeight;
                        if (progress>=0) rotateX = 0;
                        else if (progress<0) rotateX = 70;
                        swiper.setTransform(slide,'translate3d('+translateX+'px,'+ (-translateY) +'px,0) rotateX('+rotateX+'deg)');
                    }

                }
              },
              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);
                }
              }
        });

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

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

        if(pagination) {
            $(paginationClass).on('click', 'span', function(e){
                e.preventDefault();
                mk_swiper.swipeTo($(this).index(), 500);
            });
        }

        $(window).on("debouncedresize", mk_edge_slider_resposnive);
        $(window).on("debouncedresize", setEdgeHeight);

        //
        // PARALLAX
        //
        //////////////////////////////////////////////


        if ($wrapper.parent().hasClass('mk-parallax') && !is_touch_device()) {
            var offset, translateValue,
                $parent = $wrapper.parent(),
                height = $parent.outerHeight(),
                $header = $('#mk-header'),
                headerHeight = 0;


            if(!$header.hasClass('transparent-header')) {
                headerHeight = $header.height();
            }

            if($header.hasClass('header-structure-vertical')) {
                headerHeight = 0;
            }

            scrollAnimations.add(function(scrollY) {
                offset = $parent.offset().top;
                translateValue = ((scrollY - offset + global_admin_bar_height + headerHeight) * .7);
                $wrapper.css({'transform' : 'translateY(' + translateValue + 'px)'});
            });
        }

    });


}


function mk_edge_slider_resposnive() {

    $('.mk-edge-slider').each(function() {
        var $this = $(this),
            $containers = $this.find('.edge-slider-holder, .swiper-slide'),
            height = $this.data('height'),
            fullHeight = $this.data('fullheight'),
            edgeHeight = fullHeight ? abb.fullHeight() : height;

        $containers.css('height', edgeHeight);
        $this.css('height', edgeHeight);

        $this.find('.swiper-slide').each(function() {
            var $this = $(this),
                $content = $this.find('.edge-slide-content'),
                $holder = $this.find('.edge-content-holder');

            if ($this.hasClass('left_center') || $this.hasClass('center_center') || $this.hasClass('right_center')) {
                var $this_height_half = $content.outerHeight() / 2,
                    $window_half = edgeHeight / 2;
                $holder.css('marginTop', ($window_half - $this_height_half));
            }

            if ($this.hasClass('left_bottom') || $this.hasClass('center_bottom') || $this.hasClass('right_bottom')) {
                if(global_window_width > 960) {
                    var $distance_from_top = edgeHeight - $content.outerHeight() - 160;
                    $holder.css('marginTop', ($distance_from_top));    
                } else {
                    var $this_height_half = $content.outerHeight() / 2,
                    $window_half = edgeHeight / 2;
                    $holder.css('marginTop', ($window_half - $this_height_half));
                }
            }
        });

        $this.find('.edge-slider-loading').fadeOut();
    });

}

