
    



// On récupère le json puis on affiche les profils contenant leurs datas spécifiques
$(function() {
//$('#lecture').on('click', function(){
  $(window).load(function(){
    $.getJSON('Js/baseDeDonnees.json',function(data){
        // Étant donné que bootstrap est basé sur 12 colonnes et que l'on souhaite afficher 3 profils (de 4 colonnes chacun) par ligne, on ne récupère d'abord que les données correspondant aux trois premiers profils (que l'on place dans une balise contenant l'id #zone (qui est elle même contenue dans un div .row))
        for (var i = 0; i <= 2; i++) {
            nombre = zapAleatoire();
            over = '';
            zap = '';
            if(nombre==1){
                over = 'onmouseOver="jouerAudio()"';
                zap = 'zapping2';
            }
        $('#zone').append(
          '<div class="prof col-lg-offset-1 col-lg-3"'+over+'>'+
            '<h3><span class="infosjaunes">' + data[i].Prenom + ', ' +  '</span>' + data[i].Metier + ' - ' + data[i].Ville + '</h3>' +
          '<div class="profilimg">' +
                        '<div class="recadrage">' +
                            '<img src="images/profils/' + data[i].Image + '" alt="Image de profil de ' + data[i].Prenom + '">' +
            '</div>' +
              '<div class="row infoprofil">' +
                    '<div class="traitvertical col-lg-6">' +
                        '<br /><p>' + data[i].Visite + ' visites de profil' + '</p>' +
              '</div>' + 
              '<div class="col-lg-6">' + 
              '<br /><p>CSP: ' + zoneSpan(data[i].Note) + '</p>' +
            '</div>' +
            '</div>' +
            '<div class="zaap '+zap+'">'+
                '<p class="infozap">Nous ne souhaitons pas que vous puissiez accéder à ce profil</p></div>' +
            '<p class="infoprofil"><i class="fa fa-frown-o"></i>Déception engendrée: <span class="infosjaunes">' + data[i].Deception + '</span></p>' +
            '<p class="infoprofil"><i class="fa fa-heart"></i>Motivation principale: <span class="infosjaunes">' + data[i].MotivationPrincipale + '</span></p>' +
            '<p class="infoprofil"><i class="fa fa-folder"></i>Catégorie: <span class="infosjaunes">' + data[i].Categorie + '</span></p>' +
            '<p class="infoprofil"><i class="fa fa-tag"></i>Label du produit: <span class="infosjaunes">' + data[i].LabelDuProduit + '</span></p>' +
            '<p class="infoprofil"><i class="fa fa-check"></i>Ressemblant à: <span class="infosjaunes">' + data[i].Ressemblance + '</span></p>' +
          '</div>' +
          '</div>');
        }
        // Étant donné que bootstrap est basé sur 12 colonnes et que l'on souhaite afficher 3 profils (de 4 colonnes chacun) par ligne, on récupère les données correspondant aux trois derniers profils (que l'on place dans une balise contenant l'id #zone2 (qui est elle même contenue dans un div .row)) 
        for (var i = 3; i <= 5; i++) {
        nombre = zapAleatoire();
            over = '';
            zap = '';
            if(nombre==1){
                over = 'onmouseOver="jouerAudio()"';
                zap = 'zapping2';
            }
        $('#zone2').append(
          '<div class="prof col-lg-offset-1 col-lg-3"'+over+'>'+
            '<h3><span class="infosjaunes">' + data[i].Prenom + ', ' +  '</span>' + data[i].Metier + ' - ' + data[i].Ville + '</h3>' +
          '<div class="profilimg">' +
                        '<div class="recadrage">' +
                            '<img src="images/profils/' + data[i].Image + '" alt="Image de profil de ' + data[i].Prenom + '">' +
            '</div>' +
              '<div class="row infoprofil">' +
                    '<div class="traitvertical col-lg-6">' +
                        '<br /><p>' + data[i].Visite + ' visites de profil' + '</p>' +
              '</div>' + 
              '<div class="col-lg-6">' + 
              '<br /><p>CSP: ' + zoneSpan(data[i].Note) + '</p>' +
            '</div>' +
            '</div>' +
            '<div class="zaap '+zap+'">'+
                '<p class="infozap">Nous ne souhaitons pas que vous puissiez accéder à ce profil</p></div>' +
            '<p class="infoprofil"><i class="fa fa-frown-o"></i>Déception engendrée: <span class="infosjaunes">' + data[i].Deception + '</span></p>' +
            '<p class="infoprofil"><i class="fa fa-heart"></i>Motivation principale: <span class="infosjaunes">' + data[i].MotivationPrincipale + '</span></p>' +
            '<p class="infoprofil"><i class="fa fa-folder"></i>Catégorie: <span class="infosjaunes">' + data[i].Categorie + '</span></p>' +
            '<p class="infoprofil"><i class="fa fa-tag"></i>Label du produit: <span class="infosjaunes">' + data[i].LabelDuProduit + '</span></p>' +
            '<p class="infoprofil"><i class="fa fa-check"></i>Ressemblant à: <span class="infosjaunes">' + data[i].Ressemblance + '</span></p>' +
          '</div>' +
          '</div>');
        }
        // Étant donné que l'on souhaitait faire apparaître 3 lignes avec 3 profils chacune on affiche à nouveau les trois premiers profils pour réaliser la dernière ligne (que l'on place dans une balise contenant l'id #zone3 (qui est elle même contenue dans un div .row))
        for (var i = 0; i <= 2; i++) {
        nombre = zapAleatoire();
        over = '';
        zap = '';
            if(nombre==1){
                over = 'onmouseOver="jouerAudio()"';
                zap = 'zapping2';
            }
        $('#zone3').append(
          '<div class="prof col-lg-offset-1 col-lg-3"'+over+'>'+
            '<h3><span class="infosjaunes">' + data[i].Prenom + ', ' +  '</span>' + data[i].Metier + ' - ' + data[i].Ville + '</h3>' +
          '<div class="profilimg">' +
                        '<div class="recadrage">' +
                            '<img src="images/profils/' + data[i].Image + '" alt="Image de profil de ' + data[i].Prenom + '">' +
            '</div>' +
              '<div class="row infoprofil">' +
                    '<div class="traitvertical col-lg-6">' +
                        '<br /><p>' + data[i].Visite + ' visites de profil' + '</p>' +
              '</div>' + 
              '<div class="col-lg-6">' + 
              '<br /><p>CSP: ' + zoneSpan(data[i].Note) + '</p>' +
            '</div>' +
            '</div>' +
            '<div class="zaap '+zap+'">'+
                '<p class="infozap">Nous ne souhaitons pas que vous puissiez accéder à ce profil</p></div>' +
            '<p class="infoprofil"><i class="fa fa-frown-o"></i>Déception engendrée: <span class="infosjaunes">' + data[i].Deception + '</span></p>' +
            '<p class="infoprofil"><i class="fa fa-heart"></i>Motivation principale: <span class="infosjaunes">' + data[i].MotivationPrincipale + '</span></p>' +
            '<p class="infoprofil"><i class="fa fa-folder"></i>Catégorie: <span class="infosjaunes">' + data[i].Categorie + '</span></p>' +
            '<p class="infoprofil"><i class="fa fa-tag"></i>Label du produit: <span class="infosjaunes">' + data[i].LabelDuProduit + '</span></p>' +
            '<p class="infoprofil"><i class="fa fa-check"></i>Ressemblant à: <span class="infosjaunes">' + data[i].Ressemblance + '</span></p>' +
          '</div>' +
          '</div>');
        }
    });
  });
});
