<div id="mobile-product" class="sixcol">
    <div class="flexslider">
      <ul class="slides">    
        {% for image in product.images %}
        <li><img src="{{ image.src | product_img_url: '1024x1024' }}" alt="{{ image.alt | escape }}"></li>
        {% endfor %}      
      </ul>
    </div>  
<script type="text/javascript">
$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide",
    directionNav: true
  });
});	
</script>
</div>   


<div id="product-description" class="sixcol last">
  
	<h1>{{ product.title | escape }}</h1>

    <p id="product-price">
      {% if product.compare_at_price > product.price %}
      <span class="product-price" itemprop="price">{{ product.price | money }}</span>&nbsp;<span class="was">{{ product.compare_at_price_max | money }}</span>
      {% else %}
      <span class="product-price" itemprop="price">{{ product.price | money }}</span>
      {% endif %}
    </p>  
    		
    <form action="/cart/add" method="post" id="{{ product.id }}" class="clearfix" data-money-format="{{ shop.money_format }}" data-option-index="{{ option_index }}" id="product-form-{{ product.id }}">
     {% if product.available %} 
     {% if product.options.size > 1 %}
          <select id="product-select-{{ product.id }}" name='id'>
            {% for variant in product.variants %}
                    {% if variant.available %}
                        <option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
                    {% endif %}
            {% endfor %}        
          </select>
      {% elsif product.options.size == 1 and product.variants.size > 1 %}
          <select id="product-select-{{ product.id }}" name='id'>
            {% for variant in product.variants %}
                    {% if variant.available %}
                        <option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
                    {% endif %}
            {% endfor %}   
          </select>
            {% else %}
            <div class="what-is-it">
                {% if product.options.first != 'Title' %}
                <label>{{ product.options.first }}:</label>{% for variant in product.variants %}<span class="it-is">{{ variant.option1 | escape }}</span>{% endfor %}
                {% endif %}
            </div>
                <input  type="hidden" id="{{ variant.id }}" name="id" value="{{ product.variants[0].id }}" />
            {% endif %}
              <input type="submit" name="button" id="add" value="Add to Cart" />      
      {% else %}
      
      <div class="sorry">
            This product is temporarily unavailable.
      </div>
      {% endif %}
    </form>


<script type="text/javascript">
 // <![CDATA[  
  var selectCallback = function(variant, selector) {

    if (variant && variant.available) {
      // selected a valid variant that is available.
      jQuery('#add').removeClass('disabled').removeAttr('disabled').val('Add to Cart').fadeTo(200,1); // remove unavailable class from add-to-cart button, and re-enable button

      if ( variant.compare_at_price > variant.price ) {
        jQuery('#product-price').html('<span class="now">'+ Shopify.formatMoney(variant.price, "{{ shop.money_format }}") +'</span>'+'&nbsp;was&nbsp;<span class="was"> '+Shopify.formatMoney(variant.compare_at_price, "{{ shop.money_format }}")+ '</span>');  // update price field
      } else {
        jQuery('#product-price').html('<span class="product-price">'+ Shopify.formatMoney(variant.price, "{{ shop.money_format }}") + '</span>' );  // update price field
      }
    } else {
      // variant doesn't exist or is sold out
      var message = variant ? "Sold Out" : "Unavailable";  
      jQuery('#add').val(message).addClass('disabled').attr('disabled', 'disabled').fadeTo(200,0.5);      // set add-to-cart button to unavailable class and disable button 
    }
  };
    new Shopify.OptionSelectors("product-select-{{ product.id }}", { product: {{ product | json }}, onVariantSelected: selectCallback });
 $('.single-option-selector').customSelect();
// Auto-select first available variant on page load.
  {% assign found_one_in_stock = false %}
  {% for variant in product.variants %}
    {% if variant.available and found_one_in_stock == false %}
      {% assign found_one_in_stock = true %}
      {% for option in product.options %}
      jQuery('.single-option-selector:eq({{ forloop.index0 }})').val({{ variant.options[forloop.index0] | json }}).trigger('change');
      
      {% endfor %}
    {% endif %}
  {% endfor %}
// ]]>
</script>

    <div class="desc">
        <div id="soc">
        {% include 'social' with product %}
        </div>
        <p>{{ product.description }}</p>
      			{% if settings.show_tabs %}
                <ul class="accordion">
            		{% unless settings.tab1 == blank %}
        			<li id="two" class="size">
        				<a href="#two"><h4>{{ settings.tab1_title }}</h4></a>
        				<ul class="sub-menu">					
        					<li><p>{{ settings.tab1 }}</p></li>
        				</ul>
        			</li>
                    {% endunless %}
        			{% unless settings.tab2 == blank %}
        			<li id="three" class="delivery">
        				<a href="#three"><h4>{{ settings.tab2_title }}</h4></a>
        				<ul class="sub-menu">
        					<li><p>{{ settings.tab2 }}</p></li>
        				</ul>
        			</li>
                    {% endunless %}
        			{% unless settings.tab3 == blank %}
        			<li id="four" class="returns">
        				<a href="#four"><h4>{{ settings.tab3_title }}</h4></a>
        				<ul class="sub-menu">					
        					<li><p>{{ settings.tab3 }}</p></li>
        				</ul>
        			</li>
                    {% endunless %}	
                    {% if settings.show_related_products %}
                    <li id="five" class="returns">
                      <a href="#five"><h4>{{ settings.related_prod_title }}</h4></a>
                        <ul class="sub-menu">
                        <li>{% include 'related-products' %}</li>
                        </ul>
                    </li>
                    {% endif %}

        		</ul>
        
        
        <script type="text/javascript">
        $(document).ready(function() {
        // Store variables			
        var accordion_head = $('.accordion > li > a'),
        	accordion_body = $('.accordion li > .sub-menu');
        // Click function
        accordion_head.on('click', function(event) {
        	// Disable header links				
        	event.preventDefault();
        	// Show and hide the tabs on click
        	if ($(this).attr('class') != 'active'){
        		accordion_body.slideUp('normal');
        		$(this).next().stop(true,true).slideToggle('normal');
        		accordion_head.removeClass('active');
        		$(this).addClass('active');
            } else {
                accordion_body.slideUp('normal');
                accordion_head.removeClass('active');
        	}
        });
        });
      </script>        	{% endif %}
    </div>
</div>

<div class="clear"></div>


