//
// The Ferris Wheel Simulator
// Copyright c Brian P. Vogl
// Conceived Febuary 3 2019
// Original JS version 
// Started February 3 2019
// Complete Feburary 3 2019
//

var canvas = document.getElementById("thecanvas");
// canvas.style.backgroundColor = "white";
var ctx;
var bbox = canvas.getBoundingClientRect();
var stepi = Math.PI / 200;
var angle = 0;
var radius = 49;
var scale = 7;

Ferris();

function Ferris()
{   if(ctx = canvas.getContext('2d'))
    {   canvas.oncontextmenu = function (event) {
            event.preventDefault();             };
    }
    setInterval(do_display, 50);
}

function draw_gondola(Xpos, Ypos, nbr)
{   ctx.strokeStyle = '#000000'; 
    ctx.lineWidth = 2;
    switch(nbr)
    {   // Select the color to appear on the face of the polygon
        case 0 : ctx.fillStyle = 'orange';	break;
        case 1 : ctx.fillStyle = 'green';	      break;
        case 2 : ctx.fillStyle = 'yellow';	break;
        case 3 : ctx.fillStyle = 'red';		break;
        case 4 : ctx.fillStyle = 'blue';		break;
        case 5 : ctx.fillStyle = 'pink';        break;
        case 6 : ctx.fillStyle = 'lime';	      break;
        case 7 : ctx.fillStyle = 'magenta';	break;
    }
    ctx.beginPath();
    ctx.moveTo(Xpos, Ypos);
    ctx.lineTo(Xpos - scale, Ypos + 2 * scale);
    ctx.lineTo(Xpos - scale, Ypos + 4 * scale);
    ctx.lineTo(Xpos + scale, Ypos + 4 * scale);
    ctx.lineTo(Xpos + scale, Ypos + 2 * scale);
    ctx.lineTo(Xpos, Ypos);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
}

function do_display()
{   // rotate the wheel to the next angle
    var polyX = [ 0, 0, 0, 0, 0, 0, 0, 0 ];
    var polyY = [ 0, 0, 0, 0, 0, 0, 0, 0 ];
    var step = 2 * Math.PI / 8; 

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
// Set up Poly and Draw the Gondolas
    for(var t = 0; t < 8; t++)
    {	  polyX[t] = canvas.width / 2 + radius * Math.sin(angle + step * t);
	  polyY[t] = -20 + canvas.height / 2 + radius * Math.cos(angle + step * t);
        draw_gondola(polyX[t], polyY[t], t);
    }

// Draw the Wheel
    ctx.beginPath();
    ctx.strokeStyle = '#000000'; 
    ctx.lineWidth = 1;         
    for(var t = 0; t < 8; t++)
    {   if(t == 0) ctx.moveTo(polyX[t], polyY[t]);
        else 
        {  ctx.lineTo(polyX[t], polyY[t]);
        }
    }
    ctx.closePath();
    ctx.stroke();

// Draw the Wheels guts
    var ptrA = [0, 2, 1, 3];
    var ptrB = [4, 6, 5, 7];
    for(var t = 0; t < 4; t++)
    {   ctx.moveTo(polyX[ptrA[t]], polyY[ptrA[t]]);
        ctx.lineTo(polyX[ptrB[t]], polyY[ptrB[t]]);
        ctx.stroke();
    }

// Draw the Stand
    ctx.beginPath();
    ctx.strokeStyle = '#000000'; 
    ctx.lineWidth = 3;
    ctx.moveTo(canvas.width / 2, canvas.height / 2 - 20);
    ctx.lineTo(10, canvas.height - 10);
    ctx.lineTo(canvas.width - 10, canvas.height - 10);
    ctx.closePath();
    ctx.stroke();

// Set up our new angle.
    angle += stepi;
    if( angle > 2 * Math.PI ) angle = 0; 
}