(function ($) {
    $.fn.extend({
        beforeAfter: function () {

            $(this).each(function () {

                var baContainer = $(this);
                var percentage = 50;
                var beforeImage = $('img:first', baContainer);
                var afterImage = $('img:last', baContainer);

                $('img', baContainer).addClass('before-after-slider-image');
                beforeImage.addClass('beforeImage');
                afterImage.addClass('afterImage');

                $('.beforeImage', baContainer).css({
                    'clip-path': 'polygon(0 0, ' + percNum(percentage) + ' 0, ' + percNum(percentage) + ' 100%, 0 100%)'
                })

                html = '<div class="before-after-control"><div class="before-after-control-area"><div class="before-after-control-bar"><span class="before-after-left-arrow" /><span class="before-after-control-handle" /><span class="before-after-right-arrow" /></div></div></div>';

                baContainer.append(html);

                var slider = baContainer.find('.before-after-control');
                var baBar = slider.find('.before-after-control-area');
                var startOffset, holderOffset, sliderWidth, handleWidth;

                baBar.css({
                    left: percNum(percentage)
                });

                // EVENTS

                // Drag
                baBar.on('mousedown', function (e) {
                    e.preventDefault();
                    holderOffset = slider.offset().left;
                    startOffset = baBar.offset().left - holderOffset;
                    sliderWidth = slider.width();
                    $(document).on('mousemove', moveHandler).on('mouseup', stopHandler);
                    $('.beforeImage', baContainer).css('transition', 'unset');
                });

                // Hover
                baContainer.on('mouseover', function (e) {
                    $('.before-after-left-arrow, .before-after-right-arrow, .before-after-control-handle', baContainer).filter(':not(:animated)').fadeIn();
                });
                baContainer.on('mouseleave', function (e) {
                    $('.before-after-left-arrow, .before-after-right-arrow, .before-after-control-handle', baContainer).fadeOut();
                });

                // Click
                baContainer.on('click', function (e) {
                    e.preventDefault();
                    var clickX = e.pageX - $(this).offset().left;
                    var posP = (clickX / slider.width()) * 100;

                    posX = Math.round(Math.min(Math.max(0, posP), 100));

                    baBar.stop().animate({
                        left: percNum(posX)
                    }, 400, 'linear');


                    $('.beforeImage', baContainer).css({
                        'clip-path': 'polygon(0 0, ' + percNum(posX) + ' 0, ' + percNum(posX) + ' 100%, 0 100%)',
                        'transition': 'all .4s linear'
                    })
                    $('.cycle-slideshow').cycle('pause');
                });

                baContainer.on('touchmove', function (e) {
                    e.preventDefault();

                    var touchX = e.originalEvent.targetTouches[0].pageX;
                    var clickX = touchX - slider.offset().left;
                    var posP = (clickX / slider.width()) * 100;

                    posX = Math.round(Math.min(Math.max(0, posP), 100));

                    baBar.css({
                        left: percNum(posX)
                    });
                    $('.beforeImage', baContainer).css({
                        'clip-path': 'polygon(0 0, ' + percNum(posX) + ' 0, ' + percNum(posX) + ' 100%, 0 100%)',
                        'transition': 'unset'
                    });
                });

                // FUNCTIONS
                function moveHandler(e) {
                    var posX = e.pageX - holderOffset;
                    var posP = (posX / sliderWidth) * 100;

                    posX = Math.floor(Math.min(Math.max(0, posP), 100));

                    baBar.css({
                        left: percNum(posX)
                    }, 400, "linear");

                    $('.beforeImage', baContainer).css('clip-path', 'polygon(0 0, ' + percNum(posX) + ' 0, ' + percNum(posX) + ' 100%, 0 100%)');
                }

                function stopHandler() {
                    $(document).off('mousemove', moveHandler).off('mouseup', stopHandler);
                }

                function percNum(num) {
                    return num + '%';
                }
            });
        }
    });
})(jQuery);

window.onload = function () {
    $('.before-after-slider').beforeAfter();
}