//Draws a rectangle (pos_right,pos_top,width,height)
function drawRectangle(right, top, width, height)
{
        if (document.createElement)
        {
                newdiv=document.createElement("div");
                newdiv.id = 'newdiv';
                newdiv.style.zIndex="1000";
                newdiv.style.position="absolute";
                newdiv.style.right = right+"%";
                newdiv.style.top  = top+"%";
                newdiv.style.width = width+"%";
                newdiv.style.height = height+"%";
                newdiv.style.backgroundColor = '#'+Math.floor(Math.random()*16777215).toString(16);
                newdiv.style.visibility = 'visible';
                //newdiv.style.fontSize = 90+"%";
                newdiv.style.lineHeight = 100+"%";
                newdiv.style.textAlign = 'center';
                newdiv.innerHTML = "";
                newdiv.style.borderWidth = 2+"px";
                newdiv.style.borderColor = "black";
                newdiv.style.borderStyle = "solid";
                document.body.appendChild(newdiv);
        }
}

//Make all the boxes needed to show the time
function newRectHour( n, time ) 
{
        var spot = 97;
        //for(var x = n; x >= 0; --x)
        for(var x = 0; x < n; ++x)
        {
                if( x <= time )
                {
                        drawRectangle(12, spot, 4, 2);
                        myrect = document.getElementById("newdiv");
                        myrect.id = "hourDiv" + x; 
                        myrect.innerHTML = x*1;
                        spot -= 3;
                }
                else
                {
                        drawRectangle(12, 0, 4, 2);
                        myrect = document.getElementById("newdiv");
                        myrect.id = "hourDiv" + x; 
                        myrect.innerHTML = x*1;
                }
        }
} 
function newRectMinute( n, time )
{
        var spot = 97;
        //for(var x = n; x >= 0; --x)
        for(var x = 0; x < n; ++x)
        {
                if( x <= time )
                {
                    drawRectangle(6, spot, 4, 2);
                    myrect = document.getElementById("newdiv");
                    myrect.id = "minuteDiv" + x; 
                    myrect.innerHTML = x*2;
                    spot -= 3;
                }
                else
                {
                    drawRectangle(6, 0, 4, 2);
                    myrect = document.getElementById("newdiv");
                    myrect.id = "minuteDiv" + x; 
                        myrect.innerHTML = x*2;
                }
        }
}
function newRectSecond( n, time )
{
        var spot = 97;
        //for(var x = n; x >= 0; --x)
        for(var x = 0; x < n; ++x)
        {
                if( x <= time )
                {
                    drawRectangle(0, spot, 4, 2);
                    myrect = document.getElementById("newdiv");
                    myrect.id = "secondDiv" + x; 
                        myrect.innerHTML = x*2;
                    spot -= 3;
                }
                else
                {
                    drawRectangle(0, 0, 4, 2);
                    myrect = document.getElementById("newdiv");
                    myrect.id = "secondDiv" + x; 
                        myrect.innerHTML = x*2;
                }
        }
}

function sync( seconds, minutes, hours )
{

        if(seconds % 2 == 0)
        {
                seconds = Math.floor(seconds/2);
                var foo0 = document.getElementById('secondDiv'+(seconds));
                moveSeconds(foo0, seconds );
        }
        else if(seconds == 59)
        {
                clearSeconds();
        }
        if(minutes % 2 == 0 && seconds == 0 )
        {   
                minutes = Math.floor(minutes/2);
                var foo1 = document.getElementById('minuteDiv'+(minutes));
                moveMinutes(foo1, minutes);
        }
        else if(minutes == 59 && seconds == 59)
        {
                clearMinutes();
        }
        if(minutes == 0 && seconds == 0)
        {
                var foo2 = document.getElementById('hourDiv'+(hours));
                moveHours(foo2, hours);
        }
        else if(hours == 23 && minutes == 59 && seconds == 59)
        {
                clearHours();
        }
}

function moveSeconds( foo, seconds )
{
        if ( (parseFloat(foo.style.top)) != (97 - (seconds * 3 )) )
        {
                foo.style.top = parseFloat(foo.style.top)+.5+'%';
                setTimeout( moveSeconds, 10,foo,seconds );
        }
}

function moveSecondsBackwards(fooarr, x)
{
        fooarr[x].style.top = parseFloat(fooarr[x].style.top)-.5+'%';
        if(parseFloat(fooarr[29].style.top) == 0)
        {
                return;
        }
        else if(parseFloat(fooarr[x].style.top) != 0)
        {
                setTimeout( moveSecondsBackwards, 0, fooarr, x );
        }
        else
        {
                ++x;
                fooarr[x].style.zIndex = parseInt(fooarr[x].style.zIndex) + 1;
                setTimeout( moveSecondsBackwards, 0 , fooarr, x );
        }
}

function clearSeconds()
{
        var fooarr = [];
        for(var x = 29; x >= 0; --x)
        {
                fooarr[x] = document.getElementById('secondDiv'+(x));
                //fooarr[x].style.top = 0;
        }

        moveSecondsBackwards(fooarr, 1);
        /*
        while( parseFloat(fooarr[0].style.top) != 0 )
        {
                for(var g = 29; g >= 0; --g)
                {
                        if(parseFloat(fooarr[g].style.top) != 0)
                        {
                                setTimeout( moveFooBackwards, 0, fooarr, g );
                                //fooarr[x].style.top = parseFloat(fooarr[x].style.top)-.5+'%';
                        }
                }       
        }
         */
}

function moveMinutesBackwards(fooarr, x)
{
        fooarr[x].style.top = parseFloat(fooarr[x].style.top)-.5+'%';
        if(parseFloat(fooarr[29].style.top) == 0)
                return;
        else if(parseFloat(fooarr[x].style.top) != 0)
                setTimeout( moveMinutesBackwards, .5, fooarr, x );
        else
        {
                ++x;
                fooarr[x].style.zIndex = parseInt(fooarr[x].style.zIndex) + 1;
                setTimeout( moveMinutesBackwards, 1, fooarr, x );
        }
}
function moveMinutes( foo, minutes )
{
        if( (parseFloat(foo.style.top)) != (97 - (minutes * 3 )) )
        {
                foo.style.top = parseFloat(foo.style.top)+.5+'%';
                setTimeout( moveMinutes, 30,foo,minutes );
        } 
}
function clearMinutes()
{
        var fooarr = [];
        for(var x = 29; x >= 0; --x)
        {
                fooarr[x] = document.getElementById('minuteDiv'+(x));
                //fooarr[x].style.top = 0;
        }
        moveMinutesBackwards(fooarr, 1);
}

function moveHoursBackwards(fooarr, x)
{
        fooarr[x].style.top = parseFloat(fooarr[x].style.top)-.5+'%';
        if(parseFloat(fooarr[23].style.top) == 0)
                return;
        else if(parseFloat(fooarr[x].style.top) != 0)
                setTimeout( moveHoursBackwards, x*2, fooarr, x );
        else
        {
                ++x;
                fooarr[x].style.zIndex = parseInt(fooarr[x].style.zIndex) + 1;
                setTimeout( moveHoursBackwards, 2, fooarr, x );
        }
}
function moveHours( foo, hours )
{
        if( (parseFloat(foo.style.top)) != (97 - (hours * 3 )) )
        {
                foo.style.top = parseFloat(foo.style.top)+.5+'%';
                setTimeout( moveHours, 60,foo,hours );
        }
}
function clearHours()
{
        var fooarr = [];
        for(var x = 23; x >= 0; --x)
        {
                 fooarr[x] = document.getElementById('hourDiv'+(x));
                 //fooarr[x].style.top = 0;
        }
        moveHoursBackwards(fooarr, 1);
}

//Initialize the clock for syncing
function init()
{
        window.onload = updateTime();
        window.onload = newRectSecond(30, seconds/2);
        window.onload = newRectMinute(30, minutes/2);
        window.onload = newRectHour(24, hours);
}