{% extends "charme_base.html" %} 

{% block extra_css %}
<link rel="stylesheet" href="{{ STATIC_URL }}charme/css/charme.css" media="screen">
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dijit/themes/claro/claro.css" media="screen">
<script src="{{ STATIC_URL }}charme/jsonld.js"></script>
{% endblock %}


{% block main %}
		<script>
			
		
		
			 var dojoConfig = (function(){
				return {
					async: true,
					isDebug: true,
					packages: [{
						name: "rdf",
						location: "{{ STATIC_URL }}charme/rdf"
					}]
				};
			})();
		</script>

<div data-dojo-type="dijit/layout/ContentPane" id="formContainer" 
					data-dojo-props="region:'center',splitter:true" style="height: 400px;">
	<form data-dojo-type="dojox/form/Manager" id="composeAnnotation">
		{% csrf_token %}	
	    <script type="dojo/on" data-dojo-event="submit">
        if(this.validate()){
            if (confirm('Form is valid, press OK to submit')) { 
				registry.byId("target").assert();
				registry.byId("body").assert();
			}
        }else{
            alert('Form contains invalid data.  Please correct first');
            return false;
        }
        return true;
    	</script>
	
	
		<fieldset>
			<legend>Target</legend>
			<input id="target_link" type="hidden" value="{{ target_link }}"/>
			<span id="target" data-dojo-type="rdf/OATarget"></span>
		</fieldset>		
		
		<fieldset>
			<legend>Body</legend>
			<span id="body" data-dojo-type="rdf/OABody"></span>
		</fieldset>
				
		<button data-dojo-type="dijit/form/Button"
			id="submit_annotation" data-dojo-attach-point="submit_annotation">Submit</button>		
	</form>
	
	<div id="response2"></div>
</div>
	

<!-- load dojo and provide config via data attribute -->
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js" data-dojo-config="async:true"></script>
<script type="text/javascript">
require(["dijit/registry", "dojo/parser", "dojo/dom", "dojo/cookie", "dojo/dom-style",
         "dojox/form/Manager",         
         "dijit/layout/ContentPane", 
         "dijit/form/Button",
         "rdf/OATarget",         
         "rdf/OABody",
         "dojo/domReady!"],function(registry, parser, dom, cookie, domStyle) {
    parser.parse();
	
    var target_link = dom.byId("target_link");
	var target = registry.byId("target");
	if (target_link != '') {
	    domStyle.set(target.target_uri.domNode, "width", '100%') 
		target.target_uri.set('value', target_link.value)
		target.target_uri.set('readonly', 'readonly')		
	}
	

	function generate_annotation() {
		var ret = ''
		ret += '@prefix anno: <http://localhost/> . \n'
		ret += '@prefix oa: <http://www.w3.org/ns/oa#> . \n'		
		ret += '@prefix dc: <http://purl.org/dc/elements/1.1/> . \n'		
		ret += '@prefix cnt: <http://www.w3.org/2011/content#> . \n'
		ret += '@prefix dctypes: <http://purl.org/dc/dcmitype/> . \n'

		var body = registry.byId("body").generate();
		var target = registry.byId("target").generate();
		ret += "anno:a_" + new Date().getTime() + " a oa:Annotation ;\n"
		ret += "oa:hasTarget " + target.uri + " ;\n";
		ret += "oa:hasBody " + body.uri + " .\n";
		ret += "\n";
		ret += body.detail + " .\n";
		ret += target.detail + " .\n";
		return ret;
	}
	
	registry.byId("submit_annotation").on("click", function(event){
		    // The parameters to pass to xhrPost, the message, and the url to send it to
			// Also, how to handle the return and callbacks.
					    
			var xhrArgs = {
				//url: "http://proteus.badc.rl.ac.uk:8000/insert/annotation",
				url: "http://charme-dev.cems.rl.ac.uk/insert/annotation",
				postData: generate_annotation(),
				handleAs: "text",
				headers: {"X-CSRFToken": cookie('csrftoken'), "Content-Type": "text/turtle"},
				load: function(data){
					dom.byId("response2").innerHTML = "Message posted.";
				},
				error: function(error){
	 					// We'll 404 in the demo, but that's okay.  We don't have a 'postIt' service on the
	 					// docs server.
	 					dom.byId("response2").innerHTML = "Message posted.";
				}
			}
			dom.byId("response2").innerHTML = "Message being sent..."
			console.log(xhrArgs.postData)
			// Call the asynchronous xhrPost
			var deferred = dojo.xhrPost(xhrArgs); 
	  });
});
</script>
{% endblock %}	