<%@ page contentType="text/html;charset=UTF-8" %>
<script type="text/javascript" src="${ctxStatic}/utils/image-utils.js"></script>

<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: auto;"><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.fileServer, 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) {
        new ImageLoader({
            server: imageServer,
            flush: true,
            strict: false,
            split: [${properties['slice.split.config']}]
        }).combine(picUrls, canvas, config, function () {
            //阅卷轨迹
            if (markTracks != undefined && markTracks.length > 0) {
                ctx.font = "30px Arial";
                ctx.fillStyle = 'red';
                for (var j = 0; j < markTracks.length; j++) {
                    if (markTracks[j].positionX > 0 && markTracks[j].positionY > 0) {
                        ctx.fillText(
                            markTracks[j].score,
                            markTracks[j].positionX * canvas.width,
                            markTracks[j].positionY * canvas.height);
                    }
                }
            }
            if (markSpecialTagList != undefined && markSpecialTagList.length > 0) {
                ctx.font = "30px Arial";
                ctx.fillStyle = 'red';
                for (var i = 0; i < markSpecialTagList.length; i++) {
                    if (markSpecialTagList[i].positionX > 0 && markSpecialTagList[i].positionY > 0) {
                        ctx.fillText(markSpecialTagList[i].tagName,
                            markSpecialTagList[i].positionX * canvas.width,
                            markSpecialTagList[i].positionY * canvas.height);
                    }
                }
            }
        })
    }
</script>



