{% extends "base_prepare.html" %}
{% set active_page = 'cut' %}


{% block head %}
<script type="text/javascript" src="{{ url_for('static', filename='js/scripts_cut.js') }}?ver={{version}}"></script>
<script type="text/javascript">
	var numChar = {{ numChar|default(0) }};
	var numWord = {{ numWord|default(0) }};
	var numLine = {{ numLine|default(0) }};
	var maxChar = {{ maxChar|default(0) }};
	var maxWord = {{ maxWord|default(0) }};
	var maxLine = {{ maxLine|default(0) }};
	var activeFileIDs = {{ activeFileIDs|default(0) }};
</script>
{% endblock %}


{% block title %}cutter{% endblock %}

{% block options %}

<input type="hidden" id="num_active_files" value="{{ num_active_files }}" />

<fieldset class="cuttingoptionswrapper">
	<legend>Default Cutting Options</legend>
	<div id="cuttingdiv">
		<div class="row cutting-radio-token">
			<div class="col-md-5">
				<label class="radio sizeradio">
					<input type="radio" name="cutType" value="letters" {{ "checked" if session['cuttingoptions']['cutType'] == 'letters' }}>
					Characters/Segment
				</label>
			</div>
			<div class="col-md-7 txt-right" style="padding-right:10%;">
				<label class="radio sizeradio">
					<input type="radio" name="cutType" value="words" {{ "checked" if session['cuttingoptions']['cutType'] == 'words' or session['cuttingoptions']['cutType'] == 'milestone' }}/>
					Tokens&nbsp&nbsp/&nbsp&nbspSegment
				</label>
			</div>
		</div>
		<div class="row cutting-radio">
			<div class="col-md-5">
				<label class="radio sizeradio">
					<input type="radio" name="cutType" value="lines" {{ "checked" if session['cuttingoptions']['cutType'] == 'lines' }}>
					Lines/Segment
				</label>
				</div>
				<div class="col-md-7 txt-right" style="padding-right:10%;">
				<label class="radio numberradio">
					<input type="radio" name="cutType" value="number" {{ "checked" if session['cuttingoptions']['cutType'] == 'number' }}/>
					Segments/Document<br>(by Tokens)
                    <i class="fa fa-question-circle lexos-tooltip-trigger" data-toggle="tooltip" data-html="true" data-placement="right" data-container="body" title="Roses are red, segments are blue, if you took out the white spaces, this isn't for you!" style=""></i>
				</label>
			</div>
		</div>
		<div class="row">
			<div class="col-md-8 col-md-offset-4" style="padding-right:10%;">
				<label class="pull-right">
					<span class="cut-label-text">{{ 'Number of Segments' if session['cuttingoptions']['cutType'] == 'number' else 'Segment Size' }}:</span>
					<input type="number" min="1" name="cutValue" class="cut-text-input" id="overallcutvalue" value="{{ session['cuttingoptions']['cutValue'] }}"/>
					<i class="fa fa-question-circle lexos-tooltip-trigger" data-toggle="tooltip" data-html="true" data-placement="right" data-container="body" title="A positive integer used to divide up the text (e.g. either the number of letters, words, or lines per segment, or the number of segments per document)." style=""></i>
					</span>
				</label>
			</div>
		</div>
		<div class="row overlap-div {{ 'transparent' if session['cuttingoptions']['cutType'] == 'number' }}">
			<div class="col-md-8 col-md-offset-4" style="padding-right:10%;">
				<label class="pull-right">Overlap:
					<input type="number" min="0" name="cutOverlap" class="cut-text-input overlap-input" id="overallOverlapValue" value="{{ session['cuttingoptions']['cutOverlap'] }}" {{ "disabled" if session['cuttingoptions']['cutType'] == 'number' }}/>
					<i class="fa fa-question-circle lexos-tooltip-trigger" data-toggle="tooltip" data-html="true" data-placement="right" data-container="body" title="Amount of overlapping content at segment boundaries (a number smaller than the overall size of the segment)." style=""></i>
				</label>
			</div>
		</div>
		<div class="row lastprop-div {{ 'transparent' if session['cuttingoptions']['cutType'] == 'number' }}">
			<div class="col-md-8 col-md-offset-4" style="padding-right:10%; padding-left:5px">
				<label class="pull-right txt-right">Last Segment Size Threshold:
					<input type="number" min="0" name="cutLastProp" class="cut-text-input lastprop-input" value="{{ session['cuttingoptions']['cutLastProp'] }}" {{ "disabled" if session['cuttingoptions']['cutType'] == 'number' }}/> %
					<i class="fa fa-question-circle lexos-tooltip-trigger" data-toggle="tooltip" data-html="true" data-placement="right" data-container="body" title="The value the last segment has to reach relative to the others in order to be considered a separate segment." style=""></i>
				</label>
			</div>
		</div>
	</div>
    <p>
	<div class="row txt-right pull-right" id="cutByMSdiv" style=" padding-right:10%">
		<div class="col-md-4 col-md-offset-4 txt-right pull-right"style="width: 200px; padding-right:3px">
		<label class="pull-right txt-right">
			<input type="checkbox" name="cutByMS" id="cutByMS" {{ 'checked' if session['cuttingoptions']['cutType'] == 'milestone'}}/>Cut by Milestone
		<i class="fa fa-question-circle lexos-tooltip-trigger" data-toggle="tooltip" data-html="true" data-placement="right" data-container="body" title="Splits the document into segments at each appearence of the provided string. Child segments will not contain the Milestone delimeter." style="padding-left:4px;margin-right:0;"></i>
		</label>
        </div>
		<div class="col-md-8">
			<span id="MSoptspan">
				Cut documents on this term <input type="text" name="MScutWord" id="MScutWord" value="{{ session['cuttingoptions']['cutValue'] if session['cuttingoptions']['cutType'] == 'milestone' else ''}}"/>
			</span>
		</div>
	</div>
	<div id="cut-loading-div" style="visibility:hidden">
  		<img src="../static/images/loading_icon.svg" alt="Loading" id="cut-loading-icon"/>
	</div>
	


</fieldset>

{% endblock %}

{% block previews %}
{% for (fileID, filename, classlabel, fileContents) in previews %}
<fieldset class="individualpreviewwrapper">

	<legend class="individualpreviewlegend" style="color:#999;">{{filename}}
		<div class="bttn indivcutbuttons">Individual Options</div>
	</legend>

	<div class="cuttingoptionswrapper ind {{ 'hidden' if not ('cutType_'+(fileID|str) in request.form and request.form['cutValue_'+(fileID|str)] != '') }}">
	<fieldset class="cuttingoptionsfieldset">
		<legend class="individualcuttingoptionstitle">Individual Cutting Options</legend>
		<div class="cuttingdiv individcut">
			<div class="row">
				<div class="col-md-5">
					<label class="radio sizeradio">
						<input type="radio" name="cutType_{{ fileID }}" id="cutTypeInd" value="letters" checked>
						Characters/Segment
					</label>
				</div>
				<div class="col-md-7">
					<label class="radio sizeradio">
						<input type="radio" name="cutType_{{ fileID }}" id="cutTypeInd" value="words" {{ "checked" if request.form['cutType_'+(fileID|str)] == 'words'}}/>
						Tokens/Segment
					</label>
				</div>
			</div>
			<div class="row cutting-radio">
				<div class="col-md-5">
					<label class="radio sizeradio">
						<input type="radio" name="cutType_{{ fileID }}" id="cutTypeInd" value="lines" {{ "checked" if request.form['cutType_'+(fileID|str)] == 'lines'}}>
						Lines/Segment
					</label>
				</div>
				<div class="col-md-7">
					<label class="radio numberradio">
						<input type="radio" name="cutType_{{ fileID }}" id="cutTypeInd" value="number" {{ "checked" if request.form['cutType_'+(fileID|str)] == 'number'}}/>
						Segments/Document
					</label>
				</div>
			</div>

			<div class="row">
				<div class="col-md-6 pull-right" style="padding-left:2px;padding-right:5%;">
					<label>
						<span class="cut-label-text">{{ 'Number of Segments' if request.form['cutType_'+(fileID|str)] == 'number' else 'Segment Size'}}:</span>
						<input type="number" min="0" name="cutValue_{{ fileID }}" class="cut-text-input" id="individualCutValue" value="{{ request.form['cutValue_'+(fileID|str)] }}"/>
					</label>
				</div>
			</div>
			<div class="row overlap-div">
				<div class="col-md-6 pull-right" style="padding-left:2px;padding-right:5%;">
					<label>
						Overlap:
						<input type="number" min="0" name="cutOverlap_{{ fileID }}" class="cut-text-input overlap-input" id="individualOverlap" value="{{ request.form['cutOverlap_'+(fileID|str)] or '0' }}"/>
					</label>
				</div>
			</div>
			<div class="row lastprop-div {{ 'transparent' if request.form['cutType_'+(fileID|str)] == 'number' }}">
				<div class="col-md-6 pull-right" style="padding-left:2px;padding-right:1%;">
					<label>
						Last Proportion Threshold:
						<input type="number" min="0" name="cutLastProp_{{ fileID }}" class="cut-text-input lastprop-input" value="{{ request.form['cutLastProp_'+(fileID|str)] or '50' }}" {{ "disabled" if request.form['cutType_'+(fileID|str)] == 'number' }}/> %
					</label>
				</div>
			</div>
			<div class="row">
				<div class="col-md-6 pull-right" style="padding-left:2px;padding-right:5%;">
					<label>
						Cutset Label:
						<input type="text" name="cutsetnaming_{{ fileID }}" class="cutsetnaming" value="{{ filename }}">
					</label>
				</div>
			</div>
		</div>
		<div class="row cuttingdiv" id="cutByMSdiv">
			<div class="col-md-4">
				<label>
					<input type="checkbox" class="indivMS" name="cutByMS_{{ fileID }}" id="cutByMS" {{ 'checked' if session['cuttingoptions']['cutType'] == 'milestone'}}/>Cut by Milestone
				</label>
			</div>
			<div class="col-md-8 pull-right" id="MSoptspan" style="display:none;">
				<span>
					Cut document on this term <input type="text" class="indivMSinput" name="MScutWord_{{ fileID }}" id="MScutWord" value="{{ session['cuttingoptions']['cutValue'] if session['cuttingoptions']['cutType'] == 'milestone' else ''}}"/>
				</span>
			</div>
		</div>
	</fieldset>
	</div>

{% if fileContents is string %}
<div class="filecontents">{{fileContents}}</div><!-- Keep this with no whitespace! -->

{% elif fileContents is sequence %}
{% for (segmentLabel, segmentString) in fileContents %}
<div class="filechunk">
	<span class="filechunklabel">{{ segmentLabel }}</span>
	<div>{{ segmentString }}</div>
</div>
{% endfor %}

{% endif %}
</fieldset>

{% endfor %}
{% endblock %}

{% block actions %}
<input class="bttn bttn-action cutTrigger" type="submit" id="cutaction" value="Preview Cuts" name="preview" onclick="return validate();"/>
<input class="bttn bttn-apply cutTrigger" type="submit" id="cutapply" value="Apply Cuts" name="apply"/>
<input class="bttn bttn-exit" type="submit" id="downloadchunks" name="downloadchunks" value="Download Cut Files"/>
{% endblock %}

<script>

$(document).ready( function () {
	$('form').submit(function() {
		{% if (previews|len) != 0 %}	
			var btn = $(this).find("input[type=submit]:focus").val();
			if (btn != 'Download Cut Files'){
				$("#status-prepare").css({"visibility":"visible"});
			} 				

		{% endif %}
	});
	
});

function validate(){
	var maxSegs = 100;

	var defCutTypeValue= $("input[name='cutType']:checked").val();
	var cutVal = parseInt($("input[name='cutValue']").val());
	var overVal = parseInt($("#overallOverlapValue").val());
	var needsWarning = false;

	var indivdivs = $(".cuttingoptionswrapper.ind");
	var eltswithoutindividualopts = new Array();

	indivdivs.each(function(){
		
		var thisCutVal = $("#individualCutValue",this).val();
		var thisOverVal = $("#individualOverlap",this).val();
		if (thisCutVal!= ''){
			thisCutVal=parseInt(thisCutVal);
			thisOverVal = parseInt(thisOverVal);
		}
		var listindex = indivdivs.index(this);
		currID = activeFileIDs[listindex];
		var isCutByMS = $(".indivMS",this).is(":checked");

		if ( !isCutByMS && thisCutVal == ''){
			eltswithoutindividualopts.push(listindex);
		}

		if(thisCutVal!=''){
			var thisCutType = $("input[name='cutType_" + currID + "']:checked").val();
			if (!(isCutByMS)){
				if (thisCutType == "letters" && (numChar[listindex]-thisOverVal)/(thisCutVal-thisOverVal) > maxSegs){
					needsWarning = true;
				} else if (thisCutType == "words" && (numWord[listindex]-thisOverVal)/(thisCutVal-thisOverVal) > maxSegs){
					needsWarning = true;
				} else if (thisCutType == "lines" && (numLine[listindex]-thisOverVal)/(thisCutVal-thisOverVal) > maxSegs){
					needsWarning = true;
				} else if (thisCutVal > maxSegs){
					needsWarning = true;
				}
			}
		}
		;	
	});
	
	if ($("input[name='cutByMS']:checked").length == 0){
		if (defCutTypeValue == "letters") {
			eltswithoutindividualopts.forEach(function(elt){
				if ((numChar[elt]-cutVal)/(cutVal-overVal) > maxSegs){
					needsWarning = true;
				}
			});
		} else if (defCutTypeValue == "words") {
			eltswithoutindividualopts.forEach(function(elt){
				if ((numWord[elt]-cutVal)/(cutVal-overVal) > maxSegs){
					needsWarning = true;
				}
			});
		} else if (defCutTypeValue == "lines") {
			eltswithoutindividualopts.forEach(function(elt){
				if ((numLine[elt]-cutVal)/(cutVal-overVal) > maxSegs){
					needsWarning = true;
				}
			});
		} else if (cutVal > maxSegs && eltswithoutindividualopts.length > 0) {
			needsWarning = true;
		}
	}

	if (needsWarning){
		return confirm('Current cut settings will result in over 100 new segments.  Please be patient if you continue.');
	} else {
		return true;
	}

}

</script>
<!-- <input class="bttn bttn-exit" type="submit" id="downloadchunks" name="downloadchunks" value="Download Cut Files"/>
 { endblock }-->