// o---------------------------------------------------------------------------o
    // | This file is part of the RGraph package - you can learn more at:          |
    // |                                                                           |
    // |                           https://www.rgraph.net                          |
    // |                                                                           |
    // | RGraph is dual-licensed under the Open Source GPL license. This means     |
    // | that it's free to use for any purpose. The GPL license does have          |
    // | consequences on the license of the software that you include it in,       |
    // | however. If this is not desirable, then there's an inexpensive commercial |
    // | license option available. See the RGraph website for more details.        |
    // o---------------------------------------------------------------------------o

    RGraph     = window.RGraph || {isrgraph:true,isRGraph:true,rgraph:true};
    RGraph.SVG = RGraph.SVG || {};

// Module pattern
(function (win, doc, undefined)
{
    RGraph.SVG.SemiCircularProgress = function (conf)
    {
        //
        // A setter that the constructor uses (at the end)
        // to set all of the properties
        //
        // @param string name  The name of the property to set
        // @param string value The value to set the property to
        //
        this.set = function (name, value)
        {
            if (arguments.length === 1 && typeof name === 'object') {
                for (i in arguments[0]) {
                    if (typeof i === 'string') {
                        
                        if (i === 'backgroundColor')        {i = 'backgroundFill';}
                        if (i === 'backgroundColorOpacity') {i = 'backgroundFillOpacity';}

                        this.set(i, arguments[0][i]);
                    }
                }
            } else {
                
                // Go through all of the properties and make sure
                // that they're using the correct capitalisation
                name = this.properties_lowercase_map[name.toLowerCase()] || name;

                if (name === 'backgroundColor')        {name = 'backgroundFill';}
                if (name === 'backgroundColorOpacity') {name = 'backgroundFillOpacity';}

                var ret = RGraph.SVG.commonSetter({
                    object: this,
                    name:   name,
                    value:  value
                });

                name  = ret.name;
                value = ret.value;

                this.properties[name] = value;

                // If setting the colors, update the originalColors
                // property too
                if (name === 'colors') {
                    this.originalColors = RGraph.SVG.arrayClone(value, true);
                    this.colorsParsed = false;
                }
            }

            return this;
        };








        //
        // A getter.
        //
        // @param name  string The name of the property to get
        //
        this.get = function (name)
        {
            // Go through all of the properties and make sure
            // that they're using the correct capitalisation
            name = this.properties_lowercase_map[name.toLowerCase()] || name;

            return this.properties[name];
        };








        this.type            = 'semicircularprogress';
        this.min             = RGraph.SVG.stringsToNumbers(conf.min);
        this.max             = RGraph.SVG.stringsToNumbers(conf.max);
        this.value           = RGraph.SVG.stringsToNumbers(conf.value);
        this.id              = conf.id;
        this.uid             = RGraph.SVG.createUID();
        this.container       = document.getElementById(this.id);
        this.layers          = {}; // MUST be before the SVG tag is created!
        this.svg             = RGraph.SVG.createSVG({object: this,container: this.container});
        this.svgAllGroup     = RGraph.SVG.createAllGroup(this);
        this.clipid          = null; // Used to clip the canvas
        this.isRGraph        = true;
        this.isrgraph        = true;
        this.rgraph          = true;
        this.width           = Number(this.svg.getAttribute('width'));
        this.height          = Number(this.svg.getAttribute('height'));
        this.data            = conf.data; // Is this used? Don't think so.
        this.colorsParsed    = false;
        this.originalColors  = {};
        this.gradientCounter = 1;
        this.nodes           = {};
        this.coords          = [];
        this.shadowNodes     = [];
        this.currentValue    = null;
        this.firstDraw       = true; // After the first draw this will be false

        // Used for adjusting
        this.adjusting_mousedown = false;

        // Bounds checking
        if (this.value > this.max) this.value = this.max;
        if (this.value < this.min) this.value = this.min;







        // Add this object to the ObjectRegistry
        RGraph.SVG.OR.add(this);

        // Set the DIV container to be inline-block
        this.container.style.display = 'inline-block';

        this.properties =
        {
            centerx: null,
            centery: null,
            radius:  null,
            width:   60,

            marginLeft:    35,
            marginRight:   35,
            marginTop:     35,
            marginBottom:  35,

            backgroundStrokeLinewidth:  1,
            backgroundStroke:           'transparent',
            backgroundFill:             null,
            backgroundFillOpacity:      null,
            backgroundGrid:             false,
            backgroundGridMargin:       20,
            backgroundGridColor:        '#eee',
            backgroundGridLinewidth:    1,
            backgroundGridCircles:      true,
            backgroundGridRadials:      true,
            backgroundGridRadialsCount: 10,

            colors:       RGraph.SVG.getColors(),
            colorsStroke: 'transparent',

            textColor:      'black',
            textFont:       'Arial, Verdana, sans-serif',
            textSize:       12,
            textBold:       false,
            textItalic:     false,
            textLinkColor:  'blue',
            textLinkFont:   null,
            textLinkSize:   null,
            textLinkBold:   null,
            textLinkItalic: null,
            text:           null,

            scale:                      false,
            scaleMin:                   null, // Defaults to the charts min value
            scaleMax:                   null, // Defaults to the charts max value
            scaleDecimals:              0,
            scalePoint:                 '.',
            scaleThousand:              ',',
            scaleFormatter:             null,
            scaleUnitsPre:              '',
            scaleUnitsPost:             '',
            scaleLabelsCount:           10,
            scaleLabelsFont:            null,
            scaleLabelsSize:            null,
            scaleLabelsColor:           null,
            scaleLabelsBold:            null,
            scaleLabelsItalic:          null,
            scaleLabelsOffsetr:         0,
            scaleLabelsOffsetx:         0,
            scaleLabelsOffsety:         0,

            labelsMin:          true,
            labelsMinSpecific:  null,
            labelsMinPoint:     null,
            labelsMinThousand:  null,
            labelsMinDecimals:  null,
            labelsMinFormatter: null,
            labelsMinFont:      null,
            labelsMinSize:      null,
            labelsMinBold:      null,
            labelsMinItalic:    null,
            labelsMinColor:     null,
            labelsMinUnitsPre:  null,
            labelsMinUnitsPost: null,

            labelsMax:          true,
            labelsMaxSpecific:  null,
            labelsMaxPoint:     null,
            labelsMaxThousand:  null,
            labelsMaxFormatter: null,
            labelsMaxFont:      null,
            labelsMaxSize:      null,
            labelsMaxBold:      null,
            labelsMaxItalic:    null,
            labelsMaxColor:     null,
            labelsMaxDecimals:  null,
            labelsMaxUnitsPre:  null,
            labelsMaxUnitsPost: null,

            labelsCenter:          true,
            labelsCenterIndex:     0,
            labelsCenterSpecific:  null,
            labelsCenterPoint:     null,
            labelsCenterThousand:  null,
            labelsCenterFormatter: null,
            labelsCenterFont:      null,
            labelsCenterSize:      40,
            labelsCenterBold:      true,
            labelsCenterItalic:    null,
            labelsCenterColor:     null,
            labelsCenterDecimals:  null,
            labelsCenterUnitsPre:  null,
            labelsCenterUnitsPost: null,

            linewidth: 1,

            tooltips:                        null,
            tooltipsOverride:                null,
            tooltipsEffect:                  'slide',
            tooltipsCssClass:                'RGraph_tooltip',
            tooltipsCss:                     null,
            tooltipsEvent:                   'click',
            tooltipsPersistent:              false,
            tooltipsFormattedThousand:       ',',
            tooltipsFormattedPoint:          '.',
            tooltipsFormattedDecimals:       0,
            tooltipsFormattedUnitsPre:       '',
            tooltipsFormattedUnitsPost:      '',
            tooltipsFormattedKeyColors:      null,
            tooltipsFormattedKeyColorsShape: 'square',
            tooltipsFormattedKeyLabels:      [],
            tooltipsFormattedTableHeaders:   null,
            tooltipsFormattedTableData:      null,
            tooltipsFormattedListType:       'ul',
            tooltipsFormattedListItems:      null,
            tooltipsPointer:                 true,
            tooltipsPointerOffsetx:          0,
            tooltipsPointerOffsety:          0,
            tooltipsPositionStatic:          true,
            tooltipsOffsetx:                 0,
            tooltipsOffsety:                 0,

            highlightStroke:    'transparent',
            highlightFill:      'rgba(255,255,255,0.7)',
            highlightLinewidth: 1,
            highlightFade:      true,

            title:          '',
            titleX:         null,
            titleY:         null,
            titleHalign:    'center',
            titleValign:    null,
            titleFont:      null,
            titleSize:      null,
            titleColor:     null,
            titleBold:      true,
            titleItalic:    null,

            titleSubtitle:       null,
            titleSubtitleSize:   null,
            titleSubtitleColor:  '#aaa',
            titleSubtitleFont:   null,
            titleSubtitleBold:   null,
            titleSubtitleItalic: null,
            
            responsive:       null,
            adjustable:       false,
            clip:             null,
            zoom:             false,
            events:           {},
            
            style:            []
        };

        //
        // Add the reverse look-up table  for property names
        // so that property names can be specified in any case.
        //
        this.properties_lowercase_map = [];
        for (var i in this.properties) {
            if (typeof i === 'string') {
                this.properties_lowercase_map[i.toLowerCase()] = i;
            }
        }



        //
        // Copy the global object properties to this instance
        //
        RGraph.SVG.getGlobals(this);





        //
        // "Decorate" the object with the generic effects if the effects library has been included
        //
        if (RGraph.SVG.FX && typeof RGraph.SVG.FX.decorate === 'function') {
            RGraph.SVG.FX.decorate(this);
        }





        // Add the responsive function to the object
        this.responsive = RGraph.SVG.responsive;





        var properties = this.properties;








        //
        // The draw method draws the Bar chart
        //
        this.draw = function ()
        {
            // Fire the beforedraw event
            RGraph.SVG.fireCustomEvent(this, 'onbeforedraw');











            //
            // Add any CSS that has been specified to the document.
            // This is general CSS and does not necessarily have to
            // pertain to the canvas tag. It only gets added once
            // to the document no matter how many times this draw
            // function is called.
            //
            // Add the CSS to a <style> block in the <head>.
            RGraph.SVG.addConfigurationBasedCSS(this);


            // Reset this to prevent it from growing
            this.nodes = {};

            // Should be the first(ish) thing that's done in the
            // .draw() function except for the onbeforedraw event
            // and the installation of clipping.
            this.width  = Number(this.svg.getAttribute('width'));
            this.height = Number(this.svg.getAttribute('height'));



            // Create the defs tag if necessary
            RGraph.SVG.createDefs(this);



            // Add these
            this.graphWidth  = this.width - properties.marginLeft - properties.marginRight;
            this.graphHeight = this.height - properties.marginTop - properties.marginBottom;



            // Work out the center point
            this.centerx = (this.graphWidth / 2) + properties.marginLeft;
            this.centery = this.height - properties.marginBottom;
            this.radius  = Math.min(this.graphWidth / 2, this.graphHeight);



            // Allow the user to override the calculated centerx/y/radius
            this.radius  = typeof properties.radius  === 'number' ? properties.radius  : this.radius;
            this.centerx = typeof properties.centerx === 'number' ? properties.centerx : this.centerx;
            this.centery = typeof properties.centery === 'number' ? properties.centery : this.centery;

            //
            // Allow the centerx/centery/radius to be a plus/minus
            //
            if (typeof properties.radius  === 'string' && properties.radius.match(/^\+|-\d+$/) )  this.radius  += parseFloat(properties.radius);
            if (typeof properties.centerx === 'string' && properties.centerx.match(/^\+|-\d+$/) ) this.centerx += parseFloat(properties.centerx);
            if (typeof properties.centery === 'string' && properties.centery.match(/^\+|-\d+$/) ) this.centery += parseFloat(properties.centery);

            // Set the width of the meter
            this.progressWidth = properties.width || (this.radius / 3);



            // Parse the colors for gradients
            RGraph.SVG.resetColorsToOriginalValues({object:this});
            this.parseColors();
            
            
            
            
            //
            // Set the current value
            //
            this.currentValue = this.value;
            
            
            
            
            
            
            
            
            
            
            // Install clipping if requested
            if (this.properties.clip) {

                this.clipid = RGraph.SVG.installClipping(this);

                // Add the clip ID to the all group
                this.svgAllGroup.setAttribute(
                    'clip-path',
                    'url(#{1})'.format(this.clipid)
                );
            } else {
                // No clipping - so ensure that there's no clip-path
                // attribute
                this.clipid = null;
                this.svgAllGroup.removeAttribute('clip-path');
            }
            
            
            
            
            
            
            
            
            
            
            
            
            
            






            this.drawBackground(); // Draw the background "grid"
            this.drawMeter(); // Draw the segments
            RGraph.SVG.drawTitle(this);   // Draw the title and subtitle
            this.drawLabels();            // Draw the labels
            this.drawScale();             // Draw the scale



            var obj = this;

            // Add the tooltip event listener
            if (!RGraph.SVG.isNullish(properties.tooltips) && (properties.tooltips.length || RGraph.SVG.isString(properties.tooltips)) ) {


                for (var i=0; i<this.coords.length; ++i) {
                    (function (index)
                    {
                        if (RGraph.SVG.isString(properties.tooltips) || (RGraph.SVG.isArray(properties.tooltips) && properties.tooltips[index])) {
                            obj.coords[index].element.addEventListener(properties.tooltipsEvent.replace(/^on/, ''), function (e)
                            {
                                obj.removeHighlight();

                                // Show the tooltip
                                RGraph.SVG.tooltip({
                                    object: obj,
                                    index:  index,
                                    group:  null,
                           sequentialIndex: index,
                                    text:   RGraph.SVG.isString(properties.tooltips) ? properties.tooltips : properties.tooltips[index],
                                    event:  e
                                });

                                // Highlight the rect that has been clicked on
                                obj.highlight(e.target);
                            }, false);

                            // Add the mousemove listener that changes the
                            // mouse pointer
                            obj.coords[index].element.addEventListener('mousemove', function (e)
                            {
                                e.target.style.cursor = 'pointer';
                            }, false);
                        }
                    })(i);
                }
            }


            // Add the event listener that clears the highlight if
            // there is any. Must be MOUSEDOWN (ie before the click
            // event)
            if (!this.added_remove_highlight_listener) {
                document.body.addEventListener('mousedown', function (e)
                {
                    obj.removeHighlight();
                }, false);

                this.added_remove_highlight_listener = true;
            }








            //
            // Allow the addition of custom text via the
            // text: property.
            //
            RGraph.SVG.addCustomText(this);





            // Lastly - install the zoom event listeners if
            // requested
            if (this.properties.zoom) {
                RGraph.SVG.addZoom(this);
            }








            //
            // Ajusting
            //
            if (properties.adjustable) {

                var obj = this;

                var func = function (e)
                {
                    var div     = e.currentTarget,
                        mouseX  = e.offsetX,
                        mouseY  = e.offsetY;

                        if (RGraph.SVG.ISFF) {
                            mouseX = e.pageX - e.currentTarget.offsetLeft;
                            mouseY = e.pageY - e.currentTarget.offsetTop;
                        }

                    //var radius = RGraph.SVG.TRIG.getHypLength({
                    //    x1: mouseX,
                    //    y1: mouseY,
                    //    x2: obj.centerx,
                    //    y2: obj.centery,
                    //    object: obj
                    //});

                    //if (radius > obj.radius) {
                    //    return;
                    //}

                    var value = obj.getValue(e);


                    obj.value = value;
                    RGraph.SVG.redraw(obj.svg);
                };

                //
                // Only add the adjusting event listeners once
                //
                var obj = this;
                RGraph.SVG.runOnce('rgraph-svg-scp-adjusting-event-listeners-' + obj.uid, function ()
                {
                    //
                    // Create a reference so that code thats inside
                    // the event listeners can easily access the
                    // object

                    obj.svg.addEventListener('mousedown', function (e)
                    {
                        var mouseX  = e.offsetX,
                            mouseY  = e.offsetY;

                        if (RGraph.SVG.ISFF) {
                            mouseX = e.pageX - e.currentTarget.offsetLeft;
                            mouseY = e.pageY - e.currentTarget.offsetTop;
                        }
    
                        var radius = RGraph.SVG.TRIG.getHypLength({
                            x1: mouseX,
                            y1: mouseY,
                            x2: obj.centerx,
                            y2: obj.centery,
                            object: obj
                        });

                        // The first click that starts adjusting
                        // must be within the progress meter area
                        //
                        // Allow the pointer to be inside the meter
                        // /* || radius < (obj.radius - obj.progressWidth) */
                        if (radius > obj.radius) {
                            return; 
                        }

                        obj.adjusting_mousedown = true;
                        func(e);

                        // Fire the beforedraw event
                        RGraph.SVG.fireCustomEvent(obj, 'onadjustbegin');

                    }, false);

                    obj.container.addEventListener('mousemove', function (e)
                    {
                        if (obj.adjusting_mousedown) {
                            func(e);

                            // Fire the beforedraw event
                            RGraph.SVG.fireCustomEvent(obj, 'onadjust');
                        }
                    }, false);

                    window.addEventListener('mouseup', function (e)
                    {
                        obj.adjusting_mousedown = false;

                        // Fire the beforedraw event
                        RGraph.SVG.fireCustomEvent(obj, 'onadjustend');
                    }, false);
                });
            }










            //
            // Fire the onfirstdraw event
            //
            if (this.firstDraw) {
                this.firstDraw = false;
                RGraph.SVG.fireCustomEvent(this, 'onfirstdraw');
            }




            // Fire the draw event
            RGraph.SVG.fireCustomEvent(this, 'ondraw');







            //
            // Install any inline responsive configuration. This
            // should be last in the draw function - even after
            // the draw events.
            //
            RGraph.SVG.installInlineResponsive(this);











            return this;
        };








        //
        // New create() shortcut function
        // For example:
        //    this.create('rect,x:0,y:0,width:100,height:100'[,parent]);
        //
        // @param str string The tag definition to parse and create
        // @param     object The (optional) parent element
        // @return    object The new tag
        //
        this.create = function (str)
        {
            var def = RGraph.SVG.create.parseStr(this, str);
            def.svg = this.svg;
            
            // By default the parent is the SVG tag - but if
            // requested then change it to the tag that has
            // been given
            if (arguments[1]) {
                def.parent = arguments[1];
            }

            return RGraph.SVG.create(def);
        };








        //
        // This function returns the value that the mouse is positioned at, regardless of
        // the actual indicated value.
        //
        // @param object e The event object
        //
        this.getValue = function (e)
        {
            var mouseX  = e.offsetX,
                mouseY  = e.offsetY;

            if (RGraph.SVG.ISFF) {
                mouseX = e.pageX - e.currentTarget.offsetLeft;
                mouseY = e.pageY - e.currentTarget.offsetTop;
            }

            var angle = RGraph.SVG.TRIG.getAngleByXY({
                cx: this.centerx,
                cy: this.centery,
                x: mouseX,
                y: mouseY
            });

            var value = ((angle - this.angleStart) / (this.angleEnd - this.angleStart));

            // Adjust the angle aso that it goes from 0 - 3.14
            if (mouseX < this.centerx) {
               angle = angle - RGraph.SVG.TRIG.PI - RGraph.SVG.TRIG.HALFPI;
            } else if (mouseX > this.centerx) {
                angle += RGraph.SVG.TRIG.HALFPI;
            } else if (mouseX === this.centerx) {
                angle = RGraph.SVG.TRIG.HALFPI;
            }

            value = (this.max - this.min) * (angle / RGraph.SVG.TRIG.PI);

            if (value < this.min) value = this.min;
            if (value > this.max) value = this.max;

            return value;
        };








        //
        // This function returns the relevant angle for the given
        // value.
        //
        // @param number value The value that you want to get an
        //                     angle for
        //
        this.getAngle = function (value, outofbounds = false)
        {
            if (!outofbounds && (value > this.max || value < this.min) ) {
                return null;
            }

            return (((value - this.min) / (this.max - this.min)) * RGraph.SVG.TRIG.PI) - RGraph.SVG.TRIG.HALFPI;
        };








        //
        // Draw the background "grid"
        //
        this.drawBackground = function ()
        {
            if (properties.backgroundGrid) {

                var margin      = properties.backgroundGridMargin;
                var outerRadius = this.radius + margin;
                var innerRadius = this.radius - properties.width - margin;

                // Draw the background grid "circles"
                if (properties.backgroundGridCircles) {

                    // Create the path for the outer line of the grid
                    var arcPath1 = RGraph.SVG.TRIG.getArcPath3({
                        cx: this.centerx,
                        cy: this.centery,
                        r:  outerRadius,
                        start: -RGraph.SVG.TRIG.HALFPI,
                        end: RGraph.SVG.TRIG.HALFPI,
                        anticlockwise: false,
                        lineto: false,
                        moveto: true
                    });

                    // Create the path for the inner line of the grid
                    var arcPath2 = RGraph.SVG.TRIG.getArcPath3({
                        cx: this.centerx,
                        cy: this.centery,
                        r:  innerRadius,
                        start: RGraph.SVG.TRIG.HALFPI,
                        end: -RGraph.SVG.TRIG.HALFPI,
                        anticlockwise: true,
                        lineto: true
                    });

                    RGraph.SVG.create({
                        svg:    this.svg,
                        type:   'path',
                        parent: this.svgAllGroup,
                        attr: {
                            d: arcPath1 + ' ' + arcPath2 + ' z',
                            stroke: properties.backgroundGridColor,
                            fill: 'transparent'
                        }
                    });
                }


                //
                // Draw the background grid radials
                //
                if (properties.backgroundGridRadials) {

                    // Calculate the radius increment
                    var increment = (RGraph.SVG.TRIG.HALFPI - (0 - RGraph.SVG.TRIG.HALFPI) ) / properties.backgroundGridRadialsCount;
                    var angle     = -RGraph.SVG.TRIG.HALFPI;

                    for (var i=0,path=''; i<properties.backgroundGridRadialsCount; ++i) {

                        path += RGraph.SVG.TRIG.getArcPath3({
                            cx: this.centerx,
                            cy: this.centery,
                            r:  outerRadius,
                            start: -RGraph.SVG.TRIG.HALFPI + (i * increment),
                            end: -RGraph.SVG.TRIG.HALFPI + (i * increment),
                            anticlockwise: true,
                            lineto: false,
                            moveto: true
                        });

                        path += RGraph.SVG.TRIG.getArcPath3({
                            cx: this.centerx,
                            cy: this.centery,
                            r:  innerRadius,
                            start: -RGraph.SVG.TRIG.HALFPI + (i * increment),
                            end: -RGraph.SVG.TRIG.HALFPI + (i * increment),
                            anticlockwise: true,
                            lineto: true
                        });

                        path += ' ';
                        angle += increment;
                    }

                    RGraph.SVG.create({
                        svg: this.svg,
                        type: 'path',
                        parent: this.svgAllGroup,
                        attr: {
                            d: path + ' z',
                            stroke: properties.backgroundGridColor,
                            fill: 'transparent',
                            'stroke-width': properties.backgroundGridLinewidth
                        }
                    });
                }
            }
        };








        //
        // Draws the meter
        //
        this.drawMeter = function ()
        {
            // Reset this
            this.coords = [];



            var path = RGraph.SVG.TRIG.getArcPath({
                cx: this.centerx,
                cy: this.centery,
                 r: this.radius,
             start: RGraph.SVG.TRIG.PI + RGraph.SVG.TRIG.HALFPI,
               end: RGraph.SVG.TRIG.HALFPI,
     anticlockwise: false
            });


            var path2 = RGraph.SVG.TRIG.getArcPath({
                cx: this.centerx,
                cy: this.centery,
                r:  this.radius - this.progressWidth,
                end: RGraph.SVG.TRIG.PI + RGraph.SVG.TRIG.HALFPI,
                start: RGraph.SVG.TRIG.HALFPI,
                anticlockwise: true,
                moveto: false
            });

            // This element is repeated AFTER the green bar that indicates
            // the value so that the stroke appears AFTER the indicator bar
            var background = RGraph.SVG.create({
                svg: this.svg,
                type: 'path',
                parent: this.svgAllGroup,
                attr: {
                    d: path + " L " + (this.centerx + this.radius - this.progressWidth)  + " " + this.centery + path2 + " L " + (this.centerx - this.radius) + " " + this.centery,
                    fill:           properties.backgroundFill || properties.colors[0],
                    'stroke-width': 0,
                    'fill-opacity': properties.backgroundFillOpacity
                }
            });

            // Store a reference to the background
            this.nodes.background = background;



            //
            // This draws the bar that indicates the value
            //

            // A single number
            if (typeof this.value === 'number') {

                var angle = ((this.value - this.min) / (this.max - this.min)) * RGraph.SVG.TRIG.PI; // Because the Meter is always a semi-circle

                // Take off half a pi because our origin is the north axis
                angle -= RGraph.SVG.TRIG.HALFPI;

                // Store the angle for later use
                this.angle = angle;


                // Now get the path of the inner indicator bar
                var path = RGraph.SVG.TRIG.getArcPath({
                    cx: this.centerx,
                    cy: this.centery,
                    r:  this.radius,
                    start: RGraph.SVG.TRIG.PI + RGraph.SVG.TRIG.HALFPI,
                    end: angle,
                    anticlockwise: false
                });

                var path2 = RGraph.SVG.TRIG.getArcPath({
                    cx: this.centerx,
                    cy: this.centery,
                    r:  this.radius - this.progressWidth,
                    start: angle,
                    end: angle,
                    anticlockwise: false,
                    array: true
                });

                var path3 = RGraph.SVG.TRIG.getArcPath({
                    cx: this.centerx,
                    cy: this.centery,
                    r:  this.radius - this.progressWidth,
                    start: angle,
                    end: RGraph.SVG.TRIG.PI + RGraph.SVG.TRIG.HALFPI,
                    anticlockwise: true,
                    moveto: false
                });


                // Create a group for the indicator bar. At a later point any
                // highlight can be also appended to this group
                var group = RGraph.SVG.create({
                    svg: this.svg,
                    type: 'g',
                    parent: this.svgAllGroup,
                    attr: {
                        id: 'indicator-bar-group'
                    }
                });

                // Now draw the path
                var path = RGraph.SVG.create({
                    svg: this.svg,
                    type: 'path',
                    parent: group,
                    attr: {
                        d: path + " L{1} {2} ".format(
                            path2[1],
                            path2[2]
                        ) + path3 + ' z',
                        fill: properties.colors[0],
                        stroke: properties.colorsStroke,
                        'stroke-width': properties.linewidth
                    }
                });

                // Store a reference to the bar in the nodes array and the
                // group as well. If necessary any highlight thats later
                // added can be appended to this group
                this.nodes.barGroup = group;
                this.nodes.bar      = path;

                this.coords.push({
                    cx:             this.centerx,
                    cy:             this.centery,
                    radiusOuter:    this.radius,
                    radiusInner:    this.radius - this.progressWidth,
                    start:          -RGraph.SVG.TRIG.HALFPI,
                    end:            angle,
                    element:        path
                });

            //
            // Multiple values
            //
            } else if (RGraph.SVG.isArray(this.value)) {




                // Create a group for the indicator bars. At a later point any
                // highlight can be also appended to this group
                var group = RGraph.SVG.create({
                    svg: this.svg,
                    type:'g',
                    parent: this.svgAllGroup,
                    attr: {
                        id: 'indicator-bar-group'
                    }
                });

                for (var i=0,start=-RGraph.SVG.TRIG.HALFPI; i<this.value.length; ++i) {

                    var angle = ((this.value[i] - this.min) / (this.max - this.min)) * RGraph.SVG.TRIG.PI; // Because the Meter is always a semi-circle

                    var path1 = RGraph.SVG.TRIG.getArcPath({
                        cx: this.centerx,
                        cy: this.centery,
                        r:  this.radius, // - this.progressWidth,
                        start: start,
                        end: start + angle,
                        anticlockwise: false,
                        lineto: false,
                        moveto: true
                    });

                    var path2 = RGraph.SVG.TRIG.getArcPath3({
                        cx: this.centerx,
                        cy: this.centery,
                        r:  this.radius - this.progressWidth,
                        start: start + angle,
                        end: start,
                        anticlockwise: true
                    });


                    var el = RGraph.SVG.create({
                        svg: this.svg,
                        type: 'path',
                        parent: group,
                        attr: {
                            d: '{1} {2} z'.format(path1, path2),
                            stroke: properties.colorsStroke,
                            'stroke-width': properties.linewidth,
                            fill: properties.colors[i]
                        }
                    });

                    // Store the angle for later use
                    this.coords.push({
                        cx:             this.centerx,
                        cy:             this.centery,
                        radiusOuter:    this.radius,
                        radiusInner:    this.radius - this.progressWidth,
                        start:          start,
                        end:            start + angle,
                        element:        el
                    });

                    // Increment the start angle
                    //
                    // DO THIS LAST
                    start += angle;
                }
            }
        };








        //
        // Draw the labels
        //
        this.drawLabels = function ()
        {
            // Draw the min label
            if (properties.labelsMin) {

                var min = RGraph.SVG.numberFormat({
                    object:    this,
                    num:       this.min.toFixed(properties.labelsMinDecimals),
                    prepend:   properties.labelsMinUnitsPre,
                    append:    properties.labelsMinUnitsPost,
                    point:     properties.labelsMinPoint,
                    thousand:  properties.labelsMinThousand,
                    formatter: properties.labelsMinFormatter
                });

                // Get the text configuration
                var textConf = RGraph.SVG.getTextConf({
                    object: this,
                    prefix: 'labelsMin'
                });

                var text = RGraph.SVG.text({
                    object: this,
                    parent: this.svgAllGroup,
                    tag: 'labels.min',
                    text: typeof properties.labelsMinSpecific === 'string' ? properties.labelsMinSpecific : min,
                    x: this.centerx - this.radius + (this.progressWidth / 2),
                    y: this.centery + 5 + properties.backgroundStrokeLinewidth,
                    valign: 'top',
                    halign: 'center',
                    font:   textConf.font,
                    size:   textConf.size,
                    bold:   textConf.bold,
                    italic: textConf.italic,
                    color:  textConf.color
                });

                this.nodes.labelsMin = text;
            }







            // Draw the max label
            if (properties.labelsMax) {

                var max = RGraph.SVG.numberFormat({
                    object:    this,
                    num:       this.max.toFixed(properties.labelsMaxDecimals),
                    prepend:   properties.labelsMaxUnitsPre,
                    append:    properties.labelsMaxUnitsPost,
                    point:     properties.labelsMaxPoint,
                    thousand:  properties.labelsMaxThousand,
                    formatter: properties.labelsMaxFormatter
                });


                // Get the text configuration
                var textConf = RGraph.SVG.getTextConf({
                    object: this,
                    prefix: 'labelsMax'
                });

                var text = RGraph.SVG.text({
                    object: this,
                    parent: this.svgAllGroup,
                    tag:    'labels.max',
                    text:   typeof properties.labelsMaxSpecific === 'string' ? properties.labelsMaxSpecific : max,
                    x:      this.centerx + this.radius - (this.progressWidth / 2),
                    y:      this.centery + 5 + properties.backgroundStrokeLinewidth,
                    valign: 'top',
                    halign: 'center',
                    font:   textConf.font,
                    size:   textConf.size,
                    bold:   textConf.bold,
                    italic: textConf.italic,
                    color:  textConf.color
                });

                // Store a reference to the text node
                this.nodes.labelsMax = text;
            }







             // Draw the center label
            if (properties.labelsCenter) {

                var center = RGraph.SVG.numberFormat({
                    object:    this,
                    num:       (typeof this.value === 'number' ? this.value : this.value[properties.labelsCenterIndex]).toFixed(properties.labelsCenterDecimals),
                    prepend:   properties.labelsCenterUnitsPre,
                    append:    properties.labelsCenterUnitsPost,
                    point:     properties.labelsCenterPoint,
                    thousand:  properties.labelsCenterThousand,
                    formatter: properties.labelsCenterFormatter
                });


                // Get the text configuration
                var textConf = RGraph.SVG.getTextConf({
                    object: this,
                    prefix: 'labelsCenter'
                });

                var text = RGraph.SVG.text({
                    object: this,
                    parent: this.svgAllGroup,
                    tag:    'labels.center',
                    text:   typeof properties.labelsCenterSpecific === 'string' ? properties.labelsCenterSpecific : center,
                    x:      this.centerx,
                    y:      this.centery,
                    valign: 'bottom',
                    halign: 'center',
                    font:   textConf.font,
                    size:   textConf.size,
                    bold:   textConf.bold,
                    italic: textConf.italic,
                    color:  textConf.color
                });

                // Store a reference to the center label
                this.nodes.labelsCenter = text;
            }
        };








        //
        // Draw the scale if necessary
        //
        this.drawScale = function ()
        {
            if (properties.scale) {

                //
                // Generate an appropiate scale
                //
                this.scale = RGraph.SVG.getScale({
                    object:    this,
                    numlabels: properties.scaleLabelsCount,
                    unitsPre:  properties.scaleUnitsPre,
                    unitsPost: properties.scaleUnitsPost,
                    max:       typeof properties.scaleMax === 'number' ? properties.scaleMax : this.max,
                    min:       typeof properties.scaleMin === 'number' ? properties.scaleMin : this.min,
                    point:     properties.scalePoint,
                    round:     false,
                    thousand:  properties.scaleThousand,
                    decimals:  properties.scaleDecimals,
                    strict:    true,
                    formatter: properties.scaleFormatter
                });

                //
                // Loop thru the number of labels
                //
                var textConf = RGraph.SVG.getTextConf({
                    object: this,
                    prefix: 'scaleLabels'
                });

                for (var i=0; i<this.scale.labels.length; ++i) {

                    var xy = RGraph.SVG.TRIG.getRadiusEndPoint({
                        angle:  (-RGraph.SVG.TRIG.PI) + (((i+1) / this.scale.labels.length) * (RGraph.SVG.TRIG.HALFPI - (-RGraph.SVG.TRIG.HALFPI)) ),
                        r: this.radius + (properties.backgroundGrid ? properties.backgroundGridMargin : 0) + textConf.size + properties.scaleLabelsOffsetr + 5
                    });

                    // Draw the label
                    RGraph.SVG.text({
                        object: this,
                        parent: this.svgAllGroup,
                        tag:    'scale',
                        font:   textConf.font,
                        size:   textConf.size,
                        color:  textConf.color,
                        bold:   textConf.bold,
                        italic: textConf.italic,
                        x: xy[0] + this.centerx + (properties.scaleLabelsOffsetx || 0),
                        y: xy[1] + this.centery + (properties.scaleLabelsOffsety || 0),
                        valign: 'center',
                        halign: ((i+1) / this.scale.labels.length === 0.5)     ? 'center' : (((i+1) > (this.scale.labels.length / 2)) ? 'left' : 'right'),
                        text: this.scale.labels[i]
                    });
                }



                // Draw the zero label
                //
                // Draw the zero label
                //
                var xy = RGraph.SVG.TRIG.getRadiusEndPoint({
                    angle:  -RGraph.SVG.TRIG.PI,
                    r: this.radius + (properties.backgroundGrid ? properties.backgroundGridMargin : 0) + textConf.size + properties.scaleLabelsOffsetr + 5
                });

                RGraph.SVG.text({
                    object: this,
                    parent: this.svgAllGroup,
                    tag:    'scale',
                    font:   textConf.font,
                    size:   textConf.size,
                    color:  textConf.color,
                    bold:   textConf.bold,
                    italic: textConf.italic,
                    x: xy[0] + this.centerx + (properties.scaleLabelsOffsetx || 0),
                    y: xy[1] + this.centery + (properties.scaleLabelsOffsety || 0),
                    valign: 'center',
                    halign: 'right',
                      text:   (typeof properties.scaleFormatter === 'function') ?
                                  properties.scaleFormatter(this, this.min)
                                  :
                                  properties.scaleUnitsPre + (typeof properties.scaleMin === 'number' ? properties.scaleMin : this.min).toFixed(properties.scaleDecimals).replace(/\./, properties.scalePoint) + properties.scaleUnitsPost,
                });
            }
        };








        //
        // This function can be used to highlight a segment on the chart
        //
        // @param object segment The segment to highlight
        //
        this.highlight = function (segment)
        {
            // Remove any highlight that's already been
            // installed
            this.removeHighlight();

            var highlight = RGraph.SVG.create({
                svg: this.svg,
                type: 'path',
                parent: this.nodes.barGroup,
                attr: {
                    d: segment.getAttribute('d'),
                    fill: properties.highlightFill,
                    stroke: properties.highlightStroke,
                    'stroke-width': properties.highlightLinewidth
                },
                style: {
                    pointerEvents: 'none',
                    opacity: this.properties.highlightFade ? 0 : 1
                }
            });



            // If highlightFade is enable (the default) then fade
            // the highlight in.
            if (this.properties.highlightFade) {

                for (var i=1; i<=5; ++i) {
                    (function (index)
                    {
                        setTimeout(function ()
                        {
                            highlight.style.opacity = (index / 5) * 1;
                        }, (index / 5) * 100);
                    })(i);
                }
            }




            // Store the highlight node in the registry
            RGraph.SVG.REG.set('highlight', highlight);

            // Add the event listener that clears the highlight path if
            // there is any. Must be MOUSEDOWN (ie before the click event)
            var obj = this;
            document.body.addEventListener('mousedown', function (e)
            {
                obj.removeHighlight();

            }, false);
        };








        //
        // This function can be used to remove the highlight that is added
        // by tooltips
        //
        this.removeHighlight = function ()
        {
            RGraph.SVG.removeHighlight();
        };








        //
        // This allows for easy specification of gradients
        //
        this.parseColors = function ()
        {
            // Save the original colors so that they can be restored when the canvas is reset
            if (!Object.keys(this.originalColors).length) {
                this.originalColors = {
                    colors:          RGraph.SVG.arrayClone(properties.colors, true),
                    highlightFill:   RGraph.SVG.arrayClone(properties.highlightFill, true),
                    backgroundFill:  RGraph.SVG.arrayClone(properties.backgroundFill, true)
                }
            }


            // colors
            var colors = properties.colors;

            if (colors) {
                for (var i=0; i<colors.length; ++i) {
                    colors[i] = RGraph.SVG.parseColorLinear({
                        object: this,
                         color: colors[i],
                         start: this.centerx - this.radius,
                           end: this.centerx + this.radius,
                           direction: 'horizontal'
                    });
                }
            }

            // Highlight fill
            properties.highlightFill = RGraph.SVG.parseColorLinear({
                object: this,
                color: properties.highlightFill,
                start: properties.marginLeft,
                  end: this.width - properties.marginRight,
                direction: 'horizontal'
            });

            // Background color

            // Background color
            properties.backgroundFill = RGraph.SVG.parseColorLinear({
                object: this,
                color: properties.backgroundFill,
                start: properties.marginLeft,
                  end: this.width - properties.marginRight,
                  direction: 'horizontal'
            });
        };








        //
        // The SCP chart grow effect
        //
        this.grow = function ()
        {
            var opt      = arguments[0] || {},
                frames   = opt.frames || 30,
                frame    = 0,
                obj      = this;

            //
            // Copy the data
            //
            var value = RGraph.SVG.arrayClone(this.value, true);

            if (RGraph.SVG.isNumber(this.value)) {
            
                if (RGraph.SVG.isNullish(this.currentValue)) {
                    this.currentValue = this.min;
                }
                
                var initial_value = this.currentValue,
                    diff          = this.value - Number(this.currentValue),
                    increment     = diff  / frames;
            } else {
                var initial_value = [],
                    diff          = [],
                    increment     = [];
                
                for (var i=0; i<this.value.length; ++i) {
                    initial_value[i] = RGraph.SVG.isNullish(this.currentValue) ? 0 : this.currentValue[i];
                    diff[i]          = this.value[i] - Number(RGraph.SVG.isNullish(this.currentValue) ? 0 : this.currentValue[i]);
                    increment[i]     = diff[i]  / frames;
                }
            }

            var iterate = function ()
            {
                var multiplier = frame / frames;

                if (typeof obj.value === 'object') {
                    for (var i=0; i<obj.value.length; ++i) {
                        obj.value[i] = initial_value[i] + (increment[i] * frame);
                    }
                } else {
                    obj.value = initial_value + (increment * frame);
                }

                RGraph.SVG.redraw(obj.svg);

                if (frame++ < frames) {
                    RGraph.SVG.FX.update(iterate);
                } else if (opt.callback) {
                    obj.value = value;
                    RGraph.SVG.redraw();
                    (opt.callback)(obj);
                }
            };

            iterate();

            return this;
        };















        //
        // Using a function to add events makes it easier to facilitate method
        // chaining
        //
        // @param string   type The type of even to add
        // @param function func
        //
        this.on = function (type, func)
        {
            if (type.substr(0,2) !== 'on') {
                type = 'on' + type;
            }

            RGraph.SVG.addCustomEventListener(this, type, func);

            return this;
        };








        //
        // Used in chaining. Runs a function there and then - not waiting for
        // the events to fire (eg the onbeforedraw event)
        //
        // @param function func The function to execute
        //
        this.exec = function (func)
        {
            func(this);

            return this;
        };








        //
        // Remove highlight from the chart (tooltips)
        //
        this.removeHighlight = function ()
        {
            RGraph.SVG.removeHighlight();
        };








        //
        // A worker function that handles Bar chart specific tooltip substitutions
        //
        this.tooltipSubstitutions = function (opt)
        {
            var value  = RGraph.SVG.isArray(this.value) ? this.value[opt.index] : this.value;
            var values = RGraph.SVG.isArray(this.value) ? this.value : [this.value];

            return {
                  index: opt.index,
                dataset: 0,
        sequentialIndex: opt.index,
                  value: value,
                 values: values
            };
        };








        //
        // A worker function that returns the correct color/label/value
        //
        // @param object specific The indexes that are applicable
        // @param number index    The appropriate index
        //
        this.tooltipsFormattedCustom = function (specific, index, colors)
        {
            var color = colors[index];
            var label = ( (typeof properties.tooltipsFormattedKeyLabels === 'object' && typeof properties.tooltipsFormattedKeyLabels[0] === 'string') ? properties.tooltipsFormattedKeyLabels[index] : '');

            return {
                label: label,
                color: color
            };
        };








        //
        // This allows for static tooltip positioning
        //
        this.positionTooltipStatic = function (args)
        {
            var obj        = args.object,
                e          = args.event,
                tooltip    = args.tooltip,
                index      = args.index,
                svgXY      = RGraph.SVG.getSVGXY(obj.svg);

            // Calculate the coordinates for the tooltip
            var coords = RGraph.SVG.TRIG.toCartesian({
                cx: this.centerx,
                cy: this.centery,
             //angle: this.angle - RGraph.SVG.TRIG.HALFPI - ((this.angle + RGraph.SVG.TRIG.HALFPI) / 2),
             angle: this.coords[index].start - RGraph.SVG.TRIG.HALFPI + ((this.coords[index].end - this.coords[index].start) / 2),
                 r: this.radius - (this.progressWidth / 2)
            });


            // Position the tooltip in the X direction
            args.tooltip.style.left = (
                  svgXY[0]                  // The X coordinate of the canvas
                + coords.x
                - (tooltip.offsetWidth / 2) // Subtract half of the tooltip width
            ) + 'px';

            args.tooltip.style.top  = (
                  svgXY[1]              // The Y coordinate of the canvas
                + coords.y
                - tooltip.offsetHeight  // The height of the tooltip
                - 10                    // An arbitrary amount
            ) + 'px';
        };








        //
        // This function handles clipping to scale values. Because
        // each chart handles scales differently, a worker function
        // is needed instead of it all being done centrally in the
        // main function.
        //
        // @param object clipPath The parent cipPath element
        //
        this.clipToScaleWorker = function (clipPath)
        {
            if (RegExp.$1 === 'min') from = this.min; else from = Number(RegExp.$1);
            if (RegExp.$2 === 'max') to   = this.max; else to   = Number(RegExp.$2);

            var a1 = this.getAngle(from),
                a2 = this.getAngle(to);

            // Change the radius if the number is "min"
            if (RegExp.$1 === 'min') {
                a1 = -1 * RGraph.SVG.TRIG.PI;
            }

            // Change the radius if the number is "max"
            if (RegExp.$2 === 'max') {
                a2 = RGraph.SVG.TRIG.PI
            }

    
            var path = RGraph.SVG.TRIG.getArcPath3({
                cx:     this.centerx,
                cy:     this.centery,
                radius: Math.max(this.width, this.height),
                start:  a1,
                end:    a2,
                anticlockwise: false
            });
    

            RGraph.SVG.create({
                svg: this.svg,
                parent: clipPath,
                type: 'path',
                attr: {
                    d: 'M {1} {2} {3} z'.format(
                        this.centerx,
                        this.centery,
                        path
                    )
                }
            });
            
            // Now set the clip-path attribute on the
            // all-elements group
            this.svgAllGroup.setAttribute(
                'clip-path',
                'url(#' + clipPath.id + ')'
            );
        };







        //
        // Set the options that the user has provided
        //
        for (i in conf.options) {
            if (typeof i === 'string') {
                this.set(i, conf.options[i]);
            }
        }



        return this;
    };








// End module pattern
})(window, document);