[%  library = libs.splash
    section = 'colours' ;
    WRAPPER page
%]

<p>
The splash/config file loads the html/rgb file which defines the 'rgb'
hash.  This is then aliased to splash.rgb.
</p>

<p>
The [% splash.bold %] library creates the user interface components by
clever use of some very small graphics.  Each background colour
requires 4 GIF files, one for each corner.  Each of these files is
only 8x8 pixels in size and all but a few of the pixels are
transparent.  The following illustration shows how a button is built
up.
</p>

[% INCLUDE big_button
	   fg='marine' bg='white'
%]

<p>
In this case, we are drawing a blue button on a white background.  The
table background defines the blue button colour, and the white
graphics are put in each corner to match the background colour onto
which the button is being drawn.  We then clear the border and remove
the padding and spacing between table cells...
</p>

[% INCLUDE big_button
	   fg='marine' bg='white'
	   pad=0 space=0 border=0
%]

<p>
And then shrink it down to the right size:
</p>

[% INCLUDE big_button
	   fg='marine' bg='white' nofont=1
	   pad=0 space=0 border=0 size=8
%]

<p>
So you only need 4 images for each <i>background</i> colour that you
plan to use.  Then, for a particular background colour, you can
specify <i>any</i> RGB triple to use as a foreground colour.
</p>

<p>
To save you the hassle of creating new graphics for each background
colour, there's a simple Perl script distributed with the Template
Toolkit which does it for you.  The GIFs have colour maps with just
one entry and each pixel is either transparent or set to that colour.
The script simply takes an existing GIF, hacks the RGB value in the
colour table (all of 3 bytes) and writes the new GIF out again.
Instant colour change!
</p>

<p>
At installation time, this script is run to generate graphics for each
of the pre-defined colours in the html/rgb template which gets loaded
into 'splash.rgb'.  Don't worry about your hard disk being filled with
thousands of huge graphics - each GIF file is typically only 54 bytes.
so they take up very little space and are exceptionally fast to
transfer across a network.
</p>

<p>Here's a selection of colours:</p>

[% bgcols = [ 'white', 'lilac', 'grey50', 'marine' ]
   cellsize = 95 / bgcols.size;
   USE int = format('%d');
   cellpc = int(cellsize)
%]

<div align="center">
<table border=0 cellpadding=8>
[%  FOREACH col = splash.rgb.keys;
	NEXT IF splash.rgb.${col}.keys;
	NEXT IF loop.count < 12;    # select a bunch
	NEXT IF loop.count > 19;
	NEXT IF col.search('25');   # ignore very dark colours
        fg = col.search('mint|white|rose|aqua|sky|lilac|green\b|grey75')
	   ? 'black' : 'white';	    # use white for dark cols
%]
<tr valign="middle">
[%	FOREACH bgcol = bgcols;
%]
    <td width="[% cellpc %]%" align="center" bgcolor="[% splash.rgb.$bgcol %]">
	[% content = INCLUDE splash/text col=fg content=col %]
	[% INCLUDE splash/button content width='90%' %]
    </td>
    [%  END %]
</tr>
[%  END %]
</table>
</div>
	    


[% BLOCK big_button; 
       DEFAULT fg   = 'white'  
               bg   = 'black';
       space  = space.defined  ? space : 2;
       border = border.defined ? border : 2;
       pad    = pad.defined    ? pad   : 4;
%]
<div align="center">
<table border="[% border %]" cellpadding="[% pad %]" cellspacing="[% space %]" 
       bgcolor="[% splash.rgb.$fg %]">
<tr>
  <td>[% INCLUDE big_img img='tl' %]</td>
  <td rowspan=2>
[%- UNLESS nofont %]<font size="+1">[% END %]<b>Hello World!</b>
[%- UNLESS nofont %]</font>[% END %]</td>
  <td align="right">[% INCLUDE big_img img='tr' %]</td>
</tr>
<tr valign=bottom>
  <td>[% INCLUDE big_img img='bl' %]</td>
  <td align="right">[% INCLUDE big_img img='br' %]</td>
</tr>
</table>
</div>
[% END %]

[% BLOCK big_img; DEFAULT bg='black' size=32 -%]
<img src="[% splash.images %]/[% bg %]/[% img %].gif" width="[% size %]" height="[% size %]">
[%- END %]

[% col = '', bgcol = '' %]
[% END %]