{% extends "frame.html"%}

{% block title%}CellPublisher: Submit a pathway{% endblock %}

{% block content %}
	<script language=javascript type='text/javascript'> 
	function showHide(shID) {
		if (document.getElementById(shID)) {
			if (document.getElementById(shID+'-show').style.display != 'none') {
				document.getElementById(shID+'-show').style.display = 'none';
				document.getElementById(shID).style.display = 'block';
			}
			else {
				document.getElementById(shID+'-show').style.display = 'inline';
				document.getElementById(shID).style.display = 'none';
			}
		}
	}
	
	function insertOwnerExample() {
		document.submissionform.owner.value="John Smith";
	}
	
	function insertTitleExample() {
		document.submissionform.html_title.value="Glutamate metabolism in Bacillus subtilis";
	}
	</script>
	<style type="text/css">
	.more {
		display: none;
		
	}
	a.showLink, a.hideLink {
		text-decoration: none;
		color: #36f;
		padding-left: 8px;
		font-size: smaller;
	}
	a.hideLink {
	
	}
	a.showLink:hover, a.hideLink:hover {
		border-bottom: 1px dotted #36f; }
	
	.step {
		font-size: 1.5em;
		font-weight: bold;
		color: dba81d;
	}
	
	.stepFrame {
		border-style: outset;
		border-width: 2px;
		border-color: 4f81bd;
		margin: 1em;
		padding: 1em;
	}
	
	.publish {
		display: block;
		margin-left: auto;
		margin-right: auto;
		width: 500px;
			
	}
	</style>
	
	<h1>Upload a new diagram to CellPublisher</h1>
	</br>
	<p>Please fill out the fields below to upload your CellDesigner file to CellPublisher. After submitting, you will see a page with links to the online version of your diagram, plus a version you can download to your computer.</p>
	
	{% if form.errors %}
		<blockquote><strong>Unfortunately, there were some errors when processing your submission. Please check the fields with errors and provide a correct value.</strong></blockquote>
	{% endif %}
	
	<form name="submissionform" enctype="multipart/form-data" action="/submit/" method="POST">
		<div class="stepFrame">
			<p><span class="step">Step 1.</span><strong> Author and title of the diagram <a href="#" id="ownerDesc-show" class="showLink" onclick="showHide('ownerDesc');return false;">(Click here for more info)</a></strong></p>
			<div id="ownerDesc" class="more">
				<p>Please provide the author and title of the diagram you will upload. The text you enter here will appear at the bottom-right of the diagram (in the copyright owner section) and at the header of it.</p>
				<p>If you tick the checkbox (optional), your pathway will be listed in the <a href="/list/page1/" target="blank">list of all pathways</a> once it is published. <a href="#" id="ownerDesc-hide" class="hideLink" onclick="showHide('ownerDesc');return false;">(Click here to hide the description.)</a></p>
			</div>
			<div style="padding-left:3em;">
				<table>
				<tr>
					<td><label for="id_owner">Enter the author:</label>{{ form.owner.errors }}</td>
					<td>{{ form.owner }}</td>
					<td><a href="javascript:insertOwnerExample()">Insert an example</a></td>
				</tr>
				<tr>
					<td><label for="id_html_title">Enter the title:</label>{{ form.html_title.errors }}</td>
					<td>{{ form.html_title}}</td>
					<td><a href="javascript:insertTitleExample()">Insert an example</a></td>
				</tr>
				<tr>
					<td><label for="id_ok_upload">Include in the <a href="/list/page1/" target="blank">list of all pathways</a>?</label>{{form.ok_upload.errors }}</td><td colspan="2">{{form.ok_upload}} (Check the box if you agree)</td>
				</tr>
				</table>
			</div>
		</div>
		
		<div class="stepFrame">
			<p><span class="step">Step 2.</span><strong> CellDesigner file and its image <a href="#" id="sbmlDesc-show" class="showLink" onclick="showHide('sbmlDesc');return false;">(Click here for more info)</a></strong></p>
			<div id="sbmlDesc" class="more">
				<p>Please select the CellDesigner file that will be converted, and an image representation of it (preferably in Portable Network Graphics (PNG) format).</p>
				<p>The CellDesigner file usually has the extension ".xml". To generate a PNG image from CellDesigner click "File" > "Export Image...", then select "PNG Image Files (.png)" from the "Files of type:" menu and save with the filename of your choice.</p>
				<p><strong>Tip:</strong> You can also edit the exported image with another program (e.g. Photoshop) before uploading it to CellPublisher. This can be useful if you want to add additional notes or images to it.</p>
				<p>To try out an example, click on the link "Download sample files", save the file, and extract its contents. You will find a CellDesigner file and its corresponding image.</p>
				<p></p><a href="#" id="sbmlDesc-hide" class="hideLink" onclick="showHide('sbmlDesc');return false;">(Click here to hide the description.)</a></p>
			</div>
			<div style="padding-left:3em;">
				<table>
				<tr>
					<td><label for="id_sbml">Select the CellDesigner file (".xml"):</label>{{ form.sbml.errors }}</td>
					<td>{{ form.sbml}}</td>
					<td rowspan="2"><a href="http://cellpublisher.gobics.de/Files/glutamate.zip">Download sample files</a></td>
				</tr>
				<tr>
					<td><label for="id_png">Select the image file (".png"):</label>{{ form.png.errors }}</td>
					<td>{{ form.png}}</td>
				</tr></table>
			</div>
		</div>
				
		<input class="publish" type="image" value="Click here to publish your diagram!" src="http://cellpublisher.gobics.de/images/publish.png" />
	</form>
	<br/>
	<p><strong>Privacy notice:</strong> By submitting your diagram to CellPublisher you grant us permission to store, process, and display the information you provide in the frame of the CellPublisher services we provide to you. If your data is confidential or you do not have the rights to make it widely available, please don't upload it here.</p> <p></p>A stand-alone version of CellPublisher is available for creating interactive maps for private use. Please visit the <a href="http://sourceforge.net/projects/cellpublisher/" target="blank">SourceForge entry</a> of the CellPublisher project for accessing the source code.</p>
{% endblock %}