[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 textOnLoad = "[% withtradition %]";
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);
			} else {
				if( textOnLoad != "" ) {
					// Call the click callback for the relevant text, if it is
					// in the page.
					$('#'+textOnLoad).click();
					textOnLoad = "";
				}
			}
		}
	);
}

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