/************* CANVAS PAINTING **************/

function FillSquareGradient( goDown, context, nWidth, nHeight, eInfo, cDark, cLight, xPos, yPos, rad ) {
	if( goDown == null ) goDown = true;

	var specs = { x: xPos, y:yPos, height:nHeight, width:nWidth, radius:rad, border:0 };
	var grad = context.createLinearGradient( 0, 0, 0, nHeight );
	if( goDown ) {
		grad.addColorStop( 0, cDark );
		grad.addColorStop( 1, cLight );
	}
	else {
		grad.addColorStop( 0, cLight );
		grad.addColorStop( 1, cDark );
	}
	context.fillStyle = grad;
	$.canvasPaint.roundedRect( context, specs ); 
}

function TopDownPaint( context, nWidth, nHeight, eInfo ) {
	FillSquareGradient( true, context, nWidth, nHeight, eInfo, clrDark, clrLight, 0, 0, 0 );
}

function BottomUpPaint( context, nWidth, nHeight, eInfo ) {
	FillSquareGradient( false, context, nWidth, nHeight, eInfo, clrDark, clrLight, 0, 0, 0 );
}

function RoundedShadowPaint( context, nWidth, nHeight, eInfo ) {
	var rad = defaultRadius;
	var specs = { height:nHeight, width:nWidth, radius:rad, border:1 };
	context.fillStyle = clrBorder;
	$.canvasPaint.roundedRect( context, specs );

	specs.height -= 2;
	specs.width -= 2;
	specs.x = 1;
	specs.y = 1;
	context.fillStyle = clrFace;
	$.canvasPaint.roundedRect( context, specs );
}

function RoundedShadowPaintShadow( context, nWidth, nHeight, eInfo ) {
	var rad = defaultRadius;
	var specs = { height:nHeight, width:nWidth, radius:rad, border:1 };

	specs.x = 8;
	specs.y = 8;
	context.fillStyle = clrBorderDark;
	$.canvasPaint.roundedRect( context, specs );

	specs.x = 4;
	specs.y = 4;
	specs.height -= 8;
	specs.width -= 8;
	context.fillStyle = clrBorder;
	$.canvasPaint.roundedRect( context, specs );

	specs.height -= 2;
	specs.width -= 2;
	specs.x += 1;
	specs.y += 1;
	context.fillStyle = clrFace;
	$.canvasPaint.roundedRect( context, specs );
}

function TopDownPaintButtonsGraySolid( context, nWidth, nHeight, eInfo ) {
	var specs = { height:nHeight, width:nWidth, radius:defaultRadius, border:0 };
	context.fillStyle = clrDark;
	$.canvasPaint.roundedRect( context, specs );
	FillSquareGradient( true, context, nWidth - 2, nHeight - 2, eInfo, clrSolidGray, clrSolidGray, 1, 1, defaultRadius );
}

function TopDownPaintButtonsGray( context, nWidth, nHeight, eInfo ) {
	var specs = { height:nHeight, width:nWidth, radius:defaultRadius, border:0 };
	context.fillStyle = clrDark;
	$.canvasPaint.roundedRect( context, specs );
	FillSquareGradient( true, context, nWidth - 2, nHeight - 2, eInfo, clrButtonsDark, clrButtonsLight, 1, 1, defaultRadius );
}

function TopDownPaintButtonsTransGray( context, nWidth, nHeight, eInfo ) {
	var specs = { height:nHeight, width:nWidth, radius:defaultRadius, border:0 };
	context.fillStyle = clrDark;
	$.canvasPaint.roundedRect( context, specs );
	FillSquareGradient( true, context, nWidth - 2, nHeight - 2, eInfo, clrButtonsDarkTrans, clrButtonsLightTrans, 1, 1, defaultRadius );
}

function TopDownPaintButtonsBlue( context, nWidth, nHeight, eInfo ) {
	var specs = { height:nHeight, width:nWidth, radius:defaultRadius, border:0 };
	context.fillStyle = clrDark;
	$.canvasPaint.roundedRect( context, specs );
	FillSquareGradient( true, context, nWidth - 2, nHeight - 2, eInfo, clrButtonsDarkB, clrButtonsLightB, 1, 1, defaultRadius );
}

function TopDownPaintButtonsTransBlue( context, nWidth, nHeight, eInfo ) {
	var specs = { height:nHeight, width:nWidth, radius:defaultRadius, border:0 };
	context.fillStyle = clrDark;
	$.canvasPaint.roundedRect( context, specs );
	FillSquareGradient( true, context, nWidth - 2, nHeight - 2, eInfo, clrButtonsDarkTransB, clrButtonsLightTransB, 1, 1, defaultRadius );
}

function TopDownPaintButtonsGreen( context, nWidth, nHeight, eInfo ) {
	var specs = { height:nHeight, width:nWidth, radius:defaultRadius, border:0 };
	context.fillStyle = clrDark;
	$.canvasPaint.roundedRect( context, specs );
	FillSquareGradient( true, context, nWidth - 2, nHeight - 2, eInfo, clrButtonsDarkG, clrButtonsLightG, 1, 1, defaultRadius );
}

function TopDownPaintButtonsTransGreen( context, nWidth, nHeight, eInfo ) {
	var specs = { height:nHeight, width:nWidth, radius:defaultRadius, border:0 };
	context.fillStyle = clrDark;
	$.canvasPaint.roundedRect( context, specs );
	FillSquareGradient( true, context, nWidth - 2, nHeight - 2, eInfo, clrButtonsDarkTransG, clrButtonsLightTransG, 1, 1, defaultRadius );
}

function TopDownPaintButtonsOrange( context, nWidth, nHeight, eInfo ) {
	var specs = { height:nHeight, width:nWidth, radius:defaultRadius, border:0 };
	context.fillStyle = clrDark;
	$.canvasPaint.roundedRect( context, specs );
	FillSquareGradient( true, context, nWidth - 2, nHeight - 2, eInfo, clrButtonsDarkO, clrButtonsLightO, 1, 1, defaultRadius );
}

function TopDownPaintButtonsTransOrange( context, nWidth, nHeight, eInfo ) {
	var specs = { height:nHeight, width:nWidth, radius:defaultRadius, border:0 };
	context.fillStyle = clrDark;
	$.canvasPaint.roundedRect( context, specs );
	FillSquareGradient( true, context, nWidth - 2, nHeight - 2, eInfo, clrButtonsDarkTransO, clrButtonsLightTransO, 1, 1, defaultRadius );
}