{% load staticfiles %}
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="{% static 'remie/js/jquery.min.js' %}"></script>
<script type="text/javascript">

	$(document).ready(function(){
	    if(!$("input:radio[name=scenario]").filter('[value=segments_single]').is(":checked")){
	        $("input:radio[name=scenario]").filter('[value=segments_single]').prop('checked', true);
	    }
	    
	    $("#iframe_update_button").click(function(){
	        var segments_single_url = "{% url 'remie_segments_single' %}",
	            segments_group_url = "{% url 'remie_segments_group' %}",
	            markers_url = "{% url 'remie_markers' %}",
	            markers_teacher_url = "{% url 'remie_markers_teacher' %}",
	            teacher_url = "{% url 'remie_teacher' %}",
	            segments_preview_url = "{% url 'remie_segments_preview' %}",
	            markers_preview_url = "{% url 'remie_markers_preview' %}",
	            scenario_url = "";
	        switch($('input[name=scenario]:checked').attr('id')){
	            case 'segments_single':
	                scenario_url = segments_single_url;
	            	break;
	            case 'segments_group':
	                scenario_url = segments_group_url;
	            	break;
	            case 'markers':
	                scenario_url = markers_url;
	            	break;    
	            case 'markers_teacher':
	                scenario_url = markers_teacher_url;
	            	break; 
	            case 'teacher':
	                scenario_url = teacher_url;
	            	break;
	            case 'segments_preview':
	                scenario_url = segments_preview_url;
	                break;
	            case 'markers_preview':
	                scenario_url = markers_preview_url;
	                break;
	        }
	        
	        var project_id = $("#project_id_iframe").val();
	        
	        
	        var final_url = scenario_url+"?project_id="+project_id;
	        $("#remie_workunit_iframe").attr("src", final_url);
	    });
	    
	    function getCookie(name) {
	        var cookieValue = null;
	        if (document.cookie && document.cookie != '') {
	            var cookies = document.cookie.split(';');
	            for (var i = 0; i < cookies.length; i++) {
	                var cookie = jQuery.trim(cookies[i]);
	                // Does this cookie string begin with the name we want?
	                if (cookie.substring(0, name.length + 1) == (name + '=')) {
	                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
	                    break;
	                }
	            }
	        }
	        return cookieValue;
	    }
	    
	    $("#copy_button").click(function(){
	        var _project_id = $("#project_id_copy").val();
	        var _copy_title = $("#title_copy").val();
		    var csrftoken = getCookie('csrftoken');
		    
	        function csrfSafeMethod(method) {
	            // these HTTP methods do not require CSRF protection
	            return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
	        }
	        $.ajaxSetup({
	            beforeSend: function(xhr, settings) {
	                if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
	                    xhr.setRequestHeader("X-CSRFToken", csrftoken);
	                }
	                $("#success_copy").css("color", "orange");
	                $("#success_copy").html("Copie en cours ... ");
	            }
	        });
	        var _data = 
	        '{'
            + '"meta": {'
            + '"dc:creator": "admin",'
            + '"dc:contributor": "admin",'
            + '"dc:title": "'+_copy_title+'",'
            + '"dc:created": "",'
            + '"dc:modified": "",'
            + '"dc:description": "",'
            + '"iricle:status": 2'
            + '},'
            + '"views": [],'
            + '"lists": [],'
            + '"annotation-types": [],'
            + '"medias": [],'
            + '"tags": [],'
            + '"annotations": []'
            + '}';
	        $.ajax({
	        	method: "POST",
        	    url: '{% url "api_dispatch_list" resource_name="projects" api_name="1.0" %}?source='+_project_id+'&publish=true&username=admin&api_key=61a86341aaeabb66bbd2c424d5e2be6aa8a449d5',
                contentType: 'application/cinelab',
        	    data: _data,
	        	success: function(_data, _status, _request) {
	                $("#success_copy").css("color", "green");
	                $("#success_copy").html("Copie réussie: la ressource est atteignable en "+_request.getResponseHeader('Location'));
	            },
	            error: function(_xhr, _error, _thrown) {
	                $("#success_copy").css("color", "red");
	                $("#success_copy").html("Une erreur est survenue: "+_thrown);
	            }
	        });
	    });
	});
</script>
</head>
<body>
<div>
  <label>Id projet (génération d'iframe): </label><input id="project_id_iframe" type="text"></input>
  <br><label>Scénario: </label><br>
  <input id="segments_single" name="scenario" type="radio" value="segments_single" >Elève - Segments, individuel</input><br>
  <input id="segments_group" name="scenario" type="radio" value="segments_group">Elève - Segments, groupe</input><br>
  <input id="markers" name="scenario" type="radio" value="markers">Elève - Marqueurs</input><br>
  <input id="markers_teacher" name="scenario" type="radio" value="markers">Professeur - Marqueurs</input><br>
  <input id="teacher" name="scenario" type="radio" value="teacher">Professeur - Segments</input><br>
  <input id="segments_preview" name="scenario" type="radio" value="segments_preview">Aperçu - Segments</input><br>
  <input id="markers_preview" name="scenario" type="radio" value="markers_preview">Aperçu - Marqueurs</input><br>
  <br><input id="iframe_update_button" type="button" value="Générer"></input>
</div>
<div hidden="true">
  <label>Id projet (copie via l'API): </label><input id="project_id_copy" type="text"></input>
  <br><label>Titre de la copie: </label><input id="title_copy" type="text"></input>
  <br><input id="copy_button" type="button" value="Copier"></input>
  <div id="success_copy"></div>
</div>

<iframe id="remie_workunit_iframe" width="1191" height="625" src=""></iframe>

</body>
</html>