// o---------------------------------------------------------------------------------o
    // | This file is part of the RGraph package - you can learn more at:                |
    // |                                                                                 |
    // |                       https://www.rgraph.net/license.html                       |
    // |                                                                                 |
    // | RGraph is dual-licensed under the Open Source GPL license. That means that it's |
    // | free to use and there are no restrictions on what you can use RGraph for!       |
    // | If the GPL license does not suit you however, then there's an inexpensive       |
    // | commercial license option available. See the URL above for more details.        |
    // o---------------------------------------------------------------------------------o

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

// Module pattern
(function (win, doc, undefined)
{
    var ua  = navigator.userAgent;

    //
    // This installs some event handlers
    // 
    // Checking the RGraph.annotate flag means the annotate code only runs once
    //
    RGraph.annotating_canvas_onmousedown = function (e)
    {
        if (e.button === 0) {

            e.target.__object__.set('mousedown', true);

            // Get the object from the canvas. Annotating must be enabled on the
            // last object defined
            var obj        = e.target.__object__,
                properties = obj.properties

            // This starts the annotating "path" and set the color
            obj.context.beginPath();

                obj.context.strokeStyle = obj.get('annotatableColor');
                obj.context.lineWidth = obj.get('annotatableLinewidth');

                var mouseXY = RGraph.getMouseXY(e),
                    mouseX  = mouseXY[0],
                    mouseY  = mouseXY[1]

                // Allow for the Bar chart 3D
                if (obj.type === 'bar' && properties.variant === '3d') {
                    var adjustment = properties.variantThreedAngle * mouseXY[0];
                    mouseY -= adjustment;
                }

                // Clear the annotation recording
                RGraph.Registry.set('annotatable.actions', [obj.get('annotatableColor')]);
    
                // This sets the initial X/Y position
                obj.context.moveTo(mouseX, mouseY);
                RGraph.Registry.set('annotatable.last.coordinates', [mouseX,mouseY]);
                
                RGraph.Registry.set('started.annotating', false);
                RGraph.Registry.set('annotating', obj);

                // Fire the onannotatebegin event.
                RGraph.fireCustomEvent(obj, 'onannotatebegin');
        }
        
        return false;
    };








    //
    // This cancels annotating for ALL canvases
    //
    RGraph.annotating_window_onmouseup = function (e)
    {
        var obj  = RGraph.Registry.get('annotating');
        var win  = window;

        if (e.button != 0 || !obj) {
            return;
        }
        
        // This cancels annotating on ALL canvas tags on the page
        var tags = doc.getElementsByTagName('canvas');

        for (var i=0; i<tags.length; ++i) {
            if (tags[i].__object__) {
                tags[i].__object__.set('mousedown', false);
            }
        }

        // Store the annotations in browser storage if it's available
        if (RGraph.Registry.get('annotatable.actions') && RGraph.Registry.get('annotatable.actions').length > 0 && win.localStorage) {

            var id = '__rgraph_annotations_' + e.target.id + '__';
            var annotations  = win.localStorage[id] ? win.localStorage[id] + '|' : '';
                annotations += RGraph.Registry.get('annotatable.actions');

            // Store the annotations information in HTML5 browser storage here
            win.localStorage[id] = annotations;
        }
        
        // Clear the recorded annotations
        RGraph.Registry.set('annotatable.actions', []);
        
        // Fire the annotate event
        RGraph.fireCustomEvent(obj, 'onannotateend');
    };








    //
    // The canvas onmousemove function
    //
    RGraph.annotating_canvas_onmousemove = function (e)
    {
        var obj        = e.target.__object__;
        var properties = obj.properties;
        var mouseXY    = RGraph.getMouseXY(e);
        var mouseX     = mouseXY[0];
        var mouseY     = mouseXY[1];
        var lastXY     = RGraph.Registry.get('annotatable.last.coordinates');

        if (obj.get('mousedown')) {
            
            // Allow for the Bar chart 3D
            if (obj.type === 'bar' && properties.variant === '3d') {
                var adjustment = properties.variantThreedAngle * mouseXY[0];
                mouseY -= adjustment;
            }

            obj.context.beginPath();
            
            if (!lastXY) {
                obj.context.moveTo(mouseX, mouseY)
            } else {
                obj.context.strokeStyle = obj.properties.annotatableColor;
                obj.context.moveTo(lastXY[0], lastXY[1]);
                obj.context.lineTo(mouseX, mouseY);
            }

            RGraph.Registry.set('annotatable.actions', RGraph.Registry.get('annotatable.actions') + '|' + mouseX + ',' + mouseY);
            RGraph.Registry.set('annotatable.last.coordinates', [mouseX,mouseY]);

            RGraph.fireCustomEvent(obj, 'onannotate');
            obj.context.stroke();
        }
    };








    //
    // Shows the mini palette used for annotations
    // 
    // @param object e The event object
    //
    RGraph.showPalette = function (e)
    {
        var isSafari = navigator.userAgent.indexOf('Safari') ? true : false;

        var canvas  = e.target.parentNode.__canvas__,
            context = canvas.getContext('2d'),
            obj     = canvas.__object__,
            div     = document.createElement('DIV'),
            coords  = RGraph.getMouseXY(e)
        
        div.__object__               = obj; // The graph object
        div.className                = 'RGraph_palette';
        div.style.position           = 'absolute';
        div.style.backgroundColor    = 'white';
        div.style.border             = '1px solid #999';
        div.style.left               = 0;
        div.style.top                = 0;
        div.style.padding            = '3px';
        div.style.paddingLeft        = '5px';
        div.style.opacity            = 0;
        div.style.boxShadow          = 'rgba(48,48,48,0.25) 1px 1px 3px';
        div.style.WebkitBoxShadow    = 'rgba(48,48,48,0.25) 1px 1px 3px';
        div.style.MozBoxShadow       = 'rgba(48,48,48,0.25) 1px 1px 3px';


        // MUST use named colors that are capitalised
        var colors = [
            'Black',   'Red',   'Yellow',  'Green',
            'Orange',  'White', 'Magenta', 'Pink'
        ];
        
        // Add the colors to the palette
        for (var i=0,len=colors.length; i<len; i+=1) {
            
            var div2 = doc.createElement('DIV');
                div2.cssClass           = 'RGraph_palette_color';
                div2.style.fontSize     = '12pt';
                div2.style.cursor       = 'pointer';
                div2.style.padding      = '1px';
                div2.style.paddingRight = '10px';
                div2.style.textAlign    = 'left';

                var span = document.createElement('SPAN');
                    span.style.display          = 'inline-block';
                    span.style.marginRight      = '9px';
                    span.style.width            = '17px';
                    span.style.height           = '17px';
                    span.style.top              = '2px';
                    span.style.position         = 'relative';
                    span.style.backgroundColor  = colors[i];
                div2.appendChild(span);
                
                div2.innerHTML += colors[i];
                

                div2.onmouseover = function ()
                {
                    this.style.backgroundColor = '#eee';
                }

                div2.onmouseout = function ()
                {
                    this.style.backgroundColor = '';
                }
                
                div2.onclick = function (e)
                {
                    var color = this.childNodes[0].style.backgroundColor;
                    
                    obj.set('annotatableColor', color);
                }
            div.appendChild(div2);
        }


        doc.body.appendChild(div);

        //
        // Now the div has been added to the document, move it up and left
        //
        div.style.left   = e.pageX + 'px';
        div.style.top    = e.pageY + 'px';
        
        //
        // Chang the position if the cursor is near the right edge of the browser window
        //
        if ((e.pageX + (div.offsetWidth + 5) ) > document.body.offsetWidth) {
            div.style.left   = (e.pageX - div.offsetWidth) + 'px';
        }

        //
        // Store the palette div in the registry
        //
        RGraph.Registry.set('palette', div);
        
        setTimeout(function () {div.style.opacity = 0.2;}, 50);
        setTimeout(function () {div.style.opacity = 0.4;}, 100);
        setTimeout(function () {div.style.opacity = 0.6;}, 150);
        setTimeout(function () {div.style.opacity = 0.8;}, 200);
        setTimeout(function () {div.style.opacity = 1;}, 250);

        RGraph.hideContext();

        window.onclick = function ()
        {
            RGraph.hidePalette();
        }

        // Should this be here? Yes. This function is being used as an event handler.
        e.stopPropagation();
        return false;
    };








    //
    // Clears any annotation data from global storage
    // 
    // @param object canvas The canvas tag object
    //
    RGraph.clearAnnotations = function (canvas)
    {
        //
        // For BC the argument can also be the ID of the canvas
        //
        if (typeof canvas === 'string') {
            var id = canvas;
            canvas = doc.getElementById(id);
        } else {
            var id = canvas.id
        }

        var obj = canvas.__object__;

        if (win.localStorage && win.localStorage['__rgraph_annotations_' + id + '__'] && win.localStorage['__rgraph_annotations_' + id + '__'].length) {
            win.localStorage['__rgraph_annotations_' + id + '__'] = [];
            
            RGraph.fireCustomEvent(obj, 'onannotateclear');
        }
    };








    //
    // Replays stored annotations
    // 
    // @param object obj The graph object
    //
    RGraph.replayAnnotations = function (obj)
    {
        // Check for support
        if (!win.localStorage) {
            return;
        }

        var context     = obj.context;
        var annotations = win.localStorage['__rgraph_annotations_' + obj.id + '__'];
        var i, len, move, coords;

        // Save the state of the canvas
        context.save();
            context.beginPath();
            context.lineWidth = obj.get('annotatableLinewidth');

            if (annotations && annotations.length) {
                annotations = annotations.split('|');
            } else {
                return;
            }
            
            // Set the stroke color
            context.strokeStyle = annotations[i] || 'black';

    
    
            for (i=0,len=annotations.length; i<len; ++i) {
    
                // If the element of the array is a color - finish the path,
                // stroke it and start a new one
                if (annotations[i].match(/[a-z]+/)) {
                    
                    context.stroke();
                    context.beginPath();
    
                    context.strokeStyle = annotations[i];
                    move = true;
                    continue;
                }
    
                coords = annotations[i].split(',');
                coords[0] = Number(coords[0]);
                coords[1] = Number(coords[1]);
    
                if (move) {
                    context.moveTo(coords[0], coords[1]);
                    move = false;
                } else {
                    context.lineTo(coords[0], coords[1]);
                }
            }
        
            context.stroke();
        context.restore();
    };








    window.addEventListener('load', function (e)
    {
        // This delay is necessary to allow the window.onload event listener to run
        setTimeout(function ()
        {
            var tags = doc.getElementsByTagName('canvas');
            for (var i=0; i<tags.length; ++i) {
                if (tags[i].__object__ && tags[i].__object__.isRGraph && tags[i].__object__.get('annotatable')) {
                    RGraph.replayAnnotations(tags[i].__object__);
                }
            }
        }, 100); // This delay is sufficient to wait before replaying the annotations
    }, false);








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