function ClusterCircle(latlng, opt_weight, opt_color, items, opt_opts) {
    opt_opts = opt_opts || {};
    this.center = latlng;
    this.weight_ = opt_weight || 1;
    this.color_ = opt_color || "#888888";
    this.items_ = items || 0;
    this.opt_opts_ = opt_opts || {};
    this.id = this.opt_opts_.id || 0;
}

ClusterCircle.prototype = new GOverlay();

//Crea el objeto DIV que representa este rect√°ngulo.
ClusterCircle.prototype.initialize = function(map) {
    // Crea el objeto DIV que representa nuestro rect√°ngulo.
    var div = document.createElement("div");
    var img = document.createElement("img");
   // var span = document.createElement("span")
    var bgimage, items;
    
    items = this.items_;
    
    //div.style.border = this.weight_ + "px solid " + this.color_;
    div.style.position = "absolute";
    div.className = "cluster_circle"; 
    div.style.cursor = "pointer";
    bgimage = 'cluster_circle';
    
    // cluster sizes depending on number of infopoints
    if (this.items_ < 5) {
        bgimage = "cluster_circle_30";
    } else if (this.items_ < 50) {
        bgimage = "cluster_circle_40";
    } else if (this.items_ < 125) {
    	bgimage = "cluster_circle_50";
    } else if (this.items_ < 250) {
    	bgimage = "cluster_circle_60";
    } else if (this.items_ < 600) {
    	bgimage = "cluster_circle_70";
    } else {
    	bgimage = "cluster_circle_80";
    }
    
    
    /*
    if (this.items_ < 26) {
        bgimage = "cluster-some";
        div.className = "cluster cluster-some"; 
    }
    else if (this.items_ < 100) {
        bgimage = "cluster-many";
        div.className = "cluster cluster-many";     
    }
    else if (this.items_ < 1000) {
        bgimage = "cluster-lots";
        div.className = "cluster cluster-lots";     
    }
    else {
        bgimage = "cluster-thousand";
        div.className = "cluster cluster-thousand";     
        items = "1000+";
    }
    */
    //incluimos la cantidad de items
    img.src = '/static/assets/' + bgimage + '.png';
    img.title= this.items_ + " infopoints in this area. Click to zoom in.";
  //  span.innerHTML = items;
    
    //div.innerHTML =  "<img src='/static/assets/" + bgimage + ".png' /><span>"+ items +"</span>";
    div.appendChild(img);
    //div.appendChild(span);
    // Nuestro rectángulo es plano respecto al mapa, por lo que lo añadimos al panel MAP_PANE, que se encuentra en el mismo índice z que el propio mapa (es decir, bajo las sombras de marcadores).
    map.getPane(G_MAP_MARKER_SHADOW_PANE).appendChild(div);
    
    this.map_ = map;
    this.div_ = div;
    this.img_ = img;
   // this.span = span;
    
    GEvent.bindDom(this.div_, 'mousedown', this,this.onClick_);

}

ClusterCircle.prototype.onClick_ = function(e) {
    this.map_.closeExtInfoWindow();
    this.map_.setCenter(this.center, this.map_.getZoom() + 2);  
    if(navigator.userAgent.toLowerCase().indexOf('msie') != -1 && document.all) {
            window.event.cancelBubble = true;
            window.event.returnValue = false;
          } else {
            e.preventDefault();
            e.stopPropagation();
          }
}
    

// Eliminamos el objeto DIV principal del panel del mapa.
ClusterCircle.prototype.remove = function() {
    this.div_.parentNode.removeChild(this.div_);
}

// Copia nuestros datos en un nuevo rect√°ngulo.
ClusterCircle.prototype.copy = function() {
    return new ClusterCircle(this.bounds_, this.weight_, this.color_, this.items_,
                    this.backgroundColor_, this.opacity_);
}

// Redibuja el rectángulo a partir de la proyección y el nivel de acercamiento de cada momento.
ClusterCircle.prototype.redraw = function(force) {
    // Sólo es necesario redibujar si el sistema de coordenadas ha cambiado.
    if (!force) return;
    
    // Calcula las coordenadas DIV de dos esquinas opuestas de los límites para obtener el tamaño y la posición de nuestro rectángulo.
    
    var c = this.map_.fromLatLngToDivPixel(this.center);
    
    
    
    // Ahora colocamos nuestro DIV a partir de las coordenadas DIV de nuestros límites.
    /*
    this.div_.style.width =  (Math.abs(c2.x - c1.x) - this.weight_ -2) + "px";
    this.div_.style.height = (Math.abs(c2.y - c1.y) - this.weight_ -2) + "px";
    this.div_.style.left = (Math.min(c2.x, c1.x) +1 ) +  "px";
    this.div_.style.top = (Math.min(c2.y, c1.y) +1 ) +  "px";
    var height = (Math.abs(c2.y - c1.y) - this.weight_ -2);
     */
    
/*    var size = 30 + Math.floor(Math.log(this.items_) * 15);
    
    if (size>99)
    	size=100;
*/
    var size = 0;
    // cluster sizes depending on number of infopoints (2)
    if (this.items_ < 5) {
        size=30;
    } else if (this.items_ < 50) {
        size=40;
    } else if (this.items_ < 125) {
    	size=50;
    } else if (this.items_ < 250) {
    	size=60;
    } else if (this.items_ < 600) {
    	size=70;
    } else {
    	size=80;
    }
    this.div_.style.width = size + "px";
    this.div_.style.height = size + "px";
    this.div_.style.left = (c.x - size / 2 ) +  "px";
    this.div_.style.top = (c.y - size /2 ) +  "px";
    this.img_.width = size;
    this.img_.height = size;    
    //this.img_.style.margin = (Math.floor((Math.abs(height - 62)) / 2)) +"px 0 0 0";
}