var MainTabWindows = $(".MainTabWindows");
var NavbarIconWrap = $(".NavbarIconWrap");
var Navbar = $(".Navbar");
var NavbarLine = $(".NavbarLine");

/******
 NAVBAR
 *****/
var $el, leftPos, newWidth;
NavbarLine
    .css("left", $(".ActiveTab").position().left)
    .data("origLeft", NavbarLine.position().left)
    .data("origWidth", NavbarLine.width());
NavbarIconWrap.on("click", function () {
    NavbarIconWrap.removeClass("ActiveTab");
    $(this).addClass("ActiveTab");
    var index = $(this).attr('id');
    MainTabWindows.slick('slickGoTo', index);
    //$('.MainTabWindows').flickity().flickity('select', index);
    $el = $(this);
    leftPos = $el.position().left;
    NavbarLine.stop().animate({
        left: leftPos,
        width: newWidth
    }, 300);
});

/********
 FLICKITY
 *******/
MainTabWindows.slick({
    initialSlide: 2,
    mobileFirst: true,
    nextArrow: "",
    prevArrow: "",
    infinite: false,
    zIndex: 500
});

MainTabWindows.on('beforeChange', function (event, slick, currentSlide, nextSlide) {
    //console.log(nextSlide);
    NavbarIconWrap.removeClass("ActiveTab");
    $el = $("#" + nextSlide);
    $el.addClass("ActiveTab");
    leftPos = $el.position().left;
    NavbarLine.stop().animate({
        left: leftPos,
        width: newWidth
    }, 300);
});

/*
$('.MainTabWindows').flickity({
    cellAlign: 'left',
    prevNextButtons: false,
    pageDots: false,
    friction: 0.3,
    dragThreshold: ($("body").width() * 0.5),
    initialIndex: 2,
    wrapAround: true,
    maxSwipeWidth: 0,
    on: {
        change: function (index) {
            $(".NavbarIconWrap").removeClass("ActiveTab");
            $el = $("#" + index);
            $el.addClass("ActiveTab");
            leftPos = $el.position().left;
            $magicLine.stop().animate({
                left: leftPos,
                width: newWidth
            }, 300);
        },
        dragStart: function () {
            $(".ActiveTab").css({ transform: 'scale(1.05)' });
        },
        dragEnd: function () {
            $(".NavbarIconWrap").css({ transform: 'scale(1.0)' });
        }/*,
        scroll: function (event, progress) {
            var TotalWidth = $("body").width();
            console.log(progress / 10);
            leftPos = ((progress / 1000) * TotalWidth + 'px');
            $magicLine.stop().animate({
                left: leftPos,
                width: newWidth
            });
        }*
    }
});
*/