<?xml version="1.0" encoding="UTF-8" ?>
<%
response.setContentType("text/xml");

%>
<Module>
  <ModulePrefs
	title="Variant Witness Selection"
	author_email="scribe777@gmail.com"
	author="CrossWire"
	description="Variant Witness Selection"
	screenshot="http://crosswire.org/images/crosswire.gif"
	thumbnail="http://crosswire.org/images/crosswire.gif"
	scrolling="true"
   >
  <Require feature="dynamic-height"/>
    <Require feature="opensocial-0.8" />
<Require feature="pubsub-2">
  <Param name="topics">
    <![CDATA[ 
    <Topic title="Manuscript Selection" name="interedition.manuscript.selected"
            description="Select a Manuscript" 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="800">
	<EnumValue value="200" display_value="Short"/>
	<EnumValue value="400" display_value="Medium"/>
	<EnumValue value="600" display_value="Tall"/>
	<EnumValue value="800" display_value="Giant"/>
</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 pageURL = null;
	var servicesURL = '';
	var imagesURL = '';
	var currentDocID = null;
	var currentSegmentID = null;
	var viewer = null;
	var dialog = null;

	$(document).ready(function() {
		dialog = $('#addReadingDialog').dialog({
			autoOpen: false,
			open : function(event, ui) {
				dialogOpen = true;
			},
			close : function(event, ui) { 
				dialogOpen = false;
			},
			position: 'top',
			width: gadgets.window.getViewportDimensions().width-24,
			maxHeight: gadgets.window.getViewportDimensions().height-24,
			title: 'Add Reading'
		});
		$('#doSaveNew').click(function() {
			cancelRestore = null;
			dialog.dialog('close');
			saveNewReading();
			return false;
		});
});
	
</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;
}

.imageborder {
	border-width: 7px;
	border-style: hidden;
	float:left;
}

.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;
}

</style>

<div>
Document ID: <input name="docID" size="5" id="docID" onKeyPress="return docIDKeyPressed('docID', event);"/>
</div>

<div>
<table class="" width="100%">
	<thead>
		<tr><th class="sortfirstasc" id="targetdocID"></th></tr>
	</thead>
	<tfoot>
	</tfoot>
	<tbody id="contentTable">
	</tbody>
</table>
</div>

<script type="text/javascript">

var moreHands = [ '', 'C', 'C1', 'C2', 'A', 'Com' ];
var segments = {};


function docIDKeyPressed(field, event) {
	var i = document.getElementById(field);
	var keycode;
	if (window.event) keycode = window.event.keyCode;
	else if (event) keycode = event.which;
	else return true;

	if (keycode == 13) {
	   loadManuscript(i.value);
	   return false;
	}
	else return true;
}



function rowClicked(row) {
	var sid = $(row).attr('id').substring(3);
	setSelectedSegment(sid);
}


function setSelectedSegment(segID, inhibitBroadcast) {

	var oldSID = currentSegmentID;

	$('.segrow').css('background-color', '#FFFFFF');

	if ($('#sid'+segID)) {
		currentSegmentID = segID;
//		$('#sid'+segID).css('background-color', '#FFFF99');
		$('#sid'+segID).css('background-color', '#E2E2E2');
	}
	else currentSegmentID = null;

	if (currentSegmentID != oldSID) {
		if (inhibitBroadcast != true) {
			segments[segID].docID = currentDocID;
			segments[segID].segID = currentSegmentID;
			if (inhibitBroadcast != true) {
				if (gadgets.util.hasFeature('pubsub-2')) gadgets.Hub.publish("interedition.page.selected", segments[segID]);
			}
		}

		// if we're inhibiting the broadcast, that means we were set from another gadget, let's position to our page row
		if (inhibitBroadcast) {
			var new_position = $('#sid'+segID).offset();
			window.scrollTo(new_position.left,new_position.top);
		}
	}
}

function fillVariantSegments(data, segID, inhibitBroadcast) {
	$('#contentTable').html('');
	var content = '';
	var xml = $.parseXML(data);
	
	$('#targetdocID').html('Document ID: ' + $(xml).find('manuscript').attr('docID') + ' ('+$(xml).find('manuscript').attr('gaNum')+')');
	segments = {};
	$(xml).find("segment").each(function() {
		var sid = $(this).attr('segID');
		var contextDescription = $(this).attr('contextDescription');
		if (contextDescription == null) {
			contextDescription = '';
		}
		var bibcont = $(this).attr('verse');
		if (bibcont == null) {
			bibcont = '';
		}
		
		segments[sid] = {}
		segments[sid].contextDescription = contextDescription;
		segments[sid].bibcont = bibcont;
		segments[sid].readings = {}
		segments[sid].hands = {}
		var hands = $(this).find("witness");
		if (hands) {
			$(hands).each(function () {
				var hand = $(this).attr("hand");
				var selectedReadingID = $(this).attr('readingID');
				selectedReadingID = parseInt(selectedReadingID);
				var unsure = ($(this).attr("unsure") == 'true');
				var comment = $(this).find("comment");
				comment = $(comment).text();
				var transcription = $(this).find("transcription");
				transcription = $(transcription).text();
				segments[sid].hands[hand] = {};
				segments[sid].hands[hand].hand = hand;
				segments[sid].hands[hand].selectedReadingID = selectedReadingID;
				segments[sid].hands[hand].unsure = unsure;
				segments[sid].hands[hand].comment = comment;
				segments[sid].hands[hand].transcription = transcription;
			});
		}
		

		//
		// First show the original hand values..
		//
		//

		var selectedReadingHand = '';
		var selectedReadingID = -1;
		var selectedReadingComment = '';
		var selectedReadingTranscription = '';
		var selectedReadingUnsure = false;
		var selectedReading = segments[sid].hands[selectedReadingHand];
		if (selectedReading != null) {
			selectedReadingID = selectedReading.selectedReadingID;
			selectedReadingUnsure = selectedReading.unsure;
			selectedReadingComment = selectedReading.comment;
			selectedReadingTranscription = selectedReading.transcription;
		}
		
		content += '<tr class="segrow" id="sid'+sid+'"><td>';
		
		content += '<fieldset>';
		content += '<legend>Verse: '+bibcont+' (SegID: ' + sid +')</legend>';
		content += '<table>';
		content += '<tr><td colspan="3">'+contextDescription+'</td></tr>';
		content += '<tr><td>Reading</td><td>';

		content += '<select id="segRD'+sid+'">';

		content += '<option value="-1"';
		if (selectedReadingID == -1) {
			content += ' selected="selected"';
		}
		content += '></option>';
		
		//
		// build up our arrays of readings.  We'll use this same array when we repeat entry fields for each hand, below
		//
		//

		var readings = $(this).find("reading");
		if (readings) {
			$(readings).each(function () {
				var readingID = $(this).attr("readingID");
				var reading = $(this).text();
				segments[sid].readings[readingID] = {};
				segments[sid].readings[readingID].readingID = readingID;
				segments[sid].readings[readingID].reading = reading;
				segments[sid].readings[readingID].readingName = $(this).attr("readingName");
				segments[sid].readings[readingID].witnessesText = $(this).attr("witnesses");
				content += '<option value="'+readingID+'"';
				if (selectedReadingID == readingID) {
					content += ' selected="selected"';
				}
				if (segments[sid].readings[readingID].witnessesText && segments[sid].readings[readingID].witnessesText.length > 0) {
					content += ' title="'+segments[sid].readings[readingID].witnessesText+'"';
				}
				content +='>'+reading+'</option>';
			});
		}


		content += '<option value="-2"';
		if (selectedReadingID == -2) {
			content += ' selected="selected"';
		}
		content += '>[Lacuna]</option>';

		content += '<option value="-3"';
		if (selectedReadingID == -3) {
			content += ' selected="selected"';
		}
		content += '>[Illegible Text / Deficiency]</option>';
		
		content += '</select></td><td><button onclick="addNewReading('+sid+'); return false;">New</button></td></tr>';

 		content += '<tr><td><input type="checkbox" '+(selectedReadingUnsure?' checked="checked"':'')+' id="unsure'+sid+'" onchange="unsureChanged('+sid+')"/> V </td><td colspan="2"><input style="width:100%;" id="transcription'+sid+'" value="'+selectedReadingTranscription+'" '+(selectedReadingUnsure?'':'disabled="disabled"')+'/></td></tr>';
 		content += '<tr rowspan="2">';
 		content += '   <td>Comment</td>';
 		content += '   <td colspan="2">';
 		content += '     <textarea style="width:100%;" id="comment'+sid+'">'+selectedReadingComment+'</textarea>';
 		content += '   </td>';
 		content += '</tr>';

		//
		//
		// show our 'more hands' box
		//
		//

 		content += '<tr style="display:none;" id="moreContDisp'+sid+'"><td style="cursor:pointer;" id="lessDisp'+sid+'" onclick="hideMore('+sid+')">&#x25BC; less...</td>';
		content += '<td style="width:100%; margin:0px; padding:0px;">';
		content += '<table style="font-size:x-small; width:100%; border:none;">';


		for (i = 1; i < moreHands.length; ++i) {

			selectedReadingHand = '';
			selectedReadingID = -1;
			selectedReadingComment = '';
			selectedReadingTranscription = '';
			selectedReadingUnsure = false;
			selectedReading = segments[sid].hands[moreHands[i]];
			if (selectedReading != null) {
				selectedReadingID = selectedReading.selectedReadingID;
				selectedReadingUnsure = selectedReading.unsure;
				selectedReadingComment = selectedReading.comment;
				selectedReadingTranscription = selectedReading.transcription;
			}

			content += '<tr><td>Hand: '+moreHands[i]+'</td><td>';

			content += '<select id="segRD'+sid+moreHands[i]+'">';

			content += '<option value="-1"';
			if (selectedReadingID == -1) {
				content += ' selected="selected"';
			}
			content += '></option>';
			
			if (segments[sid].readings) {
				for (readingID in segments[sid].readings) {
					var reading = segments[sid].readings[readingID].reading;
					segments[sid].readings[readingID].readingName = $(this).attr("readingName");
					segments[sid].readings[readingID].witnessesText = $(this).attr("witnesses");
					content += '<option value="'+readingID+'"';
					if (selectedReadingID == readingID) {
						content += ' selected="selected"';
					}
					if (segments[sid].readings[readingID].witnessesText && segments[sid].readings[readingID].witnessesText.length > 0) {
						content += ' title="'+segments[sid].readings[readingID].witnessesText+'"';
					}
					content +='>'+reading+'</option>';
				}
			}

			content += '<option value="-2"';
			if (selectedReadingID == -2) {
				content += ' selected="selected"';
			}
			content += '>[Lacuna]</option>';

			content += '<option value="-3"';
			if (selectedReadingID == -3) {
				content += ' selected="selected"';
			}
			content += '>[Illegible Text / Deficiency]</option>';
			
			content += '</select></td><td><button onclick="addNewReading('+sid+'); return false;">New</button></td></tr>';

			content += '<tr><td><input type="checkbox" '+(selectedReadingUnsure?' checked="checked"':'')+' id="unsure'+sid+moreHands[i]+'" onchange="unsureChanged(\''+sid+moreHands[i]+'\')"/> V </td><td colspan="2"><input style="width:100%;" id="transcription'+sid+moreHands[i]+'" value="'+selectedReadingTranscription+'" '+(selectedReadingUnsure?'':'disabled="disabled"')+'/></td></tr>';
			content += '<tr rowspan="2">';
			content += '   <td>Comment</td>';
			content += '   <td colspan="2">';
			content += '      <textarea style="width:100%;" id="comment'+sid+moreHands[i]+'">'+selectedReadingComment+'</textarea>';
			content += '   </td>';
			content += '</tr>';

		}

		content += '</table>';
		content += '</td></tr>';


 		content += '<tr><td style="cursor:pointer;" onclick="showMore('+sid+')"><span id="moreDisp'+sid+'"> &#x25B6; more hands...</span></td><td style="width:100%; padding:0px;">';
		content += '<span><a href="#" onclick="return saveRD('+sid+');" title="Save Reading Information"><img style="vertical-align:bottom;" src="'+ imagesURL + '/save_bubble.png"/></a></span> ';
		content += '<span style="margin-left:10px; color:red;" id="saveStat'+sid+'"></span>';
		content += '</td></tr>';

		content += '</table>';
		content += '</fieldset>';
		
		content += '</td></tr>';
	});
	
	$('#contentTable').html(content);

	$('.segrow').click(function () {
		rowClicked(this);
	});

	if (segID != null) setSelectedSegment(segID, inhibitBroadcast);
}


function showMore(sid) {
	$('#moreContDisp'+sid).show();
	$('#moreDisp'+sid).hide();
}


function hideMore(sid) {
	$('#moreContDisp'+sid).hide();
	$('#moreDisp'+sid).show();
}

function loadManuscript(docID, segID, inhibitBroadcast) {
	$('#docID').val(docID);
	$('#contentTable').html('<tr><td colspan="5"><center><img src="'+imagesURL + '/loading.gif"/></center><br/><center><h1>Loading.  Please wait...</h1></center></td></tr>');
	currentDocID = docID;
	var params = {};
	var postData = {
		sessionHash : $.cookie('ntvmrSession'),
		docID       : docID,
		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) { fillVariantSegments(o.text, segID, inhibitBroadcast) }, params);
};

function unsureChanged(segID) {
	var unsure = $('#unsure'+segID).is(':checked');
	if (unsure) {
		var readingText = $('#segRD'+segID+' option:selected').text();
		var transText = $('#transcription'+segID).val();
		if (transText.length < 1)
		$('#transcription'+segID).val(readingText);
		$('#transcription'+segID).removeAttr('disabled');
	}
	else {
		$('#transcription'+segID).attr('disabled', 'disabled');
	}
	
}
function saveRD(segID) {
	$('#saveStat'+segID).html('<img src="'+imagesURL+'/loading-small.gif"/>');

	saveRDLoop(segID, 0);
	return false;
}

function saveRDLoop(segID, i) {
	if (i < moreHands.length) {
		var readingID = $('#segRD'+segID+moreHands[i]).val();
		var unsure = $('#unsure'+segID+moreHands[i]).is(':checked');
		var transText = (unsure) ? $('#transcription'+segID+moreHands[i]).val() : '';
		var comment = $('#comment'+segID+moreHands[i]).val();
		
		var params = {};
		
		var listeVariantPutURL = servicesURL + '/variant/put/';
		var listeVariantDeleteURL = servicesURL + '/variant/delete/';
		var postData = {
			sessionHash : $.cookie('ntvmrSession'),
			segID         : segID,
			docID         : currentDocID,
			hand          : moreHands[i],
			readingID     : readingID,
			unsure        : unsure,
			transcription : transText,
			comment       : comment,
		};
		
		params[gadgets.io.RequestParameters.METHOD] = gadgets.io.MethodType.POST;
		params[gadgets.io.RequestParameters.POST_DATA] = gadgets.io.encodeValues(postData);
		gadgets.io.makeRequest(readingID == -1 ? listeVariantDeleteURL : listeVariantPutURL, function(o) {
			var xml = $.parseXML(o.text);
			var error = $(xml).find('error');
			if (error && error.length) {
				$('#saveStat'+segID).html($(error).attr('message'));
				$('#segRD'+segID).val(segments[segID].selectedReadingID);
			}
			else {
				$('#saveStat'+segID).html($(xml).find('success').attr('message'));

				saveRDLoop(segID, i+1);

/*
				// announce activity
				var params = {};  
				params[opensocial.Activity.Field.TITLE] = 'Variant Selected. DocID: '+currentDocID+'; Segment: '+segID+' with Reading ID: '+ readingID;
				var activity = opensocial.newActivity(params); 
				opensocial.requestCreateActivity(activity, opensocial.CreateActivityPriority.HIGH);
*/
			}
		}, params);
	}
	else {
		$('#saveStat'+segID).html('Successfully updated segID: '+segID+'; docID: '+currentDocID);
	}
}


function addNewReading(sid) {
	$('#newreading').val('');
	$('#segID').val(segID);
	var contents = '<table>';
	for (var rid in segments[sid].readings) {
		contents += '<tr><td>'+segments[sid].readings[rid].reading+'</td></tr>';
	}
	contents += '</table>';
	$('#existingReadings').html(contents);
	dialog.dialog('open');
	return false;
}

function saveNewReading() {
	var segID=currentSegmentID;
	$('#saveStat'+segID).html('<img src="'+imagesURL+'/loading-small.gif"/>');
	var readingID = $('#segRD'+segID).val();
	var newReading = $('#newreading').val();
	var params = {};
	var url = servicesURL + '/variant/reading/put/';
	var postData = {
		sessionHash : $.cookie('ntvmrSession'),
		segID       : segID,
		reading     : newReading,
	};
	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);
			var error = $(xml).find('error');
			if (error && error.length) {
				$('#saveStat'+segID).html($(error).attr('message'));
			}
			else {
				var newReadingID = $(xml).find('success').attr('readingID');
				$('#saveStat'+segID).html($(xml).find('success').attr('message'));
				for (i = 0; i < moreHands.length; ++i) {
					var s= document.getElementById('segRD'+segID+moreHands[i]);
					s.options[s.options.length]= new Option(newReading, newReadingID);
				}

				// announce activity
				var params = {};  
				params[opensocial.Activity.Field.TITLE] = 'Variant Reading Added while working on DocumentID: '+currentDocID+'. Segment: '+segID+' ('+segments[segID].verse+') Reading: '+ newReading;
				var activity = opensocial.newActivity(params); 
				opensocial.requestCreateActivity(activity, opensocial.CreateActivityPriority.HIGH);

			}
		}, params);
}


function onLoadData(data) {
	viewer = data.get('viewer').getData();
	$('#username').val(viewer.getDisplayName());
}


function manuscript_selected_callback(topic, data, subscriberData) {
	if (currentDocID != data) loadManuscript(data);
}

function page_select_callback(topic, data, subscriberData) {
	if (currentDocID != data.docID) loadManuscript(data.docID, data.segID, true);
	else setSelectedSegment(data.segID, true);
}

function loaded() {

	pageURL = (parent.window.location.href.indexOf('?') > -1) ? parent.window.location.href.substring(0, parent.window.location.href.indexOf('?')) : parent.window.location.href;
	servicesURL = URI('../../vmr/api').absoluteTo(gadgets.util.getUrlParameters()['url']);
	imagesURL = URI('../../images').absoluteTo(gadgets.util.getUrlParameters()['url']);
	var prefs = new gadgets.Prefs();
	var preferredHeight = parseInt(prefs.getString('height'));
	if (gadgets.util.hasFeature('dynamic-height')) gadgets.window.adjustHeight(preferredHeight);

	var req = opensocial.newDataRequest();
	req.add(req.newFetchPersonRequest('VIEWER'), 'viewer');
	req.send(onLoadData);
}

if (gadgets.util.hasFeature('pubsub-2')) {
	gadgets.HubSettings.onConnect = function(hum, suc, err) {
		subId = gadgets.Hub.subscribe("interedition.manuscript.selected", manuscript_selected_callback);
//		subId = gadgets.Hub.subscribe("interedition.page.selected", page_select_callback);
		loaded();
	 };
}
else gadgets.util.registerOnLoadHandler(loaded);


</script>

<div style="font-size: small;" id="addReadingDialog">
<form id="addReadingForm">
<input type="hidden" id="segID" name="segID" value="" />
<input type="hidden" id="userid" name="userid" value="" />
<input type="hidden" id="username" name="username" value="" />
	<table style="width:100%; font-size: small;" >
		<tr><td>New Reading</td><td><input name="newreading" id="newreading"></td></tr>
		<tr><td>Existing Readings</td><td id="existingReadings"></td></tr>
	</table>
</form>
<button id="doSaveNew"><span> Save <img style="vertical-align: middle;" src="../../images/save.png"/></span></button>
</div>

]]>
</Content>
</Module>


