(function() {
    var canvas, context,
        gradient1, gradient2,
        shape1, shape2,
        shape_list1, shape_list2,
        rotation, rotation_factor, rotation_factor_target,
        azimuth_factor, azimuth_factor_target,
        scale, scale_factor, scale_factor_target,
        resolution, resolution_options, resolution_index,
        tick;

    shape1 = [];
    shape2 = [];
    rotation = 0;
    rotation_factor = 1;
    rotation_factor_target = 1;
    azimuth_factor = .5;
    azimuth_factor_target = .5;
    scale = 0;
    scale_factor = 0;
    scale_factor_target = 0.5;
    resolution = 128;
    resolution_options = [64, 128];
    resolution_index = 0;
    tick = 0;

    // canvas = lawn_canvas(64, 64);
    canvas = lawn_canvas(128, 128);
    context = canvas.getContext('2d');

    for (var f, i = 0; i < 25; i++) {
        f = i * 2;
        shape1.push(
            [-f, -f, f, -f, f, f, -f, f]
        );
        f *= .5;
        shape2.push(
            [-f, -f, f, -f, f, f, -f, f]
        );
    }
    for (var f, i = 25; i > 0; i--) {
        f = i * 2;
        shape1.push(
            [-f, -f, f, -f, f, f, -f, f]
        );
        f *= .5;
        shape2.push(
            [-f, -f, f, -f, f, f, -f, f]
        );
    }

    gradient1 = [[0, 0, 0, 0], [.25, 0, 0, 0], [.5, 255, 255, 255], [.75, 0, 0, 0], [1, 0, 0, 0]];
    gradient2 = [[0, 0, 0, 0], [.25, 0, 0, 0], [.5, 80, 80, 80], [.75, 0, 0, 0], [1, 0, 0, 0]];
    gradient1 = lawn_gradient(128, gradient1);
    gradient2 = lawn_gradient(8, gradient2);

    shape_list1 = [
        {x: -100, y: 0, z: -25, slices: shape1, palette: gradient1},
        {x: 0, y: -100, z: -25, slices: shape1, palette: gradient2},
        {x: 0, y: 100, z: -25, slices: shape1, palette: gradient2},
        {x: 100, y: 0, z: -25, slices: shape1, palette: gradient1}
    ];

    shape_list2 = [
        {x: -100, y: 0, z: -25, slices: shape1, palette: gradient1},
        {x: 0, y: -100, z: -25, slices: shape2, palette: gradient2},
        {x: 0, y: 100, z: -25, slices: shape2, palette: gradient2},
        {x: 100, y: 0, z: -25, slices: shape1, palette: gradient1}
    ]

    setInterval(function() {
        if (tick % 10 == 0) {
            context.globalAlpha = 0.01;
            context.fillStyle = 'black';
            context.fillRect(-canvas.width / 2, -canvas.height / 2, canvas.width, canvas.height);
            context.globalAlpha = 1;
        }

        rotation_factor = rotation_factor - (rotation_factor - rotation_factor_target) / 50.0;
        if (rotation_factor > 0) {
            rotation -= Math.abs(rotation_factor);
        } else {
            rotation += Math.abs(rotation_factor);
        }
        azimuth_factor = azimuth_factor - (azimuth_factor - azimuth_factor_target) / 50.0;
        scale_factor = scale_factor - (scale_factor - scale_factor_target) / 50.0;

        context.save()
        context.translate(canvas.width / 2, canvas.height / 2);
        scale = scale_factor * resolution / resolution_options[0];
        context.scale(scale, scale);

        if (tick++ % 2 == 0) {
            lawn_draw(context, azimuth_factor, rotation * Math.PI / 180, 5, shape_list1);
        } else {
            lawn_draw(context, azimuth_factor, rotation * Math.PI / 180, 5, shape_list2);
        }

        context.restore();
    }, 30);

    $(window).bind('mousewheel', function(e, delta) {
        if (delta < 0) {
	    delta = -1;
        } else if (delta > 0) {
	    delta = 1;
	}
        scale_factor_target += .05 * delta;
    });

    $(window).bind('mousemove', function(e) {
        var h = document.body.clientHeight;
        var w = document.body.clientWidth;
        var x = e.clientX;
        var y = e.clientY;
        rotation_factor_target = (x - (w / 2)) / (w / 2);
        azimuth_factor_target = (y - (h / 2)) / (h / 2);
    });

    $(window).click(function(e) {
        resolution = resolution_options[(resolution_index++) % resolution_options.length];
        canvas.width = resolution;
        canvas.height = resolution;
        window.location.hash = resolution
    });
})()