Lunchwheel

Example of using HTML5 Canvas element

HTML

<div id="venues" style="float: left"><ul /></div>

<div id="wheel" >
    <canvas id="canvas" width="1000" height="600"></canvas>
</div>

<div id="stats">
    <div id="counter"></div>
</div>

JavaScript

// Helpers
shuffle = function(o) {
    for (var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
    return o;
};

String.prototype.hashCode = function() {
    // See http://www.cse.yorku.ca/~oz/hash.html        
    var hash = 5381;
    for (i = 0; i < this.length; i++) {
        char = this.charCodeAt(i);
        hash = ((hash << 5) + hash) + char;
        hash = hash & hash; // Convert to 32bit integer
    }
    return hash;
}

Number.prototype.mod = function(n) {
    return ((this % n) + n) % n;
}

// List of venues. These are foursquare IDs, with the idea that eventually it'll tie in 
venues = {
    "116208": "Jerry's Subs and Pizza",
    "66271": "Starbucks",
    "5518": "Ireland's Four Courts",
    "392360": "Five Guys",
    "2210952": "Uptown Cafe",
    "207306": "Corner Bakery Courthouse",
    "41457": "Delhi Dhaba",
    "101161": "TNR Cafe",
    "257424": "Afghan Kabob House",
    "512060": "The Perfect Pita",
    "66244": "California Tortilla",
    "352867": "Pho 75 - Rosslyn",
    "22493": "Ragtime",
    "268052": "Subway",
    "5665": "Summers Restaurant & Sports Bar",
    "129724": "Cosi",
    "42599": "Ray's Hell Burger"
};

$(function() {

    var venueContainer = $('#venues ul');
    $.each(venues, function(key, item) {
        venueContainer.append(
        $(document.createElement("li")).append(
        $(document.createElement("input")).attr({
            id: 'venue-' + key,
            name: item,
            value: item,
            type: 'checkbox',
            checked: true
        }).change(function() {
            var cbox = $(this)[0];
            var segments = wheel.segments;
            var i = segments.indexOf(cbox.value);

            if (cbox.checked && i == -1) {
                segments.push(cbox.value);

            } else if (!cbox.checked && i != -1) {
                segments.splice(i, 1);
            }

            segments.sort();
            wheel.update();
        })

       ...