<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs
	title="Statistics - Manuscript Pages"
	title_url="http://ntvmr.uni-muenster.de"
	directory_title="New Testament Manuscript Statistics"
	author_email="scribe777@gmail.com"
	author="Institut für neutestamentliche Textforschung"
	description="Statistics - Manuscript Pages"
	screenshot="http://ntvmr.uni-muenster.de/community/images/listescreenshot.png"
	thumbnail="http://ntvmr.uni-muenster.de/community/images/pageicon.gif"
	scrolling="false"
   >
  <Require feature="dynamic-height"/>
<Require feature="pubsub-2">
  <Param name="topics">
  </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"/>
</UserPref>
<UserPref name="preferSmallBarLabels" datatype="bool" display_name="Use Small Bar Labels" default_value="false" />

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

	<script type="text/javascript" src="/community/js/jquery/jquery.min.js"></script>
	<script type="text/javascript" src="/community/js/flot/jquery.flot.js"></script>
	<script type="text/javascript" src="/community/js/flot/jquery.flot.navigate.js"></script>
	<script type="text/javascript" src="/community/js/flot/jquery.flot.pie.js"></script>
	<script type="text/javascript" src="/community/js/URI.min.js"></script>

<style>
a img {
	border: 0;
}
body {
}

#chart {
	width: 100%;
	height: 100%;
	font-size: 14px;
	line-height: 1.2em;
}

#pie {
	width: 100%;
	height: 100%;
	font-size: 14px;
	line-height: 1.2em;
}

</style>

</head>

<body style="background-color: rgb(238, 240, 242);">
<div style="margin:10px 0px 0px 0px;">
<table style="padding:0px 0px 20px 0px;width:100%;height:100%;">
<tr><td style="width:100%;">
	<div id="chart"></div>
</td><td style="white-space:nowrap;vertical-align:top;">
	<p id="choices"></p>
	<div id="pie" style="border-top:1px solid;"></div>
</td></tr>
</table>
</div>

<script>

var servicesURL = '';
var imagesURL = '';
var preferSmallBarLabels = false;

function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

function loadStatistics() {
	$('#chart').html('<center><img src="/community/images/loading.gif"/></center><br/><center><h1>Computing statistics.  Please wait...</h1></center>');
	var params = {};
	var postData = {};

	params[gadgets.io.RequestParameters.METHOD] = gadgets.io.MethodType.POST;
	params[gadgets.io.RequestParameters.POST_DATA] = gadgets.io.encodeValues(postData);
	var url = servicesURL + '/statistics/pages/';
	gadgets.io.makeRequest(url, function(o) {
		var xml = $.parseXML(o.text);

		var types = ['PAP','MAJ','MIN','LEC', 'TOT'];
		var typeTitles = ['Papyri','Majuscules','Minuscules','Lectionaries', '<b>Totals</b>'];
		var typeTitlesSmall = ['Pap','Maj','Min','Lec', '<b>Tot</b>'];
		var measures = ['CAT','IMAGE','INDEX','TRANSCRIPTION'];
		var measureTitles = ['Catalogued','Imaged','Indexed','Transcribed'];

		// insert checkboxes 
		var choiceContainer = $("#choices");
		choiceContainer.html('');
		for (var i = 0; i < typeTitles.length; ++i) {
			choiceContainer.append("<br/><input type='checkbox' name='" + typeTitles[i] +
				"' checked='checked' id='idType"+i + "'></input>" +
				"<label for='id" + typeTitles[i] + "'>"
				+ typeTitles[i] + "</label>");
		};

		choiceContainer.find("input").click(plotAccordingToChoices);




		function plotAccordingToChoices() {

			var plotData = [];
			var totals = [];
			var measureTotals = [];
			for (var i = 0; i < measures.length; ++i) {
				var t = [];
				var k = 0;
				for (var j = 0; j < types.length; ++j) {
					if ($('#idType'+j).is(':checked')) {
						var val = '';
						if (j == types.length-1) {
							val = measureTotals[i];
						}
						else {
							val = $(xml).find(types[j]+'_'+measures[i]).text();
							if (!measureTotals[i]) measureTotals[i] = 0;
							measureTotals[i] += parseInt(val);
						}
						if (i == 0) totals.push({label : typeTitles[j], data : val});
						t.push([k,val/totals[k].data*100]);
						++k;
					}
				}
				plotData.push({label: measureTitles[i], data: t});
			}

			var ticks = [];
			var k = 0;
			for (var j = 0; j < types.length; ++j) {
				if ($('#idType'+j).is(':checked')) {
					ticks.push([k, preferSmallBarLabels?typeTitlesSmall[j]:typeTitles[j]]);
					++k;
				}
			}

			if (ticks.length > 0) {
				if (totals[totals.length-1].label == typeTitles[typeTitles.length-1]) {
					totals = totals.slice(0,totals.length-1);
				}
				$.plot('#pie', totals, {
					series: {
						pie: { 
							show: true
						}
					},
					grid: {
						hoverable: true,
						clickable: true
					},
					legend: {
						backgroundColor: 0xEEF0F2
					}
				});

				var previousPieDataIndex = null;
				var previousPieSeriesIndex = null;
				$("#pie").bind("plothover", function (event, pos, item) {

					if (item) {
						if (previousPieDataIndex != item.dataIndex || previousPieSeriesIndex != item.seriesIndex) {

							previousPieDataIndex = item.dataIndex;
							previousPieSeriesIndex = item.seriesIndex;

							$("#tooltip").remove();
							showTooltip(pos.pageX-70, pos.pageY-70,
							   numberWithCommas(item.datapoint[1][0][1]) + ' pages ('+parseFloat(item.series.percent).toFixed(2)+'%)');
						}
					} else {
						$("#tooltip").remove();
						previousPieDataIndex = null;            
						previousPieSeriesIndex = null;            
					}
				});
				$.plot("#chart", plotData, {
					series: {
						bars: { show: true, barWidth: .82, align: 'center' },
						points: { show: true }
					},
					yaxis: {
						min: 0,
						max: 100,
						tickFormatter : function (val, axis) {
							return val + '%';
						}
					},
					xaxis: {
						ticks: ticks,
						tickLength: 0
					},
					grid: {
						hoverable: true,
						clickable: true
					},
					legend: {
						backgroundColor: 0xEEF0F2
					}
				});

				function showTooltip(x, y, contents) {
					$("<div id='tooltip'>" + contents + "</div>").css({
						position: "absolute",
						display: "none",
						top: y + 5,
						left: x + 5,
						border: "1px solid #fdd",
						padding: "2px",
						"background-color": "#fee",
						opacity: 0.90
					}).appendTo("body").fadeIn(200);
				}

				var previousDataIndex = null;
				var previousSeriesIndex = null;
				$("#chart").bind("plothover", function (event, pos, item) {

					if (item) {
						if (previousDataIndex != item.dataIndex || previousSeriesIndex != item.seriesIndex) {

							previousDataIndex = item.dataIndex;
							previousSeriesIndex = item.seriesIndex;

							$("#tooltip").remove();
							var k = item.dataIndex + 1;
							var j = 0;
							for (;j < types.length && k; ++j) {
								if ($('#idType'+j).is(':checked')) {
									k--;
								}
							}
							j--;
							var val = '';
							if (j == types.length-1) {
								val = measureTotals[item.seriesIndex];
							}
							else {
								val = $(xml).find(types[j]+'_'+measures[item.seriesIndex]).text();
							}
							var x = item.datapoint[0].toFixed(2);
							var y = item.datapoint[1].toFixed(2);

							showTooltip(pos.pageX+30, pos.pageY-30,
							    item.series.label + " pages" + ((j != types.length-1) ? (" of " + typeTitles[j]):"") + ": " + numberWithCommas(val) + ' ('+y+'%)');
						}
					} else {
						$("#tooltip").remove();
						previousDataIndex = null;            
						previousSeriesIndex = null;            
					}
				});
			}
		}

		plotAccordingToChoices();

	}, 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();
	var preferredHeight = parseInt(prefs.getString('height'));
	preferSmallBarLabels    = prefs.getBool('preferSmallBarLabels');
	if (gadgets.util.hasFeature('dynamic-height')) gadgets.window.adjustHeight(preferredHeight);
	
	setTimeout(function() {
		loadStatistics();
	}, 500);
}


if (gadgets.util.hasFeature('pubsub-2')) gadgets.HubSettings.onConnect = function(hum, suc, err) {
	loaded();
}
else gadgets.util.registerOnLoadHandler(loaded);


</script>
</body>
</html>
]]>
</Content>
</Module>

