// *** Show & Hide Category Banner Code ***

// Define global strings

const S_FILTER_BY = 'Category'
const S_DYNAMIC_ITEM = '.w-dyn-item'
const S_FILTER_STRING = '[fs-cmsfilter-field = "' + S_FILTER_BY + '"]'

// Define global elements
const $_FILTERS = $('[fs-cmsfilter-element = "filters"]')
const $_FILTERS_FIELDS = $_FILTERS.find( S_FILTER_STRING )
const $_LIST = $('[fs-cmsfilter-element = "list-2"]')
const $_LIST_ITEMS = $_LIST.find( S_FILTER_STRING ).closest( S_DYNAMIC_ITEM )
// const $_RESET_BUTTON = $('[fs-cmsfilter-element = "reset"]')
// const $_CATEGORY_BANNER = $('.category-banner')


// Main function
$_FILTERS_FIELDS.each(function(i) {

   // Define local variables
   var this_parent = $(this).closest( S_DYNAMIC_ITEM )
   var filter_text = $(this).text()
   
   this_parent.click(function() {
   
       $_LIST_ITEMS.hide()
       $_LIST_ITEMS[i].style.display = 'grid'
       
   })
   
}) // End



// *** Scroll Bar Code ***

// Define global strings
const S_W_DYN_ITEM = '.w-dyn-item'

// Define global elements
const $_RAIL = $('.filter_form-block')
const $_FILTER_RESET_BUTTON = $('.filter_reset-button')
const $_FILTER_C_LIST = $('.filter_c-list')
const $_LEFT_BUTTON = $('[click-element = "left"]')
const $_RIGHT_BUTTON = $('[click-element = "right"]')
const $_C_CONTAINER = $('.product-grid')

// Global values
const N_OF_DYN_ITEMS = $_FILTER_C_LIST.find( S_W_DYN_ITEM ).length
var rail_width, item_container_width, dyn_item_width, n_of_visible_items, max_n_of_clicks, what_to_click = 1, space_to_scroll, window_width


// Main function's 
$_RAIL.scroll(function() {

  if (window_width > 767 && window_width < 1919) {
 
    if ( rail_position() <= 0 ) {
   
      $_LEFT_BUTTON.fadeOut(350) 
     
    } else if ( rail_position() >= space_to_scroll - (dyn_item_width - 8) ) {
   
      $_RIGHT_BUTTON.fadeOut(350) 
     
    } else if ( $_LEFT_BUTTON.is(":hidden") || $_RIGHT_BUTTON.is(":hidden") ) { 
   
      $_LEFT_BUTTON.fadeIn(350) $_RIGHT_BUTTON.fadeIn(350)
     
    } 
 
  } 
 
})


function main() {

  $_RIGHT_BUTTON.click(function() {
  
    what_to_click = Math.round( rail_position() / space_to_scroll * max_n_of_clicks ) + 1
    
    if ( what_to_click > max_n_of_clicks ) {
      what_to_click = max_n_of_clicks
    }
    
    // rail_width /
    $_RAIL.animate({
      scrollLeft: dyn_item_width * what_to_click
    }, 350)
           
  })
       
  $_LEFT_BUTTON.click(function() {
  
    what_to_click = Math.round( rail_position() / space_to_scroll * max_n_of_clicks ) - 1
    
    if ( what_to_click < 0 ) {
      what_to_click = 0
    }
    
    // rail_width /
    $_RAIL.animate({
      scrollLeft: dyn_item_width * what_to_click
    }, 350)
           
  })
   
}


// Helper functions

// Rail postion
function rail_position() {

  return $_RAIL.scrollLeft()
   
}

// Global values
function global_values() {

   window_width = $(window).width()
   dyn_item_width = $_FILTER_C_LIST.width() / N_OF_DYN_ITEMS
   rail_width = $_C_CONTAINER.width()
   item_container_width = dyn_item_width * ( N_OF_DYN_ITEMS + 1 )
   n_of_visible_items = Math.round( rail_width / dyn_item_width )
   max_n_of_clicks = 1 + N_OF_DYN_ITEMS - n_of_visible_items
   space_to_scroll = max_n_of_clicks * dyn_item_width
   
   // Elements
   $_LEFT_BUTTON.css({
       opacity: "100%"
   })
   $_LEFT_BUTTON.hide()
   
}

global_values()
$( window ).resize( global_values )


// Call main function
main()

}) // The end.