[scpubgit/stemmaweb.git] / root / src / index.tt

[% WRAPPER header.tt
	pagetitle = "Stemmaweb - Text tradition tools"
	applicationjs = c.uri_for( 'js/componentload.js' )
%]
    <script type="text/javascript">
var basepath = window.location.pathname
if( basepath.lastIndexOf('/') == basepath.length - 1 ) { 
	basepath = basepath.slice( 0, basepath.length - 1) 
};
var selectedTextID;
var selectedTextInfo;
var selectedStemmaID = -1;
var stemmata = [];

function refreshDirectory () {
	var lmesg = $('#loading_message').clone();
	$('#directory').empty().append( lmesg.contents() );
    $('#directory').load( "[% c.uri_for( 'directory' ) %]", 
    	function(response, status, xhr) {
			if (status == "error") {
				var msg = "An error occurred: ";
				$("#directory").html(msg + xhr.status + " " + xhr.statusText);
			}
		}
	);
}

function start_upload_dialog() {
    if( typeof uploader != 'undefined' ){ uploader.destroy() };
    $('#upload-collation-dialog').dialog('option', 'attach_uploader')();
    $('#upload_status').empty();
    $('#upload_button').button('disable');
    $('#upload-collation-dialog').dialog('open');
}

$(document).ready( function() {
    // call out to load the directory div
    $('#textinfo_container').hide();
    $('#textinfo_waitbox').hide();
	refreshDirectory();
	
	// Set up the textinfo edit dialog
	$('#textinfo-edit-dialog').dialog({
		autoOpen: false,
		height: 200,
		width: 300,
		modal: true,
		buttons: {
			Save: function (evt) {
				$("#edit_textinfo_status").empty();
				$(evt.target).button("disable");
				var requrl = "[% c.uri_for( '/textinfo' ) %]/" + selectedTextID;
				var reqparam = $('#edit_textinfo').serialize();
				$.post( requrl, reqparam, function (data) {
					// Reload the selected text fields
					selectedTextInfo = data;
					load_textinfo();
					// Reenable the button and close the form
					$(evt.target).button("enable");
					$('#textinfo-edit-dialog').dialog('close');
				}, 'json' );
			},
			Cancel: function() {
				$('#textinfo-edit-dialog').dialog('close');
			}
		},
		open: function() {
			$("#edit_textinfo_status").empty();
			// Populate the form fields with the current values
			// edit_(name, language, public, owner)
			$.each([ 'name', 'language', 'owner' ], function( idx, k ) {
				var fname = '#edit_' + k;
				// Special case: language Default is basically language null
				if( k == 'language' && selectedTextInfo[k] == 'Default' ) {
					$(fname).val( "" );
				} else {
					$(fname).val( selectedTextInfo[k] );
				}
			});
			if( selectedTextInfo['public'] == true ) {
				$('#edit_public').attr('checked','true');
			} else {
				$('#edit_public').removeAttr('checked');
			}
		},
	}).ajaxError( function(event, jqXHR, ajaxSettings, thrownError) {
		$(event.target).parent().find('.ui-button').button("enable");
    	if( ajaxSettings.url.indexOf( 'textinfo' ) > -1 
    		&& ajaxSettings.type == 'POST' ) {
			display_error( jqXHR, $("#edit_textinfo_status") );
    	}
	});

	
	// Set up the stemma editor dialog
	$('#stemma-edit-dialog').dialog({
		autoOpen: false,
		height: 700,
		width: 600,
		modal: true,
		buttons: {
			Save: function (evt) {
				$("#edit_stemma_status").empty();
				$(evt.target).button("disable");
				var stemmaseq = $('#stemmaseq').val();
				var requrl = "[% c.uri_for( '/stemma' ) %]/" + selectedTextID + "/" + stemmaseq;
				var reqparam = { 'dot': $('#dot_field').val() };
				// TODO We need to stash the literal SVG string in stemmata
				// somehow. Implement accept header on server side to decide
				// whether to send application/json or application/xml?
				$.post( requrl, reqparam, function (data) {
					// We received a stemma SVG string in return. 
					// Update the current stemma sequence number
					selectedStemmaID = data.stemmaid;
					// Stash the answer in our SVG array
					stemmata[selectedStemmaID] = data.stemmasvg;
					// Display the new stemma
					load_stemma( selectedStemmaID );
					// Reenable the button and close the form
					$(evt.target).button("enable");
					$('#stemma-edit-dialog').dialog('close');
				}, 'json' );
			},
			Cancel: function() {
				$('#stemma-edit-dialog').dialog('close');
			}
		},
		open: function(evt) {
			$("#edit_stemma_status").empty();
			var stemmaseq = $('#stemmaseq').val();
			if( stemmaseq == 'n' ) {
				// If we are creating a new stemma, populate the textarea with a
				// bare digraph.
				$(evt.target).dialog('option', 'title', 'Add a new stemma')
				$('#dot_field').val( "digraph stemma {\n\n}" );
			} else {
				// If we are editing a stemma, grab its stemmadot and populate the
				// textarea with that.
				$(evt.target).dialog('option', 'title', 'Edit selected stemma')
				$('#dot_field').val( 'Loading, please wait...' );
				var doturl = "[% c.uri_for( '/stemmadot' ) %]/" + selectedTextID + "/" + stemmaseq;
				$.getJSON( doturl, function (data) {
					// Re-insert the line breaks
					var dotstring = data.dot.replace(/\|n/gm, "\n");					
					$('#dot_field').val( dotstring );
				});
			}
		},
	}).ajaxError( function(event, jqXHR, ajaxSettings, thrownError) {
		$(event.target).parent().find('.ui-button').button("enable");
    	if( ajaxSettings.url.indexOf( 'stemma' ) > -1 
    		&& ajaxSettings.type == 'POST' ) {
			display_error( jqXHR, $("#edit_stemma_status") );
    	}
	});
		
	$('#upload-collation-dialog').dialog({
		autoOpen: false,
		height: 325,
		width: 480,
		modal: true,
		buttons: {
		  pick: {
		    text: "Pick File",
		    id: "pick_uploadfile_button",
		    click: function() {}       
		  },
		  upload: {
		    text: 'Upload',
		    id: 'upload_button',
		    click: function() {
			    $('#upload_status').empty();
                uploader.start();
                return false;
            }
		  },
		  Cancel: function() {
		    $('#upload-collation-dialog').dialog('close');
		  }
		},
		attach_uploader: function() {
		    create_uploader( "[% c.uri_for ( '/newtradition' ) %]" );
		    $('#filelist').empty().html( 'Use the \'Pick\' button to choose a source file…' );
		}
	});
	
	$('#stemma_graph').mousedown( function(evt) {
        evt.stopPropagation();
        $('#stemma_graph').data( 'mousedown_xy', [evt.clientX, evt.clientY] );
        $('body').mousemove( function(evt) {
            mouse_scale = 1; // for now, was:  mouse_scale = svg_root_element.getScreenCTM().a;
            dx = (evt.clientX - $('#stemma_graph').data( 'mousedown_xy' )[0]) / mouse_scale;
            dy = (evt.clientY - $('#stemma_graph').data( 'mousedown_xy' )[1]) / mouse_scale;
            $('#stemma_graph').data( 'mousedown_xy', [evt.clientX, evt.clientY] );
            var svg_root = $('#stemma_graph svg').svg().svg('get').root();
            var g = $('g.graph', svg_root).get(0);
            current_translate = g.getAttribute( 'transform' ).split(/translate\(/)[1].split(')',1)[0].split(' ');
            new_transform = g.getAttribute( 'transform' ).replace( /translate\([^\)]*\)/, 'translate(' + (parseFloat(current_translate[0]) + dx) + ' ' + (parseFloat(current_translate[1]) + dy) + ')' );
            g.setAttribute( 'transform', new_transform );
            evt.returnValue = false;
            evt.preventDefault();
            return false;
        });
        $('body').mouseup( function(evt) {
            $('body').unbind('mousemove');
            $('body').unbind('mouseup');
        });
	});
	 
	$('#stemma_graph').mousewheel(function (event, delta) {
        event.returnValue = false;
        event.preventDefault();
        if (!delta || delta == null || delta == 0) delta = event.originalEvent.wheelDelta;
        if (!delta || delta == null || delta == 0) delta = -1 * event.originalEvent.detail;
        if( delta < -9 ) { delta = -9 }; 
        var z = 1 + delta/10;
        z = delta > 0 ? 1 : -1;
        var svg_root = $('#stemma_graph svg').svg().svg('get').root();
        var g = $('g.graph', svg_root).get(0);
        if (g && ((z<1 && (g.getScreenCTM().a * start_element_height) > 4.0) || (z>=1 && (g.getScreenCTM().a * start_element_height) < 1000))) {
            var scaleLevel = z/10;
            current_scale = parseFloat( g.getAttribute( 'transform' ).split(/scale\(/)[1].split(')',1)[0].split(' ')[0] );
            new_transform = g.getAttribute( 'transform' ).replace( /scale\([^\)]*\)/, 'scale(' + (current_scale + scaleLevel) + ')' );
            g.setAttribute( 'transform', new_transform );
        }
    });
    
});
    </script>

[% END %]

    <div id="topbanner">
      <h1>Stemmaweb - a collection of tools for analysis of collated texts</h1>
      <span class="mainnav">[% IF c.user_exists %]Hello! [% c.user.get_object.email %] <a class="navlink" href="[% c.uri_for( '/logout' ) %]">Sign out</a> | [% ELSE %]<a class="navlink" onclick="window.open('[% c.uri_for( '/login' ) %]', 'loginwindow', 'height=385,width=445')">Login</a> | <a class="navlink" onclick="window.open('[% c.uri_for( '/register' ) %]', 'regwindow', 'height=385,width=445')">Register</a> | [% END %]<a class="navlink" href="[% c.uri_for( 'about.html' ) %]">About</a> </span>
    </div>
    <div id="directory_container">
      <h2>Text directory</h2>
      <div id="directory"></div>
[% IF c.user_exists -%]
	  <div class="button" id="new_trad_button" onClick="start_upload_dialog();">
	    <span>Add a new text tradition</span>
	  </div>
[% END %]
    </div>
    <div id="textinfo_waitbox">
    	<h3>Loading tradition information, please wait...</h3>
    	<img src="[% c.uri_for( 'images', 'ajax-loader.gif' ) %]" alt="Loading tradition info..." />
    </div>
    <div id="textinfo_container">
      <div id="textinfo_load_status"></div>
      <h2>Text <span class="texttitle"></span></h2>
      <form id="open_textinfo_edit" action="" method="GET" name="edit_textinfo">
        <div class="button" id="edit_textinfo_button"
        	onClick="$('#textinfo-edit-dialog').dialog('open')">
      	  <span>Modify information about this tradition</span>
        </div>
      </form>
      <ul>
      	  <li>is owned by <span id="owner_id"></span></li>
      	  <li>is <span id="not_public"></span>public</li>
      	  <li>has <span id="marked_language"></span> as its primary language</li>
	      <li>has <span id="witness_num"></span> witnesses: <span id="witness_list"></span></li>
      </ul>
      
      <div id="textinfo_container_buttons">
          <form id="stemma_pager" action="" method="GET" name="stemma_pager">
            <div id="stemma_pager_buttons">
              <div class="pager_left_button" id="stemma_pager_left_button"></div>
              <div class="pager_right_button" id="stemma_pager_right_button"></div>
            </div>
          </form>
          <form id="open_stemma_add" action="" method="GET" name="add_new_stemma">
            <div class="button" id="stemma_add_button" 
            	onClick="$('#stemmaseq').val('n'); $('#stemma-edit-dialog').dialog('open');">
          	  <span>Add a new stemma</span>
            </div>
          </form>
          <form id="open_stemma_edit" action="" method="GET" name="edit_current_stemma">
            <div class="button" id="stemma_edit_button" 
            	onClick="$('#stemmaseq').val(selectedStemmaID); $('#stemma-edit-dialog').dialog('open');">
          	  <span>Edit this stemma</span>
            </div>
          </form>
          <form id="run_stexaminer" action="" method="GET" name="run_stexaminer">
            <div class="button" id="stexaminer_button" onClick="$('#run_stexaminer').submit()">
          	  <span>Examine variants against this stemma</span>
            </div>
          </form>
          <form id="run_relater" action="" method="GET" name="run_relater">
            <div class="button" id="relater_button" onClick="$('#run_relater').submit()">
              <span>Run relationship mapper</span>
            </div>
          </form>
      </div>
      <div id="stemma_graph"></div>
    </div>

    <!-- Interim 'loading' message for directory box -->
    <div id="loading_message">
    	<h3>Loading texts, please wait...</h3>
    	<img src="[% c.uri_for( 'images', 'ajax-loader.gif' ) %]" alt="Loading tradition list..."/>
    </div>
    
    <!-- Textinfo editor dialog -->
    <div id="textinfo-edit-dialog" title="Edit information about this tradition">
      <div id="textinfo_edit_container">
    	<form id="edit_textinfo">
    		<label for="edit_name">Tradition name: </label>
    		<input id="edit_name" type="text" size="30" name="name"/><br/>
    		<label for="edit_language">Language: </label>
    		<input id="edit_language" type="text" size="12" name="language"/>
    		<label for="edit_public">Publicly viewable: </label>
    		<input id="edit_public" type="checkbox" name="public"/><br/>
[% IF c.user_exists -%]
[% IF c.user.get_object.is_admin -%]
    		<label for="edit_owner">Tradition owner: </label>
    		<input id="edit_owner" type="text" size="30" name="owner"/><br/>
[% END -%]
[% END -%]
		</form>
		<div id="edit_textinfo_status"></div>
	  </div>
    </div>
    
    <!-- Stemma dot editor dialog, simple textarea for now -->
    <div id="stemma-edit-dialog">
      <div id="stemma_edit_container">
    	<form id="edit_stemma">
    		<label for="dot_field">Dot definition for this stemma: </label><br/>
    		<textarea id="dot_field" rows="30" cols="40"></textarea>
    		<input id="stemmaseq" type="hidden" name="stemmaseq" val="n"/>
			<div id="edit_instructions">
				<p>All definitions begin with the line
					<pre>digraph stemma {</pre>
				and end with the line 
					<pre>}</pre>Please do not change these lines.</p>
				<p>First list each witness in your stemma, whether extant or lost /
				reconstructed / hypothetical, and assign them a class of either "extant"
				or "hypothetical". For example:</p><pre>  
	α [ class=hypothetical ]
	C [ class=extant ]
				</pre>
				<p>Next, list the direct links between witnesses, one per line. For example, if 
				witness C descends directly from witness α, note it as follows:</p><pre>
	α -> C
				</pre>
				<p>A witness may be the exemplar for any number of other witnesses, whether 
				extant or not; likewise, a witness may inherit from any number of other 
				witnesses. Use as may "A -> B" pairings as necessary to describe the links.</p>
			</div>
    	</form>
    	<div id="edit_stemma_status"></div>
      </div>
    </div>

    <!-- File upload dialog box -->
    <div id="upload-collation-dialog" title="Upload a collation">
      <div id="upload_container">
        <form id="new_tradition">
            <label for="new_name">Name of this text / tradition: </label>
            <input id="new_name" type="text" name="name" size="40"/><br/>
            <label for="new_lang">Primary language of the text: </label>
            <input id="new_lang" type="text" name="language" size="20"/><br/>
            <label for="new_public">Allow public display: </label>
            <input id="new_public" name="public" type="checkbox"/><br/>
            <div id="filelist"></div>
        <form>
        <div id="upload_status"></div>
      	<div>
      	  <h4>Supported file types / extensions:</h4>
      	  <ul>
      	    <li>*.txt - spreadsheet collation, tab-separated values</li>
      	    <li>*.csv - spreadsheet collation, comma-separated values</li>
      	    <li>*.xls - spreadsheet collation, Excel 97-2004 format</li>
      	    <li>*.xlsx - spreadsheet collation, Excel 2007 XML format</li>
      	    <li>*.xml - TEI XML parallel segmentation format</li>
      	    <li>*.xml - TEI XML export from Classical Text Editor</li>
      	    <li>*.xml - GraphML export from the CollateX tool</li>
      	  </ul>
      	  <p>All spreadsheet collations should be arranged with the witness sigla in the first row, and the words aligned by row each in its correct witness column.</p>
      	</div>
      </div>
    </div>    
[% PROCESS footer.tt %]
Commit	Line	Data
fb6e49b3	1	[% WRAPPER header.tt
fb6e49b3	2	pagetitle = "Stemmaweb - Text tradition tools"
538715bd	3	applicationjs = c.uri_for( 'js/componentload.js' )
fb6e49b3	4	%]
fb6e49b3	5	<script type="text/javascript">
75354c3a	6	var basepath = window.location.pathname
	7	if( basepath.lastIndexOf('/') == basepath.length - 1 ) {
	8	basepath = basepath.slice( 0, basepath.length - 1)
	9	};
f007ac1e	10	var selectedTextID;
75354c3a	11	var selectedTextInfo;
98a45925	12	var selectedStemmaID = -1;
98a45925	13	var stemmata = [];
40ed7ca6	14
40ed7ca6	15	function refreshDirectory () {
04469f3e	16	var lmesg = $('#loading_message').clone();
04469f3e	17	$('#directory').empty().append( lmesg.contents() );
69799996	18	$('#directory').load( "[% c.uri_for( 'directory' ) %]",
	19	function(response, status, xhr) {
	20	if (status == "error") {
	21	var msg = "An error occurred: ";
	22	$("#directory").html(msg + xhr.status + " " + xhr.statusText);
	23	}
40ed7ca6	24	}
	25	);
	26	}
	27
5cc32d47	28	function start_upload_dialog() {
	29	if( typeof uploader != 'undefined' ){ uploader.destroy() };
	30	$('#upload-collation-dialog').dialog('option', 'attach_uploader')();
9f7aeb53	31	$('#upload_status').empty();
5cc32d47	32	$('#upload_button').button('disable');
	33	$('#upload-collation-dialog').dialog('open');
	34	}
	35
40ed7ca6	36	$(document).ready( function() {
	37	// call out to load the directory div
	38	$('#textinfo_container').hide();
	39	$('#textinfo_waitbox').hide();
	40	refreshDirectory();
75354c3a	41
	42	// Set up the textinfo edit dialog
	43	$('#textinfo-edit-dialog').dialog({
	44	autoOpen: false,
	45	height: 200,
	46	width: 300,
	47	modal: true,
	48	buttons: {
	49	Save: function (evt) {
ce1c5863	50	$("#edit_textinfo_status").empty();
75354c3a	51	$(evt.target).button("disable");
	52	var requrl = "[% c.uri_for( '/textinfo' ) %]/" + selectedTextID;
	53	var reqparam = $('#edit_textinfo').serialize();
	54	$.post( requrl, reqparam, function (data) {
	55	// Reload the selected text fields
	56	selectedTextInfo = data;
	57	load_textinfo();
	58	// Reenable the button and close the form
	59	$(evt.target).button("enable");
	60	$('#textinfo-edit-dialog').dialog('close');
	61	}, 'json' );
	62	},
	63	Cancel: function() {
	64	$('#textinfo-edit-dialog').dialog('close');
	65	}
	66	},
	67	open: function() {
	68	$("#edit_textinfo_status").empty();
	69	// Populate the form fields with the current values
	70	// edit_(name, language, public, owner)
	71	$.each([ 'name', 'language', 'owner' ], function( idx, k ) {
	72	var fname = '#edit_' + k;
ce1c5863	73	// Special case: language Default is basically language null
	74	if( k == 'language' && selectedTextInfo[k] == 'Default' ) {
	75	$(fname).val( "" );
	76	} else {
	77	$(fname).val( selectedTextInfo[k] );
	78	}
75354c3a	79	});
	80	if( selectedTextInfo['public'] == true ) {
	81	$('#edit_public').attr('checked','true');
	82	} else {
	83	$('#edit_public').removeAttr('checked');
	84	}
	85	},
	86	}).ajaxError( function(event, jqXHR, ajaxSettings, thrownError) {
	87	$(event.target).parent().find('.ui-button').button("enable");
	88	if( ajaxSettings.url.indexOf( 'textinfo' ) > -1
	89	&& ajaxSettings.type == 'POST' ) {
	90	display_error( jqXHR, $("#edit_textinfo_status") );
	91	}
	92	});
	93
	94
	95	// Set up the stemma editor dialog
	96	$('#stemma-edit-dialog').dialog({
	97	autoOpen: false,
	98	height: 700,
	99	width: 600,
	100	modal: true,
	101	buttons: {
	102	Save: function (evt) {
ce1c5863	103	$("#edit_stemma_status").empty();
75354c3a	104	$(evt.target).button("disable");
	105	var stemmaseq = $('#stemmaseq').val();
	106	var requrl = "[% c.uri_for( '/stemma' ) %]/" + selectedTextID + "/" + stemmaseq;
	107	var reqparam = { 'dot': $('#dot_field').val() };
	108	// TODO We need to stash the literal SVG string in stemmata
	109	// somehow. Implement accept header on server side to decide
	110	// whether to send application/json or application/xml?
	111	$.post( requrl, reqparam, function (data) {
	112	// We received a stemma SVG string in return.
	113	// Update the current stemma sequence number
ce1c5863	114	selectedStemmaID = data.stemmaid;
75354c3a	115	// Stash the answer in our SVG array
ce1c5863	116	stemmata[selectedStemmaID] = data.stemmasvg;
75354c3a	117	// Display the new stemma
	118	load_stemma( selectedStemmaID );
	119	// Reenable the button and close the form
ce1c5863	120	$(evt.target).button("enable");
75354c3a	121	$('#stemma-edit-dialog').dialog('close');
ce1c5863	122	}, 'json' );
75354c3a	123	},
	124	Cancel: function() {
	125	$('#stemma-edit-dialog').dialog('close');
	126	}
	127	},
	128	open: function(evt) {
	129	$("#edit_stemma_status").empty();
	130	var stemmaseq = $('#stemmaseq').val();
	131	if( stemmaseq == 'n' ) {
	132	// If we are creating a new stemma, populate the textarea with a
	133	// bare digraph.
	134	$(evt.target).dialog('option', 'title', 'Add a new stemma')
	135	$('#dot_field').val( "digraph stemma {\n\n}" );
	136	} else {
	137	// If we are editing a stemma, grab its stemmadot and populate the
	138	// textarea with that.
	139	$(evt.target).dialog('option', 'title', 'Edit selected stemma')
	140	$('#dot_field').val( 'Loading, please wait...' );
	141	var doturl = "[% c.uri_for( '/stemmadot' ) %]/" + selectedTextID + "/" + stemmaseq;
	142	$.getJSON( doturl, function (data) {
	143	// Re-insert the line breaks
	144	var dotstring = data.dot.replace(/\\|n/gm, "\n");
	145	$('#dot_field').val( dotstring );
	146	});
	147	}
	148	},
	149	}).ajaxError( function(event, jqXHR, ajaxSettings, thrownError) {
	150	$(event.target).parent().find('.ui-button').button("enable");
	151	if( ajaxSettings.url.indexOf( 'stemma' ) > -1
	152	&& ajaxSettings.type == 'POST' ) {
	153	display_error( jqXHR, $("#edit_stemma_status") );
	154	}
	155	});
	156
40ed7ca6	157	$('#upload-collation-dialog').dialog({
	158	autoOpen: false,
	159	height: 325,
	160	width: 480,
	161	modal: true,
	162	buttons: {
5cc32d47	163	pick: {
	164	text: "Pick File",
	165	id: "pick_uploadfile_button",
	166	click: function() {}
	167	},
	168	upload: {
	169	text: 'Upload',
	170	id: 'upload_button',
	171	click: function() {
	172	$('#upload_status').empty();
	173	uploader.start();
	174	return false;
	175	}
	176	},
75354c3a	177	Cancel: function() {
5cc32d47	178	$('#upload-collation-dialog').dialog('close');
40ed7ca6	179	}
5cc32d47	180	},
	181	attach_uploader: function() {
	182	create_uploader( "[% c.uri_for ( '/newtradition' ) %]" );
	183	$('#filelist').empty().html( 'Use the \'Pick\' button to choose a source file…' );
40ed7ca6	184	}
5cc32d47	185	});
40803b80	186
	187	$('#stemma_graph').mousedown( function(evt) {
	188	evt.stopPropagation();
	189	$('#stemma_graph').data( 'mousedown_xy', [evt.clientX, evt.clientY] );
	190	$('body').mousemove( function(evt) {
	191	mouse_scale = 1; // for now, was: mouse_scale = svg_root_element.getScreenCTM().a;
	192	dx = (evt.clientX - $('#stemma_graph').data( 'mousedown_xy' )[0]) / mouse_scale;
	193	dy = (evt.clientY - $('#stemma_graph').data( 'mousedown_xy' )[1]) / mouse_scale;
	194	$('#stemma_graph').data( 'mousedown_xy', [evt.clientX, evt.clientY] );
	195	var svg_root = $('#stemma_graph svg').svg().svg('get').root();
	196	var g = $('g.graph', svg_root).get(0);
	197	current_translate = g.getAttribute( 'transform' ).split(/translate\(/)[1].split(')',1)[0].split(' ');
	198	new_transform = g.getAttribute( 'transform' ).replace( /translate\([^\)]*\)/, 'translate(' + (parseFloat(current_translate[0]) + dx) + ' ' + (parseFloat(current_translate[1]) + dy) + ')' );
	199	g.setAttribute( 'transform', new_transform );
	200	evt.returnValue = false;
	201	evt.preventDefault();
	202	return false;
	203	});
	204	$('body').mouseup( function(evt) {
	205	$('body').unbind('mousemove');
	206	$('body').unbind('mouseup');
	207	});
	208	});
	209
	210	$('#stemma_graph').mousewheel(function (event, delta) {
	211	event.returnValue = false;
	212	event.preventDefault();
	213	if (!delta \|\| delta == null \|\| delta == 0) delta = event.originalEvent.wheelDelta;
	214	if (!delta \|\| delta == null \|\| delta == 0) delta = -1 * event.originalEvent.detail;
	215	if( delta < -9 ) { delta = -9 };
	216	var z = 1 + delta/10;
	217	z = delta > 0 ? 1 : -1;
	218	var svg_root = $('#stemma_graph svg').svg().svg('get').root();
	219	var g = $('g.graph', svg_root).get(0);
	220	if (g && ((z<1 && (g.getScreenCTM().a * start_element_height) > 4.0) \|\| (z>=1 && (g.getScreenCTM().a * start_element_height) < 1000))) {
	221	var scaleLevel = z/10;
	222	current_scale = parseFloat( g.getAttribute( 'transform' ).split(/scale\(/)[1].split(')',1)[0].split(' ')[0] );
	223	new_transform = g.getAttribute( 'transform' ).replace( /scale\([^\)]*\)/, 'scale(' + (current_scale + scaleLevel) + ')' );
	224	g.setAttribute( 'transform', new_transform );
	225	}
	226	});
	227
40ed7ca6	228	});
fb6e49b3	229	</script>
	230
	231	[% END %]
	232
7439e248	233	<div id="topbanner">
7439e248	234	<h1>Stemmaweb - a collection of tools for analysis of collated texts</h1>
69799996	235	<span class="mainnav">[% IF c.user_exists %]Hello! [% c.user.get_object.email %] <a class="navlink" href="[% c.uri_for( '/logout' ) %]">Sign out</a> \| [% ELSE %]<a class="navlink" onclick="window.open('[% c.uri_for( '/login' ) %]', 'loginwindow', 'height=385,width=445')">Login</a> \| <a class="navlink" onclick="window.open('[% c.uri_for( '/register' ) %]', 'regwindow', 'height=385,width=445')">Register</a> \| [% END %]<a class="navlink" href="[% c.uri_for( 'about.html' ) %]">About</a> </span>
7439e248	236	</div>
fb792f63	237	<div id="directory_container">
fb792f63	238	<h2>Text directory</h2>
04469f3e	239	<div id="directory"></div>
98a45925	240	[% IF c.user_exists -%]
5cc32d47	241	<div class="button" id="new_trad_button" onClick="start_upload_dialog();">
98a45925	242	<span>Add a new text tradition</span>
	243	</div>
	244	[% END %]
	245	</div>
	246	<div id="textinfo_waitbox">
75354c3a	247	<h3>Loading tradition information, please wait...</h3>
75354c3a	248	<img src="[% c.uri_for( 'images', 'ajax-loader.gif' ) %]" alt="Loading tradition info..." />
98a45925	249	</div>
98a45925	250	<div id="textinfo_container">
04469f3e	251	<div id="textinfo_load_status"></div>
98a45925	252	<h2>Text <span class="texttitle"></span></h2>
ea39d630	253	<form id="open_textinfo_edit" action="" method="GET" name="edit_textinfo">
	254	<div class="button" id="edit_textinfo_button"
	255	onClick="$('#textinfo-edit-dialog').dialog('open')">
	256	<span>Modify information about this tradition</span>
	257	</div>
	258	</form>
98a45925	259	<ul>
75354c3a	260	<li>is owned by <span id="owner_id"></span></li>
	261	<li>is <span id="not_public"></span>public</li>
	262	<li>has <span id="marked_language"></span> as its primary language</li>
98a45925	263	<li>has <span id="witness_num"></span> witnesses: <span id="witness_list"></span></li>
98a45925	264	</ul>
98a45925	265
a35b3190	266	<div id="textinfo_container_buttons">
a35b3190	267	<form id="stemma_pager" action="" method="GET" name="stemma_pager">
ea39d630	268	<div id="stemma_pager_buttons">
65a0c9c6	269	<div class="pager_left_button" id="stemma_pager_left_button"></div>
65a0c9c6	270	<div class="pager_right_button" id="stemma_pager_right_button"></div>
a35b3190	271	</div>
a35b3190	272	</form>
75354c3a	273	<form id="open_stemma_add" action="" method="GET" name="add_new_stemma">
	274	<div class="button" id="stemma_add_button"
	275	onClick="$('#stemmaseq').val('n'); $('#stemma-edit-dialog').dialog('open');">
	276	<span>Add a new stemma</span>
	277	</div>
	278	</form>
	279	<form id="open_stemma_edit" action="" method="GET" name="edit_current_stemma">
	280	<div class="button" id="stemma_edit_button"
	281	onClick="$('#stemmaseq').val(selectedStemmaID); $('#stemma-edit-dialog').dialog('open');">
	282	<span>Edit this stemma</span>
	283	</div>
	284	</form>
a35b3190	285	<form id="run_stexaminer" action="" method="GET" name="run_stexaminer">
	286	<div class="button" id="stexaminer_button" onClick="$('#run_stexaminer').submit()">
	287	<span>Examine variants against this stemma</span>
	288	</div>
	289	</form>
	290	<form id="run_relater" action="" method="GET" name="run_relater">
	291	<div class="button" id="relater_button" onClick="$('#run_relater').submit()">
	292	<span>Run relationship mapper</span>
	293	</div>
	294	</form>
	295	</div>
98a45925	296	<div id="stemma_graph"></div>
7439e248	297	</div>
fb6e49b3	298
04469f3e	299	<!-- Interim 'loading' message for directory box -->
	300	<div id="loading_message">
	301	<h3>Loading texts, please wait...</h3>
75354c3a	302	<img src="[% c.uri_for( 'images', 'ajax-loader.gif' ) %]" alt="Loading tradition list..."/>
	303	</div>
	304
	305	<!-- Textinfo editor dialog -->
	306	<div id="textinfo-edit-dialog" title="Edit information about this tradition">
	307	<div id="textinfo_edit_container">
	308	<form id="edit_textinfo">
	309	<label for="edit_name">Tradition name: </label>
	310	<input id="edit_name" type="text" size="30" name="name"/><br/>
	311	<label for="edit_language">Language: </label>
	312	<input id="edit_language" type="text" size="12" name="language"/>
	313	<label for="edit_public">Publicly viewable: </label>
	314	<input id="edit_public" type="checkbox" name="public"/><br/>
	315	[% IF c.user_exists -%]
	316	[% IF c.user.get_object.is_admin -%]
ce1c5863	317	<label for="edit_owner">Tradition owner: </label>
75354c3a	318	<input id="edit_owner" type="text" size="30" name="owner"/><br/>
	319	[% END -%]
	320	[% END -%]
	321	</form>
	322	<div id="edit_textinfo_status"></div>
	323	</div>
	324	</div>
	325
	326	<!-- Stemma dot editor dialog, simple textarea for now -->
	327	<div id="stemma-edit-dialog">
	328	<div id="stemma_edit_container">
	329	<form id="edit_stemma">
	330	<label for="dot_field">Dot definition for this stemma: </label><br/>
	331	<textarea id="dot_field" rows="30" cols="40"></textarea>
	332	<input id="stemmaseq" type="hidden" name="stemmaseq" val="n"/>
	333	<div id="edit_instructions">
	334	<p>All definitions begin with the line
	335	<pre>digraph stemma {</pre>
	336	and end with the line
	337	<pre>}</pre>Please do not change these lines.</p>
	338	<p>First list each witness in your stemma, whether extant or lost /
	339	reconstructed / hypothetical, and assign them a class of either "extant"
	340	or "hypothetical". For example:</p><pre>
	341	α [ class=hypothetical ]
	342	C [ class=extant ]
	343	</pre>
	344	<p>Next, list the direct links between witnesses, one per line. For example, if
	345	witness C descends directly from witness α, note it as follows:</p><pre>
	346	α -> C
	347	</pre>
	348	<p>A witness may be the exemplar for any number of other witnesses, whether
	349	extant or not; likewise, a witness may inherit from any number of other
	350	witnesses. Use as may "A -> B" pairings as necessary to describe the links.</p>
	351	</div>
	352	</form>
	353	<div id="edit_stemma_status"></div>
	354	</div>
04469f3e	355	</div>
40ed7ca6	356
	357	<!-- File upload dialog box -->
	358	<div id="upload-collation-dialog" title="Upload a collation">
5cc32d47	359	<div id="upload_container">
5cc32d47	360	<form id="new_tradition">
75354c3a	361	<label for="new_name">Name of this text / tradition: </label>
	362	<input id="new_name" type="text" name="name" size="40"/><br/>
	363	<label for="new_lang">Primary language of the text: </label>
	364	<input id="new_lang" type="text" name="language" size="20"/><br/>
	365	<label for="new_public">Allow public display: </label>
	366	<input id="new_public" name="public" type="checkbox"/><br/>
5cc32d47	367	<div id="filelist"></div>
	368	<form>
	369	<div id="upload_status"></div>
40ed7ca6	370	<div>
	371	<h4>Supported file types / extensions:</h4>
	372	<ul>
	373	<li>*.txt - spreadsheet collation, tab-separated values</li>
	374	<li>*.csv - spreadsheet collation, comma-separated values</li>
	375	<li>*.xls - spreadsheet collation, Excel 97-2004 format</li>
	376	<li>*.xlsx - spreadsheet collation, Excel 2007 XML format</li>
	377	<li>*.xml - TEI XML parallel segmentation format</li>
	378	<li>*.xml - TEI XML export from Classical Text Editor</li>
	379	<li>*.xml - GraphML export from the CollateX tool</li>
	380	</ul>
	381	<p>All spreadsheet collations should be arranged with the witness sigla in the first row, and the words aligned by row each in its correct witness column.</p>
	382	</div>
5cc32d47	383	</div>
40ed7ca6	384	</div>
fb6e49b3	385	[% PROCESS footer.tt %]