[% WRAPPER header.tt
	pagetitle = "Stemmaweb - Relationship mapper"
	applicationjs = c.uri_for('/js/relationship.js')
	applicationstyle = c.uri_for('/css/relationship.css')
%]
<script type="text/javascript">
$(function() {
  $('#svgenlargement').svg({loadURL: '[% svg_string %]', onLoad: svgEnlargementLoaded});
});
</script>
[% END %]

	<div id="topbanner">
		<div id="bannerinfo">
			<a href="help" title="Relationship mapper help" class="helptag">Help / About</a>
		</div>
		<h1>Relationship mapper</h1>
		<h2>[% text_title %]</h2>
	</div>

	<div id="enlargement_container">	
		<div id="loading_overlay"></div>
		<div id="enlargement">
	        <div id="svgenlargement" style="height: 500px;"></div>
		</div>
	</div>
	
	<div id="update_workspace_button"></div>
	
	<div id="dialog-form" title="Create relation between two nodes..">
		<form id="collapse_node_form">
		<fieldset>
			<input type="hidden" name="source_id" id="source_node_id"/>
			<input type="hidden" name="target_id" id="target_node_id"/>
			<label for="rel_type">Relation type..&nbsp;</label>
			<select name="rel_type" id="rel_type" class=".ui-widget select">
			</select>
			<br/><br/>
			<label for="scope">Scope of relation..&nbsp;</label>
			<select name="scope" id="scope" class=".ui-widget select">
			</select>
			<br/><br/>
			<label for="note">Annotation or note..&nbsp;</label>
			<input type="text" width="60" name="note" id="note" class=".ui-widget input" />
		</fieldset>
    	<div id="status"></div>		
		</form>
	</div>
	<div id="dialog_overlay"></div>

	<div id="delete-form" title="Relation info..">
		<form id="delete_relation_form">
			<input type="hidden" name="source_id" id="delete_source_node_id"/>
			<input type="hidden" name="target_id" id="delete_target_node_id"/>
		</form>
		<div id="delete-form-text"></div>
	</div>
    	
    <p/><p/>	
    <div id="keymap">
        <ul id="keymaplist">
        </ul>
    </div>
    
[% PROCESS footer.tt %]