var ChartsFlotcharts = function() {



    return {

        //main function to initiate the module



        init: function() {



            App.addResizeHandler(function() {

                Charts.initPieCharts();

            });



        },



        initCharts: function() {



            if (!jQuery.plot) {

                return;

            }



            var data = [];

            var totalPoints = 250;



            // random data generator for plot charts



            function getRandomData() {

                if (data.length > 0) data = data.slice(1);

                // do a random walk

                while (data.length < totalPoints) {

                    var prev = data.length > 0 ? data[data.length - 1] : 50;

                    var y = prev + Math.random() * 10 - 5;

                    if (y < 0) y = 0;

                    if (y > 100) y = 100;

                    data.push(y);

                }

                // zip the generated y values with the x values

                var res = [];

                for (var i = 0; i < data.length; ++i) {

                    res.push([i, data[i]]);

                }



                return res;

            }



            //Basic Chart



            function chart1() {

                if ($('#chart_1').size() != 1) {

                    return;

                }



                var d1 = [];

                for (var i = 0; i < Math.PI * 2; i += 0.25)

                    d1.push([i, Math.sin(i)]);



                var d2 = [];

                for (var i = 0; i < Math.PI * 2; i += 0.25)

                    d2.push([i, Math.cos(i)]);



                var d3 = [];

                for (var i = 0; i < Math.PI * 2; i += 0.1)

                    d3.push([i, Math.tan(i)]);



                $.plot($("#chart_1"), [{

                    label: "sin(x)",

                    data: d1,

                    lines: {

                        lineWidth: 1,

                    },

                    shadowSize: 0

                }, {

                    label: "cos(x)",

                    data: d2,

                    lines: {

                        lineWidth: 1,

                    },

                    shadowSize: 0

                }, {

                    label: "tan(x)",

                    data: d3,

                    lines: {

                        lineWidth: 1,

                    },

                    shadowSize: 0

                }], {

                    series: {

                        lines: {

                            show: true,

                        },

                        points: {

                            show: true,

                            fill: true,

                            radius: 3,

                            lineWidth: 1

                        }

                    },

                    xaxis: {

                        tickColor: "#eee",

                        ticks: [0, [Math.PI / 2, "\u03c0/2"],

                            [Math.PI, "\u03c0"],

                            [Math.PI * 3 / 2, "3\u03c0/2"],

                            [Math.PI * 2, "2\u03c0"]

                        ]

                    },

                    yaxis: {

                        tickColor: "#eee",

                        ticks: 10,

                        min: -2,

                        max: 2

                    },

                    grid: {

                        borderColor: "#eee",

                        borderWidth: 1

                    }

                });



            }



            //Interactive Chart



            function chart2() {

                if ($('#chart_2').size() != 1) {

                    return;

                }



                function randValue() {

                    return (Math.floor(Math.random() * (1 + 40 - 20))) + 20;

                }

                var pageviews = [

                    [1, randValue()],

                    [2, randValue()],

                    [3, 2 + randValue()],

                    [4, 3 + randValue()],

                    [5, 5 + randValue()],

                    [6, 10 + randValue()],

                    [7, 15 + randValue()],

                    [8, 20 + randValue()],

                    [9, 25 + randValue()],

                    [10, 30 + randValue()],

                    [11, 35 + randValue()],

                    [12, 25 + randValue()],

                    [13, 15 + randValue()],

                    [14, 20 + randValue()],

                    [15, 45 + randValue()],

                    [16, 50 + randValue()],

                    [17, 65 + randValue()],

                    [18, 70 + randValue()],

                    [19, 85 + randValue()],

                    [20, 80 + randValue()],

                    [21, 75 + randValue()],

                    [22, 80 + randValue()],

                    [23, 75 + randValue()],

                    [24, 70 + randValue()],

                    [25, 65 + randValue()],

                    [26, 75 + randValue()],

                    [27, 80 + randValue()],

                    [28, 85 + randValue()],

                    [29, 90 + randValue()],

                    [30, 95 + randValue()]

                ];

                var visitors = [

                    [1, randValue() - 5],

                    [2, randValue() - 5],

                    [3, randValue() - 5],

                    [4, 6 + randValue()],

                    [5, 5 + randValue()],

                    [6, 20 + randValue()],

                    [7, 25 + randValue()],

                    [8, 36 + randValue()],

                    [9, 26 + randValue()],

                    [10, 38 + randValue()],

                    [11, 39 + randValue()],

                    [12, 50 + randValue()],

                    [13, 51 + randValue()],

                    [14, 12 + randValue()],

                    [15, 13 + randValue()],

                    [16, 14 + randValue()],

                    [17, 15 + randValue()],

                    [18, 15 + randValue()],

                    [19, 16 + randValue()],

                    [20, 17 + randValue()],

                    [21, 18 + randValue()],

                    [22, 19 + randValue()],

                    [23, 20 + randValue()],

                    [24, 21 + randValue()],

                    [25, 14 + randValue()],

                    [26, 24 + randValue()],

                    [27, 25 + randValue()],

                    [28, 26 + randValue()],

                    [29, 27 + randValue()],

                    [30, 31 + randValue()]

                ];



                var plot = $.plot($("#chart_2"), [{

                    data: pageviews,

                    label: "Unique Visits",

                    lines: {

                        lineWidth: 1,

                    },

                    shadowSize: 0



                }, {

                    data: visitors,

                    label: "Page Views",

                    lines: {

                        lineWidth: 1,

                    },

                    shadowSize: 0

                }], {

                    series: {

                        lines: {

                            show: true,

                            lineWidth: 2,

                            fill: true,

                            fillColor: {

                                colors: [{

                                    opacity: 0.05

                                }, {

                                    opacity: 0.01

                                }]

                            }

                        },

                        points: {

                            show: true,

                            radius: 3,

                            lineWidth: 1

                        },

                        shadowSize: 2

                    },

                    grid: {

                        hoverable: true,

                        clickable: true,

                        tickColor: "#eee",

                        borderColor: "#eee",

                        borderWidth: 1

                    },

                    colors: ["#d12610", "#37b7f3", "#52e136"],

                    xaxis: {

                        ticks: 11,

                        tickDecimals: 0,

                        tickColor: "#eee",

                    },

                    yaxis: {

                        ticks: 11,

                        tickDecimals: 0,

                        tickColor: "#eee",

                    }

                });





                function showTooltip(x, y, contents) {

                    $('<div id="tooltip">' + contents + '</div>').css({

                        position: 'absolute',

                        display: 'none',

                        top: y + 5,

                        left: x + 15,

                        border: '1px solid #333',

                        padding: '4px',

                        color: '#fff',

                        'border-radius': '3px',

                        'background-color': '#333',

                        opacity: 0.80

                    }).appendTo("body").fadeIn(200);

                }



                var previousPoint = null;

                $("#chart_2").bind("plothover", function(event, pos, item) {

                    $("#x").text(pos.x.toFixed(2));

                    $("#y").text(pos.y.toFixed(2));



                    if (item) {

                        if (previousPoint != item.dataIndex) {

                            previousPoint = item.dataIndex;



                            $("#tooltip").remove();

                            var x = item.datapoint[0].toFixed(2),

                                y = item.datapoint[1].toFixed(2);



                            showTooltip(item.pageX, item.pageY, item.series.label + " of " + x + " = " + y);

                        }

                    } else {

                        $("#tooltip").remove();

                        previousPoint = null;

                    }

                });

            }



            //Tracking Curves



            function chart3() {

                if ($('#chart_3').size() != 1) {

                    return;

                }

                //tracking curves:



                var sin = [],

                    cos = [];

                for (var i = 0; i < 14; i += 0.1) {

                    sin.push([i, Math.sin(i)]);

                    cos.push([i, Math.cos(i)]);

                }



                plot = $.plot($("#chart_3"), [{

                    data: sin,

                    label: "sin(x) = -0.00",

                    lines: {

                        lineWidth: 1,

                    },

                    shadowSize: 0

                }, {

                    data: cos,

                    label: "cos(x) = -0.00",

                    lines: {

                        lineWidth: 1,

                    },

                    shadowSize: 0

                }], {

                    series: {

                        lines: {

                            show: true

                        }

                    },

                    crosshair: {

                        mode: "x"

                    },

                    grid: {

                        hoverable: true,

                        autoHighlight: false,

                        tickColor: "#eee",

                        borderColor: "#eee",

                        borderWidth: 1

                    },

                    yaxis: {

                        min: -1.2,

                        max: 1.2

                    }

                });



                var legends = $("#chart_3 .legendLabel");

                legends.each(function() {

                    // fix the widths so they don't jump around

                    $(this).css('width', $(this).width());

                });



                var updateLegendTimeout = null;

                var latestPosition = null;



                function updateLegend() {

                    updateLegendTimeout = null;



                    var pos = latestPosition;



                    var axes = plot.getAxes();

                    if (pos.x < axes.xaxis.min || pos.x > axes.xaxis.max || pos.y < axes.yaxis.min || pos.y > axes.yaxis.max) return;



                    var i, j, dataset = plot.getData();

                    for (i = 0; i < dataset.length; ++i) {

                        var series = dataset[i];



                        // find the nearest points, x-wise

                        for (j = 0; j < series.data.length; ++j)

                            if (series.data[j][0] > pos.x) break;



                            // now interpolate

                        var y, p1 = series.data[j - 1],

                            p2 = series.data[j];



                        if (p1 == null) y = p2[1];

                        else if (p2 == null) y = p1[1];

                        else y = p1[1] + (p2[1] - p1[1]) * (pos.x - p1[0]) / (p2[0] - p1[0]);



                        legends.eq(i).text(series.label.replace(/=.*/, "= " + y.toFixed(2)));

                    }

                }



                $("#chart_3").bind("plothover", function(event, pos, item) {

                    latestPosition = pos;

                    if (!updateLegendTimeout) updateLegendTimeout = setTimeout(updateLegend, 50);

                });

            }



            //Dynamic Chart



            function chart4() {

                if ($('#chart_4').size() != 1) {

                    return;

                }

                //server load

                var options = {

                    series: {

                        shadowSize: 1

                    },

                    lines: {

                        show: true,

                        lineWidth: 0.5,

                        fill: true,

                        fillColor: {

                            colors: [{

                                opacity: 0.1

                            }, {

                                opacity: 1

                            }]

                        }

                    },

                    yaxis: {

                        min: 0,

                        max: 100,

                        tickColor: "#eee",

                        tickFormatter: function(v) {

                            return v + "%";

                        }

                    },

                    xaxis: {

                        show: false,

                    },

                    colors: ["#6ef146"],

                    grid: {

                        tickColor: "#eee",

                        borderWidth: 0,

                    }

                };



                var updateInterval = 30;

                var plot = $.plot($("#chart_4"), [getRandomData()], options);



                function update() {

                    plot.setData([getRandomData()]);

                    plot.draw();

                    setTimeout(update, updateInterval);

                }

                update();

            }



            //bars with controls



            function chart5() {

                if ($('#chart_5').size() != 1) {

                    return;

                }

                var d1 = [];

                for (var i = 0; i <= 10; i += 1)

                    d1.push([i, parseInt(Math.random() * 30)]);



                var d2 = [];

                for (var i = 0; i <= 10; i += 1)

                    d2.push([i, parseInt(Math.random() * 30)]);



                var d3 = [];

                for (var i = 0; i <= 10; i += 1)

                    d3.push([i, parseInt(Math.random() * 30)]);



                var stack = 0,

                    bars = true,

                    lines = false,

                    steps = false;



                function plotWithOptions() {

                    $.plot($("#chart_5"),



                        [{

                            label: "sales",

                            data: d1,

                            lines: {

                                lineWidth: 1,

                            },

                            shadowSize: 0

                        }, {

                            label: "tax",

                            data: d2,

                            lines: {

                                lineWidth: 1,

                            },

                            shadowSize: 0

                        }, {

                            label: "profit",

                            data: d3,

                            lines: {

                                lineWidth: 1,

                            },

                            shadowSize: 0

                        }]



                        , {

                            series: {

                                stack: stack,

                                lines: {

                                    show: lines,

                                    fill: true,

                                    steps: steps,

                                    lineWidth: 0, // in pixels

                                },

                                bars: {

                                    show: bars,

                                    barWidth: 0.5,

                                    lineWidth: 0, // in pixels

                                    shadowSize: 0,

                                    align: 'center'

                                }

                            },

                            grid: {

                                tickColor: "#eee",

                                borderColor: "#eee",

                                borderWidth: 1

                            }

                        }

                    );

                }



                $(".stackControls input").click(function(e) {

                    e.preventDefault();

                    stack = $(this).val() == "With stacking" ? true : null;

                    plotWithOptions();

                });



                $(".graphControls input").click(function(e) {

                    e.preventDefault();

                    bars = $(this).val().indexOf("Bars") != -1;

                    lines = $(this).val().indexOf("Lines") != -1;

                    steps = $(this).val().indexOf("steps") != -1;

                    plotWithOptions();

                });



                plotWithOptions();

            }



            //graph

            chart1();

            chart2();

            chart3();

            chart4();

            chart5();



        },



        initBarCharts: function() {



            // bar chart:

            var data = GenerateSeries(0);



            function GenerateSeries(added) {

                var data = [];

                var start = 100 + added;

                var end = 200 + added;



                for (i = 1; i <= 20; i++) {

                    var d = Math.floor(Math.random() * (end - start + 1) + start);

                    data.push([i, d]);

                    start++;

                    end++;

                }



                return data;

            }



            var options = {

                series: {

                    bars: {

                        show: true

                    }

                },

                bars: {

                    barWidth: 0.8,

                    lineWidth: 0, // in pixels

                    shadowSize: 0,

                    align: 'left'

                },



                grid: {

                    tickColor: "#eee",

                    borderColor: "#eee",

                    borderWidth: 1

                }

            };



            if ($('#chart_1_1').size() !== 0) {

                $.plot($("#chart_1_1"), [{

                    data: data,

                    lines: {

                        lineWidth: 1,

                    },

                    shadowSize: 0

                }], options);

            }



            // horizontal bar chart:



            var data1 = [

                [10, 10],

                [20, 20],

                [30, 30],

                [40, 40],

                [50, 50]

            ];



            var options = {

                series: {

                    bars: {

                        show: true

                    }

                },

                bars: {

                    horizontal: true,

                    barWidth: 6,

                    lineWidth: 0, // in pixels

                    shadowSize: 0,

                    align: 'left'

                },

                grid: {

                    tickColor: "#eee",

                    borderColor: "#eee",

                    borderWidth: 1

                }

            };



            if ($('#chart_1_2').size() !== 0) {

                $.plot($("#chart_1_2"), [data1], options);

            }

        },



        initPieCharts: function() {



            var data = [];

            var series = Math.floor(Math.random() * 10) + 1;

            series = series < 5 ? 5 : series;



            for (var i = 0; i < series; i++) {

                data[i] = {

                    label: "Series" + (i + 1),

                    data: Math.floor(Math.random() * 100) + 1

                };

            }



            // DEFAULT

            if ($('#pie_chart').size() !== 0) {

                $.plot($("#pie_chart"), data, {

                    series: {

                        pie: {

                            show: true

                        }

                    }

                });

            }



            // GRAPH 1

            if ($('#pie_chart_1').size() !== 0) {

                $.plot($("#pie_chart_1"), data, {

                    series: {

                        pie: {

                            show: true

                        }

                    },

                    legend: {

                        show: false

                    }

                });

            }



            // GRAPH 2

            if ($('#pie_chart_2').size() !== 0) {

                $.plot($("#pie_chart_2"), data, {

                    series: {

                        pie: {

                            show: true,

                            radius: 1,

                            label: {

                                show: true,

                                radius: 1,

                                formatter: function(label, series) {

                                    return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">' + label + '<br/>' + Math.round(series.percent) + '%</div>';

                                },

                                background: {

                                    opacity: 0.8

                                }

                            }

                        }

                    },

                    legend: {

                        show: false

                    }

                });

            }



            // GRAPH 3

            if ($('#pie_chart_3').size() !== 0) {

                $.plot($("#pie_chart_3"), data, {

                    series: {

                        pie: {

                            show: true,

                            radius: 1,

                            label: {

                                show: true,

                                radius: 3 / 4,

                                formatter: function(label, series) {

                                    return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">' + label + '<br/>' + Math.round(series.percent) + '%</div>';

                                },

                                background: {

                                    opacity: 0.5

                                }

                            }

                        }

                    },

                    legend: {

                        show: false

                    }

                });

            }



            // GRAPH 4

            if ($('#pie_chart_4').size() !== 0) {

                $.plot($("#pie_chart_4"), data, {

                    series: {

                        pie: {

                            show: true,

                            radius: 1,

                            label: {

                                show: true,

                                radius: 3 / 4,

                                formatter: function(label, series) {

                                    return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">' + label + '<br/>' + Math.round(series.percent) + '%</div>';

                                },

                                background: {

                                    opacity: 0.5,

                                    color: '#000'

                                }

                            }

                        }

                    },

                    legend: {

                        show: false

                    }

                });

            }



            // GRAPH 5

            if ($('#pie_chart_5').size() !== 0) {

                $.plot($("#pie_chart_5"), data, {

                    series: {

                        pie: {

                            show: true,

                            radius: 3 / 4,

                            label: {

                                show: true,

                                radius: 3 / 4,

                                formatter: function(label, series) {

                                    return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">' + label + '<br/>' + Math.round(series.percent) + '%</div>';

                                },

                                background: {

                                    opacity: 0.5,

                                    color: '#000'

                                }

                            }

                        }

                    },

                    legend: {

                        show: false

                    }

                });

            }



            // GRAPH 6

            if ($('#pie_chart_6').size() !== 0) {

                $.plot($("#pie_chart_6"), data, {

                    series: {

                        pie: {

                            show: true,

                            radius: 1,

                            label: {

                                show: true,

                                radius: 2 / 3,

                                formatter: function(label, series) {

                                    return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">' + label + '<br/>' + Math.round(series.percent) + '%</div>';

                                },

                                threshold: 0.1

                            }

                        }

                    },

                    legend: {

                        show: false

                    }

                });

            }



            // GRAPH 7

            if ($('#pie_chart_7').size() !== 0) {

                $.plot($("#pie_chart_7"), data, {

                    series: {

                        pie: {

                            show: true,

                            combine: {

                                color: '#999',

                                threshold: 0.1

                            }

                        }

                    },

                    legend: {

                        show: false

                    }

                });

            }



            // GRAPH 8

            if ($('#pie_chart_8').size() !== 0) {

                $.plot($("#pie_chart_8"), data, {

                    series: {

                        pie: {

                            show: true,

                            radius: 300,

                            label: {

                                show: true,

                                formatter: function(label, series) {

                                    return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">' + label + '<br/>' + Math.round(series.percent) + '%</div>';

                                },

                                threshold: 0.1

                            }

                        }

                    },

                    legend: {

                        show: false

                    }

                });

            }



            // GRAPH 9

            if ($('#pie_chart_9').size() !== 0) {

                $.plot($("#pie_chart_9"), data, {

                    series: {

                        pie: {

                            show: true,

                            radius: 1,

                            tilt: 0.5,

                            label: {

                                show: true,

                                radius: 1,

                                formatter: function(label, series) {

                                    return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">' + label + '<br/>' + Math.round(series.percent) + '%</div>';

                                },

                                background: {

                                    opacity: 0.8

                                }

                            },

                            combine: {

                                color: '#999',

                                threshold: 0.1

                            }

                        }

                    },

                    legend: {

                        show: false

                    }

                });

            }



            // DONUT

            if ($('#donut').size() !== 0) {

                $.plot($("#donut"), data, {

                    series: {

                        pie: {

                            innerRadius: 0.5,

                            show: true

                        }

                    }

                });

            }



            // INTERACTIVE

            if ($('#interactive').size() !== 0) {

                $.plot($("#interactive"), data, {

                    series: {

                        pie: {

                            show: true

                        }

                    },

                    grid: {

                        hoverable: true,

                        clickable: true

                    }

                });

                $("#interactive").bind("plothover", pieHover);

                $("#interactive").bind("plotclick", pieClick);

            }



            function pieHover(event, pos, obj) {

                if (!obj)

                    return;

                percent = parseFloat(obj.series.percent).toFixed(2);

                $("#hover").html('<span style="font-weight: bold; color: ' + obj.series.color + '">' + obj.series.label + ' (' + percent + '%)</span>');

            }



            function pieClick(event, pos, obj) {

                if (!obj)

                    return;

                percent = parseFloat(obj.series.percent).toFixed(2);

                alert('' + obj.series.label + ': ' + percent + '%');

            }



        },



        initAxisLabelsPlugin: function() {

            var d1 = [];



                for (var i = 0; i < Math.PI * 2; i += 0.25)

                    d1.push([i, Math.sin(i)]);



                var d2 = [];

                for (var i = 0; i < Math.PI * 2; i += 0.25)

                    d2.push([i, Math.cos(i)]);



                var d3 = [];

                for (var i = 0; i < Math.PI * 2; i += 0.1)

                    d3.push([i, Math.tan(i)]);



            var options = {

                axisLabels: {

                    show: true

                },

                xaxes: [{

                    axisLabel: 'hor label',

                    tickColor: "#eee",

                }],

                yaxes: [{

                    position: 'left',

                    axisLabel: 'ver label',

                    tickColor: "#eee",

                }, {

                    position: 'right',

                    axisLabel: 'bleem'

                }],



                grid: {

                    borderColor: "#eee",

                    borderWidth: 1

                }

            };



            $.plot($("#chart_1_1"),

                [{

                    label: "sin(x)",

                    data: d1,

                    lines: {

                        lineWidth: 1,

                    },

                    shadowSize: 0

                }, {

                    label: "cos(x)",

                    data: d2,

                    lines: {

                        lineWidth: 1,

                    },

                    shadowSize: 0

                }, {

                    label: "tan(x)",

                    data: d3,

                    lines: {

                        lineWidth: 1,

                    },

                    shadowSize: 0

                }],

                options

            );

        }

    };

}();



jQuery(document).ready(function() {    

    ChartsFlotcharts.init();

    ChartsFlotcharts.initCharts();

    ChartsFlotcharts.initPieCharts();

    ChartsFlotcharts.initBarCharts();

    ChartsFlotcharts.initAxisLabelsPlugin();

});