////////////////////////////////// VAR: variables we will need
var nr_items = 20;
var card_width_closed = 200;
var card_width_open = 600;
var scroller_width = nr_items*card_width_closed;
gsap.registerPlugin(ScrollTrigger);
let scroller;
let horizontalFactor = 1;

////////////////////////////////// DOM: add some html cards to use as data
for(var i=0;i<nr_items;i++){
  var html = 
      `<div id="card-${i+1}" class="card" data-card-nr="${i+1}" data-state="closed" style="width:${card_width_closed}px;">`+
        `card ${i+1}<a class="expand-btn">Open/Close</a>`+
      `</div>`;
  $('#scroll-container #cards').append(html);
}


////////////////////////////////// INIT : run the function to get things started
refreshScroller();


///////////////////////////////// FUNC: Create the scroll control and refresh it when container width changes
function refreshScroller(card_id) {
  
  
  
  // remember the current scroll position:
  let scrollPosition = window.pageYOffset;
  
  // destroy the current scroller control:
  if (scroller) { scroller.scrollTrigger.kill(); }
  
  // work out what the new width of the scroll container should be using attr set on each card:
  var new_width = 0;
  $('.card').each(function(){
    
    if( $(this).attr('data-state') == 'closed'){ new_width = new_width + card_width_closed}
    if( $(this).attr('data-state') == 'open'){ new_width = new_width + card_width_open}
    
  });
  
  // update the scroll container to the new length
  scroller_width = new_width;
  $('#scroll-container').width(scroller_width);
  
  // add the scroll control again:
  scroller = gsap.to("#scroll-container", {
    xPercent: -100,
    x: () => innerWidth,
    ease: "none",
    scrollTrigger: {
      trigger: "#scroll-container",
      start: "bottom bottom",
      end: () => "+=" + scroller_width + "px",
      scrub: true,
      pin: true,
      invalidateOnRefresh: true,
      // for performance reasons, calculate the horizontalFactor only when the ScrollTrigger refreshes
      onRefresh: self => horizontalFactor = (self.end - self.start) / (scroller_width - innerWidth)
     // onRefresh: () => console.log('scrolltrigger Refreshed')
    }
  });
  
  // move the scroller to the previous position:
  scroller.scrollTrigger.scroll(scrollPosition);
  
}


///////////////////////////////// EVENT LISTENERS


/////////// BTN: to simulate anchor tags fwding to specific card */
$('.anchor-tag-btn').on('click',function(e){
  
  e.preventDefault();
  
  // we'll pretend we are going to card 10:
  var el = $('#card-10');
  var pos_of_card = el.position().left * horizontalFactor;
  console.log(`pos_of_card: ${Math.floor(pos_of_card)} : container_width: ${scroller_width}`, "ratio", horizontalFactor);
  scroller.scrollTrigger.scroll(pos_of_card);
  
  //////////// some extra check code:
  // lets loop thro and calculate the pos instead of using .position
  var loop_pos = 0;
  $('.card').each(function(){

    loop_pos = loop_pos + $(this).outerWidth();
    console.log(`${$(this).attr('id')} : this width: ${$(this).outerWidth()} = loop_pos :${loop_pos}`);
    if ( parseInt($(this).attr('data-card-nr')) == 9 ) { 
      return false;
      console.log('------------ exiting loop');
    }
  });
  // add a listener so we can see the actual scroll pos as we scroll to verify the scroller moved to the correct pixel value:
  window.addEventListener("scroll", event => {
     console.log(window.pageYOffset);
  });
  
});


/////////// BTN: open/close a single card */
$('.expand-btn').on('click',function(e){
  
  e.preventDefault();
  
  var state = $(this).parent().attr('data-state');
  var animate_width = card_width_open;
  
  // update the attr on the DOM element and set the width to animate:
  if( state == 'closed' ){
    $(this).parent().attr('data-state','open');
    animate_width = card_width_open;
  } else {
    $(this).parent().attr('data-state','closed');
    animate_width = card_width_closed;
  }
  
  // do the animation:
  refreshScroller();
  gsap.to($(this).parent(),{duration:0.3,width:animate_width});

});


/////////// BTN: open all the cards at once
$('.open-all-cards-btn').on('click',function(e){
  
  e.preventDefault();
  
  // update the attr on all the DOM elements:
  $('.card').each(function(){ $(this).attr('data-state','open');  });
  
  // do the animation:
  refreshScroller();
  var animate_all_open = gsap.timeline();
  $('.card').each(function(){ 
    animate_all_open.to($(this),{duration:0.3,width:card_width_open},"-=0.2"); 
  });
  
});


/////////// BTN: close all the cards at once
$('.close-all-cards-btn').on('click',function(e){
  e.preventDefault();
  
  // update the attr on all the DOM elements:
  $('.card').each(function(){ $(this).attr('data-state','closed'); });
  
  // do the animation:
  refreshScroller();
  var animate_all_closed = gsap.timeline();
  $('.card').each(function(){ 
    animate_all_closed.to($(this),{duration:0.3,width:card_width_closed},"-=0.2"); 
  });
  
});