{% 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 "css" %}<link rel="stylesheet" href="{{STATIC_URL}}cms_plugins/css/colorbox.css">{% endaddtoblock %}
{% addtoblock "css" %}
<style>
.small {
    padding: 10px 5px 10px 5px;
}
</style>
{% 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_url }}',
    uid = album_url.split('?')[1].split('.')[1],
    access_token = '{{ object.access_token }}';

  $(document).ready(function () {
    // Ajax Request to Facebook Graph API
    var req_url = 'https://graph.facebook.com/'+uid+'/photos'+'?access_token=' +access_token;

    $.ajax({
      type: "GET",
      url: req_url,
      dataType:'json',
      success: function(res) {
       generateImg(res);
      },
      error: function() {
        $('.plugin_fbalbum').append('<h2> No valid image response.</h2>');
      }
    });

  //Add image in the placeholder
  var generateImg = function (res) {
      var data = res;
      var len = data.data.length,
      min = data.data[0].images.length - 1,
      image_stack = '',
      small_image_url,
      big_image_url;
      for(i = 0 ; i < len; i++) {
        if (data.data[i].images[min]) {
          small_image_url = data.data[i].images[min].source;
        }
        if (data.data[i].images[1]) {
          big_image_url = data.data[i].images[1].source;
        }
        image_stack += '<a href="' + big_image_url + '" class="group1">' +
        '<img src="' + small_image_url + '" class="small" /></a>';
      }
      $('.plugin_fbalbum').append(image_stack);
      //Add Colorbox affect.
      $(document).ready(function () {
        $('.group1').colorbox({ rel: 'group3', transition: 'fade', width: '75%', height: '75%' });
      });
    }
  };
});
</script>
{% endaddtoblock %}
<div class="plugin_fbalbum">
</div>
