<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs
	title="Admin - Test Passages"
	author_email="scribe777@gmail.com"
	author="CrossWire"
	description="Test Passages Administration"
	screenshot="http://crosswire.org/images/crosswire.gif"
	thumbnail="http://crosswire.org/images/crosswire.gif"
	scrolling="false"
   >
  <Require feature="dynamic-height"/>
  <Require feature="opensocial-0.7"/>
  <Require feature="pubsub-2">
  <Param name="topics">
    <![CDATA[ 
    <Topic title="Manuscript Page Annotation Add" name="interedition.annotation.add"
            description="Add An Annotation To A Manuscript Page" type="string"
            subscribe="true"/>
    <Topic title="Manuscript Selection" name="interedition.annotation.selected"
            description="Select a Manuscript Page Annotation" type="string"
            subscribe="true"/>
    <Topic title="Manuscript Page Selection" name="interedition.page.selected"
            description="Select a Manuscript Page" type="string"
            subscribe="true"/>
    ]]>
  </Param>
</Require>
</ModulePrefs>

<UserPref name="height" datatype="enum" display_name="Gadget Height" default_value="400">
	<EnumValue value="200" display_value="Short"/>
	<EnumValue value="400" display_value="Medium"/>
	<EnumValue value="600" display_value="Tall"/>
	<EnumValue value="-1" display_value="Dynamic"/>
</UserPref>

<Content type="html">
<![CDATA[

	<link rel="stylesheet" type="text/css" href="/community/js/jquery-ui/jquery-ui.css"/>

	<script type="text/javascript" src="/community/js/jquery/jquery.min.js"></script>
	<script type="text/javascript" src="/community/js/jquery-ui/jquery-ui.min.js"></script>
	<script type="text/javascript" src="/community/js/URI.min.js"></script>
	<script type="text/javascript" src="/community/js/jquery/jquery.cookie.js"></script>


<script type="text/javascript">

	var MARGIN=0;
	var currentDocID = null;
	var currentInstID = null;
	var currentRowID = null;
	var dialog = null;
	var deleteReadingDialog = null;
	var viewer = null;
	var servicesURL = '';
	var imagesURL = '';
	var preferredHeight = 500;

</script>

<style type="text/css">
table {
	border-collapse: collapse;
}

table#smallsize {
	border-collapse: collapse;
	width: 100%;
}

td, th {
	padding: 0.5em;
	border: 1px solid #CCC;
	/*white-space: nowrap;
	overflow: hidden;*/
}


thead, tfoot {
	background-color: #DDD;
}

tr.rowodd {
	background-color: #FFF;
}

tr.roweven {
	background-color: #F2F2F2;
}

.sortcol {
	cursor: pointer;
	padding-right: 20px;
	background-repeat: no-repeat;
	background-position: right center;
}
.sortasc {
	background-color: #DDFFAC;
	background-image: url(../images/up.gif);
}
.sortdesc {
	background-color: #B9DDFF;
	background-image: url(../images/down.gif);
}
.nosort {
	cursor: default;
}

.urg1, .urg2, .urg3, .urg4, .urg5 {
	padding: 3px;
	text-align: center;
	border: 1px solid #333;
	width: 3em;
}

.urg1 {
	background-color: #FFFACD;
}
.urg2 {
	background-color: #FFD700;
}
.urg3 {
	background-color: #FFA500;
}
.urg4 {
	background-color: #E13E00;
}
.urg5 {
	background-color: Red;
}

th.resize-handle-active {
	cursor: e-resize;
}

div.resize-handle {
	cursor: e-resize;
	width: 2px;
	border-right: 1px dashed #1E90FF;
	position:absolute;
	top:0;
	left:0;
}
	
body {
	font-family: arial, sans-serif;
	font-size: 14px;
}
	

a img {
	border: 0;
}

.fieldInput {
	width:100%;
}

.fieldValue {
	text-align:left;
	width:100%;
}

.secondary {
	font-size:small;
}

.fieldName {
	text-align:right;
	white-space:nowrap;
}

.srid {
	text-align:right;
}

.rid {
	text-align:right;
}

.readingCount {
	text-align:right;
}

.readingText {
	width: 100%;
}

.readings {
	margin: 0px;
	padding : 0px;
}

.closeButton {
	float:right;
	background-image: url('/community/images/dialog_sprites.png');
	background-position: 50% -17px;
	background-repeat: no-repeat;
	height: 16px; width: 16px;
	cursor:pointer;
}

/* seems this has trouble loading a background image via opensocial proxy or something, so we'll just set it to white */
.ui-widget-content {
	background: white !important;
}
</style>


<div>
<button id="addButton"><img src="/community/images/new.png"/> New Test Passage</button>
<span id="currentContext" style="margin:0 0 0 20px;"></span>
</div>
<div style="overflow:auto; border: none 0px; width:100%;min-height:300px;" class="fillPage" id="contentDiv">
<table class="" width="100%">
	<thead>
		<tr><th class="sortfirstasc" style="" id="idCol">ID</th><th id="verseCol">Verse</th><th id="contextCol">Context</th><th id="readingsCol">Readings (id/text/wit. count)</th><th colspan="2">Actions</th></tr>
	</thead>
	<tfoot>
	</tfoot>
	<tbody id="dataTable">
	</tbody>
</table>
</div>

<script>

function modifyRow_callback(o) {
	var xml = $.parseXML(o.text);
	var error = $(xml).find('error');
	if (error.length > 0) {
		alert($(error).attr('message'));
		return;
	}
	var rowid = $(xml).attr('rowid');
	// we just created a new feature
	if (rowid) {
		$('#rowid').val(rowid);
	}
	else {
		loadRecords();
	}
}


function saveRow() {
	var params = {};
	var postData = {
		sessionHash        : $.cookie('ntvmrSession'),
		segmentID          : $('#rowid').val(),
		name               : $('#segmentName').val(),
		verse              : $('#segmentVerse').val(),
		contextDescription : $('#segmentContext').val()
	};

	params[gadgets.io.RequestParameters.METHOD] = gadgets.io.MethodType.POST;
	params[gadgets.io.RequestParameters.POST_DATA] = gadgets.io.encodeValues(postData);
	var url = servicesURL + '/variant/segment/put/';
	gadgets.io.makeRequest(url, modifyRow_callback, params);
}

var taskTypes = [ '', 'Imaging', 'Indexing', 'Transcribing', 'Variant Selection' ];

var segments = {};

function loadRecords() {
	$('#dataTable').html('<tr><td colspan="6"><center><image src="'+imagesURL+'/loading.gif"/></center><br/><center><h1>Loading.  Please wait...</h1></center></td></tr>');
	var content = '';
	var params = {};
	var postData = {
		sessionHash : $.cookie('ntvmrSession'),
		groupID     : 1
	};

	params[gadgets.io.RequestParameters.METHOD] = gadgets.io.MethodType.POST;
	params[gadgets.io.RequestParameters.POST_DATA] = gadgets.io.encodeValues(postData);
	var url = servicesURL+'/variant/list/';
	gadgets.io.makeRequest(url, function(o) {
		var xml = $.parseXML(o.text);
		segments = {};
		$(xml).find('segment').each(function () {
			var segment = {
				sid : $(this).attr('segID'),
				verse : $(this).attr('verse'),
				contextDescription : $(this).attr('contextDescription')
			}
			
			content += '<tr class="datarow" id="sid'+segment.sid+'">';
			content += '<td class="sid">'+segment.sid+'</td>';
			content += '<td class="verse">'+segment.verse+'</td>';
			content += '<td class="contextDescription">'+segment.contextDescription+'</td>';
			content += '<td class="readings"><table style="width:100%;"><tbody>';

			var readings = [];
			$(this).find('reading').each(function () {
				readings.push( {
					srid        : $(this).attr('readingID'),
					readingText : $(this).text(),
					witnesses   : $.trim($(this).attr('witnesses'))
				});
			});

			readings.sort(function(a,b) { return b.witnesses.split(' ').length - a.witnesses.split(' ').length; });
			segment.readings = {};

			for (var i = 0; i < readings.length; ++i) {
				var r = readings[i];
				var count = r.witnesses.length > 0 ? r.witnesses.split(' ').length : 0;
				segment.readings[r.srid] = r;
				content += '<tr class="datasubrow" id="srid'+r.srid+'">';
				content += '<td class="srid">'+r.srid+'</td>';
				content += '<td class="readingText" title="'+r.witnesses+'">'+r.readingText;
				content += '<span class="closeButton" title="Delete" onclick="deleteReading('+segment.sid+', '+r.srid+')"/>';
				content +- '</td>';
				content += '<td class="readingCount" title="'+r.witnesses+'">'+count;
				content +- '</td>';
				content += '</tr>';
			}

			content += '</tbody></table></td>';
			content += '<td><a href="#" onclick="editRow('+segment.sid+');return false;" title="Edit This Test Passage"><img src="'+imagesURL+'/edit.png"/></a></td>';
			content += '<td><a href="#" onclick="deleteRow('+segment.sid+');return false;" title="Delete This Test Passage"><img src="'+imagesURL+'/delete.png"/></a></td>';
			content += '</tr>';
			segments[segment.sid] = segment;
		});
		$('#dataTable').html(content);
		$('.datarow').click(function () {
			dataRowClicked(this);
		});
		setSelectedRow(currentRowID);
		if (gadgets.util.hasFeature('dynamic-height') && preferredHeight == -1) gadgets.window.adjustHeight();
		setTimeout(function() {
			if (gadgets.util.hasFeature('dynamic-height') && preferredHeight == -1) gadgets.window.adjustHeight();
			expandFillPageClients();
		}, 100);
	}, params);
}


function deleteReading(sid, srid) {
	var s = segments[sid];
	var r = s.readings[srid];
	var count = r.witnesses.length > 0 ? r.witnesses.split(' ').length : 0;
	deleteReadingDialog.dialog('open');
	$('#defaultDeleteReadingAction').prop('checked', true);
	$('#sid').val(sid);
	$('#srid').val(srid);
	$('#readingCount').html(count);
	$('#mergeReadingID').html('');
	for (i in s.readings) {
		if (i != srid) {
			$('#mergeReadingID').append('<option value="'+i+'">'+s.readings[i].readingText+'</option>');
		}
		else {
			$('#currentReading').html(s.readings[i].readingText);
		}
	}
}


function reassignSegmentReading(from, to, callback) {

	var params = {};
	var postData = {
		sessionHash          : $.cookie('ntvmrSession'),
		fromSegmentReadingID : from,
		toSegmentReadingID   : to
	}
	params[gadgets.io.RequestParameters.METHOD] = gadgets.io.MethodType.POST;
	params[gadgets.io.RequestParameters.POST_DATA] = gadgets.io.encodeValues(postData);
	var url = servicesURL + '/variant/reading/reassign/';
	gadgets.io.makeRequest(url, function(o) {
		var xml = $.parseXML(o.text);
		var error = $(xml).find('error');
		if (error.length > 0) {
			alert($(error).attr('message'));
			return;
		}
		if (callback) callback();
	}, params);
}


function deleteSegmentReading(segID, callback) {

	var params = {};
	var postData = {
		sessionHash      : $.cookie('ntvmrSession'),
		segmentReadingID : segID
	}
	params[gadgets.io.RequestParameters.METHOD] = gadgets.io.MethodType.POST;
	params[gadgets.io.RequestParameters.POST_DATA] = gadgets.io.encodeValues(postData);
	var url = servicesURL + '/variant/reading/delete/';
	gadgets.io.makeRequest(url, function(o) {
		var xml = $.parseXML(o.text);
		var error = $(xml).find('error');
		if (error.length > 0) {
			alert($(error).attr('message'));
			return;
		}
		if (callback) callback();
	}, params);
}


function finishReadingDelete() {
	var action = $('input[name=deleteReadingAction]:checked').val();
	if (confirm('Are you sure you want to '+action+' this reading?')) {
		if (action == 'merge') {
			reassignSegmentReading($('#srid').val(), $('#mergeReadingID').val(), function() {
				deleteSegmentReading($('#srid').val());
			});
		}
		else {
			deleteSegmentReading($('#srid').val());
		}
	}
}


function deleteRow(rowid) {
	setSelectedRow(rowid);
	if (rowid != null) {
		if (confirm('Are you sure you want to delete this project?')) {
			var params = {};
			var postData = {
				sessionHash : $.cookie('ntvmrSession'),
				projectID   : rowid
			}
			params[gadgets.io.RequestParameters.METHOD] = gadgets.io.MethodType.POST;
			params[gadgets.io.RequestParameters.POST_DATA] = gadgets.io.encodeValues(postData);
			var url = servicesURL + '/projectmanagement/project/delete/';
			gadgets.io.makeRequest(url, modifyRow_callback, params);
		}
	}
}



function editRow(rowid) {
	var params = {};
	var postData = {
		sessionHash : $.cookie('ntvmrSession'),
		segmentID : rowid
	};
	setSelectedRow(rowid);
	params[gadgets.io.RequestParameters.METHOD] = gadgets.io.MethodType.POST;
	params[gadgets.io.RequestParameters.POST_DATA] = gadgets.io.encodeValues(postData);
	var url = servicesURL + '/variant/segment/get/';
	gadgets.io.makeRequest(url, function(o) {
		var xml = $.parseXML(o.text);
		var f = $(xml).find('segment:first');
		dialog.dialog('open');
		$('#rowid').val($(f).attr('segID'));
		$('#segmentName').val($(f).attr('name'));
		$('#segmentVerse').val($(f).attr('verse'));
		$('#segmentContext').val($(f).find('contextDescription').text());
	}, params);
}


function dataRowClicked(row) {
	var rid = $(row).attr('id').substring(3);
	setSelectedRow(rid);
	if (gadgets.util.hasFeature('pubsub-2')) gadgets.Hub.publish("interedition.project.selected", rid);
}

function setSelectedRow(rowid) {
	$('.datarow').css('background-color', '#FFFFFF');

	if ($('#rid'+rowid).length) {
		currentRowID = rowid;
		$('#rid'+rowid).css('background-color', '#E2E2E2');
	}
	else currentRowID = null;
}


function loadUserGroups() {
	var url = servicesURL + '/projectmanagement/usergroup/list/';
	var params = {};
	var postData = {
		sessionHash : $.cookie('ntvmrSession'),
	};
	params[gadgets.io.RequestParameters.METHOD] = gadgets.io.MethodType.POST;
	params[gadgets.io.RequestParameters.POST_DATA] = gadgets.io.encodeValues(postData);
	gadgets.io.makeRequest(url, function(o) {
		var xml = $($.parseXML(o.text)).find('userGroups');
		var currentValue = $('#userGroup').val();
		var t = '';
		$(xml).children('userGroup').each( function() {
			var title = $(this).attr('description');
			t += '<option title="'+title+'">'+$(this).attr('name')+'</option>';
		});
		$('#userGroup').html(t);
	}, params);
}


function loadUserDocLists() {
	var url = servicesURL + '/documentgroup/get/';
	var params = {};
	var postData = {
		userName : viewer.getDisplayName(),
		detail   : 'complete'
	};
	params[gadgets.io.RequestParameters.METHOD] = gadgets.io.MethodType.POST;
	params[gadgets.io.RequestParameters.POST_DATA] = gadgets.io.encodeValues(postData);
	gadgets.io.makeRequest(url, function(o) {
		var xml = $($.parseXML(o.text)).find('documentGroups');
		var currentValue = $('#userDocLists').val();
		var t = '';
		$(xml).children('documentGroup').each( function() {
			var title = $(this).children('description').text();
			t += '<option value="'+$(this).attr('documentGroupID')+'" title="'+title+'">'+$(this).attr('name')+'</option>';
		});

		if ($(xml).children('userGroup').length > 0) {
			t += '<optgroup label="-----"></optgroup>';
		}
		$(xml).children('userGroup').each( function() {
			t += '<optgroup label="'+$(this).attr('name')+'">';
			$(this).children('documentGroup').each( function() {
				var title = $(this).children('description').text();
				t += '<option value="'+$(this).attr('documentGroupID')+'" title="'+title+'">'+$(this).attr('name')+'</option>';
			});
			t += '</optgroup>';
		});

		$('#documentGroupID').html(t);
	}, params);
}

function loaded() {

	servicesURL = URI('../../vmr/api').absoluteTo(gadgets.util.getUrlParameters()['url']);
	imagesURL   = URI('../../images').absoluteTo(gadgets.util.getUrlParameters()['url']);
	var prefs = new gadgets.Prefs();
	preferredHeight = parseInt(prefs.getString('height'));
	if (gadgets.util.hasFeature('dynamic-height')) gadgets.window.adjustHeight(preferredHeight == -1 ? 500 : preferredHeight);
	$('#contentDiv').css('overflow', (gadgets.util.hasFeature('dynamic-height') && preferredHeight == -1) ? 'visible' : 'auto');

	var req = opensocial.newDataRequest();
	req.add(req.newFetchPersonRequest('VIEWER'), 'viewer');
	req.send(function(data) {
		viewer = data.get('viewer').getData();
		dialog = $('#editRowDialog').dialog({
			autoOpen: false,
			open : function(event, ui) {
			},
			close : function(event, ui) { 
			},
        position: 
        {
            my: 'left', 
            at: 'right', 
            of: event
        },
			width: gadgets.window.getViewportDimensions().width-24,
			title: 'Edit Test Passage'
		});

		$('#addButton').click(function() {
			dialog.dialog('open');
			$('#rowid').val('');
			$('#segmentName').val('');
			$('#segmentVerse').val('');
			$('#segmentContext').val('');
			return false;
		});

		$('#doSave').click(function() {
			saveRow();
			dialog.dialog('close');
			return false;
		});

		deleteReadingDialog = $('#deleteReadingDialog').dialog({
			autoOpen: false,
			open : function(event, ui) {
			},
			close : function(event, ui) { 
			},
			width: gadgets.window.getViewportDimensions().width-24,
			title: 'Delete A Segment Reading'
		});

		$('#doReadingDelete').click(function() {
			finishReadingDelete();
			deleteReadingDialog.dialog('close');
			return false;
		});

		expandFillPageClients();
		$(window).resize(function() {
			expandFillPageClients();
		});

		loadRecords();

	});
}



function clearExpandFillPageClients() {
	$('.fillPage').each(function () {
		$(this).css('height', '');
	});
}
function expandFillPageClients() {
	$('.fillPage').each(function () {
		$(this).height(gadgets.window.getViewportDimensions().height - $(this).offset().top - MARGIN);
	});
}



gadgets.HubSettings.onConnect = function(hum, suc, err) {
	loaded();
};


</script>

<div style="font-size: small;" id="editRowDialog">
<form id="editRowForm">
<input type="hidden" id="username" name="username" value="" />
	<table style="width:100%; font-size: small;" >
	<tbody>
		<tr><th>Verse</th><td><input style="width:100%;" id="segmentVerse" title="Verse where this test passage starts"/></td></tr>
		<tr><th>Test Passage Name</th><td><input style="width:100%;" id="segmentName" title="Optional name (or number) for this test passage"/></td></tr>
		<tr><th>Context Description</th><td><input style="width:100%;" id="segmentContext" title="Context to help the user know where exactly the test passage is located, e.g., ειρηνη απο ... ο ων"/></td></tr>
	</tbody>
	</table>
</form>
<button id="doSave"><span> Save <img style="vertical-align: middle;" src="../../images/save.png"/></span></button>
</div>

<div style="font-size: small;" id="deleteReadingDialog">
<form id="deleteReadingForm">
<input type="hidden" id="sid" name="sid" value="" />
<input type="hidden" id="srid" name="srid" value="" />
<p>The reading you have chosen to delete is assigned to witnesses (<span id="readingCount"></span>).</p>
<p>Would you like to:</p>
	<table style="width:100%; font-size: small;" >
	<tbody>
		<tr><td style="text-align:right;"><input type="radio" name="deleteReadingAction" value="delete"/></td><td>Clear all witness assignments to this reading.</td></tr>
		<tr><td style="text-align:right;"><input id="defaultDeleteReadingAction" type="radio" name="deleteReadingAction" value="merge"/></td><td>Re-assign witnesses to reading (from/to):<br/><span id="currentReading"></span></br><select style="width:100%;" id="mergeReadingID"></select></td></tr>
	</tbody>
	</table>
</form>
<button id="doReadingDelete"><span> Save <img style="vertical-align: middle;" src="../../images/save.png"/></span></button>
</div>

]]>
</Content>
</Module>


