{% extends "admin/base_site.html" %}

{% block title %}Simple Medias Manager {{ block.super }}{% endblock %}

{% block extrahead %}{{ block.super }}
<link href="/static/js/colorbox/colorbox.css" type="text/css" media="all" rel="stylesheet" />
<style type="text/css">
#list-image li {
    list-style-type: none;
    float: left;
    margin: 2px 10px;
}
</style>
<script type="text/javascript" src="/static/admin/js/jquery.js"></script>
<script type="text/javascript" src="/static/admin/js/jquery.init.js"></script>
<script type="text/javascript" src="/static/js/colorbox/jquery.colorbox-min.js"></script>
<script type="text/javascript" src="/static/js/colorbox/app.colorbox.js"></script>
{% endblock %}

{% block content %}
    <div id="page">


        <div id="wrapper" role="main">
            <p><a href="/admin/simple_medias_manager/image/add/" class="colorbox-iframe-r">Ajouter une image</a></p>
            <ul id="list-image">
                {% for image in image_list %}
                    <li><a href="#"><img src="{{ image.thumbnail.url }}" alt="{{ image.name }}" rel="{{ image.the_image.url }}" /></a></li>
                {% endfor %}
            </ul>
        </div>


        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="{{ STATIC_URL }}js/libs/jquery-1.7.1.min.js"><\/script>')</script>
        <script type="text/javascript">
            $('document').ready(function(){
                $('#list-image img').click(function(e){
                    window.opener.CKEDITOR.tools.callFunction({{ callback }}, $(this).attr('rel'));
                    window.close();
                });
            });
        </script>
    </div>

{% endblock %}
