(function ($) {
    $.fn.extend({
        vinnyFollow: function (options) {

            var defaults = {
                wrapper: 1260,
                class: 'vinny-line',
                zindex: 20,
                width: 1,
                lineWidth: 2,
                color: '#ffffff',
                alignClass: null,
                maxHeight: 200,
                flowColor: '#5cff00',
                flowTop: 230,
                responsiveOffset: 50
            };

            options = $.extend(defaults, options);

            var vinnyFollow = $(this);
            var lineContinueX = null;
            var winWidth = $(window).width();

            // RESET LINES FOR WINDOW RESIZE
            var reset = function () {
                lineContinueX = null;
                winWidth = $(window).width();
            };

            // CREATE LINES
            var init = function () {
                vinnyFollow.each(function () {

                    // INIT VARS
                    var element = $(this);
                    var color = options.color;
                    var offsetTop = 0;
                    var offsetLeft = 'auto';
                    var offsetBottom = 0;
                    var offsetRight = 'auto';
                    var angle = 0;
                    var origin = '0 0';
                    var offsetBottom2 = 0;
                    var angle2 = 0;
                    var line2 = false;
                    var followOn = false;
                    var horizontal = false;
                    var horizontalTop = 0;
                    var horizOffsetRight = 'auto';
                    var offsetBottom3 = 0;
                    var angle3 = 0;
                    var line3 = false;
                    var diagLeft = false;
                    var responsive = false;

                    // UPDATE VARS WITH DATA ELEMENTS
                    if (element.data('offset-top') != undefined) {
                        offsetTop = parseInt(element.data('offset-top'));
                    }
                    if (element.data('offset-left') != undefined) {
                        offsetLeft = 'calc(((100vw - ' + options.wrapper + 'px) / 2) + ' + parseInt(element.data('offset-left')) + 'px)';

                        if (winWidth <= 550) {
                            offsetLeft = '-' + parseInt(element.data('offset-left')) * 4 + 'px';
                        }
                    }
                    if (element.data('offset-bottom') != undefined) {
                        offsetBottom = parseInt(element.data('offset-bottom'));
                    }
                    if (element.data('offset-right') != undefined) {
                        offsetRight = 'calc(((100vw - ' + options.wrapper + 'px) / 2) + ' + parseInt(element.data('offset-right')) + 'px)';
                    }
                    if (element.data('angle') != undefined) {
                        angle = parseInt(element.data('angle'));
                    }
                    if (element.data('origin') === 'bottom') {
                        origin = '0 100%';
                    }
                    if (element.data('color') != undefined) {
                        color = element.data('color');
                    }
                    if (element.data('follow-on') != undefined) {
                        followOn = element.data('follow-on');
                    }
                    if (element.data('2-line') != undefined) {
                        line2 = element.data('2-line');
                    }
                    if (element.data('follow-on') != undefined) {
                        offsetRight = lineContinueX;
                    }
                    if (element.data('horizontal') != undefined) {
                        horizontal = true;
                    }
                    if (element.data('horizontal-top') != undefined) {
                        horizontalTop = parseInt(element.data('horizontal-top'));
                        if (winWidth <= 767) {
                            horizontalTop = options.responsiveOffset;
                        }
                        offsetBottom = 'calc(100% - ' + horizontalTop + 'px)';
                    }
                    if (element.data('horizontal-offsetx') != undefined) {
                        horizOffsetRight = 'calc(((100vw - ' + options.wrapper + 'px) / 2) + ' + parseInt(element.data('horizontal-offsetx')) + 'px)'
                    }
                    if (element.data('3-line') != undefined) {
                        line3 = element.data('3-line');
                    }
                    if (element.data('diag-left-follow') != undefined) {
                        diagLeft = true;
                    }
                    if (element.data('responsive') != undefined) {
                        responsive = true;
                    }

                    // CREATE LINE 1
                    var html = '<div class="' + options.class + '"></div>';

                    if (!$(this).find('.' + options.class).length) {
                        $(this).append(html)
                    }

                    $(this).find('.' + options.class + ':not(.line-horiz)').css({
                        'width': options.lineWidth + 'px',
                        'position': 'absolute',
                        'z-index': options.zindex,
                        'top': offsetTop,
                        'left': offsetLeft,
                        'bottom': offsetBottom,
                        'right': offsetRight,
                        '-webkit-transform': 'skewX(' + angle + 'deg)',
                        '-moz-transform': 'skewX(' + angle + 'deg)',
                        '-ms-transform': 'skewX(' + angle + 'deg)',
                        '-o-transform': 'skewX(' + angle + 'deg)',
                        'transform': 'skewX(' + angle + 'deg)',
                        '-webkit-transform-origin': origin,
                        '-moz-transform-origin': origin,
                        '-ms-transform-origin': origin,
                        '-o-transform-origin': origin,
                        'transform-origin': origin,
                        'overflow': 'hidden'
                    });

                    if (angle != 0) {
                        $(this).find('.' + options.class + ':not(.line-horiz)').attr('skewed', '1');
                    }

                    // ALIGNMENT FOR ELEMENTS UNDERNEATH
                    if (options.alignClass != null && element.data('align-offset')) {
                        var alignOffset = parseInt(element.data('align-offset'));

                        if (winWidth <= 1250) {
                            alignOffset = 20;
                        }

                        var vinnyLine = element.find('.' + options.class);

                        var posRight = (winWidth - (vinnyLine.offset().left + vinnyLine.height())) - ((winWidth - options.wrapper) / 2);

                        element.find(options.alignClass).css({
                            'width': 'calc(((100vw - ' + options.wrapper + 'px) / 2) - ' + alignOffset + 'px + ' + posRight + 'px)'
                        })
                    }

                    // CREATE HORIZONTAL LINE
                    if (horizontal === true) {
                        var lastElem = $(element).find('.' + options.class + ':last-child');
                        var horizontalStart = (lastElem.offset().left + lastElem.height());

                        var horizontalOffsetLeft = 'calc(' + horizontalStart + 'px + ' + ((options.lineWidth / 2)) + 'px)';
                        horizOffsetRight = 'calc(((100vw - ' + options.wrapper + 'px) / 2) + ' + parseInt(element.data('horizontal-offsetx')) + 'px + ' + ((options.lineWidth / 2)) + 'px)';

                        var html = '<div class="' + options.class + ' line-horiz"></div>';

                        if (!$(this).find('.line-horiz.' + options.class).length) {
                            $(this).append(html)
                        }

                        offsetBottom = 'calc(100% - ' + horizontalTop + 'px - ' + ((options.lineWidth / 2)) + 'px)';

                        $(this).find('.line-horiz.' + options.class).css({
                            'height': options.lineWidth + 'px',
                            'position': 'absolute',
                            'z-index': options.zindex,
                            'right': horizOffsetRight,
                            'bottom': offsetBottom,
                            'left': horizontalOffsetLeft,
                            'overflow': 'hidden'
                        });
                    }

                    // CREATE LINE 2
                    if (line2 === true) {
                        if (element.data('2-offset-bottom') != undefined) {
                            offsetBottom2 = element.data('2-offset-bottom');
                            offsetTop = 'calc(100% - ' + offsetBottom + 'px)'
                        }
                        if (element.data('2-offset-right') != undefined) {
                            offsetRight = 'calc(((100vw - ' + options.wrapper + 'px) / 2) + ' + parseInt(element.data('2-offset-right')) + 'px)';
                        }
                        if (element.data('2-offset-top') != undefined) {
                            offsetTop = element.data('2-offset-top');
                        }
                        if (element.data('2-angle') != undefined) {
                            angle2 = element.data('2-angle');
                        }

                        var html = '<div class="' + options.class + ' line-2"></div>';

                        if (!$(this).find('.line-2.' + options.class).length) {
                            $(this).append(html)
                        }

                        $(this).find('.line-2.' + options.class).css({
                            'width': options.lineWidth + 'px',
                            'position': 'absolute',
                            'z-index': options.zindex,
                            'top': offsetTop,
                            'left': offsetLeft,
                            'bottom': offsetBottom2,
                            'right': offsetRight,
                            '-webkit-transform': 'skewX(' + angle2 + 'deg)',
                            '-moz-transform': 'skewX(' + angle2 + 'deg)',
                            '-ms-transform': 'skewX(' + angle2 + 'deg)',
                            '-o-transform': 'skewX(' + angle2 + 'deg)',
                            'transform': 'skewX(' + angle2 + 'deg)',
                            '-webkit-transform-origin': '0 0',
                            '-moz-transform-origin': '0 0',
                            '-ms-transform-origin': '0 0',
                            '-o-transform-origin': '0 0',
                            'transform-origin': '0 0',
                            'overflow': 'hidden'
                        });

                        if (angle2 != 0) {
                            $(this).find('.line-2.' + options.class).attr('skewed', '1');
                        }
                    }

                    if (followOn === true) {
                        var lastElem = $(element).find('.' + options.class + ':last-child');
                        lineContinueX = (winWidth - (lastElem.offset().left + lastElem.height()) - options.lineWidth)
                    }

                    // CREATE LINE 3
                    if (line3 === true) {
                        if (element.data('3-offset-bottom') != undefined) {
                            offsetBottom3 = element.data('3-offset-bottom');
                            offsetTop = 'calc(100% - ' + offsetBottom2 + 'px)'
                        }
                        if (element.data('3-offset-right') != undefined) {
                            offsetRight = 'calc(((100vw - ' + options.wrapper + 'px) / 2) + ' + parseInt(element.data('3-offset-right')) + 'px)';
                        }
                        if (element.data('3-offset-top') != undefined) {
                            offsetTop = element.data('3-offset-top');
                        }
                        if (element.data('3-angle') !== undefined) {
                            angle3 = element.data('3-angle');
                        }

                        var html = '<div class="' + options.class + ' line-3"></div>';

                        if (!$(this).find('.line-3.' + options.class).length) {
                            $(this).append(html)
                        }

                        $(this).find('.line-3.' + options.class).css({
                            'width': options.lineWidth + 'px',
                            'position': 'absolute',
                            'z-index': options.zindex,
                            'top': offsetTop,
                            'left': offsetLeft,
                            'bottom': offsetBottom3,
                            'right': offsetRight,
                            '-webkit-transform': 'skewX(' + angle3 + 'deg)',
                            '-moz-transform': 'skewX(' + angle3 + 'deg)',
                            '-ms-transform': 'skewX(' + angle3 + 'deg)',
                            '-o-transform': 'skewX(' + angle3 + 'deg)',
                            'transform': 'skewX(' + angle3 + 'deg)',
                            '-webkit-transform-origin': '0 0',
                            '-moz-transform-origin': '0 0',
                            '-ms-transform-origin': '0 0',
                            '-o-transform-origin': '0 0',
                            'transform-origin': '0 0',
                            'overflow': 'hidden',
                            'border-radius': '2px'
                        });

                        if (angle3 !== 0) {
                            $(this).find('.line-3.' + options.class).attr('skewed', '1');
                        }
                    }

                    // ALIGNMENT FOR DIAGONAL BACKGROUND
                    if (diagLeft === true) {

                        var next = element.next();

                        var lastElem = $(element).find('.' + options.class + ':last-child');
                        var diagOffset = (winWidth - (lastElem.offset().left + lastElem.height()) - options.lineWidth);

                        next.find('.diag-left').css({
                            width: diagOffset + 'px'
                        })
                    }
                })
            };

            // INIT LINES
            init();
            $(window).on('resize', function () {
                reset();
                init();
            });

            // CREATE COLOR
            var html = '<div class="vinnycolor"></div>';
            var vinnyLine = $('.vinny-line');
            vinnyLine.append(html);
            var vinnyV = $('.vinny-line:not(.line-horiz) .vinnycolor');
            var vinnyH = $('.line-horiz .vinnycolor');

            vinnyV.css({
                'position': 'absolute',
                'left': '0',
                'right': '0',
                'top': '0',
                'bottom': '0',
                'margin': '0 auto',
                'width': options.width + 'px',
                'background': options.color
            });

            vinnyH.css({
                'position': 'absolute',
                'left': '0',
                'right': '0',
                'top': '0',
                'bottom': '0',
                'margin': 'auto 0',
                'height': options.width + 'px',
                'background': options.color
            });

            $('#main-banner .vinnycolor').css('top', '1px');

            // CREATE FLOW
            var html = '<div class="vinnyflow"></div>';
            vinnyLine.append(html);
            var vinnyFlow = $('.vinny-line:not(.line-horiz) .vinnyflow');
            var vinnyHoriz = $('.line-horiz .vinnyflow');
            var distanceOffset = 0;

            vinnyLine.each(function () {

                if ($(this).closest('.vinnyfollow').data('offset-reset') !== undefined) {
                    distanceOffset = 0;
                }

                $(this).find('.vinnyflow').attr('data-distance-offset', distanceOffset);

                if ($(this).hasClass('line-horiz')) {
                    distanceOffset += 200;
                }
            });

            var skewWidth;

            vinnyLine.each(function () {
                var element = $(this);

                if (element.attr('skewed') === 1) {
                    skewWidth = options.lineWidth / 2;
                } else {
                    skewWidth = options.lineWidth / 4;
                }

                if (!element.hasClass('line-horiz')) {
                    element.find('.vinnyflow').css({
                        'width': skewWidth + 'px',
                        'border': skewWidth + 'px solid ' + options.flowColor,
                    });
                } else {
                    element.find('.vinnyflow').css({
                        'height': skewWidth + 'px',
                        'border': skewWidth + 'px solid ' + options.flowColor,
                    });
                }
            });

            vinnyFlow.css({
                'position': 'absolute',
                'left': '0',
                'right': '0',
                'margin': '0 auto',
                'height': options.maxHeight + 'px',
                'max-height': options.maxHeight + 'px',
                'background': options.flowColor,
            });

            vinnyHoriz.css({
                'position': 'absolute',
                'top': '0',
                'bottom': '0',
                'margin': 'auto 0',
                'width': '100%',
                'max-width': '100%',
                'background': options.flowColor,
            });

            vinnyFollow.each(function () {
                var element = $(this)

                if (element.data('color') !== undefined) {
                    var color = element.data('color');

                    element.find('.vinnycolor').css('background', color);
                }
            });

            var flowAnim = function () {
                vinnyLine.each(function () {
                    var scrollTop = $(window).scrollTop();
                    var distanceOffset = parseInt($(this).find('.vinnyflow').data('distance-offset'));
                    var elementOffset = $(this).offset().top;
                    var distance = -(elementOffset - scrollTop) + options.flowTop - distanceOffset;

                    $(this).find('.vinnyflow').css('top', distance + 'px');

                    if ($(this).hasClass('line-horiz')) {

                        var horizDistance = 'calc(' + distance + 'px * (' + ($(this).width() + (options.flowTop / 2)) / options.flowTop + '))';

                        $(this).find('.vinnyflow').css({
                            'left': horizDistance,
                            'top': '0'
                        })
                    }
                })
            };

            flowAnim();
            $(window).on('scroll resize', function () {
                flowAnim();
            });
        }
    });
})(jQuery);