/**
 * Highcharts Drilldown plugin
 *
 * Author: Torstein Honsi
 * Last revision: 2013-02-18
 * License: MIT License
 *
 * Demo: http://jsfiddle.net/highcharts/Vf3yT/
 */

/*global HighchartsAdapter*/
(function (H) {
    "use strict";

    var noop = function () { },
        defaultOptions = H.getOptions(),
        each = H.each,
        extend = H.extend,
        wrap = H.wrap,
        Chart = H.Chart,
        seriesTypes = H.seriesTypes,
        PieSeries = seriesTypes.pie,
        ColumnSeries = seriesTypes.column,
        fireEvent = HighchartsAdapter.fireEvent;

    // Utilities
    function tweenColors(startColor, endColor, pos) {
        var rgba = [
            Math.round(startColor[0] + (endColor[0] - startColor[0]) * pos),
            Math.round(startColor[1] + (endColor[1] - startColor[1]) * pos),
            Math.round(startColor[2] + (endColor[2] - startColor[2]) * pos),
            startColor[3] + (endColor[3] - startColor[3]) * pos
        ];
        return 'rgba(' + rgba.join(',') + ')';
    }

    // Add language
    extend(defaultOptions.lang, {
        drillUpText: '◁ Back to {series.name}'
    });
    defaultOptions.drilldown = {
        activeAxisLabelStyle: {
            cursor: 'pointer',
            color: '#039',
            fontWeight: 'bold',
            textDecoration: 'underline'
        },
        activeDataLabelStyle: {
            cursor: 'pointer',
            color: '#039',
            fontWeight: 'bold',
            textDecoration: 'underline'
        },
        animation: {
            duration: 500
        },
        drillUpButton: {
            position: {
                align: 'right',
                x: -10,
                y: 10
            }
            // relativeTo: 'plotBox'
            // theme
        }
    };

	/**
	 * A general fadeIn method
	 */
    H.SVGRenderer.prototype.Element.prototype.fadeIn = function () {
        this
            .attr({
                opacity: 0.1,
                visibility: 'visible'
            })
            .animate({
                opacity: 1
            }, {
                    duration: 250
                });
    };

    // Extend the Chart prototype
    Chart.prototype.drilldownLevels = [];

    Chart.prototype.addSeriesAsDrilldown = function (point, ddOptions) {
        var oldSeries = point.series,
            xAxis = oldSeries.xAxis,
            yAxis = oldSeries.yAxis,
            newSeries,
            color = point.color || oldSeries.color,
            pointIndex,
            level;

        ddOptions = extend({
            color: color
        }, ddOptions);
        pointIndex = HighchartsAdapter.inArray(this, oldSeries.points);
        level = {
            seriesOptions: oldSeries.userOptions,
            shapeArgs: point.shapeArgs,
            bBox: point.graphic.getBBox(),
            color: color,
            newSeries: ddOptions,
            pointOptions: oldSeries.options.data[pointIndex],
            pointIndex: pointIndex,
            oldExtremes: {
                xMin: xAxis && xAxis.userMin,
                xMax: xAxis && xAxis.userMax,
                yMin: yAxis && yAxis.userMin,
                yMax: yAxis && yAxis.userMax
            }
        };

        this.drilldownLevels.push(level);

        newSeries = this.addSeries(ddOptions, false);
        if (xAxis) {
            xAxis.oldPos = xAxis.pos;
            xAxis.userMin = xAxis.userMax = null;
            yAxis.userMin = yAxis.userMax = null;
        }

        // Run fancy cross-animation on supported and equal types
        if (oldSeries.type === newSeries.type) {
            newSeries.animate = newSeries.animateDrilldown || noop;
            newSeries.options.animation = true;
        }

        oldSeries.remove(false);

        this.redraw();
        this.showDrillUpButton();
    };

    Chart.prototype.getDrilldownBackText = function () {
        var lastLevel = this.drilldownLevels[this.drilldownLevels.length - 1];

        return this.options.lang.drillUpText.replace('{series.name}', lastLevel.seriesOptions.name);
    };

    Chart.prototype.showDrillUpButton = function () {
        var chart = this,
            backText = this.getDrilldownBackText(),
            buttonOptions = chart.options.drilldown.drillUpButton;

        if (!this.drillUpButton) {
            this.drillUpButton = this.renderer.button(
                backText,
                null,
                null,
                function () {
                    chart.drillUp();
                }
            )
                .attr(extend({
                    align: buttonOptions.position.align,
                    zIndex: 9
                }, buttonOptions.theme))
                .add()
                .align(buttonOptions.position, false, buttonOptions.relativeTo || 'plotBox');
        } else {
            this.drillUpButton.attr({
                text: backText
            })
                .align();
        }
    };

    Chart.prototype.drillUp = function () {
        var chart = this,
            level = chart.drilldownLevels.pop(),
            oldSeries = chart.series[0],
            oldExtremes = level.oldExtremes,
            newSeries = chart.addSeries(level.seriesOptions, false);

        fireEvent(chart, 'drillup', { seriesOptions: level.seriesOptions });

        if (newSeries.type === oldSeries.type) {
            newSeries.drilldownLevel = level;
            newSeries.animate = newSeries.animateDrillupTo || noop;
            newSeries.options.animation = true;

            if (oldSeries.animateDrillupFrom) {
                oldSeries.animateDrillupFrom(level);
            }
        }

        oldSeries.remove(false);

        // Reset the zoom level of the upper series
        if (newSeries.xAxis) {
            newSeries.xAxis.setExtremes(oldExtremes.xMin, oldExtremes.xMax, false);
            newSeries.yAxis.setExtremes(oldExtremes.yMin, oldExtremes.yMax, false);
        }

        this.redraw();

        if (this.drilldownLevels.length === 0) {
            this.drillUpButton = this.drillUpButton.destroy();
        } else {
            this.drillUpButton.attr({
                text: this.getDrilldownBackText()
            })
                .align();
        }
    };

    PieSeries.prototype.animateDrilldown = function (init) {
        var level = this.chart.drilldownLevels[this.chart.drilldownLevels.length - 1],
            animationOptions = this.chart.options.drilldown.animation,
            animateFrom = level.shapeArgs,
            start = animateFrom.start,
            angle = animateFrom.end - start,
            startAngle = angle / this.points.length,
            startColor = H.Color(level.color).rgba;

        if (!init) {
            each(this.points, function (point, i) {
                var endColor = H.Color(point.color).rgba;

                /*jslint unparam: true*/
                point.graphic
                    .attr(H.merge(animateFrom, {
                        start: start + i * startAngle,
                        end: start + (i + 1) * startAngle
                    }))
                    .animate(point.shapeArgs, H.merge(animationOptions, {
                        step: function (val, fx) {
                            if (fx.prop === 'start') {
                                this.attr({
                                    fill: tweenColors(startColor, endColor, fx.pos)
                                });
                            }
                        }
                    }));
                /*jslint unparam: false*/
            });
        }
    };

	/**
	 * When drilling up, keep the upper series invisible until the lower series has
	 * moved into place
	 */
    PieSeries.prototype.animateDrillupTo =
        ColumnSeries.prototype.animateDrillupTo = function (init) {
            if (!init) {
                var newSeries = this,
                    level = newSeries.drilldownLevel;

                each(this.points, function (point) {
                    point.graphic.hide();
                    if (point.dataLabel) {
                        point.dataLabel.hide();
                    }
                    if (point.connector) {
                        point.connector.hide();
                    }
                });

                // Do dummy animation on first point to get to complete
                setTimeout(function () {
                    each(newSeries.points, function (point, i) {
                        // Fade in other points
                        var verb = i === level.pointIndex ? 'show' : 'fadeIn';
                        point.graphic[verb]();
                        if (point.dataLabel) {
                            point.dataLabel[verb]();
                        }
                        if (point.connector) {
                            point.connector[verb]();
                        }
                    });
                }, Math.max(this.chart.options.drilldown.animation.duration - 50, 0));

                // Reset
                this.animate = noop;
            }
        };

    ColumnSeries.prototype.animateDrilldown = function (init) {
        var animateFrom = this.chart.drilldownLevels[this.chart.drilldownLevels.length - 1].shapeArgs,
            animationOptions = this.chart.options.drilldown.animation;

        if (!init) {
            animateFrom.x += (this.xAxis.oldPos - this.xAxis.pos);

            each(this.points, function (point) {
                point.graphic
                    .attr(animateFrom)
                    .animate(point.shapeArgs, animationOptions);
            });
        }
    };

	/**
	 * When drilling up, pull out the individual point graphics from the lower series
	 * and animate them into the origin point in the upper series.
	 */
    ColumnSeries.prototype.animateDrillupFrom =
        PieSeries.prototype.animateDrillupFrom =
        function (level) {
            var animationOptions = this.chart.options.drilldown.animation,
                group = this.group;

            delete this.group;
            each(this.points, function (point) {
                var graphic = point.graphic,
                    startColor = H.Color(point.color).rgba;

                delete point.graphic;

                /*jslint unparam: true*/
                graphic.animate(level.shapeArgs, H.merge(animationOptions, {
                    step: function (val, fx) {
                        if (fx.prop === 'start') {
                            this.attr({
                                fill: tweenColors(startColor, H.Color(level.color).rgba, fx.pos)
                            });
                        }
                    },
                    complete: function () {
                        graphic.destroy();
                        if (group) {
                            group = group.destroy();
                        }
                    }
                }));
                /*jslint unparam: false*/
            });
        };

    H.Point.prototype.doDrilldown = function () {
        var series = this.series,
            chart = series.chart,
            drilldown = chart.options.drilldown,
            i = drilldown.series.length,
            seriesOptions;

        while (i-- && !seriesOptions) {
            if (drilldown.series[i].id === this.drilldown) {
                seriesOptions = drilldown.series[i];
            }
        }

        // Fire the event. If seriesOptions is undefined, the implementer can check for
        // seriesOptions, and call addSeriesAsDrilldown async if necessary.
        fireEvent(chart, 'drilldown', {
            point: this,
            seriesOptions: seriesOptions
        });

        if (seriesOptions) {
            chart.addSeriesAsDrilldown(this, seriesOptions);
        }
    };

    wrap(H.Point.prototype, 'init', function (proceed, series, options, x) {
        var point = proceed.call(this, series, options, x),
            chart = series.chart,
            tick = series.xAxis && series.xAxis.ticks[x],
            tickLabel = tick && tick.label;

        if (point.drilldown) {
            // Add the click event to the point label
            H.addEvent(point, 'click', function () {
                point.doDrilldown();
            });

            // Make axis labels clickable
            if (tickLabel) {
                if (!tickLabel._basicStyle) {
                    tickLabel._basicStyle = tickLabel.element.getAttribute('style');
                }
                tickLabel
                    .addClass('highcharts-drilldown-axis-label')
                    .css(chart.options.drilldown.activeAxisLabelStyle)
                    .on('click', function () {
                        if (point.doDrilldown) {
                            point.doDrilldown();
                        }
                    });
            }
        } else if (tickLabel && tickLabel._basicStyle) {
            tickLabel.element.setAttribute('style', tickLabel._basicStyle);
        }

        return point;
    });

    wrap(H.Series.prototype, 'drawDataLabels', function (proceed) {
        var css = this.chart.options.drilldown.activeDataLabelStyle;

        proceed.call(this);

        each(this.points, function (point) {
            if (point.drilldown && point.dataLabel) {
                point.dataLabel
                    .attr({
                        'class': 'highcharts-drilldown-data-label'
                    })
                    .css(css)
                    .on('click', function () {
                        point.doDrilldown();
                    });
            }
        });
    });

    // Mark the trackers with a pointer
    ColumnSeries.prototype.supportsDrilldown = true;
    PieSeries.prototype.supportsDrilldown = true;
    var type,
        drawTrackerWrapper = function (proceed) {
            proceed.call(this);
            each(this.points, function (point) {
                if (point.drilldown && point.graphic) {
                    point.graphic
                        .attr({
                            'class': 'highcharts-drilldown-point'
                        })
                        .css({ cursor: 'pointer' });
                }
            });
        };
    for (type in seriesTypes) {
        if (seriesTypes[type].prototype.supportsDrilldown) {
            wrap(seriesTypes[type].prototype, 'drawTracker', drawTrackerWrapper);
        }
    }
}(Highcharts));