function selectPage(cname)
{
    $$(".catimg").each(
        function(e)
        {
            if (e.id == ('catimg_' + cname))
                e.addClassName('sel');
            else
                e.removeClassName('sel');
        }
    );

    $$(".cat").each(
        function(e)
        {
            if (e.id == ('cat_' + cname))
                e.show();
            else
                e.hide();
        }
    );

    var exs = $$('#cat_' + cname + ' .ex');
    if (exs.length > 0)
    {
        var ex = exs[0];
        var exid = ex.id.replace(/^ex_/, '');
        selectExample(exid);
    }
}


function selectExample(exid)
{
    $$(".exampleimg").each(
        function(e)
        {
            if (e.id == ('exampleimg_' + exid))
                e.addClassName('sel');
            else
                e.removeClassName('sel');
        }
    );

    $$(".ex").each(
        function(e)
        {
            if (e.id == ('ex_' + exid))
                e.show();
            else
                e.hide();
        }
    );
}

document.observe(
    "dom:loaded", 
    function()
    {
        selectPage(default_page);
        example_init();
        $$('.catimg').each(
            function(e)
            {
                e.onclick = (
                    function() {
                        var cname = this.id.replace(/^catimg_/, '');
                        selectPage(cname);
                    }
                );
            }
        );

        $$('.exampleimg').each(
            function(e)
            {
                e.onclick = (
                    function() {
                        var eid = this.id.replace(/^exampleimg_/, '');
                        selectExample(eid);
                    }
                );
            }
        );
    }
)