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

{% endblock %}

{% block js_import %}

{{block.super}}

        <script src="{% static 'hdalab/lib/bjqs-1.3.min.js' %}"></script>

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

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

                });

                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,

                    height: 398,

                    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($(".ok",d).length==1){

                                $("#dialog-form").html($(".ok",d)[0]);

                                $(".hello-user").remove();

                                $("#nav").append($(".username",d).children());

                                //$("#dialog-form .close").click(function(){

                                //    dialog.dialog( "close" );

                                //});

                                io_options.user_authenticated = true;

                                $(".Rk-Save-Button").addClass("Rk-Save-Online");

                                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 id="dialog-form" title="Identification">

	{% include 'ajax_identification/ajax_login.html' %}

</div>

<div class="renkan_help">

  <span id="circle-shape"><a href="{{ switch_shape_url }}">{% if 'shape=circle' in switch_shape_url %}{% trans 'See the graph in circle' %}{% else %}{% trans 'See the graph in lines' %}{% endif %}</a></span>

  <a id="toggle-help" href="#"></a>

</div>

<div id="help-container" class="">

	<div id="help-slideshow">

		<a class="img-close" href="#">{% trans 'Fermer<br>ce didacticiel' %}</a>

	  	<ul class="bjqs">

	    	<li class="slide1">

	    		<div class="slideShowTitle">{% trans 'Aide : Bienvenue !' %}</div>

   				<div class="column-left">

   					<p>{% trans 'Cet outil (RENKAN) vous permet de representer, spatialiser et organiser des collections de ressources du portails histoire des arts avec d’autres sites Web.<br><br>Vous pouvez déplacer chaque noeud en cliquant dessus et en déplacant votre curseur.' %}</p>

   				</div>

	   			<div class="column-center">

	   				<p class="columnTitle">{% trans 'Légende' %}</p>

	 				<label class="img-requete">{% trans 'Requête' %}</label>

	 				<label class="img-ressource">{% trans 'Ressource' %}</label>

	 				<label class="img-tag">{% trans 'Tag' %}</label>

				</div>

	   			<div class="column-right">

					<p>{% trans 'En cliquant sur chaque noeud ou lien vous pouvez les déplacer,  éditer,  supprimer, agrandir, rétraicir, modifier en utilisant le menu circulaire comme ci dessous.' %}</p>

		  			  <img src="{% static 'hdalab/img/menu.png' %}" class="img-menu">

				</div>

	    	</li>

		    <li class="slide2">

		    	<div class="slideShowTitle">{% trans 'Aide : Ajouter, Editer, Organiser, Enregistrer !' %}</div>

	   			<div class="column-left">

		  			<h1 class="columnTitle">{% trans '1. Ajouter' %}</h1>

		  			<p>{% trans 'Une fois ce didacticiel fermer vous pouvez ajouter des ressources en faisant “drag and drop” a partir de n’importe qu’elle fenetre de navigation web.' %}</p><br>

		   			<img src="{% static 'hdalab/img/extend.png' %}" class="img-extend" />

		   			<p>{% trans 'En cliquant sur l’icone à gauche  vous pouvez ouvrir le panel de recherche pour retrouver des ressources du site HDA ou Wikipédia.' %}</p>

	   			</div>

	   			<div class="column-center">

		    		<h1 class="columnTitle">{% trans '2. Editer et organiser' %}</h1>

		    		<p>{% blocktrans %}Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.<br><br>Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre de texte.{% endblocktrans %}</p>

				</div>

	   			<div class="column-right">

		  			<h1 class="columnTitle">{% trans '3. Enregistrer' %}</h1>

		  			<p>{% trans 'En cliquant sur chaque noeud ou lien vous pouvez les déplacer,  éditer,  supprimer, agrandir, rétraicir, modifier en utilisant le menu circulaire comme ci dessous.' %}</p><br>

	        		<img src="{% static 'hdalab/img/save.png' %}" class="img-save" />

	        		<p>{% blocktrans %}Ensuite vous pouvez enregistrer en ciquant sur l’icone representant une disquette.{% endblocktrans %}</p>

	   			</div>

		    </li>

	  	</ul>

	</div>

</div>

<div class="rnk-wrapper">

  <div class="rnk-container">

    <div id="renkan"></div>

  </div>

</div>

{% endblock %}