var changeRange = function(){
            var oldRange = this.blob.range;
            var range = 0;
            var dist = 0;
            while( range < 10 || dist < 15 ){
                range = Math.random()*150;
                dist = Math.abs( oldRange - range );

            }
            var speed = 10;
            this.blob.changeTime = dist/speed;
            this.blob.setRange(range,this.changeRange);
        }



function Blob(radius,range,numPoints){
    this.name = "theBlob";
    
    this.radius = radius; // Blob radius
    this.xspeed = 0.005;
    this.yspeed = 0.008;	
    this.changeTime = 10;	    
    
    
    this._numPoints = numPoints;
    this._range = range;	// points moving range
    this._cx = radius; // x center blob
    this._cy = radius; // y center blob
    this._points = [];
    this._mids = [];
    this._oneSlice = Math.PI * 2 / this._numPoints;
    
    
}

//----------------------------------------------------------------------------------------------

Blob.prototype.start = function(){
    console.log("start");
    this.build();
    this.draw();
}

//----------------------------------------------------------------------------------------------

Blob.prototype.build = function(){
    console.log("build "  + this.x + " , " +this.y);
    
    this._cx = this.x + this.radius; // x center blob
    this._cy = this.y + this.radius; // y center blob
    
    for (var i = 0; i < this._numPoints; i++)
    {
        var angle = this._oneSlice * i;
        var posx = Math.cos(angle) * this.radius + this._cx;
        var posy = Math.sin(angle) * this.radius + this._cy;
        this._points[i] = {"x":posx, 
                          "y":posy, 
                          "centerX":posx,
                          "centerY":posy,
                          "range":this._range,
                          "angleX":Math.random()*Math.PI*2,
                          "angleY":Math.random() * Math.PI * 2
                         };
    }
    
    	
}

//----------------------------------------------------------------------------------------------
Blob.prototype.draw = function(){
    
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    
        for (var i = 0; i < this._numPoints-1; i++)
        {
            this._mids[i] = { "x":(this._points[i].x + this._points[i + 1].x) / 2, 
                             "y":(this._points[i].y + this._points[i + 1].y) / 2};
        }    
    
        this._mids[i] = {"x":(this._points[i].x + this._points[0].x) / 2, 
                         "y":(this._points[i].y + this._points[0].y) / 2};
    
        this.context.beginPath();      // Début du chemin
    
        this.context.moveTo(this._mids[0].x, this._mids[0].y);
        for (var j = 0; j < this._numPoints - 1; j++)
        {
            this.context.quadraticCurveTo(this._points[j+1].x, this._points[j+1].y, this._mids[j+1].x, this._mids[j+1].y);
        }
        this.context.quadraticCurveTo(this._points[0].x, this._points[0].y, this._mids[0].x, this._mids[0].y); 
    
    
        this.context.closePath();    // fin du chemin

    
    
        // Create gradient
        var grd = this.context.createRadialGradient(this._cx, this._cy, 0, this._cx, this._cy, this.radius *2);
        grd.addColorStop(0.000, 'rgba(255, 255, 255, 0.9)');
        grd.addColorStop(1.000, 'rgba(255, 255, 255, 0.6)');
      
      
        // Fill with gradient
        this.context.fillStyle = grd;
        this.context.fill();           


        for (var k = 0; k < this._numPoints ; k++)
        {
            this.updatePoint( this._points[k]  );
        }
    
        TweenLite.delayedCall(0.02,this.draw,null,this);

}

//----------------------------------------------------------------------------------------------

Blob.prototype.updatePoint = function(point) {
			var toX = point.centerX +  Math.sin(point.angleX) * point.range;
			var toY = point.centerY +  Math.sin(point.angleY) * point.range;
			point.x = toX;
			point.y = toY;
			point.angleX += this.xspeed;
			point.angleY += this.yspeed;
		}		 

//----------------------------------------------------------------------------------------------
Blob.prototype.rangeChangeComplete = function(callback) {
			callback.call(this.owner);
		}


//----------------------------------------------------------------------------------------------
//----------------------------------------------------------------------------------------------
//**** getter and setter  ******/

// range getter and setter
Object.defineProperty(Blob.prototype, "range", {
    
  // getter
  get: function() {return this._range },
    
  // setter
  set: function(value) { }
});

Blob.prototype.setRange = function(value,callBack) {
      var point;
      
     if( this.changeTime < 0.1 ) {
         this.changeTime = 0.1;
     }

    this._range = value;

    var nbPoints = this._points.length;
    for (var i=0; i< nbPoints; i++)
    {
        point =  this._points[i];
       TweenLite.to(point, this.changeTime, {   range:value,
                                                onComplete:this.rangeChangeComplete, 
                                                onCompleteParams:[callBack],
                                                onCompleteScope :this
                                            } );
    }		
}





var canvas = document.getElementById("mon_canvas");
var context = canvas.getContext("2d");        

this.blob = new Blob(100,75,30);
this.blob.canvas = canvas;
this.blob.context = context;
this.blob.owner = this;

this.blob.xspeed = 0.01;
this.blob.yspeed = 0.016;
this.blob.x = 100;
this.blob.y = 100;    


this.blob.start();  

this.changeRange();