/**
 *  Script qui gère la partie compétence du site.
 *  @author ZEZUKA Clément  <clemzezuk@gmail.com>
 */
$(function(){
    
    /**
     *  La variable 'index' est un entier, permet de connaitre l'index numérique du paragraphe en cours de lecture.
     *  @default    0
     */
    var index = 0;

    
    /**
     *	La variable 'test' est un booléen, permet de contingenter l'utilisation des boutons suivant et précédent.
     *	@default	false
     */
    var test = false;
    
    //  Méthode appelée au clique du bouton '>'.
    $('#next_competences').click(function() {
        var len = $("#container_skills > .skills_text").length;
        if (index < len-1){
            if ( !test ){
                test = !test;
                index++;
                navigateRight(index);
                blend(index);
            }
        }
    });
    
    //  Méthode appelée au clique du bouton '<'.
    $('#prev_competences').click(function() {
        var len = $("#container_skills > .skills_text").length;
        if (index > 0){
            if ( !test ){
                test = !test;
                index--;
                navigateLeft(index);
                blend(index);
            }
        }
    });
    
    //  Méthode appelée lorsque la touche 'flèche gauche' ou 'flèche droite' du clavier est enfoncé.
    $(window).keydown(function(event) {
        var len = $('#view_project img').length;
        //  Flèche droite
        if (event.keyCode == '39') {								
            if (index < len-1) {
                if ( !test ) {
                    test = !test;
                    index++;	
                    navigateRight(index);
                    blend(index);
                }
            }
        }
        // Flèche gauche
        if (event.keyCode == '37') {								
            if (index > 0) {
                if ( !test ) {
                    test = !test;
                    index--;
                    navigateLeft(index);
                    blend(index);
                }
            }
        }
    });
    
    //  Méthode appelée au clique du bouton 'X'.
    $('#close_competences').click(function() {
        index = 0;
        $('#container_skills').fadeOut(200).css({"left":200});
        $('#title_level').fadeOut(200);
        $("#rond_etapes").fadeOut(200);
        $('#lines_skills').fadeOut(200);
        $('#prev_competences').stop().css({cursor:'default'}).animate({opacity:.1},100,"easeOutExpo").fadeOut(200);
        $('#next_competences').stop().css({cursor:'pointer'}).animate({opacity:1},100,"easeOutExpo").fadeOut(200);
        $('#close_competences').fadeOut(200);
        $('#view_competences').delay(1000).stop().animate({height:"0%"},1000,"easeOutExpo");
    });
    
    /**
     *  Décale le conteneur des paragraphes de l'espace d'un paragraphe vers la gauche.
     *  @param  index
     */
    function navigateLeft(index) {
        $("#rond_etapes").empty().append(index+1);
        $('#container_skills').stop().animate({ "left": "+=300px" }, 800, "easeOutExpo" );
        if ( index == 0 ) $('#prev_competences').stop().css({ cursor: 'default' }).animate({ opacity: .1 }, 1000, "easeOutExpo" );
        $('#next_competences').stop().css({ cursor: 'pointer' }).animate({ opacity: 1 }, 1000, "easeOutExpo", function (){ test = !test} );	
    }
    
    /**
     *  Décale le conteneur des paragraphes de l'espace d'un paragraphe vers la droite.
     *  @param  index
     */
    function navigateRight(index) {
        var len = $('#container_skills > .skills_text').length;
        $("#rond_etapes").empty().append(index+1);
        $('#container_skills').stop().animate({ "left": "-=300px" }, 800, "easeOutExpo" );
        if ( index == len-1 )$('#next_competences').stop().css({ cursor: 'default' }).animate({ opacity: .1 }, 1000, "easeOutExpo" );
        $('#prev_competences').stop().css({ cursor: 'pointer' }).animate({ opacity: 1 }, 1000, "easeOutExpo", function (){ test = !test} );
    }
    
    /**
    *   Gère l'opacité des paragraphes en fonction du placement du parent.
    */
    function blend(index) {
        $('#container_skills > .skills_text').each(function(i){
            if (i < index) {
                $(this).animate({opacity:0});
            }
            if (i == index || i == index+1) {
                $(this).animate({opacity:1});
            }
            if (i > index+1) {
                $(this).animate({opacity:.1});
            }
        });
    }
    
});