var $activeSlickImg = '.slick-slide img';
var $slickContainer = '.main-img-slider';
var $clickSlick = '.slick-slide';

var initPhotoSwipeFromDOM = function() {
    var $pswp = $('.pswp')[0];
    var $psDatas = $('.photoSwipeDatas');
    var image = [];  

    $psDatas.each( function() {
        var $pics     = $(this),
            getItems = function() {
                var items = [];
                $pics.find('a').each(function() {
                    var $href   = $(this).attr('href'),
                        $size   = $(this).data('size').split('x'),
                        $width  = $size[0],
                        $height = $size[1];

                    var item = {
                        src : $href,
                        w   : $width,
                        h   : $height
                    }

                    items.push(item);
                });
                return items;
            }

        var items = getItems();
    
        console.log('items:' + JSON.stringify(items, null, 2));    
      
        $.each(items, function(index, value) {
            image[index]     = new Image();
            image[index].src = value['src'];
        });

        $($slickContainer).on('click', $clickSlick, function(event) {
            event.preventDefault();
            
            var $index = $(this).index();
            var options = {
                index: $index,
				
			 closeOnScroll: false,
			 closeEl: true,
     		 captionEl: true,
     		 fullscreenEl: false,
    		  zoomEl: true,
    		  shareEl: false,
    		  counterEl: false,
    		  arrowEl: true,
    		  preloaderEl: true,
			  
               // bgOpacity: 0.7,
                showHideOpacity: false,              
                getThumbBoundsFn: function(index) {
                  var thumbnail = document.querySelectorAll($activeSlickImg)[index];
									var activeBigPicRatio = items[index].w / items[index].h;
                  var pageYScroll = window.pageYOffset || document.documentElement.scrollTop; 
                  var rect = thumbnail.getBoundingClientRect();							
									var offsetY = (rect.height - (rect.height / activeBigPicRatio)) / 2;									
                  return {x:rect.left, y:rect.top + pageYScroll + offsetY, w:rect.width};
                },
                getDoubleTapZoom: function(isMouseClick, item) {
                    if(isMouseClick) {
                        return 1;
                    } else {
                        return item.initialZoomLevel < 0.7 ? 1 : 1.5;
                    }
                }
            }
            
            var photoSwipe = new PhotoSwipe($pswp, PhotoSwipeUI_Default, items, options);
            photoSwipe.init();
																	     
            var psIndex = photoSwipe.getCurrentIndex();
            var psIndexSlick = psIndex;
            photoSwipe.listen('afterChange', function() { 
              var psIndex = photoSwipe.getCurrentIndex();
              var psIndexSlick = psIndex;
              // console.log(psIndexSlick);
              $($slickContainer).slick( "slickGoTo", psIndexSlick); 
            });
        });
     

    });
};


  // execute above function
  $($slickContainer).on("init", function (event, slick) {
    //console.log('slcik init');    
    initPhotoSwipeFromDOM();
  });
    
  // Main/Product image slider for product page
  $($slickContainer).slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  infinite: true,
  arrows: true,
  fade: true,
  speed: 300,
  lazyLoad: 'ondemand',
  asNavFor: '.thumb-nav',
  //prevArrow: '<div class="slick-prev"><span class="sr-text">Previous</span></div>',
  //nextArrow: '<div class="slick-next"><span class="sr-text">Next</span></div>'
  responsive: [
    {
      breakpoint: 768,
      settings: {
        
        dots: true
      }
    }
  ]
});
  // Thumbnail/alternates slider for product page
  $('.thumb-nav').slick({
  //vertical: true,
  slidesToShow: 5,
  //slidesToScroll: 1,
  infinite: true,
 // centerPadding: '5px',
  asNavFor: $slickContainer,
  dots: false,
  //centerMode: true,
  draggable: true,
  speed:200,
  focusOnSelect: true,
  //prevArrow: '<div class="slick-prev"><span class="sr-text">Previous</span></div>',
  //nextArrow: '<div class="slick-next"><span class="sr-text">Next</span></div>' 
  });

  //keeps thumbnails active when changing main image, via mouse/touch drag/swipe
  $($slickContainer).on('afterChange', function(event, slick, currentSlide, nextSlide){
    //remove all active class
    $('.thumb-nav .slick-slide').removeClass('slick-current');
    //set active class for current slide
    $('.thumb-nav .slick-slide:not(.slick-cloned)').eq(currentSlide).addClass('slick-current');  
  });