{% load i18n %}

function getOutputScale(ctx) {
    var devicePixelRatio = window.devicePixelRatio || 1;
    var backingStoreRatio = ctx.webkitBackingStorePixelRatio ||
                          ctx.mozBackingStorePixelRatio ||
                          ctx.msBackingStorePixelRatio ||
                          ctx.oBackingStorePixelRatio ||
                          ctx.backingStorePixelRatio || 1;
    var pixelRatio = devicePixelRatio / backingStoreRatio;
    return {
        sx: pixelRatio,
        sy: pixelRatio,
        scaled: pixelRatio !== 1
    };
}

try {
    PDFJS.workerSrc = '{{MEDIA_URL}}js/pdf.worker.js';
    $('#file-view').html('<div id="pdf"><span class="loading-icon loading-tip"></span></div>');
    PDFJS.getDocument(raw_path).then(function(pdf) {
        if (pdf.numPages > 50) {
            feedback("{% trans "This file has more than 50 pages, and only the first 50 will be shown here." %}", 'info');
        }

        var $loadingTip = $('#pdf .loading-tip');

        // show at most 50 pages
        var shownPageCount = pdf.numPages < 50 ? pdf.numPages : 50;

        var maxPageWidth = $('#pdf').width();
        var getPageAndRender = function (pageNumber) {
            pdf.getPage(pageNumber).then(function(page) {
                var scale = 1.5;
                var viewport = page.getViewport(scale);
                if (viewport.width > maxPageWidth) {
                    // set a proper scale
                    viewport = viewport.clone({'scale': maxPageWidth / (viewport.width / 1.5)});
                }

                var width = Math.floor(viewport.width);
                var height = Math.floor(viewport.height);

                var $canvas = $('<canvas class="pdf-page-canvas"></canvas>');
                var canvas = $canvas[0];
                var ctx = canvas.getContext('2d', {alpha: false});
                var outputScale = getOutputScale(ctx);

                $canvas
                .attr({
                    'width': width * outputScale.sx,
                    'height': height * outputScale.sy
                })
                .css({
                    'width': width,
                    'height': height
                });

                if (outputScale.scaled) {
                    ctx.scale(outputScale.sx, outputScale.sy);
                }

                var $textLayer = $('<div class="pdf-page-text-layer"></div>');
                $loadingTip.before($('<div class="pdf-page"></div>').append($canvas).append($textLayer));

                var canvasOffset = $canvas.offset();
                $textLayer
                .css({
                    'width': width,
                    'height': height
                })
                .offset({
                    top: canvasOffset.top,
                    left: canvasOffset.left
                });

                page.render({
                    canvasContext: ctx,
                    viewport: viewport
                });

                page
                .getTextContent({'normalizeWhitespace': true})
                .then(function(text) {
                    PDFJS.renderTextLayer({
                        textContent: text,
                        textContentStream: page.streamTextContent(),
                        container: $textLayer[0],
                        viewport: viewport
                    });
                });

                if (pageNumber < shownPageCount) {
                    pageNumber++;
                    getPageAndRender(pageNumber);
                } else {
                    // the last page
                    $loadingTip.hide();
                }
            });
        };

        // start from page 1
        getPageAndRender(1);
    });

} catch(e) {
    var tip = "{% trans "You can use IE 10 or other browsers, for example, Firefox, to view it online." %}";
    $('#file-view').html('<div id="file-view-tip"><p>' + tip + '</p></div>');
}
