// This BDCCCircle 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.
//
// For a gradiant fill, both fillColor and fillOpacity may be an array of length 2
//
// Events are 'click','mouseover' and 'mouseout' 
//
// If targeting MSIE remember to include the VML header material (see GMaps docs)
//
// Bill Chadwick 2007

var BDCCCircleId;

var BDCCCircleSvgRoot;

function BDCCCircle(point, radiusKm, strokeColor, strokeWeight, strokeOpacity, fill, fillColor, fillOpacity, tooltip) {

    this.point_ = point;
    this.radiusKm_ = radiusKm;
    this.lineColour_ = strokeColor || "#888888";
    this.lineWidth_ = strokeWeight || 3;
    this.lineOpacity_ = strokeOpacity || 0.5;
    this.fill_ = fill || false;

    this.fillColour_ = fillColor || "#444444"; //save original object for copy
    if (this.fillColour_.constructor.toString().indexOf("Array") == -1) {
        this.fillColour1_ = this.fillColour_;
        this.fillColour2_ = null;
    }
    else if (this.fillColour_.length == 2) {
        this.fillColour1_ = this.fillColour_[0] || "#222222";
        this.fillColour2_ = this.fillColour_[1] || "#888888";
    }
    else {
        this.fillColour1_ = this.fillColour_[0] || "#444444";
        this.fillColour2_ = null;
    }

    this.fillOpacity_ = fillOpacity || 0.3; //save orgiginal for copy
    if (this.fillOpacity_.constructor.toString().indexOf("Array") == -1) {
        this.fillOpacity1_ = this.fillOpacity_;
        this.fillOpacity2_ = null;
    }
    else if (this.fillOpacity_.length == 2) {
        this.fillOpacity1_ = this.fillOpacity_[0] || 0.1;
        this.fillOpacity2_ = this.fillOpacity_[1] || 0.9;
    }
    else {
        this.fillOpacity1_ = this.fillOpacity_[0] || 0.5;
        this.fillOpacity2_ = null;
    }

    this.tooltip_ = tooltip;
    this.usesVml_ = (navigator.userAgent.indexOf("MSIE") != -1);

    if (BDCCCircleId == null)
        BDCCCircleId = 0;
    else
        BDCCCircleId += 1;

    this.gradId_ = "BDCCCircleGradient" + BDCCCircleId.toString(); //for SVG gradient

}
BDCCCircle.prototype = new GOverlay();

//Get/Set methods

//Point or center
BDCCCircle.prototype.getPoint = function() {
    return this.point_;
}
BDCCCircle.prototype.setPoint = function(point) {
    this.point_ = point;
    this.redraw(false);
}

// Radius
BDCCCircle.prototype.getRadiusKm = function() {
    return this.radiusKm_;
}
BDCCCircle.prototype.setRadiusKm = function(radiusKm) {
    this.radiusKm_ = radiusKm;
    this.redraw(false);
}

//Stroke (line) colour
BDCCCircle.prototype.setStrokeColor = function(color) {
    this.lineColour_ = color;
    if (this.usesVml_) {
        this.vmlCircle_.stroke.color = this.lineColour_;
    }
    else {
        this.svgNode_.setAttribute("stroke", this.lineColour_);
    }
}
BDCCCircle.prototype.getStrokeColor = function() {
    return this.lineColour_;
}

//Stroke (line) weight (pixels)
BDCCCircle.prototype.setStrokeWeight = function(weight) {
    this.lineWidth_ = weight;
    if (this.usesVml_) {
        this.vmlCircle_.stroke.weight = this.lineWidth_.toString() + "px";
    }
    else {
        this.svgNode_.setAttribute("stroke-width", this.lineWidth_.toString() + "px");
    }
}
BDCCCircle.prototype.getStrokeWeight = function() {
    return this.lineWidth_;
}

//Stroke (line) opacity 0.0 (transparent) to 1.0 (opaque)
BDCCCircle.prototype.setStrokeOpacity = function(opacity) {
    this.lineOpacity_ = opacity;
    if (this.usesVml_) {
        this.vmlCircle_.stroke.opacity = this.lineOpacity_;
    }
    else {
        this.svgNode_.setAttribute("stroke-opacity", this.lineOpacity_);
    }
}
BDCCCircle.prototype.getStrokeOpacity = function() {
    return this.lineOpacity_;
}

//Fill colour
BDCCCircle.prototype.setFillColor = function(fillColor) {

    this.fillColour_ = fillColor || "#444444"; //save original object for copy
    if (this.fillColour_.constructor.toString().indexOf("Array") == -1) {
        this.fillColour1_ = this.fillColour_;
        this.fillColour2_ = null;
    }
    else if (this.fillColour_.length == 2) {
        this.fillColour1_ = this.fillColour_[0] || "#222222";
        this.fillColour2_ = this.fillColour_[1] || "#888888";
    }
    else {
        this.fillColour1_ = this.fillColour_[0] || "#444444";
        this.fillColour2_ = null;
    }

    if (this.usesVml_)
        this.vmlFillHelper();
    else
        this.svgFillHelper();
}
BDCCCircle.prototype.getFillColor = function() {
    return this.fillColour_;
}

//Fill helper for vml, need this as can't script opacity2
BDCCCircle.prototype.vmlFillHelper = function() {
    this.vmlCircle_.removeChild(this.vmlCircle_.children[1]);

    f = "<v:fill";

    if (!this.fill_)
        f += " type='none'";
    else if ((this.fillOpacity2_ != null) || (this.fillColour2_ != null))
        f += " type='gradientradial' focusposition='0.5,0.5' focussize='0,0' method='linear'";
    else
        f += " type='solid'";

    f += " opacity=" + this.fillOpacity1_;
    if (this.fillOpacity2_ != null)
        f += " o:opacity2=" + this.fillOpacity2_;
    else if (this.fillColour2_ != null)
        f += " o:opacity2=" + this.fillOpacity1_;
    f += " color=" + this.fillColour1_;
    if (this.fillColour2_ != null)
        f += " color2=" + this.fillColour2_;
    else if (this.fillOpacity2_ != null)
        f += " color2=" + this.fillColour1_;
    f += "/>";

    this.vmlCircle_.appendChild(document.createElement(f));
}


BDCCCircle.prototype.svgFillHelper = function() {

    if (!this.fill_) {
        this.svgNode_.setAttribute("fill-opacity", "0.0");
        this.svgNode_.setAttribute("pointer-events", "visibleStroke");
    }
    else if ((this.fillOpacity2_ == null) && (this.fillColour2_ == null)) {
        this.svgNode_.setAttribute("fill", this.fillColour1_);
        this.svgNode_.setAttribute("fill-opacity", this.fillOpacity1_);
        this.svgNode_.setAttribute("pointer-events", "visibleFill");
    }
    else {
        this.svgNode_.setAttribute("fill", "url(#" + this.gradId_ + ")");

        this.svgStop2_.setAttribute("stop-opacity", this.fillOpacity1_);
        if (this.fillOpacity2_ != null)
            this.svgStop1_.setAttribute("stop-opacity", this.fillOpacity2_);
        else if (this.fillColour2_ != null)
            this.svgStop1_.setAttribute("stop-opacity", this.fillOpacity1_);

        this.svgStop2_.setAttribute("stop-color", this.fillColour1_);
        if (this.fillColour2_ != null)
            this.svgStop1_.setAttribute("stop-color", this.fillColour2_);
        else if (this.fillOpacity2_ != null)
            this.svgStop1_.setAttribute("stop-color", this.fillColour1_);

        this.svgNode_.setAttribute("pointer-events", "visibleFill");
    }
}

//Fill opacity 0.0 (transparent) to 1.0 (opaque)
BDCCCircle.prototype.setFillOpacity = function(opacity) {

    this.fillOpacity_ = opacity || 0.3; //save orgiginal for copy
    if (this.fillOpacity_.constructor.toString().indexOf("Array") == -1) {
        this.fillOpacity1_ = this.fillOpacity_;
        this.fillOpacity2_ = null;
    }
    else if (this.fillOpacity_.length == 2) {
        this.fillOpacity1_ = this.fillOpacity_[0] || 0.1;
        this.fillOpacity2_ = this.fillOpacity_[1] || 0.9;
    }
    else {
        this.fillOpacity1_ = this.fillOpacity_[0] || 0.5;
        this.fillOpacity2_ = null;
    }

    if (this.usesVml_) {
        if (this.fill_) {
            this.vmlCircle_.filled = true;
            this.vmlFillHelper();
        }
        else
            this.vmlCircle_.filled = false;
    }
    else {
        this.svgFillHelper();
    }
}
BDCCCircle.prototype.getFillOpacity = function() {
    return this.fillOpacity_;
}

// Fill on/off
BDCCCircle.prototype.setFill = function(fill) {
    this.fill_ = fill;
    this.setFillOpacity(this.fillOpacity_);
}
BDCCCircle.prototype.getFillOpacity = function() {
    return this.fill_;
}

//Event posters
BDCCCircle.prototype.onClick = function() {
    GEvent.trigger(this, "click");
}
BDCCCircle.prototype.onOver = function() {
    GEvent.trigger(this, "mouseover");
}
BDCCCircle.prototype.onOut = function() {
    GEvent.trigger(this, "mouseout");
}

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

    //save for later
    this.map_ = map;

    //closures for dom event handlers
    var eClick = GEvent.callback(this, this.onClick);
    var eOver = GEvent.callback(this, this.onOver);
    var eOut = GEvent.callback(this, this.onOut);

    //set up invariant details
    if (this.usesVml_) {

        try {

            var c = document.createElement("v:oval");
            c.style.position = "absolute";
            var s = document.createElement("v:stroke");
            c.insertBefore(s, null);
            var f = document.createElement("v:fill");
            c.insertBefore(f, null);
            if (this.tooltip_) {
                c.title = this.tooltip_;
                c.style.cursor = "help";
            }
            map.getPane(G_MAP_MAP_PANE).appendChild(c);

            GEvent.clearInstanceListeners(c); //safety 
            GEvent.addDomListener(c, "click", function(event) { eClick(); });
            GEvent.addDomListener(c, "mouseover", function() { eOver(); });
            GEvent.addDomListener(c, "mouseout", function() { eOut(); });

            this.vmlCircle_ = c; //save for drawing  

        }
        catch (ex) {
            alert("The designer of this Google Maps web page has attempted to use VML graphics without including the necessary header material.");
        }

    }
    else {


        var svgNS = "http://www.w3.org/2000/svg";

        if (BDCCCircleSvgRoot == null) {
            // all the circles go in one SVG element - this makes the mouseover events work properly
            // without one circles bounding box occluding events from a lower z order circle
            BDCCCircleSvgRoot = document.createElementNS(svgNS, "svg");
            map.getPane(G_MAP_MAP_PANE).appendChild(BDCCCircleSvgRoot);
        }

        var svgDefs = document.createElementNS(svgNS, "defs");
        BDCCCircleSvgRoot.appendChild(svgDefs);

        var svgGrad = document.createElementNS(svgNS, "radialGradient");
        svgDefs.appendChild(svgGrad);
        svgGrad.setAttribute("id", this.gradId_);

        var s1 = document.createElementNS(svgNS, "stop");
        s1.setAttribute("offset", "0.0");
        var s2 = document.createElementNS(svgNS, "stop");
        s2.setAttribute("offset", "1.0");
        svgGrad.appendChild(s1);
        svgGrad.appendChild(s2);

        var svgNode = document.createElementNS(svgNS, "circle");
        if (this.tooltip_ != null) {
            svgNode.setAttribute("title", this.tooltip_);
            svgNode.style.cursor = "help";
        }
        BDCCCircleSvgRoot.appendChild(svgNode);

        GEvent.clearInstanceListeners(svgNode); //safety 
        GEvent.addDomListener(svgNode, "click", function(event) { eClick(); });
        GEvent.addDomListener(svgNode, "mouseover", function() { eOver(); });
        GEvent.addDomListener(svgNode, "mouseout", function() { eOut(); });

        this.svgNode_ = svgNode;
        this.svgGrad_ = svgGrad;
        this.svgStop1_ = s1;
        this.svgStop2_ = s2;

    }

    //set up the appearance of our circle
    this.setStrokeColor(this.lineColour_);
    this.setStrokeOpacity(this.lineOpacity_);
    this.setStrokeWeight(this.lineWidth_);
    this.setFillColor(this.fillColour_);
    this.setFillOpacity(this.fillOpacity_); //does fill too

}

// Remove the main DIV from the map pane
BDCCCircle.prototype.remove = function() {

    if (this.svgNode_ != null) {
        GEvent.clearInstanceListeners(this.svgNode_); //safety 
        BDCCCircleSvgRoot.removeChild(this.svgNode_);
        this.svgNode_ = null;
    }
    if (this.vmlCircle_ != null) {
        GEvent.clearInstanceListeners(this.vmlCircle_); //safety 
        this.map_.getPane(G_MAP_MAP_PANE).removeChild(this.vmlCircle_);
        this.vmlCircle_ = null;
    }

}

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

// Redraw the circle based on the current projection and zoom level
BDCCCircle.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 (this.usesVml_) {

        this.vmlCircle_.style.display = "none"; //while drawing or if 0 radius
        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 = BDCCCircleSvgRoot.suspendRedraw(10000); //avoid double paint with new centre and then new radius

        this.svgNode_.setAttribute("visibility", "hidden"); //if 0 radius
        if ((rPx > 0) && (rPx < 3000)) {
            var ne = this.map_.fromLatLngToDivPixel(bnds.getNorthEast());
            var sw = this.map_.fromLatLngToDivPixel(bnds.getSouthWest());

            var wd = ne.x - sw.x;
            var ht = sw.y - ne.y;
            var l = sw.x;
            var t = ne.y;

            BDCCCircleSvgRoot.setAttribute("width", wd);
            BDCCCircleSvgRoot.setAttribute("height", ht);
            BDCCCircleSvgRoot.setAttribute("style", "position:absolute; top:" + t + "px; left:" + l + "px");

            var cx = p.x - l;
            var cy = p.y - t;

            this.svgNode_.setAttribute("overflow", "hidden");
            this.svgNode_.setAttribute("r", rPx);
            this.svgNode_.setAttribute("cx", cx);
            this.svgNode_.setAttribute("cy", cy);
            this.svgNode_.setAttribute("visibility", "visible"); //finished


        }
        BDCCCircleSvgRoot.unsuspendRedraw(rdrh);
        BDCCCircleSvgRoot.forceRedraw();
    }

}