﻿/*
* Snowing routine based on one <canvas> element dynamically 
* injected in the background of the page.
* 
* The code is not optimized, feel free to make your own edits!
*
* Copyright 2010 by David Flanagan
* http://creativecommons.org/licenses/by-nc-sa/3.0/
*
* Modified by Giorgio Sardo
* http://blogs.msdn.com/Giorgio
*/
(function ()
{

    // Start Animation only if browser supports <canvas>
    if (document.createElement('canvas').getContext)
	{
        if (document.readyState === 'complete')
            Snow();
        else
            window.addEventListener('DOMContentLoaded', Snow, false);
    }

    var flakes = [];				// Things that are dropping
    var scrollspeed = 64;			// How often we animate things
    var snowspeed = 1000;			// How often we add a new snowflake
    var maxflakes = 10;				// Max number of flakes to be added at the same time
	var skullSize = 32;				// A size of the skull png image
	var contentWidth = 780;			// A width or the site content that snowflakes will not show on
    var rand = function (n) { return Math.floor(n * Math.random()); }

    var canvas, sky;
    var snowingTimer;
    var invalidateMeasure = false;

    function Snow()
	{
        canvas = document.createElement('canvas');
        canvas.style.position = 'fixed';
        canvas.style.top = '0px';
        canvas.style.left = contentWidth + 'px';
        canvas.style.zIndex = '-1';
        document.body.insertBefore(canvas, document.body.firstChild);
        sky = canvas.getContext('2d');

        ResetCanvas();

        snowingTimer = setInterval(createSnowflake, snowspeed);
        setInterval(moveSnowflakes, scrollspeed);

        window.addEventListener('resize', ResetCanvas, false);
    }

    function ResetCanvas()
	{
        invalidateMeasure = true;
        canvas.width = document.body.offsetWidth - contentWidth;
        canvas.height = window.innerHeight;
    }

    function drawFlake(x, y)
	{
		var skullImg = new Image();
		skullImg.src="Skull.png";
		sky.drawImage(skullImg, x, y);
    }

    function createSnowflake()
	{
        var x = rand(canvas.width);
        var y = window.pageYOffset;

        flakes.push({ x: x, y: y, vx: 0, vy: 3 + rand(3) });

        if (flakes.length > maxflakes) clearInterval(snowingTimer);
    }

    function moveSnowflakes()
	{
        sky.clearRect(0, 0, canvas.width, canvas.height);

        var maxy = canvas.height;

        for (var i = 0; i < flakes.length; i++)
		{
            var flake = flakes[i];

            flake.y += flake.vy;
            flake.x += flake.vx;

            if (flake.y > maxy) flake.y = 0;
            
			if (invalidateMeasure && flake.x > canvas.width)
				flake.x = canvas.width - skullSize;

            drawFlake(flake.x, flake.y);

            // Sometimes change the sideways velocity
            if (rand(4) == 1) flake.vx += (rand(11) - 5) / 10;
            if (flake.vx > 2) flake.vx = 2;
            if (flake.vx < -2) flake.vx = -2;
        }
		
        if (invalidateMeasure) invalidateMeasure = false;
    }
} ());

