/**
 * A cluster icon
 *
 * @param {Cluster} cluster The cluster to be associated with.
 * @param {Object} styles An object that has style properties:
 *     'url': (string) The image url.
 *     'height': (number) The image height.
 *     'width': (number) The image width.
 *     'anchor': (Array) The anchor position of the label text.
 *     'textColor': (string) The text color.
 *     'textSize': (number) The text size.
 * @constructor
 * @extends google.maps.OverlayView
 * @ignore
 */
function ClusterIcon(cluster, center, cntDirectMailTotal, markerLabel, markerType, centerCluster) {
  this.cluster_ = cluster;
  this.center_ = center;
  this.centerCluster_ = centerCluster;
  this.map_ = cluster.getMap();
  this.markerType_ = markerType;
  this.div_ = null;
  this.markerLabel_ = markerLabel;
  this.cntDirectMailTotal_ = cntDirectMailTotal;
  this.visible_ = false;
  
  this.setMap(this.map_);
}

ClusterIcon.prototype = new google.maps.OverlayView();
  

ClusterIcon.prototype.triggerClusterClick = function() {
  displayClusterDetailsPopup(this.cluster_);
};

/**
 * Adding the cluster icon to the dom.
 * @ignore
 */
ClusterIcon.prototype.onAdd = function() {
  this.div_ = document.createElement('DIV');
  if (this.visible_) {
    var pos = this.getPosFromLatLng_(this.center_);
    this.div_.style.cssText = this.createCss(pos);
    this.div_.innerHTML = addCommas(this.cntDirectMailTotal_);
  }

  var panes = this.getPanes();
  panes.overlayImage.appendChild(this.div_);
  
  var that = this;
  google.maps.event.addDomListener(this.div_, 'click', function() {
    that.triggerClusterClick();
  });
};


/**
 * Returns the position to place the div dending on the latlng.
 *
 * @param {google.maps.LatLng} latlng The position in latlng.
 * @return {google.maps.Point} The position in pixels.
 * @private
 */
ClusterIcon.prototype.getPosFromLatLng_ = function(latlng) {
  var pos = this.getProjection().fromLatLngToDivPixel(latlng);
  if (this.centerCluster_) {
    pos.x -= parseInt(16, 10);
    pos.y -= parseInt(16, 10);
  } else {
    switch (this.markerType_) {
      case _constMarkerTypeZIP:
        pos.x -= parseInt(10, 10);
        pos.y -= parseInt(10, 10);
        break;
      case _constMarkerTypeZIP3:
        pos.x -= parseInt(13, 10);
        pos.y -= parseInt(13, 10);
        break;
      case _constMarkerTypeState:
        pos.x -= parseInt(13, 10);
        pos.y -= parseInt(13, 10);
        break;
    }
  }
  return pos;
};


/**
 * Draw the icon.
 * @ignore
 */
ClusterIcon.prototype.draw = function() {
  if (this.visible_) {
    var pos = this.getPosFromLatLng_(this.center_);
    this.div_.style.top = pos.y + 'px';
    this.div_.style.left = pos.x + 'px';
  }
};


/**
 * Hide the icon.
 */
ClusterIcon.prototype.hide = function() {
  if (this.div_) {
    this.div_.style.display = 'none';
  }
  this.visible_ = false;
};


/**
 * Position and show the icon.
 */
ClusterIcon.prototype.show = function() {
  if (this.div_) {
    var pos = this.getPosFromLatLng_(this.center_);
    this.div_.style.cssText = this.createCss(pos);
    this.div_.style.display = '';
  }
  this.visible_ = true;
};


/**
 * Remove the icon from the map
 */
ClusterIcon.prototype.remove = function() {
  this.setMap(null);
};


/**
 * Implementation of the onRemove interface.
 * @ignore
 */
ClusterIcon.prototype.onRemove = function() {
  if (this.div_ && this.div_.parentNode) {
    this.hide();
    this.div_.parentNode.removeChild(this.div_);
    this.div_ = null;
  }
};


/**
 * Create the css text based on the position of the icon.
 *
 * @param {google.maps.Point} pos The position.
 * @return {string} The css style text.
 */
ClusterIcon.prototype.createCss = function(pos) {
  var css;
  var spriteHeight;
  var spriteWidth;
  var fontColor;
  var fontSize;
  var paddingTop;
  var image;
  var imageLoaderCodeStart;
  var imageLoaderCodeEnd;
  if (document.all) {
    imageLoaderCodeStart = 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
    imageLoaderCodeEnd = '");';
  } else {
    imageLoaderCodeStart = 'background:url(';
    imageLoaderCodeEnd = ');';
  }
  /*if (this.centerCluster_) {
    spriteHeight = '32';
    spriteWidth = '32';
    fontColor = 'white';
    fontSize = '12';
    paddingTop = '10';
    image = '/images/mkrdot32.png';
  } else {
    fontColor = 'white';
    fontSize = '9';
    switch (this.markerType_) {
      case _constMarkerTypeZIP:
        spriteHeight = '20';
        spriteWidth = '20';
        image = '/images/mkrdot20.png';
        paddingTop = '4';
        break;
      case _constMarkerTypeZIP3:
        spriteHeight = '26';
        spriteWidth = '26';
        image = '/images/mkrdot26.png';
        paddingTop = '7';
        break;
      case _constMarkerTypeState:
        spriteHeight = '26';
        spriteWidth = '26';
        image = '/images/mkrdot26.png';
        paddingTop = '7';
        break;
    }
  }*/
    fontColor = 'white';
    fontSize = '9';
    if (this.cntDirectMailTotal_ < 100) {
        spriteHeight = '20';
        spriteWidth = '20';
        image = '/images/mkrdot20.png';
        paddingTop = '4';
    } else if (this.cntDirectMailTotal_ < 1000) {
        spriteHeight = '26';
        spriteWidth = '26';
        image = '/images/mkrdot26.png';
        paddingTop = '7';
    } else if (this.cntDirectMailTotal_ < 10000) {
        spriteHeight = '32';
        spriteWidth = '32';
        image = '/images/mkrdot32.png';
        paddingTop = '10';
    } else {
        spriteHeight = '38';
        spriteWidth = '38';
        image = '/images/mkrdot38.png';
        paddingTop = '13';
    }
  css = imageLoaderCodeStart + image + imageLoaderCodeEnd;
  css += 'background-repeat: no-repeat; height:' + spriteHeight + 'px; line-height:10px; padding-top:' + paddingTop + 'px; width:' + spriteWidth + 'px; text-align:center; ';
  css += 'cursor:pointer; top:' + pos.y + 'px; left:' + pos.x + 'px; ';
  css += 'color:' + fontColor + '; position:absolute; font-size:' + fontSize + 'px; font-family:Arial,sans-serif; font-weight:bold';

  return css;
};