var $link_txt = $('#text_figli p > a');
var $link_list = $('.list-projets a');

function ajax_txt($href,$this, this_id) {
  var $link_txt = $('#text_figli > p');
  var idlink_txt = $link_txt.attr("id");
  var search_id =$link_txt.find('#' + this_id);

  $.ajax({
     url : $href, // La ressource ciblée
     type : 'GET', // Le type de la requête HTTP
     dataType:'html',
     success: function(data) {
       $(data).find('.card').addClass(this_id).insertAfter(search_id);

       var $card = $('#text_figli .card .card-image > a');

       $card.click(function(e) {
         e.preventDefault();
         var $this = $(this);
         var $href = $this.attr("href");
         var this_id = $this.parent('.card-image').attr("id");

         if ($this.parent('.card-image').hasClass('views')) {
           $('#'+this_id+' #item').remove();
           $this.parent('.card-image').removeClass("views");
         }else{

           $.ajax({
             url : $href, // La ressource ciblée
             type : 'GET', // Le type de la requête HTTP
             dataType:'html',
            success: function(data) {
              $(data).find('#item').insertAfter($this);

              $(window).on('resize', function(x){
                var x = $this.offset();
                var x = $this.offset();
                var Wwindow = $('#text_figli').width();
                var Wcard = $this.parents('.card').width();
                var xcard = $this.offset().left;
                var marginR = Wwindow - (Wcard + xcard);

                console.log('x.left resize =',x.left);
                $this.parent('.card-image').find('#item').css('margin-left', -x.left+8);
                $this.parents('.card').css('margin-right', marginR);
              });

              var x = $this.offset();
              var Wwindow = $('#text_figli').width();
              var Wcard = $this.parents('.card').width();
              var xcard = $this.offset().left;
              var marginR = Wwindow - (Wcard + xcard);
              // si la distance entre l'image précédente et la bord droit du text est supérieur ou égale
              // a un card
              // alors soustrai xcard a la marg calculer de this.
              // sinon tu ne change rien
              console.log('marginR', marginR);

              // console.log('x.left',x.left);
              // console.log('marginR',marginR.right);
              $this.parent('.card-image').find('#item').css('margin-left', -x.left+8);
              $this.parents('.card').css('margin-right', marginR);
            }
           });
           $this.parent('.card-image').addClass('views');
         }

       });

     }
  });
}

function ajax_liste($href,$this, this_id) {
  var $link_txt = $('#text_figli > p');
  var idlink_txt = $link_txt.attr("id");
  var search_id =$link_txt.find('#' + this_id);

  console.log('$href',$href);
  var url = $href.split("/");
  var id = url[url.length - 2];
  var projetc_name = url[url.length - 1];
  console.log('projetc_name',projetc_name);

  $.ajax({
     url : '/projets/' + id, // La ressource ciblée
     type : 'GET', // Le type de la requête HTTP
     dataType:'html',
     success: function(data) {
       $(data).find('.card').addClass(this_id).insertAfter(search_id);
     },
     complete: function(){
       // Handle the complete event
       setTimeout( function(){
         $.ajax({
           url : '/projets/' + id + '/' + projetc_name, // La ressource ciblée
           type : 'GET', // Le type de la requête HTTP
           dataType:'html',
           success: function(data) {
             var $link_item = $('#text_figli > p > .card');
             var idlink_txt = $link_txt.attr("id");
             var search_id =$link_item.find('#' + projetc_name);
             console.log('search_id',id);
             $(data).find('#item').insertAfter(search_id);
             console.log('complete2');
           },
         })
       }, 2000);
     }
   });
}

function deploy() {
  $link_txt.click(function(e){
    e.preventDefault();
    var $this = $(this);
    var $href = $this.attr("href");
    var this_id = $this.attr("id");

    if ($this.hasClass('open')) {
      $('.card.'+this_id).remove();
      $this.removeClass("open");
    }else{
      ajax_txt($href, $this, this_id);
      $this.addClass('open');
    }
  });

  $link_list.click(function(e){
    e.preventDefault();
    var $this = $(this);
    var $href = $this.attr("href");
    var this_id = $this.attr("id");

    if ($this.hasClass('open')) {
      $('.card.'+this_id).remove();
      $this.removeClass("open");
    }else{
      ajax_liste($href, $this, this_id);
      $this.addClass('open');
    }
  });

}

jQuery(document).ready(function($){
  deploy();
});