function launch(prefix, containerId) {
    var deps = [
        "element-factory.js",
        "animation.js",
        "sprite-manager.js"
    ];
    var loaded = 0;
    for (var i = 0; i < deps.length; i++) {
        var elem = document.createElement('script');
        elem.src = prefix + deps[i];
        elem.onload = function() {
            if (++loaded < deps.length) return;

            var gewgaw = new ANonRandomWalk();
            var container = document.getElementById(containerId);
            var button = yoob.makeButton(container, 'Reset', gewgaw.reset);
            var hanger = yoob.makeDiv(container);
            var canvas = yoob.makeCanvas(hanger, 600, 400);
            gewgaw.init(canvas);
        };
        document.body.appendChild(elem);
    }
}

var originX;
var x;

var walker;
var indicator;
var cardHistory;

var cardsRemaining;

Walker = function() {
    this.init = function(cfg) {
        cfg.x = 0;
        cfg.y = 0;
        cfg.width = 40;
        cfg.height = 40;
        // call superclass'es init() method
        Walker.prototype.init.apply(this, [cfg]);
        this.dist = 0;
        return this;
    };

    this.draw = function(ctx) {
        ctx.beginPath();
        ctx.strokeStyle = "black";
        ctx.lineWidth = 3;
        ctx.fillStyle = "rgba(255, 0, 0, 0.5)";
        ctx.arc(this.getX(), this.getY(),
                this.getWidth() / 2, 0, 2 * Math.PI, false);
        ctx.closePath();
        ctx.fill();
        ctx.stroke();
    };

    this.onreachdestination = function() {
        this.setVelocity(0, 0);
        indicator.dist = this.dist;
        if (cardsRemaining === 0) indicator.dist = 0;
        indicator.setPosition(this.getX(), this.getY());
    };
};

Indicator = function() {
    this.init = function(cfg) {
        cfg.x = 0;
        cfg.y = 0;
        cfg.width = 0;
        cfg.height = 0;
        // call superclass'es init() method
        Indicator.prototype.init.apply(this, [cfg]);
        this.dist = 0;
        return this;
    };

    this.draw = function(ctx) {
        ctx.beginPath();
        ctx.strokeStyle = "rgba(255, 0, 0, 0.5)";
        ctx.moveTo(this.getX(), this.getY());
        ctx.lineTo(this.getX() - this.dist, this.getY());
        ctx.stroke();

        ctx.beginPath();
        ctx.strokeStyle = "rgba(0, 0, 0, 0.5)";
        ctx.moveTo(this.getX(), this.getY());
        ctx.lineTo(this.getX() + this.dist, this.getY());
        ctx.stroke();
   };
};

Card = function() {
    this.init = function(cfg) {
        this.color = cfg.color;
        this.faceUp = cfg.faceUp;
        // call superclass'es init() method
        Card.prototype.init.apply(this, [cfg]);
        return this;
    };

    this.onclick = function() {
        if (this.faceUp) return;
        var dist = Math.abs(x) / 2;
        // in case walker was already moving, move indicator
        if (walker.destCounter) {
            indicator.dist = dist;
            indicator.setPosition(originX + x, walker.getY());
        }
        if (this.color === 'red') {
            x -= dist;
        } else {
            x += dist;
        }
        // new dist, will be set on indicator when walker finishes
        walker.dist = Math.abs(x) / 2;
        cardHistory.push(x);
        walker.setDestination(originX + x, walker.getY(), 30);
        this.faceUp = true;
        cardsRemaining--;
    };

    this.draw = function(ctx) {
        if (!this.faceUp) {
            var gradient = ctx.createLinearGradient(
                this.getLeftX(), this.getTopY(),
                this.getRightX(), this.getBottomY()
            );
            gradient.addColorStop(0.0, "red");
            gradient.addColorStop(0.5, "white");
            gradient.addColorStop(1.0, "blue");
            ctx.fillStyle = gradient;
        } else {
            ctx.fillStyle = this.color;
        }
        ctx.fillRect(this.getLeftX(), this.getTopY(),
                     this.getWidth(), this.getHeight());
    };
};

function shuffle(array) {
    var a = [];
    while (array.length > 0) {
        a.push(array.splice(Math.random() * array.length, 1)[0]);
    }
    return a;
}

ANonRandomWalk = function() {
    var canvas;
    var ctx;

    var manager;

    var y;
    var targetX;

    this.draw = function() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // draw floor
        ctx.strokeStyle = "black";
        ctx.lineWidth = 3;
        ctx.moveTo(0, y);
        ctx.lineTo(canvas.width, y);
        ctx.stroke();

        // draw origin point
        ctx.beginPath();
        ctx.fillStyle = "black";
        ctx.arc(originX, y, 5, 0, 2 * Math.PI, false);
        ctx.fill();
        ctx.stroke();
        ctx.closePath();

        // draw sprites
        manager.draw(ctx);

        // draw target
        ctx.strokeStyle = "blue";
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.moveTo(originX + targetX - 10, y + 20);
        ctx.lineTo(originX + targetX, y);
        ctx.lineTo(originX + targetX + 10, y + 20);
        ctx.stroke();
        ctx.closePath();

        // draw history
        ctx.strokeStyle = "black";
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.moveTo(originX + cardHistory[0], y);
        for (var i = 1; i < cardHistory.length; i++) {
            ctx.lineTo(originX + cardHistory[i], y + i * 10);
        }
        ctx.stroke();
    };

    this.update = function() {
        manager.move();
    };

    this.reset = function() {
        manager.clearSprites();

        walker = (new Walker()).init({});
        manager.addSprite(walker);
        indicator = (new Indicator()).init({});
        manager.addSprite(indicator);

        x = 250;
        y = 100;
        targetX = 23.73046875 * (x / 100);
        originX = canvas.width / 8;
        cardHistory = [x];
        cardsRemaining = 10;
        var deck = [];
        for (var i = 0; i < 10; i++) {
            deck.push(i % 2 === 0 ? "red" : "black");
        }
        deck = shuffle(deck);
        var cardW = 40;
        var cardH = 80;
        for (var i = 0; i < 10; i++) {
            var cardX = (cardW * 0.75) + (i % 13) * (cardW * 1.5);
            var cardY = 280;
            var card = (new Card()).init({
                x: cardX,
                y: cardY,
                width: cardW,
                height: cardH,
                isClickable: true,
                color: deck[i],
                faceUp: false
            });
            manager.addSprite(card);
        }
        walker.setPosition(originX + x, y - walker.getHeight() / 2);
        indicator.dist = Math.abs(x) / 2;
        indicator.setPosition(walker.getX(), walker.getY());
    };

    this.init = function(c) {
        /* This is kind of awful, but we can't have these as part of
           the main script, because yoob/sprite-manager.js might not be
           loaded yet. */
        Walker.prototype = new yoob.Sprite();
        Indicator.prototype = new yoob.Sprite();
        Card.prototype = new yoob.Sprite();

        canvas = c;
        ctx = canvas.getContext('2d');

        manager = (new yoob.SpriteManager()).init({
            canvas: canvas
        });

        this.reset();
        this.animation = (new yoob.Animation()).init({
            object: this
        });
        this.animation.start();
    };
}