{% extends "layout.html" %}
{% block body %}
<script type="text/javascript">
//Change active button in navbar

$("document").ready( function(){
  $("li").removeClass("active");
  $("#home").addClass("active");
  
  pages = [];
  i=1;
  $(".image").each( function() {
    pages.push($(this).attr("rel"))
  });


  $(".image").click(function() {
        var image = $(this).attr("rel");
        $('#display').hide();
        $('#display').fadeIn('slow');
        $('#display').attr("src", image);
        return false;
  });

  previous_page = "";
  console.log(pages);
  next_page = pages[1];
  $(function() {
      $("#newer").click(function() {
        if(i < pages.length)
        {
          previous_page = pages[i-1];
          $('#display').hide();
          $('#display').fadeIn('slow');
          $('#display').attr("src", next_page);
          
            i++;
          next_page = pages[i];
         
          
        }
        
        return false;
       });
      $("#older").click(function() {
        if(i >= 2)
        { 
          $('#display').hide();
          $('#display').fadeIn('slow');
          $('#display').attr("src", previous_page);
          
            previous_page = pages[i-3];
            next_page = pages[i-1]
            i--;
         
          
        }
        return false;
       });
    });
});

</script>

<div class="container ">
  <h2>{{thumbs_info.subject}}, {{thumbs_info.datestring}}</h2>
    <ul class="thumbnails">
        <li class="span10">
          <a href="#"  id="image">
              <img id="display" src="{{ url_for('static', filename=main_page_src) }}" alt="">
          </a>
          <ul class="pager">
            <li class="previous">
              <a href="" id="older">&larr; Older</a>
            </li>
            <li class="next">
              <a href="" id="newer">Newer &rarr;</a>
            </li>
          </ul>
        </li>

        <li class="span2">
          {% for thumb in thumbs %}
            <a href="#" rel="{{ url_for('static', filename=thumb.href) }}" class="thumbnail image">
              <img src="{{ url_for('static', filename='mini/' + thumb.src) }}" alt="">
            </a>
          {% endfor %}  
          <ul>
            <h4>Other dates...</h4>
              {% for date in thumbs_info.other_dates %}
                <li><a href="/view/{{thumbs_info.subject}}/{{date }}">{{date }}</a> </li>
              {% endfor %}
          </ul>      
        </li>
        
    </ul>
    

  {% endblock %} 

  <script type="text/javascript">
    $(function() {
      $(".image").click(function() {
        var image = $(this).attr("rel");
        $('#display').hide();
        $('#display').fadeIn('slow');
        $('#display').attr("src", image);
        return false;
       });
    });
  </script>