function initColors()
{
  ids = [ 'col1', 'col2' ];
  delta = new Array();
  delta[ 'col1' ] = 0;
  delta[ 'col2' ] = 0;
  color = new Array();
  color[ 'col1' ] = 0;
  color[ 'col2' ] = 0;
  updateColors();
}

function updateColors()
{
  for( idx = 0; idx < ids.length; idx ++ )
  {
    id = ids[ idx ];
    color[ id ] += delta[ id ];
    if( color[ id ] < 0 )
      color[ id ] = 0;
    if( color[ id ] > 30 )
      color[ id ] = 30;
      
    r = 220 - 6 * color[ id ];
    g = 220 - 4 * color[ id ];
    b = 220 + color[ id ];

    it = document.getElementById( id );
    it.style.backgroundColor = "rgb(" + r + "," + g + "," + b + ")";
  }

  setTimeout( 'updateColors()', 10 );
}

function colorOn( id )
{
  delta[ id ] = 1;
  if( id == "col1" )
      delta[ "col2" ] = -3;
  else
      delta[ "col1" ] = -3;
}

function colorOff( id )
{
  // Start turning the color off only when the second frame is selected.
  // Not when exiting the current frame.
  // delta[ id ] = -3;
}