<%@ page contentType="text/html;charset=UTF-8"%>

<script type="text/javascript" src="${ctxStatic}/mark-new/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="${ctxStatic}/mark-new/js/jquery.mousewheel.min.js"></script>

<link rel="stylesheet" type="text/css" href="${ctxStatic}/jBox/Source/jBox.css">
<script type="text/javascript" src="${ctxStatic}/jBox/Source/jBox.min.js"></script>

<link rel="stylesheet" type="text/css" href="${ctxStatic}/iviewer/jquery.iviewer.css">
<script type="text/javascript" src="${ctxStatic}/iviewer/jquery.iviewer.js"></script>

<div id="track-view-content" class="container-fluid" style="display:none">
	<div class="row-fluid">
		<div id="right-track-div" >
			<ul id="right-track-nav" class="nav nav-tabs">
			</ul>
			<div id="right-track-content" class="tab-content">
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">
var imageModal = new jBox('Modal');

$(document).ready(function() {
	$('#left-answer-div').find('iframe').height($(window).height()*0.83);
});

function initTrackPopover(title,url) {
	initTrackPopoverContent(url); 
	imageModal.setWidth($(window).width()*0.9);
	imageModal.setHeight($(window).height()*0.85);
	imageModal.setTitle(title);
	imageModal.open();
}
function initTrackPopoverContent(url){

	$('#right-track-nav, #right-track-content').empty();
	$.ajax({  
        type:"GET",  
        url:url,  
        dataType:"json",  
        success:function(data){  
        	for (var i = 0; i < data.list.length; i++) {
            	var group = data.list[i];
            	var groupNumber = group.groupNumber;
            	var title = group.groupNumber+'-'+group.groupTitle;
        		$('#right-track-nav').append('<li><a href="#track_'+groupNumber+'" data-toggle="tab">'+title+'</a></li>');
        		var pane = $('<div class="tab-pane fade" id="track_'+groupNumber+'" style="overflow: hidden;"><canvas id="track-builder-canvas_'+groupNumber+'"></canvas></div>').appendTo($('#right-track-content'));
        		var canvas = document.getElementById('track-builder-canvas_'+groupNumber);
        		var ctx = canvas.getContext('2d');
	        	buildImages(data.imageServer,group.picUrls,group.pictureConfig,canvas,ctx,group.markTracks,group.markSpecialTagList); 
        	}
        	$('#right-track-nav a:first').trigger('click');
			imageModal.setContent($('#track-view-content'));
        } 
    });  

}

function buildImages (imageServer,picUrls,config,canvas,ctx,markTracks,markSpecialTagList) {
    var indexSet = {};
    for(var i=0;i<config.length;i++){
        indexSet[config[i].i-1] = true;
    }
    //调用图片预加载函数，实现回调函数
    var imageObjects = [];
    loadImages(imageObjects, imageServer, indexSet, picUrls, 0,function(images) {
        var maxWidth = 0;
        var totalHeight = 0;
        for (var i = 0; i < config.length; i++) {
            //计算最大宽度与合计高度
            if(config[i].w<=0){
                config[i].w=images[config[i].i-1].width;
            }
            if(config[i].h<=0){
                config[i].h=images[config[i].i-1].height;
            }
            maxWidth = Math.max(maxWidth, config[i].w);
            totalHeight += config[i].h;
        }
        if (maxWidth > 0 && totalHeight > 0) {
            //设置画布大小及背景颜色
            canvas.width = maxWidth;
            canvas.height = totalHeight;
            ctx.fillStyle = "#FFFFFF";
            ctx.fillRect(0, 0, maxWidth, totalHeight);
            //绘画到画布
            var height = 0;
            for (var i = 0; i < config.length; i++) {
                var image = images[config[i].i-1];
                ctx.drawImage(image, config[i].x, config[i].y, config[i].w, config[i].h, 0, height, config[i].w, config[i].h);
                height += config[i].h;
            }
        }
        //阅卷轨迹
        if(markTracks!=undefined && markTracks.length>0){
    		ctx.font ="60px Arial";
    		ctx.fillStyle ='red';
    		for (var j = 0; j < markTracks.length; j++) {
    			ctx.fillText(
    					markTracks[j].score,
    					markTracks[j].positionX*canvas.width,
    					markTracks[j].positionY*canvas.height);
    		}
        }
		for (var i = 0; i < markSpecialTagList.length; i++) {
		    ctx.font ="60px Arial";
            ctx.fillStyle ='red';
    		if(markSpecialTagList[i].positionX > 0 && markSpecialTagList[i].positionY > 0){
    			ctx.fillText(markSpecialTagList[i].tagName,markSpecialTagList[i].positionX*canvas.width ,markSpecialTagList[i].positionY*canvas.height);
        	}
		}
    });
}

function loadImages(images, imageServer, indexSet, urls, number, callback) {
    if (urls != undefined && number < urls.length) {
        if(indexSet[number]==true) {
            var img = new Image();
            img.onload = function() {
                images.push(img);
                loadImages(images, imageServer, indexSet, urls, number + 1, callback);
            }
            img.src = imageServer + urls[number] + '?' + new Date().getTime();
        }else {
            images.push({});
            loadImages(images, imageServer, indexSet, urls, number + 1, callback);
        }
    } else {
        callback.call(this, images);
    }
}

</script>



