/**
         * 
         * Despegable HTML5
         * 
         * @version: 1.1
         * @Fecha 2020-11-17
         */

        var data;
        var correctAnswer = 0;
        var grownAnswer = 0;
        var totalAnswers = 0;
        //Obtenemos valores del json
        var json;
        //imagaen de fondo
        var imgBack ;
        //elements valores id y texto
        var elm;
        //boxes valore id
        var box;

        var respuestas = [];

        var rCorrectas = 0;
        var rErrores = 0;
        var datosrespuesta;



        function inicializarVarsActividad(tipo){
                 data = datos;
                 json = $.each( data, function( key, val ) { data = val });
                //imagen de fondo ........
                 //imgBack = 'style="background:url('+data.parameters.image._href+') no-repeat; background-size: 70%"';
                //Ajuste para concidencia con el Flash
                //no-repeat; background-size: contain;background-position-x: 50%;
                imgBack = 'style="background:url('+data.parameters.image._href+') no-repeat; background-size: contain;background-position-x: 50%"';
                //elements valores id y texto
                 elm = data.parameters.elements.element;
                //boxes valore id
                 box = data.parameters.boxes.box;
                 titulo =  data.wording;
        }

        function inicializarActiviadad(){

                //$('#exit').append($('<div id="cerrar">Cerrar <i class="fa fa-close"></i></div>'));
                $('#cerrar').click(function(){
                   window.close();
                 });

                if ($modulo == "rceAssessManager"){
                    //crear boton de envío
                    $('#exit').append($('<div id="guardar">Guardar <i class="fa fa-save"></i></div>'));
                    $("#guardar").one("click", guardar);
                    $("#guardar").addClass($plantilla);
                }else{
                    //crear boton de Solución
                    $('#exit').append($('<div id="solucion">Solución <i class="fa fa-question-circle"></i></div>'));
                    $("#solucion").one("click", eventOne);
                    $("#solucion").addClass($plantilla);
                }


                //crear título de actividad
                $('#exit').append($('<h1 class="titulo"><i class="fa fa-info-circle" aria-hidden="true"></i> ' + titulo + '</h1>'));

                //crear div de salida de resultados
                $('#exit').append($('<div id="salida-resultados"></div>'));

                //craer contenedor drag and drop
                $('#exit').append($('<div id="draganddrop"><div id="boxes" '+ imgBack +'></div><div id="elements"></div></div>'));
                 //inicializamos el drag and drop
                $(init);
        }


         function init() {

          $('#salida-resultados').hide();

          // Reset a cero al iniciar el juego
          correctAnswer = 0;
          grownAnswer = 0;
          totalAnswers = 0;
          answers = [];
          var  maxlargo = 0;
          $('#elements').html( '' );
          $('#boxes').html( '' );

          //Crear las cajas de los elementos para Drag
          for ( var i=0; i<elm.length; i++ ) {
              $('<div class="elmdrag" style="width:130px; font-size: small;">' + elm[i].text + '</div>').data( 'number', elm[i]._id ).attr( 'id', elm[i]._id ).appendTo( '#elements' ).draggable( {
                containment: '#draganddrop',
                stack: '#elements div',
                cursor: 'move',
                revert: false
                //revert: true
              } );
              //console.log($('<div class="pdrag">' + numbers[i] + '</div>').data( 'number', numbers[i] ));
              $("#" + elm[i]._id).one("click", activardrag);
            }
            //Evalua cual es el largo maximo de los campos
             for ( var y=0; y<elm.length; y++ ) {
                if(maxlargo < elm[y].text.length){
                         maxlargo = elm[y].text.length;
                         console.log("Largo Maximo:"+ maxlargo);
                                                  
                }
             }


            //Creamos los elementos para Drop
            for ( var i=0; i<box.length; i++ ) {
                var marriba = Number(box[i]._y);
                var mizquierda = Number(box[i]._x);

                var sube = 0;
                var izquierda = 25;

                var tamano =  130;
                if(maxlargo >= 1 && maxlargo <=3){
                    tamano = 55;
                }
                if(maxlargo >= 4 && maxlargo <=7){
                    tamano = 70;
                }
                if (maxlargo > 7 && maxlargo <= 10){
                    tamano = 80;
                }
                if (maxlargo > 10 && maxlargo <= 13){
                    tamano = 90;
                }
                if (maxlargo > 13 && maxlargo <= 16){
                    tamano =  100;
                }
                if (maxlargo > 16 && maxlargo <= 20){
                    tamano =  110;
                }
                if (maxlargo > 20 && maxlargo <= 25){
                    tamano =  140;
                }
                if (maxlargo > 25 && maxlargo <= 30){
                    tamano =  160;
                }
                if (maxlargo > 30 ){
                    tamano =  260;
                }
                if (maxlargo > 40){
                    tamano =  320;
                }
                var ajustex = 0;
                ajustex +=  Math.round(130/2);
                var mtop = Number(box[i]._y);
                var mleft = Number(box[i]._x) + ajustex;

              $('<div class="boxdrop" style="top:'+mtop+'px;left:'+mleft+'px; width:'+ tamano +'px; font-size: 70%; color: black; height: 25px"></div>').data( 'number', box[i]._id ).attr( 'id', box[i]._id ).appendTo( '#boxes' ).droppable( {
                accept: '#elements div',
                hoverClass: 'hovered',
                drop: handleCardDrop //Función a realizar en el evento drop
              } );
            }

            function handleCardDrop( event, ui ) {

              //Obtenemos la data id de los elemnts y boxes
              var boxDrop = $(this).data( 'number' );
              var elmDrag = ui.draggable.data( 'number' );
              var textom = ui.draggable.text();
              console.log(textom);
              $(this).empty();
              $(this).append(textom);
              // --Cambio
              //Deshabilitamos el drag and drop para usarse solo una vez por elemento
             // $(this).droppable( 'disable' );
              ui.draggable.draggable( 'disable' );
             // ui.draggable.draggable( 'option', 'revert', false );
              _top = $(this).css("top");
             _left = $(this).css("left");
             ui.draggable.one("click", activardrag);
             //ui.draggable.css({'top': _top ,'left': _left, 'position':'absolute'});
             
              if ( boxDrop == elmDrag ) {
                correctAnswer++;
                console.log('Correct = ' + 'Box: ' + boxDrop +  ' ' + 'Elment: ' + elmDrag + ' ' + correctAnswer);
                
                answers.push(elmDrag);
                console.log(answers);
                var ofs = $(this).offsetWidth;
                //var x = ui.draggable.find('div')
                 var x = ui.draggable.find('div').clone();
                 $(this).append(x);
                x.css('width', '230px');
               

              } else {
                grownAnswer++;
                console.log('Grown = ' + 'Box: ' + boxDrop +  ' ' + 'Elment: ' + elmDrag + ' ' + grownAnswer);
                answers.push(elmDrag);
                console.log(answers);
              }

              console.log(correctAnswer + grownAnswer);

              //Salida de resuttados
              // if ( answers.length == elm.length ) {
              //     $('#salida-resultados').show();
              //     $('#salida-resultados').animate( {
              //           opacity: 1
              //         }, 'slow' );

              //     $('.yes').css('background', 'green');
              //     $('.boxdrop').css('background', 'transparent');

              //     if(correctAnswer > 1) {
              //       $('#salida-resultados').removeClass('bummer').addClass('good').html(correctAnswer + ' ' + 'respuestas correctas.');
              //     } else if(correctAnswer < 1) {
              //       $('#salida-resultados').removeClass('good').addClass('bummer').html(correctAnswer + ' ' + 'respuestas correctas.');
              //     } else {
              //       $('#salida-resultados').removeClass('bummer').addClass('good').html(correctAnswer + ' ' + 'respuesta correcta.');
              //     }

              //   } Salida de resultados

              }

        } //init
        function activardrag(){
            $(this).draggable( 'enable' );
            //$(this).draggable( 'option', 'revert', true );
        }

         function solutions() {
           $("i").remove(".fa-check-circle");
           $("i").remove(".fa-times-circle");
            for ( var i=0; i<box.length; i++ ) {
                
                var idCaja = box[i]._id
                for (var j=0; j<elm.length; j++){
                    var idElemento = elm[j]._id;
                    var textoelm = "";
                    textoelm = elm[j].text;

                    if(idCaja == idElemento){
                        
                        $('div#boxes div#'+ box[i]._id)[0].innerText = textoelm;

                    }

                }//for j

            }// for i

          }


         function eventOne() {
            console.log('Change One');
            $("#solucion").text("Ocultar Solución");
            solutions();
            $("#solucion").one("click", eventTwo);
          }

          function eventTwo() {
            console.log('Change Two');
            $("#solucion").text("Solución");
            colocarAnswers(datosrespuesta);
            calificarRespuesta(datos);
            $("#solucion").one("click", eventOne);
          }

           function calculaLargo(maxlargo){
            console.log("Entrada:"+ maxlargo);
         
          if(maxlargo > 20){
           
            //maxlargo = (maxlargo * 6)/9;  
            maxlargo = 320;
          }
          //return Math.round(maxlargo);
          console.log("Salida:"+ maxlargo);
          return maxlargo;
        }



        function leerRespuestas(){
            respuestas=[];
            for ( var i=0; i<box.length; i++ ) {
                var textocaja = "";
                textocaja = $('div#boxes div#'+ box[i]._id)[0].innerText;
                console.log({ caja: box[i]._id, texto: textocaja});

                for (var j=0; j<elm.length; j++){
                    var textoelm = "";
                    textoelm = elm[j].text;

                    if(textocaja == textoelm){
                        respuestas.push([box[i]._id,elm[j]._id]);
                        console.log({ caja: box[i]._id, elemento: elm[j]._id});
                        //Verifica si la respuesta es correcta
                        var boxDrop = box[i]._id;
                        var elmDrag = elm[j]._id;
   
                        if(boxDrop == elmDrag){
                            rCorrectas++;  
                        }
                        console.log({Correctas: rCorrectas});
                    }

                }//for j

            }// for i

        }


        function guardar(){
                
            var correctas = 0;
            var totalPreguntas = 0;
            var x2js = new X2JS();
            var respuestasLongitud = 0;
            var respuestajson = {"activity-result":{"score":{"correct":"0","over":"0"},"answer":{"drags":{"drag":[]}}}}

            leerRespuestas();
            respuestasLongitud = respuestas.length;

            totalPreguntas = elm.length;
            correctas = rCorrectas;
             

            for ( r = 0; r < respuestasLongitud; r++) {

                var respuestaval = {"_id-box":respuestas[r][0],"_id-element":respuestas[r][1]};
                respuestajson["activity-result"].answer.drags.drag.push(
                            respuestaval 
                 );
            }
                       
       

              respuestajson["activity-result"].score.correct = correctas;
              respuestajson["activity-result"].score.over = totalPreguntas;

              var xml = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>"
              xml = xml + x2js.json2xml_str(respuestajson);

            console.log("guardado en json");
            console.log(respuestajson);
            console.log("guardado en xml");
            console.log(x2js.json2xml_str(respuestajson));

            $.ajax({
                url: $guardarurl, //archivo de ejemplo
                type: "POST",
                data: {
                    input: xml,
                    timeStamp: $tmsActividad[1]
                },
                cache: false,
                success: function(respuestaxml) {
                    //mensaje de éxito
                    console.log(respuestaxml.childNodes[0].childNodes[0].data);
                    alert(respuestaxml.childNodes[0].childNodes[0].data);
                   // Comentario para prueba  window.close();
                   doFinish();

                },
                error: function(e, xhr, opt) {
                    // mensaje de error
                    alert("Error requesting " + opt.url + ": " + xhr.status + " " + xhr.statusText);
                    //alert('Ha ocurrido un error, intenta nuevamente.');
                },
            })

        }


        function colocarAnswers(datos){
                var respuestasAlumno = [];

             if(typeof datos["activity-result"] === 'undefined'){

                respuestasAlumno = datos.answers.answer.drags.drag;
                console.log("Sin: activity-result");
                  
              }else{

                if(typeof datos["activity-result"].answer.drags.drag === 'undefined'){

                }else{
                    respuestasAlumno = datos["activity-result"].answer.drags.drag;
                }
              }

             

            for (var i = 0; i < respuestasAlumno.length; i++) {
                //var idCajaresp = respuestasAlumno[i]._id-box; 
                var idCajaresp = respuestasAlumno[i]["_id-box"]; 
                
                var idElemntoresp = respuestasAlumno[i]["_id-element"];
                $('div#boxes div#'+ idCajaresp)[0].innerText = "";

                for (var j = 0; j < elm.length; j++) {
                    var idElementoAct = elm[j]._id;
                    if(idElemntoresp == idElementoAct){
                        $('div#boxes div#'+ idCajaresp)[0].innerText = elm[j].text;
                    }
                }  
            }

        }


        function calificarRespuesta(){
            respuestas=[];
            for ( var i=0; i<box.length; i++ ) {
                var textocaja = "";
                textocaja = $('div#boxes div#'+ box[i]._id)[0].innerText;
                console.log({ caja: box[i]._id, texto: textocaja});
                var rCalifica = false;
                for (var j=0; j<elm.length; j++){
                    var textoelm = "";
                    textoelm = elm[j].text;

                    if(textocaja == textoelm){
                        respuestas.push([box[i]._id,elm[j]._id]);
                        console.log({ caja: box[i]._id, elemento: elm[j]._id});
                        //Verifica si la respuesta es correcta
                        var boxDrop = box[i]._id;
                        var elmDrag = elm[j]._id;
   
                        if(boxDrop == elmDrag){
                            rCorrectas++; 
                            //$('div#boxes div#'+ elmDrag)[0].after('<i class="fa fa-check-circle"></i>'); 
                            //$('div#boxes div#'+ elmDrag).append($('<i class="fa fa-check-circle"></i>'));
                            rCalifica = true;
                        }
                        console.log({Correctas: rCorrectas});
                    }

                }//for j

                if(rCalifica){
                     $('div#boxes div#'+ elmDrag).append($('<i class="fa fa-check-circle"></i>'));
                }else{
                     $('div#boxes div#'+ elmDrag).append($('<i class="fa fa-times-circle"></i>'));
                }


            }// for i



        }