var initMediaGallerySlider = function (wSectionJqElm) {
  var mgSlider = wSectionJqElm.find('.media-gallery-slider');
  var mgSliderNav = wSectionJqElm.find('.media-gallery-slider-nav');

  // o-media-gallery -->
  var mgSliderDescription = wSectionJqElm.closest('.row').find('.description-wrapper .description-item');
  // slickGoTo method to slide to carousel index
  $('[data-carousel-index]').each(function () {
    var index = $(this).attr('data-carousel-index');
    var modalid = $(this).attr('data-target');
    var slickslider = $(modalid).find('.media-gallery-slider');

    $(this).on('click', function () {
      slickslider.slick('slickGoTo', index);
    });
  });
  mgSlider.on('beforeChange swipe', function (event, slick, currentSlide, nextSlide) {
    mgSliderDescription.hide();
  });
  mgSlider.on('afterChange', function (event, slick, currentSlide, nextSlide) {
    mgSliderDescription.eq(currentSlide).fadeIn('fast', function () { });
  });

  // force recalc dimensions in slick after modal is initialized
  $('.modal.m-modal').on('shown.bs.modal', function () {
    mgSlider.resize();
    mgSliderNav.resize();
    if ($('.media-gallery-item--360').length) {
      setTimeout(function () {
        init360Video();
      }, 500);
    };
  });

  $('.modal.m-modal').on('hidden.bs.modal', function () {
    // cliplister
    if ($('.video-player').length) {
      $('.video-player')[0].api.stop();
    }
    // youtube
    if ($('.ytvideo-player').length) {
      var ytId = $(this).find('.slick-active .yt-video .ytvideo-player').attr('id');
//console.log($(this));
        player[ytId].stopVideo();
    };
  });
  // <-- o-media-gallery

  // miniPagination, only for mobile
  var miniPagination = function ($slider, cur, max) {
    var item_per_page = 1;
    cur = Math.floor(cur / item_per_page) + 1;
    max = Math.ceil(max / item_per_page);
    $slider.find('.mini-pagination').html(cur + '/' + max);
  }

  // 360 video, iframe calculations
  var init360Video = function () {
    var item360 = mgSlider.closest('.m-media-gallery').find('.media-gallery-item--360');
    var iframe = item360.find('iframe');
    var item360Index = item360.closest('.slick-slide').data('slick-index');
    var icon360 = mgSlider.closest('.m-media-gallery').find('.media-gallery-360-icon');
    var firstMediaGalleryItem = mgSlider.find('.media-gallery-item').eq(0);
    firstMediaGalleryItem.prepend(icon360);
    if (!(firstMediaGalleryItem.hasClass('media-gallery-item--video') || firstMediaGalleryItem.hasClass('media-gallery-item--360'))) {
      icon360.removeClass('hidden');
    }
    icon360.on('click', function () {
      mgSlider.slick('slickGoTo', item360Index);
    });

    iframe.each(function (index, el) {
      // object
      var object = 'null';
      var src = $(this).data('src');

      if (src) {
        var srcs = src.split('/');
        if (srcs && srcs.length > 2) {
          object = srcs[srcs.length - 2];
        }
      };

      // get first item
      var mg = $(this).closest('.m-media-gallery').find('.aspect-content');
      var mgH = mg.height();
      var mgW = mg.width();

      var iframeScaleFactor = .95;
      var iframeContentScaleFactor = .9;

      var iframeWidth = Math.floor(mgW * iframeScaleFactor);
      var iframeHeight = Math.floor(mgH * iframeScaleFactor);
      var iframeContentWidth = Math.floor(mgW * iframeContentScaleFactor);
      var iframeContentHeight = Math.floor(mgH * iframeContentScaleFactor);

      iframe.css({
        'height': iframeHeight + 'px'
      });

      // url pattern
      var iframeSrc = '';

      if (typeof $(this).data('src-player') !== 'undefined') {
        var src_player = $(this).data('src-player');
        iframeSrc += src_player + '?object=' + object;
      } else {
        iframeSrc += 'https://360.bosch-pt.com/bi/de/360/index.html?object=' + object;
      };
      iframeSrc += '&shadow=0&background=0&width=' + iframeContentWidth + '&height=' + iframeContentHeight;

      iframe.prop('src', iframeSrc);
    });
  };

  // Panzoom initialisation
  var initZoomOnCurrentSlide = function (currentSlide) {
    // hide media-gallery-controls on e.g. video and 360
    var hasNoZoom = wSectionJqElm.find('.media-gallery-slider .media-gallery-item').eq(currentSlide).hasClass('media-gallery-item-nozoom');
    if (hasNoZoom) {
      wSectionJqElm.find('.media-gallery-controls').addClass('hidden');
    } else {
      wSectionJqElm.find('.media-gallery-controls').removeClass('hidden');
    };

    // reset all panzoom within section
    wSectionJqElm.find('.media-gallery-slider .media-gallery-item .panzoom').panzoom('reset');
    // destroy all panzoom within section
    wSectionJqElm.find('.media-gallery-slider .media-gallery-item .panzoom').panzoom('destroy');

    var curSlide = wSectionJqElm.find('.media-gallery-slider .media-gallery-item').eq(currentSlide);

    var zoomIn = wSectionJqElm.find('.btn-zoomin');
    var zoomOut = wSectionJqElm.find('.btn-zoomout');

    curSlide.find('.panzoom').panzoom({
      $zoomIn: zoomIn,
      $zoomOut: zoomOut,
      startTransform: 'scale(1)',
      maxScale: 4,
      increment: 0.5,
      minScale: 1,
      cursor: 'move',
      panOnlyWhenZoomed: true,
      duration: 200,
      easing: 'ease-in-out',
      contain: 'invert',
      zoom: true
    });

    // reset zoom on carousel slide
    var buttons = wSectionJqElm.find('.slick-arrow');
    buttons.on('click', function () {
      curSlide.panzoom('reset');
    });
  };
  // init panzoom on first slide item
  initZoomOnCurrentSlide(0);
  // Remove display:none from molecule
  mgSlider.closest('.m-media-gallery').show();

  // ###### Init Slick Slider ######
  mgSlider.on('init', function (event, slick, currentSlide, nextSlide) {
    var $slider = slick.$slider;

    $slider.find('.media-gallery-item').wrapInner('<div class="wrap"><div class="aspect-content"></div></div>');
    $slider.prepend('<div class="mini-pagination"></div>');
    miniPagination($slider, 0, slick.slideCount);
    init360Video();

    // Hack for gallery inside table cell
    var wrapper = $slider.closest('.m-datatable__inner');
    if (wrapper.length > 0) {
      debounceTimeout = setTimeout(function () {
        var wrapper_height = wrapper.height();
        $slider.closest('.m-datatable__outer').height(wrapper_height);
      }, 0);
    }

    $(window).trigger('init:datatable');
  });

  mgSlider.slick({
    touchThreshold: 15,
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: true,
    asNavFor: mgSliderNav,
    lazyLoad: 'ondemand',
    infinite: false,
    swipe: false,
    dots: false,
    responsive: [{
      breakpoint: 992,
      settings: {
        swipe: true,
        arrows: false
      }
    },
    {
      breakpoint: 768,
      settings: {
        swipe: true,
        arrows: false
      }
    }
    ]
  });

  mgSlider
    .on('beforeChange', function (event, slick, currentSlide, nextSlide) {
      var slide = $(slick.$slides.get(currentSlide));
      var slideVideo = slide.find('.video-player');
      // cliplister method
      if (slideVideo.length > 0 && slideVideo[0].api) {
        slideVideo[0].api.pause();
      }
      // youtube method
      if ($('.slick-active .ytvideo-player').length) {
        var ytId = $('.slick-active .yt-video .ytvideo-player').attr('id');
// console.log(ytId);
        player[ytId].pauseVideo();
      };
    })
    .on('afterChange', function (event, slick, currentSlide, nextSlide) {
      var $slider = slick.$slider;
      miniPagination($slider, currentSlide, slick.slideCount);
      initZoomOnCurrentSlide(currentSlide);
    });


  // ###### Slider Thumbnail navigation ######
  mgSliderNav.on('init', function (event, slick, currentSlide, nextSlide) {
    slick.$slider.find('.media-gallery-item').wrapInner('<div class="wrap"></div>');
  });

  mgSliderNav.slick({
    slidesToScroll: 1,
    asNavFor: mgSlider,
    dots: false,
    centerMode: false,
    focusOnSelect: true,
    infinite: false,
    variableWidth: true,
    responsive: [{
      breakpoint: 1025,
      settings: {
        slidesToScroll: 1
      }
    },
    {
      breakpoint: 768,
      settings: {
        slidesToScroll: 1
      }
    }
    ]
  });
};