MyOverlay.prototype = new google.maps.OverlayView();
MyOverlay.prototype.onAdd = function() {  
  console.log('adding overlay');
  var div = document.createElement('DIV');  
  div.style.border = "none";
  div.style.borderWidth = "0px";
  div.style.position = "absolute";
  
  div.appendChild(this.canvas);
  this.div_ = div;
  
  var panes = this.getPanes();
  panes.overlayLayer.appendChild(div);
};

MyOverlay.prototype.clear = function() {
  this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
}

MyOverlay.prototype.onRemove = function() {
  console.log('removing overlay');
  this.div_.parentNode.removeChild(this.div_);
  this.div_ = null;
};

MyOverlay.prototype.draw = function() {
  console.log('drawing overlay');
  this.canvas.width = $('#map').width();
  this.canvas.height = $('#map').height();
  
  this.bounds = this.gmap.getBounds();

  var div = this.div_;
  var ne = this.getProjection().fromLatLngToDivPixel(this.bounds.getNorthEast());
  var sw = this.getProjection().fromLatLngToDivPixel(this.bounds.getSouthWest());
  div.style.top = ne.y + "px";
  div.style.left = sw.x + "px";
  console.log("ne corner = " + ne.y + ", " + sw.x);
  div.style.width = this.canvas.width + 'px';
  div.style.height = this.canvas.height + 'px';
};

function MyOverlay(gmap) {
  this.gmap = gmap;

  console.log('creating overlay');
  this.canvas = document.createElement('canvas');
  this.canvas.style.width = "100%";
  this.canvas.style.height = "100%";
  this.ctx = this.canvas.getContext("2d");
  this.setMap(this.gmap);
};

MyOverlay.prototype.colorize = function(x,y,x2) {  
  // initial check if x and y is outside the app  
  // -> resetting values  
  if(x+x2>this.canvas.width)  
      x=this.canvas.width-x2;
  if(x<0)
      x=0;
  if(y<0)
      y=0;
  if(y+x2>this.canvas.height)
      y=this.canvas.height-x2;

  var image = this.ctx.getImageData(x,y,x2,x2),  
      imageData = image.data,  
      length = imageData.length;  
  for(var i=3; i < length; i+=4){  
        
      var r = 0,  
          g = 0,  
          b = 0,  
          tmp = 0,  
          // [0] -> r, [1] -> g, [2] -> b, [3] -> alpha  
          alpha = imageData[i];  
            
      // coloring depending on the current alpha value  
      if(alpha<=255 && alpha >= 235){  
          tmp=255-alpha;  
          r=255-tmp;  
          g=tmp*12;  
      }else if(alpha<=234 && alpha >= 200){  
          tmp=234-alpha;  
          r=255-(tmp*8);  
          g=255;  
      }else if(alpha<= 199 && alpha >= 150){  
          tmp=199-alpha;  
          g=255;  
          b=tmp*5;  
      }else if(alpha<= 149 && alpha >= 100){  
          tmp=149-alpha;  
          g=255-(tmp*5);  
          b=255;  
      }else  
          b=255;  
      // we ve started with i=3  
      // set the new r, g and b values  
      imageData[i-3]=r;  
      imageData[i-2]=g;  
      imageData[i-1]=b;  
  }  
  // the rgb data manipulation didn't affect the ImageData object(defined on the top)  
  // after the manipulation process we have to set the manipulated data to the ImageData object  
  image.data = imageData;  
  this.ctx.putImageData(image,x,y);
};

MyOverlay.prototype.showHeat = function (twobj) {
  //console.log("adding heat at " + pos.x + "," + pos.y);
  //console.log(this.ctx);
  var ctx = this.ctx;
  
  var fcount = twobj.tweet.user.followers_count;
  var r2;
  if (fcount > 10000)
    r2 = 20;
  else if (fcount > 1000)
    r2 = 15;
  else if (fcount > 500)
    r2 = 12;
  else if (fcount > 100)
    r2 = 10;
  else
    r2 = 5;

  var r1 = r2/2;
  
  var x = twobj.lr.x;
  var y = twobj.lr.y;

  var rgr = ctx.createRadialGradient(x,y,r1,x,y,r2);  
  rgr.addColorStop(0, 'rgba(0,0,0,0.2)');    
  rgr.addColorStop(1, 'rgba(0,0,0,0)');  
  ctx.fillStyle = rgr;    
  ctx.fillRect(x-r2,y-r2,2*r2,2*r2);
  this.colorize(x-r2,y-r2,2*r2);
};