/*
 *  Document   : index.js
 *  Author     : pixelcave
 *  Description: Custom javascript code used in Dashboard page
 */

var $ = require('jquery')
var Index = function() {

    return {
        init: function() {
            /*
             * With CountTo, Check out examples and documentation at https://github.com/mhuggins/jquery-countTo
             */
            $('[data-toggle="counter"]').each(function(){
                var $this = $(this);

                $this.countTo({
                    speed: 1500,
                    refreshInterval: 25,
                    decimals: 0,
                    formatter: function (value, options) {
                      return value.toFixed(options.decimals);
                    },
                    onComplete: function() {
                        if($this.data('after')) {
                            $this.html($this.html() + $this.data('after'));
                        }
                    }
                });
            });

            /*
             * Flot Jquery plugin is used for charts
             *
             * For more examples or getting extra plugins you can check http://www.flotcharts.org/
             * Plugins included in this template: pie, resize, stack, time
             */

            // Get the elements where we will attach the charts
            var chartDash = $('#chart-dashboard');
            if (chartDash.length > 0) {

                // Set the height of our preference to the chart
                chartDash.css('height', '445px');

                // Random data for the chart
                var dataEarnings = [[1, 1800], [2, 1600], [3, 1400], [4, 1900], [5, 1600], [6, 2100], [7, 2900], [8, 2600], [9, 3200], [10, 3550], [11, 3450], [12, 4200]];
                var dataSales = [[1, 450], [2, 400], [3, 350], [4, 475], [5, 400], [6, 525], [7, 725], [8, 525], [9, 850], [10, 900], [11, 800], [12, 1200]];

                // Array with month labels for the chart
                var chartMonths = [[1, 'Jan'], [2, 'Feb'], [3, 'Mar'], [4, 'Apr'], [5, 'May'], [6, 'Jun'], [7, 'Jul'], [8, 'Aug'], [9, 'Sep'], [10, 'Oct'], [11, 'Nov'], [12, 'Dec']];

                // Initialize Dashboard Chart
                $.plot(chartDash,
                    [
                        {
                            label: 'Earnings',
                            data: dataEarnings,
                            lines: {show: true, fill: true, fillColor: {colors: [{opacity: 0.5}, {opacity: 0.5}]}},
                            points: {show: true, radius: 10}
                        },
                        {
                            label: 'Sales',
                            data: dataSales,
                            lines: {show: true, fill: true, fillColor: {colors: [{opacity: 0.2}, {opacity: 0.2}]}},
                            points: {show: true, radius: 10}
                        }
                    ],
                    {
                        colors: ['#2eb398', '#232b2d'],
                        legend: {show: true, position: 'nw', margin: [0, 0]},
                        grid: {borderWidth: 0, hoverable: true, clickable: true},
                        yaxis: {show: false},
                        xaxis: {ticks: chartMonths, tickColor: '#ffffff'}
                    }
                );

                // Creating and attaching a tooltip to the dashboard chart
                var previousPoint = null, ttlabel = null;
                chartDash.bind('plothover', function(event, pos, item) {

                    if (item) {
                        if (previousPoint !== item.dataIndex) {
                            previousPoint = item.dataIndex;

                            $('#chart-tooltip').remove();
                            var x = item.datapoint[0], y = item.datapoint[1];

                            if (item.seriesIndex === 1) {
                                ttlabel = '<strong>' + y + '</strong> sales';
                            } else {
                                ttlabel = '$ <strong>' + y + '</strong>';
                            }

                            $('<div id="chart-tooltip" class="chart-tooltip">' + ttlabel + '</div>')
                                .css({top: item.pageY - 45, left: item.pageX + 5}).appendTo("body").show();
                        }
                    }
                    else {
                        $('#chart-tooltip').remove();
                        previousPoint = null;
                    }
                });

                /* Mini Bar/Line Charts with jquery.sparkline plugin, for more examples you can check out http://omnipotent.net/jquery.sparkline/#s-about */
                var miniChartBarOptions = {
                    type: 'bar',
                    barWidth: 7,
                    barSpacing: 6,
                    height: '80px',
                    tooltipOffsetX: -25,
                    tooltipOffsetY: 20,
                    barColor: '#51b7dd',
                    tooltipSuffix: ' Issues',
                    tooltipFormat: '{{prefix}}{{value}}{{suffix}}'
                };
                $('#mini-chart-issues').sparkline('html', miniChartBarOptions);

                miniChartBarOptions['barColor'] = '#9ddd7b';
                miniChartBarOptions['tooltipSuffix'] = ' Accounts';
                $('#mini-chart-accounts').sparkline('html', miniChartBarOptions);

                var miniChartLineOptions = {
                    type: 'line',
                    width: '100px',
                    height: '80px',
                    tooltipOffsetX: -25,
                    tooltipOffsetY: 20,
                    lineColor: '#dd817b',
                    fillColor: '#dd817b',
                    spotColor: '#333333',
                    minSpotColor: '#333333',
                    maxSpotColor: '#333333',
                    highlightSpotColor: '#333333',
                    highlightLineColor: '#333333',
                    spotRadius: 3,
                    tooltipPrefix: '$ ',
                    tooltipSuffix: '',
                    tooltipFormat: '{{prefix}}{{y}}{{suffix}}'
                };
                $('#mini-chart-income').sparkline('html', miniChartLineOptions);

                miniChartLineOptions['lineColor'] = '#fa9c61';
                miniChartLineOptions['fillColor'] = '#fa9c61';
                miniChartLineOptions['tooltipPrefix'] = '';
                miniChartLineOptions['tooltipSuffix'] = ' Emails';
                $('#mini-chart-emails').sparkline('html', miniChartLineOptions);
            }
        }
    };
}();
// Expose 'Index' to the scripts on the page
var global = Function('return this;')();
global.Index = Index;