var ExtremeGraph = function(options) {

	this.opts = $.extend({},ExtremeGraph.prototype.defaults,options);

	this.ctx = $("<canvas></canvas>").attr('id','extremegraph-graph')
	                                 .attr('height',String(this.opts.graphHeight))
	                                 .attr('width',String(this.opts.graphWidth))
		                             .appendTo(this.opts.container.css({
										border: '1px solid #999',
	                                 	width: String(this.opts.containerWidth) + 'px',
	                                 	height: String(this.opts.containerHeight) + 'px',
	                                 	overflowX: 'scroll'
	                                 }))[0].getContext('2d');

	this.columnCount = 0;

	this.drawColumn = function(year,months) {
		// on account of $.each() below
		var opts = this.opts; 
		var ctx = this.ctx;

		var curX = (this.columnCount * opts.columnWidth) + (this.columnCount * opts.columnPadding) + 70;
		var curY = -10;
		var badDays = 0;
		var avgOver = 0;

		ctx.fillStyle = "rgba(50,50,50,1)";
		ctx.fillText(year + ' / ' + String(Math.floor(data[opts.value][year] / 365 * 100)) + '%',curX,curY);
		curY -= 20;

		ctx.fillRect(curX - (opts.columnWidth/2 + opts.columnPadding),curY,opts.columnWidth + opts.columnPadding,1)
		curY -= 1;

		$.each(months,function(month,days){
			if( days.length == 0 ) { return; }
			$.each(days,function(index,day){
				if( day[opts.value] <= opts.limit ) { return; }
				var width = (day[opts.value] - opts.limit);
				ctx.fillStyle = opts.monthColors[month];
				ctx.fillRect(curX - (width/2), curY, width, opts.rowHeight);
				curY = curY - (opts.rowHeight);
				badDays ++;
				avgOver += width / opts.limit;
			});
		});

		var pctBadDays = badDays / 365 * 100;
		var pctOver = Math.floor(avgOver / badDays * 100);
		var pctDisplay = '';

		if( pctBadDays != 0 ) {
			if( pctBadDays < 1 ) { pctBadDays = '<1%'; }
			else { pctBadDays = String(Math.floor(pctBadDays)) + '%'; }
			pctDisplay =  pctBadDays + ' / ' + String(pctOver) + '%'
		}

		curY -= 5;
		ctx.fillStyle = "rgba(115,115,115,1)";
		ctx.fillText(pctDisplay,curX,curY);
		curY -= 20;

		this.columnCount++;
	}

	this.draw = function() {
		this.ctx.clearRect(0,0,this.opts.graphWidth,this.opts.graphHeight);
		this.ctx.font = '13px sans-serif';
		this.ctx.textAlign = 'center';
		this.ctx.save();  

		this.columnCount = 0;
		this.ctx.translate(0,this.opts.graphHeight);
		for( var year in data.overages ) { this.drawColumn(year,data.overages[year]); }

		this.ctx.restore();
	}

	this.createLegend = function() {
		if( this.opts.legend  == null ) return;

		var $legend = this.opts.legend;		
		$.each(this.opts.monthColors,function(month,color){
			var $swatch = $('<div></div>')
				.css('background-color',color)
				.width('20px')
				.height('20px');
			var $label = $('<div></div>').text(month);

			$('<div></div>')
				.css('float','right')
				.css('margin-right','8px')
				.css('font-size','10px')
				.css('text-align','center')
				.append($swatch)
				.append($label)
                .prependTo($legend);
		});

		$legend.children(':first').css('margin-right','0px');
		$legend.append('<div style="clear:both"></div>');
	}

	this.createLegend();
	this.draw();
}

ExtremeGraph.prototype.defaults = {
	limit: 75,
	value: '',
	containerWidth: 618,
	containerHeight: 370,
	graphWidth: 1690,
	graphHeight: 350,
	columnWidth: 120,
	columnPadding: 10,
	rowHeight: 1,
	monthColors: {
		jan: "rgba(191,  48,  48, 0.6)",
		feb: "rgba(  0,  99,  99, 0.6)",
		mar: "rgba( 51, 204, 204, 0.6)",
		apr: "rgba( 38, 153,  38, 0.6)",
		may: "rgba(166,  75,   0, 0.6)",
		jun: "rgba(255, 150,  64, 0.6)",
		jul: "rgba( 29, 115, 115, 0.6)",
		aug: "rgba(166,   0,   0, 0.6)",
		sep: "rgba(255,  64,  64, 0.6)",
		oct: "rgba(191, 113,  48, 0.6)",
		nov: "rgba(  0, 133,   0, 0.6)",
		dec: "rgba( 57, 230,  57, 0.6)"
	}
};