<PUBLIC:COMPONENT lightweight>

<PUBLIC:PROPERTY name="selected" get="get_selected" put="put_selected"/>
<PUBLIC:PROPERTY name=paddingWidth />
<PUBLIC:PROPERTY name=borderWidth />

<PUBLIC:ATTACH event="onmouseover" onevent="OnMouseOver();"/>
<PUBLIC:ATTACH event="onmouseout"  onevent="OnMouseOut();" />
<PUBLIC:ATTACH event="onkeypress"  onevent="OnKeyPress();" />
<PUBLIC:ATTACH event="onkeydown"   onevent="OnKeyDown();" />

</PUBLIC:COMPONENT>

<SCRIPT language="JavaScript">

var _bSelected = false;
var _nPadding = paddingWidth ? parseInt(paddingWidth) : 0;
var _nBorder = borderWidth ? parseInt(borderWidth) : 1;

function Hilite()
{
    style.padding = _nPadding;
    style.borderWidth = _nBorder;
}

function Unhilite()
{
    style.borderWidth = 0;
    style.padding = (_nPadding + _nBorder);
}

// Set the initial padding now
Unhilite();

function get_selected()
{
    return _bSelected;
}

function put_selected(val)
{
    if (val == true)
    {
        _bSelected = true;
        Hilite();
    }
    else
    {
        _bSelected = false;
        Unhilite();
    }
}

function OnMouseOver()
{
    if (!_bSelected && !this.contains(event.fromElement) && this.contains(event.srcElement))
        Hilite();
}

function OnMouseOut()
{
    if (!_bSelected && !this.contains(event.toElement))
        Unhilite();
}

function OnKeyPress()
{
    // If it's Enter, click the element and stop the event
    // from bubbling so it doesn't go to the default button.

    if (event.keyCode == 13)
    {
        event.returnValue = false;
        event.srcElement.click();
    }
}

function OnKeyDown()
{
    top.window.OnKeySelect(0, event);
}

</SCRIPT>
