{% load staticfiles %}
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="{% static 'remie/js/jquery-1.11.2.min.js' %}"></script>
<script type="text/javascript">
	$(document).ready(function(){
	    $("#iframe_update_button").click(function(){
	        var default_url = "{% url 'remie_segment' %}";
	        var project_id = $("#project_id_iframe").val();
	        var group_mode = $("#group_mode").is(":checked");
	        
	        
	        var final_url = default_url+"?project_id="+project_id+"&group_mode="+group_mode;
	        $("#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,
                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>Mode groupe: </label><input id="group_mode" type="checkbox"></input>
  <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="projecÒt_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>