/* Some Globals */
var graphPadding = 10;
var colours = new Array("rgb(200,0,0)","rgb(0,200,0)","rgb(0,0,200)","rgb(0,200,200)");

jQuery(document).ready(function($){

	/* Generate Nice jQuery UI Sliders */
	$('#Slider1, #Slider2, #Slider3, #Slider4').slider({
		slide: function(event,ui){drawGraphs();}
	});

	/* Set some random initial values for the sliders */
	$('#Slider1, #Slider2, #Slider3, #Slider4').each(
		function(){
			$(this).slider('value',Math.random() * 100);
		}
	);

	drawGraphs();

});

/**
 * drawGraphs
 * This draws each of the graphs, using the values of the sliders to determine the plots/heights
 */
function drawGraphs(){
	/* Get the canvas dimensions, we know they are both the same so we shall be lazy and only check once */
	var cHeight = parseInt($('#Graph1').height());
	var cWidth = parseInt($('#Graph1').width());

	/* Clear the Canvases */
	clearCanvas($('#Graph1'));
	clearCanvas($('#Graph2'));

	/* Graph 1  - The line graph */
	// Get Context
	var canvas = document.getElementById("Graph1");
   	var ctx = canvas.getContext("2d");

	// Set Stroke Style
	ctx.strokeStyle = "rgb(0,0,0)";

	// Draw Axis
	ctx.beginPath();
	ctx.moveTo(graphPadding, graphPadding);
	ctx.lineTo(graphPadding,cHeight - graphPadding);
	ctx.lineTo(cWidth - graphPadding, cHeight - graphPadding);
	ctx.stroke();
	ctx.closePath();

	// Display a point for each slider, spaced equally
	var availableSpace = cWidth - (graphPadding * 4);
	var horizSpace = availableSpace / 3;
	var vertSpace = cHeight - (graphPadding * 4);

	// Create an array of y points
	var points = new Array();
	for(var i = 0;i < 4;i++){
		// Get Ypos
		var yPercent  = ($('#Slider' + (i + 1)).slider('value') - 100) * -1;
		var yPos = (vertSpace * (yPercent / 100) + (graphPadding * 2));
		points.push(yPos);
	}

	// Draw Lines
	var xPos = graphPadding * 2;
	ctx.beginPath();
	for(i = 0;i < 4;i++){
		if(i == 0){
			ctx.moveTo(xPos, points[i]);
		}else{
			ctx.lineTo(xPos, points[i]);
		}
		xPos += horizSpace;
	}
	ctx.stroke();
	ctx.closePath();

	// Draw Dots
	var xPos = graphPadding * 2;
	for(i = 0;i < 4;i++){
		drawCircle(ctx, xPos, points[i], 4, colours[i]);
		xPos += horizSpace;
	}


	/* Draw Graph 2 - Bar Chart */
	// Get Context
	var canvas = document.getElementById("Graph2");
   	var ctx = canvas.getContext("2d");

	// Set Stroke Style
	ctx.strokeStyle = "rgb(0,0,0)";

	// Draw Axis
	ctx.beginPath();
	ctx.moveTo(graphPadding, graphPadding);
	ctx.lineTo(graphPadding,cHeight - graphPadding);
	ctx.lineTo(cWidth - graphPadding, cHeight - graphPadding);
	ctx.stroke();
	ctx.closePath();

	// Work out width of each bar
	var availableWidth = cWidth - (graphPadding * 6);
	var barWidth = availableWidth / 4;
	var maxHeight = cHeight - (graphPadding * 3);

	// Draw bars
	var xPos = graphPadding * 2;
	for(i = 0;i < 4;i++){
		// Work out height
		var h = maxHeight * ($('#Slider' + (i + 1)).slider('value') / 100);
		var yPos = cHeight - h - (graphPadding * 2);
		ctx.fillStyle = colours[i];
		ctx.fillRect(xPos, yPos, barWidth, h);

		xPos += barWidth + graphPadding;

	}

}

/**
 * clearCanvas
 * Clears a canvas, by setting it's width.
 */
function clearCanvas(element){
	$(element).attr('width',$(element).attr('width'));
}

/**
 * drawCircle
 * Draws a circle
 */
function drawCircle(ctx, x, y, radius, colour){
	ctx.fillStyle = colour;
	ctx.beginPath();
    ctx.arc(x, y, radius,0,Math.PI*2,true); // Outer circle
    ctx.fill();

}