$(document).ready(function () {

	var graphColors = ['#4b81ed','#ed4b8a', '#793fc7', '#6cc73f', 
	                   '#dc8f0b','#0dcec3', '#ff49fd', '#a20b37',
	                   '#a2720b', '#5e7d26'];
	
	$.fn.canvasGraph = function(options) {

		/* calculate the upper limit in an array */
		var calulculateUpperLimit = function (valueArr) {
			var values 	= valueArr;
			var max 	= 0;
			for (i = 0;i<=values.length;i++) 
				max = values[i]>max?values[i]:max;

			max = Math.ceil(Math.ceil(max/10)*10);

			return max;
		}
		/* calculate the lower limit in an array */
		var calulculateLowerLimit = function (valueArr) {
		//	jj.alert(valueArr);
			var values 	= valueArr;
			var min 	= 0; //values[0];
			for (i = 0;i<=values.length;i++) 
				min = values[i]<min?values[i]:min;

			//	min = Math.ceil(Math.ceil(min/10)*10);
		//	alert(min);
			return min;
		}
		
		/* */
		var fillCtx = function () {

			// style the canvas
	        ctx.fillStyle = "rgb(255,255,255)";
	        ctx.fillRect (0, 0, ctxWidth, ctxHeight);

	        ctx.strokeStyle = "rgb(180,180,180)";
	        ctx.strokeRect(0, 0, ctxWidth, ctxHeight);

		}
		var getYcoord = function (value) {

			return coordsMin.y - (Math.ceil((coordsMin.y - coordsMax.y)) / (maxY) * value);
			
		}
		var getXcoord = function (value) {
			return ((coordsMax.x - coordsMin.x) / maxX) * value;
			
		}
		var drawGrid = function () {
			

	        ctx.strokeStyle = "rgb(245,245,245)";    
	        ctx.lineWidth = 1;

	        var gridSizeY = getYcoord(10);
	        var gridSizeX = getXcoord(1);
	       
			
			// vertical lines
			for (x = coordsMin.x;x<=coordsMax.x;x=x+gridSizeX) {
				ctx.beginPath();
				ctx.moveTo(x, coordsMin.y);
				ctx.lineTo(x, coordsMax.y);
				ctx.stroke();
			}
			
			// horozontal lines
			for (y = minY;y<=maxY;y=y+50) {
				try {
				ctx.beginPath();
				ctx.moveTo(coordsMin.x, getYcoord(y));
				ctx.lineTo(coordsMax.x, getYcoord(y));
				ctx.stroke();
				} catch (Exception) {
					break;
				}
			}
			
			// draw the axis
	        ctx.strokeStyle = "rgb(200,200,200)";  
			
			ctx.beginPath();
			ctx.moveTo(coordsMin.x, coordsMin.y);
			ctx.lineTo(coordsMin.x, coordsMax.y);
			ctx.stroke();
			ctx.beginPath();
			ctx.moveTo(coordsMin.x, coordsMin.y);
			ctx.lineTo(coordsMax.x, coordsMin.y);
			ctx.stroke();
			
			// add marks on axis

			ctx.beginPath();
			ctx.moveTo(coordsMin.x, getYcoord(maxY));
			ctx.lineTo(coordsMin.x-5, getYcoord(maxY));
			ctx.stroke();

			ctx.beginPath();
			ctx.moveTo(coordsMin.x, getYcoord((maxY/4)*3));
			ctx.lineTo(coordsMin.x-5, getYcoord((maxY/4)*3));
			ctx.stroke();
			
			ctx.beginPath();
			ctx.moveTo(coordsMin.x, getYcoord(maxY/2));
			ctx.lineTo(coordsMin.x-5, getYcoord(maxY/2));
			ctx.stroke();
			
			ctx.beginPath();
			ctx.moveTo(coordsMin.x, getYcoord(maxY/4));
			ctx.lineTo(coordsMin.x-5, getYcoord(maxY/4));
			ctx.stroke();
			
			ctx.beginPath();
			ctx.moveTo(coordsMin.x, getYcoord(0));
			ctx.lineTo(coordsMin.x-5, getYcoord(0));
			ctx.stroke();
			
			
		}
		var drawLineGraph = function (data, color) {
			 
	        ctx.strokeStyle = color;  
	        ctx.lineWidth = 1.5;
			ctx.beginPath();
			var values = data;
			ctx.moveTo(Math.ceil(getXcoord(0)+coordsMin.x), getYcoord(values[0]));

			for (i = 1;i<=values.length;i++) 
				ctx.lineTo(Math.ceil(getXcoord(i-1)+coordsMin.x), getYcoord(values[i-1]));

			ctx.stroke();
		}
		var drawGraphPoints = function (data, color) {

	        ctx.strokeStyle = color;  
	        ctx.fillStyle = '#fff';//color;  
	        ctx.lineWidth = 1.5;
	//		ctx.beginPath();
			var values = data;
	//		ctx.moveTo(Math.ceil(getXcoord(0)+coordsMin.x), getYcoord(values[0]));

			for (i = 1;i<=values.length;i++) {
				ctx.beginPath();
				//ctx.moveTo(Math.ceil(getXcoord(i-1)+coordsMin.x),getYcoord(values[i-1]));
				ctx.arc(Math.ceil(getXcoord(i-1)+coordsMin.x),getYcoord(values[i-1]),2,0,Math.PI*2,true);  // Right eye
				ctx.fill();

				ctx.stroke();
			}

		}
		var drawTitle = function () {
	        ctx.lineWidth = 1;
	        var textSize = ctx.measureText(title);
			ctx.beginPath();

	        ctx.fillStyle = "rgb(160,160,160)";  
	        ctx.font         = 'bold 12px sans-serif';
			ctx.fillText(title, coordsMin.x+((coordsMax.x-coordsMin.x)/2)-(textSize.width/2), coordsMax.y -8);  
			ctx.stroke();

		}
		var drawAxis = function () {
			if (yAxis) {
			    ctx.save();
			    ctx.lineWidth = 1;
			    ctx.rotate(270 * Math.PI / 180);
				ctx.beginPath();
	
		        ctx.fillStyle 	= "rgb(190,190,190)";  
		        ctx.font        = 'bold 11px sans-serif';
		        var textSize = ctx.measureText(yAxis);
				ctx.fillText(yAxis, ((ctxHeight/2) + (textSize.width/2))*-1,  17);  
				ctx.stroke();
			    ctx.restore();
			}

			if (xAxis) {
				ctx.beginPath();
		        ctx.fillStyle 	= "rgb(190,190,190)";  
		        ctx.font        = 'bold 11px sans-serif';
		        var textSize = ctx.measureText(xAxis);
				ctx.fillText(xAxis, coordsMin.x+((coordsMax.x-coordsMin.x)/2)- (textSize.width/2), ctxHeight - 10);  
				ctx.stroke();
			}

		}
		
		// get canvas context
		var canvas = document.getElementById($(this).attr('id'));
	
		if (canvas.getContext) var ctx = canvas.getContext("2d");
		else throw ("Can't get canvas context");
		
		var graphData = new Array(); 
		// calculate grid scale
		var minY = 0;
		var maxY = 0;
		var maxX = 0;
		for (g = 0; g < options.data.length;g++) {
			var newGraph = options.data[g];
			graphData.push(newGraph);
			//jj.alert(options.data[i].values);
			var graphMinY = calulculateLowerLimit(newGraph.values);
			var graphMaxY = calulculateUpperLimit(newGraph.values);
			var graphMaxX = newGraph.values.length -1;

			minY = graphMinY < minY ? graphMinY : minY;
			maxY = graphMaxY > maxY ? graphMaxY : maxY;
			maxX = graphMaxX > maxX ? graphMaxX : maxX;
			
		}
		//jj.alert(graphData);
		var title = options.title;
		var xAxis = options.xAxis;
		var yAxis = options.yAxis;
		
		
		var ctxWidth = $(this).width();
		var ctxHeight = $(this).height();
		
       

		
		var coordsMin = {	x: 30,
							y: ctxHeight -30
					};
		
		var coordsMax = {	x: ctxWidth - 20,
							y: 30
					};
		
		fillCtx();
		try {
			drawGrid();
		} catch (Exception) {
		
		}
	
		for (var d = 0;d<graphData.length;d++) {

			try {
			var currentGraphData = graphData[d].values;
			drawLineGraph(currentGraphData, graphData[d].color != undefined ? graphData[d].color:graphColors[d]);
			drawGraphPoints(currentGraphData, graphData[d].color != undefined ? graphData[d].color:graphColors[d]);
			} catch (Exception) {
				
			}
		}
		try {
			drawTitle();
			drawAxis();
		} catch (Exception) {
			
		}
		
	};


});