{% load i18n sekizai_tags %}
{% addtoblock "js" %}<script type="text/javascript" src="{{STATIC_URL}}cms_plugins/js/jquery.min.js"></script>{% endaddtoblock %}
{% addtoblock "js" %}<script type="text/javascript" src="{{STATIC_URL}}cms_plugins/js/jquery.colorbox-min.js"></script>{% endaddtoblock %}
{% addtoblock "js" %}<script type="text/javascript" src="{{STATIC_URL}}cms_plugins/js/bootstrap-carousel.js"></script>{% endaddtoblock %}
{% addtoblock "css" %}<link rel="stylesheet" href="{{STATIC_URL}}cms_plugins/css/colorbox.css">{% endaddtoblock %}
{% addtoblock "css" %}
<style>
.small {
    padding: 10px 5px 10px 5px;
}
</style>
{% endaddtoblock %}
<div class="row">
  <div class="span3">
    <ul class="albums">
      <li class="album-toggle" data-toggle="modal" data-target="#modal-{{object.album_name}}">
        <div>{{ object.album_name }}</div>
        <img class="small-{{object.album_name}}" style="border:1px solid #FFF;" ></li>
    </ul>
  </div>
</div>


<div class="modal" id="modal-{{object.album_name}}" style="display: none;">
  <div class="modal-header">
    <button class="close" data-dismiss="modal">X</button>
      thumbnail description
  </div>

<div class="modal-body">
  <div id="carousel-{{object.album_name}}" class="carousel">
  <div class="carousel-inner-{{object.album_name}}">
  </div>
  <a class="carousel-control left" href="#carousel-{{object.album_name}}" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#carousel-{{object.album_name}}" data-slide="next">&rsaquo;</a>
  </div>
  </div>
</div>
{% addtoblock "js" %}<script type="text/javascript" src="{{STATIC_URL}}cms_plugins/js/loadAlbum.js"></script>{% endaddtoblock %}
{% addtoblock "js" %}
<script type="text/javascript">
//Get the album url here, parse and get the unique-id of Facebook Album
var album_url_{{object.album_name}} = '{{ object.album_url }}',
uid_{{object.album_name}} = album_url_{{object.album_name}}.split('?')[1].split('.')[1],
access_token = '{{ object.access_token }}';
// Ajax Request to Facebook Graph API
var req_url_{{object.album_name}} = 'https://graph.facebook.com/'+uid_{{object.album_name}}+'/photos'+'?access_token='+access_token;
loadAlbum(req_url_{{object.album_name}},'carousel-inner-{{object.album_name}}','small-{{object.album_name}}')
</script>
{% endaddtoblock %}
