text:     /**
      * o------------------------------------------------------------------------------o
      * | This file is part of the RGraph package - you can learn more at:             |
      * |                                                                              |
      * |                          http://www.rgraph.net                               |
      * |                                                                              |
      * | This package is licensed under the RGraph license. For all kinds of business |
      * | purposes there is a small one-time licensing fee to pay and for non          |
      * | commercial  purposes it is free to use. You can read the full license here:  |
      * |                                                                              |
      * |                      http://www.rgraph.net/LICENSE.txt                       |
      * o------------------------------------------------------------------------------o
      */
  
      if (typeof(RGraph) == 'undefined') RGraph = {isRGraph:true,type:'common'};
  
  
      /**
      * Installs the event handlers for zooming an area of the graph
      * 
      * @param object obj Your graph object
      */
      RGraph.ZoomArea = function (obj)
      {
          if (obj.Get('chart.zoom.mode') == 'area') {
  
              var canvas  = obj.canvas;
              var context = obj.context;
              
              obj.canvas.style.cursor = 'crosshair';
              
              RGraph.Register(obj);
  
  
              canvas.onmousedown = function(e)
              {
                  var canvas = e.target;
                  var coords = RGraph.getMouseXY(e);
                  var obj    = canvas.__object__;
                      
                  if (RGraph.Registry.Get('chart.zoomed.area.div')) {
                      RGraph.Registry.Get('chart.zoomed.area.div').style.display = 'none';
                  }
  
                  if (typeof(RGraph.Registry.Get('chart.zoomed.area.divs')) == null) {
                      RGraph.Registry.Set('chart.zoomed.area.divs', []);
  
                  } else {
  
                      var divs = RGraph.Registry.Get('chart.zoomed.area.divs');
                      
                      if (divs && divs.length) {
                          for (var i=0; i<divs.length; ++i) {
                              if (divs[i]) {
                                  divs[i].style.display = 'none';
                                  divs[i] = null;
                              }
                          }
                      }
                  }
  
                  RGraph.Registry.Set('chart.zoomed.area.div', null);
                  RGraph.Registry.Set('chart.zoomed.area.mousedown', coords);
              }
      
              canvas.onmousemove = function (e)
              {
                  var startCoords = RGraph.Registry.Get('chart.zoomed.area.mousedown');
                  
                  if (startCoords && startCoords.length) {
                      var coords      = RGraph.getMouseXY(e);
                      var obj = e.target.__object__;
                      var context = obj.context;
                      var canvas  = obj.canvas;
                      var startx  = startCoords[0];
                      var starty  = startCoords[1];
                      var endx    = coords[0];
                      var endy    = coords[1];
                      var width   = endx - startx;
                      var height  = endy - starty;
                      
                      RGraph.Redraw();
                      
                      if (width >= 0 && height >= 0) {
                          context.beginPath();
                          context.lineWidth   = 1;
                          context.strokeStyle = 'black';
                          context.fillStyle   = 'rgba(220,220,220,0.3)';
                          context.fillRect(startx, starty, width, height);
                          context.strokeRect(startx, starty, width, height);
                          context.fill();
                          context.stroke();
  
                      } else if (width < -5 || height < -5) {
  
                          var canvasCoords = RGraph.getCanvasXY(canvas);
                          var noticeDiv = document.createElement('DIV');
  
                          noticeDiv.style.position = 'absolute';
                          noticeDiv.style.top  = 0;
                          noticeDiv.style.left = 0;
                          noticeDiv.style.zIndex = 99;
                          noticeDiv.style.border = '1px dashed black';
                          noticeDiv.style.backgroundColor = '#ffc1c1';
                          noticeDiv.style.MozBoxShadow = '0 0 5px #999';
                          noticeDiv.style.MozBorderRadius = '5px';
                          noticeDiv.style.WebkitBoxShadow = '0 0 5px #999';
                          noticeDiv.style.WebkitBorderRadius = '5px';
                          noticeDiv.style.borderRadius = '5px';
                          noticeDiv.style.boxShadow = '0 0 5px #999';
                          noticeDiv.style.padding = '2px';
                          noticeDiv.innerHTML = 'Zoom goes right and down';
                          document.body.appendChild(noticeDiv);
  
                          // Reposition the warning
                          noticeDiv.style.top  = canvasCoords[1] + startCoords[1] - noticeDiv.offsetHeight + 'px';
                          noticeDiv.style.left = canvasCoords[0] + startCoords[0] - (noticeDiv.offsetWidth / 2) + 'px';
                          noticeDiv.style.width = noticeDiv.offsetWidth + 'px';
                          
                          setTimeout(function () {noticeDiv.style.opacity = 0.8;}, 2100);
                          setTimeout(function () {noticeDiv.style.opacity = 0.6;}, 2200);
                          setTimeout(function () {noticeDiv.style.opacity = 0.4;}, 2300);
                          setTimeout(function () {noticeDiv.style.opacity = 0.2;}, 2400);
                          setTimeout(function () {noticeDiv.style.display = 'none';}, 2500);
                          setTimeout(function () {noticeDiv = null;}, 2600);
                      }
                  }
              }
              
              canvas.onmouseup = function (e)
              {
                  RGraph.FixEventObject(e);
  
                  var startCoords = RGraph.Registry.Get('chart.zoomed.area.mousedown');
                  var coords      = RGraph.getMouseXY(e);
  
                  // Do the zooming here
                  if (RGraph.Registry.Get('chart.zoomed.area.mousedown')) {
  
                      RGraph.Redraw();
                      
                      if (coords[0] < startCoords[0] || coords[1] < startCoords[1]) {
                          RGraph.Registry.Set('chart.zoomed.area.mousedown', false);
                          return;
                      }
  
                      var canvas       = e.target;
                      var obj          = canvas.__object__;
                      var context      = obj.context;
                      var canvasCoords = RGraph.getCanvasXY(e.target);
                      var coords       = RGraph.getMouseXY(e);
                      var startCoords  = RGraph.Registry.Get('chart.zoomed.area.mousedown');
                      var startx       = startCoords[0];
                      var starty       = startCoords[1];
                      var endx         = coords[0];
                      var endy         = coords[1];
                      var width        = Math.abs(endx - startx);
                      var height       = Math.abs(endy - starty);
                      var factor       = obj.Get('chart.zoom.factor') - 1;
                      
                      var img = document.createElement('IMG');
                      img.src = canvas.toDataURL();
                      img.style.position = 'relative';
                      img.style.left     = (factor + 1) * -1 * startx + 'px';
                      img.style.top      = (factor + 1) * -1 * starty + 'px';
                      img.width          = (factor + 1) * canvas.width;
                      img.height         = (factor + 1) * canvas.height;
  
                      var div            = document.createElement('DIV');
                      div.__object__     = obj;
                      div.className      = 'RGraph_zoomed_area';
                      div.style.position = 'absolute';
                      div.style.backgroundColor = 'white';
                      div.style.cursor = 'move';
  
                      div.style.top      = e.pageY + 'px';
                      div.style.left     = e.pageX + 'px';
                      div.origWidth      = width;
                      div.origHeight     = height;
                      div.style.width    = width + 'px';
                      div.style.height   = height + 'px';
                      div.style.border   = '1px dashed black';
                      div.style.boxShadow          = '0 0 15px black';
                      div.style.MozBoxShadow       = '0 0 15px black';
                      div.style.WebkitBoxShadow    = '0 0 15px black';
                      div.style.overflow           = 'hidden';
                      div.style.opacity            = 0;
                      div.style.zIndex             = 99;
                      
                      document.body.appendChild(div);
                      div.appendChild(img);
  
  
                      /**
                      * This facilitates expanding the zoomed area once visible (the double click)
                      */
                      div.ondblclick = function (event)
                      {
                          var event = RGraph.FixEventObject(event);
                          var img   = event.target;
                          var div   = event.target.parentNode;
                          
                          var current_width  = div.offsetWidth
                          var current_height = div.offsetHeight
                          var target_width   = img.offsetWidth;
                          var target_height  = img.offsetHeight;
                          var diff_width     = target_width - current_width;
                          var diff_height    = target_height - current_height;
                          
                          var img_offset_left = parseInt(img.offsetLeft);
                          var img_offset_top  = parseInt(img.offsetTop);
                          
                          // Global vars on purpose so the timers can access them
                          __zoomed_div_style__ = div.style;
                          __zoomed_img_style__ = img.style;
                      
                          setTimeout("__zoomed_div_style__.left = parseInt(__zoomed_div_style__.left) - " + (diff_width * 0.1) + " + 'px'", 50);
                          setTimeout("__zoomed_div_style__.left = parseInt(__zoomed_div_style__.left) - " + (diff_width * 0.1) + " + 'px'", 100);
                          setTimeout("__zoomed_div_style__.left = parseInt(__zoomed_div_style__.left) - " + (diff_width * 0.1) + " + 'px'", 150);
                          setTimeout("__zoomed_div_style__.left = parseInt(__zoomed_div_style__.left) - " + (diff_width * 0.1) + " + 'px'", 200);
                          setTimeout("__zoomed_div_style__.left = parseInt(__zoomed_div_style__.left) - " + (diff_width * 0.1) + " + 'px'", 250);
                      
                          setTimeout("__zoomed_div_style__.top = parseInt(__zoomed_div_style__.top) - " + (diff_height * 0.1) + " + 'px'", 50);
                          setTimeout("__zoomed_div_style__.top = parseInt(__zoomed_div_style__.top) - " + (diff_height * 0.1) + " + 'px'", 100);
                          setTimeout("__zoomed_div_style__.top = parseInt(__zoomed_div_style__.top) - " + (diff_height * 0.1) + " + 'px'", 150);
                          setTimeout("__zoomed_div_style__.top = parseInt(__zoomed_div_style__.top) - " + (diff_height * 0.1) + " + 'px'", 200);
                          setTimeout("__zoomed_div_style__.top = parseInt(__zoomed_div_style__.top) - " + (diff_height * 0.1) + " + 'px'", 250);
                      
                          setTimeout("__zoomed_div_style__.width = parseInt(__zoomed_div_style__.width) + " + (diff_width * 0.2) + " + 'px'", 50);
                          setTimeout("__zoomed_div_style__.width = parseInt(__zoomed_div_style__.width) + " + (diff_width * 0.2) + " + 'px'", 100);
                          setTimeout("__zoomed_div_style__.width = parseInt(__zoomed_div_style__.width) + " + (diff_width * 0.2) + " + 'px'", 150);
                          setTimeout("__zoomed_div_style__.width = parseInt(__zoomed_div_style__.width) + " + (diff_width * 0.2) + " + 'px'", 200);
                          setTimeout("__zoomed_div_style__.width = parseInt(__zoomed_div_style__.width) + " + (diff_width * 0.2) + " + 'px'", 250);
                          
                          setTimeout("__zoomed_div_style__.height = parseInt(__zoomed_div_style__.height) + " + (diff_height * 0.2) + " + 'px'", 50);
                          setTimeout("__zoomed_div_style__.height = parseInt(__zoomed_div_style__.height) + " + (diff_height * 0.2) + " + 'px'", 100);
                          setTimeout("__zoomed_div_style__.height = parseInt(__zoomed_div_style__.height) + " + (diff_height * 0.2) + " + 'px'", 150);
                          setTimeout("__zoomed_div_style__.height = parseInt(__zoomed_div_style__.height) + " + (diff_height * 0.2) + " + 'px'", 200);
                          setTimeout("__zoomed_div_style__.height = parseInt(__zoomed_div_style__.height) + " + (diff_height * 0.2) + " + 'px'", 250);
                      
                          // Move the image within the div
                          setTimeout("__zoomed_img_style__.left = " + (img_offset_left * 0.8) + " + 'px'", 50);
                          setTimeout("__zoomed_img_style__.left = " + (img_offset_left * 0.6) + " + 'px'", 100);
                          setTimeout("__zoomed_img_style__.left = " + (img_offset_left * 0.4) + " + 'px'", 150);
                          setTimeout("__zoomed_img_style__.left = " + (img_offset_left * 0.2) + " + 'px'", 200);
                          setTimeout("__zoomed_img_style__.left = 0", 250);
                          
                          setTimeout("__zoomed_img_style__.top = " + (img_offset_top * 0.8) + " + 'px'", 50);
                          setTimeout("__zoomed_img_style__.top = " + (img_offset_top * 0.6) + " + 'px'", 100);
                          setTimeout("__zoomed_img_style__.top = " + (img_offset_top * 0.4) + " + 'px'", 150);
                          setTimeout("__zoomed_img_style__.top = " + (img_offset_top * 0.2) + " + 'px'", 200);
                          setTimeout("__zoomed_img_style__.top = 0", 250);
                          
                          div.ondblclick = null;
                      }
                      /**
                      * Make the zoomed bit draggable
                      */
                      div.onmousedown = function (e)
                      {
                          e = RGraph.FixEventObject(e);
                              
                          var div = e.target.parentNode;
                          var img = div.childNodes[0];
                          
                          if (e.button == 0 || e.button == 1  ) {
                          
                              div.__offsetx__       = e.offsetX + img.offsetLeft;
                              div.__offsety__       = e.offsetY + img.offsetTop;
                          
                              RGraph.Registry.Set('chart.mousedown', div);
                              RGraph.Registry.Set('chart.button', 0);
                          
                          } else {
                          
                              img.__startx__ = e.pageX;
                              img.__starty__ = e.pageY;
                              
                              img.__originalx__ = img.offsetLeft;
                              img.__originaly__ = img.offsetTop;
  
                              RGraph.Registry.Set('chart.mousedown', img);
                              RGraph.Registry.Set('chart.button', 2);
                              
                              /**
                              * Don't show a context menu when the zoomed area is right-clicked on
                              */
                              window.oncontextmenu = function (e)
                              {
                                  e = RGraph.FixEventObject(e);
  
                                  e.stopPropagation();
                                  
                                  // [18th July 2010] Is this reallly necessary?
                                  window.oncontextmenu = function (e)
                                  {
                                      return true;
                                  }
                              
  
                                  return false;
                              }
                          }
  
                          e.stopPropagation();
  
                          return false;
                      }
                      
                      window.onmouseup = function (e)
                      {
                          RGraph.Registry.Set('chart.mousedown', false);
                      }
                      
                      window.onmousemove = function (e)
                      {
                          if (RGraph.Registry.Get('chart.mousedown') && RGraph.Registry.Get('chart.button') == 0) {
                              
                              var div = RGraph.Registry.Get('chart.mousedown');
                      
                              var x = e.pageX - div.__offsetx__;
                              var y = e.pageY - div.__offsety__;
                      
                              div.style.left = x + 'px';
                              div.style.top = y + 'px';
  
                          } else if (RGraph.Registry.Get('chart.mousedown') && RGraph.Registry.Get('chart.button') == 2) {
                              
                              var img = RGraph.Registry.Get('chart.mousedown');
                      
                              var x = img.__originalx__ + e.pageX - img.__startx__;
                              var y = img.__originaly__ + e.pageY - img.__starty__;
                      
                              img.style.left = x + 'px';
                              img.style.top  = y + 'px';
                          }
                      }
                      // End dragging code
  
  
                      var divs = RGraph.Registry.Get('chart.zoomed.area.divs');
                      if (typeof(divs) == 'object') {
                          divs.push(div);
                      } else {
                          RGraph.Registry.Set('chart.zoomed.area.divs', [div])
                      }
                      
                      // Create the background
                      var bg = document.createElement('DIV');
                      bg.style.position        = 'fixed'
                      bg.style.zIndex          = 98;
                      bg.style.top             = 0;
                      bg.style.left            = 0;
                      bg.style.backgroundColor = '#999';
                      bg.style.opacity         = 0;
                      bg.style.width           = (screen.width + 100) + 'px';
                      bg.style.height          = (screen.height + 100) + 'px';
                      document.body.appendChild(bg);
                      
                      bg.onclick = function (e)
                      {
                          div.style.display = 'none';
                          bg.style.display  = 'none';
                          div = null;
                          bg  = null;
                      }
                      
  
                      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.0;}, 250);
                      
                      setTimeout(function () {div.style.left = canvasCoords[0] + startx - (width * factor * 0.1) + 'px'}, 50);
                      setTimeout(function () {div.style.left = canvasCoords[0] + startx - (width * factor * 0.2) + 'px'}, 100);
                      setTimeout(function () {div.style.left = canvasCoords[0] + startx - (width * factor * 0.3) + 'px'}, 150);
                      setTimeout(function () {div.style.left = canvasCoords[0] + startx - (width * factor * 0.4) + 'px'}, 200);
                      setTimeout(function () {div.style.left = canvasCoords[0] + startx - (width * factor * 0.5) + 'px'}, 250);
  
                      setTimeout(function () {div.style.top = canvasCoords[1] + starty - (height * factor * 0.1) + 'px'}, 50);
                      setTimeout(function () {div.style.top = canvasCoords[1] + starty - (height * factor * 0.2) + 'px'}, 100);
                      setTimeout(function () {div.style.top = canvasCoords[1] + starty - (height * factor * 0.3) + 'px'}, 150);
                      setTimeout(function () {div.style.top = canvasCoords[1] + starty - (height * factor * 0.4) + 'px'}, 200);
                      setTimeout(function () {div.style.top = canvasCoords[1] + starty - (height * factor * 0.5) + 'px'}, 250);
  
                      setTimeout(function () {div.style.width = width + (width * factor * 0.2) + 'px'}, 50);
                      setTimeout(function () {div.style.width = width + (width * factor * 0.4) + 'px'}, 100);
                      setTimeout(function () {div.style.width = width + (width * factor * 0.6) + 'px'}, 150);
                      setTimeout(function () {div.style.width = width + (width * factor * 0.8) + 'px'}, 200);
                      setTimeout(function () {div.style.width = width + (width * factor * 1.0) + 'px'}, 250);
                      
                      setTimeout(function () {div.style.height = height + (height * factor * 0.2) + 'px'}, 50);
                      setTimeout(function () {div.style.height = height + (height * factor * 0.4) + 'px'}, 100);
                      setTimeout(function () {div.style.height = height + (height * factor * 0.6) + 'px'}, 150);
                      setTimeout(function () {div.style.height = height + (height * factor * 0.8) + 'px'}, 200);
                      setTimeout(function () {div.style.height = height + (height * factor * 1.0) + 'px'}, 250);
  
                      setTimeout(function (){bg.style.opacity = 0.1;}, 50);
                      setTimeout(function (){bg.style.opacity = 0.2;}, 100);
                      setTimeout(function (){bg.style.opacity = 0.3;}, 150);
                      setTimeout(function (){bg.style.opacity = 0.4;}, 200);
                      setTimeout(function (){bg.style.opacity = 0.5;}, 250);
  
                      RGraph.Registry.Set('chart.zoomed.area.bg', bg);
                      RGraph.Registry.Set('chart.zoomed.area.img', img);
                      RGraph.Registry.Set('chart.zoomed.area.div', div);
                      RGraph.Registry.Set('chart.zoomed.area.mousedown', null);
                  }
  
                  /**
                  * Fire the zoom event
                  */
                  RGraph.FireCustomEvent(obj, 'onzoom');
              }
              
              canvas.onmouseout = function (e)
              {
                  var obj    = e.target.__object__;
  
                  // DON'T use RGraph.Redraw() - it hides any tooltip
                  RGraph.Clear(obj.canvas);
                  obj.Draw();
  
                  RGraph.Registry.Set('chart.zoomed.area.mousedown', null);
                  RGraph.Registry.Set('chart.zoomed.area.div', null);
              }
          }
      }
  
  
      /**
      * This function sets up the zoom window if requested
      * 
      * @param obj object The graph object
      */
      RGraph.ShowZoomWindow = function (obj)
      {
          var gutter = obj.Get('chart.gutter');
  
          if (obj.Get('chart.zoom.mode') == 'thumbnail') {
              RGraph.ZoomWindow(obj.canvas);
          }
  
          if (obj.Get('chart.zoom.mode') == 'area') {
              RGraph.ZoomArea(obj);
          }
      }
  
  
      /**
      * Installs the evnt handler for the zoom window
      */
      RGraph.ZoomWindow = function (canvas)
      {
          canvas.onmousemove = function (e)
          {
              e = RGraph.FixEventObject(e);
  
              var obj     = e.target.__object__;
              var canvas  = obj.canvas;
              var context = obj.context;
              var coords  = RGraph.getMouseXY(e);
              
              /**
              * Create the DIV
              */
              if (!RGraph.Registry.Get('chart.zoomed.div')) {
  
                  var div = document.createElement('div');
                  div.className    = 'RGraph_zoom_window';
                  div.style.width  = obj.Get('chart.zoom.thumbnail.width') + 'px';
                  div.style.height = obj.Get('chart.zoom.thumbnail.height') + 'px';
                  div.style.border = '2px dashed gray';
                  div.style.position = 'absolute';
                  div.style.overflow = 'hidden';
                  div.style.backgroundColor = 'white';
                  
                  // Initially the zoomed layer should be off-screen
                  div.style.left = '-1000px';
                  div.style.top = '-1000px';
  
                  // Should these be 0? No.
                  div.style.borderRadius       = '5px';
                  div.style.MozBorderRadius    = '5px';
                  div.style.WebkitBorderRadius = '5px';
  
                  if (obj.Get('chart.zoom.shadow')) {
                      div.style.boxShadow       = 'rgba(0,0,0,0.5) 3px 3px 3px';
                      div.style.MozBoxShadow    = 'rgba(0,0,0,0.5) 3px 3px 3px';
                      div.style.WebkitBoxShadow = 'rgba(0,0,0,0.5) 3px 3px 3px';
                  }
  
                  //div.style.opacity = 0.2;
                  div.__object__ = obj;
                  document.body.appendChild(div);
          
                  /**
                  * Get the canvas as an image
                  */
                  var img = document.createElement('img');
                  img.width  = obj.canvas.width * obj.Get('chart.zoom.factor');
                  img.height = obj.canvas.height * obj.Get('chart.zoom.factor');
                  img.style.position = 'relative';
                  img.style.backgroundColor = 'white';
                  img.__object__ = obj;
  
                  div.appendChild(img);
  
                  RGraph.Registry.Set('chart.zoomed.div', div);
                  RGraph.Registry.Set('chart.zoomed.img', img);
                  
                  // Fade the zoom in
                  setTimeout("RGraph.Registry.Get('chart.zoomed.div').__object__.canvas.onmouseover()", 5);
  
              } else {
  
                  div = RGraph.Registry.Get('chart.zoomed.div');
                  img = RGraph.Registry.Get('chart.zoomed.img');
              }
  
              // Make sure the image is up-to-date
              img.src = canvas.toDataURL();
              
              /**
              * Ensure the div is visible
              */
              if (div && div.style.opacity < 1) {
                  setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 1", 400);
              }
  
              /**
              * Get the canvas x/y coords
              */
              var c = RGraph.getCanvasXY(obj.canvas);
              var x = c[0];
              var y = c[1];
  
              /**
              * Position the div and img
              */
              var offset = 7;
  
              div.style.left = (e.pageX - obj.Get('chart.zoom.thumbnail.width') - offset) + 'px';
              div.style.top = (e.pageY -  obj.Get('chart.zoom.thumbnail.height') - offset) + 'px';
              
              var l = (obj.Get('chart.zoom.thumbnail.width') / 2) - (coords[0] * obj.Get('chart.zoom.factor'));
              var t = (obj.Get('chart.zoom.thumbnail.height') / 2) - (coords[1] * obj.Get('chart.zoom.factor'));
  
              // More positioning
              img.style.left = (l + ((obj.Get('chart.zoom.thumbnail.width') / 2) * obj.Get('chart.zoom.factor'))) + 'px';
              img.style.top = (t + ((obj.Get('chart.zoom.thumbnail.height') / 2) * obj.Get('chart.zoom.factor'))) + 'px';
              
              /**
              * Fire the onzoom event
              */
              RGraph.FireCustomEvent(obj, 'onzoom');
          }
          
          /**
          * The onmouseover event. Evidently. Fades the zoom window in
          */
          canvas.onmouseover = function (e)
          {
              var div = RGraph.Registry.Get('chart.zoomed.div');
              
              // ???
              if (!div) return;
  
              var obj = div.__object__;
  
              // Used for the enlargement animation
              var targetWidth  = obj.Get('chart.zoom.thumbnail.width');
              var targetHeight = obj.Get('chart.zoom.thumbnail.height');
  
              div.style.width  = 0;
              div.style.height = 0;
  
              if (obj.Get('chart.zoom.fade.in')) {
                  
                  RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.2;
                  setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.4", 100);
                  setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.6", 200);
                  setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.8", 300);
                  setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 1", 400);
  
              } else {
  
                  setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 1", 1);
              }
  
              // The enlargement animation frames
              setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.width = '" + (targetWidth * (1/5) ) + "px'", 75);
              setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.width = '" + (targetWidth * (2/5) ) + "px'", 150);
              setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.width = '" + (targetWidth * (3/5) ) + "px'", 225);
              setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.width = '" + (targetWidth * (4/5) ) + "px'", 300);
              setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.width = '" + (targetWidth * (5/5) ) + "px'", 325);
              
              setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.height = '" + (targetHeight * (1/5) ) + "px'", 75);
              setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.height = '" + (targetHeight * (2/5) ) + "px'", 150);
              setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.height = '" + (targetHeight * (3/5) ) + "px'", 225);
              setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.height = '" + (targetHeight * (4/5) ) + "px'", 300);
              setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.height = '" + (targetHeight * (5/5) ) + "px'", 375);
          }
          
          canvas.onmouseout = function (e)
          {
              if (RGraph.Registry.Get('chart.zoomed.div') && RGraph.Registry.Get('chart.zoomed.div').__object__.Get('chart.zoom.fade.out')) {
  
                  RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.8;
                  setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.6", 100);
                  setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.4", 200);
                  setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.2", 300);
                  setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0", 400);
  
                  // Get rid of the zoom window
                  setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.left = '-400px'", 400);
                  setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.top = '-400px'", 400);
              
              } else {
                  // Get rid of the zoom window
                  if (RGraph.Registry.Get('chart.zoomed.div')) {
                      setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.left = '-400px'", 1);
                      setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.top = '-400px'", 41);
                  }            }
          }
      }
  
  
      /**
      * A zoom in function
      * 
      * @param e object The event object
      */
      RGraph.Zoom = function (e)
      {
          e = RGraph.FixEventObject(e);
  
          /**
          * Show the zoom window
          */
          //if ((e.target.__canvas__ && e.target.__canvas__.__object__.Get('chart.zoom.mode') == 'thumbnail') || (e.target.parentNode.__canvas__ && e.target.parentNode.__canvas__.__object__.Get('chart.zoom.mode') == 'thumbnail') ) {
          //    return RGraph.ZoomWindow(e);
          //}
  
          var canvas  = e.target.__canvas__;
          var context = canvas.getContext('2d');
          var obj     = canvas.__object__;
          var dataurl = canvas.toDataURL();
          var tmp     = canvas;
          var coords = RGraph.getCanvasXY(canvas);
          var factor = obj.Get('chart.zoom.factor') - 1;
  
          var x = coords[0];
          var y = coords[1];
  
          var img = document.createElement('img');
          img.className    = 'RGraph_zoomed_canvas';
          img.style.border = '3px solid gray';
          img.style.width  = canvas.width + 'px';
          img.style.height = canvas.height + 'px';
          img.style.position = 'absolute';
          img.style.left = x + 'px';
          img.style.top = y + 'px';
          img.style.backgroundColor = 'white';
          img.style.opacity = obj.Get('chart.zoom.fade.in') ? 0 : 1;
          img.style.zIndex = 99;
          img.src = dataurl;
          document.body.appendChild(img);
  
          //RGraph.Registry.Set('chart.zoomedimage', img);
          // Store the zoomed image in a global var - NOT the registry
          __zoomedimage__ = img;
          __zoomedimage__.obj = obj;
          
          // Image onclick should not hide the image
          img.onclick = function (e)
          {
              e = RGraph.FixEventObject(e);
              e.stopPropagation();
              return false;
          }
  
          setTimeout(function () {window.onclick = RGraph.HideZoomedCanvas;}, 1);
          
          var width = parseInt(canvas.width);
          var height = parseInt(canvas.height);
          var frames = obj.Get('chart.zoom.frames');
          var delay  = obj.Get('chart.zoom.delay');
  
          // Increase the width over 10 frames - center
          if (obj.Get('chart.zoom.hdir') == 'center') {
  
              for (var i=1; i<=frames; ++i) {
                  var newWidth      = width * factor * (i/frames) + width;
                  var rightHandEdge = x + canvas.width;
                  var newLeft       = (x + (canvas.width / 2)) - (newWidth / 2);
  
                  setTimeout("__zoomedimage__.style.width = '" + String(newWidth) + "px'; __zoomedimage__.style.left = '" + newLeft + "px'", i * delay);
              }
  
          // Left
          } else if (obj.Get('chart.zoom.hdir') == 'left') {
              for (var i=1; i<=frames; ++i) {
                  var newWidth      = width * factor * (i/frames) + width;
                  var rightHandEdge = x + canvas.width;
                  var newLeft       = rightHandEdge - newWidth;
  
                  setTimeout("__zoomedimage__.style.width = '" + String(newWidth) + "px'; __zoomedimage__.style.left = '" + newLeft + "px'", i * delay);
              }
              
          // Right (default)
          } else {
              for (var i=1; i<=frames; ++i) {
                  var newWidth      = width * factor * (i/frames) + width;
                  setTimeout("__zoomedimage__.style.width = '" + String(newWidth) + "px'", i * delay);
              }
          }
  
          // Increase the height over 10 frames - up
          if (obj.Get('chart.zoom.vdir') == 'up') {
              for (var i=1; i<=frames; ++i) {
                  var newHeight  = (height * factor * (i/frames)) + height;
                  var bottomEdge = y + canvas.height;
                  var newTop       = bottomEdge - newHeight;
          
                  setTimeout("__zoomedimage__.style.height = '" + String(newHeight) + "px'; __zoomedimage__.style.top = '" + newTop + "px'", i * delay);
              }
          
          // center
          } else if (obj.Get('chart.zoom.vdir') == 'center') {
              for (var i=1; i<=frames; ++i) {
                  var newHeight  = (height * factor * (i/frames)) + height;
                  var bottomEdge = (y + (canvas.height / 2)) + (newHeight / 2);
                  var newTop       = bottomEdge - newHeight;
  
                  setTimeout("__zoomedimage__.style.height = '" + String(newHeight) + "px'; __zoomedimage__.style.top = '" + newTop + "px'", i * delay);
              }
          
          // Down (default
          } else {
              for (var i=1; i<=frames; ++i) {
                  setTimeout("__zoomedimage__.style.height = '" + String(height * factor * (i/frames) + height) + "px'", i * delay);
              }
          }
  
          // If enabled, increase the opactity over 10 frames
          if (obj.Get('chart.zoom.fade.in')) {
              for (var i=1; i<=frames; ++i) {
                  setTimeout("__zoomedimage__.style.opacity = " + String(i / frames), i * delay);
              }
          }
  
          // If stipulated, produce a shadow
          if (obj.Get('chart.zoom.shadow')) {
              for (var i=1; i<=frames; ++i) {
                  setTimeout("__zoomedimage__.style.boxShadow = 'rgba(128,128,128," + Number(i / frames) / 2 + ") 0 0 15px'", i * delay);
                  setTimeout("__zoomedimage__.style.MozBoxShadow = 'rgba(128,128,128," + Number(i / frames) / 2 + ") 0 0 15px'", i * delay);
                  setTimeout("__zoomedimage__.style.WebkitBoxShadow = 'rgba(128,128,128," + Number(i / frames) / 2 + ") 0 0 15px'", i * delay);
              }
          }
  
          /**
          * The onmouseout event. Hides the zoom window. Fades the zoom out
          */
          canvas.onmouseout = function (e)
          {
              if (RGraph.Registry.Get('chart.zoomed.div') && RGraph.Registry.Get('chart.zoomed.div').__object__.Get('chart.zoom.fade.out')) {
  
                  RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.8;
                  setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.6", 100);
                  setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.4", 200);
                  setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.2", 300);
                  setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0", 400);
  
                  // Get rid of the zoom window
                  setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.left = '-400px'", 400);
                  setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.top = '-400px'", 400);
              
              } else {
  
                  // Get rid of the zoom window
                  if (RGraph.Registry.Get('chart.zoomed.div')) {
                      setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.left = '-400px'", 1);
                      setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.top = '-400px'", 1);
                  }
              }
          }
  
          // The background
          if (obj.Get('chart.zoom.background')) {
              var div = document.createElement('DIV');
              div.style.backgroundColor = '#999';
              div.style.opacity         = 0;
              div.style.position        = 'fixed';
              div.style.top             = 0;
              div.style.left            = 0;
              div.style.width           = (screen.width + 100) + 'px';
              div.style.height          = (screen.height + 100) + 'px';
              div.style.zIndex          = 98;
  
              // Hides the zoomed caboodle
              div.oncontextmenu = function (e)
              {
                  return RGraph.HideZoomedCanvas(e);
              }
  
              // 30th July 2010 - Is this necessary?
              //for (var i=1; i<=frames; ++i) {
              //  setTimeout('__zoomedbackground__.style.opacity = ' + Number(0.04 * i), i * delay);
              //
              //    //  MSIE doesn't support zoom
              //    //setTimeout('__zoomedbackground__.style.filter = "progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=135); Alpha(opacity=10)"', 50);
              //}
              
              div.origHeight = div.style.height;
              
              document.body.appendChild(div);
  
              __zoomedbackground__ = div;
              
              // If the window is resized, hide the zoom
              //window.onresize = RGraph.HideZoomedCanvas;
  
              for (var i=1; i<=frames; ++i) {
                  setTimeout("__zoomedbackground__.style.opacity = " + (Number(i / frames) * 0.5), i * delay);
              }
          }
          
          /**
          * Fire the onzoom event
          */
          RGraph.FireCustomEvent(obj, 'onzoom');
      }