$(document).ready(function () {
    var $rndNumber = Math.floor(Math.random() * 4 + 1);
    $("#wraper").addClass("acc-bg-" + $rndNumber);

    // shortcut de la classe
    var $onglet = $(".onglet");

    // bind click pour onglet qui ouvre et qui ferme 
    $onglet.bind("click", function () {

        // option d'animation
        var animateOptions = { duration: 200, queue: false };

        // rapetise tous les onglet et enleve une classe
        $onglet.animate({ width: '10px' }, animateOptions);
        $onglet.removeClass("ongletSelected");

        // shortcut de l'élément clicker
        var $that = $(this);

        // grossi l'onglet qui est clicker et ajoute une classe
        $that.animate({ width: '455px' }, animateOptions);
        $that.addClass("ongletSelected");

    });

    //sous menu qui apparais toujours au milieu de chaque li peu importe sa largeur
    /*var $menulist = $('#menu li');

    $menulist.mouseover(function () {
        var $largeur = $(this).width();
        var $smPosition = $largeur / 2 - 80;
        var $that = $(this);
        var $SM = $that.find(".sm");
        $SM.css("left", $smPosition); //.fadeIn(300).css("display","block");
        //$that.mouseout(function() {$SM.fadeOut(300);});;
    });*/

});