// (C) 2005 Mike Hearn. All rights reserved.
// Generate a nice 80s style popsquares animation when the mouse moves

// Can only use one popsquare on a page, as this code isn't object oriented.
// If you have some burning desire for this to be a re-usable library, let
// me know and I'll see what I can do.

var popSquares;
var popSquaresNew;
var anim = 0.0;
var colors = [ "0092ff",
               "005bff",
               "0101ad",
               "362d84",
               "1e84d4",
               "87beff",
               "7187ff",
               "8484d4",
               "7187ff",
               "0000ff"];
// ok, now generate the squares
var w = 3;
var h = 3;

var tracking = null;
var velocity = 0.05;

// for each popSquare, morph between the colors
function fadeSquares()
{
    var x, y;

    for (y = 0; y < h; y++)
    {
        for (x = 0; x < w; x++)
        {
            var oldColor = parseInt(popSquares[y][x], 16);
            var newColor = parseInt(popSquaresNew[y][x], 16);
            
            var oldred, oldgreen, oldblue;
            var newred, newgreen, newblue;
            
            oldred   = (oldColor & 0xFF0000) >> 16;
            oldgreen = (oldColor & 0x00FF00) >> 8;
            oldblue  = (oldColor & 0x0000FF);
            newred   = (newColor & 0xFF0000) >> 16;
            newgreen = (newColor & 0x00FF00) >> 8;
            newblue  = (newColor & 0x0000FF);

            var red, green, blue;

            red   = oldred + Math.round((newred - oldred) * anim);
            green = oldgreen + Math.round((newgreen - oldgreen) * anim);
            blue  = oldblue + Math.round((newblue - oldblue) * anim);

            var color = (red << 16) | (green << 8) | blue;
                        
            var square = document.getElementById("popsquare" + x + y);
            var str = color.toString(16);
            if (str.length == 5) str = "0" + str;
            else if (str.length == 4) str = "00" + str;
            else if (str.length == 3) str = "000" + str;
            else if (str.length == 2) str = "0000" + str;                        
            else if (str.length == 1) str = "00000" + str;                        
            square.style.backgroundColor = "#" + str;
        }
    }

    anim += velocity;
    if (anim > 1)
    {
        anim = 0;
        allocateColors(false);
    }

    if (anim > 0) setTimeout("fadeSquares()", 50);
}

function mouseMove()
{
    // trigger the popsquares animation
    if (anim == 0)
    {
        anim = velocity;
        fadeSquares();
    }
}

// looping through the colours is a bit simpler than using a random choice and looks the same
var where = 0;
function allocateColors(firstTime)
{
    for (var x = 0; x < w; x++)
    {
        for (var y = 0; y < h; y++)
        {
            var i;

            popSquares[y][x] = popSquaresNew[y][x];
            popSquaresNew[y][x] = colors[where++];
                
            if (firstTime)
                popSquares[y][x] = colors[where++];

            if (where > colors.length - 1) where = 0;
        }
    }
}

function generatePopSquares(anchor, width, height)
{
    // this was originally done using the DOM, but IE doesn't like it for some reason
    document.write('<table cellpadding="0" cellspacing="0" style="width: ' + width + '; height: ' + height + '">');
    
    // this stores the current color of each square
    popSquares = new Array(h);
    // and the one it's fading into 
    popSquaresNew = new Array(h);

    for (var y = 0; y < h; y++)
    {
        popSquares[y] = new Array(w);
        popSquaresNew[y] = new Array(w);
    }
            
    allocateColors(true);

    for (var y = 0; y < h; y++)
    {
        document.write("<tr>");
        
        for (var x = 0; x < w; x++)
        {
            document.write('<td id="popsquare' + x + y +
                           '" style="width: ' + (100 / w ) + '%; height: ' + (100 / h) +
                           '%; background-color: #' + popSquares[y][x] +
                           '; opacity: 0.7; -moz-opacity: 0.7; filter:alpha(opacity=70)">');
        }
        document.write("</tr>");
    }

    document.write("</table>");

    setTimeout("fadeSquares()", 1000);
}