{% extends "1-col.html" %}

{% block head_title %}{% if page.meta_title %}{{ page.meta_title}}{% else %}FAQs{% endif %}{% endblock %}

{% block meta_description %}{{ page.meta_description }}{% endblock %}

{% block faqs_active %}active{% endblock %}

{% block banner %}
    {% if page.get_banners %}
        <div id="rotator-outer">
            <div id="rotator">
                {% for banner in page.get_banners %}
                    <img src="{{ banner.image.url }}" width="960" height="280" />
                {% endfor %}
            </div>
            <div id="pager"></div>
        </div>
    {% endif %}
{% endblock %}

{% block head_script %}
    <script>
        jQuery(document).ready(function($) {
          var titles = $('.faq-title');
          $('.faq-answer').hide();
          titles.each( function(j) {
              var txt = $(this).html();
              $(this).html( '<a href="#">' + txt + '</a>' );
              $(this).find('a').click( function(e) {
        	  $( '.faq-answer:eq(' + j + ')' ).slideToggle( 200 );
        	  $(this).blur();
        	  e.preventDefault();
              });
          });
        });
    </script>
{% endblock %}

{% block whole_content %}

    {% if page %}
        <h1>{{ page.title }}</h1>
        <h1>Frequently Asked Questions</h1>
        {{ page.content|safe }}
    {% else %}
        <h1>Frequently Asked Questions</h1>
    {% endif %}

    {% for faq in faqs %}
        <div class="faq">
            <h3 class="faq-title"><a href="#">{{ faq.question }}</a></h3>
            <div class="faq-answer" style="display: block;">
                <p>{{ faq.answer|linebreaksbr }}</p>
            </div>
        </div>
    {% endfor %}

{% endblock %}