{% extends "frame.html"%}

{% block title%}CellPublisher: Convert 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 Doe";
	}
	
	function insertTitleExample() {
		document.submissionform.html_title.value="Carbon 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>Convert a new diagram to CellPublisher</h1>
	</br>
	<p>Please fill out the fields below to convert your CellDesigner file to CellPublisher. After submitting, you will see an Admin page where you can view, download, or delete your online pathway.</p> 
	<p>Do you want to see the process in action before submitting? Do you need extra help? Visit the <a href="/about/usersguide/1/">User's Guide</a>!</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 convert. 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.<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>
				
				</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><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/example.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>
		
		<div class="stepFrame">
			<p><span class="step">Step 3.</span><strong> Optional settings <a href="#" id="optDesc-show" class="showLink" onclick="showHide('optDesc');return false;">(Click here for more info)</a></strong></p>
			<div id="optDesc" class="more">
				<p>If you provide an e-mail address, you will receive a message when the conversion is finished. In this message you will get a link to the finished pathway, as well as a
				link to the admin interface, where you can download or delete the pathway.</p>
				<p>If you tick the checkbox (optional), your pathway will be listed in the <a href="/list/page1/" target="blank">list of public pathways</a> once it is converted. 
				<a href="#" id="optDesc-hide" class="hideLink" onclick="showHide('optDesc');return false;">(Click here to hide the description.)</a></p>
			</div>
			<div style="padding-left:3em;">
				<table>
				<tr>
					<td><label for="id_email">E-mail address (optional)</label>{{form.email.errors }}</td><td colspan="2">{{form.email}}</td>
				</tr>
				<tr>
					<td><label for="id_ok_upload">Include in the <a href="/list/page1/" target="blank">list of public 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>

		
		<input class="publish" type="image" value="Click here to publish your diagram!" src="http://cellpublisher.gobics.de/images/publish.png" />
	</form>
	<br/>
	<p><strong>Note:</strong> The link to the converted pathway is almost impossible to guess. For this reason, only people with whom you share the link will be able to view it online.</p> 
	<p>Nonetheless, if your data is strictly confidential and you are wary of making it available through the web, you can use our offline version. Please visit 
	the <a href="http://sourceforge.net/projects/cellpublisher/" target="blank">SourceForge entry</a> of the CellPublisher 
	project for downloading the Windows installer or to access the source code.</p>
{% endblock %}