var preloadFlag = false;

var toc = new Array ("first","friends","family","fotos","fingerings","fun","festivities","forwarding");

function newImage(arg) 
    {
    if (document.images) 
        {
        rslt = new Image();
        rslt.src = arg;
        return rslt;
        }
    }


function preloadImages() 
    {
    var tmpimg;

    if (document.images) 
        {
        for (var i = 0; i < toc.length; i++)
            {
            tmpimg = newImage ("toc/btn_" + toc[i] + "-over.jpg");
            }
        preloadFlag = true;
        }
    }


function create_toc (curpage,rel)
    {
    var href;
    var separator;
    var tocparms;

    tocparms = 'height="25" width="75" border="0"'

    separator = '<img src="' + rel + 'toc/separator.jpg" height="25" width="6">';

    document.write (separator);
    for (var i = 0; i < toc.length; i++)
        {

        if (toc[i] == "first")
            {
            href = rel + "index.html";
            }
        else
            {
            href = rel + toc[i] + ".html";
            }

        name = "toc_" + toc[i];

        if (curpage == toc[i])
            {
            norm = rel + "toc/btn_" + toc[i] + "-down.jpg";
            }
        else
            {
            norm = rel + "toc/btn_" + toc[i] + ".jpg";
            }
        over = rel + "toc/btn_" + toc[i] + "-over.jpg";
        img  = '<img name="' + name + '" src="' + norm + '" ' + tocparms + '>';

        if (curpage != toc[i])
            {
            tmp = '<a href="' + href + '"';
            tmp = tmp + ' onMouseOver="document.' + name + '.src = ' + "'" + over + "'" + '; return true;"';
            tmp = tmp + ' onMouseOut="document.'  + name + '.src = ' + "'" + norm + "'" + '; return true;"' +
                        '>' + img + '</a>';
            }
        else
            {
            tmp = img;
            }

        document.write (tmp);
        document.write (separator);
        // alert(tmp);
        }
    }

function begin_layout (curpage,rel)
    {
    var bg;

    bg = rel + "graphics/bg_border.jpg";

    document.write ('<table align="center" width="800" border="0" cellspacing="0" cellpadding="0" background="' + bg + '">');
    document.write ('  <tbody>');
    document.write ('    <tr>');
    document.write ('      <td background="' + bg + '"><img src="' + bg + '" width="10" height="10"></td>');
    document.write ('      <td background="' + bg + '"><img src="' + bg + '" width="780" height="10"></td>');
    document.write ('      <td background="' + bg + '"><img src="' + bg + '" width="10" height="10"></td>');
    document.write ('    </tr>');
    document.write ('    <tr>');
    document.write ('      <td background="' + bg + '"><img src="' + bg + '" width="10" height="10"></td>');
    document.write ('      <td align="center">');
    create_toc (curpage,rel);
    document.write ('</td>');
    document.write ('      <td background="' + bg + '"><img src="' + bg + '" width="10" height="10"></td>');
    document.write ('    </tr>');
    document.write ('    <tr>');
    document.write ('      <td background="' + bg + '"><img src="' + bg + '" width="10" height="10"></td>');
    document.write ('      <td background="' + bg + '"><img src="' + bg + '" width="780" height="10"></td>');
    document.write ('      <td background="' + bg + '"><img src="' + bg + '" width="10" height="10"></td>');
    document.write ('    </tr>');
    document.write ('    <tr>');
    document.write ('      <td background="' + bg + '"><img src="' + bg + '" width="10" height="10"></td>');
    document.write ('      <td>');
    }

function end_layout(rel)
    {
    var bg;

    if (! rel)
        {
        rel = "";
        }

    bg = rel + "graphics/bg_border.jpg";

    document.write ('      </td>');
    document.write ('      <td background="' + bg + '"><img src="' + bg + '" width="10" height="10"></td>');
    document.write ('    </tr>');
    document.write ('    <tr>');
    document.write ('      <td background="' + bg + '"><img src="' + bg + '" width="10" height="10"></td>');
    document.write ('      <td background="' + bg + '"><img src="' + bg + '" width="780" height="10"></td>');
    document.write ('      <td background="' + bg + '"><img src="' + bg + '" width="10" height="10"></td>');
    document.write ('    </tr>');
    document.write ('  </tbody>');
    document.write ('</table>');
    }