var hGap = 25;			// horizontal gap between boxes
var vGap = 25;			// vertical gap between boxes
var cGap = 50;			// gap between columns

var boxHeight = 25;		// box dimension
var boxWidth = 25;

var timer;				// timer holding update-action


/* init */
function init()
{	
	var box;
	// positition cubes
	
	// hours
	for( var i = 0; i < 2; i++ )
	{
		box = document.getElementById( "box" + i );
		box.style.left = "50px";
		box.style.bottom = (50 + i*vGap + i*boxHeight) + "px";
	}
	
	for( var i = 2; i < 6; i++ )
	{
		box = document.getElementById( "box" + i );
		box.style.left = "100px";
		box.style.bottom = (50 + (i-2)*vGap + (i-2)*boxHeight) + "px";
	}
	
	
	// minutes
	for( var i = 6; i < 9; i++ )
	{
		box = document.getElementById( "box" + i );
		box.style.left = "175px";
		box.style.bottom = (50 + (i-6)*vGap + (i-6)*boxHeight) + "px";
	}
	
	for( var i = 9; i < 13; i++ )
	{
		box = document.getElementById( "box" + i );
		box.style.left = "225px";
		box.style.bottom = (50 + (i-9)*vGap + (i-9)*boxHeight) + "px";
	}
	
	
	// seconds
	for( var i = 13; i < 16; i++ )
	{
		box = document.getElementById( "box" + i );
		box.style.left = "300px";
		box.style.bottom = (50 + (i-13)*vGap + (i-13)*boxHeight) + "px";
	}
	
	for( var i = 16; i < 20; i++ )
	{
		box = document.getElementById( "box" + i );
		box.style.left = "350px";
		box.style.bottom = (50 + (i-16)*vGap + (i-16)*boxHeight) + "px";
	}

	timer = setTimeout( "update()", 1000);
	
}

function update()
{
	// call me again in 1sec
	timer = setTimeout( "update()", 1000 );

	// the date-object
	var date = new Date();
	var timeWord = "";

	// parse & convert time
	var hours = format( date.getHours().toString(), 2 );
	var minutes = format( date.getMinutes().toString(), 2 );
	var seconds = format( date.getSeconds().toString(), 2 );
	
	timeWord += ( invert( format( toBin( hours.substring( 0, 1 ) ).toString(), 2 ) ) 
				+ invert( format( toBin( hours.substring( 1, 2 ) ).toString(), 4 ) ) );
	timeWord += ( invert( format( toBin( minutes.substring( 0, 1 ) ).toString(), 3 ) ) 
				+ invert( format( toBin( minutes.substring( 1, 2 ) ).toString(), 4 ) ) );
	timeWord += ( invert( format( toBin( seconds.substring( 0, 1 ) ).toString(), 3 ) ) 
				+ invert( format( toBin( seconds.substring( 1, 2 ) ).toString(), 4 ) ) );


	/* activate boxes */
	var box;
  	for( var i = 0; i < 20; i++ )
	{
		box = document.getElementById( "box" + i );
		
		if( timeWord.charAt( i ) == "1" )
		{
			// apply 'active' styles
			box.style.border = "2px solid #EEEEF0";
			box.style.backgroundColor= "#333340";
		}
		else
		{
			box.style.border = "1px solid #9999A5";
			box.style.backgroundColor= "#333340";
		}
	}
}

/* invert given string */
function invert( str )
{
	var result = "";
	
	for( var i = str.length; i >= 0; i-- )
	{
		result += str.charAt( i );
	}
	
	return result;
}

/* convert int to bin */
function toBin( numString )
{
	var num = new Number( numString );
	
	// converts a number to binary
	var result = "";
	while( num > 0 )
	{
		if( ( num % 2 ) == 0 )
		{
			result = "0" + result;
		}
		else
		{
			result = "1" + result;
		}

		num = Math.floor( num / 2 );
	}
	
	if (result.length > 0 )
	{
		return new Number(result);
	}
	else
	{
		return 0;
	}
}

/* helper function for string-formatting */
function format( str, len )
{
	while( str.length < len )
	{
		str = "0" + str;
	}
		
	return str;
}