/* A Bar is a simple overlay that outlines a lat/lng bounds on the
 * map. It has a border of the given weight and color and can optionally
 * have a semi-transparent background color.
 * @param latlng {GLatLng} Point to place bar at.
 * @param opts {Object Literal} Passes configuration options -
 *   weight, color, height, width, text, and offset.
 */
function mmOverlay(latlng, opts) {

  //avatar's properties	
  this.movementPolyline = {};
  this.IsMoving = false;
  this.timeout;
  this.isAvatar= opts.isAvatar || false;
  this.id      = opts.id || null;
  
  //overlay's properties
  this.latlng = latlng;
  this.div_ = null;

  //options
  if (!opts) opts = {};

  this.label   = opts.label || null; //clusterMarker label
  this.marId   = opts.marId || null; // marker options
  this.mapId   = opts.mapId || null; //marker options
  this.panId   = opts.panId || null; //marker options
  
  this.height_ = opts.height  || 32;
  this.width_  = opts.width   || 32;
  this.image_  = opts.icon ? '/images/' + opts.icon : null;
  this.offset  = (this.height_/2);
  this.imageOver_ = opts.imageOver || null;
  this.clickable  = opts.clickable || true;
  this.iconSize   = new GSize(this.width_, this.height_);
  this.iconAnchor = new GPoint(16, 16);
  this.iconsBounds = null;

}

/* mmOverlay extends GOverlay class from the Google Maps API
 */
mmOverlay.prototype = new GOverlay();

/* Creates the DIV representing this mmOverlay.
 * @param map {GMap2} Map that bar overlay is added to.
 */
mmOverlay.prototype.initialize = function(map) {
  var self = this;

  // Create the DIV representing our mmOverlay
  var div = document.createElement("div");
  div.style.position = "absolute";
  div.style.paddingLeft = "0px";
  div.style.cursor = 'pointer';
  
  //avatar = sprite / marker = img
  if(this.isAvatar) {	 
	  div.id = this.id ;
	  div.style.backgroundColor    = 'transparent';
	  div.style.backgroundImage    = 'url(/images/sprite-avatar.png)';
	  div.style.backgroundRepeat   = 'no-repeat',
	  div.style.backgroundPosition = '-65px 0px';
  }else{	  
	  var img = document.createElement("img");
	  img.src = self.image_;	  
	  img.style.width = self.width_ + "px";
	  img.style.height = self.height_ + "px";
	  div.appendChild(img);
  }
    
  //clusterMarkerlabel
  if(this.label){
    var d = document.createElement("div");
    d.style.position = "absolute";
    d.style.top  = "16px";
    d.style.left = "0px";
    d.style.marginTop= "-8px";
    d.style.width = "31px";
    d.style.height= "31px";
    d.style.fontWeight = "normal";
    d.style.fontSize = "12px";
    d.style.color= "rgb(0, 0, 0)";
    d.style.textAlign= "center";
    
    var t = document.createTextNode(this.label);
    d.appendChild(t);
    div.appendChild(d);
  }

  GEvent.addDomListener(div, "click", function(event) {
    GEvent.trigger(self, "click");
  });

  GEvent.addDomListener(div, "mouseover", function() {
    self.bringToFront_();
  });

  GEvent.addDomListener(div, "mouseout", function() {
    self.sendBack_();
  });

  map.getPane(G_MAP_MARKER_PANE).appendChild(div);

  this.map_ = map;
  this.div_ = div;  
};

/* Remove the main DIV from the map pane
 */
mmOverlay.prototype.remove = function() {
  this.div_.parentNode.removeChild(this.div_);
};

/* Copy our data to a new mmOverlay
 * @return {mmOverlay} Copy of bar
 */
mmOverlay.prototype.copy = function() {
  var opts = {};
  opts.color = this.color_;
  opts.height = this.height_;
  opts.width = this.width_;
  opts.image = this.image_;
  opts.imageOver = this.image_;
  return new mmOverlay(this.latlng, opts);
};

/* Redraw the mmOverlay based on the current projection and zoom level
 * @param force {boolean} Helps decide whether to redraw overlay
 */
mmOverlay.prototype.redraw = function(force) {

  // We only need to redraw if the coordinate system has changed
  if (!force) return;

  // Calculate the DIV coordinates of two opposite corners
  // of our bounds to get the size and position of our mmOverlay
  var divPixel = this.map_.fromLatLngToDivPixel(this.latlng);

  // Now position our DIV based on the DIV coordinates of our bounds
  this.div_.style.width  = this.width_ + "px";
  this.div_.style.left   = ((divPixel.x) - this.offset ) + "px";
  this.div_.style.height = (this.height_) + "px";
  this.div_.style.top    = ((divPixel.y - this.height_) + this.offset )  + "px";
  
};

mmOverlay.prototype.bringToFront_ = function() {
  var z = GOverlay.getZIndex(this.latlng.lat());
  this.div_.style.zIndex = 1e9;
};

mmOverlay.prototype.sendBack_ = function() {
  var z = GOverlay.getZIndex(this.latlng.lat());
  this.div_.style.zIndex = z;
};

mmOverlay.prototype.getPoint = function() {
  return this.latlng;
};

mmOverlay.prototype.getLatLng = function() {
  return this.latlng;
};

mmOverlay.prototype.setStyle = function(style) {
  for (s in style) {
    this.div_.style[s] = style[s];
  }
};

mmOverlay.prototype.setImage = function(image) {
  this.div_.style.background = 'url("' + image + '")';
};

mmOverlay.prototype.setSprite = function(sprite) {
  if(typeof sprite == "undefined") {sprite = {x: -65, y:0};}
  this.div_.style.backgroundPosition = sprite.x + 'px ' + sprite.y +'px' ;
};
	

/* for clusterMarker compatibility */
mmOverlay.prototype.getIcon = function(){
   return { iconSize: this.iconSize, iconAnchor: this.iconAnchor };
};

mmOverlay.prototype.setPoint = function(coordinates) {
  this.latlng = coordinates;
  this.redraw(true);
};


mmOverlay.prototype.move = function(startPoint,endPoint){
  if(this.IsMoving){  
    window.clearTimeout(this.timeout);
  }
    
  this.movementPolyline = new GPolyline([startPoint,endPoint]);
  this.animate(Math.round(this.movementPolyline.getLength() / 10));
};

mmOverlay.prototype.animate = function(distance){
  if(this.movementPolyline.getLength() > distance){
    this.IsMoving = true;
    var point=this.movementPolyline.GetPointAtDistance(distance);
    this.setPoint(point);
    var newdistance=distance+Math.round(this.movementPolyline.getLength()  / 10);
    var me=this;
    this.timeout = setTimeout(function(){me.animate(newdistance);}, 10);
  }
  else{	
    this.IsMoving = false;
  }
};

mmOverlay.prototype.highlight= function(){
  var icon = this.image_.split('/')[2].split('.')[0];
  icon = '/images/'+icon + 'h.png';
  this.setImage(icon);
  mmGeo.lastHighlighted = this;
};

mmOverlay.prototype.unHighlight= function(){
	this.setImage(this.image_);
	mmGeo.lastHighlighted = null;  
};

mmOverlay.prototype.getIconBounds = function(){
  var iconSize, iconAnchorPoint, iconAnchorPointOffset,
  iconBoundsPointSw, iconBoundsPointNe, iconBoundsLatLngSw,
  iconBoundsLatLngNe;
  iconSize=this.getIcon().iconSize;
  iconAnchorPoint=map.getCurrentMapType().getProjection().fromLatLngToPixel(this.getLatLng(),map.getZoom());
  iconAnchorPointOffset=this.getIcon().iconAnchor;
  iconBoundsPointSw=new GPoint(iconAnchorPoint.x-iconAnchorPointOffset.x, iconAnchorPoint.y-iconAnchorPointOffset.y+iconSize.height);
  iconBoundsPointNe=new GPoint(iconAnchorPoint.x-iconAnchorPointOffset.x+iconSize.width, iconAnchorPoint.y-iconAnchorPointOffset.y);
	iconBoundsLatLngSw=map.getCurrentMapType().getProjection().fromPixelToLatLng(iconBoundsPointSw,map.getZoom());
	iconBoundsLatLngNe=map.getCurrentMapType().getProjection().fromPixelToLatLng(iconBoundsPointNe,	map.getZoom());
  return new GLatLngBounds(iconBoundsLatLngSw, iconBoundsLatLngNe);
};

mmOverlay.prototype.setIconBounds = function(){
	this.iconBounds = this.getIconBounds();
};