{% if settings.message %}
<div class="container">
    <div class="row">
        <div id="message" class="twelvecol">
            {{ settings.message-text }}
        </div>
    </div>
</div>
{% endif %}

<div class="container">
    <div class="row pad">
        <div class="flexslider loading">
            <ul class="slides">
                <li><a href="{{ settings.slide1_url }}"><img src="{{ 'slide1.jpg' | asset_url }}" alt="{{shop.name}}" /></a></li>
                {% if settings.slide-2-check %}<li><a href="{{ settings.slide2_url }}"><img src="{{ 'slide2.jpg' | asset_url }}" alt="{{ settings.slide1_alt }}" /></a></li>{% endif %}
                {% if settings.slide-3-check %}<li><a href="{{ settings.slide3_url }}"><img src="{{ 'slide3.jpg' | asset_url }}" alt="{{ settings.slide2_alt }}" /></a></li>{% endif %}
                {% if settings.slide-4-check %}<li><a href="{{ settings.slide4_url }}"><img src="{{ 'slide4.jpg' | asset_url }}" alt="{{ settings.slide3_alt }}" /></a></li>{% endif %}
                {% if settings.slide-5-check %}<li><a href="{{ settings.slide5_url }}"><img src="{{ 'slide5.jpg' | asset_url }}" alt="{{ settings.slide5_alt }}" /></a></li>{% endif %}
                {% if settings.slide-6-check %}<li><a href="{{ settings.slide6_url }}"><img src="{{ 'slide6.jpg' | asset_url }}" alt="{{ settings.slide6_alt }}" /></a></li>{% endif %}
                {% if settings.slide-7-check %}<li><a href="{{ settings.slide7_url }}"><img src="{{ 'slide7.jpg' | asset_url }}" alt="{{ settings.slide7_alt }}" /></a></li>{% endif %}
                {% if settings.slide-8-check %}<li><a href="{{ settings.slide8_url }}"><img src="{{ 'slide8.jpg' | asset_url }}" alt="{{ settings.slide8_alt }}" /></a></li>{% endif %}
                {% if settings.slide-9-check %}<li><a href="{{ settings.slide9_url }}"><img src="{{ 'slide9.jpg' | asset_url }}" alt="{{ settings.slide9_alt }}" /></a></li>{% endif %}
                {% if settings.slide-10-check %}<li><a href="{{ settings.slide10_url }}"><img src="{{ 'slide10.jpg' | asset_url }}" alt="{{ settings.slide10_alt }}" /></a></li>{% endif %}           
            </ul>
        </div>
    </div>
</div>

<script type="text/javascript">
$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide",
    directionNav: true,
     start: function(slider) {
            slider.removeClass('loading');
    }
  });
});
</script>

<div class="clear"></div>
{% if settings.promo %}
<div id="promo" class="container">
    <div class="row">
        <ul id="promo-boxes" class="twelvecol">
            <li class="sixcol pad">
              <a href="{{ settings.leftlink }}"><img src="{{ 'leftpromo.jpg' | asset_url }}" alt="{{ settings.promo1_alt }}"></a>
            </li>
            <li class="sixcol pad last">
              <a href="{{ settings.rightlink }}"><img src="{{ 'rightpromo.jpg' | asset_url }}" alt="{{ settings.promo3_alt }}"></a>
            </li>
		</ul>
    </div>
</div>

<div class="clear"></div>
{% endif %}
{% if settings.homepage-products %}
<div id="homepage-products" class="container">
    <div class="pad row">
            <h2>{{ settings.homepage-collection-title }}</h2>
        <ul id="collection" class="twelvecol">
            {% for product in collections.[settings.homepage-collection].products limit: settings.homepage-product-limit %}
            <li class="product threecol{% cycle ' first', '', '', ' last' %}" data-alpha="{{ product.title }}" data-price="{{ product.price }}">     
                <a href="{{ product.url | within: collection }}">  
                    <img src="{{ product.images[0] | product_img_url: 'large' }}" alt="{{ product.title | escape }}" />
                </a>
                {% if product.price < product.compare_at_price %}<div class="sale"></div>{% endif %}
                    {% for col in product.collections %}
                        {% if col.handle == 'new' %}
                            <div class="new"></div>
                        {% endif %}
                    {% endfor %}                  
                <div id="product-info"> 
                    <a href="{{ product.url | within: collection }}"> 
                        {% if settings.show-vendor %}<p>{{ product.vendor }}</p>{% endif %}
                        <h3>{{ product.title | truncate: 70 }}</h3>
                    </a>
                        <div class="price">{% if product.price < product.compare_at_price %}<span class="onsale">{{ product.price | money }}</span><span class="was">{{ product.compare_at_price | money }}{% else %}{{ product.price | money }}{% endif %}</div>
                </div>
            </li>
            {% endfor %}
        </ul>
    </div>
</div>

<div class="clear"></div>
{% endif %}

{% if settings.lower-promo %}
<div id="promo" class="container">
    <div class="row">
        <ul id="promo-boxes" class="twelvecol">
            <li class="fourcol pad">
              <a href="{{ settings.lower-leftlink }}"><img src="{{ 'lower-leftpromo.jpg' | asset_url }}" alt="{{ settings.lower-promo1_alt }}"></a>
            </li>
            <li class="fourcol pad">
              <a href="{{ settings.lower-middlelink }}"><img src="{{ 'lower-middlepromo.jpg' | asset_url }}" alt="{{ settings.lower-promo2_alt }}"></a>
            </li>
            <li class="fourcol pad last">
              <a href="{{ settings.lower-rightlink }}"><img src="{{ 'lower-rightpromo.jpg' | asset_url }}" alt="{{ settings.lower-promo3_alt }}"></a>
            </li>
    	</ul>
    </div>
</div>

<div class="clear"></div>
{% endif %}
{% if settings.homepage-articles %}
<div id="homepage-articles" class="container">
    <div class="pad row">
        <ul class="twelvecol">
        <h2>Latest Posts</h2>
            {% for article in blogs.[settings.homepage-blog].articles limit: 3 %}
            <li class="fourcol{% cycle '', '', ' last' %}">
                <a href="{{ article.url }}"><h4>{{ article.title }}</h4></a>
                    <div id="homepage-content" class="{% if article.excerpt != blank %}nine columns{% else %}twelve columns{% endif %}">
                        <small>{{ article.published_at | date: "%A %b %d %Y" }}</small>
                        <p>{{ article.content | strip_html | truncatewords: 30 }}</p>
                    </div>
            </li>
            {% endfor %}
		</ul>
    </div>
</div>
{% endif %}