var posicion = 0;
var cantidadHtml = 60; 
var porcentaje = 100 / cantidadHtml;
/*

var menu = ['Inicio', 'Tabla de contenidos', 'Unidad 1. Espacios Métricos', 'Unidad 2. Convergencia', 'Unidad 3. Bases y Sub-Bases', 'Unidad 4. Propiedades Topológicas', 'Actividad de aprendizaje', 'Actividad 1', 'Actividad 1', 'Actividad 1', 'Actividad 1', 'Actividad 1', 'Actividad 1', 'Reflexión', 'Bibliografía', 'Créditos'];
var temas = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];
*/

var menu = ['Inicio', 'Tabla de contenidos', 'Etapa de autenticación y registro', 'Paso a paso para la validación', 'Instructivo cierre de aplicaciones', 'Desinstalación de aplicaciones', 'Preguntas de selección multiple con única respuesta', 'Actividad de aprendizaje', 'Reflexión', 'Bibliografía', 'Créditos'];
var temas = [1, 1, 1, 1, 1, 1, 1, 50, 1, 1, 1, 1];

/* preload */
/* var preload;*/
$(document).ready(function () {
	main();
});

function main() {
    $("#fecha").text((new Date).getFullYear() + ".");
    posicion = 1;
        
    
    
    
    $.ajaxSetup({
        dataType: 'text/html',
        beforeSend: function(xhr, status) {
            validarFlechas();
            if(isNaN(status.url.substring(11,12)))
                $('#spinner').hide();
            else
                $('#spinner').show();
        },
        complete: function() {
            precarga(imagesPreload[posicion - 1]);
            unlock();
        }
    });
    

    var altura = $('.menu').offset().top;

    $(window).on('scroll', function () {
        if ($(window).scrollTop() > altura) {
            $('.menu').addClass('menu-fixed');
        } else {
            $('.menu').removeClass('menu-fixed');
        }
    });
    cargarContenidos(posicion);
    creaMenu();
    establecerEventos();
    unlock();
}

function cargarContenidos(_pos, _animacion){
    posicion = _pos;
    animaContenido(_animacion);
   $("#contenidos").load("contenidos/"+posicion+".html");
    $(window).off("resize");
   $("#progreso").animate({
        width: (posicion * porcentaje)+"%"
   }, 500);
    
   
    
    $("#pgA").html(posicion);
    $("#pgT").html(cantidadHtml);
}


function establecerEventos(){

/****Eventos de teclado flecha adelante****/
    $("body").on("click","#flecha-adelante", function() {
        posicion++;
        if (posicion <= cantidadHtml)
            cargarContenidos(posicion, "fadeInRight");
        else
            posicion = cantidadHtml;
    });

    /*Eventos de teclado flecha atras */
    $("body").on("click","#flecha-atras",function(){
        posicion--;
        if(posicion >= 1)
            cargarContenidos(posicion, "fadeInLeft");
        else
            posicion = 1;
    });


    /* Eventos de teclado */
    document.onkeydown = function(e) {
        switch (e.keyCode) {
            case 37:
                posicion--;
                if(posicion >= 1)
                    cargarContenidos(posicion, "fadeInLeft");
                else
                    posicion = 1;
            break;

            case 39:
                posicion++;
                if (posicion <= cantidadHtml)
                    cargarContenidos(posicion, "fadeInRight");
                else
                    posicion = cantidadHtml;
            break;
        }
    };



    //Desplazamiento del menú
    $("body").on( "click", "#btn-menu", function(){
        $("nav").animate({
            right:"0%"
        });
    });

    $("body").on("click", ".item-menu", function(){
        posicion = parseInt($(this).data('theme'));
        $("nav").animate({
            right:"-110%"
        });

        validarFlechas();
        cargarContenidos(posicion, "fadeInLeft");
    });
    
    $("body").on( "click", ".cierra-menu", function(){
        $("nav").animate({
            right:"-110%"
        });
    });
    

    // Eventos de modal
    $("body").on("click", "#close-modal", function(){
        $('#modal').removeClass().addClass('zoomOut animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
            $(this).removeClass().hide();
        });
    });


    // Eventos de retro
    $("body").on("click", ".close-retro", function(){
        $('#retro').fadeOut();
    });


    // Evento Pop up
    $("body").on("click", ".contModal", function(){
        $(this).parent('.pop-up').fadeOut();
    });
}


function validarFlechas(){
    if (posicion <= cantidadHtml)
    {
        $("#flecha-adelante").fadeIn();
        if(posicion == cantidadHtml)
            $("#flecha-adelante").hide();
    }

    if(posicion >= 1){
        $("#flecha-atras").show();
        if(posicion == 1)
            $("#flecha-atras").hide();
    }
}

function creaMenu() {
    for(var i in menu){
        if(i == 0)
            $("nav ul").append('<li class="item-menu" data-theme="'+[fn_total_subtemas(i) + 1]+'">' + '<a href="#inicio">' + menu[i] + ' </a>' + '</li>');
        else
            $("nav ul").append('<li class="item-menu" data-theme="'+[fn_total_subtemas(i) + 1]+'">' + '<a href="#inicio">' + menu[i] + ' <span class="fa fa-lock"></span> </a>' + '</li>');
    }
}

function unlock() {
    $("nav ul li").each(function(i, e){
        var pos = fn_total_subtemas(i);
        
            $('a span',e).hide();
            $(e).on("click", function(){
                posicion = parseInt($(this).data('theme'));
                $("nav").animate({
                    right:"-110%"
                });

                validarFlechas();
                cargarContenidos(posicion, "fadeInLeft");
            });
            $('body #contenidos .item-menu').eq(i).children('p').children('span').hide();
            $('body #contenidos .item-menu').eq(i).on("click", function(){
                posicion = parseInt($(this).data('theme'));
                $("nav").animate({
                    right:"-110%"
                });

                validarFlechas();
                cargarContenidos(posicion, "fadeInLeft");
            });
        
    });

}

function openModal(_file){
    $("#content-modal").load("contenidos/modals/"+_file+".html");
    $('#modal').show().removeClass().addClass('zoomIn animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
        $(this).removeClass().show();
    });
}

function openPop(_id){
    $('#'+_id).fadeIn();
}

/* Animación de contenidos*/
function animaContenido(clase) {
    $('#contenidos').removeClass().addClass(clase + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
      $(this).removeClass();
    });
}


function fn_total_subtemas(ult_elem) {
    var total_ret = 0;
    $.each(temas, function(k, v) {
        if (k < ult_elem)
            total_ret += v;

    });
    return total_ret;
}