function init () {
    divImgPopUp();
    initBtnGroup();
    limpiarColores();

    $('.fraction').each(function(key, value) {
        $this = $(this)
        var split = $this.html().split("|")
        if( split.length == 2 ){
            $this.html('<span class="top">'+split[0]+'</span><span class="bottom">'+split[1]+'</span>')
        }    
    });

}

function valida() {
    var cap;
    console.log("Si");
    for (var i = 1; i < 4; i++)
    {
        cap = $('#irbtn'+i+':checked').val();

        if (cap != undefined)
        {
            if (cap == 1) {
                $('#ok').trigger('click');
            }else{
                $('#erro').trigger('click');
            }
        }
    }
}

//  Requires:
//  Suffix _big for the popup img  and   PopUp and Button PopUp  with id = 100
//  <div data-img-zoom  data-src="img/image.png"> <div class="stack"> Apa </div> </div>
//  class="no-style" for no decoration  and  for no pop-up use attribute:  data-no-zoom, 
//  use attribute  data-no-lock for disable lock images  (useful in drag and drop)  
function divImgPopUp(){
    var divImages = $('div[data-img-zoom]');
    var btPopUp = $('[data-sg-id="btn-popup"][data-sg-key="100"]');
    var popUp = $('[data-sg-id="item-popup"][data-sg-key="100"]');
    var MAX_WIDTH_IMG = 900;
    var MAX_HEIGHT_IMG = 550;
    var contAspectRatio = MAX_WIDTH_IMG / MAX_HEIGHT_IMG;

     divImages.each(function(index){

         var divApa = $(this).find('div.stack');
         var imgSrc = $(this).attr("data-src");
         var attrZoom = $(this).attr("data-no-zoom");
         var attrLock = $(this).attr("data-no-lock");

         // Create an image in the container 

         var myImg = $("<img src='" + imgSrc + "' />").appendTo($(this));

         // Lock images 

         if( typeof divApa  !== typeof undefined && divApa !== false) {
             var heightStack = divApa.outerHeight();
             divApa.css({'position': 'absolute', 'height': heightStack,  'bottom': -heightStack })
         }

         if( typeof attrLock  == typeof undefined ) { // Lock images for default
             $(myImg).on('mousedown', function(){return false});
         }

         //End Create Img

         if( typeof attrZoom  === typeof undefined ){ 
             // POP UP 
             var myZoom = $("<div class='zoomImg'></div>").appendTo($(this));
             myZoom.on('click', function(){
                 var content=popUp.find('#imgContainer');
                 content.html(''); //Clear any prev content
                 var baseName =  imgSrc.substr(0, imgSrc.lastIndexOf('.')) || input;
                 var fileExt = imgSrc.split('.').pop();
                 var big = baseName+"_big."+fileExt;
                 var popUpImgContainer = $('<img id="imgContainer">'); 
                 var heightApa = 0;

                 popUpImgContainer.attr("src",big).load(function(){

                     var width = this.width; 
                     var height = this.height;


                     // Lock Img big 
                     $(this).on('mousedown', function(){return false});

                     if(width > MAX_WIDTH_IMG){
                         ratio = MAX_WIDTH_IMG / width;        // get ratio for scaling image
                         $(this).css("width", MAX_WIDTH_IMG);  // Set new width
                         $(this).css("height", height * ratio);   // Scale height based on ratio
                         height = height * ratio;                 // Reset height to match scaled image
                         width = width * ratio;                   // Reset width to match scaled image
                     }

                     // Check if current height is larger than max
                     if(height > MAX_HEIGHT_IMG){
                         ratio = MAX_HEIGHT_IMG / height; // get ratio for scaling image
                         $(this).css("height", MAX_HEIGHT_IMG);   // Set new height
                         $(this).css("width", width * ratio);    // Scale width based on ratio
                         width = width * ratio;    // Reset width to match scaled image
                     }

                     $(this).css({'display': 'block' , 'margin': 'auto'});

                     popUpImgContainer.appendTo(content);  // ADDS the magic!! 

                     btPopUp.trigger('click'); // Activate pop up 

                 }); // End Load

             });
         }
     });
} // Fin Img Pop Up 

function initBtnGroup(){
    var btn = $('[btn-group]');
    $("[class*='cont-h']").css("display","none");
    $.each(btn,function(){

        $(this).click(function(){
            var idBtnClick = $(this).attr('btn-id');
            $(this).addClass("selected");
            $('.cont-h'+ $(this).attr('btn-id')).effect('slide').css('display','block');sg.sound('success-low');
            var btnGrupo = $('[btn-group ='+$(this).attr('btn-group')+']');
            btnGrupo.each(function() {
                var idBtn = $(this).attr('btn-id');
                if(idBtn!=idBtnClick){
                    $('.cont-h'+idBtn).css("display","none");
                    $(this).removeClass("selected");
                }                       
            });
        });
    });
}

function disparador (n){

    $("[data-sg-key='"+n+"']").trigger('click');
}

function limpiarColores()
{
    /*DEBE INCLUIRSE EN EL INIT*/
    $("[class*='validar-']").click(function(){
    var classes = $(this).attr("class").split(" ");  
     $.each(classes, function(i){
        if (classes[i].substring(0,8)=='validar-') {
            $("."+classes[i]).animate({backgroundColor:"#ffffff"}, 300);
        };
     });
    });
}

function validar(ej){
    /*NO SE INCLUYE EN EL INIT, SE LLAMA DESDE UN onclick CON EL NUEMRO DEL GRUPO A VALIDAR*/
    var ok =[];

    switch(ej) {
        case 1:
        /*Cada case corresponde a un grupo, el case 1 corresponde al validar-1*/
        /*El data-div indica el valor correspondiente para ese campo de texto, la posicion debe coincidir con la posicion en el array*/
           ok = ["x", "x", "", "x", "", "x", ""];      
        break;
    }

    //Se llaman los elementos correspondientes al grupo a validar
    var porValidar = $(".validar-"+ej);
    //contador de errores iniciado en 0
    var errados = 0;
     $.each(porValidar, function(i){
        // se iteran los valores llamados con la clase validar-x
        //en cada caso se selecciona el dara-idv correspondiente
            var idv = $(this).data("idv");
        //tambien se seleccionan los posibles valores multiples para casa input, si esque los tiene
            var multi = $(this).data("multi");
        //se extrae el valor de cada uno
            var val = $(this).val();           
            if (multi !== undefined) {
        //si el valor en el data-multi fue asignado entonces la validacion se hace con los valores dentro del data-multi
            //se limpian espacios vacios y se pasa todo a minusculas
            var limpia = val.toLowerCase().trim();
            //si es un string se eliminan los acentos
                var limpiaValidada = $.isNumeric(limpia)? limpia : removeAccent(limpia);
                //se valida si el valor escrito en el imput está en los valores permitidos, en este caso los ingresados en el data-multi
                if ($.inArray(limpiaValidada, multi.split(","))<0) {
                    //si el valor no esta en el array de valores permitidos se recibe -1
                    //se limpia el campo de texto
                    $(this).val("");
                    //se reproduce el sonido de error
                    sg.sound("error");
                    //se cambia el color del campo errado por el color correspondiente
                    $(this).css('background-color','#F69');
                    //se añade 1 al contador de errores
                    errados++;
                }
                else
                {
                    //si el valor ingresado está en el array de valores permitidos se establece el color correspondiente al campo de texto
                    $(this).css('background-color','#96FAB7');
                };
            }else{ 
                //si el campo de texto en cuestion no tiene data-multi
                //se limpia el valor
                var limpia = val.toLowerCase().trim().replace(' ','');
                //si es texto se eliminan los acentos
                 var limpiaValidada = $.isNumeric(limpia)? limpia : removeAccent(limpia);
            if (ok[idv-1]!=limpiaValidada) 
                {
                 //si el valor actual no coincide con el valor correspondiente en el array de valors permitidos ubicado gracias al data-idv se ejecutan los errores
                    //se limpia el campo de texto
                    $(this).val("");
                    //se reproduce el sonido de error
                    sg.sound("error");
                    //se añaden los estilos correspondientes
                    $(this).css('background-color','#F69');
                    //se suma 1 al contador de errores
                    errados++;
                }
                else
                {
                    //si el valor coincide con el valor correspondiente en el array de valores permitidos 
                    //se añade el estilo correspondiente
                    $(this).css('background-color','#96FAB7');
                };
            };
        });
    //si el contador de errores es 0, osea no hubo ningun error
    //se reproduce el sonido correspondiente
     if (errados == 0) {
        sg.sound("success");
     };
}
function removeAccent(str){
    var map={'À':'A','Á':'A','Â':'A','Ã':'A','Ä':'A','Å':'A','Æ':'AE','Ç':'C','È':'E','É':'E','Ê':'E','Ë':'E','Ì':'I','Í':'I','Î':'I','Ï':'I','Ð':'D','Ñ':'N','Ò':'O','Ó':'O','Ô':'O','Õ':'O','Ö':'O','Ø':'O','Ù':'U','Ú':'U','Û':'U','Ü':'U','Ý':'Y','ß':'s','à':'a','á':'a','â':'a','ã':'a','ä':'a','å':'a','æ':'ae','ç':'c','è':'e','é':'e','ê':'e','ë':'e','ì':'i','í':'i','î':'i','ï':'i','ñ':'n','ò':'o','ó':'o','ô':'o','õ':'o','ö':'o','ø':'o','ù':'u','ú':'u','û':'u','ü':'u','ý':'y','ÿ':'y','Ā':'A','ā':'a','Ă':'A','ă':'a','Ą':'A','ą':'a','Ć':'C','ć':'c','Ĉ':'C','ĉ':'c','Ċ':'C','ċ':'c','Č':'C','č':'c','Ď':'D','ď':'d','Đ':'D','đ':'d','Ē':'E','ē':'e','Ĕ':'E','ĕ':'e','Ė':'E','ė':'e','Ę':'E','ę':'e','Ě':'E','ě':'e','Ĝ':'G','ĝ':'g','Ğ':'G','ğ':'g','Ġ':'G','ġ':'g','Ģ':'G','ģ':'g','Ĥ':'H','ĥ':'h','Ħ':'H','ħ':'h','Ĩ':'I','ĩ':'i','Ī':'I','ī':'i','Ĭ':'I','ĭ':'i','Į':'I','į':'i','İ':'I','ı':'i','Ĳ':'IJ','ĳ':'ij','Ĵ':'J','ĵ':'j','Ķ':'K','ķ':'k','Ĺ':'L','ĺ':'l','Ļ':'L','ļ':'l','Ľ':'L','ľ':'l','Ŀ':'L','ŀ':'l','Ł':'L','ł':'l','Ń':'N','ń':'n','Ņ':'N','ņ':'n','Ň':'N','ň':'n','ŉ':'n','Ō':'O','ō':'o','Ŏ':'O','ŏ':'o','Ő':'O','ő':'o','Œ':'OE','œ':'oe','Ŕ':'R','ŕ':'r','Ŗ':'R','ŗ':'r','Ř':'R','ř':'r','Ś':'S','ś':'s','Ŝ':'S','ŝ':'s','Ş':'S','ş':'s','Š':'S','š':'s','Ţ':'T','ţ':'t','Ť':'T','ť':'t','Ŧ':'T','ŧ':'t','Ũ':'U','ũ':'u','Ū':'U','ū':'u','Ŭ':'U','ŭ':'u','Ů':'U','ů':'u','Ű':'U','ű':'u','Ų':'U','ų':'u','Ŵ':'W','ŵ':'w','Ŷ':'Y','ŷ':'y','Ÿ':'Y','Ź':'Z','ź':'z','Ż':'Z','ż':'z','Ž':'Z','ž':'z','ſ':'s','ƒ':'f','Ơ':'O','ơ':'o','Ư':'U','ư':'u','Ǎ':'A','ǎ':'a','Ǐ':'I','ǐ':'i','Ǒ':'O','ǒ':'o','Ǔ':'U','ǔ':'u','Ǖ':'U','ǖ':'u','Ǘ':'U','ǘ':'u','Ǚ':'U','ǚ':'u','Ǜ':'U','ǜ':'u','Ǻ':'A','ǻ':'a','Ǽ':'AE','ǽ':'ae','Ǿ':'O','ǿ':'o'};
    var res='';
    for (var i=0;i<str.length;i++){c=str.charAt(i);res+=map[c]||c;}
    return res; 
}

function Valorar(n,x){

    var cap;
    var repetirValidacion = 0;
    var correcto = x;
    var validador = 0;  
    var definidor = 0;
    var cont;
    var hasta;
    var cond;

    if (n == 1)
    {
        cont = 1;
        hasta = 5;
    }
    if (n == 2) 
    {
        cont = 5;
        hasta = 9;
    }
    if (n == 3) 
    {
        cont = 9;
        hasta = 12;
    }

        for (var i = cont; i < hasta; i++)
        {
            
            cap = $('#chk'+i+':checked').val();
            console.log(cap);
            if (cap === undefined)
            {
                repetirValidacion++;
            }
            else
            {
                if (cap == 1)
                {
                    validador++;
                }
                else
                {
                    definidor++;   
                }
            }
        }
        console.log(repetirValidacion);
        var condicionesTotales = 4;
        if (n == 3){
            condicionesTotales = 3;
        }
        if (repetirValidacion == condicionesTotales)
        {
            $("div[data-sg-key='97']").trigger("click"); 
        }
        else
        {
            if (validador == correcto && definidor == 0)
            {
                $("div[data-sg-key='99']").trigger("click"); 
            }
            else
            {
                $("div[data-sg-key='98']").trigger("click"); 
            }   
        }

}


