template.html

<script src="/static/js/vendor/jquery.wheelzoom.js" type="text/javascript"></script>
<script src="/static/js/vendor/jquery.serializeJSON.min.js" type="text/javascript"></script>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script src="http://maps.google.com/maps/api/js?v=3.6&amp;sensor=false"></script>
<!-- <script src="//cdn.jsdelivr.net/jquery.pickadate.js/3.1.4/picker.js"></script>
<script src="//cdn.jsdelivr.net/jquery.pickadate.js/3.1.4/picker.date.js"></script>
<script src="//cdn.jsdelivr.net/jquery.pickadate.js/3.1.4/picker.time.js"></script>
<script src="//cdn.jsdelivr.net/jquery.pickadate.js/3.1.4/legacy.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.pickadate.js/3.1.4/themes/classic.css" type="text/css"/>
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.pickadate.js/3.1.4/themes/classic.date.css" type="text/css"/>
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.pickadate.js/3.1.4/themes/classic.time.css" type="text/css"/>-->
<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 {
        position: fixed;
        bottom: 127px;
    }
</style>

<div style="display:none;margin-top:15px; height:500px;" id="oldbrowser" class="row">
    <!-- Success and Error Messages for the user -->
    <div  class="span8 offset1 alert alert-info">
        <strong>Ooops</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>.
    </div>
</div> <!-- End of Row -->

<!--
    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="span12">
        <h1 id="start">Please transcribe this index card</h1> <!-- The question will be loaded here -->
        <span class="label label-info">Note</span> You can use your mouse wheel trackpad to zoom in/out the picture, as well as drag & drop to navigate in the document.

        <a class="btn btn-primary btn-large pull-right" href="../tutorial"><i class="icon icon-book"></i> Help</a>
    </div>
</div>
<div class="row skeleton">
    <div id="questions" class="span4"><!-- Start of Question and Submission DIV (column) -->
            <!-- If the user clicks this button, the saved answer will be value="yes"-->
            <form id="transcription">

                <div class="control-group">
                    <label class="control-label" for="objectType">Object Type</label>
                    <div class="controls">
                        <input class="input-block-level" type="text" name="objectType" placeholder="Top of card">
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label" for="dateDiscoveryYear">Date of Discovery</label>
                    <div class="controls">
                        <select style="width:75px;" name="dateDiscoveryYear"></select>
                        <select style="width:75px;" name="dateDiscoveryMonth"></select>
                        <select style="width:62px;" name="dateDiscoveryDay"></select>
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label" for="rightCorner">Right Corner</label>
                    <div class="controls">
                        <input class="input-block-level"  type="text" name="rightCorner" placeholder="Right Corner">
                    </div>
                </div>
                <hr>
                <div class="control-group">
                    <label class="control-label" for="site">Site</label>
                        <textarea name="site" type="text" class="input-block-level" placeholder="Left of the card"></textarea>
                        <div class="input-append input-block-level">
                            <input type="text" id="toSearch" name="toSearch" style="width:196px;" placeholder="Geolocate the site in a map"></input>
                            <button id="searchBtn" class="btn btn-answer" value="search" type="button"><i class="icon-search"></i> Search</button>
                        </div>
                        <div style="display:none;margin-top:15px;" id="searching" class="alert alert-info"><img src="/static/img/loading.gif"> Searching...</div>
                    <div style="display:none;margin-top:15px;" id="searchingError" class="alert alert-warning"><strong>Location not found</strong>. If you know where it is approximately, please drag and drop the icon <img style="width:16px;" src="http://img225.imageshack.us/img225/5237/youarehere2.png"/> in the map.</div>
                    <div id="searchingTip" class="alert alert-info" style="display:none; margin-top:10px;">Drag & drop the <img style="width:16px;" src="http://img225.imageshack.us/img225/5237/youarehere2.png"/> to improve the location</div>
                    <div id="map" style="margin-top:15px;"></div>
                </div>
                <p style="font-size:16px">I believe the location I have given on the map is accurate to within:</p>
                <div class="control-group">
                    <label class="radio">
                    <input type="radio" name="optionsAccuracy" id="optionsAccuracy100" value="100" checked>
                    100 metres
                    </label>
                    <label class="radio">
                    <input type="radio" name="optionsAccuracy" id="optionsAccuracy1000" value="1000">
                    1 kilometre
                    </label>
                    <label class="radio">
                    <input type="radio" name="optionsAccuracy" id="optionsAccuracy10000" value="10000">
                    10 kilometres
                    </label>
                </div>

                <div class="control-group">
                    <label class="control-label" for="gridRef">Grid Reference</label>
                    <div class="controls">
                        <textarea name="gridRef" class="input-block-level" placeholder="Top left of card"></textarea>
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label" for="collection">Collection</label>
                    <div class="controls">
                        <textarea name="collection" class="input-block-level" placeholder="Right of card"></textarea>
                    </div>
                </div>
                <hr>
                <div class="control-group">
                    <label class="control-label" for="publications">Publications</label>
                    <div class="controls">
                        <input class="input-block-level"  type="text" name="publications" placeholder="Centre of card">
                    </div>
                </div>

                <hr>
                <div class="control-group">
                    <label class="control-label" for="length">Length</label>
                    <div class="controls">
                        <input class="input-block-level"  type="number" min="0" name="length" placeholder="In millimetres">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="width">Width</label>
                    <div class="controls">
                        <input class="input-block-level"  type="number" min="0" name="width" placeholder="In milimeters">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="edge">Edge</label>
                    <div class="controls">
                        <input class="input-block-level"  type="number" min="0" name="edge" placeholder="In millimeters">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="thickness">Thickness</label>
                    <div class="controls">
                        <input class="input-block-level"  type="number" min="0" name="thickness" placeholder="In millimetres">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="weight">Weight</label>
                    <div class="controls">
                        <input class="input-block-level"  type="number" min="0" name="weight" placeholder="In grammes">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="composition">Composition</label>
                    <div class="controls">
                        <input class="input-block-level"  type="text" name="composition" placeholder="Below measurements">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="description">Description</label>
                    <div class="controls">
                        <textarea type="text" name="description" class="input-block-level" placeholder="Below measurements"></textarea>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="surface">Surface</label>
                    <div class="controls">
                        <input class="input-block-level"  type="text" name="surface" placeholder="Left of card">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="patina">Patina</label>
                    <div class="controls">
                        <input class="input-block-level"  type="text" name="patina" placeholder="Towards bottom left of card">
                    </div>
                </div>
                <hr>
                <div class="control-group">
                    <label class="control-label" for="associations">Associations</label>
                    <div class="controls">
                        <input class="input-block-level"  type="text" name="associations" placeholder="Bottom centre of card">
                    </div>
                </div>
                <hr>
                <div class="control-group">
                    <label class="control-label" for="remarks">Remarks</label>
                    <div class="controls">
                        <input class="input-block-level"  type="text" name="remarks" placeholder="Bottom centre of card">
                    </div>
                </div>
                <hr>
                <div class="control-group">
                    <label class="control-label" for="other">Transcriber's Comments</label>
                    <div class="controls">
                        <textarea class="input-block-level"  type="text" name="other" placeholder="Add here your comments, if any."></textarea>
                    </div>
                </div>

            </form>
            <button class="btn btn-large btn-info btn-answer" value='Yes'>Submit the transcription</button>
    </div><!-- End of Question and Submission DIV (column) -->
    <div id="photo-link" class="span8"><!-- Start of Photo DIV (column) -->
        <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;">
                <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 id="imgContainer" data-spy="affix" data-offset-top="1" data-offset-bottom="750">
            <img src="http://i.imgur.com/GeHxzb7.png" style="max-width=100%">
        </div>
    </div><!-- End of Photo DIV (columnt) -->

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

<script type="text/javascript">
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */

    /* * * DON'T EDIT BELOW THIS LINE * * */
    function loadDisqus() {
    $("#disqus_thread").toggle();
    $(".btn-disqus").toggle();
    var disqus_shortname = 'pybossa'; // required: replace example with your forum shortname
    //var disqus_identifier = taskId;
    var disqus_developer = 1;

    (function() {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
    }

</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

<script>
// Quick fix for IE8
Modernizr.load({
  test: window.JSON,
  nope: '/static/js/vendor/json2.min.js'
});

function loadUserProgress() {
    pybossa.userProgress('bronzeageindex').done(function(data){
        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);
    });
}


// If user presses enter do the search
// $("#locationRef").bind('keypress', function(e){
//     var code = (e.keyCode ? e.keyCode : e.which);
//     if(code == 13) { //Enter keycode
//         search();
//     }
// });

// This function will load the marker of the city, and center the map on it
function search(task, city, zoom) {
    zoom = (typeof zoom === "undefined") ? 4 : zoom;
    city = city.replace(/\n/g,' ');
    console.log(city);
    if (city) {
        var place = city;
        $("#searchingError").hide();
    }
    else {
        $("#searching").show();
        $("#searchingError").hide();
        if ($('#toSearch').val()) {
            var place = $("#toSearch").val();
        }
        else {
            $("#searching").hide();
            alert("Please, add a location in the Site section to search in the map");
            return
        }
    }

    // Geocode the place using Nominatim OSM service
    $.getJSON('http://nominatim.openstreetmap.org/search/' + place + '?format=json', function(output) {
        if (output.length >= 1) {
            //console.log("Lon: "+ output[0].lon + " Lat: " + output[0].lat);
            // Clean previous markers
            $("#navigate").addClass("active");
            $("#point").removeClass("disabled");
            $("#point").removeClass("active");
            task.objectLayer.removeAllFeatures();
            task.cityLayer.removeAllFeatures();
            //$("#answerbtn").addClass("disabled");
            //$("#answerbtn").unbind('click',submitTask);
            //console.log("Map cleaned!");
            // Create a LonLat object to load the place marker
            var lonLat = new OpenLayers.LonLat(output[0].lon, output[0].lat)
                .transform(
                    new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
                    task.map.getProjectionObject() // to Spherical Mercator Projection
                );
            // Set the marker position
            point = new OpenLayers.Geometry.Point(lonLat.lon, lonLat.lat);
            task.longitude = lonLat.lon;
            task.latitude = lonLat.lat;
            task.objectLayer.addFeatures([new OpenLayers.Feature.Vector(point)]);
            // Center the map
            task.map.setCenter(lonLat, zoom);
            //lonLat.transform(
            //        map.getProjectionObject(), // from Spherical Mercator Projection
            //        new OpenLayers.Projection("EPSG:4326") // to transform from WGS 1984
            //);
            // Reset the lon & lat span objects
            $("#lon").text("-");
            $("#lat").text("-");

            if (zoom !=4 ) {
                $("#searchingTip").show();
            }

            // Only show the messages when looking for user input
            if ($('#toSearch').val()) {
                $("#searching").hide().fadeOut();
                $("#searchingDone").show().fadeIn().delay(2000).fadeOut();
            }
        }
        else {
            // Location not found, sorry
            // Warn the user and try with another place
            $("#searching").hide().fadeOut();
            $("#searchingError").show();
        }
    });
}



pybossa.taskLoaded(function(task, deferred) {
    if ( !$.isEmptyObject(task) ) {
        // load image from flickr
        var img = $('<img />');
        img.attr("id", "img_task_" + task.id);
        img.load(function() {
            // continue as soon as the image is loaded
            deferred.resolve(task);
        });
        img.attr('src', task.info.url_b);
        img.attr('width', '620px');
        img.attr('height', '413px');
        //img.addClass('img-polaroid');
        img.css("cursor", "zoom-in");
        task.info.image = img;

        // MAP
        var div_map = $("<div/>", {'id': "map_" + task.id, 'class': 'map_canvas'});
        div_map.css("width", "300px");
        div_map.css("height", "300px");
        div_map.css("display", "none");

        // We need to append the div element asap otherwise OpenLayers will fail
        $("#map").append(div_map);

        var map = new OpenLayers.Map('map_' + task.id, {
            controls: [
                new OpenLayers.Control.Navigation(),
                new OpenLayers.Control.PanZoom(),
                new OpenLayers.Control.LayerSwitcher(),
                new OpenLayers.Control.MousePosition({displayProjection: new OpenLayers.Projection("EPSG:4326")}),
                new OpenLayers.Control.ScaleLine(),
                new OpenLayers.Control.Attribution()
                ]
        });

        // Layers
        // Open Street Map (default layer)
        map.addLayer(new OpenLayers.Layer.OSM("Open Street Map"));

        // Google Maps Satellite layer
        map.addLayer(new OpenLayers.Layer.Google(
            "Google Satellite",
            {type: google.maps.MapTypeId.SATELLITE}
        ));

        // Google Maps Physical layer
        map.addLayer(new OpenLayers.Layer.Google(
            "Google Physical",
            {type: google.maps.MapTypeId.TERRAIN}
        ));

        // Icon for the City Marker
        var styleMapCity = new OpenLayers.StyleMap({
            pointRadius: 15,
            externalGraphic: 'http://img225.imageshack.us/img225/5237/youarehere2.png'
        });

        // Icon for the Urban Park Marker
        var styleMapObject = new OpenLayers.StyleMap({
            pointRadius: 15,
            externalGraphic: 'http://img225.imageshack.us/img225/5237/youarehere2.png'
        });

        // Layer for placing the city marker
        var cityLayer = new OpenLayers.Layer.Vector("City marker", {
            styleMap: styleMapCity,
            attribution: 'Marker Icons by <a href="http://mapicons.nicolasmollet.com/">Nicolas Mollet</a>'
        });
        map.addLayer(cityLayer);
        task.cityLayer = cityLayer;

        // Layer for placing the urban park marker
        var objectLayer = new OpenLayers.Layer.Vector("Urban park marker", {
            styleMap: styleMapObject,
            attribution: 'Marker Icons by <a href="http://mapicons.nicolasmollet.com/">Nicolas Mollet</a>'
        });
        map.addLayer(objectLayer);
        task.objectLayer = objectLayer;

        // Function to allow only the addition of one urban park per city
        // The function gets the feature (point) and gets its location, transforms it to the right projection
        // loads the lon and at into the HTML skeleton and disables the toolbar, so no more points can be added
        disablePoint = function(feature) {
            if ($("#answerbtn").hasClass("disabled")) {
                $("#answerbtn").removeClass('disabled');
            }

            $("#lat").text(feature.geometry.y);
            var tmp = feature.geometry.clone();
            tmp.transform(
                    task.map.getProjectionObject(), // from Spherical Mercator Projection
                    new OpenLayers.Projection("EPSG:4326") // to transform from WGS 1984
            );
            $("#lon").text(tmp.x);
            $("#lat").text(tmp.y);
            task.lon = tmp.x;
            task.lat = tmp.y;
            task.drawControls['point'].deactivate();
        }

        // Default location to load the map
        var lonLat = new OpenLayers.LonLat(-0.1279688 ,51.5077286 )
            .transform(
                new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
                new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator Projection
            );

        // Enable drag & drop in the urban park Layer
        var drag = new OpenLayers.Control.DragFeature(objectLayer, {
            onComplete: function() {
                var urbanParkPoint = task.objectLayer.features[0].geometry
                var tmp = urbanParkPoint.clone();
                tmp.transform(
                        task.map.getProjectionObject(), // from Spherical Mercator Projection
                        new OpenLayers.Projection("EPSG:4326") // to transform from WGS 1984
                );
                // When the marker has been dropped, update the lon & lat of the urban park
            }

        });
        // Add the drag & drop control into the map
        map.addControl(drag);
        // Activate drag & drop
        drag.activate();

        var drawControls = {
            point:      new OpenLayers.Control.DrawFeature(objectLayer, OpenLayers.Handler.Point,
                        { 'featureAdded': disablePoint})
        }

        // Add them to the map
        for (var key in drawControls) {
            map.addControl(drawControls[key]);
        }
        task.drawControls = drawControls;

        task.map = map;
        task.lon = 0;
        task.lat = 0;

        search(task, "united kingdom");
        } // End if task empty
    else {
        deferred.resolve(task);
        }

});

pybossa.presentTask(function(task, deferred) {
    if ( !$.isEmptyObject(task) ) {
        loadUserProgress();
        $(':input','#transcription')
           .not(':button, :submit, :reset, :hidden, :radio')
           .val('')
           .removeAttr('checked')
           .removeAttr('selected');
        $('#imgContainer').html('').append(task.info.image);
        //$("#photo-link").attr("href", task.info.link);
        $("#searchingTip").hide();
        $("#question").html(task.info.question);
        $('#task-id').html(task.id);
        $('#img_task_' + task.id).wheelzoom();
        $('#img_task_' + task.id).trigger('wheelzoom.reset');
        $("#map_" + task.id).show();

        // Clean
        $('select[name=dateDiscoveryYear]').html('').append($('<option/>').val('None').html('Year'));
        for (i = 1800; i < 2000; i++)
        {
            $('select[name=dateDiscoveryYear]').append($('<option />').val(i).html(i));
        }

        $('select[name=dateDiscoveryMonth]').html('').append($('<option/>').val('None').html('Month'));
        for (i = 1; i <= 12; i++)
        {
            $('select[name=dateDiscoveryMonth]').append($('<option />').val(i).html(i));
        }

        $('select[name=dateDiscoveryDay]').html('').append($('<option/>').val('None').html('Day'));
        for (i = 1; i <= 31; i++)
        {
            $('select[name=dateDiscoveryDay]').append($('<option />').val(i).html(i));
        }

        //var $input = $(".pickadate").pickadate({
        //                 format: 'yyyy-mm-dd',
        //                 selectYears: true,
        //                 selectMonths: true,
        //                 //min: new Date(1800,1,1),
        //                 //max: new Date(2000,1,1),
        //                 selectYears: 200,
        //                 //formatSubmit: 'yyyy/mm/dd',
        //                 });
        // Use the picker object directly.
        //var picker = $input.pickadate('picker')
        //picker.set('select', [1900,1,1]);
        //picker.clear();


        $('.btn-answer').off('click').on('click', function(evt) {
            evt.preventDefault();
            var answer = $(evt.target).attr("value");
            if (typeof answer != 'undefined') {
                console.log(answer);
                if (answer == 'search') {
                    $("#searching").show();
                    search(task, $("#toSearch").val(), 15);
                }
                else {
                    task.answer = $("#transcription").serializeJSON();
                    console.log(task.answer);
                    // Remove unwanted names
                    for (var key in task.answer) {
                        if ((key == 'City marker') || (key == 'Urban park marker') || (key.indexOf('OpenLayers_') == 0)) {
                            delete task.answer[key];
                        }
                    }
                    task.answer.optionsAccuracy = $('input[name=optionsAccuracy]:checked', '#transcription').val();
                    console.log(task.answer.optionsAccuracy);
                    // Convert the feature location into the GeoJSON format
                    var geojson = new OpenLayers.Format.GeoJSON({
                        'internalProjection': task.map.baseLayer.projection,
                        'externalProjection': new OpenLayers.Projection("EPSG:4326")
                        });

                    task.answer.geojson = JSON.parse(geojson.write(task.objectLayer.features[0]));

                    task.answer.toSearch = task.answer.toSearch.replace(/\n/g,', ').toLowerCase();
                    task.answer.site = task.answer.site.replace(/\r\n/g,', ').toLowerCase();
                    console.log(task.answer);
                    pybossa.saveTask(task.id, task.answer).done(function() {
                        $("#map_" + task.id).hide();
                        $('#img_task_' + task.id).trigger('wheelzoom.reset');
                        $("html, body").animate({ scrollTop: 0 }, "slow");
                        $("#success").fadeIn(500).fadeOut(5500);
                        $("#loading").fadeIn(500).fadeOut(1000);
                        deferred.resolve();
                    });
                    $("#loading").fadeIn(500);
                    if ($("#disqus_thread").is(":visible")) {
                        $('#disqus_thread').toggle();
                        $('.btn-disqus').toggle();
                    }
                }
            }
            else {
                console.log(answer);
                console.log(typeof(answer));
                $("#error").show();
            }
        });
        $("#loading").hide();
    }
    else {
        $(".skeleton").hide();
        $("#loading").hide();
        $("#finish").fadeIn(500);
    }
});

if(Modernizr.borderradius) {
    pybossa.run('bronzeageindex');
}
else {
    $(".skeleton").hide();
    $("#oldbrowser").show();
}
</script>