/**
 * /sQuiz/sQuiz_module_markOnMap.js
 * @version 1.2
 * @desc sQuiz class for markOnMaps
 * @author Fándly Gergő Zoltán (gergo@systemtest.tk, systemtest.tk)
 * @copy 2017 Fándly Gergő Zoltán
 * License:
    sQuiz for creating small jQuery based quizs in an implementable way
    Copyright (C) 2017  Fándly Gergő Zoltán

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program.  If not, see <https://www.gnu.org/licenses/>.
 **/

(function($){
    $.sQuiz_module_markOnMap=function(parent, quiz){
        this.parent=parent;
        this.quiz=quiz;
        this.container=parent.element.children("#sqTestArea");
        this.qidMap={};
    };
    
    $.sQuiz_module_markOnMap.prototype={
        submit: function(){
            var self=this;
            this.parent.stopTimer();
            var sub={};
            
            //unbind handlers
            this.container.children("div[data-qid=mapArea]").children("div[data-qid=markers]").children("i[data-qid=marker]").off();
            
            sub.answers=[];
            sub.correct=true;            
            this.container.children("div[data-qid=mapArea]").children("div[data-qid=markers]").children("i[data-qid=marker]").each(function(){
                for(var i=0; i<self.quiz.markers.length; i++){
                    if(self.quiz.markers[i].posx==$(this).data("posx") && self.quiz.markers[i].posy==$(this).data("posy")){
                        var selected=$(this).data("selected");
                        if(self.quiz.markers[i].correct==selected){
                            $(this).addClass("sq-green");
                        }
                        else{
                            $(this).addClass("sq-red");
                            sub.correct=false;
                        }
                        sub.answers.push({posx: $(this).data("posx"), posy: $(this).data("posy"), selected: selected});
                    }
                }
            });
            
            sub.elapsed=this.parent.elapsedPerTest;
            this.parent.answers.push(sub);
        },
        
        load: function(){
            var map="<img src=\""+this.quiz.map+"\" alt=\"map to fill\">";
            
            var markers="";
            $.each(this.quiz.markers, function(key, val){
                markers+="<i class=\"fa fa-circle\" style=\"position: absolute; top: "+val.posy.toString()+"px; left: "+val.posx.toString()+"px\" data-posx=\""+val.posx.toString()+"\" data-posy=\""+val.posy.toString()+"\" data-qid=\"marker\" data-selected=\"false\"></i>";
            });
            
            this.container.html("<h2>"+this.quiz.question+"</h2><br><div class=\"sq sq-center sq-mapArea\" data-qid=\"mapArea\">"+map+"<div data-qid=\"markers\">"+markers+"</div></div>");
            
            this.container.children("div[data-qid=mapArea]").children("div[data-qid=markers]").children("i[data-qid=marker]").on("click", function(){
                if($(this).data("selected")==false){
                    $(this).removeClass("fa-circle");
                    $(this).addClass("fa-check-circle");
                    $(this).data("selected", true);
                }
                else{
                    $(this).removeClass("fa-check-circle");
                    $(this).addClass("fa-circle");
                    $(this).data("selected", false);
                }
            });
        }
    };
}(jQuery));