var balls = [0, 0, 0, 0, 0, 0, 0, 0];
var ballscount = 0;

function animateBalls()
{
    //adjust weights
    var total_weight = 0;
    for (var i = 0; i < floatstyles.length; ++i)
    {
        if (switchingTo == i)
            styleweights[i] += 0.03;
        else
            styleweights[i] -= 0.03;
        styleweights[i] = Math.min(Math.max(0, styleweights[i]), 1);
        total_weight += styleweights[i];
    }
    
    //adjust positions with weights
    for (var i = 0; i < floatstyles.length; ++i)
    {
        if (styleweights[i] > 0)
        {
                floatstyles[i](styleweights[i] / total_weight);
        }
    }
    
    placeBalls();
    
    ++counter;
    
    window.setTimeout("animateBalls()", 30);
}

function enableStyle(num)
{
    var button = document.getElementById("button_" + switchingTo);
    button.style.color = "#aaa";
    button.style.fontWeight = "400";
    
    switchingTo = num;
    button = document.getElementById("button_" + num);
    button.style.color = "#000";
    button.style.fontWeight = "900";
    
}

function placeBalls()
{
    var d = "";
    for (var i = 0; i < balls.length; ++i)
    {
        var x = positions[i][0];
        var y = positions[i][1];
        x = Math.floor(original[i][0] + x);
        y = Math.floor(original[i][1] + y);
        
        balls[i].style.left = x + "px";
        balls[i].style.top = y + "px";
        
        positions[i][0] = 0;
        positions[i][1] = 0;
    }
}

function wrapWeightedValues(i, weight, x, y)
{
    do 
    {
        x = (x + 600) % 600;
        y = (y + 300) % 300;
    } while (x < 0 || y < 0);
    
    positions[i][0] += x * weight;
    positions[i][1] += y * weight;
}

function style_jitters(weight)
{
    var x = 0;
    var y = 0;
    var delta = 6;
    
    for (var i = 0; i < balls.length; ++i)
    {
        var q = i;
        if (i > 3) ++q;
        x = (q % 3) * 90 + 300;
        y = Math.floor(q / 3) * 90 + 60;
        
        x += Math.random() * delta - delta / 2;
        y += Math.random() * delta - delta / 2;
        
        wrapWeightedValues(i, weight, x, y);
    }
}

var fall_offsets = [
    [Math.random() * 600, Math.random() * 300, Math.random() * 2 - 1],
    [Math.random() * 600, Math.random() * 300, Math.random() * 2 - 1],
    [Math.random() * 600, Math.random() * 300, Math.random() * 2 - 1],
    [Math.random() * 600, Math.random() * 300, Math.random() * 2 - 1],
    [Math.random() * 600, Math.random() * 300, Math.random() * 2 - 1],
    [Math.random() * 600, Math.random() * 300, Math.random() * 2 - 1],
    [Math.random() * 600, Math.random() * 300, Math.random() * 2 - 1],
    [Math.random() * 600, Math.random() * 300, Math.random() * 2 - 1]
];

function style_fall(weight)
{
    var x = 0;
    var y = 0;
    
    for (var i = 0; i < balls.length; ++i)
    {
        x = counter * fall_offsets[i][2] / 2 + i * 87;
        y = counter * 2 * (1 + ((i * 357) % 8 - 4) / 8) + i * 170;
        
        x += fall_offsets[i][0];
        y += fall_offsets[i][1];
        
        wrapWeightedValues(i, weight, x, y);
    }
}

function style_orbit(weight)
{
    var x = 0;
    var y = 0;
    var period = 600;
    var radius = 90;
    for (var i = 0; i < balls.length; ++i)
    {
        x = Math.cos((counter + i * period / balls.length) * 2 * 3.14159 / period) * radius + 300 + 85;
        y = Math.sin((counter + i * period / balls.length) * 2 * 3.14159 / period) * radius + 150;
        
        wrapWeightedValues(i, weight, x, y);
    }
}

function style_pulse(weight)
{
    var x = 0;
    var y = 0;
    var period = 260;
    var radius = 90
    
    for (var i = 0; i < balls.length; ++i)
    {
        radius = 90 + Math.sin(counter * 2 * 3.14159 / period * 8 + 3.14159 * i) * 24;
        x = Math.cos((counter + i * period / balls.length) * 2 * 3.14159 / period) * radius + 300 + 85;
        y = Math.sin((counter + i * period / balls.length) * 2 * 3.14159 / period) * radius + 150;
        
        wrapWeightedValues(i, weight, x, y);
    }
}

function style_nothing(weight)
{
    var x = 0;
    var y = 0;
    
    for (var i = 0; i < balls.length; ++i)
    {
        var q = i;
        if (i > 3) ++q;
        x = (q % 3) * 90 + 300;
        y = Math.floor(q / 3) * 90 + 60;
        
        wrapWeightedValues(i, weight, x, y);
    }
}

function style_follow(weight)
{
    style_genFollow(weight, 20, 1500, 260, 80);
}

function style_weird(weight)
{
    style_genFollow(weight, 45, 600, 180, 120);
}

function style_genFollow(weight, delay, period, xDiff, yDiff)
{
    var x = 0;
    var y = 0;
    var t = 0;
    
    for (var i = 0; i < balls.length; ++i)
    {
        t = counter - i * delay;
        x = xDiff * Math.cos(t * 3 * 2 * 3.14159 / period) + 300;
        y = yDiff * Math.sin(t * 11 * 2 * 3.14159 / period) + 150;
        
        wrapWeightedValues(i, weight, x, y);
    }
}

var streets_cur = [
    [0,0],
    [0,0],
    [0,0],
    [0,0],
    [0,0],
    [0,0],
    [0,0],
    [0,0]
    ];

var streets_dest = [
    [58 * 1,58 * 1],
    [58 * 2,58 * 2],
    [58 * 3,58 * 3],
    [58 * 4,58 * 4],
    [58 * 5,58 * 5],
    [58 * 6,58 * 6],
    [58 * 7,58 * 7],
    [58 * 8,58 * 8],
    ];

function style_streets(weight)
{
    var x = 0;
    var y = 0;
    var distance = 116;
    var t = counter % 15;
    
    for (var i = 0; i < balls.length; ++i)
    {
        t = counter % 30;
        if (t == 0)
        {
            streets_cur[i][0] = streets_dest[i][0];
            streets_cur[i][1] = streets_dest[i][1];
            streets_dest[i][(Math.random() < 0.5 ? 0 : 1)] += (Math.random() < 0.5 ? -1 : 1) * distance;
        }
        
        if (streets_dest[i][0] < 0) streets_dest[i][0] += distance * 2;
        if (streets_dest[i][0] > 600) streets_dest[i][0] -= distance * 2;
        if (streets_dest[i][1] < 0) streets_dest[i][1] += distance * 2;
        if (streets_dest[i][1] > 300) streets_dest[i][1] -= distance * 2;
        
        x = streets_cur[i][0] * (30 - t) / 30 + streets_dest[i][0] * t / 30;
        y = streets_cur[i][1] * (30 - t) / 30 + streets_dest[i][1] * t / 30;
        
        wrapWeightedValues(i, weight, x, y);
    }
}


var floatstyles = [style_nothing, style_jitters, style_fall, style_orbit, style_pulse, style_follow, style_weird, style_streets];
var counter = 1;
var styleweights = [0, 0, 0, 1.0, 0, 0, 0, 0];
var switchingTo = 3;
var positions = [
    [0, 0],
    [0, 0],
    [0, 0],
    [0, 0],
    [0, 0],
    [0, 0],
    [0, 0],
    [0, 0]
    ];

var original = [
    [0 * 58 - 29, 0 * 58 - 29],
    [0 * 58 - 29, -1 * 58 - 29],
    [0 * 58 - 29, -2 * 58 - 29],
    [0 * 58 - 29, -3 * 58 - 29],
    [0 * 58 - 29, -4 * 58 - 29],
    [0 * 58 - 29, -5 * 58 - 29],
    [0 * 58 - 29, -6 * 58 - 29],
    [0 * 58 - 29, -7 * 58 - 29]
    ];


function changeStyle(direction)
{
    enableStyle(Math.max(Math.min(floatstyles.length - 1, switchingTo + direction), 0));
}

function initialize()
{
    for (var i = 0; i < 8; ++i)
    {
        balls[i] = document.getElementById("ball" + i);
    }
    animateBalls();
}