<%@ 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>


<div id="track-view-content"><canvas id="track-builder-canvas"></canvas></div>

<script type="text/javascript">
var imageModal = new jBox('Modal');
var canvas = document.getElementById('track-builder-canvas');
var ctx = canvas.getContext('2d');
$(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){
	$('#track-builder-canvas').empty();
	$.ajax({  
        type:"GET",  
        url:url,  
        dataType:"json",  
        success:function(data){  
        	buildImages(data.imageServer,data.picUrls ,function() {
        		ctx.font ="60px Arial";
        		ctx.fillStyle = 'red';
        		for (var i = 0; i < data.markTracks.length; i++) {
            		if(data.markTracks[i].positionX > 0 && data.markTracks[i].positionY > 0){
	        			ctx.fillText(data.markTracks[i].score,data.markTracks[i].positionX*canvas.width ,data.markTracks[i].positionY*canvas.height);
                	}
        		}
        		for (var i = 0; i < data.markSpecialTagList.length; i++) {
            		if(data.markSpecialTagList[i].positionX > 0 && data.markSpecialTagList[i].positionY > 0){
	        			ctx.fillText(data.markSpecialTagList[i].tagName,data.markSpecialTagList[i].positionX*canvas.width ,data.markSpecialTagList[i].positionY*canvas.height);
                	}
        		}
        	});
		
			imageModal.setContent($('#track-view-content'));
        } 
    });  

}

function buildImages (imageServer,picUrls, callback) {
    //调用图片预加载函数，实现回调函数
    var imageObjects = [];
    loadImages(imageObjects,imageServer, picUrls, 0,function(images) {
        var maxWidth = 0;
        var totalHeight = 0;
        for (var i = 0; i < images.length; i++) {
            //计算最大宽度与合计高度
            var image = images[i];
            maxWidth = Math.max(maxWidth, image.width);
            totalHeight += image.height;
        }
        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 < images.length; i++) {
                var image = images[i];
                ctx.drawImage(image, 0, 0, image.width, image.height, 0, height, image.width, image.height);
                height += image.height;
            }

        }
        callback();
    });
}

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

</script>

