{% extends 'templatevamp.html' %} {% block title %}Check Damage{% endblock %} {% block head %} {% endblock %} {% block content %}
<style>
    .subnavbar-inner {
        height: auto;
        background: #fff;
        border-bottom: none;
    }

    .subnavbar .container>ul {
        display: block;
        height: auto;
        padding: 0;
        margin: 0;
    }

    .subnavbar .container>ul>li {
        border-bottom: 1px solid #d9d9d9;
        border-left: 0px;
    }

    .subnavbar .container div.item {
        min-width: 90px;
        height: 60px;
        padding: 10px 0;
        margin: 0;
        border-bottom: 1px solid #d9d9d9;
    }

    .subnavbar .container>ul>li.active>a {
        border-bottom: 3px solid #860030;
        color: #5b0021;
    }

    .result .info .item {
        display: table-row;
    }

    .result .info .item div {
        display: table-cell;
        padding: 0 10px 0 0;
    }
    /* Table view */

    .rwd-table {
        margin: 1em 0;
        min-width: 300px;
        width: 100%;
    }

    .rwd-table tr td,
    .rwd-table tr th {
        border-top: 1px solid #d0bebe;
    }

    .rwd-table tr:last-child td,
    .rwd-table tr:last-child th {
        border-bottom: 1px solid #d0bebe;
    }

    .rwd-table th {
        display: none;
    }

    .rwd-table td {
        display: block;
        text-align: left;
        /*cursor: pointer;*/
        position: relative;
    }

    .rwd-table .info td {
        cursor: auto;
        text-align: left;
    }

    .rwd-table td:first-child {
        padding-top: .5em;
    }

    .rwd-table td:last-child {
        padding-bottom: .5em;
    }

    .rwd-table td:before {
        content: attr(data-th) ": ";
        font-weight: bold;
        width: 6.5em;
        display: inline-block;
    }

    .rwd-table th,
    .rwd-table td {
        text-align: left;
    }

    .rwd-table th,
    .rwd-table td {
        margin: .5em 1em;
    }

    .rwd-table .title {
        font-weight: bold;
        overflow-x: hidden;
    }

    .rwd-table .title .text {
        cursor: pointer;
        color: inherit;
    }

    .rwd-table .status-404 {
        color: #5b0021;
    }

    .rwd-table .status-200 {
        color: #077500;
    }

    .rwd-table .status-null {
        color: #ad8800;
    }

    @media (min-width: 615px) {
        .rwd-table td[data-th="Status"] {
            max-width: 60px
        }
        .rwd-table td[data-th="Location"] {
            max-width: 64px
        }
        .rwd-table td[data-th="Size"] {
            max-width: 64px
        }
        .rwd-table td[data-th="URI"] {
            position: relative;
            overflow: hidden;
            white-space: nowrap;
            max-width: 350px;
        }
        .rwd-table td[data-th="URI"] .left-ellipsis {
            display: none;
            background-color: rgb(249, 246, 241);
            position: absolute;
            left: 0px;
        }
        .rwd-table td.vert-separator,
        .rwd-table th.vert-separator {
            border-right: 1px dotted #d0bebe;
        }
    }

    @media (min-width: 614px) {
        .rwd-table td:before {
            display: none;
        }
        .rwd-table th,
        .rwd-table td {
            display: table-cell;
            padding: 5px !important;
        }
        .rwd-table td {
            text-align: center;
        }
        .rwd-table th {
            text-align: center;
            background-color: #efe7e7;
        }
        .rwd-table th:first-child,
        .rwd-table td:first-child {
            padding-left: 0;
        }
        .rwd-table th:last-child,
        .rwd-table td:last-child {
            padding-right: 0;
        }
    }

    .rwd-table .expcol {
        cursor: pointer;
        /** position: absolute;
    font-size: 36px;
    top: -3px;
    color: red;
    right: 10px;
    display: none; */
    }

    .rwd-table .expcol:before {
        content: "\f139";
    }

    .rwd-table .expcol.collapsed:before {
        content: "\f13a";
    }
    /** .rwd-table .hover .expcol {
    display: block;
  } */
</style>

<div class="subnavbar">
    <div class="subnavbar-inner">
        <div class="container">
            <ul class="mainnav">
                <li class="active"><a data-toggle="tab" href="#summary"><i class="fa fa fa-circle-o-notch fa-spin"></i><span>Summary</span> </a> </li>
                <li><a data-toggle="tab" href="#images"><i class="fa fa fa-circle-o-notch fa-spin"></i><span>Image</span> </a> </li>
                <li><a data-toggle="tab" href="#csses"><i class="fa fa fa-circle-o-notch fa-spin"></i><span>Stylesheet</span> </a> </li>
                <li><a data-toggle="tab" href="#jses"><i class="fa fa fa-circle-o-notch fa-spin"></i><span>Javascript</span> </a> </li>
                <li><a data-toggle="tab" href="#multimedias"><i class="fa fa fa-circle-o-notch fa-spin"></i><span>Multimedia</span> </a> </li>
                <li><a data-toggle="tab" href="#text"><i class="fa fa fa-circle-o-notch fa-spin"></i><span>Text</span> </a> </li>
                <li><a data-toggle="tab" href="#iframes"><i class="fa fa fa-circle-o-notch fa-spin"></i><span>IFrame</span> </a> </li>
                <li><a data-toggle="tab" href="#screenshots"><i class="fa fa fa-circle-o-notch fa-spin"></i><span>Screenshot</span> </a> </li>
                <li><a data-toggle="tab" href="#log"><i class="fa fa fa-circle-o-notch fa-spin"></i><span>Log</span> </a> </li>
            </ul>
            <div class="item">
                <form method="GET" action="/memento/check" role="form" data-toggle="validator">
                    <div class="form-group">
                        <div class="input-group">
                            <input class="form-control" type="url" name="url" placeholder="http://www.somesite.com" required data-error="Your URI format is not correct. Consider adding a scheme (e.g: http://) to your URI" />
                            <span class="input-group-btn">
                  <button class="btn btn-success" type="submit"><i class="fa fa-play"></i></button>
                </span>
                        </div>
                        <div class="help-block with-errors"></div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="main">
    <div class="main-inner">
        <div class="container">
            <div class="tab-content">
                <div class="tab-pane fade in active" id="summary">
                    <div class="row">{% include '_summary.html' %}</div>
                </div>
                <div class="tab-pane fade" id="images">
                    <div class="row">{% include '_images.html' %}</div>
                </div>
                <div class="tab-pane fade" id="csses">
                    <div class="row">{% include '_csses.html' %}</div>
                </div>
                <div class="tab-pane fade" id="jses">
                    <div class="row">{% include '_jses.html' %}</div>
                </div>
                <div class="tab-pane fade" id="multimedias">
                    <div class="row">{% include '_multimedias.html' %}</div>
                </div>
                <div class="tab-pane fade" id="text">
                    <div class="row">{% include '_text.html' %}</div>
                </div>
                <div class="tab-pane fade" id="iframes">
                    <div class="row">{% include '_iframes.html' %}</div>
                </div>
                <div class="tab-pane fade" id="screenshots">
                    <div class="row">{% include '_screenshots.html' %}</div>
                </div>
                <div class="tab-pane fade" id="log">
                    <div class="row">{% include '_log.html' %}</div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- /main -->
{% endblock %} {% block tail %}
<script src="{{ url_for('static', filename='assets/js/md5.js') }}"></script>
<script src="{{ url_for('static', filename='assets/moment.js/moment.js') }}"></script>
<script type="text/javascript">
    $('input[name=url]').val('{{ url }}');
    $('#url').html('{{ url }}').attr('title', '{{ url }}');
    $('select[name=type]').val('{{ type }}');

    function toggleChevron(e) {
        $(e.target)
            .find("i.indicator")
            .toggleClass('glyphfa fa-chevron-down glyphfa fa-chevron-up');
    }

    function showScreenshot(uri) {
        $('<img>').attr('src', '/api/damage/screenshot/' + encodeURIComponent(uri))
            .appendTo($('#screenshots .row'));

        $('#summary .thumb').attr('src', '/api/damage/screenshot/' + encodeURIComponent(uri));
    }

    function showSummary(result) {
        // Append Total Damage
        $('<h2 class="total-damage text-center">Damage = ' +
                '<u>' + result['total_damage'].toFixed(3) + '</u></h2>')
            .appendTo('#summary .result');

        // Append Actual Damage and Detail
        $('.actual-damage-total').html(result['actual_damage']['total'].toFixed(3));
        $('.actual-damage-image').html(result['actual_damage']['image'].toFixed(3));
        $('.actual-damage-css').html(result['actual_damage']['css'].toFixed(3));
        $('.actual-damage-multimedia').html(result['actual_damage']['multimedia'].toFixed(3));
        $('.actual-damage-javascript').html(result['actual_damage']['js'].toFixed(3));
        $('.actual-damage-iframe').html(result['actual_damage']['iframe'].toFixed(3));
        $('.actual-damage-text').html(0.00000);

        // Append Potential Damage and Detail
        $('.potential-damage-total').html(result['potential_damage']['total'].toFixed(3));
        $('.potential-damage-image').html(result['potential_damage']['image'].toFixed(3));
        $('.potential-damage-css').html(result['potential_damage']['css'].toFixed(3));
        $('.potential-damage-multimedia').html(result['potential_damage']['multimedia'].toFixed(3));
        $('.potential-damage-javascript').html(result['potential_damage']['js'].toFixed(3));
        $('.potential-damage-iframe').html(result['potential_damage']['iframe'].toFixed(3));
        $('.potential-damage-text').html(result['potential_damage']['text'].toFixed(3));

        // On value clicked
        $('.img-ref').on('click', function() {
            $('a[data-toggle="tab"][href="#images"]').tab('show')
        });
        $('.css-ref').on('click', function() {
            $('a[data-toggle="tab"][href="#csses"]').tab('show')
        });
        $('.mlm-ref').on('click', function() {
            $('a[data-toggle="tab"][href="#multimedias"]').tab('show')
        });
        $('.js-ref').on('click', function() {
            $('a[data-toggle="tab"][href="#jses"]').tab('show')
        });
        $('.ifr-ref').on('click', function() {
            $('a[data-toggle="tab"][href="#iframes"]').tab('show')
        });
        $('.text-ref').on('click', function() {
            $('a[data-toggle="tab"][href="#text"]').tab('show')
        });

        MathJax.Hub.Queue(["Typeset", MathJax.Hub, "damage-detail"]);
    }

    function showImages(images, weight) {
        var table = $('<table class="rwd-table">').appendTo('#images .result');
        $(
            '<thead>' +
            '<tr>' +
            '<th colspan="3" rowspan="2" class="vert-separator">URI</th>' +
            '<th rowspan="2" class="vert-separator">Status</th>' +
            '<th colspan="2" class="vert-separator">Actual Damage</th>' +
            '<th colspan="2">Potential Damage</th>' +
            '</tr>' +
            '<tr>' +
            '<th>Location</th>' +
            '<th class="vert-separator">Size</th>' +
            '<th>Location</th>' +
            '<th>Size</th>' +
            '</tr>' +
            '</thead>'
        ).appendTo(table);

        tbody = '<tbody>';
        pdLocation = pdSize = adLocation = adSize = 0;
        images.forEach(function(image, idx) {
            var rectangles = [];
            image['rectangles'].forEach(function(rect) {
                rectangles.push('Left: ' + rect['left'] + ' px, Top: ' + rect['top'] +
                    ' px, Width: ' + rect['width'] + ' px, Height: ' + rect['height'] + ' px');
            });

            var rowClass = '';
            if (image.status_code > 399) rowClass = 'status-404';
            else if (image.status_code == 200) rowClass = 'status-200';

            tbody += '<tr class="title ' + rowClass  + '">' +
                '<td data-th="No">' + (idx + 1) + '</td>' +
                '<td data-th="URI" style="text-align: left;">' +
                '<a href="' + image['url'] + '" target="_blank" class="text" title="' + image['url'] + '">' + image['url'] + '</span>' +
                '<span class="left-ellipsis">...</span>' +
                '</td>' +
                '<td class="vert-separator"><i class="fa expcol collapsed" data-toggle="collapse" data-target="#image-info-' + idx + '"></i></td>' +
                '<td data-th="Status" class="vert-separator">' + ('status_code' in image ? image['status_code'] : '') + '</td>' +
                '<td data-th="Location">' + ('actual_damage' in image ? image['actual_damage']['location'].toFixed(3) : '-') + '</td>' +
                '<td data-th="Size" class="vert-separator">' + ('actual_damage' in image ? image['actual_damage']['size'].toFixed(3) : '-') + '</td>' +
                '<td data-th="Location">' + ('potential_damage' in image ? image['potential_damage']['location'].toFixed(3) : '-') + '</td>' +
                '<td data-th="Size">' +
                ('potential_damage' in image ? image['potential_damage']['size'].toFixed(3) : '-') +
                '</td>' +
                '</tr>' +
                '<tr id="image-info-' + idx + '" class="info collapse">' +
                '<td style="border-top-width: 0px;"></td>' +
                '<td colspan="15"><div>' +
                '<div class="item"><div>URI</div><div> : </div><div>' + image['url'] + '</div></div>' +
                '<div class="item"><div>Content-Type</div><div> : </div><div>' + image['content_type'] + '</div></div>' +
                '<div class="item"><div>Proportion to the page size</div><div> : </div><div>' + (image['percentage_coverage'] * 100).toFixed(3) + ' %' + '</div></div>' +
                '<div class="item"><div>Rectangles</div><div> : </div><div>' + rectangles.join('<br/>') + '</div></div>' +
                '</div></td>' +
                '</tr>';

            pdLocation += ('potential_damage' in image ? image['potential_damage']['location'] : 0);
            pdSize += ('potential_damage' in image ? image['potential_damage']['size'] : 0);
            adLocation += ('actual_damage' in image ? image['actual_damage']['location'] : 0);
            adSize += ('actual_damage' in image ? image['actual_damage']['size'] : 0);
        });

        if (images.length == 0) {
            tbody += '<tr class="title">' +
                '<td colspan="15">The page contains no reference to the image resources</td>' +
                '</tr>';
        }

        tbody += '</tbody>';
        $(tbody).appendTo(table);

        if (images.length > 0) {
            $(
                '<thead>' +
                '<tr>' +
                '<th colspan="3" class="vert-separator">Total</th>' +
                '<th class="vert-separator"></th>' +
                '<th>' + adLocation.toFixed(3) + '</th>' +
                '<th class="vert-separator">' + adSize.toFixed(3) + '</th>' +
                '<th>' + pdLocation.toFixed(3) + '</th>' +
                '<th>' + pdSize.toFixed(3) + '</th>' +
                '</tr>' +
                '<tr>' +
                '<th colspan="3" class="vert-separator">Weight</th>' +
                '<th class="vert-separator">' + weight.toFixed(3) + '</th>' +
                '<th colspan="2" class="vert-separator"></th>' +
                '<th colspan="2"></th>' +
                '</tr>' +
                '<tr>' +
                '<th colspan="3" class="vert-separator">Damage</th>' +
                '<th class="vert-separator"></th>' +
                '<th colspan="2" class="vert-separator">' + ((adLocation + adSize) * weight).toFixed(3) + '</th>' +
                '<th colspan="2">' + ((pdLocation + pdSize) * weight).toFixed(3) + '</th>' +
                '</tr>' +
                '</thead>'
            ).appendTo(table);
        }
    }

    function showStylesheets(csses, weight) {
        var table = $('<table class="rwd-table">').appendTo('#csses .result');
        $(
            '<thead>' +
            '<tr>' +
            '<th colspan="3" rowspan="2" class="vert-separator">URI</th>' +
            '<th rowspan="2" class="vert-separator">Status</th>' +
            '<th colspan="2" class="vert-separator">Actual Damage</th>' +
            '<th colspan="2">Potential Damage</th>' +
            '</tr>' +
            '<tr>' +
            '<th>Tag</th>' +
            '<th class="vert-separator">Ratio</th>' +
            '<th>Tag</th>' +
            '<th>Ratio</th>' +
            '</tr>' +
            '</thead>'
        ).appendTo(table);

        tbody = '<tbody>';
        pdTag = pdRatio = adTag = adRatio = 0;
        csses.forEach(function(css, idx) {
            if (!css['rules_tag']) css['rules_tag'] = [];

            var rowClass = '';
            if (css.status_code > 399) rowClass = 'status-404';
            else if (css.status_code == 200) rowClass = 'status-200';

            tbody += '<tr class="title ' + rowClass + '">' +
                '<td data-th="No">' + (idx + 1) + '</td>' +
                '<td data-th="URI" style="text-align:left;">' +
                '<a href="' + css['url'] + '" target="_blank" class="text" title="' + css['url'] + '">' + css['url'] + '</span>' +
                '<span class="left-ellipsis">...</span>' +
                '</td>' +
                '<td class="vert-separator"><i class="fa expcol collapsed" data-toggle="collapse" data-target="#css-info-' + idx + '"></i></td>' +
                '<td data-th="Status" class="vert-separator">' + ('status_code' in css ? css['status_code'] : '') + '</td>' +
                '<td data-th="Tag">' + ('actual_damage' in css ? css['actual_damage']['tag'].toFixed(3) : '-') + '</td>' +
                '<td data-th="Ratio" class="vert-separator">' + ('actual_damage' in css ? css['actual_damage']['ratio'].toFixed(3) : '-') + '</td>' +
                '<td data-th="Tag">' + ('potential_damage' in css ? css['potential_damage']['tag'].toFixed(3) : '-') + '</td>' +
                '<td data-th="Ratio">' +
                ('potential_damage' in css ? css['potential_damage']['ratio'].toFixed(3) : '-') +
                '</td>' +
                '</tr>' +
                '<tr id="css-info-' + idx + '" class="info collapse">' +
                '<td style="border-top-width: 0px;"></td>' +
                '<td colspan="15"><div>' +
                '<div class="item"><div>URI</div><div> : </div><div>' + css['url'] + '</div></div>' +
                '<div class="item"><div>Rules Selector</div><div> : </div><div>' + css['rules_tag'].join(', ') + ' <strong>(Total ' + css['rules_tag'].length + ')</strong>' + '</div></div>' +
                '<div class="item"><div>Importance</div><div> : </div><div>' + css['importance'] + '</div></div>'
            '</div></td>' +
            '</tr>';

            pdTag += ('potential_damage' in css ? css['potential_damage']['tag'] : 0)
            pdRatio += ('potential_damage' in css ? css['potential_damage']['ratio'] : 0)
            adTag += ('actual_damage' in css ? css['actual_damage']['tag'] : 0)
            adRatio += ('actual_damage' in css ? css['actual_damage']['ratio'] : 0)
        });

        if (csses.length == 0) {
            tbody += '<tr class="title">' +
                '<td colspan="15">The page contains no reference to the stylesheet resources</td>' +
                '</tr>';
        }

        tbody += '</tbody>';
        $(tbody).appendTo(table);

        if (csses.length > 0) {
            $(
                '<thead>' +
                '<tr>' +
                '<th colspan="3" class="vert-separator">Total</th>' +
                '<th class="vert-separator"></th>' +
                '<th>' + adTag.toFixed(3) + '</th>' +
                '<th class="vert-separator">' + adRatio.toFixed(3) + '</th>' +
                '<th>' + pdTag.toFixed(3) + '</th>' +
                '<th>' + pdRatio.toFixed(3) + '</th>' +
                '</tr>' +
                '<tr>' +
                '<th colspan="3" class="vert-separator">Weight</th>' +
                '<th class="vert-separator">' + weight.toFixed(3) + '</th>' +
                '<th colspan="2" class="vert-separator"></th>' +
                '<th colspan="2"></th>' +
                '</tr>' +
                '<tr>' +
                '<th colspan="3" class="vert-separator">Damage</th>' +
                '<th class="vert-separator"></th>' +
                '<th colspan="2" class="vert-separator">' + ((adTag + adRatio) * weight).toFixed(3) + '</th>' +
                '<th colspan="2">' + ((pdTag + pdRatio) * weight).toFixed(3) + '</th>' +
                '</tr>' +
                '</thead>'
            ).appendTo(table);
        }
    }

    function showJavascripts(jses, weight) {
        var table = $('<table class="rwd-table">').appendTo('#jses .result');
        $(
            '<thead>' +
            '<tr>' +
                '<th colspan="3" rowspan="2" class="vert-separator">URI</th>' +
                '<th rowspan="2" class="vert-separator">Status</th>' +
                '<th colspan="1" class="vert-separator">Actual Damage</th>' +
                '<th colspan="1">Potential Damage</th>' +
            '</tr>' +
            '</thead>'
        ).appendTo(table);

        tbody = '<tbody>';
        pd = ad = 0;
        jses.forEach(function(js, idx) {
            if (!js['rules_tag']) js['rules_tag'] = [];

            var rowClass = '';
            if (js.status_code > 399) rowClass = 'status-404';
            else if (js.status_code == 200) rowClass = 'status-200';

            tbody += '<tr class="title ' + rowClass + '">' +
                    '<td data-th="No">' + (idx + 1) + '</td>' +
                    '<td data-th="URI" style="text-align:left;">' +
                    '<a href="' + js['url'] + '" target="_blank" class="text" title="' + js['url'] + '">' + js['url'] + '</span>' +
                    '<span class="left-ellipsis">...</span>' +
                    '</td>' +
                    '<td class="vert-separator"><i class="fa expcol collapsed" data-toggle="collapse" data-target="#js-info-' + idx + '"></i></td>' +
                    '<td data-th="Status" class="vert-separator">' + ('status_code' in js ? js['status_code'] : '') + '</td>' +
                    '<td data-th="Actual Damage" class="vert-separator">' + ('actual_damage' in js ? js['actual_damage']['total'].toFixed(3) : '-') + '</td>' +
                    '<td data-th="Potential Damage">' + ('potential_damage' in js ? js['potential_damage']['total'].toFixed(3) : '-') + '</td>' +
                '</tr>' +
                '<tr id="js-info-' + idx + '" class="info collapse">' +
                    '<td style="border-top-width: 0px;"></td>' +
                    '<td colspan="15"><div>' +
                        '<div class="item"><div>URI</div><div> : </div><div>' + js['url'] + '</div></div>' +
                    '</div></td>' +
                '</tr>';

            pd += ('potential_damage' in js ? js['potential_damage']['total'] : 0)
            ad += ('actual_damage' in js ? js['actual_damage']['total'] : 0)
        });

        if (jses.length == 0) {
            tbody += '<tr class="title">' +
                '<td colspan="15">The page contains no reference to the JavaScript resources</td>' +
                '</tr>';
        }

        tbody += '</tbody>';
        $(tbody).appendTo(table);

        if (jses.length > 0) {
            $(
                '<thead>' +
                '<tr>' +
                    '<th colspan="3" class="vert-separator">Total</th>' +
                    '<th class="vert-separator"></th>' +
                    '<th class="vert-separator">' + ad.toFixed(3) + '</th>' +
                    '<th>' + pd.toFixed(3) + '</th>' +
                '</tr>' +
                '<tr>' +
                    '<th colspan="3" class="vert-separator">Weight</th>' +
                    '<th class="vert-separator">' + weight.toFixed(3) + '</th>' +
                    '<th colspan="1" class="vert-separator"></th>' +
                    '<th colspan="1"></th>' +
                '</tr>' +
                '<tr>' +
                    '<th colspan="3" class="vert-separator">Damage</th>' +
                    '<th class="vert-separator"></th>' +
                    '<th colspan="1" class="vert-separator">' + (ad * weight).toFixed(3) + '</th>' +
                    '<th colspan="1">' + (pd * weight).toFixed(3) + '</th>' +
                '</tr>' +
                '</thead>'
            ).appendTo(table);
        }
    }

    function showMultimedias(multimedias, weight) {
        var table = $('<table class="rwd-table">').appendTo('#multimedias .result');
        $(
            '<thead>' +
            '<tr>' +
            '<th colspan="3" rowspan="2" class="vert-separator">URI</th>' +
            '<th rowspan="2" class="vert-separator">Status</th>' +
            '<th colspan="2" class="vert-separator">Actual Damage</th>' +
            '<th colspan="2">Potential Damage</th>' +
            '</tr>' +
            '<tr>' +
            '<th>Location</th>' +
            '<th class="vert-separator">Size</th>' +
            '<th>Location</th>' +
            '<th>Size</th>' +
            '</tr>' +
            '</thead>'
        ).appendTo(table);

        tbody = '<tbody>';
        pdLocation = pdSize = adLocation = adSize = 0;
        multimedias.forEach(function(multimedia, idx) {
            var rectangles = [];
            multimedia['rectangles'].forEach(function(rect) {
                rectangles.push('Left: ' + rect['left'] + ' px, Top: ' + rect['top'] +
                    ' px, Width: ' + rect['width'] + ' px, Height: ' + rect['height'] + ' px');
            });

            var rowClass = '';
            if (multimedia.status_code > 399) rowClass = 'status-404';
            else if (multimedia.status_code == 200) rowClass = 'status-200';

            tbody += '<tr class="title ' + rowClass + '">' +
                '<td data-th="No">' + (idx + 1) + '</td>' +
                '<td data-th="URI" style="text-align: left;">' +
                '<a href="' + multimedia['url'] + '" target="_blank" class="text" title="' + multimedia['url'] + '">' + multimedia['url'] + '</span>' +
                '<span class="left-ellipsis">...</span>' +
                '</td>' +
                '<td class="vert-separator"><i class="fa expcol collapsed" data-toggle="collapse" data-target="#multimedia-info-' + idx + '"></i></td>' +
                '<td data-th="Status" class="vert-separator">' + ('status_code' in multimedia ? multimedia['status_code'] : '') + '</td>' +
                '<td data-th="Location">' + ('actual_damage' in multimedia ? multimedia['actual_damage']['location'].toFixed(3) : '-') + '</td>' +
                '<td data-th="Size" class="vert-separator">' + ('actual_damage' in multimedia ? multimedia['actual_damage']['size'].toFixed(3) : '-') + '</td>' +
                '<td data-th="Location">' + ('potential_damage' in multimedia ? multimedia['potential_damage']['location'].toFixed(3) : '-') + '</td>' +
                '<td data-th="Size">' +
                ('potential_damage' in multimedia ? multimedia['potential_damage']['size'].toFixed(3) : '-') +
                '</td>' +
                '</tr>' +
                '<tr id="multimedia-info-' + idx + '" class="info collapse">' +
                '<td style="border-top-width: 0px;"></td>' +
                '<td colspan="15"><div>' +
                '<div class="item"><div>URI</div><div> : </div><div>' + multimedia['url'] + '</div></div>' +
                '<div class="item"><div>Content-Type</div><div> : </div><div>' + multimedia['content_type'] + '</div></div>' +
                '<div class="item"><div>Coverage</div><div> : </div><div>' + (multimedia['percentage_coverage'] * 100) + ' %' + '</div></div>' +
                '<div class="item"><div>Rectangles</div><div> : </div><div>' + rectangles.join('<br/>') + '</div></div>' +
                '</div></td>' +
                '</tr>';

            pdLocation += ('potential_damage' in multimedia ? multimedia['potential_damage']['location'] : 0);
            pdSize += ('potential_damage' in multimedia ? multimedia['potential_damage']['size'] : 0);
            adLocation += ('actual_damage' in multimedia ? multimedia['actual_damage']['location'] : 0);
            adSize += ('actual_damage' in multimedia ? multimedia['actual_damage']['size'] : 0);
        });

        if (multimedias.length == 0) {
            tbody += '<tr class="title">' +
                '<td colspan="15">The page contains no reference to the multimedia resources</td>' +
                '</tr>';
        }

        tbody += '</tbody>';
        $(tbody).appendTo(table);

        if (multimedias.length > 0) {
            $(
                '<thead>' +
                '<tr>' +
                '<th colspan="3" class="vert-separator">Total</th>' +
                '<th class="vert-separator"></th>' +
                '<th>' + adLocation.toFixed(3) + '</th>' +
                '<th class="vert-separator">' + adSize.toFixed(3) + '</th>' +
                '<th>' + pdLocation.toFixed(3) + '</th>' +
                '<th>' + pdSize.toFixed(3) + '</th>' +
                '</tr>' +
                '<tr>' +
                '<th colspan="3" class="vert-separator">Weight</th>' +
                '<th class="vert-separator">' + weight.toFixed(3) + '</th>' +
                '<th colspan="2" class="vert-separator"></th>' +
                '<th colspan="2"></th>' +
                '</tr>' +
                '<tr>' +
                '<th colspan="3" class="vert-separator">Damage</th>' +
                '<th class="vert-separator"></th>' +
                '<th colspan="2" class="vert-separator">' + ((adLocation + adSize) * weight).toFixed(3) + '</th>' +
                '<th colspan="2">' + ((pdLocation + pdSize) * weight).toFixed(3) + '</th>' +
                '</tr>' +
                '</thead>'
            ).appendTo(table);
        }
    }

    function showIframes(iframes, weight) {
        var table = $('<table class="rwd-table">').appendTo('#iframes .result');
        $(
            '<thead>' +
            '<tr>' +
              '<th colspan="3" rowspan="2" class="vert-separator">URI</th>' +
              '<th rowspan="2" class="vert-separator">Status</th>' +
              '<th colspan="2" class="vert-separator">Actual Damage</th>' +
              '<th colspan="2">Potential Damage</th>' +
            '</tr>' +
            '<tr>' +
              '<th>Location</th>' +
              '<th class="vert-separator">Size</th>' +
              '<th>Location</th>' +
              '<th>Size</th>' +
            '</tr>' +
            '</thead>'
        ).appendTo(table);

        tbody = '<tbody>';
        pdLocation = pdSize = adLocation = adSize = 0;
        iframes.forEach(function(iframe, idx) {
            var rowClass = '';
            if (iframe.status_code > 399) rowClass = 'status-404';
            else if (iframe.status_code == 200) rowClass = 'status-200';

            tbody += '<tr class="title ' + rowClass + '">' +
                  '<td data-th="No">' + (idx + 1) + '</td>' +
                  '<td data-th="URI" style="text-align: left;">' +
                    '<span class="text" title="' + iframe['url'] + '">' + iframe['url'] + '</span>' +
                    '<span class="left-ellipsis">...</span>' +
                  '</td>' +
                  '<td class="vert-separator">'+
                    '<i class="fa expcol collapsed" data-toggle="collapse" data-target="#iframe-info-' + idx + '"></i>'+
                  '</td>' +
                  '<td data-th="Status" class="vert-separator">' +
                    ('status_code' in iframe ? iframe['status_code'] : '') +
                  '</td>' +
                  '<td data-th="Location">' +
                    ('actual_damage' in iframe ? iframe['actual_damage']['location'].toFixed(3) : '-') +
                  '</td>' +
                  '<td data-th="Size" class="vert-separator">' +
                    ('actual_damage' in iframe ? iframe['actual_damage']['size'].toFixed(3) : '-') +
                  '</td>' +
                  '<td data-th="Location">' +
                    ('potential_damage' in iframe ? iframe['potential_damage']['location'].toFixed(3) : '-') +
                  '</td>' +
                  '<td data-th="Size">' +
                    ('potential_damage' in iframe ? iframe['potential_damage']['size'].toFixed(3) : '-') +
                  '</td>' +
                '</tr>' +
                '<tr id="iframe-info-' + idx + '" class="info collapse">' +
                  '<td style="border-top-width: 0px;"></td>' +
                  '<td colspan="15"><div>' +
                    '<div class="item"><div>URI</div><div> : </div><div>' + iframe['url'] + '</div></div>' +
                    '<div class="item"><div>Content-Type</div><div> : </div><div>' + iframe['content_type'] + '</div></div>' +
                    '<div class="item"><div>Coverage</div><div> : </div><div>' + (iframe['percentage_coverage'] * 100) + ' %' + '</div></div>' +
                    '<div class="item"><div>Top</div><div> : </div><div>' + iframe['top'] + ' px</div></div>' +
                    '<div class="item"><div>Left</div><div> : </div><div>' + iframe['left'] + ' px</div></div>' +
                    '<div class="item"><div>Width</div><div> : </div><div>' + iframe['width'] + ' px</div></div>' +
                    '<div class="item"><div>Height</div><div> : </div><div>' + iframe['height'] + ' px</div></div>' +
                  '</div></td>' +
                '</tr>';

            pdLocation += ('potential_damage' in iframe ? iframe['potential_damage']['location'] : 0);
            pdSize += ('potential_damage' in iframe ? iframe['potential_damage']['size'] : 0);
            adLocation += ('actual_damage' in iframe ? iframe['actual_damage']['location'] : 0);
            adSize += ('actual_damage' in iframe ? iframe['actual_damage']['size'] : 0);
        });

        if (iframes.length == 0) {
            tbody += '<tr class="title">' +
                '<td colspan="15">The page contains no reference to the iframe resources</td>' +
                '</tr>';
        }

        tbody += '</tbody>';
        $(tbody).appendTo(table);

        if (iframes.length > 0) {
            $(
                '<thead>' +
                '<tr>' +
                  '<th colspan="3" class="vert-separator">Total</th>' +
                  '<th class="vert-separator"></th>' +
                  '<th>' + adLocation.toFixed(3) + '</th>' +
                  '<th class="vert-separator">' + adSize.toFixed(3) + '</th>' +
                  '<th>' + pdLocation.toFixed(3) + '</th>' +
                  '<th>' + pdSize.toFixed(3) + '</th>' +
                '</tr>' +
                '<tr>' +
                  '<th colspan="3" class="vert-separator">Weight</th>' +
                  '<th class="vert-separator">' + weight.toFixed(3) + '</th>' +
                  '<th colspan="2" class="vert-separator"></th>' +
                  '<th colspan="2"></th>' +
                '</tr>' +
                '<tr>' +
                  '<th colspan="3" class="vert-separator">Damage</th>' +
                  '<th class="vert-separator"></th>' +
                  '<th colspan="2" class="vert-separator">' + ((adLocation + adSize) * weight).toFixed(3) + '</th>' +
                  '<th colspan="2">' + ((pdLocation + pdSize) * weight).toFixed(3) + '</th>' +
                '</tr>' +
                '</thead>'
            ).appendTo(table);
        }
    }

    function showText(text, weight) {
        var table = $('<div class="info"></div>').appendTo('#text .result');
        $(
        '<div class="item"><div>Number of Words</div><div>:</div><div>' +
        text['num_words']   +
        '</div></div>' +
        '<div class="item"><div>Number of Words per Image</div><div>:</div><div>' +
        text['words_per_image']   +
        '</div></div>' +
        '<div class="item"><div>Weight</div><div>:</div><div>' +
        weight.toFixed(3)   +
        '</div></div>'  +
        '<div class="item"><div>Damage</div><div>:</div><div>' +
        (text['num_words'] / text['words_per_image'] * weight).toFixed(3)   +
        '</div></div>'
        ).appendTo(table);
    }

    // If type is URI-M, hide tab mementos
    if ('{{ type }}'.toUpperCase() != 'uri-r'.toUpperCase()) {
        $('.nav .uri-r').hide();
    }

    // Check mementos if type is URI-M
    if ('{{ type }}'.toUpperCase() != 'uri-m'.toUpperCase()) {
        $.get('/memento/mementos', {
            'uri-r': '{{ url }}'
        }, function(memento_uris) {
            // Change icon to checklist
            $('.uri-r .tab-icon').attr('class', 'tab-icon fa fa-check-square-o')

            // Show data in mementos tab
            var ol = $('<ol>').appendTo($('#mementos'));
            memento_uris.forEach(function(uri) {
                var li = $('<li>').appendTo(ol);
                $('<a>').attr('href', uri).html(uri).appendTo(li);
                var spinnerEl = $('<i>').attr('class', 'fa fa-circle-o-notch fa-spin');
                var statusEl = $('<span>').html('Checking...')
                li.append('&nbsp;').append(spinnerEl).append('&nbsp;').append(statusEl);


                // Check damage by calling function checkDamage
                checkDamageUriM(uri, function() {
                    // Change icon to checklist
                    if (spinnerEl) spinnerEl.attr('class', 'fa fa-check-square-o')
                    if (statusEl) statusEl.html('Finished');
                })
            });
        }, 'json');
    } else {
        checkDamageFinished = false;
        isError = false;

        if (location.hash != '') {
            $('a[href="' + location.hash + '"]').tab('show');
        }

        // Make tab persistent, set the history ============================================================
        if (location.hash !== '') $('a[href="' + location.hash + '"]').tab('show'); // tab shown by using script
        $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) { // when the tab is active, run this function.
            if (!window.isback) { // is isback false, add history.
                if (history.pushState) {
                    history.pushState(null, null, '#' + $(e.target).attr('href').substr(1)); // store to the history
                } else {
                    location.hash = '#' + $(e.target).attr('href').substr(1); // another way to store the history.
                }
            }
        });

        // Handle back button, use the history
        window.onhashchange = function() { // when back or forward button is clicked. onhaschange only affected by back/forward button
            if (window.location.hash) {
                window.isback = true;
                $('a[href="' + location.hash + '"]').tab('show');
            } else {
                history.pushState("", document.title, window.location.pathname);
                location.reload();
            }
        }


        checkDamageUriM('{{ url }}', '{{ fresh }}', function(uri, result) {
            checkDamageFinished = true;
            if (result['error']) {
                if (!isError) {
                    $('#alert-is-error')
                        .html('<strong>Error!</strong> ' + result['message'] + '. See <u class="log-ref">log</u> tab')
                        .show();

                    isError = true;
                }

                // On value clicked
                $('.log-ref').on('click', function() {
                    $('a[data-toggle="tab"][href="#log"]').tab('show');
                });


                // Append Actual Damage and Detail
                $('.actual-damage-total').html('-');
                $('.actual-damage-image').html('-');
                $('.actual-damage-css').html('-');
                $('.actual-damage-multimedia').html('-');
                $('.actual-damage-javascript').html('-');
                $('.actual-damage-iframe').html('-');
                $('.actual-damage-text').html('-');

                // Append Potential Damage and Detail
                $('.potential-damage-total').html('-');
                $('.potential-damage-image').html('-');
                $('.potential-damage-css').html('-');
                $('.potential-damage-multimedia').html('-');
                $('.potential-damage-javascript').html('-');
                $('.potential-damage-iframe').html('-');
                $('.potential-damage-text').html('-');
            }

            else {
                $('#alert-is-finished').show();
                // Show info if result is an archive calculation ================================
                if (result['is_archive'] == true) {
                    $('#alert-is-archive').show();
                    var nlArchiveTime = moment(result['archive_time']).fromNow();
                    $('#archive-time').html(nlArchiveTime);

                    var url_hash = window.location.href.split('#');
                    var url_fresh = url_hash[0] + '&fresh=true';
                    if (url_hash.length > 1) {
                        url_fresh += '#' + url_hash[1]
                    }

                    $('#fresh-uri').attr('href', url_fresh);
                }

                // Show summary ==================================================================
                showSummary(result);

                // Show images and stylesheets ===================================================
                for (var key in result) {
                    val = result[key];

                    if (key == 'images') {
                        showImages(val, result['weight']['image']);
                    } else if (key == 'csses') {
                        showStylesheets(val, result['weight']['css']);
                    } else if (key == 'jses') {
                        showJavascripts(val, result['weight']['js']);
                    } else if (key == 'multimedias') {
                        showMultimedias(val, result['weight']['multimedia']);
                    } else if (key == 'iframes') {
                        showIframes(val, result['weight']['iframe']);
                    } else if (key == 'text') {
                        showText(val, result['weight']['text']);
                    }
                }

                setTimeout(fixTable, 3000)

                // Show screenshot ===============================================================
                showScreenshot(uri);
            }

            // Open summary tab ==============================================================
            $('a[data-toggle="tab"][href="#summary"]').tab('show');

            // Change icon to checklist ======================================================
            $('[href="#summary"] i').attr('class', 'fa fa-dashboard');
            $('[href="#images"] i').attr('class', 'fa fa-file-photo-o');
            $('[href="#csses"] i').attr('class', 'icon-css3');
            $('[href="#jses"] i').attr('class', 'icon-javascript');
            $('[href="#multimedias"] i').attr('class', 'fa fa-file-video-o');
            $('[href="#iframes"] i').attr('class', 'fa fa-clone');
            $('[href="#text"] i').attr('class', 'fa fa-text-width');
            $('[href="#screenshots"] i').attr('class', 'fa fa-image');
            $('[href="#log"] i').attr('class', 'fa fa-list');

            // Activate tooltip
            $('[data-toggle="tooltip"]').tooltip({
                container: 'body'
            });

            $('.rwd-table .title').hover(function() {
                $(this).addClass('hover');
            }, function() {
                $(this).removeClass('hover');
            });

            // On window resize
            $(window).resize(function() {
                fixTable()
            });
        });

        function fixTable() {
            cols_uri = $('.rwd-table td[data-th="URI"]');
            for (var i = 0; i < cols_uri.length; i++) {
                row = cols_uri[i]
                $(row).find('span.text').css('float', '');
                $(row).find('span.left-ellipsis').hide();

                if (row.scrollWidth > row.offsetWidth) {
                    $(row).find('span.text').css('float', 'right');
                    $(row).find('span.left-ellipsis').show();
                }
            }
        }

        // Show progress
        log = $('#log code')
        totalLines = 0

        function onCheckProgressFinished(uri, lines) {
            lines.forEach(function(line) {
                var result = hljs.highlightAuto(line);
                log.append('<div>' + result.value + '</div>');
            });

            totalLines += lines.length;

            if (!checkDamageFinished) {
                progressCheckDamageUriM('{{ url }}', totalLines, onCheckProgressFinished)
            }
        }
        progressCheckDamageUriM('{{ url }}', 0, onCheckProgressFinished)

        // Show error
        function onCheckErrorFinished(uri, result) {
            if (result['error']) {
                if (!isError) {
                    $('#alert-is-error')
                        .html('<strong>Error!</strong> ' + result['message'] + '. See <u class="log-ref">log</u> tab')
                        .show();

                    isError = true;
                }
            }

            if (!checkDamageFinished) {
                errorCheckDamageUriM('{{ url }}', onCheckErrorFinished)
            }
        }
        errorCheckDamageUriM('{{ url }}', onCheckErrorFinished)
    }

    function checkDamageUriM(uri, fresh, onFinished) {
        $.get('/api/damage/' + encodeURIComponent(uri) + '?fresh=' + fresh, function(result) {
            $('#calculation-time').html(result['calculation_time']);

            // Call onFinished callback
            onFinished(uri, result)
        }, 'json');
    }

    function progressCheckDamageUriM(uri, start, onFinished) {
        setTimeout(function() {
            $.get('/api/damage/progress/' + encodeURIComponent(uri) + '?start=' + start, function(result) {
                // Call onFinished callback
                onFinished(uri, result)
            });
        }, 3000);
    }

    function errorCheckDamageUriM(uri, onFinished) {
        setTimeout(function() {
            $.get('/api/damage/error/' + encodeURIComponent(uri), function(result) {
                // Call onFinished callback
                onFinished(uri, result)
            }, 'json');
        }, 3000);
    }

    function formatTimer(ms) {
        minutes = Math.floor(ms / 3600);
        ms = ms - minutes * 3600;
        seconds = Math.floor(ms / 60);
        ms = ms - seconds * 60;

        return minutes + ':' + seconds + '.' + ms;
    }
</script>
{% endblock %}