<commit_before><link type="text/css" rel="stylesheet" href="http://annotorious.github.io/latest/themes/dark/annotorious-dark.css"/>
<link rel="stylesheet" href="/static/vendor/fancybox/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />

<!-- Fancy box script -->
<script src="/static/vendor/fancybox/jquery.fancybox.pack.js" type="text/javascript"></script>

<!-- jQuery cookie -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.min.js" type="text/javascript"></script>

<!-- Annotorious -->
<script src="http://annotorious.github.io/latest/annotorious.min.js" type="text/javascript"></script>
<script src="http://annotorious.github.io/latest/anno-fancybox.min.js" type="text/javascript"></script>

<!-- jquery ui -->
<script src="https://code.jquery.com/ui/1.8.1/jquery-ui.min.js" type="text/javascript"></script>

<!-- jquery form serializer -->
<script src="/static/js/vendor/jquery.serializeJSON.min.js" type="text/javascript"></script>

<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">Do you want to help us further?</h4>
      </div>
      <div class="modal-body">
          <p>
              Thank you for contributing one task for the project.
              We are interested in knowing how you found out about us.
          </p>
          <p>
              Could you please answer two questions in a short survey?
          </p>
      </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 -->


<div id="survey25" 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">Congratulations! You have completed 25 tasks!</h4>
      </div>
      <div class="modal-body">
          <p>
              Thank you for contributing 25 tasks for the project. Now that you
              have been using MicroPasts for a while, we would like to know how
              you found it.
          </p>
          <p>
              Could you please answer a few questions in a short survey?
          </p>
      </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/1WTVapZ2Qdq0AIRazG-onDrVYDtb9xAnid7LwLrR3Uqw/viewform?embedded=true">Of course! Take me to the survey!</a>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div style="display:none;margin-top:15px; height:500px;" id="oldbrowser" class="row">
    <!-- Success and Error Messages for the user -->
    <div  class="col-md-8 col-md-offset-1 alert alert-info">
        <h2>
            Browser problems!
        </h2>
        <p>
            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>.
        </p>
    </div>
</div>
<!-- End of Row -->

<div style="margin-top:15px;">
    <div id="success" class="alert alert-success" style="display:none;">
        <strong>Well done!</strong> You have successfully submitted your transcription. Here is another 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;">
        <h2>
            Congratulations!
        </h2>
        <p>
            You have participated in <strong>all</strong> available tasks! Thank you for your interest and help.
        </p>
        <br/>
        <img src="https://crowdfunded.micropasts.org/assets/logo-head.png" width="200" height="200"/>
        <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">X.</a>
        <strong>Error!</strong> Something went wrong, please contact the site
        administrators via the forum, Twitter, email or our Facebook page.
    </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.
-->

<!-- Start Skeleton Row-->
<div class="row skeleton">

    <!-- Start of Question and Submission DIV -->

    <!-- The button groups -->
    <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/crowd-sourcing-support"><i class="glyphicon glyphicon-book"></i> Community Help</a>
        <a id="raw" href="" class="btn btn-sm btn-info fancybox" ><i class="glyphicon glyphicon-picture"></i> Overlay</a>
        <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>

    <!-- Annotator section -->
    <div class="btn-group">
        <button id="status" type="button" class="btn btn-default btn-type disabled" name="loading" value="loading">Loading photo</button>
        <button id="reset" type="button" class="btn btn-default btn-type">Reset annotator</button>
        <button id="skip" type="button" class="btn btn-default btn-type">Skip to form</button>
    </div>
    <div class="row">
        <!-- Start of Photo DIV (column) -->
        <div class="col-md-6">
            <div id="imgContainer" >
             <span id="photo-link">
                <img id="photo" src="/static/img/loading.gif" class="loadingIcon">
             </span>
            </div>
        </div>
        <!-- End of Photo DIV (column) -->
        <div class="col-md-6">
            <form id="phototagging" role="form">

                <div class="form-group">
                    <label class="control-label" for="title">Title of image: </label>
                    <input type="text" name="title" id="title" class="form-control fields"
                           placeholder="The ID number looks like T.35.17 " rel="tooltip" data-toggle="tooltip" data-placement="bottom" title="Look for format T.xx.xx">
                </div>

                <div class="form-group">
                    <label class="control-label" for="objectNumber">Object number: </label>
                    <input type="text" name="title" id="objectNumber" class="form-control fields" placeholder="The object number is generally in the top right corner " >
                </div>

                <div class="form-group">
                    <label class="control-label" for="negativeNumber">Negative number: </label>
                    <input type="text" name="title" id="negativeNumber" class="form-control fields" placeholder="Negative number is in format 'Neg. = 0.13'" >
                </div>

                <div class="form-group">
                    <label class="control-label" for="provenance">Provenance: </label>
                    <input type="text" name="title" id="provenance" class="form-control fields" placeholder="The title is just above the drawing">
                </div>

                <div class="form-group">
                    <label class="control-label" for="distribution">Distribution: </label>
                    <input type="text" name="title" id="distribution" class="form-control fields" placeholder="The distribution is generally at the bottom left eg San Diego>
                </div>

                <div class="form-group">
                    <label class="control-label" for="otherNotes">Notes: </label>
                    <input type="text" name="title" id="otherNotes" class="form-control fields" placeholder="Enter any other notes on the card">
                </div>
                <hr />

                <div class="form-group">
                    <label class="control-label" for="comments">Your Comments</label>
                    <textarea class="form-control fields" rows="5" id="comments" name="comments" placeholder="Add any comments you may have about the photo or your experience with this task."></textarea>
                </div>

                <div class="btn-group">
                    <button class="btn btn-success btn-answer" value='Yes'><i class="icon icon-white icon-save"></i> Submit your answer</button>
                </div>

            </form>
        </div>
    </div>

    <div class="row">
        <!-- 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" class="progress-bar" role="progressbar" title="#" style="width:0%;"></div>
        </div>
    </div>

</div>


<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <h3 class="lead">Egypt Exploration Society Amarna Season 1930 - 1931</h3>
            </div>

            <div id="0" class="modal-body" style="display:none">
                <img src="http://www.ees.ac.uk/images/logo.gif" class="pull-right img-circle" />
                <p>
                    This application is a very simple application for the crowd-sourcing of data from archival cards that
                    have been generated from the Egypt Exploration Society's Amarna digging season 1930 - 1931. Each card contains
                    very structured data relating to each object recorded, and these data are what we would like you to
                    transcribe.
                </p>

            </div>

            <div id="1" class="modal-body" style="display:none">
                <p>
                    The annotated image card below shows you the structured data we'd like you to capture:
                </p>
                <img src="http://micropasts.org/wp-content/uploads/2015/03/ees.png" height="300px" />
                <p>Therefore the field list we would like is as follows:</p>
                <ol>
                    <li>Title</li>
                    <li>Object number</li>
                    <li>Negative number</li>
                    <li>Provenance</li>
                    <li>Distribution</li>
                    <li>Other notes</li>
                    <li>Annotations (if any).</li>
                </ol>
            </div>

            <div id="2" class="modal-body" style="display:none">
                <p>
                    Once you have transcribed the data, you may see other things that you might like to annotate on the
                    index card. The viewer has an inbuilt annotation library, which allows you to interact and provide
                    tags for areas of the image. Click on the annotate button and then draw a rectangle around the area you
                    would like to annotate. In the box that appears fill in your annotation as shown in the image below.
                    <img src="http://micropasts.org/wp-content/uploads/2015/03/eesAnnotate.png" height="300px" />
                </p>
            </div>

            <div id="3" class="modal-body" style="display:none">
                <p>
                    Finally, you may have comments on the index card, if you, please fill in the final box and then submit
                    your contribution. Thank you for taking part.
                </p>
            </div>

            <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>
                <a id="startContrib" href="../BAI-draw/newtask" class="btn btn-primary" style="display:none"><i class="glyphicon glyphicon-thumbs-up"></i> Let's start!</a>
            </div>
        </div>
    </div>
</div>

<!-- End of skeleton -->
<script type="text/javascript">
        $(document).ready(function() {
            $("#acti").tooltip({
                placement: $(this).data("placement") || 'top'
            });
            $( "#reset" ).on( "click", function() {
              	anno.removeAll();
  				console.log('Reset fired');
			});
        });
</script>

<script>
    var step = -1;
    function showStep(action) {
        $("#" + step).hide();
        if (action == 'next') {
            step = step + 1;
        }
        if (action == 'prev') {
            step = step - 1;
        }
        if (step == 0) {
            $("#prevBtn").hide();
        }
        else {
            $("#prevBtn").show();
        }

        if (step == 3 ) {
            $("#nextBtn").hide();
            $("#startContrib").show();
        }
        $("#" + step).show();
    }

    showStep('next');
    $("#modal").modal('show');
</script>

 <!-- Load user progress -->
 <script type="text/javascript">
    function loadUserProgress() {
        pybossa.userProgress('eesAmarna').done(function(data){
            console.log("Total answers done for user: " + data.done);
            if ((data.done == 1) && ($.cookie('eesAmarnaSurvey') == undefined)){
               $("#survey").modal('show');
               $.cookie('eesAmarnaSurvey', 'shown', { path: '/'});
            }
            if ((data.done >= 25) && ($.cookie('eesAmarnaSurvey25') == undefined)){
                $("#survey25").modal('show');
                $.cookie('eesAmarnaSurvey25', '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);
            $('a[rel]').tooltip({'placement': 'left'});
        });
    }
    pybossa.taskLoaded(function(task, deferred) {
        if ( ! $.isEmptyObject(task) ) {
            loadUserProgress();
            // load image from flickr
          var img = $('<img width="100%" style="height:auto;" />');
            img.load(function() {
                // continue as soon as the image is loaded
                deferred.resolve(task);
                $("#status").text("Photo loaded!");
            });

            img.attr('src', task.info.url_b);
            img.attr('id', 'anno_' + task.id);
            img.addClass('img-polaroid');
            img.addClass('annotable');
            task.info.image = img;
        }
        else {
            deferred.resolve(task);
        }
    });
      $(window).resize(function(){
        console.log('Window resized');
      });

    pybossa.presentTask(function(task, deferred) {
        if ( !$.isEmptyObject(task) ) {
            $('#photo-link').html('').append(task.info.image);
            $('#task-id').html(task.id);
            $("a#raw").attr("href", task.info.url_b);
            $("a#flickr").attr("href", task.info.link + '/sizes/k/');
            $("a#down").attr("download", task.id);
            $("a#down").attr("href", task.info.url_b );
            $(".fancybox").fancybox();
            $('#imgLink').tooltip();
            $("[rel=tooltip]").tooltip();
            $("#btn-submit").removeClass("btn-success");

            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);
                    task.answer = $("#phototagging").serializeJSON();

                    task.answer.title = $('#title').val();
                    task.answer.objectNumber = $('#objectNumber').val();
                    task.answer.negativeNumber = $('#negativeNumber').val();
                    task.answer.provenance = $('#provenance').val();
                    task.answer.distribution = $('#distribution').val();
                    task.answer.otherNotes = $('#otherNotes').val();
                    task.answer.comments = $('#comments').val();
                    task.answer.annotations = anno.getAnnotations();
                    console.log(task.answer);
                    pybossa.saveTask(task.id, task.answer).done(function() {
                        $("html, body").animate({ scrollTop: 0 }, "slow");
                        $("#success").fadeIn(500).fadeOut(500);
                        $("#loading").fadeIn(500).fadeOut(500);
                        deferred.resolve();
                    });

                    $('.fields').val('');
                    $("html, body").animate({ scrollTop: 0 }, "slow");
                } else {
                    $("#error").show();
                }
            });
            $("#loading").hide();
        } else {
            $(".skeleton").hide();
            $("#loading").hide();
            $("#finish").fadeIn(500);
        }
    });
    pybossa.run('eesAmarna');
    </script>

<!-- App specific styles -->
<style>
    .messageMargin {
        margin-top: 15px;
    }
    .loadingIcon {
        max-width:100%;
    }
    .none {
        display:none;
    }
    .ui-autocomplete {
        background-color: white;
        width: 300px;
        border: 1px solid #cfcfcf;
        list-style-type: none;
        padding: 10px;
    }
    .multiselect-container {
        max-height: 250px;
        overflow-y: auto;
        overflow-x: hidden;
    }
    #map {
        height:400px;
        width:100%;
        margin-top: 15px;
    }
    #keywords .btn-group {
        margin-top: 0px;
        margin-bottom: 0px;
    }
</style><commit_msg>Fix 2 small things<commit_after><link type="text/css" rel="stylesheet" href="http://annotorious.github.io/latest/themes/dark/annotorious-dark.css"/>
<link rel="stylesheet" href="/static/vendor/fancybox/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />

<!-- Fancy box script -->
<script src="/static/vendor/fancybox/jquery.fancybox.pack.js" type="text/javascript"></script>

<!-- jQuery cookie -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.min.js" type="text/javascript"></script>

<!-- Annotorious -->
<script src="http://annotorious.github.io/latest/annotorious.min.js" type="text/javascript"></script>
<script src="http://annotorious.github.io/latest/anno-fancybox.min.js" type="text/javascript"></script>

<!-- jquery ui -->
<script src="https://code.jquery.com/ui/1.8.1/jquery-ui.min.js" type="text/javascript"></script>

<!-- jquery form serializer -->
<script src="/static/js/vendor/jquery.serializeJSON.min.js" type="text/javascript"></script>

<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">Do you want to help us further?</h4>
      </div>
      <div class="modal-body">
          <p>
              Thank you for contributing one task for the project.
              We are interested in knowing how you found out about us.
          </p>
          <p>
              Could you please answer two questions in a short survey?
          </p>
      </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 -->


<div id="survey25" 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">Congratulations! You have completed 25 tasks!</h4>
      </div>
      <div class="modal-body">
          <p>
              Thank you for contributing 25 tasks for the project. Now that you
              have been using MicroPasts for a while, we would like to know how
              you found it.
          </p>
          <p>
              Could you please answer a few questions in a short survey?
          </p>
      </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/1WTVapZ2Qdq0AIRazG-onDrVYDtb9xAnid7LwLrR3Uqw/viewform?embedded=true">Of course! Take me to the survey!</a>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div style="display:none;margin-top:15px; height:500px;" id="oldbrowser" class="row">
    <!-- Success and Error Messages for the user -->
    <div  class="col-md-8 col-md-offset-1 alert alert-info">
        <h2>
            Browser problems!
        </h2>
        <p>
            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>.
        </p>
    </div>
</div>
<!-- End of Row -->

<div style="margin-top:15px;">
    <div id="success" class="alert alert-success" style="display:none;">
        <strong>Well done!</strong> You have successfully submitted your transcription. Here is another 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;">
        <h2>
            Congratulations!
        </h2>
        <p>
            You have participated in <strong>all</strong> available tasks! Thank you for your interest and help.
        </p>
        <br/>
        <img src="https://crowdfunded.micropasts.org/assets/logo-head.png" width="200" height="200"/>
        <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">X.</a>
        <strong>Error!</strong> Something went wrong, please contact the site
        administrators via the forum, Twitter, email or our Facebook page.
    </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.
-->

<!-- Start Skeleton Row-->
<div class="row skeleton">

    <!-- Start of Question and Submission DIV -->

    <!-- The button groups -->
    <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/crowd-sourcing-support"><i class="glyphicon glyphicon-book"></i> Community Help</a>
        <a id="raw" href="" class="btn btn-sm btn-info fancybox" ><i class="glyphicon glyphicon-picture"></i> Overlay</a>
        <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>

    <!-- Annotator section -->
    <div class="btn-group">
        <button id="status" type="button" class="btn btn-default btn-type disabled" name="loading" value="loading">Loading photo</button>
        <button id="reset" type="button" class="btn btn-default btn-type">Reset annotator</button>
        <button id="skip" type="button" class="btn btn-default btn-type">Skip to form</button>
    </div>
    <div class="row">
        <!-- Start of Photo DIV (column) -->
        <div class="col-md-6">
            <div id="imgContainer" >
             <span id="photo-link">
                <img id="photo" src="/static/img/loading.gif" class="loadingIcon">
             </span>
            </div>
        </div>
        <!-- End of Photo DIV (column) -->
        <div class="col-md-6">
            <form id="phototagging" role="form">

                <div class="form-group">
                    <label class="control-label" for="title">Title of image: </label>
                    <input type="text" name="title" id="title" class="form-control fields"
                           placeholder="The ID number looks like T.35.17 " rel="tooltip" data-toggle="tooltip" data-placement="bottom" title="Look for format T.xx.xx">
                </div>

                <div class="form-group">
                    <label class="control-label" for="objectNumber">Object number: </label>
                    <input type="text" name="title" id="objectNumber" class="form-control fields" placeholder="The object number is generally in the top right corner " >
                </div>

                <div class="form-group">
                    <label class="control-label" for="negativeNumber">Negative number: </label>
                    <input type="text" name="title" id="negativeNumber" class="form-control fields" placeholder="Negative number is in format 'Neg. = 0.13'" >
                </div>

                <div class="form-group">
                    <label class="control-label" for="provenance">Provenance: </label>
                    <input type="text" name="title" id="provenance" class="form-control fields" placeholder="The title is just above the drawing">
                </div>

                <div class="form-group">
                    <label class="control-label" for="distribution">Distribution: </label>
                    <input type="text" name="title" id="distribution" class="form-control fields" placeholder="The distribution is generally at the bottom left eg San Diego">
                </div>

                <div class="form-group">
                    <label class="control-label" for="otherNotes">Notes: </label>
                    <input type="text" name="title" id="otherNotes" class="form-control fields" placeholder="Enter any other notes on the card">
                </div>
                <hr />

                <div class="form-group">
                    <label class="control-label" for="comments">Your Comments</label>
                    <textarea class="form-control fields" rows="5" id="comments" name="comments" placeholder="Add any comments you may have about the photo or your experience with this task."></textarea>
                </div>

                <div class="btn-group">
                    <button class="btn btn-success btn-answer" value='Yes'><i class="icon icon-white icon-save"></i> Submit your answer</button>
                </div>

            </form>
        </div>
    </div>

    <div class="row">
        <!-- 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" class="progress-bar" role="progressbar" title="#" style="width:0%;"></div>
        </div>
    </div>

</div>


<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <h3 class="lead">Egypt Exploration Society Amarna Season 1930 - 1931</h3>
            </div>

            <div id="0" class="modal-body" style="display:none">
                <img src="http://www.ees.ac.uk/images/logo.gif" class="pull-right img-circle" />
                <p>
                    This application is a very simple application for the crowd-sourcing of data from archival cards that
                    have been generated from the Egypt Exploration Society's Amarna digging season 1930 - 1931. Each card contains
                    very structured data relating to each object recorded, and these data are what we would like you to
                    transcribe.
                </p>

            </div>

            <div id="1" class="modal-body" style="display:none">
                <p>
                    The annotated image card below shows you the structured data we'd like you to capture:
                </p>
                <img src="http://micropasts.org/wp-content/uploads/2015/03/ees.png" height="300px" />
                <p>Therefore the field list we would like is as follows:</p>
                <ol>
                    <li>Title</li>
                    <li>Object number</li>
                    <li>Negative number</li>
                    <li>Provenance</li>
                    <li>Distribution</li>
                    <li>Other notes</li>
                    <li>Annotations (if any).</li>
                </ol>
            </div>

            <div id="2" class="modal-body" style="display:none">
                <p>
                    Once you have transcribed the data, you may see other things that you might like to annotate on the
                    index card. The viewer has an inbuilt annotation library, which allows you to interact and provide
                    tags for areas of the image. Click on the annotate button and then draw a rectangle around the area you
                    would like to annotate. In the box that appears fill in your annotation as shown in the image below.
                </p>
                <img src="http://micropasts.org/wp-content/uploads/2015/03/eesAnnotate.png" height="300px" />
            </div>

            <div id="3" class="modal-body" style="display:none">
                <p>
                    Finally, you may have comments on the index card, if you, please fill in the final box and then submit
                    your contribution. Thank you for taking part.
                </p>
            </div>

            <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>
                <a id="startContrib" href="../BAI-draw/newtask" class="btn btn-primary" style="display:none"><i class="glyphicon glyphicon-thumbs-up"></i> Let's start!</a>
            </div>
        </div>
    </div>
</div>

<!-- End of skeleton -->
<script type="text/javascript">
        $(document).ready(function() {
            $("#acti").tooltip({
                placement: $(this).data("placement") || 'top'
            });
            $( "#reset" ).on( "click", function() {
              	anno.removeAll();
  				console.log('Reset fired');
			});
        });
</script>

<script>
    var step = -1;
    function showStep(action) {
        $("#" + step).hide();
        if (action == 'next') {
            step = step + 1;
        }
        if (action == 'prev') {
            step = step - 1;
        }
        if (step == 0) {
            $("#prevBtn").hide();
        }
        else {
            $("#prevBtn").show();
        }

        if (step == 3 ) {
            $("#nextBtn").hide();
            $("#startContrib").show();
        }
        $("#" + step).show();
    }

    showStep('next');
    $("#modal").modal('show');
</script>

 <!-- Load user progress -->
 <script type="text/javascript">
    function loadUserProgress() {
        pybossa.userProgress('eesAmarna').done(function(data){
            console.log("Total answers done for user: " + data.done);
            if ((data.done == 1) && ($.cookie('eesAmarnaSurvey') == undefined)){
               $("#survey").modal('show');
               $.cookie('eesAmarnaSurvey', 'shown', { path: '/'});
            }
            if ((data.done >= 25) && ($.cookie('eesAmarnaSurvey25') == undefined)){
                $("#survey25").modal('show');
                $.cookie('eesAmarnaSurvey25', '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);
            $('a[rel]').tooltip({'placement': 'left'});
        });
    }
    pybossa.taskLoaded(function(task, deferred) {
        if ( ! $.isEmptyObject(task) ) {
            loadUserProgress();
            // load image from flickr
          var img = $('<img width="100%" style="height:auto;" />');
            img.load(function() {
                // continue as soon as the image is loaded
                deferred.resolve(task);
                $("#status").text("Photo loaded!");
            });

            img.attr('src', task.info.url_b);
            img.attr('id', 'anno_' + task.id);
            img.addClass('img-polaroid');
            img.addClass('annotable');
            task.info.image = img;
        }
        else {
            deferred.resolve(task);
        }
    });
      $(window).resize(function(){
        console.log('Window resized');
      });

    pybossa.presentTask(function(task, deferred) {
        if ( !$.isEmptyObject(task) ) {
            $('#photo-link').html('').append(task.info.image);
            $('#task-id').html(task.id);
            $("a#raw").attr("href", task.info.url_b);
            $("a#flickr").attr("href", task.info.link + '/sizes/k/');
            $("a#down").attr("download", task.id);
            $("a#down").attr("href", task.info.url_b );
            $(".fancybox").fancybox();
            $('#imgLink').tooltip();
            $("[rel=tooltip]").tooltip();
            $("#btn-submit").removeClass("btn-success");

            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);
                    task.answer = $("#phototagging").serializeJSON();

                    task.answer.title = $('#title').val();
                    task.answer.objectNumber = $('#objectNumber').val();
                    task.answer.negativeNumber = $('#negativeNumber').val();
                    task.answer.provenance = $('#provenance').val();
                    task.answer.distribution = $('#distribution').val();
                    task.answer.otherNotes = $('#otherNotes').val();
                    task.answer.comments = $('#comments').val();
                    task.answer.annotations = anno.getAnnotations();
                    console.log(task.answer);
                    pybossa.saveTask(task.id, task.answer).done(function() {
                        $("html, body").animate({ scrollTop: 0 }, "slow");
                        $("#success").fadeIn(500).fadeOut(500);
                        $("#loading").fadeIn(500).fadeOut(500);
                        deferred.resolve();
                    });

                    $('.fields').val('');
                    $("html, body").animate({ scrollTop: 0 }, "slow");
                } else {
                    $("#error").show();
                }
            });
            $("#loading").hide();
        } else {
            $(".skeleton").hide();
            $("#loading").hide();
            $("#finish").fadeIn(500);
        }
    });
    pybossa.run('eesAmarna');
    </script>

<!-- App specific styles -->
<style>
    .messageMargin {
        margin-top: 15px;
    }
    .loadingIcon {
        max-width:100%;
    }
    .none {
        display:none;
    }
    .ui-autocomplete {
        background-color: white;
        width: 300px;
        border: 1px solid #cfcfcf;
        list-style-type: none;
        padding: 10px;
    }
    .multiselect-container {
        max-height: 250px;
        overflow-y: auto;
        overflow-x: hidden;
    }
    #map {
        height:400px;
        width:100%;
        margin-top: 15px;
    }
    #keywords .btn-group {
        margin-top: 0px;
        margin-bottom: 0px;
    }
</style>
{'fraction_non_alphanumeric': 0.16532580451728962, 'fraction_numerical': 0.008320007995202877, 'mean_word_length': 2.0558100473354712, 'pattern_counts': {'":': 0, '<': 617, '<?xml version=': 0, '>': 619, 'https://': 10, 'lorem ipsum': 0, 'www.': 6, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 10, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2702756', 'n_tokens_mistral': 11706, 'n_tokens_neox': 11062, 'n_words': 2732}