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;
    }
    .maps {
        width: 95%;
        height: 400px;
        border: 1px solid black;
    }
    .center {
        margin-left:auto;
        margin-right:auto;
        width:70%;
    }
    #loading{
        position:absolute;
        z-index: 10000;
        width: 100%;
        height: 100%;
        margin-top: 0px;
        margin-left: 0px;
        background-color: rgba(255,255,255,1);
    }

    #facts {
        position: relative;
        margin-top:200px;
    }
</style>

<div id="loading" style="display:none">
      <div class="row">
          <div class="span12">
              <div id="facts" class="alert alert-info">
                  Loading task...
              </div>
              <div class="progress progress-striped">
                 <div id="bar" class="bar" style="width: 0%;"></div>
              </div>
          </div>
      </div>
</div>

<div class="row">
  <!-- Success and Error Messages for the user --> 
  <!-- Question, task id, image 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> Image 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>
    </div>
  </div>
  <div class="skeleton span2">
      <!-- Change margin-top to align button with H1-->
      <div style="margin-top:5px">
        <a href="../tutorial" class="btn btn-info 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>
<br/>
<div align="center">
    <div align="center">
        <div class="row">
            <div class="span6">
                <button class="btn btn-large btn-success h3" value="forest" id="btnForest">Forest</button>
            </div>
            <div class="span6">
                <button class="btn btn-large btn-danger" value="non-forest" id="btnNonForest">Non-forest</button>
            </div>
        </div>
        <br />
        <!--div class="row">
            <div class="span12">
                <button class="btn btn-large " value="reset" onclick="reset();">Reset</button>
            </div>
        </div>
        <br /-->
        <div class="row">
            <div id="areaBtnSubmit" class="span12" style="display:none;">
                <button class="btn btn-large btn-submit btn-primary" value="submit" id="btnSubmit">Submit</button>
            </div>
        </div>
    </div>
</div>
<br/>
<div class="row">
    <hr>
    <div id="disqus_thread" class="span12"></div>
</div>
<script type="text/javascript">
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = 'forestwatcherscheckclassificationro2011'; // required: replace example with your forum shortname
    //var disqus_developer = 1;

    /* * * DON'T EDIT BELOW THIS LINE * * */
    (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>

<!-- PyBossa interface -->
<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>
<script>
    var map1, map2, map3, layerBestTile1, layerBestTile2, layerBestTile3, vector1, vector2, vector3;
    var circleFeature1, circleFeature2, circleFeature3, vectorLayer1, vectorLayer2, vectorLayer3, center1, center2, center3, point
    var projection, lon, lat, pointInterestG, pointInterestL, sizeSquare
    var selected_polygon_style_red, selected_polygon_style_blue, bboxSelected
    var selected_polygon_style_blue_green, selected_polygon_style_blue_red
    var mapfile = "map=/home/forestwatchers/map/maps2012.map"
    var infofile = "map=/home/forestwatchers/map/infoshapes.map"
    var server = "http://forestwatchers.net/cgi-bin/mapserv?"
    var resultserver = server + mapfile
    var infoserver = server + infofile
    var activeMove = false
    var initMap1, initMap2, result

    console.log("Begin of JS");

    /* Red-Blue line styles */
    sizeSquare = 0.0045
    selected_polygon_style_red = {
        strokeWidth: 4,
        strokeColor: '#ff0000',
        fillOpacity: 0
    };
    selected_polygon_style_blue = {
        strokeWidth: 4,
        strokeColor: '#104e8b',
        fillOpacity: 0
    };
    selected_polygon_style_blue_green = {
        strokeWidth: 4,
        strokeColor: '#104e8b',
        fillColor: '#00ff00',
        fillOpacity: 1
    };
    selected_polygon_style_blue_red = {
        strokeWidth: 4,
        strokeColor: '#104e8b',
        fillColor: '#ff0000',
        fillOpacity: 1
    };

    // Map Array for loading the images
    var map = [];

    function loadUserProgress() {
        console.log("In loadUserProgress");
        pybossa.userProgress('checkClassRO', 'http://forestwatchers.net/pybossa').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);
        });
    }

    pybossa.taskLoaded(function(task, deferred){
        console.log("In taskLoaded");
        if ( !$.isEmptyObject(task) ) {
            task.map = [];
            var map_div = $("<div/>", {id:"map_task_" + task.id});
            $("#maps").prepend(map_div);

            var lat = task.info.tile.lat;
            var lon = task.info.tile.lon;
            pointInterestG = new OpenLayers.Geometry.Point(lon, lat);
            pointInterestL = new OpenLayers.LonLat(lon, lat);

            console.log("Map1");

            // Prep maps
            for (i=1;i<=2;i++) {
                var elem = $("<div/>", {id: 'elem', 'class': 'skeleton span' + 6});
                elem.css('padding-bottom', '10px');
                var map_cnt = $("<div/>", {'class': 'map_cnt'});
                var map_canvas = $("<div/>", {id: 'map'+i.toString()+'_' + task.id, 'class': 'map_canvas'});
                map_canvas.css("height", "460px");
                map_cnt.append(map_canvas);
                elem.append(map_cnt);
                $("#map_task_" + task.id).append(elem);
            }

            /*Map1*/
            map1 = new OpenLayers.Map( 'map1_' + task.id );
            layerBestTile1 = new OpenLayers.Layer.WMS( "Sattelite mosaic", resultserver, 
              {
                layers: 'annBuild',
                isBaseLayer: true
               },
              {
                opacity: 1.0
              } );
            vector1 = new OpenLayers.Layer.WMS( "Brazil (political map)", infoserver, 
              {
                layers: 'shp_brazil',
                transparent: true
              }, {
                opacity: 0.4
               } );
            center1 = new OpenLayers.Geometry.Polygon.createRegularPolygon(pointInterestG, sizeSquare, 4, 0);
            circleFeature1 = new OpenLayers.Feature.Vector(center1);
            circleFeature1.style = selected_polygon_style_red;
            vectorLayer1 = new OpenLayers.Layer.Vector("Interest Area");
            vectorLayer1.addFeatures(circleFeature1);
            map1.addLayer(vectorLayer1);
            map1.addLayer(layerBestTile1);
            map1.addLayer(vector1);
            map1.setCenter(pointInterestL,13);
            map1.addControl(new OpenLayers.Control.LayerSwitcher());

            console.log("Map2");
            /*Map2*/
            map2 = new OpenLayers.Map( 'map2_' + task.id );
            layerBestTile2 = new OpenLayers.Layer.WMS( "ANN classification", resultserver, 
              {
                layers: 'annClass',
                isBaseLayer: true
               },
              {
                opacity: 1.0
              } );
            vector2 = new OpenLayers.Layer.WMS( "Brazil (political map)", infoserver, 
              {
                layers: 'shp_brazil',
                transparent: true
              }, {
                opacity: 0.4
               } );
            center2 = new OpenLayers.Geometry.Polygon.createRegularPolygon(pointInterestG, sizeSquare, 4, 0);
            circleFeature2 = new OpenLayers.Feature.Vector(center2);
            circleFeature2.style = selected_polygon_style_blue;
            vectorLayer2 = new OpenLayers.Layer.Vector("Interest Area");
            vectorLayer2.addFeatures(circleFeature2);
            map2.addLayer(vectorLayer2);
            map2.addLayer(layerBestTile2);
            map2.addLayer(vector2);
            map2.setCenter(pointInterestL,13);
            map2.addControl(new OpenLayers.Control.LayerSwitcher());

            $("#map_task_" + task.id).hide();

            task.map.push(map1);
            task.map.push(map2);

            // Sync maps
            task.map[0].events.register("move", task.map[0], function(){
                if (activeMove) {
                    return;
                }
                activeMove = true;
                task.map[1].setCenter(task.map[0].getCenter().clone().transform(task.map[0].getProjectionObject(), task.map[1].getProjectionObject()), task.map[0].getZoom());
                activeMove = false;
            });
            task.map[1].events.register("move", task.map[1], function(){
                if (activeMove) {
                    return;
                }
                activeMove = true;
                task.map[0].setCenter(task.map[1].getCenter().clone().transform(task.map[1].getProjectionObject(), task.map[0].getProjectionObject()), task.map[1].getZoom());
                activeMove = false;
            });

            deferred.resolve(task);
        }
        else {
            deferred.resolve(task);
        }
    });

    pybossa.presentTask(function(task, deferred){
        console.log("In presentTask");
        if ( !$.isEmptyObject(task) ) {

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

            $("#question h1").text(task.info.question);
            loadUserProgress();
            $("#task-id").text(task.id);

            $("#map_task_" + task.id).show();

            // Change polygon to green and enable submit button
            $("#btnForest").off('click').on('click', function(evt){
                console.log("In btnForest");
                task.map[1].layers[0].features[0].style = selected_polygon_style_blue_green;
                task.map[1].layers[0].redraw();
                result = 1;
                $("#areaBtnSubmit").fadeIn();
            });

            // Change polygon to red and enable submit button
            $("#btnNonForest").off('click').on('click', function(evt){
                console.log("In btnNonForest");
                task.map[1].layers[0].features[0].style = selected_polygon_style_blue_red;
                task.map[1].layers[0].redraw();
                result = 2;
                $("#areaBtnSubmit").fadeIn();
            });

            // Submit answer to PyBossa
            $(".btn-submit").off('click').on('click', function(evt){
                console.log("In submitTask");
                task_id = $("#task-id").text();
                console.log(result);
                pybossa.saveTask( task_id, {'checkClassRO': result}, "http://forestwatchers.net/pybossa").done( function(data) {
                    $("#map_task_" + task.id).hide();
                    $("#areaBtnSubmit").fadeOut();
                    // Show the feedback div
                    $("#success").fadeIn();
                    // Fade out the pop-up after a 1000 miliseconds
                    setTimeout(function() { $("#success").fadeOut() }, 1000);
                    deferred.resolve();
                });
            });

        }
        else {
            $(".skeleton").hide();
            $("#finish").fadeIn();
        }
    });

    pybossa.setEndpoint('http://forestwatchers.net/pybossa/');
    pybossa.run('checkClassRO');

</script>