(function($) {
	
	$.fn.createTrafficChart = function(options){
        
        options = jQuery.extend({
			
			container: this.attr('id'),
			title: "Unnamed CloudFlare Chart",
			subtitle: "Unidentified CloudFlare Stats",
			xlabel: "",
			ylabel: "", 
			width: 300,
			height: 200
			
		}, options);
				
		var chart = new Highcharts.Chart(
			{
				chart: {
					
					renderTo: options.container,
					defaultSeriesType: 'areaspline',
					margin: [10, 150, 60, 40],
					width: options.width,
					height: options.height
					
				},
				title: {
					
					text: options.title,
					style: {
						
						margin: '10px 100px 0 0'
						
					}
					
				},
				subtitle: {
					
					text: options.subtitle,
					style: {
						
						margin: '10px 100px 0 0'
						
					}
					
				},
				xAxis: {
					
					title: {
					   
					   text: options.xlabel
					   
					},
					categories: ['Jan', 'Feb', 'Mar', 'Apr']
					
				},
				yAxis: {
					
					title: {
					   
					   text: options.ylabel
					   
					},
					
					plotLines: [{
                        value: 0,
                        width: 0,
                        color: '#808080'
                    }]
					
				},
				tooltip: {
                    formatter: function() {
                        return '<b>'+ this.series.name +'</b><br/>'+
                        this.x +': '+ this.y;
                    }
                },
                legend: {
                    /*
                    layout: 'vertical',
                    style: {
                        left: 'auto',
                        bottom: 'auto',
                        right: '10px',
                        top: '100px'
                    }
                    */
                },
                plotOptions: {
                    spline: {
                        cursor: 'pointer',
                        point: {
                            events: {
                                click: function() {
                                    hs.htmlExpand(
                                        null, {
                                            pageOrigin: {
                                                x: this.pageX, 
                                                y: this.pageY
                                            },
                                            headingText: this.series.name,
                                            maincontentText: 'this.category: '+ this.category +
                                            '<br/>this.y: '+ this.y,
                                            width: 200
                                        }
                                    );
                                }
                            }
                        }
                    }
                 },
                series: [
                    {
                        name: 'Total Traffic',
                        data: [10, 22, 96, 320],
                        color: '#5a86d5'
                    },
                    {
                        name: 'Blocked Bad Guys',
                        data: [2, 10, 20, 40],
                        color: '#f73037'
                    }
                ]
			}
		);
		
		//_cfcharts.push(chart);
		
	};
	
})(jQuery);