{% comment %}
  Set the extension of your color files below. Use 'png', 'jpeg', 'jpg' or 'gif'.
{% endcomment %}

{% assign file_extension = 'png' %}

{% if swatch == blank %}
  <div class="swatch error">
    <p>You must include the snippet swatch.liquid with the name of a product option.</p> 
    <p>Use: <code>{% raw %}{% include 'swatch' with 'name of your product option here' %}{% endraw %}</code></p>
    <p>Example: <code>{% raw %}{% include 'swatch' with 'Color' %}{% endraw %}</code></p>
  </div>
{% else %}

  {% 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 %}

      {% if template contains 'product' %}
      <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>
      {% endif %}

      {% comment %}<script>$(window).load(function() { $('.selector-wrapper:eq({{ option_index }})').hide(); });</script>{% endcomment %}

      {% assign downcased_option = swatch | downcase %}
      {% if downcased_option contains 'color' or downcased_option contains 'colour' %}
        {% assign is_color = true %}
      {% endif %}

    {% endif %}
  {% endfor %}

  {% unless found_option %}

  {% else %}
    <div class="swatch {{swatch | downcase}} clearfix" data-option-index="{{ option_index }}">
      <div class="header">{{ swatch }}</div>
      
      {% assign values = '' %}
      {% for variant in product.variants %}
        {% 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 {% if is_color %}color {% endif %}{{ value | handle }} {% if variant.available %}available{% else %}soldout{% endif %}">
            {% if is_color %}
              <div class="tooltip">{{ value }}</div>
            {% endif %}
            
            <input id="swatch-{{ option_index }}-{{ value | handle }}" type="radio" name="option-{{ option_index }}" value="{{ value | escape }}"{% unless variant.available %}disabled{% endunless %} />
            
            {% if is_color %}
              <label for="swatch-{{ option_index }}-{{ value | handle }}" style="{% if section.settings.swatches_color_image %}background-image: url({{ variant.image.src | product_img_url: '100x' }}){% else %}background-color: {{ value | split: ' ' | last | handle }}; background-image: url({{ value | handle | append: '.' | append: file_extension | asset_url }}){% endif %}">
                <img class="crossed-out" src="{{ 'soldout.png' | asset_url }}" alt="" />
              </label>
            {% else %}
              <label for="swatch-{{ option_index }}-{{ value | handle }}">
                {{ value }}
                <img class="crossed-out" src="{{ 'soldout.png' | asset_url }}" alt="" />
              </label>
            {% endif %}
          </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>

  {% endunless %}

{% endif %}