{% assign section_id_wrap = '' %}
{% if section_id %}

	{% assign section_id_wrap = '-' | append: section_id  %}
{% endif %}
{% assign optionSize = product.options | size  %}
<script>

</script>
{%if varation_type == 'buttons' or varation_type == 'radio' or varation_type == 'radio_price'%}
  {{ 'variant_selection.js' | asset_url | script_tag }}

<script>
  
  {%if varation_type == 'radio_price' %}
  	var show_display_varent = true;
  {%else%}
  	var show_display_varent = false;
  {% endif %}
  
  var selectCallback = function(variant, selector) {
    timber.productPage({
      prod_id:"{{ product.id | append:  section_id_wrap }}",
      money_format: '{{ shop.money_format }}',
      variant: variant,
      selector: selector
    });

    clearInterval(window.buttonInterval);
  };
  
  jQuery(function($) {
    new Shopify.OptionSelectorsRadio('ProductSelect_{{ product.id }}{{ section_id_wrap }}', {
      product: {{ product | json }},
      onVariantSelected: selectCallback,
      enableHistoryState: true
    });
  
    
    // Add label if only one product option and it isn't 'Title'. Could be 'Size'.
    {% if product.options.size == 1 and product.options.first != 'Title' %}
      $('#ProductSelect_{{ product.id }}{{ section_id_wrap }}').parent().find('.radio-wrapper:eq(0)').prepend('<label for="ProductSelect-option-0" class="single-option-radio__label">{{ product.options.first | escape }}</label>');
    {% endif %}
  
    // Hide drop-down selectors if we only have 1 variant and its title contains 'Default'.
    {% if product.variants.size == 1 and product.variants.first.title contains 'Default' %}
      //$('.selector-wrapper').hide();
    {% endif %}
    
    {% if product.variants.first.title contains 'Default' %}
      $('#ProductSelect_{{ product.id }}{{ section_id_wrap }}').parent().find('.radio-wrapper').hide();
    {% endif %}
  });
  
  
  if($('#ProductSelect_Bottom').length){
  
  
  jQuery(function($) {
    new Shopify.OptionSelectorsRadio('ProductSelect_Bottom', {
      product: {{ product | json }},
      onVariantSelected: selectCallback,
      enableHistoryState: true
    });
  
    // Add label if only one product option and it isn't 'Title'. Could be 'Size'.
    {% if product.options.first != 'Title' %}
      $('#ProductSelect_Bottom').parent().find('.radio-wrapper:eq(0)').prepend('<label for="ProductSelect-option-0" class="single-option-radio__label">{{ product.options.first | escape }}</label>');
    {% endif %}
  
    // Hide drop-down selectors if we only have 1 variant and its title contains 'Default'.
    
  });
  }
</script>
{%else%}
{{ 'option_selection.js' | asset_url | script_tag }}
<script>
  
  var selectCallback = function(variant, selector) {
    timber.productPageRegular({
      prod_id:"{{ product.id | append:  section_id_wrap }}",
      money_format: '{{ shop.money_format }}',
      variant: variant,
      selector: selector
    });

    clearInterval(window.buttonInterval);
  };
  
  jQuery(function($) {
    new Shopify.OptionSelectors('ProductSelect_{{ product.id }}{{ section_id_wrap }}', {
      product: {{ product | json }},
      onVariantSelected: selectCallback,
      enableHistoryState: true
    });
    // Add label if only one product option and it isn't 'Title'. Could be 'Size'.
    
    {% if product.options.first != 'Title' and optionSize == 1 %}
      $('#ProductSelect_{{ product.id }}{{ section_id_wrap }}').parent().find('.selector-wrapper').prepend('<label for="productSelect-option-0">{{ product.options.first | escape }}</label>');
    {% endif %}
  
    // Hide selectors if we only have 1 variant and its title contains 'Default'.
    {% if product.variants.first.title contains 'Default' %}
      $('#ProductSelect_{{ product.id }}{{ section_id_wrap }}').parent().find('.selector-wrapper').hide();
    {% endif %}
  });
  if($('#ProductSelect_Bottom').length){
  jQuery(function($) {
    new Shopify.OptionSelectors('ProductSelect_Bottom', {
      product: {{ product | json }},
      onVariantSelected: selectCallback,
      enableHistoryState: true
    });

    // Add label if only one product option and it isn't 'Title'. Could be 'Size'.
    {% if product.options.first != 'Title' and optionSize == 1 %}
      	 $('#ProductSelect_Bottom').parent().find('.selector-wrapper').prepend('<label for="productSelect-option-0">{{ product.options.first | escape }}</label>');
    	
    {% endif %}
  
    // Hide selectors if we only have 1 variant and its title contains 'Default'.
    {% if product.variants.first.title contains 'Default' %}
      $('.selector-wrapper').hide();
    {% endif %}
  });
  //$('.discount_price_per').show();
    
    
    
   
  
    $(document).on( "change", ".single-option-selector1", function() {
    //$('.single-option-selector').change(function(){
     // alert('hi');
    	var optionID = $(this).attr('id').replace("ProductSelect-option", "ProductSelect_Bottom-option");
      	//alert($('#'+optionID).length);
      	$('#'+optionID).val($(this).val());
    });
  }
</script>
{%endif%}