function drawLines() {

   // first row

   var userID = $('#0');
   var coord = userID.offset();

   var avatarWidth = userID.width();
   var avatarHeight = userID.height();

   var userCoordinate = userID.offset();
   var userX = userCoordinate.left + avatarWidth/2;
   var userY = userCoordinate.top + avatarHeight/2;

// second row

var userPartnersId = new Array();

$("#myCarousel .active .avatar").each(function() {
  userPartnersId.push(this.id);
});

var userPartnersQuantity = userPartnersId.length;
var partnersX = new Array;
var partnersY = new Array;

for (i = 0; i < userPartnersQuantity; i++) {
      var partnerID = userPartnersId[i];
      var partnersCoordinates = $('#' + partnerID).offset();
      var x = partnersCoordinates.left + avatarWidth/2;
      var y = partnersCoordinates.top + avatarHeight/2;
      partnersX.push(x)
      partnersY.push(y)
}

var canvas = document.getElementById('line');
var obCanvas = canvas.getContext('2d');
width = canvas.width = window.innerWidth,
height = canvas.height = window.innerHeight;

obCanvas.beginPath();
obCanvas.lineWidth = 1;
obCanvas.strokeStyle = '#fff';

for (i = 0; i < userPartnersQuantity; i++) {
      obCanvas.moveTo(userX, userY);
      obCanvas.lineTo(partnersX[i], partnersY[i]);
      obCanvas.stroke();
}

// third row

var subPartnersIds = new Array();

$("#myCarousel_2 .active .avatar").each(function() {
  subPartnersIds.push(this.id);
});

var subPartnersQuantity = subPartnersIds.length;
var subPartnersX = new Array;
var subPartnersY = new Array;

for (i = 0; i < subPartnersQuantity; i++) {
      var subPartnerID = subPartnersIds[i];
      var subPartnersCoordinates = $('#' + subPartnerID).offset();
      var subX = subPartnersCoordinates.left + avatarWidth/2;;
      var subY = subPartnersCoordinates.top + avatarHeight/2;;
      subPartnersX.push(subX);
      subPartnersY.push(subY);
      var subPartnerID = subPartnersIds[i].split('');
      var firstElementOfSubPartners = subPartnerID[0];
      var mySponsorCoordinates  = $('.active #' + firstElementOfSubPartners).offset()
      var mySponsorX = mySponsorCoordinates.left + avatarWidth/2;;
      var mySponsorY = mySponsorCoordinates.top + 106;
      obCanvas.moveTo(mySponsorX, mySponsorY);
      obCanvas.lineTo(subX, subY);
      obCanvas.stroke();

}


}

// avatar grid

function avatarGrid() {
    var qwe = $('#myCarousel .active .avatar').length;
    if (qwe == 1) {
        $(".avatar").closest(".structure_person").removeClass("col-md-4 col-lg-4 col-sm-4 col-xs-4").addClass('col-md-12 col-lg-12 col-sm-12 col-xs-12');
  } else if (qwe == 2) {
        $(".avatar").closest(".structure_person").removeClass("col-md-4 col-lg-4 col-sm-4 col-xs-4").addClass('col-md-6 col-lg-6 col-sm-6 col-xs-6');
  }
  else {
     $(".avatar").closest(".structure_person").removeClass("col-md-4 col-lg-4 col-sm-4 col-xs-4").addClass('col-md-4 col-lg-4 col-sm-4 col-xs-4');
}
}

window.onload = avatarGrid(), drawLines() ;

$('.carousel-control').click(function(){
    setTimeout(function(){
      avatarGrid();
},700);

    setTimeout(function(){
      drawLines();

},1500);
});


$('.dir').click(function(){
  $('canvas').css('display', 'none');
  setTimeout(function(){
      $('canvas').css('display', 'block');

},1500);
});

// test block