fancy stuff

            
              var Stars = function()
{
    var me = this;
    var canEle = document.getElementById('can');
    var can    = canEle.getContext('2d');
    var height = 0;
    var width  = 0;

    var mdDefault = 150;
    var mdHover   = 500;
    var mdDec     = true;

    var max           = 200;
    var distance      = 100;
    var mouseDistance = mdDefault;

    var stars    = new Array(max);
    var mouse    = {
        x : width / 2,
        y : height / 2
    };

    var defaultRed   = 255;
    var defaultGreen = 255;
    var defaultBlue  = 255;

    var red   = defaultRed;
    var green = defaultGreen;
    var blue  = defaultBlue;

    var targetRed   = red;
    var targetGreen = green;
    var targetBlue  = blue;

    var speedDefault = 1;
    var speedHover   = 15;
    var speed        = speedDefault;

    var maxTime = 0;
    var minTime = 1000;

    var moving   = false;
    var lastTime = new Date();

    var arcCache = {};

    me.start = function()
    {
        if (navigator.appVersion.match('Chrome')) {
            max = 300;
        }

        resize();
        createStars();
        //setInterval(run, 1000 / 30);
        run();

        document.onmousemove = mousemove;

        $('span[href]').click(function() {
            $('span[href]').not($(this)).css('opacity', 0);
            location.href = $(this).attr('href');

            return false;
        });

        $('.item').hover(function() {
            //moving        = true;
            mdDec         = false;
            speed         = speedHover;
            var color = c = $(this).children().eq(0).data('color');

            if (!color) {
                targetRed   = defaultRed;
                targetGreen = defaultGreen;
                targetBlue  = defaultBlue;
            } else {
                targetRed   = color.red;
                targetGreen = color.green;
                targetBlue  = color.blue;
            }
        }, function() {
            moving        = false;
            mdDec         = true;
            speed         = speedDefault;
            targetRed     = defaultRed;
            targetGreen   = defaultGreen;
            targetBlue    = defaultBlue;
        });
    };

    var mousemove = function(e)
    {
        mouse.x = e.pageX;
        mouse.y = e.pageY;
    };

    var run = function()
    {
        clean();
        drawStars();
    };

    var drawStars = function()
    {
        for (var i = 0; i < max; i++) {
            stars[i].connected = [];
        }

        var time = new Date();

        setColors();
        can.lineWidth   = 1;
        var dist        = 0.0;

        if (mdDec && mouseDistance > mdDefault) {
            mouseDistance -= 80;
        } else if (!mdDec && mouseDistance < mdHover) {
            mouseDistance += 80;
        }

        for (var i = 0; i < max; i++) {
            if (!moving) {
                moveStar(stars[i]);
            }

            var star = stars[i];

            dist     = Math.sqrt(Math.pow(star.x - mouse.x, 2) + Math.pow(star.y - mouse.y, 2));

            if (dist < mouseDistance * 2) {
                can.fillStyle   = 'rgb('.concat(red, ',', green, ',',  blue, ')');
            } else {
                can.fillStyle   = 'rgba('.concat(red, ',', green, ',',  blue, ', 0.3)');
            }

            can.fillRect(star.x, star.y, star.size / 2, star.size);

            can.beginPath();
            if (dist < mouseDistance) {
                star.arc = true;

                for (var j = 0; j < max; j++) {
                    var refStar = stars[j];

                    if (star == refStar || refStar.connected.indexOf(star) != -1) {
                        continue;
                    }

                    if (
                        Math.abs(star.x - refStar.x) < distance &&
                        Math.abs(star.y - refStar.y) < distance
                    ) {
                        star.connected.push(refStar);
                        drawRelation(star, refStar);
                    }
                }
            } else {
                star.arc = false;
            }

            can.stroke();
            can.closePath();
        }



        for (var i = 0; i < max; i++) {
            if (stars[i].arc) {
                arc(stars[i]);
            }
        }

        var nDate = new Date();
        var time  = nDate.getTime() - time.getTime();

        if (time > maxTime) {
            maxTime = time;
        }

        if (time < minTime) {
            minTime = time;
        }

        can.fillStyle = '#fff';
        can.fillText('PROCESS TIME PER FRAME - cur: ' + time, 10, 20);
        can.fillText('PROCESS TIME PER FRAME - max: ' + maxTime, 10, 40);
        can.fillText('PROCESS TIME PER FRAME - min: ' + minTime, 10, 60);

        var avFps = parseInt(1000 / time + 15);
        var fps   = parseInt(nDate.getTime() - lastTime.getTime());

        if (fps > avFps) {
            fps = avFps;
        }

        can.fillText('possible FPS: ' + avFps, 10, 80);
        can.fillText('current  FPS: ' + fps, 10, 100);
        lastTime = new Date();

        setTimeout(run, (1000 / 30) - time); //sollte am Ende stehen, damit sich die Prozedur nicht überholen kann
    };

    var arc = function(star)
    {
        var r = star.size * 2;
        can.drawImage(star.cache, star.x - r, star.y - r, r * 2, r * 2);
    }

    var setColors = function()
    {
        var percent = 10;

        if (targetRed != red) {
            var tick = Math.floor(Math.abs(targetRed - red) / percent);

            if (targetRed > red) {
                red += tick;
            } else {
                red -= tick;
            }
        }
        if (targetGreen != green) {
            var tick = Math.floor(Math.abs(targetGreen - green) / percent);

            if (targetGreen > green) {
                green += tick;
            } else {
                green -= tick;
            }
        }
        if (targetBlue != blue) {
            var tick = Math.floor(Math.abs(targetBlue - blue) / percent);

            if (targetBlue > blue) {
                blue += tick;
            } else {
                blue -= tick;
            }
        }

        can.fillStyle   = 'rgb('.concat(red, ',', green, ',',  blue, ')');
        can.strokeStyle = 'rgba('.concat(red, ',', green, ',',  blue, ', 0.3)');
    }

    var drawRelation = function(star, refStar)
    {
        can.moveTo(star.x | 0, star.y | 0);

        if (true) {
            can.lineTo(refStar.x | 0, refStar.y | 0);
            return;
        } else {
            var midX = Math.max(star.x, refStar.x) - (Math.max(star.x, refStar.x) - Math.min(star.x, refStar.x)) / 2;
            var midY = Math.max(star.y, refStar.y) - (Math.max(star.y, refStar.y) - Math.min(star.y, refStar.y)) / 2;

            if (star.curve > 0) {
                midX += 20;
                midY += 20;
            } else {
                midX -= 20;
                midY -= 20;
            }
        }
    };

    var moveStar = function(star)
    {
        star.x += star.dirX * speed;
        star.y += star.dirY * speed;

        if (star.y > height) {
            star.dirY = Math.random() * -1;
        } else if (star.y < 0) {
            star.dirY = Math.random();
        } else if (star.x > width) {
            star.dirX = Math.random() * -1;
        } else if (star.x < 0) {
            star.dirX = Math.random();
        }

        return star;
    };

    var clean = function()
    {
        can.fillStyle = 'rgb(0, 0, 0)';
        can.fillRect(0, 0, width, height);
    };

    var createStars = function()
    {
        for (var i = 0; i < max; i++) {
           stars[i] = createStar();
        }
    };

    var createStar = function()
    {
        var star = {
            x     : Math.random() * width,
            y     : Math.random() * height,
            dirX  : (Math.random() - 0.5),
            dirY  : (Math.random() - 0.5),
            size  : Math.ceil(Math.random() * 3),
            curve : (Math.random() - 0.5),
            line  : (Math.random() - 0.5),
            arc   : false
        };

        initCache(star);

        return star;
    };

    var initCache = function(star)
    {
        var cache = $(document.createElement('canvas'));
        var c     = cache.get(0).getContext('2d');
        var r     = star.size * 2;

        cache.attr({
            width  : star.size * 4,
            Height : star.size * 4
        });

        c.fillStyle = 'rgba(200, 200, 200, 0.5)';
        c.beginPath();
        c.arc(r, r, r, 0, 2*Math.PI);
        c.fill();

        star.cache = cache.get(0);
    }

    var resize = function()
    {
        height = canEle.parentElement.offsetHeight - 10;
        width  = canEle.parentElement.offsetWidth - 10;
        canEle.style.width  = ''.concat(width, 'px');
        canEle.style.height = ''.concat(height, 'px');
        canEle.setAttribute('width', width);
        canEle.setAttribute('height', height);
    }
};


var stars = new Stars();
stars.start();