Wheel of Dev (sizablity)

allow any size

by rob Davis

HTML

Wheel of Dev <input type="button" id="btn-spin" value="spin"/><div id="info">_</div><br />
<div id="container" />

CSS

#container { 
    background-color:#eee;
    width:600px;
    height:600px;
    display:block;
}
canvas {
    position:absolute;
}
.canvasForeground, .canvasWheel, .canvasSelector { display:none; }

JavaScript

// add sound
// should the pegs and spike be resizable?

var names = ['Rob',
             'Ian',
             'Jon',
             'Dave',
             'Declan',
             'Paul'];

names.push('Spin again');
names.push('Other, really long string');




// declare our global namespace
var SPINWHEEL = SPINWHEEL || {};

// create the closure for the instance of the object
SPINWHEEL.wheelOfDev = (function(targetId, list){
    // canvas layers array, properties get populated as they are dynamically created
    var canvases = [{"name":'canvasMain'}, {"name":'canvasWheel'}, {"name":'canvasForeground'},{"name":'canvasSelector'}];
    var fps = 14; // anything faster is unnoticable
    var intervalHandle = null; // animation handle
    
    var spinAngle = -3; // starting offset
    var spinAngleStart = -1;
    var spinRate = 10;
    var spinAlt = 0.2;
    var spinReverseAngle = -1;
    
    var appWidth  = -1;
    var appHeight = -1;
    var appRadius = -1;
    var wheelRadius = -1;
    
    // cannot make public but can expose a setter SetOnCompleted()
    var onCompleted = null;
    
    // initialise all the dynamic canvases
    var init = function() {
    	var targetDiv = document.getElementById(targetId);
		for (var i=0;i<canvases.length;i++) {
		    if (getCanvas(canvases[i].name)) break;
		    canvases[i]=newCanvas(targetId, canvases[i].name);
		    targetDiv.appendChild(canvases[i].canvas);
		}
		appWidth = targetDiv.offsetWidth;
		appHeight = targetDiv.offsetHeight;
        appRadius = appWidth/2;
        wheelRadius = appRadius - (appRadius/10);
		// setup the canvas parameters and pre-renders
		// Main
		var main = getCanvas('canvasMain');
		main.canvas.width = appWidth;
		main.canvas.height = appHeight;
		// Wheel
		var wheel = getCanvas('canvasWheel');
		wheel.canvas.width = appWidth;
		wheel.canvas.height = appHeight;
        // Foreground
		var forground = getCanvas('canvasForeground');
		forground.canvas.width = appWidth;
		forground.canvas.height =...