function BackgroundPaintWhite(context, width, height, elementInfo) {

	var options = { x: 0,
					height: height,
					width: width,
					radius: 14,
					border: 0
				};

	// Draw the border rectangle
	context.fillStyle = "#cccccc";

	$.canvasPaint.roundedRect(context, options);

	// Draw the gradient filled inner rectangle
	var backgroundGradient = context.createLinearGradient(0, 0, 0, height - 10);

	backgroundGradient.addColorStop(0 ,'#ffffff');
	backgroundGradient.addColorStop(1, '#eeeeee');

	options.border = 1;

	context.fillStyle = backgroundGradient;

	$.canvasPaint.roundedRect(context, options);

}

function BackgroundPaintGrey(context, width, height, elementInfo) {

	var options = { x: 0,
					height: height,
					width: width,
					radius: 14,
					border: 0
				};

	// Draw the border rectangle
	context.fillStyle = "#cccccc";

	$.canvasPaint.roundedRect(context, options);

	// Draw the gradient filled inner rectangle
	var backgroundGradient = context.createLinearGradient(0, 0, 0, height - 10);

	backgroundGradient.addColorStop(0 ,'#efefef');
	backgroundGradient.addColorStop(1, '#cccccc');

	options.border = 1;

	context.fillStyle = backgroundGradient;

	$.canvasPaint.roundedRect(context, options);

}

function BackgroundPaintBlack(context, width, height, elementInfo) {

	var options = { x: 0,
					height: height,
					width: width,
					radius: 14,
					border: 0
				};

	// Draw the border rectangle
	context.fillStyle = "#cccccc";

	$.canvasPaint.roundedRect(context, options);

	// Draw the gradient filled inner rectangle
	var backgroundGradient = context.createLinearGradient(0, 0, 0, height - 10);

	backgroundGradient.addColorStop(0 ,'#585656');
	backgroundGradient.addColorStop(1, '#353334');

	options.border = 1;

	context.fillStyle = backgroundGradient;

	$.canvasPaint.roundedRect(context, options);

}

function BackgroundPaintBlue(context, width, height, elementInfo) {

	var options = { x: 0,
					height: height,
					width: width,
					radius: 14,
					border: 0
				};

	// Draw the border rectangle
	context.fillStyle = "#cccccc";

	$.canvasPaint.roundedRect(context, options);

	// Draw the gradient filled inner rectangle
	var backgroundGradient = context.createLinearGradient(0, 0, 0, height - 10);

	backgroundGradient.addColorStop(0 ,'#a7b9ca');
	backgroundGradient.addColorStop(1, '#2f6091');

	options.border = 1;

	context.fillStyle = backgroundGradient;

	$.canvasPaint.roundedRect(context, options);

}

function BackgroundPaintGreen(context, width, height, elementInfo) {

	var options = { x: 0,
					height: height,
					width: width,
					radius: 14,
					border: 0
				};

	// Draw the border rectangle
	context.fillStyle = "#cccccc";

	$.canvasPaint.roundedRect(context, options);

	// Draw the gradient filled inner rectangle
	var backgroundGradient = context.createLinearGradient(0, 0, 0, height - 10);

	backgroundGradient.addColorStop(0 ,'#a3da01');
	backgroundGradient.addColorStop(1, '#92c301');

	options.border = 1;

	context.fillStyle = backgroundGradient;

	$.canvasPaint.roundedRect(context, options);

}