// Copyright (C) 2012 Ron Ostafichuk
//
// Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files
// (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify,
// merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
// OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR
// IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


// simple ellipse function found on Stackoverflow by Deven Kalra
function ellipse(context, cx, cy, rx, ry){
        context.save();
        context.beginPath();

        context.translate(cx-rx, cy-ry);
        context.scale(rx, ry);
        context.arc(1, 1, 1, 0, 2 * Math.PI, false);
        
        context.restore();
        context.stroke();
}
// Function to draw an html5 coin stack with various heights using the canvas tag
/*
 * drawCoinStack params:
 * sControlID = DOM id for canvas element (canvas should have dimensions 2*higher than it is tall for best results)
 * nCoins = number between 0 and 100 for percent of full scale
 */
function drawCoinStack(sControlID, nCoins, nMaxCoins) {
	var canvas = document.getElementById(sControlID);
	if( canvas == 'undefined' )
		return; // canvas does not exist
	if (!canvas.getContext) {
		$('#' + sControlID).html('Unsupported: ' + sParams);
		return; // this browser does not support the canvas (html5)
	}
	var ctx = canvas.getContext('2d');
	
	// basic colors need for drawing
	var sWhite = 'white';
	var sGold='black';

	// get some critical dimensions for drawing
	var nWidth = ctx.canvas.width;
	var nHeight = ctx.canvas.height;

	// clear the gauge area
	var sBackgroundColor = ''; // transparent background
	ctx.fillstyle = sBackgroundColor;
	ctx.lineCap = "square"; // most browsers only support square linecaps

	// calc top and bottom of stack
	nBottom_px=nHeight*0.92;
	nTop_px=nHeight*0.05;
	nPixelRange = nTop_px-nBottom_px;
	nLeft_px = nWidth*0.25;
	nRight_px = nWidth*0.75;
	if (nCoins < 0) 
		nCoins = 0; // do not allow arrow to go below the minimum gauge position!
	if (nCoins > nMaxCoins) 
		nCoins = nMaxCoins;
	
	var nPixelsPerCoin = nPixelRange / nMaxCoins;
	var sColorOfCoin = sGold;
	
	var xc = nWidth/2;
	// draw shadow outlines of total coin stack
	ctx.strokeStyle = '#909090';
	// changed to 'white' 9.9.2020
	ctx.strokeStyle = 'white';
	ctx.fillStyle = sWhite;
	ctx.lineWidth = 0.8;
	ctx.save();
	for( var n = 0; n < nMaxCoins ; n++ )
	{
		var yc = n * nPixelsPerCoin + nBottom_px;
		ellipse(ctx, xc, yc, nWidth/2-2, nWidth/8);
		ctx.fill();
	}
	ctx.restore();
	
	// draw coins to the level requested
	ctx.fillStyle = sColorOfCoin;
	ctx.save();
	for( var n = 0; n < nCoins ; n++ )
	{
		var yc = n * nPixelsPerCoin + nBottom_px;
		ellipse(ctx, xc, yc, nWidth/2-2, nWidth/8);
		ctx.fill();
	}
	ctx.restore();
}