{% extends "pages/page.html" %}
{% load static mezzanine_tags blog_tags keyword_tags %}

{% block extra_head %}
    <!--Flexslider Stuff-->
    <link rel="stylesheet" href="/static/flexSlider/flexslider.css" type="text/css"
          media="screen"/>
    <script src="/static/flexSlider/demo/js/modernizr.js"></script>
    <!-- FlexSlider Start-->
    <script defer src="/static/flexSlider/jquery.flexslider.js"></script>
    <script defer src="/static/flexSlider/settings.js"></script>

    <!-- Syntax Highlighter -->
    <script type="text/javascript" src="/static/flexSlider/demo/js/shCore.js"></script>
    <script type="text/javascript" src="/static/flexSlider/demo/js/shBrushXml.js"></script>
    <script type="text/javascript" src="/static/flexSlider/demo/js/shBrushJScript.js"></script>

    <!-- Optional FlexSlider Additions -->
    <script src="/static/flexSlider/demo/js/jquery.easing.js"></script>
    <script src="/static/flexSlider/demo/js/jquery.mousewheel.js"></script>
    <script defer src="/static/flexSlider/demo/js/demo.js"></script>

    <!--Caption Centering Stuff-->
    <script type="text/javascript">
        $(document).ready(function () {
            browserWidth = $(window).width();
            $(".flex-caption").css("width", browserWidth);
        });

        $(window).resize(function () {
            browserWidth = $(window).width();
            $(".flex-caption").css("width", browserWidth);
        });
    </script>
    <!-- FlexSlider End-->
{% endblock %}

{% block main_wrapper %}

    <!-- Rotation Start -->
    {% block homerotation %}
        <div id="rotationBox">
            {# for displaying single image, 0 is the first slide #}
            {# <img src="{{ MEDIA_URL }}{{ page.homepage.slides.all.0.image }}" alt="" style="width:100%;"> #}
            <!--http://www.woothemes.com/flexslider/-->
            <div class="flexslider">
                <ul class="slides">
                    {% for slide in page.homepage.slides.all %}
                        <li>
                            <img src="{{ MEDIA_URL }}{{ slide.image }}" alt="Alt text"/>
                            <!--<div class="flex-caption">
                                {# {{ slide.content|richtext_filters|safe }} #}
                            </div>-->
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
		<!-- for static box over the top of slides -->
		<div class="col-xs-10 col-xs-offset-1" id="rotationBttnBox">
			<div class="container">
				<div class="row">
					<!--<div class="homeSectionBoxes col-xs-12 col-sm-6 col-lg-offset-1 col-lg-5">-->
					<div class="homeSectionBoxes col-xs-12 col-sm-offset-4 col-sm-4">
						<!--Info Content Here-->
						{% for blub in page.homepage.blurbs.all|slice:"0:1" %}
                            <div class="homeSectionText col-xs-12">
                                <h3>{{ blub.title }}</h3>
                                <p>{{ blub.content|richtext_filters|safe }}</p>
                            
                            <a href="{{ blub.link }}">
                                <button type="button" class="btn btn-sitecolor btn-lg">{{ blub.linktext }}</button>
                            </a>
							</div>
                        {% endfor %}
						<!--Info Content End-->
                    </div>
                    <!--<div class="homeSectionBoxes col-xs-12 col-sm-6 col-lg-5">-->
                        <!--Local Grown Content Here-->
                        {# {% for blub in page.homepage.blurbs.all|slice:"1:2" %} #}
                        <!--    <div class="homeSectionText col-xs-12">
                                <h3>{{ blub.title }}</h3>
                                <p>{{ blub.content|richtext_filters|safe }}</p>
                            </div>
                            <a href="{{ blub.link }}">
                                <button type="button" class="btn btn-sitecolor btn-lg">{{ blub.linktext }}</button>
                            </a>-->
                        {# {% endfor %} #}
						<!--Local Content End-->
					<!--</div>-->
				</div>
			</div>
		</div>
    {% endblock %}
    <!-- Rotation End -->

    <div class="contentBox">
        <div class="container">
            <!-- Content Start -->

         {% block main %}{{ block.super }}
			<div class="row">
				<div class="hometextBox col-xs-12">
					<!--<h1>{{ page.title }}</h1>-->
					{{ page.homepage.content|richtext_filters|safe }}
				</div>
			</div>
        {% endblock %}
			
            <!-- Content End -->
		</div>
    </div>

    <div class="graycontentBox">
        <div class="container">
            <div class="row">

                <div class="newsBox p7ehc-newsbox col-xs-12 col-sm-6">
                    <h3 class="colortextGreen">News &amp; Updates</h3>

                    <!-- Recent Posts -->
                    {% blog_recent_posts 1 as recent_posts %}
                    {% for post in recent_posts %}
                        <!--News Content Here-->
                        <div class="photoLeft">
                            <img src="{{ MEDIA_URL }}{% thumbnail post.featured_image 228 150 %}" alt="{{ post.title }}"/>
                        </div>
                        <h4>{{ post.title }}</h4>
                        <p>{{ post.description_from_content|safe|truncatewords_html:14 }}</p>
                        <a href="{{ post.get_absolute_url }}">Read More</a>
                        <!--News Content End-->
                    {% endfor %}
                    <!-- /Recent Posts -->
                    <div class="clearfix"></div>
                </div>

                <div class="newsBox p7ehc-newsbox col-xs-12 col-sm-6">
                    <h3 class="colortextGreen">Potential Crops</h3>
                    <!--Crop Content Here-->
                    {% for blub in page.homepage.blurbs.all|slice:"2:3" %}
                        <div class="photoLeft">
                            <img src="{{ MEDIA_URL }}{% thumbnail blub.icon 228 150 %}" alt="{{ blub.title }}"/>
                        </div>
                        <h4>{{ blub.title }}</h4>
                        {{ blub.content|richtext_filters|safe }}
                    {% endfor %}
                    <!--Crop Content End-->
                    <div class="clearfix"></div>
                </div>

            </div>
        </div>
    </div>

{% endblock %}