// This CircleMarker is a VML/SVG overlay that shows a circle on the map
// You can specify the border width, colour and opacity 
// as well as whether the circle is filled or not and the fill colour and opacity.
// The radius of the circle is given in kilometers.
//
// Only event so far is 'click' 
//
// Bill Chadwick 2007

function CircleMarker(point, radiusKm, lineColour, lineWidth, lineOpacity, fill, fillColour, fillOpacity, tooltip) {
  this.point_ = point;
  this.radiusKm_ = radiusKm;
  this.lineColour_ = lineColour || "#888888";
  this.lineWidth_ = lineWidth || 3;
  this.lineOpacity_ = lineOpacity || 0.5;
  this.fill_ = fill || false;
  this.fillColour_ = fillColour || "#444444";
  this.fillOpacity_ = fillOpacity || 0.3;
  this.tooltip_ = tooltip;
}
CircleMarker.prototype = new GOverlay();

CircleMarker.prototype.getPoint = function(){
    return this.point_;
}

CircleMarker.prototype.getRadiusKm = function(){
    return this.radiusKm_;
}

CircleMarker.prototype.setRadiusKm = function(radiusKm){
    this.radiusKm_ = radiusKm;
    this.redraw(false);
}

CircleMarker.prototype.clicked = function(){
    GEvent.trigger(this,"click");
}

// Creates the DIV representing this circle.
CircleMarker.prototype.initialize = function(map) {

  var div = document.createElement("DIV");

  // Circle is similar to a marker, so add to plane just below marker pane
  map.getPane(G_MAP_MARKER_SHADOW_PANE).appendChild(div);

  //save for later
  this.map_ = map;
  this.div_ = div;

  var cb = GEvent.callback(this,this.clicked);
  //set up invariant details
  if(navigator.userAgent.indexOf("MSIE") != -1){

      var c = document.createElement("v:oval");
      c.style.position = "absolute";
      c.strokeweight = this.lineWidth_+"px";
      c.strokecolor = this.lineColour_;
      var s = document.createElement("v:stroke");
      s.opacity = this.lineOpacity_;
      c.insertBefore(s, null);
      if(this.fill_){      
        c.filled = true;
        c.fillcolor = this.fillColour_;
        var f = document.createElement("v:fill");
        f.opacity = this.fillOpacity_;
        c.insertBefore(f, null);
        }
      else{
        c.filled = false;
      }
	  c.title = this.tooltip_;
	  c.style.cursor = "help";
	  this.div_.appendChild(c);
      this.clickH_ = GEvent.addDomListener(c,"click",function(event){cb()});
      this.vmlCircle_ = c;  

  }
  else{

	var svgNS = "http://www.w3.org/2000/svg";
	var svgRoot = document.createElementNS(svgNS, "svg");
	this.div_.appendChild(svgRoot);
	var svgNode = document.createElementNS(svgNS, "circle");
	svgNode.setAttribute("stroke",this.lineColour_);
	svgNode.setAttribute("stroke-opacity",this.lineOpacity_);
	svgNode.setAttribute("stroke-width",this.lineWidth_);
	if(this.fill_){
	    svgNode.setAttribute("fill",this.fillColour_);
	    svgNode.setAttribute("fill-opacity",this.fillOpacity_);
	}
	else{
	    svgNode.setAttribute("fill-opacity",0.0);
	}
    svgNode.setAttribute("title",this.tooltip_);
    svgNode.style.cursor = "help";
	svgRoot.appendChild(svgNode);
	this.svgRoot_ = svgRoot;
	this.svgNode_ = svgNode;
    this.clickH_ = GEvent.addDomListener(this.svgNode_,"click",function(event){cb()});

  }
}

// Remove the main DIV from the map pane
CircleMarker.prototype.remove = function() {
  GEvent.removeListener(this.clickH_);
  this.div_.parentNode.removeChild(this.div_);
}

// Copy our data to a new CircleMarker
CircleMarker.prototype.copy = function() {
  return new CircleMarker(
      this.point_, 
      this.radiusKm_, 
      this.lineColour_, 
      this.lineWidth_, 
      this.lineOpacity_, 
      this.fill_, 
      this.fillColour_, 
      this.fillOpacity_, 
      this.tooltip_ 
  );
}

// Redraw the arrow based on the current projection and zoom level
CircleMarker.prototype.redraw = function(force) {

  // Calculate the DIV coordinates of the centre point of our circle
  var p = this.map_.fromLatLngToDivPixel(this.point_);
  
  //get the radius
  var sz = this.map_.getSize();
  var bnds = this.map_.getBounds();
  var pxDiag = Math.sqrt((sz.width*sz.width) + (sz.height*sz.height));
  var mDiagKm = bnds.getNorthEast().distanceFrom(bnds.getSouthWest()) / 1000.0;
  var pxPerKm = pxDiag/mDiagKm;

  //get the bounding square to the middle of the line
  var w2 = this.lineWidth_/2.0;
  var rPx = Math.round((this.radiusKm_ * pxPerKm) - w2);
  

    
  if(navigator.userAgent.indexOf("MSIE") != -1){
  
    this.vmlCircle_.style.display="none";//while drawing or if 0
    if(rPx > 0){
		var hw = rPx * 2;//width and height
		var hw2 = Math.round(hw/2.0);
		var t = p.y - hw2;//top
		var l = p.x - hw2;//left
		this.vmlCircle_.style.width = hw;
		this.vmlCircle_.style.height = hw;
		this.vmlCircle_.style.left = l;
		this.vmlCircle_.style.top = t;
		this.vmlCircle_.style.display="";//finished
		}
  }
  else{
    var rdrh = this.svgRoot_.suspendRedraw(10000);
    this.svgRoot_.setAttribute("visibility","hidden");//if 0
    if(rPx > 0){
		var hw = (rPx + w2)* 2;//width and height
		var hw2 = Math.round(hw/2.0);
		var t = p.y - hw2;//top
		var l = p.x - hw2;//left
		this.svgRoot_.setAttribute("width", hw);
		this.svgRoot_.setAttribute("height", hw);
		this.svgRoot_.setAttribute("style", "position:absolute; top:"+ t + "px; left:" + l + "px");
		this.svgRoot_.setAttribute("visibility","visible");//finished
		this.svgNode_.setAttribute("r",rPx);
		this.svgNode_.setAttribute("cx",hw2);
		this.svgNode_.setAttribute("cy",hw2);
	}
    this.svgRoot_.unsuspendRedraw(rdrh);
    this.svgRoot_.forceRedraw();
  }

}