[% 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">

$(document).ready(function () {
  loadSVG('[% svg_string %]');
});
</script>
[% END %]

	<div id="topbanner">
		<div id="bannerinfo">
			<a href="help/[% text_lang %]" title="Relationship mapper help" class="helptag">Help / About</a>
		</div>
		<h1>Relationship mapper</h1>
		<h2>[% text_title %]</h2>
		<div id="segmentation">
[% FOREACH segment IN textsegments -%]
[% IF segment.start != startseg -%]
			<a href="[% c.uri_for( "/relation/$textid" ) %]?start=[% segment.start %]">
				<span class="segment_guide">[% segment.display %]</span>
			</a>
[% ELSE -%]
			<span class="segment_guide selected">[% segment.display %]</span>
[% END -%]
[% END -%]
		</div>
	</div>

	<div id="enlargement_container" class="fillPage">	
		<div id="loading_overlay">
			<div id="loading_message"><span>Loading, please wait...</span></div>
		</div>
		<div id="dialog_overlay"></div>
		<div id="enlargement" style="">
	        <div id="svgenlargement"  class="fillPage"></div>
		</div>
	</div>
	
	<div id="update_workspace_button"></div>
	
	<div id="dialog-form" title="Create relation between two nodes...">
		<form id="collapse_node_form" action="#">
		<fieldset>
			<input type="hidden" name="source_id" id="source_node_id"/>
			<input type="hidden" name="source_text" id="source_node_text"/>
			<input type="hidden" name="target_id" id="target_node_id"/>
			<input type="hidden" name="target_text" id="target_node_text"/>
			<label for="rel_type">Relation type..&nbsp;</label>
			<select name="rel_type" id="rel_type" class=".ui-widget select">
				<option></option>
			</select>
			<br/><br/>
			<label for="scope">Scope of relation..&nbsp;</label>
			<select name="scope" id="scope" class=".ui-widget select">
				<option></option>
			</select>
			<br/><br/>
			<label for="note">Annotation or note..&nbsp;</label>
			<textarea rows="3" style="width:100%;" name="note" id="note" class=".ui-widget input"></textarea>
		</fieldset>
    	<div id="status"></div>		
		</form>
	</div>
	<div id="dialog_overlay"></div>

	<div id="delete-form" title="Relation info...">
		<form id="delete_relation_form" action="#">
			<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>
	
	<div id="reading-form" title="Reading info...">
		<form id="reading_data_form" action="#">
			<input type="hidden" name="reading_id" id="reading_id"/>
			<input type="checkbox" name="reading_is_nonsense" id="reading_is_nonsense"/>
			<label for="reading_is_nonsense">This is a nonsense word</label>
			<br/>
			<input type="checkbox" name="reading_grammar_invalid" id="reading_grammar_invalid"/>
			<label for="reading_grammar_invalid">This word's grammar cannot be right</label>
			<br/><br/>
			<!-- Morphological options go here -->
			<div id="normalization">
				<label for="reading_normal_form">Normalized form: </label>
				<input type="text" name="reading_normal_form" id="reading_normal_form"></input>
				<button id="#reading_relemmatize" onclick="relemmatize(); return false;">Re-lemmatize</button>
			</div>
			<div id="relemmatize_pending">
				<img src="[% c.uri_for('/images/ajax-loader.gif') %]"/>
			</div>
			<br/><br/>
			<div id="morph_outer">
				<label>Lemma / part of speech:</label><br/>
				<div id="morphology"></div>
			</div>
			</select>
			<div id="reading_status"></div>
		</form>
    </div>
	
    <p/><p/>	
    <div id="keymap">
        <ul id="keymaplist">
          <li></li>
        </ul>
    </div>
    
[% PROCESS footer.tt %]