{% extends "base.html" %}
{% load static %}

{% block title %}{{block.super}} > {{datasheet.title}}{% endblock %}

{% block css_import %}
{{block.super}}
        <link rel="stylesheet" type="text/css" href="{% static 'hdalab/css/ui-lightness/jquery-ui-1.10.4.min.css' %}" />
        <link rel="stylesheet" type="text/css" href="{% static 'hdalab/css/additionnal_renkan.css' %}" />
        <link rel="stylesheet" type="text/css" href="{% static 'renkanmanager/lib/renkan/css/renkan.css' %}" />
        <style type="text/css">
        .rnk-wrapper, .rnk-container{
            width: 100%;
        }
        .rnk-container{
            height: 100%;
            width: 100%;
        }
        .rnk-wrapper{
            height: 100%;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        </style>
{% endblock %}

{% block js_import %}
{{block.super}}
        <script src="{% static 'renkanmanager/lib/jquery-ui-1.10.4.min.js' %}"></script>
        <script src="{% static 'renkanmanager/lib/jquery.mousewheel.min.js' %}"></script>
        <script src="{% static 'renkanmanager/lib/underscore-min.js' %}"></script>
        <script src="{% static 'renkanmanager/lib/backbone.js' %}"></script>
        <script src="{% static 'renkanmanager/lib/backbone-relational.js' %}"></script>
        <script src="{% static 'renkanmanager/lib/paper.js' %}"></script>
        <script type="text/javascript">
            var require = {
                baseUrl: "{% static 'renkanmanager/lib/' %}"
            };
        </script>
        <script src="{% static 'renkanmanager/lib/require.js' %}"></script>
        <script src="{% static 'renkanmanager/lib/renkan/renkan.js' %}"></script>
        <script src="{% static 'hdalab/js/renkan-manual-save.js ' %}"></script>
        <script type="text/javascript">
            var io_options = {}, dialog=false;
            function startRenkan(){
                var _renkan = new Rkns.Renkan({
                    manual_save: true,
                    static_url : "{% static 'renkanmanager/lib/renkan/' %}",
                    search: [
                        {
                            type: "Ldt"
                        },
                        {
                            type: "Wikipedia",
                            lang: "fr"
                        },
                        {
                            type: "Wikipedia",
                            lang: "ja"
                        }
                    ],
                    bins: [
                        {
                            type: "ResourceList",
                            title: "Ressources",
                            list: [
								{
								    url: "http://www.histoiredesarts.culture.fr/",
								    title: "Histoire des arts",
								    description: "Portail Histoire des arts sur culture.fr",
								    image: "http://www.culture.fr/extension/culture_fr/design/culture/images/favicon.ico"
								},
                                {
                                    url: "http://www.google.com/",
                                    title: "Google",
                                    description: "Search engine",
                                    image: "http://www.google.fr/images/srpr/logo4w.png"
                                },
                                "Polemic Tweet http://www.polemictweet.com",
                                "Twitter http://www.twitter.com/"
                            ]
                        }
                    ],
                    /*property_files: [ "data/properties.json" ],
                       node_fill_color: false*/
                    language: "fr"
                });
                
                io_options = { url: "{% url 'renkan_get_put' %}" + window.location.search, user_authenticated: {% if request.user.is_authenticated %}true{% else %}false{% endif %} };
                Rkns.jsonIOSaveOnClick(_renkan, io_options);
            };
            
            $(function() {
                var form;
                
                dialog = $( "#dialog-form" ).dialog({
                    autoOpen: false,
                    height: 300,
                    width: 350,
                    modal: true
                });
                
                function manageLoginForm(e, form){
                    e.preventDefault();
                    f = $(form);
                    $.ajax({
                        type: f.attr("method"),
                        url: f.attr("action"),
                        data: f.serialize(),
                        success: function(data, textStatus, jqXHR) {
                            $("#dialog-form").html(data);
                            // in case, login failed, we reassign the behaviour
                            form = dialog.find( "form" ).on( "submit", function( event ) {
                                manageLoginForm(event, this);
                            });
                        }
                    });
                }
                
                form = dialog.find( "form" ).on( "submit", function( event ) {
                    manageLoginForm(event, this);
                });
            });
            
        </script>
{% endblock %}

{% block main_content %}
<div id="dialog-form" title="Identification">
	{% include 'ajax_identification/ajax_login.html' %}
</div>
<div class="rnk-wrapper">
  <div class="rnk-container">
    <div id="renkan"></div>
  </div>
</div>
{% endblock %}