{% extends "egonomy_base.html" %}
{% load static %}
{% load i18n %}
{% load thumbnail %}

{% block title %}{% trans "Create or edit a fragment" %}{% endblock %}
{% block css_page %}
    <link rel="stylesheet" href="{% static 'egonomy/lib/jquery-ui/themes/base/minified/jquery-ui.min.css' %}">
    <link rel="stylesheet" href="{% static 'egonomy/lib/tag-it/css/jquery.tagit.css' %}">
{% endblock %}

{% block content %}
            <div class="title-page">
                <h2><a href="{% url 'annotate_picture' image_id=img.id %}">{{ img.metadata.titre|default:_("No title") }}</a> <span class="fs-normal">/ {% if frg_to_modify %}{{ frg_data.title }}{% else %}{% trans 'New fragment' %}{% endif %}</span></h2>
            </div>
            <div class="bar-tools clearfix">
                <ul class="clearfix">
                    <li><a title="{% trans 'Erase the drawing' %}" href="#" class="fs-15 clear-fragment">&times;</a></li>
                    <li><a title="{% trans 'Back to the original drawing' %}" href="#" class="fs-15 reset-fragment">↺</a></li>
                    <!--li>
                        <a class="icon plus" href="#">Ajouter à ma collection</a>
                    </li>
                    <li>
                        <form action="#">
                            <p>
                                <input class="search-form" id="id_search" type="text" placeholder="Romantisme noir">
                            </p>
                        </form>
                    </li-->
                </ul>
            </div>
            <article class="edition">
                <form action="{% url 'save_fragment' %}" method="POST">
                <div class="slideshow box-edition">
                    <div class="image-wrap">
                        <div class="center-image">
                            <div class="image-and-fragment">
                              {% with img.info.image_file as image %}
                              {% if image|is_portrait %}
                               {% thumbnail image "x600" format="PNG" crop="center" as im %}
                                <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}"/>
                               {% empty %}
                                <img src="{% static 'egonomy/img/empty.gif' %}" width="476" height="476" class="placeholder" />
                               {% endthumbnail %}
                              {% else %}
                               {% thumbnail image "600" format="PNG" crop="center" as im %}
                                <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}"/>
                               {% empty %}
                                <img src="{% static 'egonomy/img/empty.gif' %}" width="476" height="476" class="placeholder" />
                               {% endthumbnail %}
                              {% endif %}
                              {% endwith %}
                                <div class="cutout-canvas"></div>
                            </div>
                        </div>
                        <input name="fragment_path" id="fragment_path" type="hidden" class="fragment-path column-half" value="{% if frg_data %}{{ frg_data.coordinates }}{% endif %}" />
                        <input name="image_id" id="image_id" type="hidden" value="{{ img.id }}" />
                        {% if frg_to_modify %}<input name="fragment_pk" id="fragment_pk" type="hidden" value="{{ frg_data.pk }}" />{% endif %}
                        {% csrf_token %}
                    </div>
                    <!--div class="arrow-wrap left-arrow">
                        <a class="arrow" href="#"></a>
                    </div>
                    <div class="arrow-wrap right-arrow">
                        <a class="arrow" href="#"></a>
                    </div>
                    <ul class="share">
                        <li><a title="Partager sur Twitter" href="#" class="tool twitter"></a></li>
                        <li><a title="Partager sur Facebook" href="#" class="tool facebook"></a></li>
                    </ul-->
                </div>
                <div class="info box-edition">
                    <table>
                        <tbody>
                            <tr>
                                <th>{% trans 'Source picture' %}&nbsp;:</th>
                                <td><a href="{% url 'annotate_picture' image_id=img.id %}">{{ img.metadata.titre|default:_("No title") }}</a></td>
                            </tr>
                            <tr>
                                <th>{% trans "Fragment's title" %}&nbsp;:</th>
                                <td><input type="text" placeholder="{% trans "Fragment's title" %}" name="fragment_title" id="fragment_title" {% if frg_data %}value="{{ frg_data.title }}"{% endif %}/></td>
                            </tr>
                            <tr>
                                <th class="va-top">{% trans "Fragment's description" %}&nbsp;:</th>
                                <td><textarea class="fragment-description" name="fragment_description" id="fragment_description">{% if frg_data %}{{ frg_data.description }}{% endif %}</textarea></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="box-edition clearfix">
	                <table>
	                    <tr>
	                        <th class="va-top">{% trans "Fragment's keywords" %}&nbsp;:</th>
	                        <td><input id="user_keywords" name="user_keywords" class="tag-it" type="text" {% if frg_data %}value="{{ frg_data.tags }}"{% endif %}></td>
	                    </tr>
	                    <tr>
	                        <th class="pt-6 va-top">{% trans "Source picture's keywords" %}&nbsp;:</th>
	                        <td class="pt-6">
	                            <ul class="list-key-add list-keywords no-before clearfix">
	                              {% for t in img.metadata.tag_list %}
	                                {% if t != "" %}<li><a data-tag="{{ t }}" class="box-shadow-2" href="#">{{ t }}</a></li>{% endif %}
	                              {% endfor %}
	                            </ul>
	                        </td>
	                    </tr>
	                    <!--tr>
	                        <th class="va-top">{% trans "Senseetive keywords" %}&nbsp;:</th>
	                        <td id="senseetive_holder"><p id="senseetive_click" class="btn inactive">{% trans 'Request keywords from Senseetive API' %}</p></td>
	                    </tr-->
	                </table>
	                <div class="buttons f-right">
	                    <input class="btn" type="submit" value="{% trans 'Save the fragment' %}">
	                </div>
                </div>
                <div class="box-edition">
                    <h3>{% trans "Fragments from this picture" %} :</h3>
                    {% if fragment_list %}
                    <ul class="fullwidth clearfix">
                      {% for fragment in fragment_list %}
                        <li class="subcol subcol-seventh">
                            <a href="{% url 'view_fragment' fragment_pk=fragment.pk  %}">
                            <div class="center-image">
                                <div class="image-and-fragment">
                                 {% include "partial/picture_and_red_fragment.html" %}
                                </div>
                            </div>
                            <h3>{{ fragment.title }}</h3></a>
                            <p>{% trans "Annotated by" %} <strong><a href="{% url 'user_fragments' username=fragment.author %}">{{ fragment.author }}</a></strong></p>
                        </li>
                      {% endfor %}
                    </ul>
                    {% else %}
                    <p class="null">{% trans "No fragment" %}</p>
                    {% endif %}
                </div>
                <div class="box-edition">
                    <h3>Collections liées à cette image :</h3>
                    <p class="null">{% trans "No collection" %}</p>
                </div>
                </form>
                <div id="info_tag" style="display:none;">
                    <p>coucou</p>
                </div>
            </article>
	        <div class="dbpedia-overlay clearfix">
	            <a class="dbpedia-close" href="#">&times;</a>
	            <img class="dbpedia-image" />
	            <h2 class="dbpedia-title"></h2>
	            <p class="dbpedia-abstract"></p>
	            <p class="dbpedia-source"><a href="#" target="_blank">{% trans 'Source&nbsp;: Wikipédia' %}</a></p>
	        </div>
{% endblock %}

{% block js_page %}
    <script type="text/javascript" src="{% static 'egonomy/lib/raphael-min.js' %}"></script>
    <script type="text/javascript" src="{% static 'egonomy/js/cutout.js' %}"></script>
    <script type="text/javascript" src="{% static 'egonomy/lib/jquery-ui/ui/minified/jquery-ui.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'egonomy/lib/tag-it/js/tag-it.min.js' %}"></script>
    <script type="text/javascript">
        // Senseetive api management
        function init_sensitive_click(){
            // Init senseetive api request
            if($("#senseetive_click")){
                $("#senseetive_click").click(function() {
                    var v = $(".fragment-path").val();
                    if(v!="" && v!="MZ" && !$("#senseetive_click").hasClass("loader")){
                        $("#senseetive_click").addClass("loader");
                        var data_obj = { "image":"{{ img.id }}", "path":$("#fragment_path").val() };
                        $.ajax({
                            url: '{% url "senseetive_api" %}',
                            data: data_obj,
                            dataType: "json",
                            success: function(data, status, request){
                                var keywords = data["keywords"];
                                var n = keywords.length;
                                if(n>0){
                                    s = '<div id="tabs" style="height: 320px;"><ul><li><a href="#tabs-1">Mots-clés</a></li><li><a href="#tabs-2">Images</a></li></ul>'
                                        + '<div id="tabs-1" style="overflow-y: scroll; overflow-x: hidden; height: 250px;">'
                                        + '<ul class="list-key-add list-keywords no-before clearfix imgs-over addable-tags">';
                                    var images = data["images"];
                                    var m = images.length;
                                    for(var i=0;i<n;i++){
                                        // We search if images have been tagged with the current tag. 
                                        var img_urls = "";
                                        for(var j=0;j<m;j++){
                                            kws = images[j]["keywords"];
                                            var nb_kws = kws.length;
                                            for(var k=0;k<nb_kws;k++){
                                                if(keywords[i]==kws[k]){
                                                    img_urls += ((img_urls=="") ? "" : ",") + images[j].url_height;
                                                }
                                            }
                                        }
                                        //s += '<li><span class="clickable addable_tag" data="' + img_urls + '">' + keywords[i] + '</span></li>';
                                        s += '<li><a class="box-shadow-2" data-img-urls="' + img_urls + '" data-tag="' + keywords[i] + '" href="#">' + keywords[i] + '</a></li>';
                                    }
                                    s += '</ul></div>'
                                        +'<div id="tabs-2" style="overflow-y: scroll; overflow-x: hidden; height: 250px;">'
                                        +'<ul>';
                                    // Add pictures
                                    for(var i=0;i<m;i++){
                                        s += '<li class="senapi_li"><img src="' + images[i].url_width + '" class="senapi_img" alt="' + images[i].title + '"/>'
                                           + '<span class="senapi_text">' + images[i].title + '</span>'
                                           + '<br/><span class="senapi_tags addable-tags">';
                                        kws = images[i]["keywords"];
                                        var nb_kws = kws.length;
                                        for(var k=0;k<nb_kws;k++){
                                            s += ((k==0) ? "" : ", ") + '<a data-tag="' + kws[k] + '" href="#">' + kws[k] + '</a>';
                                        }
                                        s +='</span></li>';
                                    }
                                    s += '</ul>'
                                        +'</div></div>';
                                    $("#senseetive_holder").html(s);
                                    // Init tabs
                                    $("#tabs").tabs();
                                    // Init tags behaviour
                                    $('.addable-tags a').bind('click', function(e){
							            e.preventDefault();
							            // $('.tag-it') is already initialised
							            $('.tag-it').tagit("createTag", $(this).attr('data-tag'));
							        });
                                    // Functions to show tag's images
                                    $(".imgs-over a").hover(
                                        function(e){
                                            urls = $(this).attr("data-img-urls").split(",");
                                            var s = "";
                                            var n = urls.length;
                                            for(i=0;i<n;i++){
                                                s += '<img src="' + urls[i] + '" alt=""/>';
                                            }
                                            $("#info_tag").html(s);
                                            $("#info_tag").css({'top':e.pageY-110,'right':$(window).width()-e.pageX});
                                            $("#info_tag").show();
                                        },
                                        function(e){
                                            $("#info_tag").hide();
                                        }
                                    );
                                }
                            },
                            error: function(jqXHR, textStatus, errorThrown) {
                                $("#senseetive_holder").html("<strong>ERROR</strong> : " + jqXHR.responseText);
                            }
                        });
                    }
                });
            }
        }
        window.onload = function() {
            // Check if path is not empty ("" or "MZ")
            $(".fragment-path").change(function() {
                if($("#senseetive_holder").children()[0].id!="senseetive_click"){
                    $("#senseetive_holder").html("<p id=\"senseetive_click\" class=\"btn inactive\">{% trans 'Request keywords from Senseetive API' %}</p>");
                    init_sensitive_click();
                }
                var v = $(".fragment-path").val();
                if(v!="" && v!="MZ"){
                    $("#senseetive_click").removeClass("inactive");
                }
                else{
                    $("#senseetive_click").addClass("inactive");
                }
            });
            
            // Init senseetive api request
            init_sensitive_click();
        };
    </script>
{% endblock %}