template.html

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

<!--
    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"><!-- Start of Question and Submission DIV (column) -->
        <h1 id="question"><span id="i18n_question">Classify this picture</span></h1> <!-- The question will be loaded here -->
        <div id="step1" class="btn-group" style="text-align:center"> <!-- Start DIV for the submission buttons -->
            <div id="answer" class="btn-group" style="text-align:center"> <!-- Start DIV for the submission buttons -->
                <!-- If the user clicks this button, the saved answer will be value="black"-->
                <button class="btn btn-large btn-answer" value='black'><span id="i18n_black">Black</span><p><img src='https://farm3.staticflickr.com/2903/14133824088_e1f857cd2c_s.jpg' value='black'></p></button> 
                <!-- If the user clicks this button, the saved answer will be value="city"-->
                <button class="btn btn-large btn-answer" value='city'><span id="i18n_city">City</span><p><img src='https://farm3.staticflickr.com/2904/14320489725_ee50231a89_s.jpg' value='city'></p></button>
                <!-- If the user clicks this button, the saved answer will be value="stars"-->
                <button class="btn btn-large btn-answer" value='stars'><span id="i18n_stars">Stars</span><p><img src='https://farm4.staticflickr.com/3793/14133821488_4c7e9d6e2e_s.jpg' value='stars'></p></button>
                <!-- If the user clicks this button, the saved answer will be value="stars"-->
                <button class="btn btn-large btn-answer" value='aurora'><span id="i18n_aurora">Aurora</span><p><img src='https://farm6.staticflickr.com/5076/14192019209_936c04fdc5_s.jpg' value='aurora'></p></button>
                <!-- If the user clicks this button, the saved answer will be value="stars"-->
                <button class="btn btn-large btn-answer" value='astronaut'><span id="i18n_astronaut">Astronaut</span><p><img src='https://farm6.staticflickr.com/5275/14133878540_091e594c57_s.jpg' value='astronaut'></p></button>
                <!-- If the user clicks this button, the saved answer will be value="NoPhoto"-->
                <button class="btn btn-large btn-answer" value='none'><span id="i18n_none">None of these</span><p><img src='https://farm3.staticflickr.com/2909/14133822518_2807e6605f_s.jpg' value='none'></p></button>
                <button class="btn btn-large btn-answer" value='404'><span id="i18n_no_photo">No photo</span><p><img src="https://farm6.staticflickr.com/5563/14318682172_7c59ee93ec_s.jpg" value='404'></p></button>
                <!-- If the user clicks this button, the saved answer will be value="NotKnown"-->
                <button class="btn btn-large btn-answer" value='unknown'><span id="i18n_i_dont_know">I don't know</span><p><img src='https://farm3.staticflickr.com/2907/14320489065_90f174b685_s.jpg' value='unknown'></p></button>
            </div><!-- End of DIV for the submission buttons -->
        </div><!-- End of DIV for the submission buttons -->
        <div id="step2" class="btn-group" style="text-align:center; display:none;"> <!-- Start DIV for the submission buttons -->
            <div id="answer" class="btn-group" style="text-align:center"> <!-- Start DIV for the submission buttons -->
                <h2 id="question"><span id="i18n_question2">How clear is the image?</span></h2> <!-- The question will be loaded here -->
                <!-- If the user clicks this button, the saved answer will be value="black"-->
                <button class="btn btn-large btn-answer" value='clear'><span id="i18n_clear">Clear</span><p><img src='https://farm3.staticflickr.com/2904/14320489725_ee50231a89_s.jpg' value='clear'></p></button>
                <!-- If the user clicks this button, the saved answer will be value="city"-->
                <button class="btn btn-large btn-answer" value='someclouds'><span id="i18n_someclouds">Some clouds</span><p><img src='https://farm3.staticflickr.com/2896/14133821738_83ae131d63_s.jpg' value='someclouds'></p></button>
                <!-- If the user clicks this button, the saved answer will be value="stars"-->
                <button class="btn btn-large btn-answer" value='cloudy'><span id="i18n_cloudy">Cloudy</span><p><img src='https://farm3.staticflickr.com/2917/14133876690_2097c229d8_s.jpg' value='cloudy'></p></button>
                <button class="btn btn-large btn-answer" value='reset'><span id="i18n_stepback">Step back</span><p><img src="https://farm3.staticflickr.com/2921/14194788228_6387071428_s.jpg" value='reset'></button>
            </div><!-- End of DIV for the submission buttons -->

        </div><!-- End of DIV for the submission buttons -->
              <div id="step3" class="btn-group" style="text-align:center; display:none;"> <!-- Start DIV for the submission buttons -->
            <div id="answer" class="btn-group" style="text-align:center"> <!-- Start DIV for the submission buttons -->
                <h2 id="question"><span id="i18n_question3">How clear is the image?</span></h2> <!-- The question will be loaded here -->
                <!-- If the user clicks this button, the saved answer will be value="black"-->
                <button class="btn btn-large btn-answer" value='sharp'><span id="i18n_sharp">Sharp</span><p><img src='https://farm3.staticflickr.com/2924/14317150411_54287a5216_s.jpg' value='sharp'></p></button>
                <button class="btn btn-large btn-answer" value='blurry'><span id="i18n_blurry">Blurry</span><p><img src='https://farm6.staticflickr.com/5494/14133960027_3f8026867e_s.jpg' value='blurry'></p></button>
            </div><!-- End of DIV for the submission buttons -->

        </div><!-- End of DIV for the submission buttons -->

    </div><!-- End of DIV for the submission buttons -->
</div><!-- End of DIV for the submission buttons -->
<div class="row skeleton" style="margin-top:15px;"> <!-- Start Skeleton Row-->
    <div class="span8 offset2"><!-- Start of Question and Submission DIV (column) -->
        <a id="photo-link" href="#" >
            <img id="photo" src="http://i.imgur.com/GeHxzb7.png" style="max-width=100%">
        </a>
        Earth Science and Remote Sensing Unit, NASA-Johnson Space Center. "The Gateway to Astronaut Photography of Earth."               
         <div id="Twitter-share-section">
                    <a href="https://twitter.com/share" class="twitter-share-button" data-text="Check this amazing picture!" data-size="large" data-hashtags="citiesAtNight">Tweet</a>
                </div>
                <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
                                      <!-- Inserta esta etiqueta donde quieras que aparezca Botón +1. -->
          <div class="g-plusone" style="float:left" data-annotation="inline" data-width="300"></div>

          <!-- Inserta esta etiqueta después de la última etiqueta de Botón +1. -->
          <script type="text/javascript">
            window.___gcfg = {lang: 'es'};

            (function() {
              var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
              po.src = 'https://apis.google.com/js/platform.js';
              var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
            })();
          </script>
          <div style="float:left"> 
          <div id="fb-like" class="fb-like"  data-href="http://www.cowdcrafting.org/app/nightcitiesiss" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>
            <div id="fb-root"></div>
          </div>
          <script>(function(d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js = d.createElement(s); js.id = id;
            js.src = "//connect.facebook.net/es_ES/sdk.js#xfbml=1&version=v2.0";
            fjs.parentNode.insertBefore(js, fjs);
          }(document, 'script', 'facebook-jssdk'));</script>
          </div>
        </div><!-- End of DIV for the submission buttons -->

          <!-- End social buttons -->
    </div><!-- End of DIV for the submission buttons -->
</div><!-- End of DIV for the submission buttons -->

<div class="row skeleton" style="margin-top:15px;"> <!-- Start Skeleton Row-->
    <div class="span8 offset2"><!-- Start of Question and Submission DIV (column) -->
        <p><span id="i18n_working_task">You are working now on task: </span><span id="task-id" class="label label-warning">#</span></p>
        <p><span id="i18n_tasks_completed">You have completed: </span><span id="done" class="label label-info"></span><span id="i18n_tasks_from"> tasks from</span>
        <!-- Progress bar for the user -->
        <span id="total" class="label label-info"></span></p>
        <div class="progress progress-striped">
            <div id="progress" rel="tooltip" title="#" class="bar" style="width: 0%;"></div>
        </div>
        <!-- 
            This application uses Disqus to allow users to provide some feedback.
            The next section includes a button that when a user clicks on it will
            load the comments, if any, for the given task
        -->
        <div id="disqus_show_btn" class="row" style="margin-top:5px;">
            <div class="span8">
                <button class="btn btn-primary btn-large btn-disqus" onclick="loadDisqus()"><i class="icon-comments"></i> <span id ="i18n_show_comments">Show comments</span></button>
                <button class="btn btn-large btn-disqus" onclick="loadDisqus()" style="display:none"><i class="icon-comments"></i> <span id ="i18n_hide_comments">Hide comments</span></button>

            </div>
        </div><!-- End of Disqus Button section -->
        <!-- Disqus thread for the given task -->
        <div id="disqus_thread" style="margin-top:5px;display:none"></div>
    </div><!-- End of Question and Submission DIV (column) -->
</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>

<div class="modal fade" id="lostatnightmodal">
  <div class="modal-header">
    <a class="close" data-dismiss="modal">&times;</a></div>
  <div class="modal-body"></div>
  <div class="modal-footer">
    <p>
        <span id="i18n_lost">Thank you !! You and other volunteers have classified all the high-resolution images archive of the ISS.
        Our priority now is to locate images on the <a href="http://crowdcrafting.org/app/LostAtNight">Lost at Night application.</a>
        But you can still use this project and improve the quality of results.
        Soon we will have new pictures. Click <a href="http://crowdcrafting.org/app/darkskies/27">here</a> to learn how to be informed about the project.</span>
  </p>
    <a href="#" class="btn btn-primary" data-dismiss="modal"><span id="i18n_later">Maybe later, I want to contribute to Dark Skies now</span></a>
  </div>
</div>

<script>
// Default language
var userLocale = "en";
// Translations
var messages = {"en": {
                        "i18n_welldone": "Well done!",
                        "i18n_welldone_text": "Your answer has been saved",
                        "i18n_loading_next_task": "Loading next task...",
                        "i18n_task_completed": "The task has been completed!",
                        "i18n_thanks": "Thanks a lot!",
                        "i18n_congratulations": "Congratulations",
                        "i18n_congratulations_text": "You have participated in all available tasks!",
                        "i18n_no_photo": "No photo",
                        "i18n_i_dont_know": "I don't know",
                        "i18n_working_task": "You are working now on task:",
                        "i18n_tasks_completed": "You have completed: ",
                        "i18n_tasks_from": " tasks from ",
                        "i18n_show_comments": "Show comments:",
                        "i18n_hide_comments": "Hide comments:",
                        "i18n_question": "Classify this picture",
                        "i18n_question2": "How clear is the image?",
                        "i18n_question3": "How clear is the image?",
                        "i18n_black": "Black",
                        "i18n_city": "City",
                        "i18n_stars": "Stars",
                        "i18n_aurora": "Aurora",
                        "i18n_astronaut" : "Astronaut",
                        "i18n_none": "None of these",
                        "i18n_clear" : "Clear",
                        "i18n_someclouds": "Some clouds",
                        "i18n_cloudy" : "Cloudy",
                        "i18n_stepback" : "Step back",
                        "i18n_sharp" : "Sharp",
                        "i18n_blurry" : "Blurry",
                        "i18n_lost" : 'Thank you !! You and other volunteers have classified all the high-resolution images archive of the ISS.\nOur priority now is to locate images on the <a href="http://crowdcrafting.org/app/LostAtNight">Lost at Night application.</a>But you can still use this project and improve the quality of results.\nSoon we will have new pictures.\n Click <a href="http://crowdcrafting.org/app/darkskies/27">here</a> to learn how to be informed about the project.',
                        "i18n_later" : 'Maybe later, I want to contribute to Dark Skies now'
                      },
                "es": {
                        "i18n_welldone": "Bien hecho!",
                        "i18n_welldone_text": "Tu respuesta ha sido guardada",
                        "i18n_loading_next_task": "Cargando la siguiente tarea...",
                        "i18n_task_completed": "La tarea ha sido completadas!",
                        "i18n_thanks": "Muchísimas gracias!",
                        "i18n_congratulations": "Enhorabuena",
                        "i18n_congratulations_text": "Has participado en todas las tareas disponibles!",
                        "i18n_no_photo": "No hay foto",
                        "i18n_i_dont_know": "No lo sé",
                        "i18n_working_task": "Estás trabajando en la tarea: ",
                        "i18n_tasks_completed": "Has completado: ",
                        "i18n_tasks_from": " tareas de",
                        "i18n_show_comments": "Mostrar comentarios",
                        "i18n_hide_comments": "Ocultar comentarios",
                        "i18n_question": "Clasifica esta imagen",
                        "i18n_question2": "¿Como de clara esta la imagen?",
                        "i18n_question3": "¿Como de enfocada esta la imagen?",
                        "i18n_black": "Negro",
                        "i18n_city": "Ciudad",
                        "i18n_stars": "Estrellas",
                        "i18n_aurora": "Aurora",
                        "i18n_astronaut" : "Astronauta",
                        "i18n_none": "Ninguna de estos",
                        "i18n_clear" : "Claro",
                        "i18n_someclouds": "Algunas nubes",
                        "i18n_cloudy" : "Nublado",
                        "i18n_stepback" : "Paso atras",
                        "i18n_sharp" : "Enfocado",
                        "i18n_blurry" : "Borroso",
                        "i18n_lost" : '¡Gracias! Tú y otros voluntarios habéis clasificado ya todas las imágenes de alta resolución del archivo de la ISS.\nNuestra prioridad es ahora localizar las imágenes en el proyecto <a href="http://crowdcrafting.org/app/LostAtNight">Lost at Night.</a>\nSin embargo, aun puedes seguir colaborando en este proyecto para mejorar la precisión de los resultados. Pronto tendremos más imágenes.\nHaz click <a href="http://crowdcrafting.org/app/darkskies/27">>aquí</a> si quieres saber más sobre este proyecto.',
                        "i18n_later" : 'Quizás luego, Ahora prefiero colaborar en Dark Skies'
                      },
                    "fr": {
                        "i18n_welldone": "Très Bien!",
                        "i18n_welldone_text": "Votre réponse a été enregistrée",
                        "i18n_loading_next_task": "Chargement de la tâche suivante ...",
                        "i18n_task_completed": "La tâche est terminée!",
                        "i18n_thanks": "Merci!",
                        "i18n_congratulations": "Félicitations",
                        "i18n_congratulations_text": "Vous avez participé à toutes les tâches disponibles!",
                        "i18n_no_photo": "Pas de photo",
                        "i18n_i_dont_know": "Je ne sais pas",
                        "i18n_working_task": "Vous travaillez sur la tâche: ",
                        "i18n_tasks_completed": "Terminé:",
                        "i18n_tasks_from": " tâches",
                        "i18n_show_comments": "Afficher les commentaires",
                        "i18n_hide_comments": "Masquer les commentaires",
                        "i18n_question": "Classer cette image",
                        "i18n_question2": "Quelle est la clarté de l'image?",
                        "i18n_question3": "Quelle est la clarté de l'image?",
                        "i18n_black": "Noir",
                        "i18n_city": "Ville",
                        "i18n_stars": "Étoiles",
                        "i18n_aurora": "Aurore boréale",
                        "i18n_astronaut" : "Astronaute",
                        "i18n_none": "Aucun de ceux-ci",
                        "i18n_clear" : "Clair",
                        "i18n_someclouds": "Quelques nuages",
                        "i18n_cloudy" : "Nuageux",
                        "i18n_stepback" : "Reculer",
                        "i18n_sharp" : "Net",
                        "i18n_blurry" : "Flou"
                      },
                "it": {
                        "i18n_welldone": "Ben fatto!",
                        "i18n_welldone_text": "La tua risposta è stata salvata",
                        "i18n_loading_next_task": "Caricamento del prossimo compito ...",
                        "i18n_task_completed": "L’attività è stata completata!",
                        "i18n_thanks": "Molte grazie!",
                        "i18n_congratulations": "Congratulazioni",
                        "i18n_congratulations_text": "Hai partecipato a tutte le attività disponibili!",
                        "i18n_no_photo": "Non ci sono foto",
                        "i18n_i_dont_know": "Non lo so",
                        "i18n_working_task": "Stai lavorando alll’attività: ",
                        "i18n_tasks_completed": "Hai finito: ",
                        "i18n_tasks_from": " attività di",
                        "i18n_show_comments": "Mostrare commenti",
                        "i18n_hide_comments": "Nascondere i commenti",
                        "i18n_question": "Classifica questa immagine",
                        "i18n_question2": "Quanto chiara è l’immagine?",
                        "i18n_question3": "Quanto è focalizzata questa immagine?",
                        "i18n_black": "Nero",
                        "i18n_city": "Città",
                        "i18n_stars": "Stelle",
                        "i18n_aurora": "Aurora",
                        "i18n_astronaut" : "Astronauta",
                        "i18n_none": "Nessuna di queste",
                        "i18n_clear" : "Chiaro",
                        "i18n_someclouds": "Qualche nuvola",
                        "i18n_cloudy" : "Nuvoloso",
                        "i18n_stepback" : "Passo indietro",
                        "i18n_sharp" : "Nitido",
                        "i18n_blurry" : "Sfocato"
                        },
                	"jp": {
                        "i18n_welldone": "よくできました！",
                        "i18n_welldone_text": "あなたの回答は保存されました",
                        "i18n_loading_next_task": "次のタスクをロード中",
                        "i18n_task_completed": "タスク完了！",
                        "i18n_thanks": "ありがとうございました！",
                        "i18n_congratulations": "おめでとうございます",
                        "i18n_congratulations_text": "全てのタスクに参加しました！",
                        "i18n_no_photo": "画像なし",
                        "i18n_i_dont_know": "わかりません",
                        "i18n_working_task": "現在作業中のタスク：",
                        "i18n_tasks_completed": "完了しました：",
                        "i18n_tasks_from": " のタスクはここから： ",
                        "i18n_show_comments": "コメントを表示：",
                        "i18n_hide_comments": "コメントを非表示：",
                        "i18n_question": "この画像を分類してください",
                        "i18n_question2": "この画像はどのくらい鮮明ですか？",
                        "i18n_question3": "この画像はどのくらい鮮明ですか？",
                        "i18n_black": "黒",
                        "i18n_city": "街",
                        "i18n_stars": "星",
                        "i18n_aurora": "オーロラ",
                        "i18n_astronaut" : "宇宙飛行士",
                        "i18n_none": "確答なし",
                        "i18n_clear" : "鮮明",
                        "i18n_someclouds": "ちょっと曇っている",
                        "i18n_cloudy" : "曇っている",
                        "i18n_stepback" : "前に戻る",
                        "i18n_sharp" : "シャープ",
                        "i18n_blurry" : "ボヤけている"
                      }
               };
// Update userLocale with server side information
 $(document).ready(function(){
    userLocale = document.getElementById('PYBOSSA_USER_LOCALE').textContent.trim();
    i18n_translate();
});

function i18n_translate() {
    var ids = Object.keys(messages[userLocale])
    for (i=0; i<ids.length; i++) {
        console.log("Translating: " + ids[i]);
        document.getElementById(ids[i]).innerHTML = messages[userLocale][ids[i]];
    }
}

function zoomImage(){
    var zoomFactor = 1.2;
    $("#mainimage").mouseover(function(){
        $(this).css({
            width: function(index, value) {
                return parseFloat(value) * zoomFactor;
            },
            height: function(index, value) {
                return parseFloat(value) * zoomFactor;
            }
        });
        $(this).parent().parent().css({
            width: function(index, value) {
                return parseFloat(value) * zoomFactor;
            }
        });
    });
    $("#mainimage").mouseout(function(){
        $(this).css({
            width: function(index, value) {
                return 640;
            },
            height: function(index, value) {
                return 426;
            }
        });
        $(this).parent().parent().removeAttr('style');
    });
}


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

(function(){
    var alert_shown = false;
    pybossa.taskLoaded(function(task, deferred) {
        if (!alert_shown) {
            $('#lostatnightmodal').modal('show');
            alert_shown = true;
        }
        if ( !$.isEmptyObject(task) ) {
            var img = $('<img />');
            img.load(function() {
                // continue as soon as the image is loaded
                deferred.resolve(task);
                zoomImage($('#mainimage'));
            })
            .error(function() {
                img.attr('src', task.info.link_big.replace('sseop/images','DatabaseImages')).css('width', 640).css('height', 426);
                deferred.resolve(task);
            });
            img.attr('src', task.info.link_small).css('width', 640).css('height', 426);
            img.addClass('img-polaroid');
            img.attr('id','mainimage');
            task.info.image = img;
            task.answer = {
                'classification': '',
                'idISS': task.info.idISS,
                'img_small': task.info.link_small,
                'img_big': task.info.link_big.replace('sseop/images','DatabaseImages'),
                'cloudy': '',
                'sharp': ''
            }
        }
        else {
            deferred.resolve(task);
        }
        updateTwitterValues(window.location.href);
    });
}());

function updateTwitterValues(share_url) {
    $("#Twitter-share-section").html('&nbsp;');
    $("#Twitter-share-section").html('<a href="https://twitter.com/share" class="twitter-share-button" data-url="'+share_url+'" data-text="Check out this amazing image!" data-size="large" data-hashtags="citiesAtNight">Tweet</a>');
    twttr.widgets.load();
}

pybossa.presentTask(function(task, deferred) {
    if ( !$.isEmptyObject(task) ) {
        loadUserProgress();
        $('#photo-link').html('').append(task.info.image);
        $("#photo-link").attr("href", task.info.link);
        $("#photo-link").attr("target","_blank");
        $("#question").html(task.info.question);
        $('#task-id').html(task.id);
        $('.btn-answer').off('click').on('click', function(evt) {
            var answer = $(evt.target).attr("value");
            if ((typeof answer != 'undefined')&& (task.answer.classification == '')&&(task.answer.cloudy == '')&&(task.answer.sharp == '')) {
                if ((answer == 'city'))
                {
                    $("#step1").hide();
                    $("#step2").show();
                  	$("#step3").hide();
                    console.log("city"+task.answer);
                    task.answer.classification = answer;
                }
                else 
                {
                pybossa.saveTask(task.id, task.answer).done(function() {
                    $("#step2").hide();
                    $("#step1").show();
                    $("#step3").hide();
                    deferred.resolve();
                });
                task.answer.classification = answer;
                console.log(task.answer);
                }
            }
            else {
                if ((typeof answer != 'undefined')&& (task.answer.cloudy == '')&&(task.answer.sharp == '')) {
                    console.log('cloudy'+task.answer);
                    task.answer.cloudy = answer;
                    $("#step1").hide();
                    $("#step2").hide();
                    $("#step3").show();
                    if (task.answer.cloudy == 'reset'){
                        task.answer.cloudy ='';
                        task.answer.clasification ='';
                        $("#step1").show();
                        $("#step2").hide();
                        $("#step3").hide();
                        deferred.resolve();
                    }

                    console.log(task.answer);
                    // $("#loading").fadeIn(500);
                    if ($("#disqus_thread").is(":visible")) {
                        $('#disqus_thread').toggle();
                        $('.btn-disqus').toggle();
                    }
                }
                else {
                    console.log('sharp'+task.answer);
                    task.answer.sharp = answer;
                    pybossa.saveTask(task.id, task.answer).done(function() {

                        $("#loading").fadeIn(500);
                        $("#step3").hide();
                        $("#step2").hide();
                        $("#step1").show();
                        deferred.resolve();
                    });
                    console.log(task.answer);
                    $("#loading").fadeIn(500);
                    if ($("#disqus_thread").is(":visible")) {
                        $('#disqus_thread').toggle();
                        $('.btn-disqus').toggle();
                    }
                }
            }
        });
        $("#loading").hide();
    }
    else {
        $(".skeleton").hide();
        $("#loading").hide();
        $("#finish").fadeIn(500);
    }
});

pybossa.run('darkskies');
</script>
<script type="text/javascript">
        $(document).ready(
            function(){
                $('#mainimage').click(
                    function( event ){
                        var scale = 150/100;
                        var pos = $(this).offset();
                        var clickX = event.pageX - pos.left;
                        var clickY = event.pageY - pos.top;
                        var container = $(this).parent().get(0);

                        $(this).css({
                                        width: this.width*scale, 
                                        height: this.height*scale
                                    });

                        container.scrollLeft = ($(container).width() / -2 ) + clickX * scale;
                        container.scrollTop = ($(container).height() / -2 ) + clickY * scale;
                    }
                );
            }
        );
</script>
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-1910419-4', 'citiesatnight.org');
  ga('require', 'displayfeatures');
  ga('send', 'pageview');

</script>