// The amount of segment points we want to create:
var amount = [1, 2, 3, 4, 5];
var height = 200;
var width = 500;
// Create a new path and style it:

  var path = new Path({
    fillColor: 'grey',
  });
  path.blendMode = 'multiply';
  path.closed = true;
  path.fullySelected = false;
  path._reseaux = "facebook";
  console.log('path',path);
  var path2 = new Path({
    fillColor: 'grey',
  });
  path2.blendMode = 'multiply';
  path2.closed = true;
  path2.fullySelected = false;
  path._reseaux = "twitter";

  var path3 = new Path({
    fillColor: 'grey',
  });
  path3.blendMode = 'multiply';
  path3.closed = true;
  path3.fullySelected = false;
  path._reseaux = "email";

for (var i = 0; i <= amount.length; i++) {
  var maxPoint = new Point(100, 100);
  var point = maxPoint;
    path.add(point);
}

for (var i = 0; i <= amount.length; i++) {
  var maxPoint = new Point(100, 100);
  var point = maxPoint;
    path2.add(point);
}

for (var i = 0; i <= amount.length; i++) {
  var maxPoint = new Point(100, 100);
  var point = maxPoint;
    path3.add(point);
}

// dimension blob
// position blog
  function onFrame(event) {

    for (var i = 0; i <= amount.length; i++) {
      var width = 350;
      var height = 200;
      movx = Math.cos(event.time * (0.02)) * 400;
      movy = Math.sin(event.time * (0.05)) * 200;
      var left = width + movx + 200;
      var top = height + movy;
      var segment = path.segments[i];
      var sinus = Math.sin(event.time * ( - 0.05) + i);
      var cos = Math.cos(event.time *  ( - 0.05) + i);
      var rotatex = Math.sin(event.time * Math.PI/180) + i;
      segment.point.x = cos * width + left + 100;
      segment.point.y = sinus * height + top + 100;
      path.rotate(rotatex);
      path.smooth();
    }

    for (var i = 0; i <= amount.length; i++) {
      var width2 = 50;
      var height2 = 60;
      movx = Math.sin(event.time * (-0.025)) * 400;
      movy = Math.sin(event.time * (0.06)) * 300;
      var left = width2 - movx + 200;
      var top = height2 - movy;
      var segment2 = path2.segments[i];
      var sinus = Math.sin(event.time * (0.5) + i);
      var cos = Math.cos(event.time *  (0.5) + i);
      var rotatex2 = Math.sin(event.time * Math.PI/270) + i;
      segment2.point.x = cos * width2 + left + 400;
      segment2.point.y = sinus * height2 + top + 300;
      path2.rotate(rotatex2);
      path2.smooth();
    }

    for (var i = 0; i <= amount.length; i++) {
      var width3 = 150;
      var height3 = 60;
      movx = Math.sin(event.time * (0.025)) * 400;
      movy = Math.sin(event.time * (-0.1)) * 300;
      var left = width3 - movx + 100;
      var top = height3 - movy;
      var segment = path3.segments[i];
      var sinus = Math.sin(event.time * (0.3) + i);
      var cos = Math.cos(event.time *  (0.3) + i);
      var rotatex3 = Math.sin(event.time * Math.PI/360) + i;

      segment.point.x = cos * width3 + left + 400;
      segment.point.y = sinus * height3 + top + 300;
      path3.rotate(rotatex3);
      path3.smooth();
    }
  }

function onMouseDown(event) {
  path.fillColor = 'blue';
  path2.fillColor = 'blue';

    path.fillColor = 'black';
    console.log('cc')

}