// 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 gunction shows a context menu containing the parameters
    // provided to it
    // 
    // @param object canvas    The canvas object
    // @param array  menuitems The context menu menuitems
    // @param object e         The event object
    //
    RGraph.contextMenu = function ()
    {
        var args      = RGraph.getArgs(arguments, 'object,menuitems,event'),
            obj       = args.object,
            menuitems = args.menuitems,
            e         = args.event,
            canvas    = obj.canvas;

        //
        // Fire the custom RGraph event onbeforecontextmenu
        //
        RGraph.fireCustomEvent(obj, 'onbeforecontextmenu');

        //
        // Hide any existing menu
        //
        if (RGraph.Registry.get('contextmenu')) {
            RGraph.hideContext();
        }

        //
        // Hide the palette if necessary
        //
        RGraph.hidePalette();
        
        //
        // This is here to ensure annotating is OFF
        //
        obj.set('mousedown', false);

        var x = e.pageX;
        var y = e.pageY;
        
        var div = document.createElement('div');
            div.className             = 'RGraph_contextmenu';
            div.__canvas__            = canvas; // Store a reference to the canvas on the contextmenu object
            div.style.position        = 'absolute';
            div.style.left            = 0;
            div.style.top             = 0;
            div.style.border          = '1px solid #666';
            div.style.backgroundColor = 'white';
            div.style.boxShadow       = '1px 1px 3px #ddd';
            div.style.MozBoxShadow    = '1px 1px 3px #ddd';
            div.style.WebkitBoxShadow = '1px 1px 3px #ddd';
            div.style.opacity         = 0;
            div.style.lineHeight      = 'initial';
        div = document.body.appendChild(div);

        var bg = document.createElement('div');
            bg.className             = 'RGraph_contextmenu_background';
            bg.style.position        = 'absolute';
            bg.style.backgroundColor = '#ccc';
            bg.style.borderRight     = '1px solid #aaa';
            bg.style.top             = 0;
            bg.style.left            = 0;
            bg.style.width           = '18px';
            bg.style.height          = '100%';
            bg.style.opacity         = 0;
        bg  = div.appendChild(bg);


        //
        // Now add the context menu items
        //
        for (i=0; i<menuitems.length; ++i) {
            
            var menuitem = document.createElement('div');
            
            menuitem.__object__      = obj;
            menuitem.__canvas__      = canvas;
            menuitem.__contextmenu__ = div;
            menuitem.className       = 'RGraph_contextmenu_item';

            if (menuitems[i]) {
                menuitem.style.padding    = '2px 5px 2px 23px';
                menuitem.style.fontFamily = 'Arial';
                menuitem.style.fontSize   = '10pt';
                menuitem.style.textAlign  = 'left';
                menuitem.style.fontWeight = 'normal';
                menuitem.innerHTML        = menuitems[i][0];

                if (RGraph.isArray(menuitems[i][1])) {
                    menuitem.style.backgroundImage = 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAQUlEQVQImY3NoQ2AMABE0ZewABMyGQ6mqWODzlAclBSFO8HZl8uf0FFxCHtwYkt4Y6ChYE44cGH9/fyae2p2LAleW9oVTQuVf6gAAAAASUVORK5CYII=)';
                    menuitem.style.backgroundRepeat = 'no-repeat';
                    menuitem.style.backgroundPosition = '97% center';
                }

                //
                // Add the mouseover event
                //
                if (menuitems[i][1]) {
                    menuitem.addEventListener("mouseover", function (e) {RGraph.hideContextSubmenu(); e.target.style.backgroundColor = 'rgba(0,0,0,0.2)'; e.target.style.cursor = 'pointer';}, false);
                    menuitem.addEventListener("mouseout", function (e) {e.target.style.backgroundColor = ''; e.target.style.cursor = 'default';}, false);
                } else {
                    menuitem.addEventListener("mouseover", function (e) {e.target.style.cursor = 'default';}, false);
                    menuitem.addEventListener("mouseout", function (e) {e.target.style.cursor = 'default';}, false);
                }

            } else {
                menuitem.style.borderBottom = '1px solid #ddd';
                menuitem.style.marginLeft = '25px';
            }

            div.appendChild(menuitem);

            //
            // Install the event handler that calls the menuitem
            //
            if (menuitems[i] && menuitems[i][1] && typeof menuitems[i][1] == 'function') {
                
                menuitem.addEventListener('click', menuitems[i][1], false);
                (function (index)
                {
                    menuitem.addEventListener('contextmenu', function (e)
                    {
                        RGraph.hideContext();
                        (menuitems[index][1])(e);
                    }, false);
                })(i);
            
            // Submenu
            } else if (menuitems[i] && menuitems[i][1] && RGraph.isArray(menuitems[i][1])) {
                (function ()
                {
                    var tmp = menuitems[i][1]; // This is here because of "references vs primitives" and how they're passed around in Javascript
                    menuitem.addEventListener('mouseover', function (e)
                    {
                        RGraph.contextMenu_submenu(obj, tmp, e.target);
                    }, false);
                    menuitem.addEventListener('click', function (e)
                    {
                        e.stopPropagation();
                    }, false);
                })();
            }
        }

        //
        // Now all the menu items have been added, set the shadow width
        // Shadow now handled by CSS3
        //
        div.style.width = (div.offsetWidth + 10) + 'px';
        div.style.height = (div.offsetHeight - 2) + 'px';

        // Show the menu to the left or the right (normal) of the cursor?
        if (x + div.offsetWidth > document.body.offsetWidth) {
            x -= div.offsetWidth;
        }
        
        // Reposition the menu (now we have the real offsetWidth)
        div.style.left = x + 'px';
        div.style.top = y + 'px';

        //
        // Do a little fade in effect
        //
        for (let i=1; i<=5; ++i) {
            setTimeout(function ()
            {
                //
                // The fade effect on the main context menu
                //
                if (obj = RGraph.Registry.get('contextmenu')) {
                    obj.style.opacity = 0.2 * i;
                }
                
                //
                // The fade effect on the left gray bar
                //
                if (obj = RGraph.Registry.get('contextmenu.bg')) {
                    obj.style.opacity = 0.2 * i;
                }
            }, i * 25);
        }


        // Store the context menu in the registry
        RGraph.Registry.set('contextmenu', div);
        RGraph.Registry.set('contextmenu.bg', bg);
        RGraph.Registry.get('contextmenu').oncontextmenu = function () {return false;};
        RGraph.Registry.get('contextmenu.bg').oncontextmenu = function () {return false;};

        //
        // Install the event handlers that hide the context menu
        //
        canvas.addEventListener('click', function ()
        {
            RGraph.hideContext();
        }, false);

        window.addEventListener('click', function ()
        {
            RGraph.hideContext();
        }, false);

        window.addEventListener('resize', function ()
        {
            RGraph.hideContext();
        }, false);

        
        //
        // Add the __shape__ object to the context menu
        //
        
        //
        // Set the shape coords from the .getShape()  method
        //
        if (typeof obj.getShape == 'function') {
            RGraph.Registry.get('contextmenu').__shape__ = obj.getShape(e);
        }


        e.stopPropagation();

        //
        // Fire the (RGraph) oncontextmenu event
        //
        RGraph.fireCustomEvent(obj, 'oncontextmenu');

        return false;
    };








    //
    // Hides the context menu if it's currently visible
    //
    RGraph.hideContext = function ()
    {
        var cm   = RGraph.Registry.get('contextmenu');
        var cmbg = RGraph.Registry.get('contextmenu.bg');
        
        //Hide any submenu currently being displayed
        RGraph.hideContextSubmenu();

        if (cm) {
            cm.parentNode.removeChild(cm);
            cmbg.parentNode.removeChild(cmbg);

            cm.style.visibility = 'hidden';
            cm.style.display = 'none';
            RGraph.Registry.set('contextmenu', null);
            
            cmbg.style.visibility = 'hidden';
            cmbg.style.display = 'none';
            RGraph.Registry.set('contextmenu.bg', null);
        }
    };








    //
    // Hides the context menus SUBMENU if it's currently visible
    //
    RGraph.hideContextSubmenu = function ()
    {
        var sub  = RGraph.Registry.get('contextmenu.submenu');

        if (sub) {
            sub.style.visibility = 'none';
            sub.style.display    = 'none';
            RGraph.Registry.set('contextmenu.submenu', null);
        }
    };








    //
    // Shows the context menu after making a few checks - not opera (doesn't support oncontextmenu,
    // not safari (tempermentality), not chrome (hmmm)
    //
    RGraph.showContext = function ()
    {
        var args = RGraph.getArgs(arguments, 'object'),
            obj  = args.object;

        RGraph.hidePalette();

        if (obj.get('contextmenu') && obj.get('contextmenu').length) {

            var isOpera      = RGraph.ISOPERA;
            var isSafari     = RGraph.ISSAFARI;
            var isChrome     = RGraph.ISCHROME;
            var isMacFirefox = navigator.userAgent.indexOf('Firefox') > 0 && navigator.userAgent.indexOf('Mac') > 0;
            var isIE9        = RGraph.ISIE9;

            if (((!isOpera && !isSafari) || isChrome) && !isMacFirefox) {

                obj.canvas.oncontextmenu = function (e)
                {
                    if (e.ctrlKey) return true;

                    RGraph.contextMenu(obj, obj.get('contextmenu'), e);

                    return false;
                }

            //
            // Accomodate Opera and Safari - use double click event
            //
            } else {

                obj.canvas.addEventListener('dblclick', function (e)
                {
                    if (e.ctrlKey) return true;

                    if (!RGraph.Registry.get('contextmenu')) {
                        RGraph.contextMenu(obj, obj.get('contextmenu'), e);
                    }
                }, false);
            }
        }
    };








    //
    // This draws a submenu should it be necessary
    // 
    // @param object obj  The graph object
    // @param object menu The context menu
    //
    RGraph.contextMenu_submenu = function ()
    {
        var args           = RGraph.getArgs(arguments, 'object,menuitems,parentMenuItem'),
            obj            = args.object,
            menuitems      = args.menuitems,
            parentMenuItem = args.parentMenuItem;

        RGraph.hideContextSubmenu();

        var canvas  = obj.canvas;
        var context = obj.context;
        var menu    = parentMenuItem.parentNode;

        //
        // Set the style of the submenu div
        //
        var subMenu = document.createElement('DIV');
            subMenu.style.position = 'absolute';
            
            // 11/11/24
            //
            // Why is this here?!
            //
            //subMenu.style.width = '100px';
            //

            subMenu.style.top = menu.offsetTop + parentMenuItem.offsetTop + 'px';
            subMenu.style.left            = (menu.offsetLeft + menu.offsetWidth - (RGraph.ISOLD ? 9 : 0)) + 'px';
            subMenu.style.backgroundColor = 'white';
            subMenu.style.border          = '1px solid black';
            subMenu.className             = 'RGraph_contextmenu';
            subMenu.__contextmenu__       = menu;
            subMenu.style.lineHeight      = 'initial';
            subMenu.style.boxShadow       = '3px 3px 3px rgba(96,96,96,0.5)';
            subMenu.style.MozBoxShadow    = '3px 3px 3px rgba(96,96,96,0.5)';
            subMenu.style.WebkitBoxShadow = '3px 3px 3px rgba(96,96,96,0.5)';
            subMenu.style.filter          = 'progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=135)';
        document.body.appendChild(subMenu);
        
        for (var i=0; i<menuitems.length; ++i) {
                    
            var menuitem = document.createElement('DIV');
            
            menuitem.__canvas__      = canvas;
            menuitem.__contextmenu__ = menu;
            menuitem.className       = 'RGraph_contextmenu_item';
            
            if (menuitems[i]) {
                menuitem.style.padding    = '2px 5px 2px 23px';
                menuitem.style.fontFamily = 'Arial';
                menuitem.style.fontSize   = '10pt';
                menuitem.style.fontWeight = 'normal';
                menuitem.style.textAlign  = 'left';
                menuitem.innerHTML = menuitems[i][0];
        
                if (menuitems[i][1]) {
                    menuitem.addEventListener("mouseover", function (e) {e.target.style.backgroundColor = 'rgba(0,0,0,0.2)'; e.target.style.cursor = 'pointer';}, false);
                    menuitem.addEventListener("mouseout", function (e) {e.target.style.backgroundColor = 'inherit'; e.target.style.cursor = 'default';}, false);
                } else {
                    menuitem.addEventListener("mouseover", function (e) {e.target.style.cursor = 'default';}, false);
                    menuitem.addEventListener("mouseout", function (e) {e.target.style.cursor = 'default';}, false);
                }
            } else {
                menuitem.style.borderBottom = '1px solid #ddd';
                menuitem.style.marginLeft = '25px';
            }
            
            subMenu.appendChild(menuitem);
        
            if (menuitems[i] && menuitems[i][1]) {
                (function (index)
                {
                    var func = function (e)
                    {
                        RGraph.hideContext();
                        (menuitems[index][1])(e);
                        e.preventDefault();
                    };
                    menuitem.addEventListener('click', func, false);
                    menuitem.addEventListener('contextmenu', func, false);
                })(i);
            }
        }


        var bg                   = document.createElement('DIV');
            bg.className             = 'RGraph_contextmenu_background';
            bg.style.position        = 'absolute';
            bg.style.backgroundColor = '#ccc';
            bg.style.borderRight     = '1px solid #aaa';
            bg.style.top             = 0;
            bg.style.left            = 0;
            bg.style.width           = '18px';
            bg.style.height          = '100%';
        bg  = subMenu.appendChild(bg);

        RGraph.Registry.set('contextmenu.submenu', subMenu);
    };








    //
    // A function designed to be used in conjunction with the
    // context menu to allow people to get image versions of
    // canvas tags.
    // 
    // @param canvas Optionally you can pass in the canvas, which will be used
    //
    RGraph.showPNG = function ()
    {
        if (RGraph.ISIE8) {
            alert('[RGRAPH PNG] Sorry, showing a PNG is not supported on MSIE8.');
            return;
        }

        if (arguments[0] && arguments[0].id) {
            var canvas = arguments[0];
            var event  = arguments[1];
        
        } else if (RGraph.Registry.get('contextmenu')) {
            var canvas = RGraph.Registry.get('contextmenu').__canvas__;
        
        } else {
            alert('[RGRAPH SHOWPNG] Could not find canvas!');
        }

        var obj = canvas.__object__;

        //
        // Create the gray background DIV to cover the page
        //
        var bg = document.createElement('DIV');
            bg.id = '__rgraph_image_bg__';
            bg.style.position        = 'fixed';
            bg.style.top             = '-10px';
            bg.style.left            = '-10px';
            bg.style.width           = '5000px';
            bg.style.height          = '5000px';
            bg.style.backgroundColor = 'rgb(204,204,204)';
            bg.style.opacity         = 0;
        document.body.appendChild(bg);
        
        
        //
        // Create the div that the graph sits in
        //
        var div = document.createElement('DIV');
            div.style.backgroundColor   = 'white';
            div.style.opacity           = 0;
            div.style.border            = '1px solid black';
            div.style.position          = 'fixed';
            div.style.top               = '20%';
            div.style.width             = canvas.offsetWidth + 'px';
            div.style.height            = canvas.offsetHeight + 35 + 'px';
            div.style.left              = (document.body.clientWidth / 2) - (canvas.offsetWidth / 2) + 'px';
            div.style.padding           = '5px';
            div.style.borderRadius      = '10px';
            div.style.boxShadow         = '0 0 15px rgba(96,96,96,0.5)';
            div.__canvas__              = canvas;
            div.__object__              = obj;
            div.id                      = '__rgraph_image_div__';
        document.body.appendChild(div);

        
        //
        // Add the HTML text inputs 
        //
        div.innerHTML += '<div id="rgraph_showpng_div_container"><textarea onclick="this.select()" readonly="readonly" id="__rgraph_dataurl__">' + canvas.toDataURL() + '</textarea></div>';

            var nestedTextarea = document.getElementById('__rgraph_dataurl__');
                nestedTextarea.style.overflow = 'hidden';
                nestedTextarea.style.height   = '20px';
                nestedTextarea.style.width    = (canvas.offsetWidth - obj.marginLeft - obj.marginRight) + 'px';
                nestedTextarea.style.position = 'relative';
                nestedTextarea.style.left     = obj.marginLeft + 'px';

            var nestedDiv = document.getElementById('rgraph_showpng_div_container');
                nestedDiv.style.position     = 'absolute';
                //nestedDiv.style.marginLeft = '10px';
                nestedDiv.style.top          = canvas.offsetHeight + 'px';
                nestedDiv.style.width        = canvas.offsetWidth + 'px';
                nestedDiv.style.height       = '25px';

        

//
// Commented out because, despite scaling the image down, the
// images that are produced are of a lower quality.
//
// Since scaling was introduced when an image is requested the
// canvas has to be copied on to a smaller canvas and then a
// picture of that is returned (ie with the correct dimensions).
//
/*
var tmpCanvas = document.createElement('canvas');
    tmpCanvas.width = canvas.offsetWidth;
    tmpCanvas.height = canvas.offsetHeight;
document.body.appendChild(tmpCanvas);

tmpCanvas.getContext('2d').drawImage(
    canvas,
    0,0,canvas.width, canvas.height,
    0,0,tmpCanvas.width, tmpCanvas.height
);
*/
        //
        // Create the image rendition of the graph
        //
        var img = document.createElement('IMG');
            RGraph.Registry.set('png', img);
            img.__canvas__  = canvas;
            img.__object__  = obj;
            img.id          = '__rgraph_image_img__';
            img.className   = 'RGraph_png';
            img.src         = canvas.toDataURL();
            img.width       = canvas.offsetWidth;
            img.height      = canvas.offsetHeight;
        div.appendChild(img);
        
        setTimeout(function ()
        {
            document.getElementById("__rgraph_dataurl__").select();
        }, 25);
        
        window.addEventListener('resize', function (e)
        {
            var img = RGraph.Registry.get('png');img.style.left = (document.body.clientWidth / 2) - (img.width / 2) + 'px';
        }, false);
        
        bg.onclick = function (e)
        {
            var div = document.getElementById("__rgraph_image_div__");
            var bg = document.getElementById("__rgraph_image_bg__");

            if (div) {
                div.style.opacity = 0;

                div.parentNode.removeChild(div);

                div.id = '';
                div.style.display = 'none';
                div = null;
            }

            if (bg) {
                bg.style.opacity = 0;
                bg.id            = '';
                bg.style.display = 'none';
                bg               = null;
            }
        }
        
        window.addEventListener('resize', function (e)
        {
            bg.onclick(e);
        }, false)
        
        //
        // This sets the image BG and the DIV as global variables, circumventing repeated calls to document.getElementById()
        //
        RGraph.showpng_image_bg  = bg;
        RGraph.showpng_image_div = div;
        //
        // Do a little fade in effect
        //
        for (let i=1; i<=5; ++i) {
            setTimeout(function ()
            {
                RGraph.showpng_image_bg.style.opacity  = 0.1 * i;
                RGraph.showpng_image_div.style.opacity = 0.2 * i;
            }, i * 25);
        }

        
        img.onclick = function (e)
        {
            if (e.stopPropagation) e.stopPropagation();
            else event.cancelBubble = true;
        }
        
        if (event && event.stopPropagation) {
            event.stopPropagation();
        }
    };

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