<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="/WEB-INF/taglib/c.tld" prefix="c"%>
<div class="board-partcontent hidden" id="mark-step-div">
	<c:if test="${flag==false}">
	<a class="btn btn-primary" href="javascript:void(0)" onclick="addMarkStep()">
		<i class="icon-plus icon-white"></i> 添加
	</a> 
	<a class="btn btn-danger" href="javascript:void(0)" onclick="clearMarkStep()">
		<i class="icon-trash icon-white"></i> 清空
	</a>
	</c:if>
	<div class="part-list">
		<p class="span1">满分值</p>
		<p class="span1">默认值</p>
		<p class="span1">最大值</p>
		<p class="span1">最小值</p>
		<p class="span1">分值间隔</p>
		<p class="span3">分值列表</p>
		<p class="span1"></p>
		<p class="span1"></p>
	</div>
	<div id="mark-step-list"></div>
	<div class="control-group mr-t">
		<div class="controls">
			<c:if test="${flag==false}">
			<a href="#" class="btn btn-success" onclick="saveMarkStep()">保存并返回</a>
			</c:if>
			<a href="#" class="btn" onclick="cancelMarkStep()">取消并返回</a>
		</div>
	</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
	<c:if test="${flag==false}">
	$('#mark-step-list .info-input').live('keyup', function(){
		validInfoInputTip($(this));
	});
	$('#mark-step-list input[name=max], #mark-step-list input[name=min], #mark-step-list input[name=interval]').live('change', function(){
		if(validInfoInputTip($(this))){
			var obj = $(this).parent().parent();
			var max = obj.find('input[name=max]').val();
			var min = obj.find('input[name=min]').val();
			var interval = obj.find('input[name=interval]').val();
			var list = buildScoreList(max, min, interval);
			obj.find('.score-count').html(list.length);
			obj.find('input[name="score-list-value"]').val(list.join(','));
		}
	});
	$('.score-select').live('click', function(){
		$(this).toggleClass('curr');
	});
	$('.score-select-all').live('click', function(){
		$(this).parent().parent().find('.score-select').each(function(index, obj){
			if(!$(obj).hasClass('curr')){
				$(obj).addClass('curr');
			}
		});
	});
	$('.score-unselect-all').live('click', function(){
		$(this).parent().parent().find('.score-select').each(function(index, obj){
			$(obj).removeClass('curr');
		});
	});
	</c:if>
});

function MarkStep(totalScore){
	this.number=0;
	this.totalScore=totalScore;
	this.defaultScore='';
	this.max='';
	this.min='';
	this.interval=1;
	this.scoreList=[];
	this.levelList=[];
}

function MarkLevel(name, max, min){
	this.name=name;
	this.max=max;
	this.min=min;
}

function initMarkStep(block){
	clearMarkStep();
	if(block.stepList!=undefined && $.isArray(block.stepList) && block.stepList.length>0){
		$.each(block.stepList, function(index, step){
			addMarkStep(step);
		});
	}
	$('#mark-step-div').show();
}

function addMarkStep(step){
	var temp = {};
	if(step==undefined){
		step = new MarkStep();
	}
	$.extend(temp, step, {});
	if(temp.scoreList.length==0){
		temp.scoreList=buildScoreList(temp.max, temp.min, temp.interval);
	}
	temp.scoreListVaue = temp.scoreList.join(',');
	temp.scoreListCount = temp.scoreList.length;
	<c:if test="${flag==false}">
	var stepLine = $($.nano($('#mark-step-template').html(),temp));
	</c:if>
	<c:if test="${flag==true}">
	var stepLine = $($.nano($('#mark-step-show-template').html(),temp));
	</c:if>
	stepLine.appendTo('#mark-step-list');
	stepLine.find('a.score-list-edit').popover({
		html: true,
		placement: 'bottom',
		content: function(){
			return buildScoreListContent(stepLine);
		}
	}).click(function(e){
		e.preventDefault();
		$(this).data('popover').tip().addClass('popover-span4');
	});
	stepLine.find('.score-count').html(temp.scoreList.length);
	
	var obj = stepLine.find('a.add-level-button');
	$.each(temp.levelList, function(index, level){
		addMarkLevel(obj, level);
	});
}

function clearMarkStep(){
	$('#mark-step-list').empty();
}

function deleteMarkStep(obj){
	if(${flag}){
		return;
	}
	$(obj).parent().parent().parent().remove();
}

function showMarkLevel(obj){
	$(obj).parent().find('.info-input').each(function(){
		$(this).attr('disabled',true);
	});
	$(obj).parent().find('a').each(function(){
		$(this).hide();
	});
	$(obj).parent().parent().children('.part-liston-content').show();
}

function addMarkLevel(obj, level){
	<c:if test="${flag==false}">
	$(obj).parent().parent().append($.nano($('#mark-level-template').html(),level));
	</c:if>
	<c:if test="${flag==true}">
	$(obj).parent().parent().append($.nano($('#mark-level-show-template').html(),level));
	</c:if>
}

function deleteMarkLevel(obj){
	$(obj).parent().remove();
}

function closeMarkLevel(obj){
	$(obj).parent().parent().parent().parent().find('.info-input').each(function(){
		$(this).removeAttr('disabled')
	});
	$(obj).parent().parent().parent().parent().find('a').each(function(){
		$(this).show();
	});
	$(obj).parent().parent().parent().hide();
}

function saveMarkLevel(obj){
	var flag = true;
	var stepLine = $(obj).parent().parent().parent().parent();
	var stepMax = parseFloat(stepLine.find('input[name=max]').val());
	var stepMin = parseFloat(stepLine.find('input[name=min]').val());
	$(obj).parent().parent().find('.mark-level-li').each(function(index, level){
		var max=parseFloat($(this).find(':input[name="max"]').val());
		var min=parseFloat($(this).find(':input[name="min"]').val());
		if(max>=min && max<=stepMax && min>=stepMin){
		}else{
			flag=false;
			alert('第'+(index+1)+'个档次设置有误!');
			return false;
		}
	});
	if(flag){
		$(obj).parent().parent().parent().parent().find('.info-input').each(function(){
			$(this).removeAttr('disabled')
		});
		$(obj).parent().parent().parent().parent().find('a').each(function(){
			$(this).show();
		});
		$(obj).parent().parent().parent().hide();
	}
}

function saveScoreList(obj){
	var list=[];
	$(obj).parent().parent().find('.score-select').each(function(){
		if($(this).hasClass('curr')){
			list.push($(this).html());
		}
	});
	var stepLine = $(obj).parent().parent().parent().parent();
	stepLine.find('.score-count').html(list.length);
	stepLine.find('.score-list-edit').popover('hide');
	stepLine.find('input[name="score-list-value"]').val(list.join(','));
}

function closeScoreList(obj){
	var stepLine = $(obj).parent().parent().parent().parent();
	stepLine.find('.score-list-edit').popover('hide');
}

function buildScoreListContent(stepLine){
	var content='<p class="popover-list">';
	var max = stepLine.find('input[name=max]').val();
	var min = stepLine.find('input[name=min]').val();
	var interval = stepLine.find('input[name=interval]').val();
	var current = stepLine.find('input[name="score-list-value"]').val().split(',');
	if(current==undefined){
		current=[];
	}
	var list = buildScoreList(max, min, interval);
	$.each(list, function(index, score){
		var index = $.inArray(score.toString(), current);
		content=content+'<a href="#" class="score-select '+(index>=0?'curr':'')+'">'+score+'</a>';
	});
	content=content+'</p><p class="popover-button">';
	<c:if test="${flag==true}">
	content=content+'<i class="btn" href="#" onclick="closeScoreList(this)">关闭</i>';
	</c:if>
	<c:if test="${flag==false}">
	content=content+'<i class="btn btn-primary score-select-all" href="#">全选</i>';
	content=content+'<i class="btn score-unselect-all" href="#">反选</i>';
	content=content+'<i class="btn btn-success" href="#" onclick="saveScoreList(this)">保存</i>';
	</c:if>
	content=content+'</p>';
	return content;
}

function cancelMarkStep(){
	$('#mark-step-div').hide();
	$('#main-div').show();
}

function saveMarkStep(){
	var block = currentNode.blockData;
	var flag = true;
	var stepList = [];
	$('#mark-step-list .part-liston').each(function(index, obj){
		var temp = validMarkStep(index+1, $(obj));
		if(temp.valid){
			var step = new MarkStep();
			for(var p in step){
				if(typeof(step[p])!="function"){ 
					eval('step.'+p+'=temp.'+p);
		        }
			}
			stepList.push(step);
		}else{
			flag = false;
			alert('步骤#'+temp.number+': '+temp.message);
			return false;
		}
	});
	if(flag){
		if(validMarkStepTotalScore(stepList, block)){
			block.stepList=stepList;
			$('#mark-step-div').hide();
			$('#main-div').show();
		}else{
			alert('步骤满分总合不等于'+block.totalScore);
		}
	}	
}

function validMarkStepTotalScore(stepList, block){
	var total = 0;
	$.each(stepList, function(index, step){
		total=total+parseFloat(step.totalScore);
	});
	return total==block.totalScore;
}

function validMarkStep(index, stepLine){
	var step = new MarkStep();
	step.number=index;
	step.valid=true;
	step.message = '';
	step.totalScore = parseFloat(stepLine.find('.part-liston-title input[name="totalScore"]').val());
	step.defaultScore = parseFloat(stepLine.find('.part-liston-title input[name="defaultScore"]').val());
	step.max = parseFloat(stepLine.find('.part-liston-title input[name="max"]').val());
	step.min = parseFloat(stepLine.find('.part-liston-title input[name="min"]').val());
	step.interval = parseFloat(stepLine.find('.part-liston-title input[name="interval"]').val());
	if(step.totalScore>=0 && step.defaultScore>=0 && step.min>=0 && step.max>=step.min 
		&& step.defaultScore<=step.totalScore && step.max<=step.totalScore && step.max>=step.defaultScore && step.min<=step.defaultScore && step.interval>0){
		var scoreList = stepLine.find('.part-liston-title input[name="score-list-value"]').val().split(',');
		if($.isArray(scoreList) && scoreList.length>0){
			$.each(scoreList, function(i, score){
				if($.isNumeric(score)){
					step.scoreList.push(parseFloat(score));
				}
			});
		}
		if(step.scoreList.length>0){
			buildStepMarkLevel(step, stepLine);
		}
		else{
			step.message='分值列表不能为空';
			step.valid=false;
		}
	}else{
		step.message='分值设置有误';
		step.valid=false;
	}
	return step;
}

function buildStepMarkLevel(step, stepLine){
	stepLine.find('.mark-level-li').each(function(index, levelLine){
		var level = new MarkLevel();
		level.name=$(levelLine).find('input[name="name"]').val();
		level.max=parseFloat($(levelLine).find('input[name="max"]').val());
		level.min=parseFloat($(levelLine).find('input[name="min"]').val());
		step.levelList.push(level);
	});
}


function validInfoInputTip(inputObj, dataObj){
	var name = inputObj.attr('name');
	var value = inputObj.val();
	var min = inputObj.attr('data-min');
	var popoverSetting = {
		placement: 'top',
		trigger: 'focus',
		content:''
	}
	if(inputObj.hasClass('required-input') && value.length==0){
		popoverSetting.content='输入内容不能为空';
		inputObj.popover(popoverSetting).popover('show');
		return false;
	}
	if(inputObj.hasClass('number-input')){
		if(!$.isNumeric(value)){
			popoverSetting.content='输入内容必须为数字';
			inputObj.popover(popoverSetting).popover('show');
			return false;
		}
		if(min!=undefined && min.length>0 && value<min){
			popoverSetting.content='输入内容必须不小于'+min;
			inputObj.popover(popoverSetting).popover('show');
			return false;
		}
		if(dataObj!=undefined){
			eval('dataObj.'+name+'='+value);
		}
	}else{
		if(dataObj!=undefined){
			eval("dataObj."+name+"='"+value+"'");
		}
	}
	inputObj.popover('destroy');
	return true;
}

function buildScoreList(max, min, interval){
	var list = new Array();
	if($.isNumeric(max) && $.isNumeric(min) && $.isNumeric(interval)){
		max = parseFloat(max);
		min = parseFloat(min);
		interval = parseFloat(interval);
		if(min>=0 && max>=min && interval>0){
			for(var i=min;i<=max;){
				list.push(i);
				i=i+interval;
			}
		}	
	}
	return list;
}
</script>
<script type="template" id="mark-step-template">
<div class="part-liston">
<div class="part-liston-title">
	<p class="span1">
		<input class="input-mini info-input required-input number-input" data-min="0" type="text" name="totalScore" value="{totalScore}"/>
	</p>
	<p class="span1">
		<input class="input-mini info-input required-input number-input" data-min="0" type="text" name="defaultScore" value="{defaultScore}"/>
	</p>
	<p class="span1">
		<input class="input-mini info-input required-input number-input" data-min="0" type="text" name="max" value="{max}"/>
	</p>
	<p class="span1">
		<input class="input-mini info-input required-input number-input" data-min="0" type="text" name="min" value="{min}"/>
	</p>
	<p class="span1">
		<input class="input-mini info-input required-input number-input" data-min="0" type="text" name="interval" value="{interval}"/>
	</p>
	<p class="btn-group span3">
    	<a class="btn btn-primary"><strong class="score-count">{scoreListCount}</strong></a>
    	<a class="btn dropdown-toggle score-list-edit" data-title="分值列表">修改</a>
		<input type="hidden" name="score-list-value" value="{scoreListVaue}"/>
    </p>
	<a class="span1" href="#" title="设置给分档次" onclick="showMarkLevel(this)">档次设置</a>
	<em class="span1">
		<a class="list-lion" href="#"  title="删除" onclick="deleteMarkStep(this)"><i class="icon-cancel"></i></a>
	</em>
</div>
<div class="part-liston-content hidden">
	<ul>
		<li>
			<a class="btn btn-primary add-level-button" onclick="addMarkLevel(this, '')">
				<i class="icon-plus icon-white"></i> 添加档次
			</a>
			<a class="btn btn-success" onclick="saveMarkLevel(this)">
				<i class="icon-folder-close icon-white"></i> 保存
			</a>
		</li>
	</ul>
</div>
</div>
</script>
<script type="template" id="mark-step-show-template">
<div class="part-liston">
<div class="part-liston-title">
	<p class="span1">
		<input class="input-mini" name="totalScore" value="{totalScore}" disabled/>
	</p>
	<p class="span1">
		<input class="input-mini" name="defaultScore" value="{defaultScore}" disabled/>
	</p>
	<p class="span1">
		<input class="input-mini" name="max" value="{max}" disabled/>
	</p>
	<p class="span1">
		<input class="input-mini" name="min" value="{min}" disabled/>
	</p>
	<p class="span1">
		<input class="input-mini" name="interval" value="{interval}" disabled/>
	</p>
	<p class="btn-group span3">
    	<a class="btn btn-primary"><strong class="score-count">{scoreListCount}</strong></a>
    	<a class="btn dropdown-toggle score-list-edit" data-title="分值列表">查看</a>
		<input type="hidden" name="score-list-value" value="{scoreListVaue}"/>
    </p>
	<a class="span1" href="#" title="设置给分档次" onclick="showMarkLevel(this)">档次查看</a>
</div>
<div class="part-liston-content hidden">
	<ul>
		<li>
			<a class="btn" onclick="closeMarkLevel(this)">
				<i class="icon-folder-close icon-white"></i> 关闭
			</a>
		</li>
	</ul>
</div>
</div>
</script>
<script type="template" id="mark-level-template">
<li class="mark-level-li">
<span class="help-inline">名称：</span>
<input class="input-mini" type="text" name="name" value="{name}"/> 
<span class="help-inline">最小值：</span>
<input class="input-mini info-input required-input number-input" data-min="0" type="text" name="min" value="{min}"/>
<span class="help-inline">最大值：</span>
<input class="input-mini info-input required-input number-input" data-min="0" type="text" name="max" value="{max}"/>
<c:if test="${flag==false}">
<a class="btn btn-danger" onclick="deleteMarkLevel(this)">
	<i class="icon-remove icon-white"></i> 删除
</a>
</c:if>
</li>
</script>
<script type="template" id="mark-level-show-template">
<li class="mark-level-li">
<span class="help-inline">名称：</span>
<input class="input-mini" type="text" name="name" value="{name}" disabled/> 
<span class="help-inline">最小值：</span>
<input class="input-mini" name="min" value="{min}" disabled/>
<span class="help-inline">最大值：</span>
<input class="input-mini" name="max" value="{max}" disabled/>
</li>
</script>

</html>