<%@ page contentType="text/html;charset=UTF-8"%>
<link rel="stylesheet" type="text/css" href="${ctxStatic}/jBox/Source/jBox.css">
<script type="text/javascript" src="${ctxStatic}/jBox/Source/jBox.min.js"></script>
<script type="text/javascript">
var sheetTagModal = new jBox('Modal');
var sheetTagContainer = $('#sheet-tag-content');

$(document).ready(function() {
    sheetTagContainer.find('iframe').height($(window).height()*0.83);
});

function initSheetTagPopover(id, title, sheetServer, sheetUrl, answerUrl) {
    $.post('${ctx}/admin/exam/student/sheetTag', {id: id}, function(tags){
        //暂时屏蔽答案PDF显示
        initSheetTagPopoverContent(sheetServer, sheetUrl.split(','), '', tags, function(){
            sheetTagModal.setTitle(title);
            sheetTagModal.setContent($('#sheet-tag-content'));
        });
    });
    
    $('#sheet-tag-tab-nav').empty();
    $('#sheet-tag-tab-content').empty();
    
	sheetTagModal.setWidth($(window).width()*0.9);
	sheetTagModal.setHeight($(window).height()*0.85);
	sheetTagModal.setTitle('正在加载');
	sheetTagModal.open();
}

function initSheetTagPopoverContent(sheetServer, sheetUrls, answerUrl, tags, callback){
    var leftDiv = $('#sheet-tag-left');  
    var rightDiv = $('#sheet-tag-right');
    var tabNav = $('#sheet-tag-tab-nav');
    var tabContent = $('#sheet-tag-tab-content');
    if(answerUrl!=undefined && answerUrl.length>0){
        rightDiv.removeClass('span12');
        rightDiv.addClass('span6');
		leftDiv.find('iframe').attr('src', answerUrl);
		leftDiv.show();
	}else{
	    rightDiv.removeClass('span6');
	    rightDiv.addClass('span12');
		leftDiv.find('iframe').attr('src', '');
		leftDiv.hide();
	}

    tabNav.empty();
    tabContent.empty();
    var loadCount=0;
	for(var i=0;i<sheetUrls.length;i++){
		tabNav.append($('<li><a href="#sheet_tag_'+i+'" data-toggle="tab">第'+(i+1)+'页</a></li>'));
		tabContent.append($('<div class="tab-pane fade" id="sheet_tag_'+i+'" style="overflow: scroll;"><canvas id="sheet-tag-canvas-'+i+'"></canvas></div>'));
	
		var image = new Image();
		image.tagList = tags[i+1] || [];
		image.canvas = $('#sheet-tag-canvas-'+i)[0];
		image.onload = function(){
		    this.canvas.width = Math.min(this.width, tabContent.width()>0?tabContent.width():($(window).width()*0.9-40));
		    this.scaleRate = this.canvas.width / this.width;
		    this.canvas.height = this.height * this.scaleRate;
		    this.ctx = this.canvas.getContext("2d");
		    this.ctx.drawImage(this, 0, 0, this.width, this.height, 0, 0, this.canvas.width, this.canvas.height);
		    this.ctx.font ="20px Arial";
            this.ctx.fillStyle ='red';
		    for(var j=0;j<this.tagList.length;j++) {
		        var tag = this.tagList[j];
		        if(tag.left <=1 && tag.top<=1){
		        	tag.left = tag.left*this.width;
		        	tag.top = tag.top* this.height;
		        }
		        this.ctx.fillText(tag.content, tag.left * this.scaleRate, tag.top * this.scaleRate);
		    }
		    loadCount++;
		    if(loadCount==sheetUrls.length) {
		        callback();
		    }
		};
		image.src = sheetServer + sheetUrls[i] + '?' + new Date().getTime();
	}
	tabNav.find('a:first').trigger('click');
}
</script>
<div id="sheet-tag-content" class="container-fluid" style="display:none">
	<div class="row-fluid">
		<div class="span6" style="overflow:scroll" id="sheet-tag-left">
			<iframe src="" border="0" scrolling="yes" width="100%"></iframe>
		</div>
		<div class="span6" id="sheet-tag-right">
			<ul class="nav nav-tabs" id="sheet-tag-tab-nav">
			</ul>
			<div class="tab-content" id="sheet-tag-tab-content">
			</div>
		</div>
	</div>
</div>