

function init(){
		initDragDrop('.drag','.drop');
		divImgPopUp();
		initBtnGroup();
		var contadorPareja= 0; //cuenta las parejas selccionadas
		var pareja1 = 0; //Variable que guarda el id de la primera pareja selccionada
		var contadorCorrecto = 0; //contador de aciertos
		$('.on').click(function(){
				if(contadorPareja <= 1 && $(this).hasClass('on')){
						cambiarImg(this);//Cambia la imágen
						contadorPareja += 1;//Se incrementa la variable
						if(contadorPareja === 2)
						{	
							var pareja2 = $(this).attr('pareja'); //variable que guarda el id de la pareja 2
							if(pareja1===pareja2)//Si la pareja 1 y la pareja 2 son iguales
							{
								sg.sound('success');
								contadorPareja = 0;//se reinician las variables
								pareja1 = 0;//se reinician las variables
								$('.off_h').each(function(index, element) {$(this).removeClass('off_h');}); //Elimina la clase de las parejas encontradas para que no sigan teniendo interactividad 	
								contadorCorrecto += 1; //Se incrementa el contador de correctos
								if(contadorCorrecto == 9){datopop();}//Popup que se despliega cuando todas las parejas se encuentran
							}
							else
							{
								sg.sound('error');
								contadorPareja = 0;
								pareja1 = 0;
								$('.off_h').each(function(index, element) {imgOriginal(this);});//Como las parejas seleccionaas no son iguales vuelven a su estado normal
							}
						}
					    pareja1 = $(this).attr('pareja');//Variable que guarda la primera pareja seleccionada
					}
			});
		
		$('.fx').each(function(index, element) {
				   var $this = $(this);
		setTimeout(function(){
		$this.fadeIn();
		},index*1500);
			   });
	require(["jquery-selectric"], function(){
			$('select').selectric({
				});
		});
	var selector = $('select');
			$.each(selector,function(i,e){
				$(this).change(function(){
						var selected = $(this).val();
						if(selected==="1")
						{
							var label = $(this).parent().parent().find(".label");
							label.css("color","green");
							sg.sound('success-low');
						}
						else
						{
							var label = $(this).parent().parent().find(".label");
							label.css("color","red");
							sg.sound('error');
						}
					});
			});	
			limpiarColores();	
}

function limpiarColores()
{
    $("[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){
var ok =[];

switch(ej) {
    case 1:
       ok = ["a"];      
        break;
	case 2:
       ok = ["demanda","oferta","1","6"];      
        break;
	case 3:
       ok = ["b"];      
        break;
	case 4:
       ok = ["c"];      
        break;
	case 5:
       ok = ["3,4521x10","7","9,24581245x10","5","1,53251x10","5","4,218357x10","2"];      
        break;
	case 6:
       ok = ["1"];      
        break;
	case 7:
       ok = ["7","4","4","9","2,568x10","-7","2,4x10","-4","8,03x10","-4","3,25x10","-9"];      
        break;
	case 8:
       ok = ["cuadrado","termino","terminos","comunes","termino","terminos","comunes"];      
        break;	
	case 9:
       ok = ["x","2","+","9x","+","14","m","2","+","7m","+","12","a","2","+","11a","+","30"];      
        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);
			 
			 console.log("se esperaba : "+ok[idv-1]+" - se recibio: "+limpiaValidada);
        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 initBtnGroup(){
		var btn = $('[btn-group]');
		var ver = $('.ver');
		$("[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')).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 cambiarImg(id){
		var imgId = $(id).attr('src');  //representa la dirección de la imágen
		var baseName =  imgId.substr(0, imgId.lastIndexOf('.')) || input;   //recordta lo que esta despues del . en la direccion
		if($(id).hasClass('on'))
		{
			$(id).attr('src',baseName+'_clic.png');
			$(id).removeClass('on animated flipInY');$(id).addClass('off_h animated rubberBand');
		}//cambia la imagen agregandole efecto de animate.css
	}
	
function imgOriginal(id){
		var imgId = $(id).attr('src');  //representa la dirección de la imágen
		var baseName =  imgId.substr(0, imgId.lastIndexOf('.')) || input;   //recordta lo que esta despues del . en la direccion
		var clearName = baseName.replace('_clic','');
				$(id).attr('src',clearName+'.png');
				$(id).removeClass('off_h animated rubberBand');$(id).addClass('on animated flipInY');
	}	

function contador(id){
		$(id).css({'width':'50px','margin':'10px'});
		sg.sound('success');
	}
function contadorFix(id){
		$(id).css({'width':'80px','margin':'10px'});
		sg.sound('success');
	}	
	
function dragF(event, ui){

    // Apply  SG transform scale !!!!!!!
    var offset = ui.position;
    var xPos = offset.left/sg.scaleX;
    var yPos = offset.top/sg.scaleY ;
    ui.position = { 'top': yPos, 'left': xPos};

}

function acceptF(ui){
    var dropKey = $(this).attr('ddKey');
    var dragKey =ui.attr('ddKey');

    if( dropKey == dragKey )
    {
        return true;
    }

    return false;
}

function dropF(event, ui){
    var CUSTOM_CLONE = true; // bool
    var dropKey = $(this).attr('ddkey');
    var dragKey= $(ui.draggable).attr('ddkey');

    if(dragKey == dropKey) {

        ui.draggable.addClass( 'dropped' );      // Css  
        ui.draggable.data('dropkey',dropKey); // Associate the container
        $(this).droppable('disable');                       // Disable the drop
        ui.draggable.draggable('option', 'disabled', true); // Disable the drag
        ui.draggable.css({'cursor':'default','font-size':'24px','color':'green'});  //Reset mouse cursor
        if(CUSTOM_CLONE){
            var clone = $(ui.draggable).clone();
			contDrop($(ui.draggable,clone));
            $(clone).addClass('cloned');
            $(clone).css('position', 'relative');
            $(this).append(clone);
            snapToMiddle($(clone), $(this));
            ui.draggable.find('img').addClass('grayFilterEnabled');
        }else{
            $(this).append(ui.draggable.css('position','relative'));
            snapToMiddle($(ui.draggable), $(this));
        }


        sg.sound('success-low');
    }
    else
    { 
        sg.sound('error');
    }
}

function contDrop(id,clone){
		$(clone).css({'opacity':'1'});
		$(id).css({'opacity':'0.5'});
	}

function initDragDrop(selectorDrag, selectorDrop) {
    console.log('Init');

    $(selectorDrag).draggable({
        //refreshPositions: true,
        drag: dragF,
        helper: 'clone',
        revertDuration: 400,

        containment: '#contenido',

        // snap: ".drop",   //Adhiere a borde de drop
        snapMode: "fit",
    });

    // Mouse drag cursor
    $(selectorDrag).css('cursor','pointer');

    $(selectorDrop).droppable({
        drop: dropF,
        //accept: acceptF,
        activeClass: 'boxshadow' // BOX SHADOW  CSS STYLE NEEDED 
    });

    // Keeep original drags position for reset
    preserveDragsPosition(selectorDrag);

}

// Funciones de apoyo 

function snapToMiddle(dragObj, target){

    var INCLUDE_MARGIN  = false;  // Include or ignore margin to calculate center 

    var topMove = (target.outerHeight(  INCLUDE_MARGIN  ) - dragObj.outerHeight(  INCLUDE_MARGIN  )) / 2;
    var leftMove= (target.outerWidth(  INCLUDE_MARGIN  ) - dragObj.outerWidth( INCLUDE_MARGIN )) / 2;

    dragObj.animate({top:topMove,left:leftMove},{duration:10,easing:'easeOutBack'});
}

function pause(idVideo){ 
    $('#'+idVideo).trigger('pause'); 
} 

//Preserve position to reset
function preserveDragsPosition(selectorDrag){

    var allDrags = $(selectorDrag);
    var offset;

    allDrags.each(function(){

        offset=$(this).position();

        $(this).data({
            'originalLeft': offset.left/sg.scaleX,
            'origionalTop': offset.top/sg.scaleY,
            'originalPosition': $(this).css('position'),
            'parentDiv': $(this).parent()

        });
    });

}

function resetDragDrop(selectorDrag, selectorDrop){

    var allDrags = $(selectorDrag).not('.cloned');
    var allDrops = $(selectorDrop);
    var dragClones = $(selectorDrag +'.cloned');

    dragClones.remove();

    // Restore postion of all drags needs same container TODO goback to previous parent -> DONE !!!!
    allDrags.each(function(){
        //$(this).appendTo($(this).data('parent')),
        $(this).appendTo($(this).data('parentDiv'));
        $(this).css({
            'left': $(this).data('originalLeft'),
            'top': $(this).data('origionalTop'),
            'position': $(this).data('originalPosition')
        });

        $(this).data('dropkey','');                     // Clear previuous data
        $(this).draggable('option', 'disabled', false); // Enable Drag
    });

    allDrops.droppable('enable');           // Enable drops
    allDrags.css('cursor','pointer');       // Restore Mouse cursor
    allDrags.find('img').removeClass('grayFilterEnabled');

}


function contador(id){
		var drag = $(id);
		drag.css({'font-size':'24px'});
	}	

