{% extends "egonomy_newbase.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 left">

                    <li><a class="go-to mosaic" href="#"></a></li>

                    <li><a class="go-to search" href="#"></a></li>

                </ul>

                <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">

	                                {% 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>

            </article>

{% 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">';

                                    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 + '" data-tag="' + keywords[i] + '" href="#">' + keywords[i] + '</a></li>';

                                    }

                                    s += '</ul><span id="senseetive_tags" class="right clickable">+ {% trans 'Add all Senseetive keywords to yours' %}</span>'

                                        +'</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">';

                                        kws = images[i]["keywords"];

                                        var nb_kws = kws.length;

                                        for(var k=0;k<nb_kws;k++){

                                            s += ((k==0) ? "" : ", ") + '<span class="clickable addable_tag">' + kws[k] + '</span>';

                                        }

                                        s +='</span></li>';

                                    }

                                    s += '</ul>'

                                        +'</div></div>';

                                    $("#senseetive_holder").html(s);

                                    // Init tabs

                                    $("#tabs").tabs();

                                    // Functions to show tag's images

                                    $("#add_senseetive_tags .addable_tag").hover(

                                        function(e){

                                            urls = $(this).attr("data").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 %}