// @TODO Refactor with $, among other things
Drupal.behaviors.customCarousel = {
  attach: function (context, settings) {

    // Set carousel variables.
    var owl1 = jQuery('.owl-carousel-fo');
    var owl2 = jQuery('.owl-carousel-posts');
    var owl3 = jQuery('.owl-carousel-impacts');
    var owl4 = jQuery('.owl-carousel-topics');

    // Individual carousel configs.
    // Funding Opportunity carousel.
    owl1.owlCarousel({
      "dots": true,
      "dotsEach": 1,
      dotsContainer: '#carouselDotsFO',
      navContainer: '#carouselNavFO',
      navText: ['',''],
      onTranslated: slideCompleteFO,
      margin: 20,
      responsive:{
        0:{
          items: 1
        },
        600:{
          items: 2
        },
        1024:{
          items: 3
        }
      }
    });

    // Posts carousel.
    owl2.owlCarousel({
      "dots": true,
      "dotsEach": 1,
      dotsContainer: '#carouselDotsPosts',
      navContainer: '#carouselNavPosts',
      navText: ['',''],
      onTranslated: slideCompletePosts,
      margin: 20,
      responsive:{
        0:{
          items: 1
        },
        600:{
          items: 2
        },
        1024:{
          items: 3
        }
      }
    });

    // Impacts carousel.
    owl3.owlCarousel({
      "dots": true,
      "dotsEach": 1,
      dotsContainer: '#carouselDotsImpacts',
      navContainer: '#carouselNavImpacts',
      navText: ['',''],
      onTranslated: slideCompleteImpacts,
      margin: 20,
      responsive:{
        0:{
          items: 1
        },
        600:{
          items: 2
        },
        1024:{
          items: 3
        }
      }
    });

    // Featured Topics carousel.
    owl4.owlCarousel({
      "dots": true,
      "dotsEach": 1,
      dotsContainer: '#carouselDotsTopics',
      navContainer: '#carouselNavTopics',
      navText: ['',''],
      onTranslated: slideCompleteTopics,
      margin: 20,
      responsive:{
        0:{
          items: 1
        },
        1024:{
          items: 2
        },
        1200:{
          items: 3
        }
      }
    });

    //Set carousel item sizes to match owl-calculated values.
    var owlItemWidth = 0;

    if (jQuery('.owl-carousel-fo .owl-item:first-child').width() !== undefined) {
      owlItemWidth = jQuery('.owl-carousel-fo .owl-item:first-child').width();
    } else if (jQuery('.owl-carousel-posts .owl-item:first-child').width() !== undefined) {
      owlItemWidth = jQuery('.owl-carousel-posts .owl-item:first-child').width();
    } else if (jQuery('.owl-carousel-impacts .owl-item:first-child').width() !== undefined) {
      owlItemWidth = jQuery('.owl-carousel-impacts .owl-item:first-child').width();
    };

    // jQuery('.owl-carousel').height(owlItemWidth);
    // jQuery('.owl-carousel .related-content-item').height(owlItemWidth);
    // jQuery('.owl-carousel .views-field-title').width(owlItemWidth - 40);
    // jQuery('.owl-carousel .item-link').width(owlItemWidth).height(owlItemWidth);

    jQuery( window ).resize(function() {
      if (jQuery('.owl-carousel-fo .owl-item:first-child').width() !== undefined) {
        owlItemWidth = jQuery('.owl-carousel-fo .owl-item:first-child').width();
      } else if (jQuery('.owl-carousel-posts .owl-item:first-child').width() !== undefined) {
        owlItemWidth = jQuery('.owl-carousel-posts .owl-item:first-child').width();
      } else if (jQuery('.owl-carousel-impacts .owl-item:first-child').width() !== undefined) {
        owlItemWidth = jQuery('.owl-carousel-impacts .owl-item:first-child').width();
      };

      jQuery('.owl-carousel').height(owlItemWidth);
      jQuery('.owl-carousel .related-content-item').height(owlItemWidth);
      jQuery('.owl-carousel .views-field-title').width(owlItemWidth - 40);
      jQuery('.owl-carousel .item-link').width(owlItemWidth).height(owlItemWidth);
    });

    //Set disable-button class on previous buttons on page load.
    jQuery('#carouselNavFO .owl-prev').addClass('disable-button');
    jQuery('#carouselNavPosts .owl-prev').addClass('disable-button');
    jQuery('#carouselNavImpacts .owl-prev').addClass('disable-button');
    jQuery('#carouselNavTopics .owl-prev').addClass('disable-button');

    // Listen for changes to Funding Opportunity carousel.
    function slideCompleteFO(event) {
      // Toggle disable-button class if on first or last slide.
      jQuery('#carouselNavFO .owl-prev').removeClass('disable-button');
      jQuery('#carouselNavFO .owl-next').removeClass('disable-button');
      if (jQuery('.owl-carousel-fo .owl-item:first-child').hasClass('active')) {
        jQuery('#carouselNavFO .owl-prev').addClass('disable-button'); 
      }
      if (jQuery('.owl-carousel-fo .owl-item:last-child').hasClass('active')) {
        jQuery('#carouselNavFO .owl-next').addClass('disable-button'); 
      }
    }

    // Listen for changes to Posts carousel.
    function slideCompletePosts(event) {
      // Toggle disable-button class if on first or last slide.
      jQuery('#carouselNavPosts .owl-prev').removeClass('disable-button');
      jQuery('#carouselNavPosts .owl-next').removeClass('disable-button');
      if (jQuery('.owl-carousel-posts .owl-item:first-child').hasClass('active')) {
        jQuery('#carouselNavPosts .owl-prev').addClass('disable-button'); 
      }
      if (jQuery('.owl-carousel-posts .owl-item:last-child').hasClass('active')) {
        jQuery('#carouselNavPosts .owl-next').addClass('disable-button'); 
      }
    }

    // Listen for changes to Impacts carousel.
    function slideCompleteImpacts(event) {
      // Toggle disable-button class if on first or last slide.
      jQuery('#carouselNavImpacts .owl-prev').removeClass('disable-button');
      jQuery('#carouselNavImpacts .owl-next').removeClass('disable-button');
      if (jQuery('.owl-carousel-impacts .owl-item:first-child').hasClass('active')) {
        jQuery('#carouselNavImpacts .owl-prev').addClass('disable-button'); 
      }
      if (jQuery('.owl-carousel-impacts .owl-item:last-child').hasClass('active')) {
        jQuery('#carouselNavImpacts .owl-next').addClass('disable-button'); 
      }
    }

    // Listen for changes to Featured Topics carousel.
    function slideCompleteTopics(event) {
      // Toggle disable-button class if on first or last slide.
      jQuery('#carouselNavTopics .owl-prev').removeClass('disable-button');
      jQuery('#carouselNavTopics .owl-next').removeClass('disable-button');
      if (jQuery('.owl-carousel-topics .owl-item:first-child').hasClass('active')) {
        jQuery('#carouselNavTopics .owl-prev').addClass('disable-button'); 
      }
      if (jQuery('.owl-carousel-topics .owl-item:last-child').hasClass('active')) {
        jQuery('#carouselNavTopics .owl-next').addClass('disable-button'); 
      }
    }

    // Hide/show tabs based on tabs selection.
    jQuery('.funding-opportunities-tab').addClass('nav-tab-active');
    jQuery('#block-ug-uswds-views-block-related-content-block-2, #block-ug-uswds-views-block-related-content-block-5').hide();
    jQuery('#block-ug-uswds-views-block-related-content-block-3, #block-ug-uswds-views-block-related-content-block-6').hide();

    // If Funding Opportunities tab clicked.
    jQuery('.funding-opportunities-tab').on('click', function(){
      jQuery('.posts-tab, .impacts-tab').removeClass('nav-tab-active');
      jQuery('.funding-opportunities-tab').addClass('nav-tab-active');
      jQuery('#block-ug-uswds-views-block-related-content-block-1, #block-ug-uswds-views-block-related-content-block-4').show();
      jQuery('#block-ug-uswds-views-block-related-content-block-2, #block-ug-uswds-views-block-related-content-block-5').hide();
      jQuery('#block-ug-uswds-views-block-related-content-block-3, #block-ug-uswds-views-block-related-content-block-6').hide();
    });

    // If Posts tab clicked.
    jQuery('.posts-tab').on('click', function(){
      jQuery('.funding-opportunities-tab, .impacts-tab').removeClass('nav-tab-active');
      jQuery('.posts-tab').addClass('nav-tab-active');
      jQuery('#block-ug-uswds-views-block-related-content-block-1, #block-ug-uswds-views-block-related-content-block-4').hide();
      jQuery('#block-ug-uswds-views-block-related-content-block-2, #block-ug-uswds-views-block-related-content-block-5').show();
      jQuery('#block-ug-uswds-views-block-related-content-block-3, #block-ug-uswds-views-block-related-content-block-6').hide();
    });

    // If Impacts tab clicked.
    jQuery('.impacts-tab').on('click', function(){
      jQuery('.funding-opportunities-tab, .posts-tab').removeClass('nav-tab-active');
      jQuery('.impacts-tab').addClass('nav-tab-active');
      jQuery('#block-ug-uswds-views-block-related-content-block-1, #block-ug-uswds-views-block-related-content-block-4').hide();
      jQuery('#block-ug-uswds-views-block-related-content-block-2, #block-ug-uswds-views-block-related-content-block-5').hide();
      jQuery('#block-ug-uswds-views-block-related-content-block-3, #block-ug-uswds-views-block-related-content-block-6').show();
    });
  }
};