
//  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
//  data-title="Title of popup img" 
//  data-no-lock   (no lock images on drag exercises
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");
         var attrTitle = $(this).attr("data-title");

         // 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;


                 var title=popUp.find('h1');
                 if( typeof attrTitle  != typeof undefined ) { //  Set Img popup Title
                     title.text(attrTitle);
                 }
                 else{
                     title.html('&nbsp;'); //Empty by default 
                 }



                 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 lastPage (){
    pages = $('div[data-sg-id="item-page"]');
    // Iterate  and hide all pages
    pages.each(function(){
        $(this).css('display','none');
    })
    // Show last page
    $(pages[pages.length -1 ]).css('display','block');
    console.log('REMOVE IN PRODUCTION BEFORE PACK LO');
}

function initBtnGroup(){
        var btn = $('[btn-group]');
        $("[class*='cont-h']").css("display","none");
        $.each(btn,function(){
                console.log(this);
                $(this).click(function(){
                    var idBtnClick = $(this).attr('btn-id');
                    $(this).addClass("selected");
                    $('.cont-h'+ $(this).attr('btn-id')).show().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 init() {  
    
    initBtnGroup(); 

    divImgPopUp();

    initDragDrop('.drag', '.drop') ;
   
};


function validar2() {
  
    var obj = $('.input5');
    var op = "", val = "";

    var args = $('.input5');
    
    var d1,d2, successcount = 0;
    $.each(args, function(key, value) {      
        d1 = d2 = "";
        d1 = $(value).text().replace(/\s/g, "").toLowerCase();        

        d2 = $(value).attr('success').replace(/\s/g, "");

        //Validate
        if ( d1 === d2  ) {           
            $(value).css('background-color', '#5da066');
            successcount ++;
        }
        else {
            $(value).css('background-color', '#d6a5b1');
            $(value).val("");
        }
    });

    if (successcount === args.length) {
        $(btnAcive).click();
        sg.sound('success');
        $('#ok').click();
    }
    else {
        sg.sound('error');
         $('#wrong').click();
       
    }

    /*var array = new Array();
    var o = 0, data="";


    var d1,d2, successcount = 0, sc=0;
    $.each(obj, function(key, value) {

        d1 = d2 = "";
        d1 = $(value).text().replace(/\s/g, "").toLowerCase();       
        d2 = $(value).attr('success').replace(/\s/g, "");


        if ( d2.search(',') ) {
            array = d2.split(',');    
            console.log(array)    ;

            //Record
            $.each(array, function(key1, value1) {

                console.log(' en ciclo '+value1.search('i'));

                //Validate infinite
                if (value1.search('i') !== -1){

                    console.log('entra ');
                    data = "";
                    data = $(value).children('.drag').children('.texto1').attr('data');

                    console.log('data '+data);
                   
                    if (data === "i") {
                        console.log('data i');
                        sc ++;
                    }
                }

                 //Validate
                 console.log('d1 '+d1);
                 console.log('value1 '+value1);
                if ( d1 === value1  ) { 
                  sc ++;   
                }

                console.log('sc '+sc);


                
            });

            if (sc === array.length) {
                $(value).css('background-color', '#5da066');
                successcount ++;
                console.log('esta correcto');
            }
            else {
                $(value).css('background-color', '#d6a5b1');
                $(value).val("");
                console.log('esta incorrecto');   
            }
        }

        

       
    });

    if (successcount === obj.length) {
        $(btnAcive).click();
        sg.sound('success');
        $('#ok').click();
    }
    else {
        sg.sound('error');
         $('#wrong').click();
       
    }*/

   
}



function validar1() {
    var obj = $('.inputs').children('input');
    var op = "", val = "";

    $.each(obj, function (key, value) {       
        op = "", val = "";
        op = $(value).attr('op');
        val = $(value).val();


        if (val.length > 0){
            switch(parseInt(op)) {
                    case 1:
                        if (val > -3) { $(value).css('background-color', '#d9ed8a'); } else  { $(value).css('background-color', '#e28fa8'); }
                        break;
                    case 2:
                        if (val < -4) { $(value).css('background-color', '#d9ed8a'); } else  { $(value).css('background-color', '#e28fa8'); }
                        break;
                    case 3:
                        if ( (val >= 3) && (val < 8) ) { $(value).css('background-color', '#d9ed8a'); } else  { $(value).css('background-color', '#e28fa8'); }
                        break;
                    case 4:
                        if ( (val >= 5) && (val < 9) ) { $(value).css('background-color', '#d9ed8a'); } else  { $(value).css('background-color', '#e28fa8'); }
                        break;
                }
        }
        else {
            $(value).css('background-color', '#e28fa8');
        }
    });
}


function  validarClass(classtext, btnAcive) { 

    console.log('validar class ' +btnAcive);
  
    var args = $(classtext);
    
    var d1,d2, successcount = 0;
    $.each(args, function(key, value) {      
        d1 = d2 = "";
        d1 = $(value).val().replace(/\s/g, "").toLowerCase();        

        d2 = $(value).attr('success').replace(/\s/g, "");

        //Validate
        if ( d1 === d2  ) {           
            $(value).css('background-color', '#5da066');
            successcount ++;
        }
        else {
            $(value).css('background-color', '#d6a5b1');
            $(value).val("");
        }
    });

    if (successcount === args.length) {
        $(btnAcive).click();
        sg.sound('success');
        $('#ok').click();
    }
    else {
        sg.sound('error');
         $('#wrong').click();
       
    }
}