<commit_before><link type="text/css" rel="stylesheet" href="http://annotorious.github.io/latest/themes/dark/annotorious-dark.css"/>
<div class="row skeleton"> 
    <div class="span12">
        <p class="lead"> Tag all the faces people that you know <button id="btn-submit" class="btn btn-large btn-answer pull-right" value='NoTag'><i class="icon-repeat"></i> I don't recognize any person, try next one</button></p>
    </div>
    <div id="img-details" class="span4">
        <h4 id="title"></h4>
        <p id="description"></p>
        <p><i class="icon icon-time"></i> Date taken: <span id="date_taken"></span></p>
        <p><i class="icon icon-tag"></i> Tags: <span id="tags"></span></p>
    </div>
    <div class="span8">
        <span id="photo-link">
                <img id="photo" src="http://i.imgur.com/GeHxzb7.png" style="max-width=100%">
        </span>
    </div>
</div><!-- End of Skeleton Row -->

<div class="row skeleton">
    <div class="span12">
        <div id="disqus_show_btn" style="margin-top:5px;">
            <button class="btn btn-primary btn-large btn-disqus" onclick="loadDisqus()"><i class="icon-comments"></i> Show comments</button>
            <button class="btn btn-large btn-disqus" onclick="loadDisqus()" style="display:none"><i class="icon-comments"></i> Hide comments</button>
        </div><!-- End of Disqus Button section -->
        <!-- Disqus thread for the given task -->
        <div id="disqus_thread" style="margin-top:5px;display:none"></div>
    </div>
</div>

<div class="row">
    <!-- Success and Error Messages for the user --> 
    <div class="span6 offset2" style="height:50px">
        <div id="success" class="alert alert-success" style="display:none;">
            <a class="close">×</a>
            <strong>Well done!</strong> Your answer has been saved
        </div>
        <div id="loading" class="alert alert-info" style="display:none;">
            <a class="close">×</a>
            Loading next task...
        </div>
        <div id="taskcompleted" class="alert alert-info" style="display:none;">
            <strong>The task has been completed!</strong> Thanks a lot!
        </div>
        <div id="finish" class="alert alert-success" style="display:none;">
            <strong>Congratulations!</strong> You have participated in all available tasks!
            <br/>
            <div class="alert-actions">
                <a class="btn small" href="/">Go back</a>
                <a class="btn small" href="/app">or, Check other applications</a>
            </div>
        </div>
        <div id="error" class="alert alert-error" style="display:none;">
            <a class="close">×</a>
            <strong>Error!</strong> Something went wrong, please contact the site administrators
        </div>
    </div> <!-- End Success and Error Messages for the user -->
</div> <!-- End of Row -->

<script type="text/javascript" src="/static/js/vendor/annotorious.min.js"></script>
<script type="text/javascript" src="/static/vendor/jquery.js"></script>
<script type="text/javascript" src="http://annotorious.github.io/demos/semantic-tagging-plugin.js"></script>
<script>
      //anno.addPlugin('SemanticTagging', { endpoint_url: 'http://samos.mminf.univie.ac.at:8080/wikipediaminer' });
</script>
<script>
pybossa.taskLoaded(function(task, deferred) {
    if ( ! $.isEmptyObject(task) ) {
        // load image from flickr
        var img = $('<img />');
        img.load(function() {
            // continue as soon as the image is loaded
            deferred.resolve(task);
        });
        // Flickr uses different suffixes for different picture sizes:
        // _s.jpg    small square 75x75
        // _q.jpg    large square 150x150
        // _t.jpg    thumbnail, 100 on longest side
        // _m.jpg    small, 240 on longest side
        // _n.jpg    small, 320 on longest side
        // .jpg      medium, 500 on longest side
        // _z.jpg    medium 640, 640 on longest side
        // _c.jpg    medium 800, 800 on longest side†
        // _b.jpg    large, 1024 on longest side*
        // _o.jpg    original image, either a jpg, gif or png, depending on source format
        img.attr('src', task.info.url_raw + "_z.jpg");
        img.attr('id', 'anno_' + task.id);
        img.addClass('img-polaroid');
        img.addClass('annotable');
        task.info.image = img;
    }
    else {
        deferred.resolve(task);
    }
});

pybossa.presentTask(function(task, deferred) {
    if ( !$.isEmptyObject(task) ) {
        $('#photo-link').html('').append(task.info.image);
        //$("#question").html(task.info.question);
        $('#task-id').html(task.id);

        $("#btn-submit").html("<i class='icon-repeat'></i> I don't recognize any person, try next one");
        $("#btn-submit").removeClass("btn-success");
        // Load data details
        $("#title").text(task.info.title);
        $("#description").html(task.info.description);
        $("#date_taken").html(task.info.date_taken);
        $("#tags").html(task.info.tags);

        anno.makeAnnotatable(document.getElementById('anno_' + task.id));

        anno.addHandler('onAnnotationCreated', function(annotation) {
            //console.log(annotation.text);
            $("#btn-submit").html("<i class='icon icon-save'></i> Save current annotations");
            $("#btn-submit").addClass("btn-success");
        });

        $('.btn-answer').off('click').on('click', function(evt) {
            var answer = $(evt.target).attr("value");
            if (typeof answer != 'undefined') {
                //console.log(answer);
                pybossa.saveTask(task.id, anno.getAnnotations()).done(function() {
                    deferred.resolve();
                });
                $("#loading").fadeIn(500);
                if ($("#disqus_thread").is(":visible")) {
                    $('#disqus_thread').toggle();
                    $('.btn-disqus').toggle();
                }
            }
            else {
                $("#error").show();
            }
        });
        $("#loading").hide();
    }
    else {
        $(".skeleton").hide();
        $("#loading").hide();
        $("#finish").fadeIn(500);
    }
});

pybossa.run('phototaggingHorsfield');
</script><commit_msg>Modifying modals in template.html<commit_after><!-- link type="text/css" rel="stylesheet" href="http://annotorious.github.io/latest/themes/dark/annotorious-dark.css"/ -->
<link rel="stylesheet" href="http://ol3js.org/en/master/css/ol.css" type="text/css">
<link rel="stylesheet" href="/static/vendor/fancybox/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />

<!-- Which JavaScripts below are redundant? -->
<script src="http://ol3js.org/en/master/build/ol.js" type="text/javascript"></script>
<script src="/static/js/vendor/jquery.serializeJSON.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/OpenLayers.js"></script>
<script src="http://maps.google.com/maps/api/js?v=3.6&amp;sensor=false"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.min.js" type="text/javascript"></script>
<script src="/static/vendor/fancybox/jquery.fancybox.pack.js" type="text/javascript"></script>

<style type="text/css">
    label {
        font-size:16px;
    }
    #map_canvas label {
        width: auto;
        display: inline;
    }
    #map_canvas img {
        max-width: none;
    }
    .affix {
        width: inherit;
        height: 0px;
    }
    .affix-bottom {
        top: auto !important;
        position: fixed;
        bottom: 240px;
    }
    #imgContainer {
        height: 390px;
        width: 600px;
    }
</style>

<div id="survey" class="modal fade" data-backdrop="static">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Hey there! Do you want to help us?</h4>
      </div>
      <div class="modal-body">
          Thanks for contributing one task for the project. We are interested in knowing how you found out about us. <strong>Could you please answer two questions in a short survey?</strong>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Skip</button>
        <a class="btn btn-large btn-success" href="https://docs.google.com/forms/d/1Foe1CCfd4K_ZmtX2W8MDsoSjjDi5zd5DLgG7yRVn2HQ/viewform?embedded=true">Of course! Take me to the survey!</a>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!-- Is this necessary? Goes with the Modernizr code for IE8
<div style="display:none;margin-top:15px; height:500px;" id="oldbrowser" class="row">
    <div  class="col-md-8 col-md-offset-1 alert alert-info">
        <strong>Sorry, but your browser does not support the current application. If you want to contribute, please, upgrade to a modern web browser like the open source and free alternative <a href="http://www.mozilla.org/en-US/firefox/new/">Firefox</a> or <a href="https://www.google.com/intl/en/chrome/browser/">Chrome</a></strong>.
    </div>
</div --> 

    <!-- Success and Error Messages for the user --> 
    <div style="margin-top:15px;">
        <div id="success" class="alert alert-success" style="display:none;">
            <strong>Well done!</strong> You have successfully submitted your tags. Here is another photograph to try if you wish!
        </div>        
        <div id="loading" class="alert alert-info" style="display:none;">
            <img src="/static/img/loading.gif">Loading next task...
        </div>
        <div id="taskcompleted" class="alert alert-info" style="display:none;">
            <strong>The task has been completed!</strong> Thanks a lot!
        </div>
        <div id="finish" class="alert alert-success" style="display:none;">
            <strong>Congratulations!</strong> You have participated in all available tasks!
            <br/>
            <div class="alert-actions">
                <a class="btn-default btn" href="/">Go back</a>
                <a class="btn-default btn" href="/app">or, Check other applications</a>
            </div>
        </div>
        <div id="error" class="alert alert-error" style="display:none;">
            <a class="close">×</a>
            <strong>Error!</strong> Something went wrong, please contact the site administrators
        </div>
    </div> <!-- End Success and Error Messages for the user -->

<!--
    Task DOM for loading the Flickr Images
    It uses the class="skeleton" to identify the elements that belong to the
    task.
-->

<div class="row skeleton"> <!-- Start Skeleton Row -->    
   <div class="btn-group pull-right">
      <button class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal"><i class="glyphicon glyphicon-eye-open"></i> Tutorial</button>
      <a class="btn btn-info btn-sm" id="imgLink" target="_blank" data-toggle="tooltip" data-placement="top" title="Opens in a new window" href="http://community.micropasts.org/category/crowdsourcing-support"><i class="glyphicon glyphicon-book"></i> Community Help</a>
      <a class="btn btn-info btn-sm" id="newTask" href="../newtask"><i class="glyphicon glyphicon-picture"></i> Different photograph?</a>
      <!-- button id="btn-submit" class="btn btn-large btn-answer pull-right" value='NoTag'><i class="icon-repeat"></i> I don't recognise any features or people, try next one</button -->    
      <a id="flickr" rel="tooltip" target="_blank" data-toggle="tooltip" data-placement="top" title="Opens in a new window" href="" class="btn btn-sm btn-info"><i class="icon icon-flickr"></i> View on flickr</a>
      <a id="down" rel="tooltip" data-toggle="tooltip" data-placement="top" title="Only works for compliant browsers" download="" href="" class="btn btn-sm btn-info" ><i class="glyphicon glyphicon-download"></i> Download</a>
   </div>

   <h1 id="step1">Please tag this photograph</h1><!-- id="start" instead? -->
   <div class="btn-group">
      <button id="status" type="button" class="btn btn-default btn-type disabled" name="loading" value="loading">Loading photo</button>
    </div>
    <div class="btn-group">
       <button id="btn-save" class="btn btn-success btn-answer" value='save'><i class="icon icon-white icon-save"></i> Submit your photo tags</button>
    </div>

</div><!-- End of Skeleton Row -->

<!-- div class="row skeleton">
    <div id="img-details" class="col-md-4">
        <h4 id="title"></h4>
        <p id="description"></p>
        <p><i class="icon icon-time"></i> Date taken: <span id="date_taken"></span></p>
        <p><i class="icon icon-tag"></i> Tags: <span id="tags"></span></p>
    </div>
    <div class="span8">
        <span id="photo-link">
                <img id="photo" src="http://i.imgur.com/GeHxzb7.png" style="max-width=100%">
        </span>
    </div>
</div -->

<div class="row skeleton"> <!-- Start Skeleton Row-->
   <div class="col-md-8"><!-- Start of Photo DIV (column) -->
      <div id="map" class="img-polaroid"></div>
   </div><!-- End of Photo DIV (columnt) -->
   <div class="span4"><!-- Start of Question and Submission DIV (column) -->
      <!-- Feedback items for the user -->
      <p>You are working now on task: <span id="task-id" class="label label-warning">#</span></p>
      <p>You have completed: <span id="done" class="label label-info"></span> tasks from
      <!-- Progress bar for the user -->
      <span id="total" class="label label-inverse"></span></p>
      <div class="progress progress-striped">
         <div id="progress" rel="tooltip" title="#" class="bar" style="width: 0%;"></div>
      </div>
      <div id="answer"></div><!-- DIV for the submission buttons -->
    </div><!-- End of Question and Submission DIV (column) -->
</div><!-- End of Skeleton Row -->

<!-- Modal start -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
         <!-- Modal header --> 
         <div class="modal-header">
            <h3>Tagging Photos Tutorial</h3>
         </div>
         <div id="0" class="modal-body" style="display:none">
            <p>The application is really simple. It loads a photo from <a href="http://flickr.com">Flickr</a> and asks you this question: <strong>Tag all the elements that you recognise</strong></p>.
            <p>You then hover the mouse over tha elements that you identify, and draw a box clicking in the image, and you will be able to type the name of that element and save it.</p>
            <p>You can do it as many times as you want. Simple, right? Now let's try it!</p> 
         </div>
         <!-- Modify the tutorial; include a photograph with tagging examples
         <img src="https://farm4.staticflickr.com/3796/13464348955_a06ecab512.jpg" width="500" height="308" class="img-polaroid" alt="An example of an artefact photograph whose outline has been defined " / -->        
         <div id="1" class="modal-body" style="display:none">
            <p>More tutorial stuff...</p>    
            <p></p>         
            <p>To find out how the project is progressing, to suggest changes to this application or to propose new research ideas based what you have transcribed, please have a look at our <a href="http://community.micropasts.org" title="Community forum">community forum</a>.</p>
         </div>
      <!-- End of stepped modal body -->

      <!-- Modal footer -->
      <div class="modal-footer">
         <a id="prevBtn" href="#" onclick="showStep('prev')" class="btn btn-default">Previous</a>
         <a id="nextBtn" href="#" onclick="showStep('next')" class="btn btn-success">Next</a>
         <button id="startContrib" data-dismiss="modal" class="btn btn-primary" style="display:none"><i class="glyphicon glyphicon-thumbs-up"></i> Let's start!</a>
      </div>
    </div>
  </div>
</div>
<!-- Modal end --> 


<!-- Are these scripts necessary here?: -->
<script type="text/javascript" src="/static/js/vendor/annotorious.min.js"></script>
<script type="text/javascript" src="/static/vendor/jquery.js"></script>
<script type="text/javascript" src="http://annotorious.github.io/demos/semantic-tagging-plugin.js"></script>
<script>
      //anno.addPlugin('SemanticTagging', { endpoint_url: 'http://samos.mminf.univie.ac.at:8080/wikipediaminer' });
</script>

<script>

function loadUserProgress() {
    pybossa.userProgress('phototaggingHorsfield').done(function(data){
            console.log("Total answers done for user: " + data.done);
    if ((data.done == 1) && ($.cookie('survey') === undefined)){
           $("#survey").modal('show');
           $.cookie('survey', 'shown', { path: '/'});
        }
        var pct = Math.round((data.done*100)/data.total);
        $("#progress").css("width", pct.toString() +"%");
        $("#progress").attr("title", pct.toString() + "% completed!");
        $("#progress").tooltip({'placement': 'left'});
        $("#total").text(data.total);
        $("#done").text(data.done);
    });
}

// Customise this function as needed: 
pybossa.taskLoaded(function(task, deferred) {
    if ( ! $.isEmptyObject(task) ) {
        // load image from flickr
        var img = $('<img />');
        img.load(function() {
            // continue as soon as the image is loaded
            deferred.resolve(task);
        });
        // Flickr uses different suffixes for different picture sizes:
        // _s.jpg    small square 75x75
        // _q.jpg    large square 150x150
        // _t.jpg    thumbnail, 100 on longest side
        // _m.jpg    small, 240 on longest side
        // _n.jpg    small, 320 on longest side
        // .jpg      medium, 500 on longest side
        // _z.jpg    medium 640, 640 on longest side
        // _c.jpg    medium 800, 800 on longest side†
        // _b.jpg    large, 1024 on longest side*
        // _o.jpg    original image, either a jpg, gif or png, depending on source format
        img.attr('src', task.info.url_raw + "_z.jpg");
        img.attr('id', 'anno_' + task.id);
        img.addClass('img-polaroid');
        img.addClass('annotable');
        task.info.image = img;
    }
    else {
        deferred.resolve(task);
    }
});

// Customise this function as needed: 
pybossa.presentTask(function(task, deferred) {
    if ( !$.isEmptyObject(task) ) {
        $('#photo-link').html('').append(task.info.image);
        //$("#question").html(task.info.question);
        $('#task-id').html(task.id);

        $("#btn-submit").html("<i class='icon-repeat'></i> I don't recognize any person, try next one");
        $("#btn-submit").removeClass("btn-success");
        // Load data details
        $("#title").text(task.info.title);
        $("#description").html(task.info.description);
        $("#date_taken").html(task.info.date_taken);
        $("#tags").html(task.info.tags);

        anno.makeAnnotatable(document.getElementById('anno_' + task.id));

        anno.addHandler('onAnnotationCreated', function(annotation) {
            //console.log(annotation.text);
            $("#btn-submit").html("<i class='icon icon-save'></i> Save current annotations");
            $("#btn-submit").addClass("btn-success");
        });

        $('.btn-answer').off('click').on('click', function(evt) {
            var answer = $(evt.target).attr("value");
            if (typeof answer != 'undefined') {
                //console.log(answer);
                pybossa.saveTask(task.id, anno.getAnnotations()).done(function() {
                    deferred.resolve();
                });
                $("#loading").fadeIn(500);
                if ($("#disqus_thread").is(":visible")) {
                    $('#disqus_thread').toggle();
                    $('.btn-disqus').toggle();
                }
            }
            else {
                $("#error").show();
            }
        });
        $("#loading").hide();
    }
    else {
        $(".skeleton").hide();
        $("#loading").hide();
        $("#finish").fadeIn(500);
    }
});

// Potentially additional stuff here

pybossa.run('phototaggingHorsfield');
</script>
{'fraction_non_alphanumeric': 0.18146832445233865, 'fraction_numerical': 0.01041049930925597, 'mean_word_length': 2.640265804597701, 'pattern_counts': {'":': 2, '<': 362, '<?xml version=': 0, '>': 360, 'https://': 3, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 3, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '53592', 'n_tokens_mistral': 6319, 'n_tokens_neox': 6048, 'n_words': 1471}