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

{% 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 'renkanmanager/lib/renkan/css/renkan.css' %}" />
        <link rel="stylesheet" type="text/css" href="{% static 'hdalab/css/additionnal_renkan.css' %}" />
        <link rel="stylesheet" type="text/css" href="{% static 'hdalab/lib/bjqs.css' %}" />
        <link rel="stylesheet" type="text/css" href="{% static 'hdalab/css/login.css' %}" />
        <link rel="stylesheet" type="text/css" href="{% static 'hdalab/css/renkan_video.css' %}" />
        <link rel="stylesheet" type="text/css" href="{% static 'hdalab/lib/video-js/video-js.css' %}" />
{% endblock %}

{% block js_import %}
{{block.super}}
        <!-- video-js IE8 support -->
        <script src="{% static 'hdalab/lib/video-js/ie8/videojs-ie8.min.js' %}"></script>
        <script src="{% static 'hdalab/lib/video-js/video.min.js' %}"></script>
        <script src="{% static 'hdalab/lib/bjqs-1.3.min.js' %}"></script>
        <script src="{% static 'renkanmanager/lib/jquery-ui/jquery-ui.js' %}"></script>
        <script src="{% static 'renkanmanager/lib/jquery-mousewheel/jquery.mousewheel.js' %}"></script>
        <script src="{% static 'renkanmanager/lib/lodash/lodash.js' %}"></script>
        <script src="{% static 'renkanmanager/lib/backbone/backbone.js' %}"></script>
        <script src="{% static 'renkanmanager/lib/backbone-relational/backbone-relational.js' %}"></script>
        <script src="{% static 'renkanmanager/lib/paper/paper-full.js' %}"></script>
        <script type="text/javascript">
             var require = {
                 baseUrl: "{% static 'renkanmanager/lib/' %}"
             };
        </script>
        <script src="{% static 'renkanmanager/lib/requirejs/require.js' %}"></script>
        <script src="{% static 'renkanmanager/lib/renkan/js/renkan.js' %}"></script>
        <script src="{% static 'hdalab/js/renkan-manual-save.js' %}"></script>
        <script src="{% static 'hdalab/js/hdalab-renkan-bins.js' %}"></script>
        <script type="text/javascript">
        	var io_options = {}, dialog=false, _rkn;
            _.extend(Rkns.i18n.fr, {"Search in Bins": "Rechercher dans les résultats"});
            function startRenkan(){
                var _renkan = new Rkns.Renkan({
                    manual_save: true,
                    show_user_list: false,
                    user_color_editable: false,
                    user_name_editable: false,
                    show_user_color: false,
                    show_export_button: false,
                    show_addedge_button:false,
                    static_url : "{% static 'renkanmanager/lib/renkan/' %}",
                    allow_image_upload : false,
                    default_view: false,
                    save_view: true,
                    hide_nodes: false,
                    default_index_view: 0,
                    url_parameters: false,
                    update_url: false,
                    show_node_editor_title_richtext: false,
                    show_node_editor_description_richtext: false,
                    search: [
                        {
                            type: "HdaTags",
                            lang: "{{LANGUAGE_CODE}}",
                            image: "http://dbpedia.org/statics/dbpedia_logo.png",
                            url: "{% url 'tag_search' %}"
                        },
                        {
                            type: "HdaNotices",
                            lang: "{{LANGUAGE_CODE}}",
                            image: "http://digital-impulse.com/wp-content/plugins/smilies-themer/digicons/IronMan.png",
                            url: "{% url 'searchajax' %}"
                        },
                        {
                            type: "Wikipedia",
                            lang: "{{LANGUAGE_CODE}}"
                        }
                    ],
                    bins: [
                        {
                            type: "ResourceList",
                            title: "{% trans '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"
                                }
                            ]
                        }
                    ],
                    /*property_files: [ "data/properties.json" ],
                       node_fill_color: false*/
                    language: "{{LANGUAGE_CODE}}"
                });

                //_create_user_//

                //_____________//
                io_options = {
                        url: "{% url 'renkan_get_put' %}" + window.location.search,
                        {% if user.is_authenticated %}
                            user_authenticated: true,
                            user_id:"{{ user.id }}",
                            user_name:"{{ user }}",
                        {% else %}
                            user_authenticated: false,
                        {% endif %}
                };
                Rkns.jsonIOSaveOnClick(_renkan, io_options);

                _rkn = _renkan;
            };

            // Closure to fix require.js import mismatch
			//(function($){
			    $(function() {
	                var form;
	                dialog = $( "#dialog-form" ).dialog({
	                    autoOpen: false,
	                    width: 520,
	                    modal: true,
	                    create: function (event, ui) {
	                        $("#login-popup-close").click(function(){
	                            dialog.dialog("close");
	                        });
	                    }
	                });

	                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) {
	                            var d = $(data);
	                            if(d.hasClass("ok")){
	                                io_options.login_user = true;
	                                io_options.user_id= d.attr("id");
	                                io_options.user_name= $("#username",d).html();
	                                io_options.user_authenticated = true;

	                                _rkn.setCurrentUser(io_options.user_id, io_options.user_name);
	                                $("#menu.profile").html(d.html());
	                                $(".Rk-Save-Button").click();
	                                dialog.dialog( "close" );
	                                return true;
	                            }
	                            $("#dialog-form").html(data);
	                            // in case, login failed, we reassign the behaviour
	                            form = dialog.find( "form" ).on( "submit", function( event ) {
	                                manageLoginForm(event, this);
	                            });
	                            $("#login-popup-close").click(function(){
	                                dialog.dialog("close");
	                            });
	                        }
	                    });
	                }

	                form = dialog.find( "form" ).on( "submit", function( event ) {
	                    manageLoginForm(event, this);
	                });

	              //help dialog init
	                var help_dialog = $( "#help-container" ).dialog({
	                    autoOpen: false,
	                    height: 330,
	                    width: 880,
	                    resizable: false,
	                    draggable: false,
	                    create: function (event, ui) {
	                        var help_slideshow = $('#help-slideshow').bjqs({
	                            responsive:false,
	                            height: 320,
	                            width: 870,
	                            animtype: 'slide',
	                            showcontrols: true,
	                            centercontrols: false,
	                             nexttext: "",
	                             prevtext: "",
	                             showmarkers : false,
	                             automatic: false
	                        });

	                        $("#toggle-help").click(function(){
	                            if (help_dialog.dialog("isOpen")){
	                                help_dialog.dialog("close");
	                            }
	                            else{
	                                help_dialog.dialog("open");
	                            }
	                        });



	                        $(".img-close").click(function(){
	                            help_dialog.dialog("close");
	                        });
	                    }
	                });

	              //video dialog init
	                var video_dialog = $("#video-container").dialog({
	                    autoOpen: false,
	                    height: 530,
	                    width: 870,
	                    resizable: false,
	                    draggable: false,
	                    create: function (event, ui) {
	                        $("#toggle-video").click(function(){
	                            if (video_dialog.dialog("isOpen")){
	                                video_dialog.dialog("close");
	                            }
	                            else{
	                                video_dialog.dialog("open");
	                            }
	                        });

	                        $(".video-close").click(function(){
	                            video_dialog.dialog("close");
	                        });
	                    },
                        close: function (event, ui) {
                            var player = videojs('renkan_video');
                            player.pause();
                        }
	                });

	            });
			//})($.noConflict());
            // end closure
        </script>
{% endblock %}

{% block main_content %}
<div class="all-title">
    <h1><strong>RENKAN</strong></h1>
    <div class="renkan_help">
        {% if switch_shape_url %}
        <ul>
            <li>
                {% trans 'Change organisation' %}
                <p> {% trans '(Indisponible si modification du RENKAN)' %}</p>
                <ul>
                    {% if 'shape=vert' in switch_shape_url.current %}
                        <li id="graph-line"><a href="">&#10003&nbsp;{% trans 'View graph in column' %}</a></li>
                        <li id="graph-lineH"><a href="{{ switch_shape_url.horiz }}">&nbsp;&nbsp;&nbsp;{% trans 'View graph in line' %}</a></li>
                        <li id="graph-circle"><a href="{{ switch_shape_url.circle }}">&nbsp;&nbsp;&nbsp;{% trans 'View graph in circle' %}</a></li>
                    {% elif 'shape=horiz' in switch_shape_url.current %}
                        <li id="graph-line"><a href="{{ switch_shape_url.vert }}">&nbsp;&nbsp;&nbsp;{% trans 'View graph in column' %}</a></li>
                        <li id="graph-lineH"><a href="">&#10003&nbsp;{% trans 'View graph in line' %}</a></li>
                        <li id="graph-circle"><a href="{{ switch_shape_url.circle }}">&nbsp;&nbsp;&nbsp;{% trans 'View graph in circle' %}</a></li>
                    {% else %}
                        <li id="graph-line"><a href="{{ switch_shape_url.vert }}">&nbsp;&nbsp;&nbsp;{% trans 'View graph in column' %}</a></li>
                        <li id="graph-lineH"><a href="{{ switch_shape_url.horiz }}">&nbsp;&nbsp;&nbsp;{% trans 'View graph in line' %}</a></li>
                        <li id="graph-circle"><a href="">&#10003&nbsp;{% trans 'View graph in circle' %}</a></li>
                    {% endif %}
                </ul>
            </li>
        </ul>
        {% endif %}
        <a id="toggle-video" href="#" title="{% trans 'Tutoriel vidéo : Renkan' %}"></a>
        <a id="toggle-help" href="#" title="{% trans 'Aide : Bienvenue !' %}"></a>
    </div>
</div>
<div id="dialog-form" title="Identification">
    {% include 'ajax_identification/ajax_login.html' %}
</div>

<div id="help-container" class="">
    {% include 'help_popup.html' %}
</div>

<div id="video-container" class="">
    {% include 'video_popup.html' %}
</div>

<div class="rnk-wrapper">
  <div class="rnk-container">
    <div id="renkan"></div>
  </div>
</div>
{% endblock %}