$(document).ready(function() {
    
    var viewport = {width: $('body').width(), height: $('body').height()},
        mainWrapperWidth = 740,
        leftCanvas = null,
        rightCanvas = null,
        canvasWidth = 0,
        leftCtx = null, rightCtx = null,
        Sprite = {},
        imgPaths = ['../images/clouds1.png', '../images/clouds2.png', '../images/clouds3.png'],
        rad = (2 * Math.PI) / 360,
        sprites = [],
        spacing = 250, // space between clouds
        jitter = 40, // random additional space
        singleColumn = false,
        spriteLocations = [],
        t = null;
        
    if ($('#main-wrapper').is('.invisible')) {
        singleColumn = true; // used on the 404 page
    }
        
    // Smoke sprite declaration
    Sprite = function(type, direction) {
        this.img = document.createElement('img');
        this.img.src = imgPaths[type];
        this.rotation = Math.round(Math.random() * 360);
        this.direction = direction;
        this.speed = (Math.random() * 0.5) + 0.3 ;
        this.canvas = document.createElement('canvas');
        this.canvas.width = this.canvas.height = 600;
        this.ctx = this.canvas.getContext('2d');
    }
    
    Sprite.prototype.rotate = function() {
        var ctx = this.ctx;
        this.rotation += (this.speed * this.direction);
        ctx.clearRect(0,0,600,600);
        ctx.save();
        ctx.translate(300,300);
        ctx.rotate(rad * this.rotation);
        ctx.drawImage(this.img, -300, -300);
        ctx.restore();
    }
    
    Sprite.prototype.render = function(ctx, x, y) {
        ctx.drawImage(this.canvas, x, y);
    }

    createCanvasElements();
    createSprites();
    
    var tick = function() {
        var index = null, location = [];
        leftCtx.clearRect(0,0,canvasWidth,viewport.height);
        if (!singleColumn) rightCtx.clearRect(0,0,canvasWidth,viewport.height);
        
        // rotate all the sprites first
        for (index in sprites) {
            sprites[index].rotate();
        }
        
        // render the sprites
        for (index in spriteLocations) {
            location = spriteLocations[index];
            sprites[location[2]].render(leftCtx,location[0],location[1]);
            location[1] -= location[3];
            if (location[1] < -600) {
                location[1] = viewport.height + 600;
            }
            spriteLocations[index] = location;
        }
        
        if (!singleColumn) rightCtx.drawImage(leftCanvas,0,0);
        t = setTimeout(tick, 60);
    }
    
    tick(); 
    
    // regenerate page when the window is resized
    var resizeTimeout = null;
    $(window).resize(function() {
        sizeCanvas();
        sprites = [];
        spriteLocations = [];
        createSprites();
    });
    
    
    function createCanvasElements() {
        var $container = $('#pretty-clouds');
        leftCanvas = document.createElement('canvas');
        leftCtx = leftCanvas.getContext('2d');
        $container.append(leftCanvas);
        $(leftCanvas).css({left: '0px', top: '0px'});
        
        if (!singleColumn) {
            rightCanvas = document.createElement('canvas');
            rightCtx = rightCanvas.getContext('2d');
            $(rightCanvas).css({right: '0px', top: '0px'});
            $container.append(rightCanvas);
        }
        
        sizeCanvas();
    }
    
    function createSprites() {
        // create the six kinds of rotating sprites
        var direction = 1, type = 0, sprite = null;
        for (direction = -1; direction <=1; direction +=2) {
            for (type = 0; type <= 2; type++) {
                sprite = new Sprite(type, direction);
                sprites.push(sprite);
            }
        }
        
        // create array of locations to render sprites at
        var x = 0, y=0, location = [], ymov = 0;
        for (x = -300; x < (canvasWidth); x += spacing) {
            ymov = Math.floor(Math.random() * 2) + 1;
            for (y = -600; y < (viewport.height + 600); y += spacing) {
                location = [x + Math.round(Math.random() * jitter),   
                            y + Math.round(Math.random() * jitter),
                            Math.floor(Math.random() * 6),
                            ymov];
                spriteLocations.push(location);
            }
        }
    }
    
    function sizeCanvas() {
        viewport.width = $('body').width();
        viewport.height = $('body').height();
        if (singleColumn) {
            canvasWidth = viewport.width;
        }
        else {
            canvasWidth = Math.round((viewport.width - mainWrapperWidth) / 2);
        }
        
        leftCanvas.width = canvasWidth;
        leftCanvas.height = viewport.height;
        
        if (!singleColumn) {
            rightCanvas.width = canvasWidth;
            rightCanvas.height = viewport.height;
        }
    }
    
    
});