{% assign file_extension = 'jpg' %}
{% if swatch != blank %}
{% assign found_option = false %}
{% assign is_color = false %}
{% assign option_index = 0 %}
{% for option in product.options %}
  {% if option == swatch %}
    {% assign found_option = true %}
    {% assign option_index = forloop.index0 %}
    <style>
      label[for="product-select-option-{{ option_index }}"] { display: none; }
      #product-select-option-{{ option_index }} { display: none; }
      #product-select-option-{{ option_index }} + .custom-style-select-box { display: none !important; }
    </style>
    <script>$(window).load(function() { $('.selector-wrapper:eq({{ option_index }})').hide(); });</script>
    {% assign downcased_option = swatch | downcase %}
  {% endif %}
{% endfor %}
{% if found_option %}
<div class="swatch clearfix" data-option-index="{{ option_index }}">
  <div class="header">{{ swatch }}</div>
  {% assign values = '' %}
  {% for variant in product.variants %}
      {% if variant.image %}
        {%- assign img = variant.image | img_url: "large" -%}        
      {% endif %}
    {% assign value = variant.options[option_index] %}
    {% unless values contains value %}
      {% assign values = values | join: ',' %}
      {% assign values = values | append: ',' | append: value %} 
      {% assign values = values | split: ',' %}
      <div data-value="{{ value | escape }}" class="swatch-element {{ value | handle }} {% if variant.available %}available{% else %}soldout{% endif %}">
        <input id="swatch-{{ option_index }}-{{ value | handle }}" type="radio" name="option-{{ option_index }}" value="{{ value | escape }}"{% if forloop.first %} checked{% endif %} {% unless variant.available %}disabled{% endunless %} />
        <label for="swatch-{{ option_index }}-{{ value | handle }}">
          {{ value }}
          <img class="crossed-out" src="{{ 'soldout.png' | asset_url }}" alt="soldout">
        </label>
      </div>
    {% endunless %}
    {% if variant.available %}
    <script>
      jQuery('.swatch[data-option-index="{{ option_index }}"] .{{ value | handle }}').removeClass('soldout').addClass('available').find(':radio').removeAttr('disabled');
    </script>
    {% endif %}
  {% endfor %}
</div>
{% endif %}
{% endif %}