// 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.Activity = 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') {
                        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;
                    
                var ret = RGraph.SVG.commonSetter({
                    object: this,
                    name:   name,
                    value:  value
                });
                
                name  = ret.name;
                value = ret.value;

                this.properties[name] = value;
            }

            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            = 'activity';
        this.min             = RGraph.SVG.stringsToNumbers(conf.min);
        this.max             = RGraph.SVG.stringsToNumbers(conf.max);
        this.value           = RGraph.SVG.stringsToNumbers(conf.value);
        this.currentValue    = null; // Used by animations
        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.colorsParsed    = false;
        this.originalColors  = {};
        this.gradientCounter = 1;
        this.adjusting_index = null;
        this.nodes           = {};
        this.firstDraw       = true; // After the first draw this will be false









        // 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 =
        {
            radius:                             null,
            centerx:                            null,
            centery:                            null,
            width:                              null,
            ends:                               'round',

            marginLeft:                            15,
            marginRight:                           15,
            marginTop:                             15,
            marginBottom:                          15,
            marginInner:                           1,

            backgroundColor:                    'black',
            backgroundGrid:                     false,
            backgroundGridColor:                '#eee',
            backgroundGridRadials:              true,
            backgroundGridRadialsCount:         8,
            backgroundRings:                    true,
            backgroundRingsColors:              null,
            backgroundRingsAlpha:               0.5,

            colors:                             RGraph.SVG.getColors(['#F45B5B','#90EE7E','#2B908F']),// Old colors: ['#F45B5B','#90EE7E','#2B908F','red','green','blue','yellow','pink'],

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

            labelsCenter:                              false,
            labelsCenterIndex:                         0,
            labelsCenterFont:                          null,
            labelsCenterSize:                          40,
            labelsCenterColor:                         null,
            labelsCenterBold:                          null,
            labelsCenterItalic:                        null,
            labelsCenterUnitsPre:                      '',
            labelsCenterUnitsPost:                     '',
            labelsCenterDecimals:                      0,
            labelsCenterPoint:                         '.',
            labelsCenterThousand:                      ',',
            labelsCenterSpecific:                      null,
            labelsCenterHalign:                        'center',
            labelsCenterValign:                        'center',
            labelsCenterOffsetx:                       0,
            labelsCenterOffsety:                       0,
            labels:                                    [],
            labelsColor:                               null,
            labelsFont:                                null,
            labelsSize:                                null,
            labelsBold:                                null,
            labelsItalic:                              null,
            labelsBackgroundFill:                      'transparent',
            labelsBackgroundStroke:                    'transparent',
            labelsHalign:                              'right',
            labelsValign:                              'center',
            labelsOffsetx:                             0,
            labelsOffsety:                             0,
            labelsFormattedDecimals:                   0,
            labelsFormattedPoint:                      '.',
            labelsFormattedThousand:                   ',',
            labelsFormattedUnitsPre:                   '',
            labelsFormattedUnitsPost:                  '',

            adjustable:                         false,

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

            highlightStroke:                    'transparent',
            highlightFill:                      'rgba(255,255,255,0.7)',
            highlightLinewidth:                 1,
            highlightFade:                      true,
            
            clip:                               null,
            responsive:                         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);


            //
            // Convert the value to an array if its a number
            //
            if (typeof this.value === 'number') {
                this.value = [this.value];
            }

            // Bounds checking
            for (var i=0; i<this.value.length; ++i) {
                if (this.value[i] > this.max) this.value[i] = this.max;
                if (this.value[i] < this.min) this.value[i] = this.min;
            }

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

            // Should the first 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
            this.defs = 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.graphHeight / 2) + properties.marginTop;
            this.radius  = Math.min(this.graphWidth / 2, this.graphHeight / 2);



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

            //
            // 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);

            
            
            // Parse the colors for gradients
            RGraph.SVG.resetColorsToOriginalValues({object:this});
            this.parseColors();





            // Calculate the width
            if (!properties.width) {
                properties.width  = (this.radius * 0.75) / this.value.length;
                properties.width -= (2 * properties.marginInner);
            }













            // Install clipping if requested
            if (this.properties.clip && !this.clipid) {

                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');
            }











            // Draw the background
            this.drawBackground();




            // Draw the meter
            this.drawMeter();




            // Draw the labels
            this.drawLabels();
            
            
            
            
            
            
            // Draw the icons
            this.drawIcons();








            //
            // Ajusting
            //
            if (properties.adjustable && !this.adjusting_event_listeners_installed) {
                
                this.adjusting_mousedown = false;
                
                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;
                        }

                    // Get the radius of the click
                    var radius = obj.getRadius(e);
                    

                    


                    if (radius > obj.radius) {
                        return;
                    }
                    
                    if (typeof obj.adjusting_index !== 'number') {
                        var index = obj.getIndexByRadius({radius: radius});
                        obj.adjusting_index = index;
                    } else {
                        var index = obj.adjusting_index;
                    }

                    var value        = obj.getValue(e);
                    obj.value[index] = value;
                    obj.currentValue = RGraph.SVG.arrayClone(value);

                    //RGraph.SVG.clear(obj.svg);
                    //obj.draw();
                    RGraph.SVG.redraw(obj.svg);
                };




                this.container.addEventListener('mousedown', function (e)
                {
                    obj.adjusting_mousedown = true;
                    
                    func(e);

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

                }, false);
                
                this.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;
                    obj.adjusting_index     = null;

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

            // Add the event listener that clears the highlight
            var obj = this; document.body.addEventListener('mouseup', function (e)
            {
                obj.removeHighlight();
            
            }, false);








            //
            // 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);
            }













            //
            // 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
        //eg:
        //    this.create('rect,x:0,y:0,width:100,height:100'[,parent]);
        //
        // @param mixed definition This can either be an object
        //                         which holds details of the object
        //                         that you want to make or a string
        //                         that holds the same information.
        // @param mixed            This can be either a string that
        //                         holds style information to be
        //                         applied to the new node or it
        //                         can be the parent node that the
        //                         new node is to be added to.
        // @param string           If used, this can be a string
        //                         that holds the style information
        //                         that is to be applied to the new
        //                         node.
        //
        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);
        };








        //
        // Go through the bars looking for the correct one for the given radius
        //
        this.getIndexByRadius = function (opt)
        {
            var radius = opt.radius;

            for (var i=0; i<this.nodes.bars.length; ++i) {
                var radiusInner = parseFloat(this.nodes.bars[i].getAttribute('data-radius-inner'));
                var radiusOuter = parseFloat(this.nodes.bars[i].getAttribute('data-radius-outer'));
                
                if (radius >= radiusInner && radius <= radiusOuter) {
                    return i;
                }
            }
            
            return null;
        };








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

            // First thing to do is clear the canvas to the backgroundColor
            if (   properties.backgroundColor) {
                RGraph.SVG.create({
                    svg: this.svg,
                    type: 'rect',
                    parent: this.svgAllGroup, 
                    attr: {
                        fill: properties.backgroundColor,
                        x: 0,
                        y: 0,
                        width: this.width,
                        height: this.height
                    }
                });
            }




            //
            // Draw the grid?
            //
            if (properties.backgroundGrid) {

                // Determine how many background circles
                // should be shown on the data points
                var count = this.value.length + 1;

                for (var i=0; i<count; i++) {
                
                    var radius = this.radius - (i * (properties.width + (2 * properties.marginInner)));

                   RGraph.SVG.create({
                        svg: this.svg,
                        type: 'circle',
                        parent: this.svgAllGroup, 
                        attr: {
                            fill: 'transparent',
                            stroke: properties.backgroundGridColor,
                            cx: this.centerx,
                            cy: this.centery,
                            r:  radius
                        }
                   });
                }


                // Rename the variable so that it makes a little more sense
                // when used further down
                var minRadius = radius




                //
                // Draw the background lines that go from the center outwards
                //
                if (properties.backgroundGridRadials) {

                    var angle = (RGraph.SVG.TRIG.TWOPI / properties.backgroundGridRadialsCount);

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

                        var path1 = RGraph.SVG.TRIG.getArcPath3({
                            svg:    this.svg,
                            cx:     this.centerx,
                            cy:     this.centery,
                            radius: this.radius,
                            start:  i * angle,
                            end:    i * angle,
                            lineto: false
                        });
                        
                        var path2 = RGraph.SVG.TRIG.getArcPath3({
                            svg:    this.svg,
                            cx:     this.centerx,
                            cy:     this.centery,
                            radius: minRadius,
                            start:  i * angle,
                            end:    i * angle,
                            lineto: true
                        });

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








        //
        // Draws the meter
        //
        this.drawMeter = function ()
        {
            this.nodes.bars = [];

            //
            // Loop through the values and draw the background rings
            //                
            for (var i=0; i<this.value.length; ++i) {

                // The radiuses of the ring
                var inner = this.radius - properties.marginInner - (i * properties.marginInner * 2) - (i * properties.width) - properties.width,
                    outer = this.radius - properties.marginInner - (i * properties.marginInner * 2) - (i * properties.width);

                // Determine the color
                if (RGraph.SVG.isArray(properties.backgroundRingsColors) && typeof properties.backgroundRingsColors[i] === 'string') {
                    var color = properties.backgroundRingsColors[i];
                } else {
                    var color = properties.colors[i];
                }






                // Draw the background rings if enabled
                if (properties.backgroundRings) {

                    // Draw the background ring
                    var path = RGraph.SVG.donut({
                        svg:         this.svgAllGroup,
                        cx:          this.centerx,
                        cy:          this.centery,
                        innerRadius: inner,
                        outerRadius: outer,
                        fill:        color,
                        opacity:     properties.backgroundRingsAlpha
                    });
                    
                    path.setAttribute('data-radiusInner', inner);
                    path.setAttribute('data-radiusOuter', outer);
                    path.setAttribute('data-centerx', this.centerx);
                    path.setAttribute('data-centery', this.centery);
                }

                
                
                // Create the group the main path and the ends path objects will be children of.
                // This does not include the background of the ring
                //
                // *** IMPORTANT ***
                //
                // This group must be created and added to the SVG document AFTER the
                // background ring or the background rings will sit on top of the clickable
                // bit and prevent tooltips from working
                //
                var group = RGraph.SVG.create({
                    svg: this.svg,
                    type: 'g',
                    parent: this.svgAllGroup,
                    attr: {
                        'data-index': i
                    }
                });



                // First calculate the angle that the indicator bar extends to
                var angle = ((this.value[i] - this.min) / (this.max - this.min)) * RGraph.SVG.TRIG.TWOPI;


















                //
                // Draw the foreground to the ring
                //
                var arcPath = this.pathBar({
                    radiusInner: inner,
                    radiusOuter: outer,
                    angle:       angle
                });

                var path = RGraph.SVG.create({
                    svg: this.svg,
                    type: 'path',
                    parent: group, 
                    attr: {
                        fill: properties.colors[i],
                        d: arcPath,
                        'data-index': i,
                        'data-centerx':      this.centerx,
                        'data-centery':      this.centery,
                        'data-angles-info':  'These angles are designed to be used with the RGraph.SVG.TRIG.getArcPath3() function',
                        'data-start-angle':  0,
                        'data-end-angle':    angle,
                        'data-radius-inner': inner,
                        'data-radius-outer': outer
                    }
                });
                
                // Set the angle and radiuses on the group tag too
                group.setAttribute('data-centerx',     this.centerx);
                group.setAttribute('data-centery',     this.centery);
                group.setAttribute('data-start-angle', 0);
                group.setAttribute('data-end-angle',   angle);
                group.setAttribute('data-radius-inner', inner);
                group.setAttribute('data-radius-outer', outer);
                
                this.nodes.bars[i] = group;
                











                //
                // Draw the circles at each end of the bar if necessary
                //
                if (properties.ends === 'round' && 0) {
    
                    var endcircle1 = RGraph.SVG.create({
                        svg: this.svg,
                        type: 'circle',
                        parent: group, 
                        attr: {
                            fill: color,
                            cx: this.centerx,
                            cy: this.centery - outer + (properties.width / 2),
                            r:  properties.width / 2
                        }
                    });
                    
                    // Calculate the endpoint for the second circle
                    var endpoint = RGraph.SVG.TRIG.getRadiusEndPoint({
                        cx:     this.centerx,
                        cy:     this.centery,
                        radius: outer - (properties.width / 2),
                        angle:  angle - RGraph.SVG.TRIG.HALFPI
                    });
    
                    var endcircle2 = RGraph.SVG.create({
                        svg: this.svg,
                        type: 'circle',
                        parent: group,
                        attr: {
                            fill: color,
                            cx: this.centerx + endpoint[0],
                            cy: this.centery + endpoint[1],
                            r:  properties.width / 2
                        }
                    });
                }






                //
                // Add the tooltip if necessary
                //
                if (   !RGraph.SVG.isNullish(properties.tooltips)
                    && (!RGraph.SVG.isNullish(properties.tooltips[i]) || typeof properties.tooltips === 'string')
                   ) {

                    var obj = this;

                    //
                    // Add tooltip event listeners
                    //
                    (function (index)
                    {
                        group.addEventListener(properties.tooltipsEvent.replace(/^on/, ''), function (e)
                        {
                            obj.removeHighlight();

                            // Show the tooltip
                            RGraph.SVG.tooltip({
                                object: obj,
                                 index: index,
                                 group: null,
                       sequentialIndex: index,
                                  text: typeof properties.tooltips === 'string' ?  properties.tooltips : properties.tooltips[index],
                                 event: e
                            });
                            
                            // Highlight the group that has been clicked on
                            obj.highlight(e.target);
                        }, false);

                        group.addEventListener('mousemove', function (e)
                        {
                            e.target.style.cursor = 'pointer';
                        }, false);
                    })(i);
                }
            }









            
            // Store the new value as the currentValue
            this.currentValue = RGraph.SVG.arrayClone(this.value);
        };








        //
        // This function creates the path for the indicator bar. It only creates the
        // path - it does not create an element or add anything to the DOM
        //
        this.pathBar = function (opt)
        {
            var inner = opt.radiusInner,
                outer = opt.radiusOuter,
                angle = opt.angle;

            var arcPath1 = RGraph.SVG.TRIG.getArcPath3({
                svg:    this.svg,
                cx:     this.centerx,
                cy:     this.centery,
                radius: outer,
                start:  0,
                end:    angle,
                lineto: false
            });
            
            // Draw a round end
            if (properties.ends === 'round') {
                var endpoint1 = RGraph.SVG.TRIG.getRadiusEndPoint({
                    cx:     this.centerx,
                    cy:     this.centery,
                    radius: ((outer - inner) / 2) + inner,
                    angle:  opt.angle - RGraph.SVG.TRIG.HALFPI
                });

                var endPath1 = RGraph.SVG.TRIG.getArcPath3({
                    svg:    this.svg,
                    cx:     this.centerx + endpoint1[0],
                    cy:     this.centery + endpoint1[1],
                    radius: (outer - inner) / 2,
                    start:  angle,
                    end:    angle + RGraph.SVG.TRIG.PI,
                    lineto: false,
                    moveto: false
                });

            } else {
                endPath1 = '';
            }
            

            var arcPath2 = RGraph.SVG.TRIG.getArcPath3({
                svg:           this.svg,
                cx:            this.centerx,
                cy:            this.centery,
                radius:        inner,
                start:         angle,
                end:           0,
                anticlockwise: true
            });


            
            // Draw a round end
            if (properties.ends === 'round') {
                var endPath2 = RGraph.SVG.TRIG.getArcPath3({
                    svg:     this.svg,
                    cx:      this.centerx,
                    cy:      this.centery - inner - ((outer - inner) / 2),
                    radius:  (outer - inner) / 2,
                    start:   RGraph.SVG.TRIG.PI,
                    end:     RGraph.SVG.TRIG.TWOPI,
                    lineto:  true
                });
            } else {
                endPath2 = '';
            }

            return    arcPath1
                    + ' ' + endPath1
                    + ' ' + arcPath2
                    + ' ' + endPath2
                    + ' z';
        };








        //
        // Highlights a bar when it has been clicked
        //
        // @param el object The element that has been clicked on
        //
        this.highlight = function (el)
        {
            var group       = el.parentNode,
                index       = group.getAttribute('data-index'),
                radiusInner = parseFloat(group.getAttribute('data-radius-inner')),
                radiusOuter = parseFloat(group.getAttribute('data-radius-outer')),
                angle       = parseFloat(group.getAttribute('data-end-angle'));



            // Create a group for the highlight
            var highlightGroup = RGraph.SVG.create({
                svg: this.svg,
                type: 'g',
                parent: this.svgAllGroup,
                attr: {
                    fill:   properties.highlightFill,
                    stroke: properties.highlightStroke,
                },
                style: {
                    pointerEvents: 'none'
                }
            });



            // Get the path for the highlight node
            var arcPath = this.pathBar({
                radiusInner: radiusInner,
                radiusOuter: radiusOuter,
                      angle: angle
            });




            // Create the highlight node
            var path = RGraph.SVG.create({
                svg: this.svg,
                type: 'path',
                parent: highlightGroup, 
                attr: {
                    d:              arcPath,
                    'stroke-width': properties.highlightLinewidth,

                    'data-highlight':    'true',
                    'data-index':        index,
                    'data-centerx':      this.centerx,
                    'data-centery':      this.centery,
                    'data-angles-info':  'These angles are designed to be used with the RGraph.SVG.TRIG.getArcPath3() function',
                    'data-start-angle':  0,
                    'data-end-angle':    angle,
                    'data-radius-inner': radiusInner,
                    'data-radius-outer': radiusOuter
                },
                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 ()
                        {
                            path.style.opacity = (index / 5) * 1;
                        }, (index / 5) * 100);
                    })(i);
                }
            }








            this.nodes.highlight = highlightGroup;
            RGraph.SVG.REG.set('highlight', highlightGroup);
        };








        //
        // Removes any highlight from the chart
        //
        this.removeHighlight = function ()
        {
            //var highlight = RGraph.SVG.REG.get('highlight');

            //if (highlight && highlight.parentNode) {
            //    highlight.parentNode.removeChild(highlight);
            //}
            
            //RGraph.SVG.REG.set('highlight', null);
            
            RGraph.SVG.removeHighlight();
        };








        //
        // Draw the labels
        //
        this.drawLabels = function ()
        {
             // Draw the center label
            if (properties.labelsCenter) {

                var label = RGraph.SVG.numberFormat({
                    object:    this,
                    num:       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 : label,
                    
                    x:      this.centerx + properties.labelsCenterOffsetx,
                    y:      this.centery + properties.labelsCenterOffsety,
                    
                    valign: properties.labelsCenterValign,
                    halign: properties.labelsCenterHalign,

                    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;
            }









            if (properties.labels.length) {
                
                var textConf = RGraph.SVG.getTextConf({
                    object: this,
                    prefix: 'labels'
                });

                if (typeof properties.labels === 'string') {
                    properties.labels = RGraph.SVG.arrayPad({
                        array:  [],
                        length: this.value.length,
                        value:  properties.labels
                    });
                }

    
                // Loop thru the labels
                for (var i=0; i<properties.labels.length; ++i) {
    
                    if ( typeof properties.labels === 'object' && properties.labels.length && typeof properties.labels[i] === 'string' ) {

                        var text = RGraph.SVG.labelSubstitution({
                            object:    this,
                            text:      properties.labels[i],
                            index:     i,
                            value:     this.value[i],
                            decimals:  properties.labelsFormattedDecimals,
                            point:     properties.labelsFormattedPoint,
                            thousand:  properties.labelsFormattedThousand,
                            unitsPre:  properties.labelsFormattedUnitsPre,
                            unitsPost: properties.labelsFormattedUnitsPost,
                        });
                    }

                    RGraph.SVG.text({
                        object: this,
                        parent: this.svgAllGroup,
                        
                         color: textConf.color,
                          font: textConf.font,
                          size: textConf.size,
                          bold: textConf.bold,
                        italic: textConf.italic,

                          text: text,

                             x: this.centerx - 5 + properties.labelsOffsetx - (properties.ends ? (properties.width / 2) : 0),
                             y: this.centery - this.radius + properties.marginInner + (i * properties.width) + (properties.width / 2) + (i * 2 * properties.marginInner) + properties.labelsOffsety,

                        valign: properties.labelsValign,
                        halign: properties.labelsHalign,
                  
                    background: properties.labelsBackground,
                  
                       padding: 2
                    });
                }
            }
        };








        //
        // Draw icons if they're wanted
        //
        this.drawIcons = function ()
        {
            if (RGraph.SVG.isArray(properties.icons))  {
                for (var i=0,images=[]; i<this.value.length; ++i) {
                    if (typeof properties.icons[i] === 'string' && properties.icons[i].length) {
    
                        // Use this to store the SVG image tags that are created in
                        var svg_images = [];
                        
                        // A reference to this chart object
                        var obj = this;


                        images[i]       = new Image();
                        images[i].src   = properties.icons[i];
                        images[i].index = i;

                        svg_images[i] = RGraph.SVG.create({
                            svg:  this.svg,
                            parent: this.svgAllGroup,
                            type: 'image',
                            attr: {
                                href: properties.icons[i],
                                x: this.centerx + properties.iconsOffsetx - (properties.ends ? (properties.width / 2) : 0) + 5,
                                y: this.centery - this.radius + properties.marginInner + (i * properties.width) + (properties.width / 2) + (i * 2 * properties.marginInner) + properties.iconsOffsety,
                                index: i
                            }
                        });

                        // Set the width/height on the image if requested
                        if (typeof properties.iconsWidth === 'number')  svg_images[i].setAttribute('width', properties.iconsWidth);
                        if (typeof properties.iconsHeight === 'number') svg_images[i].setAttribute('height', properties.iconsHeight);

                        // Now move the SVG image as required
                        svg_images[i].onload = function ()
                        {
                            var index  = this.getAttribute('index'),
                                width  = properties.iconsWidth || images[index].width,
                                height = properties.iconsHeight || images[index].height;

                            // Reposition the image
                            //this.setAttribute('x', parseInt(this.getAttribute('x')) + (width / 2));
                            this.setAttribute('y', parseInt(this.getAttribute('y')) - (height / 2));
                        }
                    }
                }
            }
        };








        //
        // 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),
                    backgroundColor: RGraph.SVG.arrayClone(properties.backgroundColor)
                }
            }

            // 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'
                    });
                }
            }
            
            // Background color
            properties.backgroundColor = RGraph.SVG.parseColorLinear({
                object: this,
                color: properties.backgroundColor,
                start: properties.marginLeft,
                  end: this.width - properties.marginRight,
                  direction: 'horizontal'
            });
        };








        //
        // 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;
        };








        //
        // This function returns the pertinent angle for a particular click (or other mouse event)
        // 
        // @param obj e The event object
        //                      OR
        //        int e An integer value for
        //              which to the relevant
        //              angle
        //
        this.getAngle = function (e)
        {
            if (typeof e === 'number') {
                var angle = ((e - this.min) / (this.max - this.min)) * RGraph.SVG.TRIG.TWOPI;
                    angle -= RGraph.SVG.TRIG.HALFPI;

            } else {
                var mouseX = e.offsetX,
                    mouseY = e.offsetY;
    
                var angle = RGraph.SVG.TRIG.getAngleByXY({
                    cx: this.centerx,
                    cy: this.centery,
                    x:  mouseX,
                    y:  mouseY
                });
                
                angle -= RGraph.SVG.TRIG.HALFPI;
            }
    
            return angle;
        };








        //
        // This function returns the pertinent value for a particular click (or other mouse event)
        // 
        // @param obj e The event object
        //              
        //
        this.getValue = function (e)
        {
            // Treat the argument as an angle (given in radians)
            if (typeof e === 'number') {
                var angle = e;
                
            // Treat the argument as an event object
            } else {
                // Get the angle of the click
                var angle = this.getAngle(e);
            }

            // Calculate the value based on the angle and min/max values
            var value = (((angle + RGraph.SVG.TRIG.HALFPI) / RGraph.SVG.TRIG.TWOPI) * (this.max - this.min)) + this.min;

            // Ensure that the value is in range
            value = Math.max(value, this.min);
            value = Math.min(value, this.max);

            return value;
        };








        //
        // This function returns the pertinent radius (from the centerx/y) of a given event object
        // (eg from a click or mouse event).
        // 
        // @param obj e The event object
        //
        this.getRadius = function (e)
        {
            var x = e.offsetX,
                y = e.offsetY;

            var radius = RGraph.SVG.TRIG.getHypLength({
                x1: x,
                y1: y,
                x2: this.centerx,
                y2: this.centery
            });
            
            return radius;
        };








        //
        // SVG Activity meter grow()
        // 
        // This effect gradually increases the represented value
        // 
        // @param              An object of options - eg: {frames: 60}
        // @param function     An optional callback function
        //
        this.grow = function ()
        {
            var obj = this;


            //
            // Convert the value to an array if its a number
            //
            if (typeof this.value === 'number') {
                this.value = [this.value];
            }

            //this.currentValue = this.currentValue || obj.min;
            if (RGraph.SVG.isNullish(this.currentValue)) {
                
                this.currentValue = [];
                
                for (var i=0; i<this.value.length; ++i) {
                    this.currentValue[i] = this.min;
                }
            }

            var opt      = arguments[0] || {},
                frames   = opt.frames || 30,
                frame    = 0,
                diff     = [],
                step     = [],
                callback = arguments[1] || function () {},
                initial  = [];

            // Set a few properties too by looping through the data
            for (var i=0; i<this.value.length; ++i) {
                diff[i] = this.value[i] - this.currentValue[i];
                step[i] = diff[i] / frames;
                initial[i] = this.currentValue[i];
            }





            function iterator ()
            {
                for (var i=0; i<obj.value.length; ++i) {
                    obj.value[i] = initial[i] + (frame * step[i]);
                }
                
                // Increment the frame
                frame++;

                RGraph.SVG.redraw(obj.svg);
            
                if (frame <= frames) {
                    RGraph.SVG.FX.update(iterator);
                } else {
                    callback(obj);
                }
            }
            
            iterator();
            
            return this;
        };








        //
        // A worker function that handles Bar chart specific tooltip substitutions
        //
        this.tooltipSubstitutions = function (opt)
        {
            var indexes = [0, opt.index];

            return {
                  index: indexes[1],
                dataset: indexes[0],
        sequentialIndex: indexes[1],
                  value: this.value[indexes[1]],
                 values: [this.value[indexes[1]]]
            };
        };








        //
        // 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)
        {
            return {
                label: (RGraph.SVG.isArray(properties.tooltipsFormattedKeyLabels) && typeof properties.tooltipsFormattedKeyLabels[specific.index] === 'string') ? properties.tooltipsFormattedKeyLabels[specific.index] : properties.labels[specific.index],
                color: (RGraph.SVG.isArray(properties.tooltipsFormattedKeyColors) && properties.tooltipsFormattedKeyColors[specific.index]) ? properties.tooltipsFormattedKeyColors[specific.index] : properties.colors[specific.index],
                value: this.value[specific.index]
            };
        };








        //
        // 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),
                radiusOuter = parseFloat(this.nodes.bars[index].firstChild.getAttribute('data-radius-outer')),
                radiusInner = parseFloat(this.nodes.bars[index].firstChild.getAttribute('data-radius-inner')),
                start       = parseFloat(this.nodes.bars[index].firstChild.getAttribute('data-start-angle')) - RGraph.SVG.TRIG.HALFPI;
                end         = parseFloat(this.nodes.bars[index].firstChild.getAttribute('data-end-angle')) - RGraph.SVG.TRIG.HALFPI;



            var endpoint = RGraph.SVG.TRIG.getRadiusEndPoint({
                    cx: this.centerx,
                    cy: this.centery,
                radius: radiusInner + ((radiusOuter - radiusInner) / 2) ,
                 angle: ((end - start) / 2) + start
            });

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

            // Position the tooltip in the Y direction
            args.tooltip.style.top  = (
                  svgXY[1]                          // The Y coordinate of the canvas
                + (this.centery + endpoint[1])      // The Y coordinate of the position
                - 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.
        //
        // @param string clip The clip string as supplied by the
        //                    user in the chart configuration
        //
        this.clipToScaleWorker = function (clipPath)
        {
            // The Regular expression is actually done by the
            // calling RGraph.clipTo.start() function  in the core
            // library
            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 = this.getAngle(this.min);
            }

            // Change the radius if the number is "max"
            if (RegExp.$2 === 'max') {
                a2 = this.getAngle(this.max);
            }

            var arcPath = RGraph.SVG.TRIG.getArcPath3({
                cx:     this.centerx,
                cy:     this.centery,
                r:      Math.max(this.width, this.height),
                start:  a1 + RGraph.SVG.TRIG.HALFPI,
                end:    a2 + RGraph.SVG.TRIG.HALFPI,
         anticlockwise: false,
                lineto: true
            });

            RGraph.SVG.create({
                svg:    this.svg,
                type:   'path',
                parent: clipPath,
                attr: {
                    d: 'M {1} {2} {3} '.format(
                        this.centerx,
                        this.centery,
                        arcPath
                    )
                }
            });
            
            // Now set the clip-path attribute on the first
            // Line charts 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);