$(function(){

    // Tableau for the theme , title , type
var titre = ["Emploi", "Sante","Logement","Formation/Orientation","Droit Civils"];
var theme = ["aqua","pinkrose","default","grass","lavander"];
var ctype = ["Caqua","Cpinkrose" ,"Cdefault","Cgrass","lavander"];
var num = 0 ;
var categorie = 0 ;
var allbuton = "" ;
    //  Emploi
    var titreE = ["Pole Emploi","Linkedin"];
    var imgE = ["poleemploi.jpg","linkedin.jpg"];

   // loop to display the buttons
for (var i = 0 ; i < 5 ; i++) {
    var text = "<h2><span class="+ctype[num]+">"+titre[num]+"</span></h2>";
    var buton = "<button class="+theme[num]+">"+text+"</button>";
    allbuton = allbuton + buton ;
    num ++ ;
    }

    // display the buttons
$("#main").html(allbuton);


    // fonction for the event for all buttons
$(".aqua").click( function() {

categorie = 0 ;
 window.location = 'C:/Users/Ucivique2/Desktop/Apli/html/categorie.html';
});
$(".pinkrose").click(function() {
categorie = 1;
 window.location = 'C:/Users/Ucivique2/Desktop/Apli/html/categorie.html';
});
$(".default").click(function() {
categorie = 2 ;
 window.location = 'C:/Users/Ucivique2/Desktop/Apli/html/categorie.html';
});
$(".grass").click(function() {
categorie = 3 ;
 window.location = 'C:/Users/Ucivique2/Desktop/Apli/html/categorie.html';
});
$(".lavander").click(function() {
categorie = 4 ;
 window.location = 'C:/Users/Ucivique2/Desktop/Apli/html/categorie.html';
});
    num = categorie;
    var allbuton = "";
    for (var i = 0 ; i < 2 ; i++) {
    var lienE = "C:/Users/Ucivique2/Desktop/Apli/images/"+imgE[num]
    var text = "<h2><img class='img' src = "+lienE+"> <span class="+ctype[categorie]+">"+titreE[num]+"</span></h2>";
    var classee = theme[categorie]+num;
    var buton = "<button class="+classee+">"+text+"</button> ";
    allbuton = allbuton + buton ;
    num ++ ;
    }
    $("#categorie").html(allbuton);

});