/**
 * Class: ProtoChart
 * Version: v0.5 beta
 *
 * ProtoChart is a charting lib on top of Prototype.
 * This library is heavily motivated by excellent work done by:
 * * Flot <http://code.google.com/p/flot/>
 * * Flotr <http://solutoire.com/flotr/>
 *
 * Complete examples can be found at: <http://www.deensoft.com/lab/protochart>
 */

/**
 * Events:
 * ProtoChart:mousemove - Fired when mouse is moved over the chart
 * ProtoChart:plotclick - Fired when graph is clicked
 * ProtoChart:dataclick - Fired when graph is clicked AND the click is on a data point
 * ProtoChart:selected  - Fired when certain region on the graph is selected
 * ProtoChart:hit       - Fired when mouse is moved near or over certain data point on the graph
 */


if(!Proto) var Proto = {};

Proto.Chart = Class.create({
    /**
     * Function:
     * {Object} elem
     * {Object} data
     * {Object} options
     */
    initialize: function(elem, data, options)
    {
        options = options || {};
        this.graphData = [];
        /**
         * Property: options
         *
         * Description: Various options can be set. More details in description.
         *
         * colors:
         * {Array}      - pass in a array which contains strings of colors you want to use. Default has 6 color set.
         *
         * legend:
         * {BOOL}       - show              - if you want to show the legend. Default is false
         * {integer}    - noColumns         - Number of columns for the legend. Default is 1
         * {function}   - labelFormatter    - A function that returns a string. The function is called with a string and is expected to return a string. Default = null
         * {string}     - labelBoxBorderColor - border color for the little label boxes. Default #CCC
         * {HTMLElem}   - container         - an HTML id or HTML element where the legend should be rendered. If left null means to put the legend on top of the Chart
         * {string}     - position          - position for the legend on the Chart. Default value 'ne'
         * {integer}    - margin            - default valud of 5
         * {string}     - backgroundColor   - default to null (which means auto-detect)
         * {float}      - backgroundOpacity - leave it 0 to avoid background
         *
         * xaxis (yaxis) options:
         * {string}     - mode      - default is null but you can pass a string "time" to indicate time series
         * {integer}    - min
         * {integer}    - max
         * {float}      - autoscaleMargin - in % to add if auto-setting min/max
         * {mixed}      - ticks - either [1, 3] or [[1, "a"], 3] or a function which gets axis info and returns ticks
         * {function}   - tickFormatter - A function that returns a string as a tick label. Default is null
         * {float}      - tickDecimals
         * {integer}    - tickSize
         * {integer}    - minTickSize
         * {array}      - monthNames
         * {string}     - timeformat
         *
         * Points / Lines / Bars options:
         * {bool}       - show, default is false
         * {integer}    - radius: default is 3
         * {integer}    - lineWidth : default is 2
         * {bool}       - fill : default is true
         * {string}     - fillColor: default is #ffffff
         *
         * Grid options:
         * {string}     - color
         * {string}     - backgroundColor   - defualt is *null*
         * {string}     - tickColor         - default is *#dddddd*
         * {integer}    - labelMargin       - should be in pixels default is 3
         * {integer}    - borderWidth       - default *1*
         * {bool}       - clickable         - default *null* - pass in TRUE if you wish to monitor click events
         * {mixed}      - coloredAreas      - default *null* - pass in mixed object eg. {x1, x2}
         * {string}     - coloredAreasColor - default *#f4f4f4*
         * {bool}       - drawXAxis         - default *true*
         * {bool}       - drawYAxis         - default *true*
         *
         * selection options:
         * {string}     - mode : either "x", "y" or "xy"
         * {string}     - color : string
         */
        this.options = this.merge(options,{
            colors: ["#edc240", "#00A8F0", "#C0D800", "#cb4b4b", "#4da74d", "#9440ed"],
            legend: {
                show: false,
                noColumns: 1,
                labelFormatter: null,
                labelBoxBorderColor: "#ccc",
                container: null,
                position: "ne",
                margin: 5,
                backgroundColor: null,
                backgroundOpacity: 0.85
            },
            xaxis: {
                mode: null,
                min: null,
                max: null,
                autoscaleMargin: null,
                ticks: null,
                tickFormatter: null,
                tickDecimals: null,
                tickSize: null,
                minTickSize: null,
                monthNames: null,
                timeformat: null
            },
            yaxis: {
                mode: null,
                min: null,
                max: null,
                ticks: null,
                tickFormatter: null,
                tickDecimals: null,
                tickSize: null,
                minTickSize: null,
                monthNames: null,
                timeformat: null,
                autoscaleMargin: 0.02
            },

            points: {
                show: false,
                radius: 3,
                lineWidth: 2,
                fill: true,
                fillColor: "#ffffff"
            },
            lines: {
                show: false,
                lineWidth: 2,
                fill: false,
                fillColor: null
            },
            bars: {
                show: false,
                lineWidth: 2,
                barWidth: 1,
                fill: true,
                fillColor: null,
                showShadow: false,
                fillOpacity: 0.4,
                autoScale: true
            },
            pies: {
                show: false,
                radius: 50,
                borderWidth: 1,
                fill: true,
                fillColor: null,
                fillOpacity: 0.90,
                labelWidth: 30,
                fontSize: 11,
                autoScale: true
            },
            grid: {
                color: "#545454",
                backgroundColor: null,
                tickColor: "#dddddd",
                labelMargin: 3,
                borderWidth: 1,
                clickable: null,
                coloredAreas: null,
                coloredAreasColor: "#f4f4f4",
                drawXAxis: true,
                drawYAxis: true
            },
            mouse: {
                track: false,
                position: 'se',
                fixedPosition: true,
                clsName: 'mouseValHolder',
                trackFormatter: this.defaultTrackFormatter,
                margin: 3,
                color: '#ff3f19',
                trackDecimals: 1,
                sensibility: 2,
                radius: 5,
                lineColor: '#cb4b4b'
            },
            selection: {
                mode: null,
                color: "#97CBFF"
            },
            allowDataClick: true,
            makeRandomColor: false,
            shadowSize: 4
        });

        /*
         * Local variables.
         */
        this.canvas = null;
        this.overlay = null;
        this.eventHolder = null;
        this.context = null;
        this.overlayContext = null;

        this.domObj = $(elem);

        this.xaxis = {};
        this.yaxis = {};
        this.chartOffset = {left: 0, right: 0, top: 0, bottom: 0};
        this.yLabelMaxWidth = 0;
        this.yLabelMaxHeight = 0;
        this.xLabelBoxWidth = 0;
        this.canvasWidth = 0;
        this.canvasHeight = 0;
        this.chartWidth = 0;
        this.chartHeight = 0;
        this.hozScale = 0;
        this.vertScale = 0;
        this.workarounds = {};

        this.domObj = $(elem);

        this.barDataRange = [];

        this.lastMousePos = { pageX: null, pageY: null };
        this.selection = { first: { x: -1, y: -1}, second: { x: -1, y: -1} };
        this.prevSelection = null;
        this.selectionInterval = null;
        this.ignoreClick = false;
        this.prevHit = null;

        if(this.options.makeRandomColor)
            this.options.color = this.makeRandomColor(this.options.colors);

        this.setData(data);
        this.constructCanvas();
        this.setupGrid();
        this.draw();
    },
    /**
     * Private function internally used.
     */
    merge: function(src, dest)
    {
        var result = dest || {};
        for(var i in src){
            result[i] = (typeof(src[i]) == 'object' && !(src[i].constructor == Array || src[i].constructor == RegExp)) ? this.merge(src[i], dest[i]) : result[i] = src[i];
        }
        return result;
    },
    /**
     * Function: setData
     * {Object} data
     *
     * Description:
     * Sets datasoruces properly then sets the Bar Width accordingly, then copies the default data options and then processes the graph data
     *
     * Returns: none
     *
     */
    setData: function(data)
    {
        this.graphData = this.parseData(data);
        this.setBarWidth();
        this.copyGraphDataOptions();
        this.processGraphData();
    },
    /**
     * Function: parseData
     * {Object} data
     *
     * Return:
     * {Object} result
     *
     * Description:
     * Takes the provided data object and converts it into generic data that we can understand. User can pass in data in 3 different ways:
     * - [d1, d2]
     * - [{data: d1, label: "data1"}, {data: d2, label: "data2"}]
     * - [d1, {data: d1, label: "data1"}]
     *
     * This function parses these senarios and makes it readable
     */
    parseData: function(data)
    {
        var res = [];
        data.each(function(d){
            var s;
            if(d.data) {
                s = {};
                for(var v in d) {
                    s[v] = d[v];
                }
            }
            else {
                s = {data: d};
            }
            res.push(s);
        }.bind(this));
        return res;
    },
    /**
     * function: makeRandomColor
     * {Object} colorSet
     *
     * Return:
     * {Array} result - array containing random colors
     */
    makeRandomColor: function(colorSet)
    {
        var randNum = Math.floor(Math.random() * colorSet.length);
        var randArr = [];
        var newArr = [];
        randArr.push(randNum);

        while(randArr.length < colorSet.length)
        {
            var tempNum = Math.floor(Math.random() * colorSet.length);

            while(checkExisted(tempNum, randArr))
                tempNum = Math.floor(Math.random() * colorSet.length);

            randArr.push(tempNum);
        }

        randArr.each(function(ra){
            newArr.push(colorSet[ra]);

        }.bind(this));
        return newArr;
    },
    /**
     * function: checkExisted
     * {Object} needle
     * {Object} haystack
     *
     * return:
     * {bool} existed - true if it finds needle in the haystack
     */
    checkExisted: function(needle, haystack)
    {
        var existed = false;
        haystack.each(function(aNeedle){
            if(aNeedle == needle) {
                existed = true;
                throw $break;
            }
        }.bind(this));
        return existed;
    },
    /**
     * function: setBarWidth
     *
     * Description: sets the bar width for Bar Graph, you should enable *autoScale* property for bar graph
     */
    setBarWidth: function()
    {
        if(this.options.bars.show && this.options.bars.autoScale)
        {
            this.options.bars.barWidth = 1 / this.graphData.length / 1.2;
        }
    },
    /**
     * Function: copyGraphDataOptions
     *
     * Description: Private function that goes through each graph data (series) and assigned the graph
     * properties to it.
     */
    copyGraphDataOptions: function()
    {
        var i, neededColors = this.graphData.length, usedColors = [], assignedColors = [];

        this.graphData.each(function(gd){
            var sc = gd.color;
            if(sc) {
                --neededColors;
                if(Object.isNumber(sc)) {
                    assignedColors.push(sc);
                }
                else {
                    usedColors.push(this.parseColor(sc));
                }
            }
        }.bind(this));


        assignedColors.each(function(ac){
            neededColors = Math.max(neededColors, ac + 1);
        });

        var colors = [];
        var variation = 0;
        i = 0;
        while (colors.length < neededColors) {
            var c;
            if (this.options.colors.length == i) {
                c = new Proto.Color(100, 100, 100);
            }
            else {
                c = this.parseColor(this.options.colors[i]);
            }

            var sign = variation % 2 == 1 ? -1 : 1;
            var factor = 1 + sign * Math.ceil(variation / 2) * 0.2;
            c.scale(factor, factor, factor);

            colors.push(c);

            ++i;
            if (i >= this.options.colors.length) {
                i = 0;
                ++variation;
            }
        }

        var colorIndex = 0, s;

        this.graphData.each(function(gd){
            if(gd.color == null)
            {
                gd.color = colors[colorIndex].toString();
                ++colorIndex;
            }
            else if(Object.isNumber(gd.color)) {
                gd.color = colors[gd.color].toString();
            }

            gd.lines = Object.extend(Object.clone(this.options.lines), gd.lines);
            gd.points = Object.extend(Object.clone(this.options.points), gd.points);
            gd.bars = Object.extend(Object.clone(this.options.bars), gd.bars);
            gd.mouse = Object.extend(Object.clone(this.options.mouse), gd.mouse);
            if (gd.shadowSize == null) {
                gd.shadowSize = this.options.shadowSize;
            }
        }.bind(this));

    },
    /**
     * Function: processGraphData
     *
     * Description: processes graph data, setup xaxis and yaxis min and max points.
     */
    processGraphData: function() {

        this.xaxis.datamin = this.yaxis.datamin = Number.MAX_VALUE;
        this.xaxis.datamax = this.yaxis.datamax = Number.MIN_VALUE;

        this.graphData.each(function(gd) {
            var data = gd.data;
            data.each(function(d){
                if(d == null) {
                    return;
                }

                var x = d[0], y = d[1];
                if(!x || !y || isNaN(x = +x) || isNaN(y = +y)) {
                    d = null;
                    return;
                }

                if (x < this.xaxis.datamin)
                    this.xaxis.datamin = x;
                if (x > this.xaxis.datamax)
                    this.xaxis.datamax = x;
                if (y < this.yaxis.datamin)
                    this.yaxis.datamin = y;
                if (y > this.yaxis.datamax)
                    this.yaxis.datamax = y;
            }.bind(this));
        }.bind(this));


        if (this.xaxis.datamin == Number.MAX_VALUE)
            this.xaxis.datamin = 0;
        if (this.yaxis.datamin == Number.MAX_VALUE)
            this.yaxis.datamin = 0;
        if (this.xaxis.datamax == Number.MIN_VALUE)
            this.xaxis.datamax = 1;
        if (this.yaxis.datamax == Number.MIN_VALUE)
            this.yaxis.datamax = 1;
    },
    /**
     * Function: constructCanvas
     *
     * Description: constructs the main canvas for drawing. It replicates the HTML elem (usually DIV) passed
     * in via constructor. If there is no height/width assigned to the HTML elem then we take a default size
     * of 400px (width) and 300px (height)
     */
    constructCanvas: function() {

        Object.extend(Prototype.Browser, {
            IE6: (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) ? (Number(RegExp.$1) == 6 ? true : false) : false,
            IE7: (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) ? (Number(RegExp.$1) == 7 ? true : false) : false,
            IE8: (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) ? (Number(RegExp.$1) == 8 ? true : false) : false,
            IE9: (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) ? (Number(RegExp.$1) == 9 ? true : false) : false
        });

        this.canvasWidth = this.domObj.getWidth();
        this.canvasHeight = this.domObj.getHeight();
        this.domObj.update(""); // clear target
        this.domObj.setStyle({
            "position": "relative"
        });

        if (this.canvasWidth <= 0) {
            this.canvasWdith = 400;
        }
        if(this.canvasHeight <= 0) {
            this.canvasHeight = 300;
        }

        this.canvas = (Prototype.Browser.IE6 || Prototype.Browser.IE7 || Prototype.Browser.IE8) ? document.createElement("canvas") : new Element("CANVAS", {'width': this.canvasWidth, 'height': this.canvasHeight});
        Element.extend(this.canvas);
        this.canvas.style.width = this.canvasWidth + "px";
        this.canvas.style.height = this.canvasHeight + "px";

        this.domObj.appendChild(this.canvas);

        if (Prototype.Browser.IE6 || Prototype.Browser.IE7 || Prototype.Browser.IE8) // excanvas hack
        {
            this.canvas = $(window.G_vmlCanvasManager.initElement(this.canvas));
        }
        this.canvas = $(this.canvas);

        this.context = this.canvas.getContext("2d");

        this.overlay = (Prototype.Browser.IE6 || Prototype.Browser.IE7 || Prototype.Browser.IE8) ? document.createElement("canvas") :  new Element("CANVAS", {'width': this.canvasWidth, 'height': this.canvasHeight});
        Element.extend(this.overlay);
        this.overlay.style.width = this.canvasWidth + "px";
        this.overlay.style.height = this.canvasHeight + "px";
        this.overlay.style.position = "absolute";
        this.overlay.style.left = "0px";
        this.overlay.style.right = "0px";

        this.overlay.setStyle({
            'position': 'absolute',
            'left': '0px',
            'right': '0px'
        });
        this.domObj.appendChild(this.overlay);

        if (Prototype.Browser.IE6 || Prototype.Browser.IE7 || Prototype.Browser.IE8) {
            this.overlay = $(window.G_vmlCanvasManager.initElement(this.overlay));
        }

        this.overlay = $(this.overlay);
        this.overlayContext = this.overlay.getContext("2d");

        if(this.options.selection.mode)
        {
            this.overlay.observe('mousedown', this.onMouseDown.bind(this));
            this.overlay.observe('mousemove', this.onMouseMove.bind(this));
        }
        if(this.options.grid.clickable) {
            this.overlay.observe('click', this.onClick.bind(this));
        }
        if(this.options.mouse.track)
        {
            this.overlay.observe('mousemove', this.onMouseMove.bind(this));
        }
    },
    /**
     * function: setupGrid
     *
     * Description: a container function that does a few interesting things.
     *
     * 1. calls <extendXRangeIfNeededByBar> function which makes sure that our axis are expanded if needed
     *
     * 2. calls <setRange> function providing xaxis options which fixes the ranges according to data points
     *
     * 3. calls <prepareTickGeneration> function for xaxis which generates ticks according to options provided by user
     *
     * 4. calls <setTicks> function for xaxis that sets the ticks
     *
     * similar sequence is called for y-axis.
     *
     * At the end if this is a pie chart than we insert Labels (around the pie chart) via <insertLabels> and we also call <insertLegend>
     */
    setupGrid: function()
    {
        if(this.options.bars.show)
        {
            this.xaxis.max += 0.5;
            this.xaxis.min -= 0.5;
        }
        //x-axis
        this.extendXRangeIfNeededByBar();
        this.setRange(this.xaxis, this.options.xaxis);
        this.prepareTickGeneration(this.xaxis, this.options.xaxis);
        this.setTicks(this.xaxis, this.options.xaxis);


        //y-axis
        this.setRange(this.yaxis, this.options.yaxis);
        this.prepareTickGeneration(this.yaxis, this.options.yaxis);
        this.setTicks(this.yaxis, this.options.yaxis);
        this.setSpacing();

        if(!this.options.pies.show)
        {
            this.insertLabels();
        }
        this.insertLegend();
    },
    /**
     * function: setRange
     *
     * parameters:
     * {Object} axis
     * {Object} axisOptions
     */
    setRange: function(axis, axisOptions) {
        var min = axisOptions.min != null ? axisOptions.min : axis.datamin;
        var max = axisOptions.max != null ? axisOptions.max : axis.datamax;

        if (max - min == 0.0) {
            // degenerate case
            var widen;
            if (max == 0.0)
                widen = 1.0;
            else
                widen = 0.01;

            min -= widen;
            max += widen;
        }
        else {
            // consider autoscaling
            var margin = axisOptions.autoscaleMargin;
            if (margin != null) {
                if (axisOptions.min == null) {
                    min -= (max - min) * margin;
                    // make sure we don't go below zero if all values
                    // are positive
                    if (min < 0 && axis.datamin >= 0)
                        min = 0;
                }
                if (axisOptions.max == null) {
                    max += (max - min) * margin;
                    if (max > 0 && axis.datamax <= 0)
                        max = 0;
                }
            }
        }
        axis.min = min;
        axis.max = max;
    },
    /**
     * function: prepareTickGeneration
     *
     * Parameters:
     * {Object} axis
     * {Object} axisOptions
     */
    prepareTickGeneration: function(axis, axisOptions) {
        // estimate number of ticks
        var noTicks;
        if (Object.isNumber(axisOptions.ticks) && axisOptions.ticks > 0)
            noTicks = axisOptions.ticks;
        else if (axis == this.xaxis)
            noTicks = this.canvasWidth / 100;
        else
            noTicks = this.canvasHeight / 60;

        var delta = (axis.max - axis.min) / noTicks;
        var size, generator, unit, formatter, i, magn, norm;

        if (axisOptions.mode == "time") {
            function formatDate(d, fmt, monthNames) {
                var leftPad = function(n) {
                    n = "" + n;
                    return n.length == 1 ? "0" + n : n;
                };

                var r = [];
                var escape = false;
                if (monthNames == null)
                    monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
                for (var i = 0; i < fmt.length; ++i) {
                    var c = fmt.charAt(i);

                    if (escape) {
                        switch (c) {
                        case 'h': c = "" + d.getHours(); break;
                        case 'H': c = leftPad(d.getHours()); break;
                        case 'M': c = leftPad(d.getMinutes()); break;
                        case 'S': c = leftPad(d.getSeconds()); break;
                        case 'd': c = "" + d.getDate(); break;
                        case 'm': c = "" + (d.getMonth() + 1); break;
                        case 'y': c = "" + d.getFullYear(); break;
                        case 'b': c = "" + monthNames[d.getMonth()]; break;
                        }
                        r.push(c);
                        escape = false;
                    }
                    else {
                        if (c == "%")
                            escape = true;
                        else
                            r.push(c);
                    }
                }
                return r.join("");
            }


            // map of app. size of time units in milliseconds
            var timeUnitSize = {
                "second": 1000,
                "minute": 60 * 1000,
                "hour": 60 * 60 * 1000,
                "day": 24 * 60 * 60 * 1000,
                "month": 30 * 24 * 60 * 60 * 1000,
                "year": 365.2425 * 24 * 60 * 60 * 1000
            };


            // the allowed tick sizes, after 1 year we use
            // an integer algorithm
            var spec = [
                [1, "second"], [2, "second"], [5, "second"], [10, "second"],
                [30, "second"],
                [1, "minute"], [2, "minute"], [5, "minute"], [10, "minute"],
                [30, "minute"],
                [1, "hour"], [2, "hour"], [4, "hour"],
                [8, "hour"], [12, "hour"],
                [1, "day"], [2, "day"], [3, "day"],
                [0.25, "month"], [0.5, "month"], [1, "month"],
                [2, "month"], [3, "month"], [6, "month"],
                [1, "year"]
            ];

            var minSize = 0;
            if (axisOptions.minTickSize != null) {
                if (typeof axisOptions.tickSize == "number")
                    minSize = axisOptions.tickSize;
                else
                    minSize = axisOptions.minTickSize[0] * timeUnitSize[axisOptions.minTickSize[1]];
            }

            for (i = 0; i < spec.length - 1; ++i) {
                if (delta < (spec[i][0] * timeUnitSize[spec[i][1]] + spec[i + 1][0] * timeUnitSize[spec[i + 1][1]]) / 2 && spec[i][0] * timeUnitSize[spec[i][1]] >= minSize) {
                    break;
                }
            }

            size = spec[i][0];
            unit = spec[i][1];

            // special-case the possibility of several years
            if (unit == "year") {
                magn = Math.pow(10, Math.floor(Math.log(delta / timeUnitSize.year) / Math.LN10));
                norm = (delta / timeUnitSize.year) / magn;
                if (norm < 1.5)
                    size = 1;
                else if (norm < 3)
                    size = 2;
                else if (norm < 7.5)
                    size = 5;
                else
                    size = 10;

                size *= magn;
            }

            if (axisOptions.tickSize) {
                size = axisOptions.tickSize[0];
                unit = axisOptions.tickSize[1];
            }

            var floorInBase = this.floorInBase; //gives us a reference to a global function..

            generator = function(axis) {
                var ticks = [],
                    tickSize = axis.tickSize[0], unit = axis.tickSize[1],
                    d = new Date(axis.min);

                var step = tickSize * timeUnitSize[unit];



                if (unit == "second")
                    d.setSeconds(floorInBase(d.getSeconds(), tickSize));
                if (unit == "minute")
                    d.setMinutes(floorInBase(d.getMinutes(), tickSize));
                if (unit == "hour")
                    d.setHours(floorInBase(d.getHours(), tickSize));
                if (unit == "month")
                    d.setMonth(floorInBase(d.getMonth(), tickSize));
                if (unit == "year")
                    d.setFullYear(floorInBase(d.getFullYear(), tickSize));

                // reset smaller components
                d.setMilliseconds(0);
                if (step >= timeUnitSize.minute)
                    d.setSeconds(0);
                if (step >= timeUnitSize.hour)
                    d.setMinutes(0);
                if (step >= timeUnitSize.day)
                    d.setHours(0);
                if (step >= timeUnitSize.day * 4)
                    d.setDate(1);
                if (step >= timeUnitSize.year)
                    d.setMonth(0);


                var carry = 0, v;
                do {
                    v = d.getTime();
                    ticks.push({ v: v, label: axis.tickFormatter(v, axis) });
                    if (unit == "month") {
                        if (tickSize < 1) {
                            d.setDate(1);
                            var start = d.getTime();
                            d.setMonth(d.getMonth() + 1);
                            var end = d.getTime();
                            d.setTime(v + carry * timeUnitSize.hour + (end - start) * tickSize);
                            carry = d.getHours();
                            d.setHours(0);
                        }
                        else
                            d.setMonth(d.getMonth() + tickSize);
                    }
                    else if (unit == "year") {
                        d.setFullYear(d.getFullYear() + tickSize);
                    }
                    else
                        d.setTime(v + step);
                } while (v < axis.max);

                return ticks;
            };

            formatter = function (v, axis) {
                var d = new Date(v);

                // first check global format
                if (axisOptions.timeformat != null)
                    return formatDate(d, axisOptions.timeformat, axisOptions.monthNames);

                var t = axis.tickSize[0] * timeUnitSize[axis.tickSize[1]];
                var span = axis.max - axis.min;

                if (t < timeUnitSize.minute)
                    fmt = "%h:%M:%S";
                else if (t < timeUnitSize.day) {
                    if (span < 2 * timeUnitSize.day)
                        fmt = "%h:%M";
                    else
                        fmt = "%b %d %h:%M";
                }
                else if (t < timeUnitSize.month)
                    fmt = "%b %d";
                else if (t < timeUnitSize.year) {
                    if (span < timeUnitSize.year)
                        fmt = "%b";
                    else
                        fmt = "%b %y";
                }
                else
                    fmt = "%y";

                return formatDate(d, fmt, axisOptions.monthNames);
            };
        }
        else {
            // pretty rounding of base-10 numbers
            var maxDec = axisOptions.tickDecimals;
            var dec = -Math.floor(Math.log(delta) / Math.LN10);
            if (maxDec != null && dec > maxDec)
                dec = maxDec;

            magn = Math.pow(10, -dec);
            norm = delta / magn; // norm is between 1.0 and 10.0

            if (norm < 1.5)
                size = 1;
            else if (norm < 3) {
                size = 2;
                // special case for 2.5, requires an extra decimal
                if (norm > 2.25 && (maxDec == null || dec + 1 <= maxDec)) {
                    size = 2.5;
                    ++dec;
                }
            }
            else if (norm < 7.5)
                size = 5;
            else
                size = 10;

            size *= magn;

            if (axisOptions.minTickSize != null && size < axisOptions.minTickSize)
                size = axisOptions.minTickSize;

            if (axisOptions.tickSize != null)
                size = axisOptions.tickSize;

            axis.tickDecimals = Math.max(0, (maxDec != null) ? maxDec : dec);

            var floorInBase = this.floorInBase;

            generator = function (axis) {
                var ticks = [];
                var start = floorInBase(axis.min, axis.tickSize);
                // then spew out all possible ticks
                var i = 0, v;
                do {
                    v = start + i * axis.tickSize;
                    ticks.push({ v: v, label: axis.tickFormatter(v, axis) });
                    ++i;
                } while (v < axis.max);
                return ticks;
            };

            formatter = function (v, axis) {
                if(v) {
                return v.toFixed(axis.tickDecimals);
                }
                return 0;
            };
        }

        axis.tickSize = unit ? [size, unit] : size;
        axis.tickGenerator = generator;
        if (Object.isFunction(axisOptions.tickFormatter))
            axis.tickFormatter = function (v, axis) { return "" + axisOptions.tickFormatter(v, axis); };
        else
            axis.tickFormatter = formatter;
    },
    /**
     * function: extendXRangeIfNeededByBar
     */
    extendXRangeIfNeededByBar: function() {

        if (this.options.xaxis.max == null) {
            // great, we're autoscaling, check if we might need a bump
            var newmax = this.xaxis.max;
            this.graphData.each(function(gd){
                if(gd.bars.show && gd.bars.barWidth + this.xaxis.datamax > newmax)
                {
                    newmax = this.xaxis.datamax + gd.bars.barWidth;
                }
            }.bind(this));
            this.xaxis.nax = newmax;

        }
    },
    /**
     * function: setTicks
     *
     * parameters:
     * {Object} axis
     * {Object} axisOptions
     */
    setTicks: function(axis, axisOptions) {
        axis.ticks = [];

        if (axisOptions.ticks == null)
            axis.ticks = axis.tickGenerator(axis);
        else if (typeof axisOptions.ticks == "number") {
            if (axisOptions.ticks > 0)
                axis.ticks = axis.tickGenerator(axis);
        }
        else if (axisOptions.ticks) {
            var ticks = axisOptions.ticks;

            if (Object.isFunction(ticks))
                // generate the ticks
                ticks = ticks({ min: axis.min, max: axis.max });

            // clean up the user-supplied ticks, copy them over
            //var i, v;
            ticks.each(function(t, i){
                var v = null;
                var label = null;
                if(typeof t == 'object') {
                    v = t[0];
                    if(t.length > 1) { label = t[1]; }
                }
                else {
                    v = t;
                }
                if(!label) {
                    label = axis.tickFormatter(v, axis);
                }
                axis.ticks[i] = {v: v, label: label}
            }.bind(this));

        }

        if (axisOptions.autoscaleMargin != null && axis.ticks.length > 0) {
            if (axisOptions.min == null)
                axis.min = Math.min(axis.min, axis.ticks[0].v);
            if (axisOptions.max == null && axis.ticks.length > 1)
                axis.max = Math.min(axis.max, axis.ticks[axis.ticks.length - 1].v);
        }
    },
    /**
     * Function: setSpacing
     *
     * Parameters: none
     */
    setSpacing: function() {
        // calculate y label dimensions
        var i, labels = [], l;
        for (i = 0; i < this.yaxis.ticks.length; ++i) {
            l = this.yaxis.ticks[i].label;

            if (l)
                labels.push('<div class="tickLabel">' + l + '</div>');
        }

        if (labels.length > 0) {
            var dummyDiv = new Element('div', {'style': 'position:absolute;top:-10000px;font-size:smaller'});
            dummyDiv.update(labels.join(""));
            this.domObj.insert(dummyDiv);
            this.yLabelMaxWidth = dummyDiv.getWidth();
            this.yLabelMaxHeight = dummyDiv.select('div')[0].getHeight();
            dummyDiv.remove();
        }

        var maxOutset = this.options.grid.borderWidth;
        if (this.options.points.show)
            maxOutset = Math.max(maxOutset, this.options.points.radius + this.options.points.lineWidth/2);
        for (i = 0; i < this.graphData.length; ++i) {
            if (this.graphData[i].points.show)
                maxOutset = Math.max(maxOutset, this.graphData[i].points.radius + this.graphData[i].points.lineWidth/2);
        }

        this.chartOffset.left = this.chartOffset.right = this.chartOffset.top = this.chartOffset.bottom = maxOutset;

        this.chartOffset.left += this.yLabelMaxWidth + this.options.grid.labelMargin;
        this.chartWidth = this.canvasWidth - this.chartOffset.left - this.chartOffset.right;

        this.xLabelBoxWidth = this.chartWidth / 6;
        labels = [];

        for (i = 0; i < this.xaxis.ticks.length; ++i) {
            l = this.xaxis.ticks[i].label;
            if (l) {
                labels.push('<span class="tickLabel" width="' + this.xLabelBoxWidth + '">' + l + '</span>');
            }
        }

        var xLabelMaxHeight = 0;
        if (labels.length > 0) {
            var dummyDiv = new Element('div', {'style': 'position:absolute;top:-10000px;font-size:smaller'});
            dummyDiv.update(labels.join(""));
            this.domObj.appendChild(dummyDiv);
            xLabelMaxHeight = dummyDiv.getHeight();
            dummyDiv.remove();
        }

        this.chartOffset.bottom += xLabelMaxHeight + this.options.grid.labelMargin;
        this.chartHeight = this.canvasHeight - this.chartOffset.bottom - this.chartOffset.top;
        this.hozScale = this.chartWidth / (this.xaxis.max - this.xaxis.min);
        this.vertScale = this.chartHeight / (this.yaxis.max - this.yaxis.min);
    },
    /**
     * function: draw
     */
    draw: function() {
        if(this.options.bars.show)
        {
            this.extendXRangeIfNeededByBar();
            this.setSpacing();
            this.drawGrid();
            this.drawBarGraph(this.graphData, this.barDataRange);
        }
        else if(this.options.pies.show)
        {
            this.preparePieData(this.graphData);
            this.drawPieGraph(this.graphData);
        }
        else
        {
            this.drawGrid();
            for (var i = 0; i < this.graphData.length; i++) {
                this.drawGraph(this.graphData[i]);
            }
        }
    },
    /**
     * function: translateHoz
     *
     * Paramters:
     * {Object} x
     *
     * Description: Given a value this function translate it to relative x coord on canvas
     */
    translateHoz: function(x) {
        return (x - this.xaxis.min) * this.hozScale;
    },
    /**
     * function: translateVert
     *
     * parameters:
     * {Object} y
     *
     * Description: Given a value this function translate it to relative y coord on canvas
     */
    translateVert: function(y) {
        return this.chartHeight - (y - this.yaxis.min) * this.vertScale;
    },
    /**
     * function: drawGrid
     *
     * parameters: none
     *
     * description: draws the actual grid on the canvas
     */
    drawGrid: function() {
        var i;

        this.context.save();
        this.context.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
        this.context.translate(this.chartOffset.left, this.chartOffset.top);

        // draw background, if any
        if (this.options.grid.backgroundColor != null) {
            this.context.fillStyle = this.options.grid.backgroundColor;
            this.context.fillRect(0, 0, this.chartWidth, this.chartHeight);
        }

        // draw colored areas
        if (this.options.grid.coloredAreas) {
            var areas = this.options.grid.coloredAreas;
            if (Object.isFunction(areas)) {
                areas = areas({ xmin: this.xaxis.min, xmax: this.xaxis.max, ymin: this.yaxis.min, ymax: this.yaxis.max });
            }

            areas.each(function(a){
                // clip
                if (a.x1 == null || a.x1 < this.xaxis.min)
                    a.x1 = this.xaxis.min;
                if (a.x2 == null || a.x2 > this.xaxis.max)
                    a.x2 = this.xaxis.max;
                if (a.y1 == null || a.y1 < this.yaxis.min)
                    a.y1 = this.yaxis.min;
                if (a.y2 == null || a.y2 > this.yaxis.max)
                    a.y2 = this.yaxis.max;

                var tmp;
                if (a.x1 > a.x2) {
                    tmp = a.x1;
                    a.x1 = a.x2;
                    a.x2 = tmp;
                }
                if (a.y1 > a.y2) {
                    tmp = a.y1;
                    a.y1 = a.y2;
                    a.y2 = tmp;
                }

                if (a.x1 >= this.xaxis.max || a.x2 <= this.xaxis.min || a.x1 == a.x2
                    || a.y1 >= this.yaxis.max || a.y2 <= this.yaxis.min || a.y1 == a.y2)
                    return;

                this.context.fillStyle = a.color || this.options.grid.coloredAreasColor;
                this.context.fillRect(Math.floor(this.translateHoz(a.x1)), Math.floor(this.translateVert(a.y2)),
                             Math.floor(this.translateHoz(a.x2) - this.translateHoz(a.x1)), Math.floor(this.translateVert(a.y1) - this.translateVert(a.y2)));
            }.bind(this));


        }

        // draw the inner grid
        this.context.lineWidth = 1;
        this.context.strokeStyle = this.options.grid.tickColor;
        this.context.beginPath();
        var v;
        if (this.options.grid.drawXAxis) {
            this.xaxis.ticks.each(function(aTick){
                v = aTick.v;
                if(v <= this.xaxis.min || v >= this.xaxis.max) {
                    return;
                }
                this.context.moveTo(Math.floor(this.translateHoz(v)) + this.context.lineWidth / 2, 0);
                this.context.lineTo(Math.floor(this.translateHoz(v)) + this.context.lineWidth / 2, this.chartHeight);
            }.bind(this));

        }

        if (this.options.grid.drawYAxis) {
            this.yaxis.ticks.each(function(aTick){
                v = aTick.v;
                if(v <= this.yaxis.min || v >= this.yaxis.max) {
                    return;
                }
                this.context.moveTo(0, Math.floor(this.translateVert(v)) + this.context.lineWidth / 2);
                this.context.lineTo(this.chartWidth, Math.floor(this.translateVert(v)) + this.context.lineWidth / 2);
            }.bind(this));

        }
        this.context.stroke();

        if (this.options.grid.borderWidth) {
            // draw border
            this.context.lineWidth = this.options.grid.borderWidth;
            this.context.strokeStyle = this.options.grid.color;
            this.context.lineJoin = "round";
            this.context.strokeRect(0, 0, this.chartWidth, this.chartHeight);
            this.context.restore();
        }
    },
    /**
     * function: insertLabels
     *
     * parameters: none
     *
     * description: inserts the label with proper spacing. Both on X and Y axis
     */
    insertLabels: function() {
        this.domObj.select(".tickLabels").invoke('remove');

        var i, tick;
        var html = '<div class="tickLabels" style="font-size:smaller;color:' + this.options.grid.color + '">';

        // do the x-axis
        this.xaxis.ticks.each(function(tick){
            if (!tick.label || tick.v < this.xaxis.min || tick.v > this.xaxis.max)
                return;
            html += '<div style="position:absolute;top:' + (this.chartOffset.top + this.chartHeight + this.options.grid.labelMargin) + 'px;left:' + (this.chartOffset.left + this.translateHoz(tick.v) - this.xLabelBoxWidth/2) + 'px;width:' + this.xLabelBoxWidth + 'px;text-align:center" class="tickLabel">' + tick.label + "</div>";

        }.bind(this));

        // do the y-axis
        this.yaxis.ticks.each(function(tick){
            if (!tick.label || tick.v < this.yaxis.min || tick.v > this.yaxis.max)
                return;
            html += '<div id="ylabels" style="position:absolute;top:' + (this.chartOffset.top + this.translateVert(tick.v) - this.yLabelMaxHeight/2) + 'px;left:0;width:' + this.yLabelMaxWidth + 'px;text-align:right" class="tickLabel">' + tick.label + "</div>";
        }.bind(this));

        html += '</div>';

        this.domObj.insert(html);
    },
    /**
     * function: drawGraph
     *
     * Paramters:
     * {Object} graphData
     *
     * Description: given a graphData (series) this function calls a proper lower level method to draw it.
     */
    drawGraph: function(graphData) {
        if (graphData.lines.show || (!graphData.bars.show && !graphData.points.show))
            this.drawGraphLines(graphData);
        if (graphData.bars.show)
            this.drawGraphBar(graphData);
        if (graphData.points.show)
            this.drawGraphPoints(graphData);
    },
    /**
     * function: plotLine
     *
     * parameters:
     * {Object} data
     * {Object} offset
     *
     * description:
     * Helper function that plots a line based on the data provided
     */
    plotLine: function(data, offset) {
        var prev, cur = null, drawx = null, drawy = null;

        this.context.beginPath();
        for (var i = 0; i < data.length; ++i) {
            prev = cur;
            cur = data[i];

            if (prev == null || cur == null)
                continue;

            var x1 = prev[0], y1 = prev[1],
                x2 = cur[0], y2 = cur[1];

            // clip with ymin
            if (y1 <= y2 && y1 < this.yaxis.min) {
                if (y2 < this.yaxis.min)
                    continue;   // line segment is outside
                // compute new intersection point
                x1 = (this.yaxis.min - y1) / (y2 - y1) * (x2 - x1) + x1;
                y1 = this.yaxis.min;
            }
            else if (y2 <= y1 && y2 < this.yaxis.min) {
                if (y1 < this.yaxis.min)
                    continue;
                x2 = (this.yaxis.min - y1) / (y2 - y1) * (x2 - x1) + x1;
                y2 = this.yaxis.min;
            }

            // clip with ymax
            if (y1 >= y2 && y1 > this.yaxis.max) {
                if (y2 > this.yaxis.max)
                    continue;
                x1 = (this.yaxis.max - y1) / (y2 - y1) * (x2 - x1) + x1;
                y1 = this.yaxis.max;
            }
            else if (y2 >= y1 && y2 > this.yaxis.max) {
                if (y1 > this.yaxis.max)
                    continue;
                x2 = (this.yaxis.max - y1) / (y2 - y1) * (x2 - x1) + x1;
                y2 = this.yaxis.max;
            }

            // clip with xmin
            if (x1 <= x2 && x1 < this.xaxis.min) {
                if (x2 < this.xaxis.min)
                    continue;
                y1 = (this.xaxis.min - x1) / (x2 - x1) * (y2 - y1) + y1;
                x1 = this.xaxis.min;
            }
            else if (x2 <= x1 && x2 < this.xaxis.min) {
                if (x1 < this.xaxis.min)
                    continue;
                y2 = (this.xaxis.min - x1) / (x2 - x1) * (y2 - y1) + y1;
                x2 = this.xaxis.min;
            }

            // clip with xmax
            if (x1 >= x2 && x1 > this.xaxis.max) {
                if (x2 > this.xaxis.max)
                    continue;
                y1 = (this.xaxis.max - x1) / (x2 - x1) * (y2 - y1) + y1;
                x1 = this.xaxis.max;
            }
            else if (x2 >= x1 && x2 > this.xaxis.max) {
                if (x1 > this.xaxis.max)
                    continue;
                y2 = (this.xaxis.max - x1) / (x2 - x1) * (y2 - y1) + y1;
                x2 = this.xaxis.max;
            }

            if (drawx != this.translateHoz(x1) || drawy != this.translateVert(y1) + offset)
                this.context.moveTo(this.translateHoz(x1), this.translateVert(y1) + offset);

            drawx = this.translateHoz(x2);
            drawy = this.translateVert(y2) + offset;
            this.context.lineTo(drawx, drawy);
        }
        this.context.stroke();
    },
    /**
     * function: plotLineArea
     *
     * parameters:
     * {Object} data
     *
     * description:
     * Helper functoin that plots a colored line graph. This function
     * takes the data nad then fill in the area on the graph properly
     */
    plotLineArea: function(data) {
        var prev, cur = null;

        var bottom = Math.min(Math.max(0, this.yaxis.min), this.yaxis.max);
        var top, lastX = 0;

        var areaOpen = false;

        for (var i = 0; i < data.length; ++i) {
            prev = cur;
            cur = data[i];

            if (areaOpen && prev != null && cur == null) {
                // close area
                this.context.lineTo(this.translateHoz(lastX), this.translateVert(bottom));
                this.context.fill();
                areaOpen = false;
                continue;
            }

            if (prev == null || cur == null)
                continue;

            var x1 = prev[0], y1 = prev[1],
                x2 = cur[0], y2 = cur[1];

            // clip x values

            // clip with xmin
            if (x1 <= x2 && x1 < this.xaxis.min) {
                if (x2 < this.xaxis.min)
                    continue;
                y1 = (this.xaxis.min - x1) / (x2 - x1) * (y2 - y1) + y1;
                x1 = this.xaxis.min;
            }
            else if (x2 <= x1 && x2 < this.xaxis.min) {
                if (x1 < this.xaxis.min)
                    continue;
                y2 = (this.xaxis.min - x1) / (x2 - x1) * (y2 - y1) + y1;
                x2 = this.xaxis.min;
            }

            // clip with xmax
            if (x1 >= x2 && x1 > this.xaxis.max) {
                if (x2 > this.xaxis.max)
                    continue;
                y1 = (this.xaxis.max - x1) / (x2 - x1) * (y2 - y1) + y1;
                x1 = this.xaxis.max;
            }
            else if (x2 >= x1 && x2 > this.xaxis.max) {
                if (x1 > this.xaxis.max)
                    continue;
                y2 = (this.xaxis.max - x1) / (x2 - x1) * (y2 - y1) + y1;
                x2 = this.xaxis.max;
            }

            if (!areaOpen) {
                // open area
                this.context.beginPath();
                this.context.moveTo(this.translateHoz(x1), this.translateVert(bottom));
                areaOpen = true;
            }

            // now first check the case where both is outside
            if (y1 >= this.yaxis.max && y2 >= this.yaxis.max) {
                this.context.lineTo(this.translateHoz(x1), this.translateVert(this.yaxis.max));
                this.context.lineTo(this.translateHoz(x2), this.translateVert(this.yaxis.max));
                continue;
            }
            else if (y1 <= this.yaxis.min && y2 <= this.yaxis.min) {
                this.context.lineTo(this.translateHoz(x1), this.translateVert(this.yaxis.min));
                this.context.lineTo(this.translateHoz(x2), this.translateVert(this.yaxis.min));
                continue;
            }

            var x1old = x1, x2old = x2;

            // clip with ymin
            if (y1 <= y2 && y1 < this.yaxis.min && y2 >= this.yaxis.min) {
                x1 = (this.yaxis.min - y1) / (y2 - y1) * (x2 - x1) + x1;
                y1 = this.yaxis.min;
            }
            else if (y2 <= y1 && y2 < this.yaxis.min && y1 >= this.yaxis.min) {
                x2 = (this.yaxis.min - y1) / (y2 - y1) * (x2 - x1) + x1;
                y2 = this.yaxis.min;
            }

            // clip with ymax
            if (y1 >= y2 && y1 > this.yaxis.max && y2 <= this.yaxis.max) {
                x1 = (this.yaxis.max - y1) / (y2 - y1) * (x2 - x1) + x1;
                y1 = this.yaxis.max;
            }
            else if (y2 >= y1 && y2 > this.yaxis.max && y1 <= this.yaxis.max) {
                x2 = (this.yaxis.max - y1) / (y2 - y1) * (x2 - x1) + x1;
                y2 = this.yaxis.max;
            }


            // if the x value was changed we got a rectangle
            // to fill
            if (x1 != x1old) {
                if (y1 <= this.yaxis.min)
                    top = this.yaxis.min;
                else
                    top = this.yaxis.max;

                this.context.lineTo(this.translateHoz(x1old), this.translateVert(top));
                this.context.lineTo(this.translateHoz(x1), this.translateVert(top));
            }

            // fill the triangles
            this.context.lineTo(this.translateHoz(x1), this.translateVert(y1));
            this.context.lineTo(this.translateHoz(x2), this.translateVert(y2));

            // fill the other rectangle if it's there
            if (x2 != x2old) {
                if (y2 <= this.yaxis.min)
                    top = this.yaxis.min;
                else
                    top = this.yaxis.max;

                this.context.lineTo(this.translateHoz(x2old), this.translateVert(top));
                this.context.lineTo(this.translateHoz(x2), this.translateVert(top));
            }

            lastX = Math.max(x2, x2old);
        }

        if (areaOpen) {
            this.context.lineTo(this.translateHoz(lastX), this.translateVert(bottom));
            this.context.fill();
        }
    },
    /**
     * function: drawGraphLines
     *
     * parameters:
     * {Object} graphData
     *
     * description:
     * Main function that daws the line graph. This function is called
     * if <options> lines property is set to show or no other type of
     * graph is specified. This function depends on <plotLineArea> and
     * <plotLine> functions.
     */
    drawGraphLines: function(graphData) {
        this.context.save();
        this.context.translate(this.chartOffset.left, this.chartOffset.top);
        this.context.lineJoin = "round";

        var lw = graphData.lines.lineWidth;
        var sw = graphData.shadowSize;
        // FIXME: consider another form of shadow when filling is turned on
        if (sw > 0) {
            // draw shadow in two steps
            this.context.lineWidth = sw / 2;
            this.context.strokeStyle = "rgba(0,0,0,0.1)";
            this.plotLine(graphData.data, lw/2 + sw/2 + this.context.lineWidth/2);

            this.context.lineWidth = sw / 2;
            this.context.strokeStyle = "rgba(0,0,0,0.2)";
            this.plotLine(graphData.data, lw/2 + this.context.lineWidth/2);
        }

        this.context.lineWidth = lw;
        this.context.strokeStyle = graphData.color;
        if (graphData.lines.fill) {
            this.context.fillStyle = graphData.lines.fillColor != null ? graphData.lines.fillColor : this.parseColor(graphData.color).scale(null, null, null, 0.4).toString();
            this.plotLineArea(graphData.data, 0);
        }

        this.plotLine(graphData.data, 0);
        this.context.restore();
    },
    /**
     * function: plotPoints
     *
     * parameters:
     * {Object} data
     * {Object} radius
     * {Object} fill
     *
     * description:
     * Helper function that draws the point graph according to the data provided. Size of each
     * point is provided by radius variable and fill specifies if points
     * are filled
     */
    plotPoints: function(data, radius, fill) {
        for (var i = 0; i < data.length; ++i) {
            if (data[i] == null)
                continue;

            var x = data[i][0], y = data[i][1];
            if (x < this.xaxis.min || x > this.xaxis.max || y < this.yaxis.min || y > this.yaxis.max)
                continue;

            this.context.beginPath();
            this.context.arc(this.translateHoz(x), this.translateVert(y), radius, 0, 2 * Math.PI, true);
            if (fill)
                this.context.fill();
            this.context.stroke();
        }
    },
    /**
     * function: plotPointShadows
     *
     * parameters:
     * {Object} data
     * {Object} offset
     * {Object} radius
     *
     * description:
     * Helper function that draws the shadows for the points.
     */
    plotPointShadows: function(data, offset, radius) {
        for (var i = 0; i < data.length; ++i) {
            if (data[i] == null)
                continue;

            var x = data[i][0], y = data[i][1];
            if (x < this.xaxis.min || x > this.xaxis.max || y < this.yaxis.min || y > this.yaxis.max)
                continue;
            this.context.beginPath();
            this.context.arc(this.translateHoz(x), this.translateVert(y) + offset, radius, 0, Math.PI, false);
            this.context.stroke();
        }
    },
    /**
     * function: drawGraphPoints
     *
     * paramters:
     * {Object} graphData
     *
     * description:
     * Draws the point graph onto the canvas. This function depends on helper
     * functions <plotPointShadows> and <plotPoints>
     */
    drawGraphPoints: function(graphData) {
        this.context.save();
        this.context.translate(this.chartOffset.left, this.chartOffset.top);

        var lw = graphData.lines.lineWidth;
        var sw = graphData.shadowSize;
        if (sw > 0) {
            // draw shadow in two steps
            this.context.lineWidth = sw / 2;
            this.context.strokeStyle = "rgba(0,0,0,0.1)";
            this.plotPointShadows(graphData.data, sw/2 + this.context.lineWidth/2, graphData.points.radius);

            this.context.lineWidth = sw / 2;
            this.context.strokeStyle = "rgba(0,0,0,0.2)";
            this.plotPointShadows(graphData.data, this.context.lineWidth/2, graphData.points.radius);
        }

        this.context.lineWidth = graphData.points.lineWidth;
        this.context.strokeStyle = graphData.color;
        this.context.fillStyle = graphData.points.fillColor != null ? graphData.points.fillColor : graphData.color;
        this.plotPoints(graphData.data, graphData.points.radius, graphData.points.fill);
        this.context.restore();
    },
    /**
     * function: preparePieData
     *
     * parameters:
     * {Object} graphData
     *
     * Description:
     * Helper function that manipulates the given data stream so that it can
     * be plotted as a Pie Chart
     */
    preparePieData: function(graphData)
    {
        for(i = 0; i < graphData.length; i++)
        {
            var data = 0;
            for(j = 0; j < graphData[i].data.length; j++){
                data += parseInt(graphData[i].data[j][1]);
            }
            graphData[i].data = data;
        }
    },
    /**
     * function: drawPieShadow
     *
     * {Object} anchorX
     * {Object} anchorY
     * {Object} radius
     *
     * description:
     * Helper function that draws a shadow for the Pie Chart. This just draws
     * a circle with offset that simulates shadow. We do not give each piece
     * of the pie an individual shadow.
     */
    drawPieShadow: function(anchorX, anchorY, radius)
    {
        this.context.beginPath();
        this.context.moveTo(anchorX, anchorY);
        this.context.fillStyle = 'rgba(0,0,0,' + 0.1 + ')';
        startAngle = 0;
        endAngle = (Math.PI/180)*360;
        this.context.arc(anchorX + 2, anchorY +2, radius + (this.options.shadowSize/2), startAngle, endAngle, false);
        this.context.fill();
        this.context.closePath();
    },
    /**
     * function: drawPieGraph
     *
     * parameters:
     * {Object} graphData
     *
     * description:
     * Draws the actual pie chart. This function depends on helper function
     * <drawPieShadow> to draw the actual shadow
     */
    drawPieGraph: function(graphData)
    {
        var sumData = 0;
        var radius = 0;
        var centerX = this.chartWidth/2;
        var centerY = this.chartHeight/2;
        var startAngle = 0;
        var endAngle = 0;
        var fontSize = this.options.pies.fontSize;
        var labelWidth = this.options.pies.labelWidth;

        //determine Pie Radius
        if(!this.options.pies.autoScale)
            radius = this.options.pies.radius;
        else
            radius = (this.chartHeight * 0.85)/2;

        var labelRadius = radius * 1.05;

        for(i = 0; i < graphData.length; i++)
            sumData += graphData[i].data;

        // used to adjust labels so that everything adds up to 100%
        totalPct = 0;

        //lets draw the shadow first.. we don't need an individual shadow to every pie rather we just
        //draw a circle underneath to simulate the shadow...
        this.drawPieShadow(centerX, centerY, radius, 0, 0);

        //lets draw the actual pie chart now.
        graphData.each(function(gd, j){
            var pct = gd.data / sumData;
            startAngle = endAngle;
            endAngle += pct * (2 * Math.PI);
            var sliceMiddle = (endAngle - startAngle) / 2 + startAngle;
            var labelX = centerX + Math.cos(sliceMiddle) * labelRadius;
            var labelY = centerY + Math.sin(sliceMiddle) * labelRadius;
            var anchorX = centerX;
            var anchorY = centerY;
            var textAlign = null;
            var verticalAlign = null;
            var left = 0;
            var top = 0;

            //draw pie:
            //drawing pie
            this.context.beginPath();
            this.context.moveTo(anchorX, anchorY);
            this.context.arc(anchorX, anchorY, radius, startAngle, endAngle, false);
            this.context.closePath();
            this.context.fillStyle = this.parseColor(gd.color).scale(null, null, null, this.options.pies.fillOpacity).toString();

            if(this.options.pies.fill)  { this.context.fill(); }

            // drawing labels
            if (sliceMiddle <= 0.25 * (2 * Math.PI))
            {
                // text on top and align left
                textAlign = "left";
                verticalAlign = "top";
                left = labelX;
                top = labelY + fontSize;
            }
            else if (sliceMiddle > 0.25 * (2 * Math.PI) && sliceMiddle <= 0.5 * (2 * Math.PI))
            {
                // text on bottom and align left
                textAlign = "left";
                verticalAlign = "bottom";
                left = labelX - labelWidth;
                top = labelY;
            }
            else if (sliceMiddle > 0.5 * (2 * Math.PI) && sliceMiddle <= 0.75 * (2 * Math.PI))
            {
                // text on bottom and align right
                textAlign = "right";
                verticalAlign = "bottom";
                left = labelX - labelWidth;
                top = labelY - fontSize;
            }
            else
            {
                // text on top and align right
                textAlign = "right";
                verticalAlign = "bottom";
                left = labelX;
                top = labelY - fontSize;
            }

            left = left + "px";
            top = top + "px";
            var textVal = Math.round(pct * 100);

            if (j == graphData.length - 1) {
                if (textVal + totalPct < 100) {
                    textVal = textVal + 1;
                } else if (textVal + totalPct > 100) {
                    textVal = textVal - 1;
                };
            }

            var html = "<div style=\"position: absolute;zindex:11; width:" + labelWidth + "px;fontSize:" + fontSize + "px;overflow:hidden;top:"+ top + ";left:"+ left + ";textAlign:" + textAlign + ";verticalAlign:" + verticalAlign +"\">" +  textVal + "%</div>";
            //$(html).appendTo(target);
            this.domObj.insert(html);

            totalPct = totalPct + textVal;
        }.bind(this));

    },
    /**
     * function: drawBarGraph
     *
     * parameters:
     * {Object} graphData
     * {Object} barDataRange
     *
     * description:
     * Goes through each series in graphdata and passes it onto <drawBarGraphs> function
     */
    drawBarGraph: function(graphData, barDataRange)
    {
        graphData.each(function(gd, i){
            this.drawGraphBars(gd, i, graphData.size(), barDataRange);
        }.bind(this));
    },
    /**
     * function: drawGraphBar
     *
     * parameters:
     * {Object} graphData
     *
     * description:
     * This function is called when an individual series in GraphData is bar graph and plots it
     */
    drawGraphBar: function(graphData)
    {
        this.drawGraphBars(graphData, 0, this.graphData.length, this.barDataRange);
    },
    /**
     * function: plotBars
     *
     * parameters:
     * {Object} graphData
     * {Object} data
     * {Object} barWidth
     * {Object} offset
     * {Object} fill
     * {Object} counter
     * {Object} total
     * {Object} barDataRange
     *
     * description:
     * Helper function that draws the bar graph based on data.
     */
    plotBars: function(graphData, data, barWidth, offset, fill,counter, total, barDataRange) {
        var shift = 0;

        if(total % 2 == 0)
        {
            shift = (1 + ((counter  - total /2 ) - 1)) * barWidth;
        }
        else
        {
            var interval = 0.5;
            if(counter == (total/2 - interval )) {
                shift = - barWidth * interval;
            }
            else {
                shift = (interval + (counter  - Math.round(total/2))) * barWidth;
            }
        }

        var rangeData = [];
        data.each(function(d){
            if(!d) return;

            var x = d[0], y = d[1];
            var drawLeft = true, drawTop = true, drawRight = true;
            var left = x + shift, right = x + barWidth + shift, bottom = 0, top = y;
            var rangeDataPoint = {};
            rangeDataPoint.left = left;
            rangeDataPoint.right = right;
            rangeDataPoint.value = top;
            rangeData.push(rangeDataPoint);

            if (right < this.xaxis.min || left > this.xaxis.max || top < this.yaxis.min || bottom > this.yaxis.max)
                return;

            // clip
            if (left < this.xaxis.min) {
                left = this.xaxis.min;
                drawLeft = false;
            }

            if (right > this.xaxis.max) {
                right = this.xaxis.max;
                drawRight = false;
            }

            if (bottom < this.yaxis.min)
                bottom = this.yaxis.min;

            if (top > this.yaxis.max) {
                top = this.yaxis.max;
                drawTop = false;
            }

            if(graphData.bars.showShadow && graphData.shadowSize > 0)
                this.plotShadowOutline(graphData, this.context.strokeStyle, left, bottom, top, right, drawLeft, drawRight, drawTop);

            // fill the bar
            if (fill) {
                this.context.beginPath();
                this.context.moveTo(this.translateHoz(left), this.translateVert(bottom) + offset);
                this.context.lineTo(this.translateHoz(left), this.translateVert(top) + offset);
                this.context.lineTo(this.translateHoz(right), this.translateVert(top) + offset);
                this.context.lineTo(this.translateHoz(right), this.translateVert(bottom) + offset);
                this.context.fill();
            }

            // draw outline
            if (drawLeft || drawRight || drawTop) {
                this.context.beginPath();
                this.context.moveTo(this.translateHoz(left), this.translateVert(bottom) + offset);
                if (drawLeft)
                    this.context.lineTo(this.translateHoz(left), this.translateVert(top) + offset);
                else
                    this.context.moveTo(this.translateHoz(left), this.translateVert(top) + offset);

                if (drawTop)
                    this.context.lineTo(this.translateHoz(right), this.translateVert(top) + offset);
                else
                    this.context.moveTo(this.translateHoz(right), this.translateVert(top) + offset);
                if (drawRight)
                    this.context.lineTo(this.translateHoz(right), this.translateVert(bottom) + offset);
                else
                    this.context.moveTo(this.translateHoz(right), this.translateVert(bottom) + offset);
                this.context.stroke();
            }
        }.bind(this));

        barDataRange.push(rangeData);
    },
    /**
     * function: plotShadowOutline
     *
     * parameters:
     * {Object} graphData
     * {Object} orgStrokeStyle
     * {Object} left
     * {Object} bottom
     * {Object} top
     * {Object} right
     * {Object} drawLeft
     * {Object} drawRight
     * {Object} drawTop
     *
     * description:
     * Helper function that draws a outline simulating shadow for bar chart
     */
    plotShadowOutline: function(graphData, orgStrokeStyle, left, bottom, top, right, drawLeft, drawRight, drawTop)
    {
        var orgOpac = 0.3;

        for(var n = 1; n <= this.options.shadowSize/2; n++)
        {
            var opac = orgOpac * n;
            this.context.beginPath();
            this.context.strokeStyle = "rgba(0,0,0," + opac + ")";

            this.context.moveTo(this.translateHoz(left) + n, this.translateVert(bottom));

            if(drawLeft)
                this.context.lineTo(this.translateHoz(left) + n, this.translateVert(top) - n);
            else
                this.context.moveTo(this.translateHoz(left) + n, this.translateVert(top) - n);

            if(drawTop)
                this.context.lineTo(this.translateHoz(right) + n, this.translateVert(top) - n);
            else
                this.context.moveTo(this.translateHoz(right) + n, this.translateVert(top) - n);

            if(drawRight)
                this.context.lineTo(this.translateHoz(right) + n, this.translateVert(bottom));
            else
                this.context.lineTo(this.translateHoz(right) + n, this.translateVert(bottom));

            this.context.stroke();
            this.context.closePath();
        }

        this.context.strokeStyle = orgStrokeStyle;
    },
    /**
     * function: drawGraphBars
     *
     * parameters:
     * {Object} graphData
     * {Object} counter
     * {Object} total
     * {Object} barDataRange
     *
     * description:
     * Draws the actual bar graphs. Calls <plotBars> to draw the individual bar
     */
    drawGraphBars: function(graphData, counter, total, barDataRange){
        this.context.save();
        this.context.translate(this.chartOffset.left, this.chartOffset.top);
        this.context.lineJoin = "round";

        var bw = graphData.bars.barWidth;
        var lw = Math.min(graphData.bars.lineWidth, bw);


        this.context.lineWidth = lw;
        this.context.strokeStyle = graphData.color;
        if (graphData.bars.fill) {
            this.context.fillStyle = graphData.bars.fillColor != null ? graphData.bars.fillColor : this.parseColor(graphData.color).scale(null, null, null, this.options.bars.fillOpacity).toString();
        }
        this.plotBars(graphData, graphData.data, bw, 0, graphData.bars.fill, counter, total, barDataRange);
        this.context.restore();
    },
    /**
     * function: insertLegend
     *
     * description:
     * inserts legend onto the graph. *legend: {show: true}* must be set in <options>
     * for for this to work.
     */
    insertLegend: function() {
        this.domObj.select(".legend").invoke('remove');

        if (!this.options.legend.show)
            return;

        var fragments = [];
        var rowStarted = false;
        this.graphData.each(function(gd, index){
            if(!gd.label) {
                return;
            }
            if(index % this.options.legend.noColumns == 0) {
                if(rowStarted) {
                    fragments.push('</tr>');
                }
                fragments.push('<tr>');
                rowStarted = true;
            }
            var label = gd.label;
            if(this.options.legend.labelFormatter != null) {
                label = this.options.legend.labelFormatter(label);
            }

            fragments.push(
                '<td class="legendColorBox"><div style="border:1px solid ' + this.options.legend.labelBoxBorderColor + ';padding:1px"><div style="width:14px;height:10px;background-color:' + gd.color + ';overflow:hidden"></div></div></td>' +
                '<td class="legendLabel">' + label + '</td>');

        }.bind(this));

        if (rowStarted)
            fragments.push('</tr>');

        if(fragments.length > 0){
            var table = '<table style="font-size:smaller;color:' + this.options.grid.color + '">' + fragments.join("") + '</table>';
            if($(this.options.legend.container) != null){
                $(this.options.legend.container).insert(table);
            }else{
                var pos = '';
                var p = this.options.legend.position, m = this.options.legend.margin;

                if(p.charAt(0) == 'n') pos += 'top:' + (m + this.chartOffset.top) + 'px;';
                else if(p.charAt(0) == 's') pos += 'bottom:' + (m + this.chartOffset.bottom) + 'px;';
                if(p.charAt(1) == 'e') pos += 'right:' + (m + this.chartOffset.right) + 'px;';
                else if(p.charAt(1) == 'w') pos += 'left:' + (m + this.chartOffset.bottom) + 'px;';
                var div = this.domObj.insert('<div class="ProtoChart-legend" style="border: 1px solid '+this.options.legend.borderColor+'; position:absolute;z-index:2;' + pos +'">' + table + '</div>').getElementsBySelector('div.ProtoChart-legend').first();

                if(this.options.legend.backgroundOpacity != 0.0){
                    var c = this.options.legend.backgroundColor;
                    if(c == null){
                        var tmp = (this.options.grid.backgroundColor != null) ? this.options.grid.backgroundColor : this.extractColor(div);
                        c = this.parseColor(tmp).adjust(null, null, null, 1).toString();
                    }
                    this.domObj.insert('<div class="ProtoChart-legend-bg" style="position:absolute;width:' + div.getWidth() + 'px;height:' + div.getHeight() + 'px;' + pos +'background-color:' + c + ';"> </div>').select('div.ProtoChart-legend-bg').first().setStyle({
                        'opacity': this.options.legend.backgroundOpacity
                    });
                }
            }
        }
    },
    /**
     * Function: onMouseMove
     *
     * parameters:
     * event: {Object} ev
     *
     * Description:
     * Called whenever the mouse is moved on the graph. This takes care of the mousetracking.
     * This event also fires <ProtoChart:mousemove> event, which gets current position of the
     * mouse as a parameters.
     */
    onMouseMove: function(ev) {
        var e = ev || window.event;
        if (e.pageX == null && e.clientX != null) {
            var de = document.documentElement, b = $(document.body);
            this.lastMousePos.pageX = e.clientX + (de && de.scrollLeft || b.scrollLeft || 0);
            this.lastMousePos.pageY = e.clientY + (de && de.scrollTop || b.scrollTop || 0);
        }
        else {
            this.lastMousePos.pageX = e.pageX;
            this.lastMousePos.pageY = e.pageY;
        }

        var offset = this.overlay.cumulativeOffset();
        var pos = {
            x: this.xaxis.min + (e.pageX - offset.left - this.chartOffset.left) / this.hozScale,
            y: this.yaxis.max - (e.pageY - offset.top - this.chartOffset.top) / this.vertScale
        };

        if(this.options.mouse.track && this.selectionInterval == null) {
            this.hit(ev, pos);
        }
        this.domObj.fire("ProtoChart:mousemove", [ pos ]);
    },
    /**
     * Function: onMouseDown
     *
     * Parameters:
     * Event - {Object} e
     *
     * Description:
     * Called whenever the mouse is clicked.
     */
    onMouseDown: function(e) {
        if (e.which != 1)  // only accept left-click
            return;

        document.body.focus();

        if (document.onselectstart !== undefined && this.workarounds.onselectstart == null) {
            this.workarounds.onselectstart = document.onselectstart;
            document.onselectstart = function () { return false; };
        }
        if (document.ondrag !== undefined && this.workarounds.ondrag == null) {
            this.workarounds.ondrag = document.ondrag;
            document.ondrag = function () { return false; };
        }

        this.setSelectionPos(this.selection.first, e);

        if (this.selectionInterval != null)
            clearInterval(this.selectionInterval);
        this.lastMousePos.pageX = null;
        this.selectionInterval = setInterval(this.updateSelectionOnMouseMove.bind(this), 200);

        this.overlay.observe("mouseup", this.onSelectionMouseUp.bind(this));
    },
    /**
     * Function: onClick
     * parameters:
     * Event - {Object} e
     * Description:
     * Handles the "click" event on the chart. This function fires <ProtoChart:plotclick> event. If
     * <options.allowDataClick> is enabled then it also fires <ProtoChart:dataclick> event which gives
     * you access to exact data point where user clicked.
     */
    onClick: function(e) {
        if (this.ignoreClick) {
            this.ignoreClick = false;
            return;
        }
        var offset = this.overlay.cumulativeOffset();
        var pos ={
            x: this.xaxis.min + (e.pageX - offset.left - this.chartOffset.left) / this.hozScale,
            y: this.yaxis.max - (e.pageY - offset.top - this.chartOffset.top) / this.vertScale
        };
        this.domObj.fire("ProtoChart:plotclick", [ pos ]);

        if(this.options.allowDataClick)
        {
            var dataPoint = {};
            if(this.options.points.show)
            {
                dataPoint = this.getDataClickPoint(pos, this.options);
                this.domObj.fire("ProtoChart:dataclick", [dataPoint]);
            }
            else if(this.options.lines.show && this.options.points.show)
            {
                dataPoint = this.getDataClickPoint(pos, this.options);
                this.domObj.fire("ProtoChart:dataclick", [dataPoint]);
            }
            else if(this.options.bars.show)
            {
                if(this.barDataRange.length > 0)
                {
                    dataPoint = this.getDataClickPoint(pos, this.options, this.barDataRange);
                    this.domObj.fire("ProtoChart:dataclick", [dataPoint]);
                }
            }
        }
    },
    /**
     * Internal function used by onClick method.
     */
    getDataClickPoint: function(pos, options, barDataRange)
    {
        pos.x = parseInt(pos.x);
        pos.y = parseInt(pos.y);
        var yClick = pos.y.toFixed(0);
        var dataVal = {};

        dataVal.position = pos;
        dataVal.value = '';

        if(options.points.show)
        {
            this.graphData.each(function(gd){
                var temp = gd.data;
                var xClick = parseInt(pos.x.toFixed(0));
                if(xClick < 0) { xClick = 0; }
                if(temp[xClick] && yClick >= temp[xClick][1] - (this.options.points.radius * 10) && yClick <= temp[xClick][1] + (this.options.points.radius * 10)) {
                    dataVal.value = temp[xClick][1];
                    throw $break;
                }

            }.bind(this));
        }
        else if(options.bars.show)
        {
            xClick = pos.x;
            this.barDataRange.each(function(barData){
                barData.each(function(data){
                    var temp = data;
                    if(xClick > temp.left && xClick < temp.right) {
                        dataVal.value = temp.value;
                        throw $break;
                    }
                }.bind(this));
            }.bind(this));

        }

        return dataVal;
    },
    /**
     * Function: triggerSelectedEvent
     *
     * Description:
     * Internal function called when a selection on the graph is made. This function
     * fires <ProtoChart:selected> event which has a parameter representing the selection
     * {
     *  x1: {int}, y1: {int},
     *  x2: {int}, y2: {int}
     * }
     */
    triggerSelectedEvent: function() {
        var x1, x2, y1, y2;
        if (this.selection.first.x <= this.selection.second.x) {
            x1 = this.selection.first.x;
            x2 = this.selection.second.x;
        }
        else {
            x1 = this.selection.second.x;
            x2 = this.selection.first.x;
        }

        if (this.selection.first.y >= this.selection.second.y) {
            y1 = this.selection.first.y;
            y2 = this.selection.second.y;
        }
        else {
            y1 = this.selection.second.y;
            y2 = this.selection.first.y;
        }

        x1 = this.xaxis.min + x1 / this.hozScale;
        x2 = this.xaxis.min + x2 / this.hozScale;

        y1 = this.yaxis.max - y1 / this.vertScale;
        y2 = this.yaxis.max - y2 / this.vertScale;

        this.domObj.fire("ProtoChart:selected", [ { x1: x1, y1: y1, x2: x2, y2: y2 } ]);
    },
    /**
     * Internal function
     */
    onSelectionMouseUp: function(e) {
        if (document.onselectstart !== undefined)
            document.onselectstart = this.workarounds.onselectstart;
        if (document.ondrag !== undefined)
            document.ondrag = this.workarounds.ondrag;

        if (this.selectionInterval != null) {
            clearInterval(this.selectionInterval);
            this.selectionInterval = null;
        }

        this.setSelectionPos(this.selection.second, e);
        this.clearSelection();
        if (!this.selectionIsSane() || e.which != 1)
            return false;

        this.drawSelection();
        this.triggerSelectedEvent();
        this.ignoreClick = true;

        return false;
    },
    setSelectionPos: function(pos, e) {
        var offset = $(this.overlay).cumulativeOffset();
        if (this.options.selection.mode == "y") {
            if (pos == this.selection.first)
                pos.x = 0;
            else
                pos.x = this.chartWidth;
        }
        else {
            pos.x = e.pageX - offset.left - this.chartOffset.left;
            pos.x = Math.min(Math.max(0, pos.x), this.chartWidth);
        }

        if (this.options.selection.mode == "x") {
            if (pos == this.selection.first)
                pos.y = 0;
            else
                pos.y = this.chartHeight;
        }
        else {
            pos.y = e.pageY - offset.top - this.chartOffset.top;
            pos.y = Math.min(Math.max(0, pos.y), this.chartHeight);
        }
    },
    updateSelectionOnMouseMove: function() {
        if (this.lastMousePos.pageX == null)
            return;

        this.setSelectionPos(this.selection.second, this.lastMousePos);
        this.clearSelection();
        if (this.selectionIsSane())
            this.drawSelection();
    },
    clearSelection: function() {
        if (this.prevSelection == null)
            return;

        var x = Math.min(this.prevSelection.first.x, this.prevSelection.second.x),
            y = Math.min(this.prevSelection.first.y, this.prevSelection.second.y),
            w = Math.abs(this.prevSelection.second.x - this.prevSelection.first.x),
            h = Math.abs(this.prevSelection.second.y - this.prevSelection.first.y);

        this.overlayContext.clearRect(x + this.chartOffset.left - this.overlayContext.lineWidth,
                            y + this.chartOffset.top - this.overlayContext.lineWidth,
                            w + this.overlayContext.lineWidth*2,
                            h + this.overlayContext.lineWidth*2);

        this.prevSelection = null;
    },
    /**
     * Function: setSelection
     *
     * Parameters:
     * Area - {Object} area represented as a range like: {x1: 3, y1: 3, x2: 4, y2: 8}
     *
     * Description:
     * Sets the current graph selection to the provided range. Calls <drawSelection> and
     * <triggerSelectedEvent> functions internally.
     */
    setSelection: function(area) {
        this.clearSelection();

        if (this.options.selection.mode == "x") {
            this.selection.first.y = 0;
            this.selection.second.y = this.chartHeight;
        }
        else {
            this.selection.first.y = (this.yaxis.max - area.y1) * this.vertScale;
            this.selection.second.y = (this.yaxis.max - area.y2) * this.vertScale;
        }
        if (this.options.selection.mode == "y") {
            this.selection.first.x = 0;
            this.selection.second.x = this.chartWidth;
        }
        else {
            this.selection.first.x = (area.x1 - this.xaxis.min) * this.hozScale;
            this.selection.second.x = (area.x2 - this.xaxis.min) * this.hozScale;
        }

        this.drawSelection();
        this.triggerSelectedEvent();
    },
    /**
     * Function: drawSelection
     * Description: Internal function called to draw the selection made on the graph.
     */
    drawSelection: function() {
        if (this.prevSelection != null &&
            this.selection.first.x == this.prevSelection.first.x &&
            this.selection.first.y == this.prevSelection.first.y &&
            this.selection.second.x == this.prevSelection.second.x &&
            this.selection.second.y == this.prevSelection.second.y)
        {
            return;
        }

        this.overlayContext.strokeStyle = this.parseColor(this.options.selection.color).scale(null, null, null, 0.8).toString();
        this.overlayContext.lineWidth = 1;
        this.context.lineJoin = "round";
        this.overlayContext.fillStyle = this.parseColor(this.options.selection.color).scale(null, null, null, 0.4).toString();

        this.prevSelection = { first:  { x: this.selection.first.x,
                                    y: this.selection.first.y },
                          second: { x: this.selection.second.x,
                                    y: this.selection.second.y } };

        var x = Math.min(this.selection.first.x, this.selection.second.x),
            y = Math.min(this.selection.first.y, this.selection.second.y),
            w = Math.abs(this.selection.second.x - this.selection.first.x),
            h = Math.abs(this.selection.second.y - this.selection.first.y);

        this.overlayContext.fillRect(x + this.chartOffset.left, y + this.chartOffset.top, w, h);
        this.overlayContext.strokeRect(x + this.chartOffset.left, y + this.chartOffset.top, w, h);
    },
    /**
     * Internal function
     */
    selectionIsSane: function() {
        var minSize = 5;
        return Math.abs(this.selection.second.x - this.selection.first.x) >= minSize &&
            Math.abs(this.selection.second.y - this.selection.first.y) >= minSize;
    },
    /**
     * Internal function that formats the track. This is the format the text is shown when mouse
     * tracking is enabled.
     */
    defaultTrackFormatter: function(val)
    {
        return '['+val.x+', '+val.y+']';
    },
    /**
     * Function: clearHit
     */
    clearHit: function(){
        if(this.prevHit){
            this.overlayContext.clearRect(
                this.translateHoz(this.prevHit.x) + this.chartOffset.left - this.options.mouse.radius*2,
                this.translateVert(this.prevHit.y) + this.chartOffset.top - this.options.mouse.radius*2,
                this.options.mouse.radius*3 + this.options.points.lineWidth*3,
                this.options.mouse.radius*3 + this.options.points.lineWidth*3
            );
            this.prevHit = null;
        }
    },
    /**
     * Function: hit
     *
     * Parameters:
     *  event - {Object} event object
     *  mouse - {Object} mouse object that is used to keep track of mouse movement
     *
     * Description:
     *  If hit occurs this function will fire a ProtoChart:hit event.
     */
    hit: function(event, mouse){
        /**
         * Nearest data element.
         */
        var n = {
            dist:Number.MAX_VALUE,
            x:null,
            y:null,
            mouse:null
        };


        for(var i = 0, data, xsens, ysens; i < this.graphData.length; i++){
            if(!this.graphData[i].mouse.track) continue;
            data = this.graphData[i].data;
            xsens = (this.hozScale*this.graphData[i].mouse.sensibility);
            ysens = (this.vertScale*this.graphData[i].mouse.sensibility);
            for(var j = 0, xabs, yabs; j < data.length; j++){
                xabs = this.hozScale*Math.abs(data[j][0] - mouse.x);
                yabs = this.vertScale*Math.abs(data[j][1] - mouse.y);

                if(xabs < xsens && yabs < ysens && (xabs+yabs) < n.dist){
                    n.dist = (xabs+yabs);
                    n.x = data[j][0];
                    n.y = data[j][1];
                    n.mouse = this.graphData[i].mouse;
                }
            }
        }

        if(n.mouse && n.mouse.track && !this.prevHit || (this.prevHit && n.x != this.prevHit.x && n.y != this.prevHit.y)){
            var el = this.domObj.select('.'+this.options.mouse.clsName).first();
            if(!el){
                var pos = '', p = this.options.mouse.position, m = this.options.mouse.margin;
                if(p.charAt(0) == 'n') pos += 'top:' + (m + this.chartOffset.top) + 'px;';
                else if(p.charAt(0) == 's') pos += 'bottom:' + (m + this.chartOffset.bottom) + 'px;';
                if(p.charAt(1) == 'e') pos += 'right:' + (m + this.chartOffset.right) + 'px;';
                else if(p.charAt(1) == 'w') pos += 'left:' + (m + this.chartOffset.bottom) + 'px;';

                this.domObj.insert('<div class="'+this.options.mouse.clsName+'" style="display:none;position:absolute;'+pos+'"></div>');
                return;
            }
            if(n.x !== null && n.y !== null){
                el.setStyle({display:'block'});

                this.clearHit();
                if(n.mouse.lineColor != null){
                    this.overlayContext.save();
                    this.overlayContext.translate(this.chartOffset.left, this.chartOffset.top);
                    this.overlayContext.lineWidth = this.options.points.lineWidth;
                    this.overlayContext.strokeStyle = n.mouse.lineColor;
                    this.overlayContext.fillStyle = '#ffffff';
                    this.overlayContext.beginPath();


                    this.overlayContext.arc(this.translateHoz(n.x), this.translateVert(n.y), this.options.mouse.radius, 0, 2 * Math.PI, true);
                    this.overlayContext.fill();
                    this.overlayContext.stroke();
                    this.overlayContext.restore();
                }
                this.prevHit = n;

                var decimals = n.mouse.trackDecimals;
                if(decimals == null || decimals < 0) decimals = 0;
                if(!this.options.mouse.fixedPosition)
                {
                    el.setStyle({
                        left: (this.translateHoz(n.x) + this.options.mouse.radius + 10) + "px",
                        top: (this.translateVert(n.y) + this.options.mouse.radius + 10) + "px"
                    });
                }
                el.innerHTML = n.mouse.trackFormatter({x: n.x.toFixed(decimals), y: n.y.toFixed(decimals)});
                this.domObj.fire( 'ProtoChart:hit', [n] )
            }else if(this.options.prevHit){
                el.setStyle({display:'none'});
                this.clearHit();
            }
        }
    },
    /**
     * Internal function
     */
    floorInBase: function(n, base) {
        return base * Math.floor(n / base);
    },
    /**
     * Function: extractColor
     *
     * Parameters:
     *      element - HTML element or ID of an HTML element
     *
     * Returns:
     *      color in string format
     */
    extractColor: function(element)
    {
        var color;
        do
        {
            color = $(element).getStyle('background-color').toLowerCase();
            if(color  != '' && color != 'transparent')
            {
                break;
            }
            element = element.up(0); //or else just get the parent ....
        } while(element.nodeName.toLowerCase() != 'body');

        //safari fix
        if(color == 'rgba(0, 0, 0, 0)')
            return 'transparent';
        return color;
    },
    /**
     * Function: parseColor
     *
     * Parameters:
     *      str - color string in different formats
     *
     * Returns:
     *      a Proto.Color Object - use toString() function to retreive the color in rgba/rgb format
     */
    parseColor: function(str)
    {
        var result;

        /**
         * rgb(num,num,num)
         */
        if((result = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(str)))
            return new Proto.Color(parseInt(result[1]), parseInt(result[2]), parseInt(result[3]));

        /**
         * rgba(num,num,num,num)
         */
        if((result = /rgba\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]+(?:\.[0-9]+)?)\s*\)/.exec(str)))
            return new Proto.Color(parseInt(result[1]), parseInt(result[2]), parseInt(result[3]), parseFloat(result[4]));

        /**
         * rgb(num%,num%,num%)
         */
        if((result = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(str)))
            return new Proto.Color(parseFloat(result[1])*2.55, parseFloat(result[2])*2.55, parseFloat(result[3])*2.55);

        /**
         * rgba(num%,num%,num%,num)
         */
        if((result = /rgba\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\s*\)/.exec(str)))
            return new Proto.Color(parseFloat(result[1])*2.55, parseFloat(result[2])*2.55, parseFloat(result[3])*2.55, parseFloat(result[4]));

        /**
         * #a0b1c2
         */
        if((result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(str)))
            return new Proto.Color(parseInt(result[1],16), parseInt(result[2],16), parseInt(result[3],16));

        /**
         * #fff
         */
        if((result = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(str)))
            return new Proto.Color(parseInt(result[1]+result[1],16), parseInt(result[2]+result[2],16), parseInt(result[3]+result[3],16));

        /**
         * Otherwise, check if user wants transparent .. or we just return a standard color;
         */
        var name = str.strip().toLowerCase();
        if(name == 'transparent'){
            return new Proto.Color(255, 255, 255, 0);
        }

        return new Proto.Color(100,100,100, 1);

    }
});

if(!Proto) var Proto = {};

/**
 * Class: Proto.Color
 *
 * Helper class that manipulates colors using RGBA values.
 *
 */

Proto.Color = Class.create({
    initialize: function(r, g, b, a) {
        this.rgba = ['r', 'g', 'b', 'a'];
        var x = 4;
        while(-1<--x) {
            this[this.rgba[x]] = arguments[x] || ((x==3) ? 1.0 : 0);
        }
    },
    toString: function()  {
        if(this.a >= 1.0) {
            return "rgb(" + [this.r, this.g, this.b].join(",") +")";
        }
        else {
            return "rgba("+[this.r, this.g, this.b, this.a].join(",")+")";
        }
    },
    scale: function(rf, gf, bf, af) {
        x = 4;
        while(-1<--x) {
            if(arguments[x] != null) {
                this[this.rgba[x]] *= arguments[x];
            }
        }
        return this.normalize();
    },
    adjust: function(rd, gd, bd, ad) {
        x = 4; //rgba.length
        while (-1<--x) {
            if (arguments[x] != null)
                this[this.rgba[x]] += arguments[x];
        }
        return this.normalize();
    },
    clone: function() {
        return new Proto.Color(this.r, this.b, this.g, this.a);
    },
    limit: function(val,minVal,maxVal) {
        return Math.max(Math.min(val, maxVal), minVal);
    },
    normalize: function() {
        this.r = this.limit(parseInt(this.r), 0, 255);
        this.g = this.limit(parseInt(this.g), 0, 255);
        this.b = this.limit(parseInt(this.b), 0, 255);
        this.a = this.limit(this.a, 0, 1);
        return this;
    }
});