/* This script executes at window onload, finds the search box, and changes the 
 * button to a javascript link.
 * 
 * We chose this option for the search box to avoid the ugly x and y GET 
 * parameters you get with an image button.
 *
 */

Event.observe(window, 'load', init);

function init()
{
    // * retrieve the required element
    searchBox = $('search-box');

    searchButton = $('search-button');
    searchButton.remove();

    // * Create the search button
    searchButtonLinkText =
        new Element('span', {}).update("Zoek");
    searchButtonLink =
        new Element('a', { 
                'id': 'search-button-link',
                'class': 'foo',
                href: '#'
            });
    searchButtonLink.appendChild(searchButtonLinkText);

    // * Add the event listener
    searchButtonLink.observe('click', searchButtonClick)

    // * Add it to the form
    searchBox.appendChild(searchButtonLink);

    // * Signal the update of the style
    searchBox.addClassName('replaced');
}

/**
 * Called when the link in the search menu is clicked.
 */
function searchButtonClick(event)
{
    // * Retrieve the link's parent (the form)
    // * (needs to be var for it to work in IE)
    var par = event.element().up('form');
    
    // * Submit the form
    par.submit();
}