template.html

<! -- Fix for Bootstrap css with Google Maps https://github.com/twitter/bootstrap/issues/1552 -->
<style type="text/css">
    .map_canvas label {
        width: auto;
        display: inline;
    }
    .map_canvas img {
        max-width: none;
    }

    .map_cnt {
        position: relative;
        border: 1px solid rgb(0, 0, 0.1);
        box-shadow: 0 0 5px #888;
    }

    .map_btn {
        text-align: center;
        position: absolute;
        overflow: hidden;
        top: 0;
        left: 0;
        opacity: 0;
        background-color: rgba(51,51,51, 0.7); 
        z-index: 999;
        transition: all 0.4s ease-in-out;
    }

    .map_btn h3 {
        text-transform: uppercase;
        color: #fff;
        text-align: center;
        position: relative;
        font-size: 17px;
        padding: 10px;
        background: rgba(0, 0, 0, 0.6);
        margin: 20px 0 0 0
    }

    .map_btn p {
        color: #fff;
        text-align: center;
        position: relative;
        font-size: 14px;
        padding-top: 10px;
    }


    .map_btn button{
        margin-top: 10%;
    }

    .map_btn:hover {
        opacity: 1;
    }


    .layersDiv label {
        color: white;
    }
    .olControlOverviewMapElement {
        background-color: white;
    }
</style>

<div class="row">
  <!-- Success and Error Messages for the user --> 
  <!-- Question, task id, photo and action buttons for answering the question-->
  <div class="span12" 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</strong>
    </div>
    <div id="taskcompleted" class="alert alert-info" style="display:none;">
      <strong>The task has been completed!</strong> Thanks a lot!</strong>
    </div>
    <div id="finish" class="alert alert-success" style="display:none;">
      <strong>Congratulations!</strong> You have participated in all available tasks!</strong>
      <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</strong>
    </div>
    <div id="warning" class="alert alert-warning" style="display:none;">
      <a class="close">×</a>
      <strong>Oooops!</strong> Tile not found, trying with a new one!</strong>
    </div>
  </div>
</div>

<!-- Header of the task -->
<div class="row">
  <div class="skeleton span8">
    <div id="question">
      <h1>Question</h1>
      <!--<h3 id="area">Area</h3>-->
    </div>
  </div>
  <div class="skeleton span2">
      <!-- Change margin-top to align button with H1-->
      <div style="margin-top:10px">
        <a href="../tutorial" class="btn btn-primary btn-large"> Tutorial</a>
      </div>
  </div>
</div>

<div class="row skeleton">
    <div class="span12">
        <p>You have completed: <span id="done" class="label label-info"></span> tasks from
        <span id="total" class="label label-inverse"></span> You are now working in Task: <span id="task-id" class="label label-warning">#</span></p>
        <div class="progress progress-striped">
            <div id="progress" rel="tooltip" title="#" class="bar" style="width: 0%;"></div>
        </div>
    </div>
</div>

<!-- Map Canvas -->
<div id="maps" class="row">

</div>
<div style="text-align:center; padding-top:20px;"> 
      <a href="../tutorial" class="btn btn-primary btn-large"> Tutorial</a>
</div>

<script src="/static/openlayers/OpenLayers.js"></script>
<script src="http://mustache.github.com/extras/mustache.js"></script>
<script src="/static/js/pybossa/pybossa.js" type="text/javascript"></script>
<!-- PyBossa interface -->
<script>
// Map Server URL
var mapfile = "map=/home/forestwatchers/map/timeline2.map";
var server = "http://forestwatchers.net/cgi-bin/mapserv" + "?" + mapfile;

var totalArea = 0;
// Map options
var options = {
    allowOverlays: true,
    numZoomLevels: 3
}
// Map Array for loading the images
var map = [];

var boxes  = new OpenLayers.Layer.Boxes( "Limits of the tile" );

// This function creates the map, the layers, and sets up the map
function initializeMaps(tiles) {
    var i=0;
    var n = tiles.length;
    for (i=0;i<n;i++){
        map_div_id = tiles[i].replace('.tif', '');
        map[i] = new OpenLayers.Map(map_div_id, {
            controls: [
            //    new OpenLayers.Control.Navigation(),
            //    new OpenLayers.Control.PanZoomBar(),
            //    new OpenLayers.Control.MousePosition(),
            //    new OpenLayers.Control.ScaleLine(),
            //    new OpenLayers.Control.Attribution()
                ],
            minScale: 240000,
            numZoomLevels: 3,
            unit: 'degrees'
        });

        // Layers
        // Satellite Imagery Map (default layer)
        map[i].addLayer(new OpenLayers.Layer.WMS("Satellite", server, 
        {
            // Name of the layer without  the .tif extension
            layers: tiles[i].replace('.tif', ''),
            isBaseLayer: true
        }
        ));

        // Add a layer to load a box that represents the limits for the restrictedExtent
        //map[i].addLayer(boxes);

        // Add the overviewmap
        //map.addControl(new OpenLayers.Control.OverviewMap(overviewmapOptions));
    }
}

// Initialize the map
//initialize();

// This function will center the map for a given tile
function center(bounds, restrictedExtent, nMaps) {
    // bounds = [left, bottom, right, top]
    // restrictedExtent = [left, bottom, right, top]
    // Convert the bounds and restrictedExtent to valid OpenLayers objects
    var b = new OpenLayers.Bounds.fromArray(bounds);
    var r = new OpenLayers.Bounds.fromArray(restrictedExtent);
    var a = r.toGeometry();
    totalArea = (a.getGeodesicArea()/1000);
    // Add a box to mark in red the limited restrictedExtent
    var box = new OpenLayers.Marker.Box(r);
    boxes.addMarker(box);
    // Set limits for the map: the user should only see a small fraction of the tile
    var i=0;
    for(i=0;i<nMaps;i++){
        map[i].setOptions({
            maxExtent: r,
            restrictedExtent: r
        })
        map[i].zoomToExtent(r);
    }
}


// TODO: add the validation
// See: http://stackoverflow.com/questions/4048688/how-can-i-convert-day-of-year-to-date-in-javascript
function dateFromDay( dateString ){
    var year = dateString.substring(0,4);
    //console.log(year);
    var day = dateString.substring(4);
    var date = new Date(year, 0); // initialize a date in `year-01-01`
    return new Date(date.setDate(day)); // add the number of days
}

// Load the task data into the HTML skeleton
function loadTask ( task_id ) {
    var t = $.ajax({
        //url: '/api/task/'+task_id,
        url: '/pybossa/api/task/'+task_id,
        dataType: 'json'
    });

    t.done( function (task) {
        if ( !$.isEmptyObject(task) ) {
            if (task.state=='completed') {
                $('#controls').hide();
                $('#answer').hide();
                $('#disqus_thread').hide();
                $('#taskcompleted').show();
            }

            // Add divs for the maps
            var tiles = task.info.tile.tiles;
            var l = tiles.length;
            var i = 0;
            var t = Math.floor(12/l);
            var width = t * 60;
            if (t < 4) {
                t = 4;
                var offset = Math.floor(l%3); // 3 tiles of Span4
                width = 60 * t; // Span4
            }
            // Mustache template for creating the maps
            var tpl = '<div id="elem" class="skeleton {{class}}" style="padding-bottom:10px;">'+ 
                      '<div class="map_cnt">' + 
                      '<div id="{{tile}}" class="map_canvas" style="height: {{height}}px;"></div>' +
                      '<div class="map_btn" style="width: 100%; height: {{height}}px;">' + 
                      '<h3>Tile: {{tile}}</h3>' + 
                      '<p>This photo was taken: {{date}}</p>' + 
                      '<button class="btn btn-large btn-primary" onclick="submitTask(\'{{tile}}\')"><i class="icon-ok"></i> Submit this tile!</button>' +
                      '</div>' + 
                      '</div>'+ 
                      '</div>';
            for (i=0;i<l;i++) {
                // Obj to pass to the template
                var tmpDate = dateFromDay(tiles[i].replace('.tif','')).toDateString();
                var obj = {'tile': tiles[i].replace('.tif', ''), 
                           'date': tmpDate,
                           'class': 'span' + t,
                           'width': width,
                           'height': width,
                };
                //console.log( i  + ", " + ( l - offset ));
                if (i == (l - offset)) {
                    if (offset == 1) {
                        obj['class'] = 'span' + t + ' offset4';
                    }
                    else {
                        obj['class'] = 'span' + t + ' offset' + offset;
                    }
                }
                $("#maps").append(Mustache.to_html(tpl,obj));
            }

            $("#question h1").text(task.info.question);
            loadUserProgress();
            //$("#question h3").text(task.info.tile.name);
            $("#task-id").text(task.id);

            initializeMaps(tiles);

            // Center the map for this task
            center(task.info.tile.bounds, task.info.tile.restrictedExtent, l);
        }
        else {
            $(".skeleton").hide();
            $("#finish").fadeIn();
        }
    });
}

var taskId = pybossa.getCurrentTaskId(window.location.pathname);

if (taskId){
    loadTask(taskId);
}
else {
    pybossa.newTask("besttile", "http://forestwatchers.net/pybossa").done( function( data ) { 
    //pybossa.newTask("besttile").done( function( data ) { 

        if ( !$.isEmptyObject(data.task) ) {
            window.location.pathname = "/pybossa/app/besttile/task/" + data.task.id;
            //window.location.pathname = "/app/besttile/task/" + data.task.id;
        }
       else {
            $(".skeleton").hide();
            $("#finish").fadeIn();
        }
    });
}


function loadUserProgress() {
    pybossa.userProgress('besttile', 'http://forestwatchers.net/pybossa').done(function(data){
    //pybossa.userProgress('besttile').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': 'top'}); 
        $("#total").text(data.total);
        $("#done").text(data.done);
    });
}

// Saves the answer for the given task
function submitTask(answer) {
    task_id = $("#task-id").text();
    console.log(answer);

    pybossa.saveTask( task_id, {'besttile': answer}, "http://forestwatchers.net/pybossa").done( function(data) {
    //pybossa.saveTask( task_id, {'besttile': answer}).done( function(data) {
        // Show the feedback div
        $("#success").fadeIn(); 
        // Fade out the pop-up after a 1000 miliseconds
        setTimeout(function() { $("#success").fadeOut() }, 1000);
        // Request a new task
        window.location.pathname = '/pybossa/app/besttile/newtask';
        //window.location.pathname = '/app/besttile/newtask';
    });

}
</script>