var $body = $("body"),
    $caption = $(".caption-info");

$.getJSON("/json/index_carousel", function (data) {
    console.log(data);

    var caro1img = data.caro_info[0].img;
    var caro2img = data.caro_info[1].img;
    var caro3img = data.caro_info[2].img;
    var caro1imgmob = data.caro_info[0].img_mob;
    var caro2imgmob = data.caro_info[1].img_mob;
    var caro3imgmob = data.caro_info[2].img_mob;
    var caro1title = data.caro_info[0].title;
    var caro2title = data.caro_info[1].title;
    var caro3title = data.caro_info[2].title;
    var caro1bull1 = data.caro_info[0].bullet1;
    var caro2bull1 = data.caro_info[1].bullet1;
    var caro3bull1 = data.caro_info[2].bullet1;
    var caro1bull2 = data.caro_info[0].bullet2;
    var caro2bull2 = data.caro_info[1].bullet2;
    var caro3bull2 = data.caro_info[2].bullet2;
    var caro1bull3 = data.caro_info[0].bullet3;
    var caro2bull3 = data.caro_info[1].bullet3;
    var caro3bull3 = data.caro_info[2].bullet3;
    var caro1bull4 = data.caro_info[0].bullet4;
    var caro2bull4 = data.caro_info[1].bullet4;
    var caro3bull4 = data.caro_info[2].bullet4;
    var caro1link = data.caro_info[0].link;
    var caro2link = data.caro_info[1].link;
    var caro3link = data.caro_info[2].link;

    //script to change image for mobile width
    var carousel_frame_1 = caro1img;
    var carousel_frame_2 = caro2img;
    var carousel_frame_3 = caro3img;

    var i = 0;
    function screenSize() {
        var sWidth = $(window).width();
        // $.each(data.caro_info, function(index, item) {//});

        if (sWidth <= 426) {
            carousel_frame_1 = caro1imgmob;
            carousel_frame_2 = caro2imgmob;
            carousel_frame_3 = caro3imgmob;
            i = 0;
        } else {
            carousel_frame_1 = caro1img;
            carousel_frame_2 = caro2img;
            carousel_frame_3 = caro3img;
            i = 1;
        }
        console.log("Screen size is " + sWidth + "variable i is " + i);
    }
    screenSize();

    $(window).on("resize", function () {
        if ($(window).width() >= 427 && i === 0) {
            screenSize();
            location.reload();
            //i = 1;
            console.log("page refreshed");
        } else if ($(window).width() <= 426 && i === 1) {
            screenSize();
            //i = 0;
            location.reload();
            console.log("page refreshed");
        }
    });

    var backgrounds = [
        {
            src: carousel_frame_1,
            text:
                '<h2 class="fade-in">' +
                caro1title +
                '</h2><ul class="fade-in"><li>' +
                caro1bull1 +
                "</li><li>" +
                caro1bull2 +
                "</li><li>" +
                caro1bull3 +
                "</li><li>" +
                caro1bull4 +
                '</li></ul><a class="btn btn-secondary caro-cta" href="' +
                caro1link +
                '" target="_blank" role="button">Find out more</a>',
        },
        {
            src: carousel_frame_2,
            text:
                '<h2 class="fade-in">' +
                caro2title +
                '</h2><ul class="fade-in"><li>' +
                caro2bull1 +
                "</li><li>" +
                caro2bull2 +
                "</li><li>" +
                caro2bull3 +
                "</li><li>" +
                caro2bull4 +
                '</li></ul><a class="btn btn-secondary caro-cta" href="' +
                caro2link +
                '" target="_blank" role="button">Find out more</a>',
        },
        {
            src: carousel_frame_3,
            text:
                '<h2 class="fade-in">' +
                caro3title +
                '</h2><ul class="fade-in"><li>' +
                caro3bull1 +
                "</li><li>" +
                caro3bull2 +
                "</li><li>" +
                caro3bull3 +
                "</li><li>" +
                caro3bull4 +
                '</li></ul><a class="btn btn-secondary caro-cta" href="' +
                caro3link +
                '" role="button">Find out more</a>',
        },
    ];

    $body.vegas({
        delay: 7000,
        transitionDuration: 2000,
        cover: true,
        align: "30%",
        valign: "-20%",
        slides: backgrounds,
        //animation: ["kenburns"],
        overlay: "/images/overlays/11.png",
        walk: function (index, slideSettings) {$caption.html(slideSettings.text);},
    });

    $(".previous").on("click", function () {
        $body.vegas("options", "transition", "kenburnsRight").vegas("previous");
    });

    $(".next").on("click", function () {
        $body.vegas("options", "transition", "kenburnsLeft").vegas("next");
    });
});

$(window).scroll(function () {
    if ($(this).scrollTop() > 100) {$(".scrollup").fadeIn();} else {$(".scrollup").fadeOut();}
});

$(document).ready(function () {
    $(".first").fancybox({
        maxWidth: 640,
        maxHeight: 500,
        fitToView: false,
        width: "80%",
        height: "70%",
        autoSize: false,
        closeClick: false,
        openEffect: "fade",
        openSpeed: 150,
        closeEffect: "fade",
        closeSpeed: 150,
        helpers: {
            overlay: {
                css: { background: "rgba(87,120,165,0.55)" },
            },
        },
    });
});

$(document).ready(function () {
    $(".scrollup").click(function () {
        $("html, body").animate(
            {
                scrollTop: 0,
            },
            600
        );
        return false;
    });

    $(".popover-link")
        .popover({
            html: true,
            placement: "right",
        })
        .click(function (e) {e.preventDefault();});

    $(":not(#anything)").on("click", function (e) {
        $(".popover-link").each(function () {
            //the 'is' for buttons that trigger popups
            //the 'has' for icons and other elements within a button that triggers a popup
            if (
                !$(this).is(e.target) &&
                $(this).has(e.target).length === 0 &&
                $(".popover").has(e.target).length === 0
            ) {
                $(this).popover("hide");
                return;
            }
        });
    });
});