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

{% block title %}{{block.super}} &gt; {{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' %}" />
{% endblock %}

{% block js_import %}
{{block.super}}
        <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/underscore/underscore.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;
            function startRenkan(){
                var _renkan = new Rkns.Renkan({
                    manual_save: true,
                	user_color_editable: false,
                	user_name_editable: false,
                	show_user_color: false,
                	{% if user.is_authenticated %}
                	user_id:"{{ user.id }}",
                	user_name:"{{ user }}",
                	{% endif %}
                    static_url : "{% static 'renkanmanager/lib/renkan/' %}",
                    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: "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, user_authenticated: {% if user.is_authenticated %}true{% else %}false{% endif %} };
                Rkns.jsonIOSaveOnClick(_renkan, io_options);
                
            };
            
            $(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.user_authenticated = true;
                                io_options.login_user = true;
                                io_options.user_id= d.attr("id");
                                io_options.user_name= $("#username",d).html();
                                
                                $("#menu.profile").html(d.html());
                                $(".Rk-CurrentUser-Name").html(io_options.user_name);                           
                                dialog.dialog( "close" );
                                $(".Rk-Save-Button").click();
                                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);
                            });
                        }
                    });
                }
                
			    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: "",
					     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");
			            });
			    	}
			    });
        	});
            
        </script>
{% endblock %}

{% block main_content %}
<div class="all-title">
	<h1><strong>RENKAN</strong></h1>
	<div class="renkan_help">
		<ul>
			<li>
				{% trans 'Changer de disposition' %}
				<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 'See the graph in column' %}</a></li>
						<li id="graph-lineH"><a href="{{ switch_shape_url.horiz }}">&nbsp;&nbsp;&nbsp;{% trans 'See the graph in line' %}</a></li>
						<li id="graph-circle"><a href="{{ switch_shape_url.circle }}">&nbsp;&nbsp;&nbsp;{% trans 'See the 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 'See the graph in column' %}</a></li>
						<li id="graph-lineH"><a href="">&#10003&nbsp;{% trans 'See the graph in line' %}</a></li>
						<li id="graph-circle"><a href="{{ switch_shape_url.circle }}">&nbsp;&nbsp;&nbsp;{% trans 'See the graph in circle' %}</a></li>
					{% else %}
						<li id="graph-line"><a href="{{ switch_shape_url.vert }}">&nbsp;&nbsp;&nbsp;{% trans 'See the graph in column' %}</a></li>
						<li id="graph-lineH"><a href="{{ switch_shape_url.horiz }}">&nbsp;&nbsp;&nbsp;{% trans 'See the graph in line' %}</a></li>
						<li id="graph-circle"><a href="">&#10003&nbsp;{% trans 'See the graph in circle' %}</a></li>
					{% endif %}
				</ul>
			</li>
		</ul>
		<a id="toggle-help" href="#"></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 class="rnk-wrapper">
  <div class="rnk-container">
    <div id="renkan"></div>
  </div>
</div>
{% endblock %}