rgraph-rails 1.0.1

data/vendor/assets/javascripts/RGraph.common.annotate.js

@@ -0,0 +1,399 @@
+// version: 2015-11-02
+    /**
+    * o--------------------------------------------------------------------------------o
+    * | This file is part of the RGraph package - you can learn more at:               |
+    * |                                                                                |
+    * |                          http://www.rgraph.net                                 |
+    * |                                                                                |
+    * | RGraph is dual licensed under the Open Source GPL (General Public License)     |
+    * | v2.0 license and a commercial license which means that you're not bound by     |
+    * | the terms of the GPL. The commercial license is just �99 (GBP) and you can     |
+    * | read about it here:                                                            |
+    * |                      http://www.rgraph.net/license                             |
+    * o--------------------------------------------------------------------------------o
+    */
+
+    RGraph = window.RGraph || {isRGraph: true};
+
+// Module pattern
+(function (win, doc, undefined)
+{
+    var RG  = RGraph,
+        ua  = navigator.userAgent,
+        ma  = Math;
+
+
+
+
+    /**
+    * This installs some event handlers
+    * 
+    * Checking the RGraph.Annotate flag means the annotate code only runs once
+    */
+    RG.annotating_canvas_onmousedown = function (e)
+    {
+        if (e.button === 0) {
+
+            e.target.__object__.Set('chart.mousedown', true);
+
+            // Get the object from the canvas. Annotating must be enabled on the
+            // last object defined
+            var obj  = e.target.__object__,
+                prop = obj.properties
+
+            // This starts the annotating "path" and set the color
+            obj.context.beginPath();
+
+                obj.context.strokeStyle = obj.Get('chart.annotate.color');
+                obj.context.lineWidth = obj.Get('chart.annotate.linewidth');
+
+                var mouseXY = RG.getMouseXY(e),
+                    mouseX  = mouseXY[0],
+                    mouseY  = mouseXY[1]
+
+                // Allow for the Bar chart 3D
+                if (obj.type === 'bar' && prop['chart.variant'] === '3d') {
+                    var adjustment = prop['chart.variant.threed.angle'] * mouseXY[0];
+                    mouseY -= adjustment;
+                }
+
+                // Clear the annotation recording
+                RG.Registry.Set('annotate.actions', [obj.Get('chart.annotate.color')]);
+    
+                // This sets the initial X/Y position
+                obj.context.moveTo(mouseX, mouseY);
+                RG.Registry.Set('annotate.last.coordinates', [mouseX,mouseY]);
+                
+                RG.Registry.Set('started.annotating', false);
+                RG.Registry.Set('chart.annotating', obj);
+
+                // Fire the onannotatebegin event.
+                RG.FireCustomEvent(obj, 'onannotatebegin');
+        }
+        
+        return false;
+    };
+
+
+
+
+    /**
+    * This cancels annotating for ALL canvases
+    */
+    RG.annotating_window_onmouseup = function (e)
+    {
+        var obj  = RG.Registry.Get('chart.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('chart.mousedown', false);
+            }
+        }
+
+        // Store the annotations in browser storage if it's available
+        if (RG.Registry.Get('annotate.actions') && RG.Registry.Get('annotate.actions').length > 0 && win.localStorage) {
+
+            var id = '__rgraph_annotations_' + e.target.id + '__';
+            var annotations  = win.localStorage[id] ? win.localStorage[id] + '|' : '';
+                annotations += RG.Registry.Get('annotate.actions');
+
+            // Store the annotations information in HTML5 browser storage here
+            win.localStorage[id] = annotations;
+        }
+        
+        // Clear the recorded annotations
+        RG.Registry.Set('annotate.actions', []);
+        
+        // Fire the annotate event
+        RG.FireCustomEvent(obj, 'onannotateend');
+    };
+
+
+
+
+    /**
+    * The canvas onmousemove function
+    */
+    RGraph.annotating_canvas_onmousemove = function (e)
+    {
+        var obj     = e.target.__object__;
+        var prop    = obj.properties;
+        var mouseXY = RG.getMouseXY(e);
+        var mouseX  = mouseXY[0];
+        var mouseY  = mouseXY[1];
+        var lastXY = RG.Registry.Get('annotate.last.coordinates');
+
+        if (obj.Get('chart.mousedown')) {
+            
+            // Allow for the Bar chart 3D
+            if (obj.type === 'bar' && prop['chart.variant'] === '3d') {
+                var adjustment = prop['chart.variant.threed.angle'] * mouseXY[0];
+                mouseY -= adjustment;
+            }
+
+            obj.context.beginPath();
+            
+            if (!lastXY) {
+                obj.context.moveTo(mouseX, mouseY)
+            } else {
+                obj.context.strokeStyle = obj.properties['chart.annotate.color'];
+                obj.context.moveTo(lastXY[0], lastXY[1]);
+                obj.context.lineTo(mouseX, mouseY);
+            }
+
+            RG.Registry.Set('annotate.actions', RG.Registry.Get('annotate.actions') + '|' + mouseX + ',' + mouseY);
+            RG.Registry.Set('annotate.last.coordinates', [mouseX,mouseY]);
+
+            RG.FireCustomEvent(obj, 'onannotate');
+            obj.context.stroke();
+        }
+    };
+
+
+
+
+    /**
+    * Shows the mini palette used for annotations
+    * 
+    * @param object e The event object
+    */
+    RG.ShowPalette =
+    RG.Showpalette = function (e)
+    {
+        var isSafari = navigator.userAgent.indexOf('Safari') ? true : false;
+
+        e = RG.FixEventObject(e);
+
+        var canvas  = e.target.parentNode.__canvas__,
+            context = canvas.getContext('2d'),
+            obj     = canvas.__object__,
+            div     = document.createElement('DIV'),
+            coords  = RG.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 black';
+        div.style.left               = 0;
+        div.style.top                = 0;
+        div.style.padding            = '3px';
+        div.style.paddingLeft        = '5px';
+        div.style.opacity            = 0;
+        div.style.boxShadow          = 'rgba(96,96,96,0.5) 3px 3px 3px';
+        div.style.WebkitBoxShadow    = 'rgba(96,96,96,0.5) 3px 3px 3px';
+        div.style.MozBoxShadow       = 'rgba(96,96,96,0.5) 3px 3px 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('chart.annotate.color', 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('chart.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 ()
+        {
+            RG.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
+    */
+    RG.clearAnnotations =
+    RG.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
+    */
+    RG.replayAnnotations =
+    RG.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;
+
+        context.beginPath();
+        context.lineWidth = obj.Get('annotate.linewidth');
+
+        if (annotations && annotations.length) {
+            annotations = annotations.split('|');
+        } else {
+            return;
+        }
+
+
+        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();
+    };
+
+
+
+
+    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('chart.annotatable')) {
+                    RG.replayAnnotations(tags[i].__object__);
+                }
+            }
+        }, 100); // This delay is sufficient to wait before replaying the annotations
+    }, false);
+
+
+
+
+// End module pattern
+})(window, document);

data/vendor/assets/javascripts/RGraph.common.context.js

@@ -0,0 +1,600 @@
+// version: 2015-11-02
+    /**
+    * o--------------------------------------------------------------------------------o
+    * | This file is part of the RGraph package - you can learn more at:               |
+    * |                                                                                |
+    * |                          http://www.rgraph.net                                 |
+    * |                                                                                |
+    * | RGraph is dual licensed under the Open Source GPL (General Public License)     |
+    * | v2.0 license and a commercial license which means that you're not bound by     |
+    * | the terms of the GPL. The commercial license is just �99 (GBP) and you can     |
+    * | read about it here:                                                            |
+    * |                      http://www.rgraph.net/license                             |
+    * o--------------------------------------------------------------------------------o
+    */
+
+    RGraph = window.RGraph || {isRGraph: true};
+
+// Module pattern
+(function (win, doc, undefined)
+{
+    var RG  = RGraph,
+        ua  = navigator.userAgent,
+        ma  = Math;
+
+
+
+    /**
+    * 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
+    */
+    RG.contextmenu =
+    RG.Contextmenu = function (obj, menuitems, e)
+    {
+        var canvas = obj.canvas;
+
+        e = RG.FixEventObject(e);
+
+        /**
+        * Fire the custom RGraph event onbeforecontextmenu
+        */
+        RG.FireCustomEvent(obj, 'onbeforecontextmenu');
+
+        /**
+        * Hide any existing menu
+        */
+        if (RG.Registry.Get('chart.contextmenu')) {
+            RG.HideContext();
+        }
+        
+        // Hide any zoomed canvas
+        RG.HideZoomedCanvas();
+
+        /**
+        * Hide the palette if necessary
+        */
+        RG.HidePalette();
+        
+        /**
+        * This is here to ensure annotating is OFF
+        */
+        obj.Set('chart.mousedown', false);
+
+        var x      = e.pageX;
+        var y      = e.pageY;
+        var div    = document.createElement('div');
+        var bg     = 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 black';
+        div.style.backgroundColor = 'white';
+        div.style.boxShadow       = '3px 3px 3px rgba(96,96,96,0.5)';
+        div.style.MozBoxShadow    = '3px 3px 3px rgba(96,96,96,0.5)';
+        div.style.WebkitBoxShadow = '3px 3px 3px rgba(96,96,96,0.5)';
+        div.style.filter          = 'progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=135)';
+        div.style.opacity         = 0;
+
+        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;
+
+
+        div = document.body.appendChild(div);
+        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 (RG.is_array(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]) {
+                    if (menuitem.addEventListener) {
+                        menuitem.addEventListener("mouseover", function (e) {RG.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 = 'inherit'; e.target.style.cursor = 'default';}, false);
+                    } else  {
+                        menuitem.attachEvent("onmouseover", function () {RG.HideContextSubmenu();event.srcElement.style.backgroundColor = '#eee';event.srcElement.style.cursor = 'pointer';}
+                    , false);
+                        menuitem.attachEvent("onmouseout", function () {event.srcElement.style.backgroundColor = 'inherit'; event.srcElement.style.cursor = 'default';}, false);
+                    }
+                } else {
+                    if (menuitem.addEventListener) {
+                        menuitem.addEventListener("mouseover", function (e) {e.target.style.cursor = 'default';}, false);
+                        menuitem.addEventListener("mouseout", function (e) {e.target.style.cursor = 'default';}, false);
+                    } else  {
+                        menuitem.attachEvent("onmouseover", function () {event.srcElement.style.cursor = 'default'}, false);
+                        menuitem.attachEvent("onmouseout", function () {event.srcElement.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);
+            
+            // Submenu
+            } else if (menuitems[i] && menuitems[i][1] && RG.is_array(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
+                    
+                    // TODO This may need attention
+                    menuitem.addEventListener('mouseover', function (e) {RG.Contextmenu_submenu(obj, tmp, e.target);}, 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
+        */
+        setTimeout("if (obj = RGraph.Registry.Get('chart.contextmenu')) obj.style.opacity = 0.2", 50);
+        setTimeout("if (obj = RGraph.Registry.Get('chart.contextmenu')) obj.style.opacity = 0.4", 100);
+        setTimeout("if (obj = RGraph.Registry.Get('chart.contextmenu')) obj.style.opacity = 0.6", 150);
+        setTimeout("if (obj = RGraph.Registry.Get('chart.contextmenu')) obj.style.opacity = 0.8", 200);
+        setTimeout("if (obj = RGraph.Registry.Get('chart.contextmenu')) obj.style.opacity = 1", 250);
+
+        // The fade in effect on the left gray bar
+        setTimeout("if (obj = RGraph.Registry.Get('chart.contextmenu.bg')) obj.style.opacity = 0.2", 50);
+        setTimeout("if (obj = RGraph.Registry.Get('chart.contextmenu.bg')) obj.style.opacity = 0.4", 100);
+        setTimeout("if (obj = RGraph.Registry.Get('chart.contextmenu.bg')) obj.style.opacity = 0.6", 150);
+        setTimeout("if (obj = RGraph.Registry.Get('chart.contextmenu.bg')) obj.style.opacity = 0.8", 200);
+        setTimeout("if (obj = RGraph.Registry.Get('chart.contextmenu.bg')) obj.style.opacity = 1", 250);
+
+        // Store the context menu in the registry
+        RG.Registry.Set('chart.contextmenu', div);
+        RG.Registry.Set('chart.contextmenu.bg', bg);
+        RG.Registry.Get('chart.contextmenu').oncontextmenu = function () {return false;};
+        RG.Registry.Get('chart.contextmenu.bg').oncontextmenu = function () {return false;};
+
+        /**
+        * Install the event handlers that hide the context menu
+        */
+        canvas.addEventListener('click', function () {RG.HideContext();}, false);
+
+        window.addEventListener('click', function ()
+        {
+            RG.HideContext();
+        }, false);
+
+        window.addEventListener('resize', function ()
+        {
+            RG.HideContext();
+        }, false);
+
+        
+        /**
+        * Add the __shape__ object to the context menu
+        */
+        
+        /**
+        * Set the shape coords from the .getShape()  method
+        */
+        if (typeof(obj.getShape) == 'function') {
+            RG.Registry.Get('chart.contextmenu').__shape__ = obj.getShape(e);
+        }
+
+
+        e.stopPropagation();
+
+        /**
+        * Fire the (RGraph) oncontextmenu event
+        */
+        RG.FireCustomEvent(obj, 'oncontextmenu');
+
+        return false;
+    };
+
+
+
+
+    /**
+    * Hides the context menu if it's currently visible
+    */
+    RG.hideContext =
+    RG.HideContext = function ()
+    {
+        var cm   = RG.Registry.Get('chart.contextmenu');
+        var cmbg = RG.Registry.Get('chart.contextmenu.bg');
+        
+        //Hide any submenu currently being displayed
+        RG.HideContextSubmenu();
+
+        if (cm) {
+            cm.parentNode.removeChild(cm);
+            cmbg.parentNode.removeChild(cmbg);
+
+            cm.style.visibility = 'hidden';
+            cm.style.display = 'none';
+            RG.Registry.Set('chart.contextmenu', null);
+            
+            cmbg.style.visibility = 'hidden';
+            cmbg.style.display = 'none';
+            RG.Registry.Set('chart.contextmenu.bg', null);
+        }
+    };
+
+
+
+
+    /**
+    * Hides the context menus SUBMENU if it's currently visible
+    */
+    RG.hideContextSubmenu =
+    RG.HideContextSubmenu = function ()
+    {
+        var sub  = RG.Registry.Get('chart.contextmenu.submenu');
+
+        if (sub) {
+            sub.style.visibility = 'none';
+            sub.style.display    = 'none';
+            RG.Registry.Set('chart.contextmenu.submenu', null);
+        }
+    };
+
+
+
+
+    /**
+    * Shows the context menu after making a few checks - not opera (doesn't support oncontextmenu,
+    * not safari (tempermentality), not chrome (hmmm)
+    */
+    RG.showContext =
+    RG.ShowContext = function (obj)
+    {
+        RG.HidePalette();
+
+        if (obj.Get('chart.contextmenu') && obj.Get('chart.contextmenu').length) {
+
+            var isOpera      = navigator.userAgent.indexOf('Opera') >= 0;
+            var isSafari     = navigator.userAgent.indexOf('Safari') >= 0;
+            var isChrome     = navigator.userAgent.indexOf('Chrome') >= 0;
+            var isMacFirefox = navigator.userAgent.indexOf('Firefox') > 0 && navigator.userAgent.indexOf('Mac') > 0;
+            var isIE9        = navigator.userAgent.indexOf('MSIE 9') >= 0;
+
+            if (((!isOpera && !isSafari) || isChrome) && !isMacFirefox) {
+
+                obj.canvas.oncontextmenu = function (e)
+                {
+                     e = RG.FixEventObject(e);
+
+                    if (e.ctrlKey) return true;
+
+                    RG.Contextmenu(obj, obj.Get('chart.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 (!RG.Registry.Get('chart.contextmenu')) {
+                        RG.Contextmenu(obj, obj.Get('chart.contextmenu'), e);
+                    }
+                }, false);
+            }
+        }
+    };
+
+
+
+
+    /**
+    * This draws a submenu should it be necessary
+    * 
+    * @param object obj  The graph object
+    * @param object menu The context menu
+    */
+    RG.contextmenu_submenu =
+    RG.Contextmenu_submenu = function (obj, menuitems, parentMenuItem)
+    {
+        RG.HideContextSubmenu();
+
+        var canvas  = obj.canvas;
+        var context = obj.context;
+        var menu    = parentMenuItem.parentNode;
+
+        var subMenu = document.createElement('DIV');
+        subMenu.style.position = 'absolute';
+        subMenu.style.width = '100px';
+        subMenu.style.top = menu.offsetTop + parentMenuItem.offsetTop + 'px';
+        subMenu.style.left            = (menu.offsetLeft + menu.offsetWidth - (RG.ISOLD ? 9 : 0)) + 'px';
+        subMenu.style.backgroundColor = 'white';
+        subMenu.style.border          = '1px solid black';
+        subMenu.className             = 'RGraph_contextmenu';
+        subMenu.__contextmenu__       = menu;
+        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]) {
+                    if (menuitem.addEventListener) {
+                        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.attachEvent("onmouseover", function () {event.srcElement.style.backgroundColor = 'rgba(0,0,0,0.2)'; event.srcElement.style.cursor = 'pointer'}, false);
+                        menuitem.attachEvent("onmouseout", function () {event.srcElement.style.backgroundColor = 'inherit'; event.srcElement.style.cursor = 'default';}, false);
+                    }
+                } else {
+                    if (menuitem.addEventListener) {
+                        menuitem.addEventListener("mouseover", function (e) {e.target.style.cursor = 'default';}, false);
+                        menuitem.addEventListener("mouseout", function (e) {e.target.style.cursor = 'default';}, false);
+                    } else  {
+                        menuitem.attachEvent("onmouseover", function () {event.srcElement.style.cursor = 'default'}, false);
+                        menuitem.attachEvent("onmouseout", function () {event.srcElement.style.cursor = 'default';}, false);
+                    }
+                }
+            } else {
+                menuitem.style.borderBottom = '1px solid #ddd';
+                menuitem.style.marginLeft = '25px';
+            }
+            
+            subMenu.appendChild(menuitem);
+        
+            if (menuitems[i] && menuitems[i][1]) {
+                if (document.all) {
+                    menuitem.attachEvent('onclick', menuitems[i][1]);
+                } else {
+                    menuitem.addEventListener('click', menuitems[i][1], false);
+                }
+            }
+        }
+
+
+        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);
+
+        RG.Registry.Set('chart.contextmenu.submenu', subMenu);
+    };
+
+
+
+
+    /**
+    * A function designed to be used in conjunction with thed context menu
+    * to allow people to get image versions of canvases.
+    * 
+    * @param      canvas Optionally you can pass in the canvas, which will be used
+    */
+    RG.showPNG = function ()
+    {
+        if (RG.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 (RG.Registry.Get('chart.contextmenu')) {
+            var canvas = RG.Registry.Get('chart.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.width + 'px';
+            div.style.height = canvas.height + 35 + 'px';
+            div.style.left = (document.body.clientWidth / 2) - (canvas.width / 2) + 'px';
+            div.style.padding = '5px';
+
+            div.style.borderRadius = '10px';
+            div.style.MozBorderRadius = '10px';
+            div.style.WebkitBorderRadius = '10px';
+
+            div.style.boxShadow    = '0 0 15px rgba(96,96,96,0.5)';
+            div.style.MozBoxShadow = '0 0 15px rgba(96,96,96,0.5)';
+            div.style.WebkitBoxShadow = 'rgba(96,96,96,0.5) 0 0 15px';
+
+            div.__canvas__ = canvas;
+            div.__object__ = obj;
+            div.id = '__rgraph_image_div__';
+        document.body.appendChild(div);
+
+        
+        /**
+        * Add the HTML text inputs
+        */
+        div.innerHTML += '<div style="position: absolute; margin-left: 10px; top: ' + canvas.height + 'px; width: ' + (canvas.width - 50) + 'px; height: 25px"><span style="font-size: 12pt;display: inline; display: inline-block; width: 65px; text-align: right">URL:</span><textarea style="float: right; overflow: hidden; height: 20px; width: ' + (canvas.width - obj.gutterLeft - obj.gutterRight - 80) + 'px" onclick="this.select()" readonly="readonly" id="__rgraph_dataurl__">' + canvas.toDataURL() + '</textarea></div>';
+        div.innerHTML += '<div style="position: absolute; top: ' + (canvas.height + 25) + 'px; left: ' + (obj.gutterLeft - 65 + (canvas.width / 2)) + 'px; width: ' + (canvas.width - obj.gutterRight) + 'px; font-size: 65%">A link using the URL: <a href="' + canvas.toDataURL() + '">View</a></div>'
+
+        
+        
+        /**
+        * Create the image rendition of the graph
+        */
+        var img = document.createElement('IMG');
+        RG.Registry.Set('chart.png', img);
+        img.__canvas__ = canvas;
+        img.__object__ = obj;
+        img.id = '__rgraph_image_img__';
+        img.className = 'RGraph_png';
+
+        img.src = canvas.toDataURL();
+
+        div.appendChild(img);
+        
+        setTimeout(function () {document.getElementById("__rgraph_dataurl__").select();}, 50);
+        
+        window.addEventListener('resize', function (e){var img = RG.Registry.Get('chart.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()
+        */
+        RG.showpng_image_bg  = bg;
+        RG.showpng_image_div = div;
+
+        setTimeout('RGraph.showpng_image_div.style.opacity = 0.2', 50);
+        setTimeout('RGraph.showpng_image_div.style.opacity = 0.4', 100);
+        setTimeout('RGraph.showpng_image_div.style.opacity = 0.6', 150);
+        setTimeout('RGraph.showpng_image_div.style.opacity = 0.8', 200);
+        setTimeout('RGraph.showpng_image_div.style.opacity = 1', 250);
+
+        setTimeout('RGraph.showpng_image_bg.style.opacity = 0.1', 50);
+        setTimeout('RGraph.showpng_image_bg.style.opacity = 0.2', 100);
+        setTimeout('RGraph.showpng_image_bg.style.opacity = 0.3', 150);
+        setTimeout('RGraph.showpng_image_bg.style.opacity = 0.4', 200);
+        setTimeout('RGraph.showpng_image_bg.style.opacity = 0.5', 250);
+
+
+        
+        img.onclick = function (e)
+        {
+            if (e.stopPropagation) e.stopPropagation();
+            else event.cancelBubble = true;
+        }
+        
+        if (event && event.stopPropagation) {
+            event.stopPropagation();
+        }
+    };
+
+
+
+
+// End module pattern
+})(window, document);